[stdf]Update Popup compoent, demo and documents.

demo/src/routes/en_US/popup/+page.svelte

@@ -3,77 +3,77 @@
 	import { Cell, Popup, Button, Icon } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
 	<Popup bind:visible={visible1} />
 
-	<Cell title="Top position" on:click={() => (visible2 = true)} />
+	<Cell title="Top position" onclick={() => (visible2 = true)} />
 	<Popup bind:visible={visible2} position="top" />
 
-	<Cell title="Left position" on:click={() => (visible3 = true)} />
+	<Cell title="Left position" onclick={() => (visible3 = true)} />
 	<Popup bind:visible={visible3} position="left" />
 
-	<Cell title="Right side position" on:click={() => (visible4 = true)} />
+	<Cell title="Right side position" onclick={() => (visible4 = true)} />
 	<Popup bind:visible={visible4} position="right" />
 
-	<Cell title="Intermediate position" on:click={() => (visible5 = true)} />
+	<Cell title="Intermediate position" onclick={() => (visible5 = true)} />
 	<Popup bind:visible={visible5} position="center" />
 
-	<Cell title="Rounded corners at the top" on:click={() => (visible6 = true)} />
+	<Cell title="Rounded corners at the top" onclick={() => (visible6 = true)} />
 	<Popup bind:visible={visible6} radius="xl" />
 
-	<Cell title="Have rounded corners and spacing" on:click={() => (visible7 = true)} />
+	<Cell title="Have rounded corners and spacing" onclick={() => (visible7 = true)} />
 	<Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
 
-	<Cell title="The center is spaced and rounded" on:click={() => (visible10 = true)} />
+	<Cell title="The center is spaced and rounded" onclick={() => (visible10 = true)} />
 	<Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
 
-	<Cell title="Set animation easing to appear" detail="rebound" on:click={() => (visible11 = true)} />
+	<Cell title="Set animation easing to appear" detail="rebound" onclick={() => (visible11 = true)} />
 	<Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
 
-	<Cell title="Let's replace it with a slow animation" detail="bounce" on:click={() => (visible16 = true)} />
+	<Cell title="Let's replace it with a slow animation" detail="bounce" onclick={() => (visible16 = true)} />
 	<Popup bind:visible={visible16} easeType="bounceOut" />
 
-	<Cell title="Different size" on:click={() => (visible8 = true)} />
+	<Cell title="Different size" onclick={() => (visible8 = true)} />
 	<Popup bind:visible={visible8} size={80} />
 
-	<Cell title="The left side has different sizes" on:click={() => (visible9 = true)} />
+	<Cell title="The left side has different sizes" onclick={() => (visible9 = true)} />
 	<Popup bind:visible={visible9} size={80} position="left" />
 
-	<Cell title="The mask is completely transparent and fuzzy" on:click={() => (visible12 = true)} />
-	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
+	<Cell title="The mask is completely transparent and fuzzy" onclick={() => (visible12 = true)} />
+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'base' }} />
 
-	<Cell title="Clicking the mask does not close" on:click={() => (visible13 = true)} />
+	<Cell title="Clicking the mask does not close" onclick={() => (visible13 = true)} />
 	<Popup bind:visible={visible13} maskClosable={false}>
 		<div class="flex flex-col justify-center h-full">
-			<Button on:click={() => (visible13 = false)}>Shut down</Button>
+			<Button onclick={() => (visible13 = false)}>Shut down</Button>
 		</div>
 	</Popup>
 
-	<Cell title="Size automatic" detail="Depends on internal elements" on:click={() => (visible14 = true)} />
+	<Cell title="Size automatic" detail="Depends on internal elements" onclick={() => (visible14 = true)} />
 	<Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
 		<div class="w-full text-center">
 			<div class="py-6 font-bold text-xl">AirPods Pro connected</div>
@@ -87,22 +87,16 @@
 		</div>
 	</Popup>
 
-	<Cell title="The left position is automatically sized" on:click={() => (visible20 = true)} />
+	<Cell title="The left position is automatically sized" onclick={() => (visible20 = true)} />
 	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
 		<div class="h-full flex flex-col justify-around text-primary dark:text-dark">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>Home page</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>set</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>about</div>
+			<button class="p-6" onclick={() => (visible20 = false)}>Home</button>
+			<button class="p-6" onclick={() => (visible20 = false)}>Setting</button>
+			<button class="p-6" onclick={() => (visible20 = false)}>About</button>
 		</div>
 	</Popup>
 
-	<Cell title="Size automatic background transparent" on:click={() => (visible17 = true)} />
+	<Cell title="Size automatic background transparent" onclick={() => (visible17 = true)} />
 	<Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
 		<div class="w-full bg-black text-white rounded-full flex justify-between p-3">
 			<div class="flex">
@@ -125,7 +119,7 @@
 		</div>
 	</Popup>
 
-	<Cell title="The center position has a transparent background" on:click={() => (visible18 = true)} />
+	<Cell title="The center position has a transparent background" onclick={() => (visible18 = true)} />
 	<Popup bind:visible={visible18} size={0} position="center" transparent>
 		<div class="flex flex-col justify-center">
 			<div class="w-1/2 m-auto">
@@ -134,36 +128,44 @@
 		</div>
 	</Popup>
 
-	<Cell title="Reverse color mask" on:click={() => (visible15 = true)} />
+	<Cell title="Reverse color mask" onclick={() => (visible15 = true)} />
 	<Popup bind:visible={visible15} mask={{ inverse: true }} />
 
-	<Cell title="Overflow roll" on:click={() => (visible19 = true)} />
+	<Cell title="Overflow roll" onclick={() => (visible19 = true)} />
 	<Popup bind:visible={visible19} size={30} position="center">
 		<Aphorism num={4} />
 	</Popup>
 
-	<Cell title="allow body roll" on:click={() => (visible21 = true)} />
+	<Cell title="allow body roll" onclick={() => (visible21 = true)} />
 	<Popup bind:visible={visible21} allowBodyScroll />
 </div>
 
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //Incoming data
-
-    export let num = 0; //Display number
-    export let compact = false; //Compact or not mode
-
-    //num bars were randomly extracted from aphorisms
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
-<div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+<div class="{compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5">
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

demo/src/routes/zh_CN/popup/+page.svelte

@@ -3,77 +3,77 @@
 	import { Cell, Popup, Button, Icon } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<Popup bind:visible={visible1} />
 
-	<Cell title="顶部位置" on:click={() => (visible2 = true)} />
+	<Cell title="顶部位置" onclick={() => (visible2 = true)} />
 	<Popup bind:visible={visible2} position="top" />
 
-	<Cell title="左侧位置" on:click={() => (visible3 = true)} />
+	<Cell title="左侧位置" onclick={() => (visible3 = true)} />
 	<Popup bind:visible={visible3} position="left" />
 
-	<Cell title="右侧位置" on:click={() => (visible4 = true)} />
+	<Cell title="右侧位置" onclick={() => (visible4 = true)} />
 	<Popup bind:visible={visible4} position="right" />
 
-	<Cell title="中间位置" on:click={() => (visible5 = true)} />
+	<Cell title="中间位置" onclick={() => (visible5 = true)} />
 	<Popup bind:visible={visible5} position="center" />
 
-	<Cell title="顶部位置有圆角" on:click={() => (visible6 = true)} />
+	<Cell title="顶部位置有圆角" onclick={() => (visible6 = true)} />
 	<Popup bind:visible={visible6} radius="xl" />
 
-	<Cell title="有圆角和间距" on:click={() => (visible7 = true)} />
+	<Cell title="有圆角和间距" onclick={() => (visible7 = true)} />
 	<Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
 
-	<Cell title="中间位置有间距和圆角" on:click={() => (visible10 = true)} />
+	<Cell title="中间位置有间距和圆角" onclick={() => (visible10 = true)} />
 	<Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
 
-	<Cell title="设置出现动画缓动" detail="回弹" on:click={() => (visible11 = true)} />
+	<Cell title="设置出现动画缓动" detail="回弹" onclick={() => (visible11 = true)} />
 	<Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
 
-	<Cell title="换一个出现动画缓动" detail="弹跳" on:click={() => (visible16 = true)} />
+	<Cell title="换一个出现动画缓动" detail="弹跳" onclick={() => (visible16 = true)} />
 	<Popup bind:visible={visible16} easeType="bounceOut" />
 
-	<Cell title="不同大小" on:click={() => (visible8 = true)} />
+	<Cell title="不同大小" onclick={() => (visible8 = true)} />
 	<Popup bind:visible={visible8} size={80} />
 
-	<Cell title="左侧位置不同大小" on:click={() => (visible9 = true)} />
+	<Cell title="左侧位置不同大小" onclick={() => (visible9 = true)} />
 	<Popup bind:visible={visible9} size={80} position="left" />
 
-	<Cell title="遮罩完全透明且模糊" on:click={() => (visible12 = true)} />
-	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
+	<Cell title="遮罩完全透明且模糊" onclick={() => (visible12 = true)} />
+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'base' }} />
 
-	<Cell title="点击遮罩不会关闭" on:click={() => (visible13 = true)} />
+	<Cell title="点击遮罩不会关闭" onclick={() => (visible13 = true)} />
 	<Popup bind:visible={visible13} maskClosable={false}>
 		<div class="flex flex-col justify-center h-full">
-			<Button on:click={() => (visible13 = false)}>关闭</Button>
+			<Button onclick={() => (visible13 = false)}>关闭</Button>
 		</div>
 	</Popup>
 
-	<Cell title="大小自动" detail="取决于内部元素" on:click={() => (visible14 = true)} />
+	<Cell title="大小自动" detail="取决于内部元素" onclick={() => (visible14 = true)} />
 	<Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
 		<div class="w-full text-center">
 			<div class="py-6 font-bold text-xl">AirPods Pro 已连接</div>
@@ -87,22 +87,16 @@
 		</div>
 	</Popup>
 
-	<Cell title="左侧位置自动大小" on:click={() => (visible20 = true)} />
+	<Cell title="左侧位置自动大小" onclick={() => (visible20 = true)} />
 	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
 		<div class="h-full flex flex-col justify-around text-primary dark:text-dark">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>首页</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>设置</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="p-6" on:click={() => (visible20 = false)}>关于</div>
+			<button class="p-6" onclick={() => (visible20 = false)}>首页</button>
+			<button class="p-6" onclick={() => (visible20 = false)}>设置</button>
+			<button class="p-6" onclick={() => (visible20 = false)}>关于</button>
 		</div>
 	</Popup>
 
-	<Cell title="大小自动背景透明" on:click={() => (visible17 = true)} />
+	<Cell title="大小自动背景透明" onclick={() => (visible17 = true)} />
 	<Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
 		<div class="w-full bg-black text-white rounded-full flex justify-between p-3">
 			<div class="flex">
@@ -125,7 +119,7 @@
 		</div>
 	</Popup>
 
-	<Cell title="居中位置背景透明" on:click={() => (visible18 = true)} />
+	<Cell title="居中位置背景透明" onclick={() => (visible18 = true)} />
 	<Popup bind:visible={visible18} size={0} position="center" transparent>
 		<div class="flex flex-col justify-center">
 			<div class="w-1/2 m-auto">
@@ -134,36 +128,44 @@
 		</div>
 	</Popup>
 
-	<Cell title="反色遮罩" on:click={() => (visible15 = true)} />
+	<Cell title="反色遮罩" onclick={() => (visible15 = true)} />
 	<Popup bind:visible={visible15} mask={{ inverse: true }} />
 
-	<Cell title="溢出滚动" on:click={() => (visible19 = true)} />
+	<Cell title="溢出滚动" onclick={() => (visible19 = true)} />
 	<Popup bind:visible={visible19} size={30} position="center">
 		<Aphorism num={4} />
 	</Popup>
 
-	<Cell title="允许 body 滚动" on:click={() => (visible21 = true)} />
+	<Cell title="允许 body 滚动" onclick={() => (visible21 = true)} />
 	<Popup bind:visible={visible21} allowBodyScroll />
 </div>
 
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //引入数据
-
-    export let num = 0; //显示条数
-    export let compact = false; //是否紧凑模式
-
-    //从 aphorisms 随机取出 num 条数据
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
-<div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+<div class="{compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5">
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

doc/components/popup/api.md

@@ -1,37 +1,73 @@
 ## Popup Props
 
-| 属性               | 类型    | 默认值     | 可选值                                                                                         | 必传 | 说明                                         |
-| ------------------ | ------- | ---------- | ---------------------------------------------------------------------------------------------- | ---- | -------------------------------------------- |
-| visible            | Boolean | false      | true/false                                                                                     | N    | 是否显示。                                   |
-| size               | Number  | 40         | 0-100                                                                                          | N    | 弹出层大小，值为 0 时由内部元素决定。        |
-| position           | String  | 'bottom'   | 'center'/'top'/'bottom'/'left'/'right'                                                         | N    | 显示位置。                                   |
-| duration           | Number  | 450        | -                                                                                              | N    | 出现动画过渡时间，单位：ms。                 |
-| outDuration        | Number  | 240        | -                                                                                              | N    | 退出动画过渡时间，单位：ms。                 |
-| easeType           | String  | 'cubicOut' | 支持 31 种效果，具体数值参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)。 | N    | 出现动画类型。                               |
-| easeOutType        | String  | 'cubicOut' | 支持 31 种效果，具体数值参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)。 | N    | 退出动画类型。                               |
-| px                 | String  | '0'        | '0'/'1'/'2'/'3'/'4'/'5'/'6'/'8'/'10'/'12'/'16'/'20'                                            | N    | 左右间距。                                   |
-| py                 | String  | '0'        | '0'/'1'/'2'/'3'/'4'/'5'/'6'/'8'/'10'/'12'/'16'/'24'/'32'/'48'/'64'                             | N    | 上下间距。                                   |
-| mask               | Object  | {}         | 参考 Mask Props                                                                                | N    | 遮罩层参数。                                 |
-| maskClosable       | Boolean | true       | true/false                                                                                     | N    | 点击遮罩层是否关闭。                         |
-| radiusPosition     | String  | 'top'      | 'all'/'top'/'bottom'/'left'/'right'                                                            | N    | 圆角位置。                                   |
-| radius             | String  | 'none'     | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl'/'full'                                                | N    | 圆角大小。                                   |
-| transitionDistance | Number  | 0          | -                                                                                              | N    | 动画距离，当弹出层大小由内部元素决定时生效。 |
-| transparent        | Boolean | false      | true/false                                                                                     | N    | 背景是否透明。                               |
-| allowBodyScroll    | Boolean | true       | true/false                                                                                     | N    | 弹出层显示时是否允许 body 滚动。             |
-| zIndex             | Number  | 600        | -                                                                                              | N    | z-index。                                    |
-| dynamicFixed       | Boolean | true       | true/false                                                                                     | N    | 是否动态固定。                               |
-| hideScrollbar      | Boolean | false      | true/false                                                                                     | N    | 是否隐藏滚动区域滚动条。                     |
+| 名称               | 类型                                                                               | 默认值       | 必传 | 说明                                                                                         |
+| ------------------ | ---------------------------------------------------------------------------------- | ------------ | ---- | -------------------------------------------------------------------------------------------- |
+| visible            | `boolean`                                                                          | `false`      | N    | 是否显示。                                                                                   |
+| size               | `number`                                                                           | `40`         | N    | 弹出层大小，值为 0 时由内部元素决定。                                                        |
+| position           | `'center'\|'top'\|'bottom'\|'left'\|'right'`                                       | `'bottom'`   | N    | 显示位置。                                                                                   |
+| duration           | `number`                                                                           | `450`        | N    | 出现动画过渡时间，单位：ms。                                                                 |
+| outDuration        | `number`                                                                           | `240`        | N    | 退出动画过渡时间，单位：ms。                                                                 |
+| easeType           | `SvelteEasing`                                                                     | `'cubicOut'` | N    | 出现动画，共 31 个值，参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)。 |
+| easeOutType        | `SvelteEasing`                                                                     | `'cubicOut'` | N    | 退出动画，共 31 个值，参考 [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing)。 |
+| px                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'20'`                   | `'0'`        | N    | 左右间距。                                                                                   |
+| py                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'` | `'0'`        | N    | 上下间距。                                                                                   |
+| mask               | `Mask`                                                                             | `{}`         | N    | 遮罩层参数 [Mask Props](https://stdf.design/#/components?nav=mask&tab=1)。                   |
+| maskClosable       | `boolean`                                                                          | `true`       | N    | 点击遮罩层是否关闭。                                                                         |
+| radiusPosition     | `'all'\|'top'\|'bottom'\|'left'\|'right'`                                          | `'top'`      | N    | 圆角位置。                                                                                   |
+| radius             | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                           | `'none'`     | N    | 圆角大小。                                                                                   |
+| transitionDistance | `number`                                                                           | `0`          | N    | 动画距离，当弹出层大小由内部元素决定时生效。                                                 |
+| transparent        | `boolean`                                                                          | `false`      | N    | 背景是否透明。                                                                               |
+| allowBodyScroll    | `boolean`                                                                          | `true`       | N    | 弹出层显示时是否允许 body 滚动。                                                             |
+| zIndex             | `number`                                                                           | `600`        | N    | z-index。                                                                                    |
+| dynamicFixed       | `boolean`                                                                          | `true`       | N    | 是否动态固定。                                                                               |
+| hideScrollbar      | `boolean`                                                                          | `false`      | N    | 是否隐藏滚动区域滚动条。                                                                     |
 
 ## Popup Events
 
-| 名称      | 参数 | 描述                                                        |
-| --------- | ---- | ----------------------------------------------------------- |
-| open      | -    | 弹出层打开时触发。                                          |
-| clickMask | -    | 点击弹出层遮罩时触发，即使 maskClosable 为 false 也会触发。 |
-| close     | -    | 弹出层关闭时触发。                                          |
+| 名称        | 类型         | 参数 | 描述                                                        |
+| ----------- | ------------ | ---- | ----------------------------------------------------------- |
+| onclickMask | `() => void` | -    | 点击弹出层遮罩时触发，即使 maskClosable 为 false 也会触发。 |
+| onclose     | `() => void` | -    | 弹出层关闭时触发。                                          |
 
-## Popup Slots
+## Popup Snippets
 
-| 名称 | 说明         |
-| ---- | ------------ |
-| -    | Popup 内容。 |
+| 名称     | 说明         |
+| -------- | ------------ |
+| children | Popup 内容。 |
+
+## SvelteEasing
+
+```javascript
+type SvelteEasing =
+	| 'backIn'
+	| 'backInOut'
+	| 'backOut'
+	| 'bounceIn'
+	| 'bounceInOut'
+	| 'bounceOut'
+	| 'circIn'
+	| 'circInOut'
+	| 'circOut'
+	| 'cubicIn'
+	| 'cubicInOut'
+	| 'cubicOut'
+	| 'elasticIn'
+	| 'elasticInOut'
+	| 'elasticOut'
+	| 'expoIn'
+	| 'expoInOut'
+	| 'expoOut'
+	| 'linear'
+	| 'quadIn'
+	| 'quadInOut'
+	| 'quadOut'
+	| 'quartIn'
+	| 'quartInOut'
+	| 'quartOut'
+	| 'quintIn'
+	| 'quintInOut'
+	| 'quintOut'
+	| 'sineIn'
+	| 'sineInOut'
+	| 'sineOut';
+```

doc/components/popup/api_en.md

@@ -1,37 +1,73 @@
 ## Popup Props
 
-| Property           | Type    | Default Value | Optional Values                                                                                                                  | Required | Description                                                                                      |
-| ------------------ | ------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------ |
-| visible            | Boolean | false         | true/false                                                                                                                       | N        | Whether to display the component.                                                                |
-| size               | Number  | 40            | 0-100                                                                                                                            | N        | The size of the popup layer, with 0 being determined by the internal element.                    |
-| position           | String  | 'bottom'      | 'center'/'top'/'bottom'/'left'/'right'                                                                                           | N        | Display position.                                                                                |
-| duration           | Number  | 450           | -                                                                                                                                | N        | Transition time for appearing animation (in ms).                                                 |
-| outDuration        | Number  | 240           | -                                                                                                                                | N        | Transition time for exiting animation (in ms).                                                   |
-| easeType           | String  | 'cubicOut'    | Supports 31 types of effect, with specific values ​​referencing [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing). | N        | The type of appearing animation.                                                                 |
-| easeOutType        | String  | 'cubicOut'    | Supports 31 types of effect, with specific values ​​referencing [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing). | N        | The type of exiting animation.                                                                   |
-| px                 | String  | '0'           | '0'/'1'/'2'/'3'/'4'/'5'/'6'/'8'/'10'/'12'/'16'/'20'                                                                              | N        | Left and right distance.                                                                         |
-| py                 | String  | '0'           | '0'/'1'/'2'/'3'/'4'/'5'/'6'/'8'/'10'/'12'/'16'/'24'/'32'/'48'/'64'                                                               | N        | Up and down distance.                                                                            |
-| mask               | Object  | {}            | Refer to Mask Props                                                                                                              | N        | Parameters for the mask layer.                                                                   |
-| maskClosable       | Boolean | true          | true/false                                                                                                                       | No       | Determines whether clicking on the mask layer closes the popup.                                  |
-| radiusPosition     | String  | 'top'         | 'all'/'top'/'bottom'/'left'/'right'                                                                                              | No       | Determines the position of the rounded corners.                                                  |
-| radius             | String  | 'none'        | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl'/'full'                                                                                  | No       | Determines the size of the rounded corners.                                                      |
-| transitionDistance | Number  | 0             | -                                                                                                                                | No       | Determines the animation distance when the size of the popup is determined by internal elements. |
-| transparent        | Boolean | false         | true/false                                                                                                                       | No       | Determines whether the background is transparent.                                                |
-| allowBodyScroll    | Boolean | true          | true/false                                                                                                                       | No       | Determines whether body scrolling is allowed when the popup is displayed.                        |
-| zIndex             | Number  | 600           | -                                                                                                                                | No       | Determines the z-index of the popup.                                                             |
-| dynamicFixed       | Boolean | true          | true/false                                                                                                                       | No       | Determines whether the popup is dynamically fixed.                                               |
-| hideScrollbar      | Boolean | false         | true/false                                                                                                                       | No       | Determines whether to hide the scrollbar in the scrolling area.                                  |
+| Name               | Type                                                                               | Default      | Required | Description                                                                                                     |
+| ------------------ | ---------------------------------------------------------------------------------- | ------------ | -------- | --------------------------------------------------------------------------------------------------------------- |
+| visible            | `boolean`                                                                          | `false`      | N        | Whether to show the popup.                                                                                      |
+| size               | `number`                                                                           | `40`         | N        | Popup size. When value is 0, size is determined by inner elements.                                              |
+| position           | `'center'\|'top'\|'bottom'\|'left'\|'right'`                                       | `'bottom'`   | N        | Display position.                                                                                               |
+| duration           | `number`                                                                           | `450`        | N        | Enter animation transition duration in ms.                                                                      |
+| outDuration        | `number`                                                                           | `240`        | N        | Exit animation transition duration in ms.                                                                       |
+| easeType           | `SvelteEasing`                                                                     | `'cubicOut'` | N        | Enter animation type, 31 values available, see [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing). |
+| easeOutType        | `SvelteEasing`                                                                     | `'cubicOut'` | N        | Exit animation type, 31 values available, see [svelte/easing](https://svelte.dev/docs#run-time-svelte-easing).  |
+| px                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'20'`                   | `'0'`        | N        | Horizontal padding.                                                                                             |
+| py                 | `'0'\|'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'8'\|'10'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'` | `'0'`        | N        | Vertical padding.                                                                                               |
+| mask               | `Mask`                                                                             | `{}`         | N        | Mask layer parameters [Mask Props](https://stdf.design/#/components?nav=mask&tab=1).                            |
+| maskClosable       | `boolean`                                                                          | `true`       | N        | Whether clicking mask layer closes popup.                                                                       |
+| radiusPosition     | `'all'\|'top'\|'bottom'\|'left'\|'right'`                                          | `'top'`      | N        | Border radius position.                                                                                         |
+| radius             | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'`                           | `'none'`     | N        | Border radius size.                                                                                             |
+| transitionDistance | `number`                                                                           | `0`          | N        | Animation distance when popup size is determined by inner elements.                                             |
+| transparent        | `boolean`                                                                          | `false`      | N        | Whether background is transparent.                                                                              |
+| allowBodyScroll    | `boolean`                                                                          | `true`       | N        | Whether to allow body scrolling when popup is shown.                                                            |
+| zIndex             | `number`                                                                           | `600`        | N        | z-index value.                                                                                                  |
+| dynamicFixed       | `boolean`                                                                          | `true`       | N        | Whether to use dynamic fixed positioning.                                                                       |
+| hideScrollbar      | `boolean`                                                                          | `false`      | N        | Whether to hide scrollbar in scroll area.                                                                       |
 
 ## Popup Events
 
-| Name      | Parameters | Description                                                                           |
-| --------- | ---------- | ------------------------------------------------------------------------------------- |
-| open      | -          | Triggered when the popup is opened.                                                   |
-| clickMask | -          | Triggered when the mask layer of the popup is clicked, even if maskClosable is false. |
-| close     | -          | Triggered when the popup is closed.                                                   |
+| Name        | Type         | Params | Description                                                        |
+| ----------- | ------------ | ------ | ------------------------------------------------------------------ |
+| onclickMask | `() => void` | -      | Triggered when clicking mask layer, even if maskClosable is false. |
+| onclose     | `() => void` | -      | Triggered when popup closes.                                       |
 
-## Popup Slots
+## Popup Snippets
 
-| Name | Description               |
-| ---- | ------------------------- |
-| -    | The content of the popup. |
+| Name     | Description    |
+| -------- | -------------- |
+| children | Popup content. |
+
+## SvelteEasing
+
+```javascript
+type SvelteEasing =
+	| 'backIn'
+	| 'backInOut'
+	| 'backOut'
+	| 'bounceIn'
+	| 'bounceInOut'
+	| 'bounceOut'
+	| 'circIn'
+	| 'circInOut'
+	| 'circOut'
+	| 'cubicIn'
+	| 'cubicInOut'
+	| 'cubicOut'
+	| 'elasticIn'
+	| 'elasticInOut'
+	| 'elasticOut'
+	| 'expoIn'
+	| 'expoInOut'
+	| 'expoOut'
+	| 'linear'
+	| 'quadIn'
+	| 'quadInOut'
+	| 'quadOut'
+	| 'quartIn'
+	| 'quartInOut'
+	| 'quartOut'
+	| 'quintIn'
+	| 'quintInOut'
+	| 'quintOut'
+	| 'sineIn'
+	| 'sineInOut'
+	| 'sineOut';
+```

doc/components/popup/guide.md

@@ -45,7 +45,7 @@ BottomSheet 作为底部浮窗，就只能从底部弹出。「浮」体现在
 
 ## 事件
 
-弹出层默认点击遮罩会关闭，若不需要此功能，可以设置 maskClosable 为 false 。另外支持通过 on:open 和 on:close 来监听弹出层的出现与退出事件，而 on:clickMask 事件则是点击遮罩层时触发，即使 maskClosable 为 false 也会触发。
+弹出层默认点击遮罩会关闭，若不需要此功能，可以设置 maskClosable 为 false 。另外支持通过 onclose 来监听弹出层退出事件，而 onclickMask 事件则是点击遮罩层时触发，即使 maskClosable 为 false 也会触发。
 
 ## 优化
 

doc/components/popup/guide_en.md

@@ -45,7 +45,7 @@ The background color of the popup layer will automatically adapt to the light an
 
 ## Events
 
-By default, clicking on the mask of the popup layer will close it. If this function is not required, you can set `maskClosable` to false. Additionally, `on:open` and `on:close` are supported to listen for the appearance and exit events of the popup layer, while `on:clickMask` is triggered when the mask layer is clicked. Even if `maskClosable` is set to false, this event will still be triggered.
+By default, clicking on the mask of the popup layer will close it. If this function is not required, you can set `maskClosable` to false. Additionally, `onclose` is supported to listen for the exit event of the popup layer, while `onclickMask` is triggered when the mask layer is clicked. Even if `maskClosable` is set to false, this event will still be triggered.
 
 ## Optimization
 

packages/stdf/components/popup/Popup.svelte

@@ -26,7 +26,6 @@
 		dynamicFixed = true,
 		hideScrollbar = false,
 		children,
-		onopen,
 		onclose,
 		onclickMask,
 	} = $props();
@@ -34,96 +33,68 @@
 	// 通过不同位置结合圆角参数，生成不同的 class
 	// Generate different classes by combining different positions and corner parameters
 	const radiusFun = () => {
+		const radioMap = {
+			none: 'rounded-none',
+			base: 'rounded',
+			md: 'rounded-md',
+			lg: 'rounded-lg',
+			xl: 'rounded-xl',
+			'2xl': 'rounded-2xl',
+			'3xl': 'rounded-3xl',
+			full: 'rounded-full',
+		};
+		const radiusTopMap = {
+			none: 'rounded-t-none',
+			base: 'rounded-t',
+			md: 'rounded-t-md',
+			lg: 'rounded-t-lg',
+			xl: 'rounded-t-xl',
+			'2xl': 'rounded-t-2xl',
+			'3xl': 'rounded-t-3xl',
+			full: 'rounded-t-full',
+		};
+		const radiusBottomMap = {
+			none: 'rounded-b-none',
+			base: 'rounded-b',
+			md: 'rounded-b-md',
+			lg: 'rounded-b-lg',
+			xl: 'rounded-b-xl',
+			'2xl': 'rounded-b-2xl',
+			'3xl': 'rounded-b-3xl',
+			full: 'rounded-b-full',
+		};
+		const radiusLeftMap = {
+			none: 'rounded-l-none',
+			base: 'rounded-l',
+			md: 'rounded-l-md',
+			lg: 'rounded-l-lg',
+			xl: 'rounded-l-xl',
+			'2xl': 'rounded-l-2xl',
+			'3xl': 'rounded-l-3xl',
+			full: 'rounded-l-full',
+		};
+		const radiusRightMap = {
+			none: 'rounded-r-none',
+			base: 'rounded-r',
+			md: 'rounded-r-md',
+			lg: 'rounded-r-lg',
+			xl: 'rounded-r-xl',
+			'2xl': 'rounded-r-2xl',
+			'3xl': 'rounded-r-3xl',
+			full: 'rounded-r-full',
+		};
 		if (radiusPosition === 'all') {
-			if (radius === 'none') {
-				return 'rounded-none';
-			} else if (radius === 'base') {
-				return 'rounded';
-			} else if (radius === 'md') {
-				return 'rounded-md';
-			} else if (radius === 'lg') {
-				return 'rounded-lg';
-			} else if (radius === 'xl') {
-				return 'rounded-xl';
-			} else if (radius === '2xl') {
-				return 'rounded-2xl';
-			} else if (radius === '3xl') {
-				return 'rounded-3xl';
-			} else if (radius === 'full') {
-				return 'rounded-full';
-			}
+			return radioMap[radius];
 		} else if (radiusPosition === 'top') {
-			if (radius === 'none') {
-				return 'rounded-t-none';
-			} else if (radius === 'base') {
-				return 'rounded-t';
-			} else if (radius === 'md') {
-				return 'rounded-t-md';
-			} else if (radius === 'lg') {
-				return 'rounded-t-lg';
-			} else if (radius === 'xl') {
-				return 'rounded-t-xl';
-			} else if (radius === '2xl') {
-				return 'rounded-t-2xl';
-			} else if (radius === '3xl') {
-				return 'rounded-t-3xl';
-			} else if (radius === 'full') {
-				return 'rounded-t-full';
-			}
+			return radiusTopMap[radius];
 		} else if (radiusPosition === 'bottom') {
-			if (radius === 'none') {
-				return 'rounded-b-none';
-			} else if (radius === 'base') {
-				return 'rounded-b';
-			} else if (radius === 'md') {
-				return 'rounded-b-md';
-			} else if (radius === 'lg') {
-				return 'rounded-b-lg';
-			} else if (radius === 'xl') {
-				return 'rounded-b-xl';
-			} else if (radius === '2xl') {
-				return 'rounded-b-2xl';
-			} else if (radius === '3xl') {
-				return 'rounded-b-3xl';
-			} else if (radius === 'full') {
-				return 'rounded-b-full';
-			}
+			return radiusBottomMap[radius];
 		} else if (radiusPosition === 'left') {
-			if (radius === 'none') {
-				return 'rounded-l-none';
-			} else if (radius === 'base') {
-				return 'rounded-l';
-			} else if (radius === 'md') {
-				return 'rounded-l-md';
-			} else if (radius === 'lg') {
-				return 'rounded-l-lg';
-			} else if (radius === 'xl') {
-				return 'rounded-l-xl';
-			} else if (radius === '2xl') {
-				return 'rounded-l-2xl';
-			} else if (radius === '3xl') {
-				return 'rounded-l-3xl';
-			} else if (radius === 'full') {
-				return 'rounded-l-full';
-			}
+			return radiusLeftMap[radius];
 		} else if (radiusPosition === 'right') {
-			if (radius === 'none') {
-				return 'rounded-r-none';
-			} else if (radius === 'base') {
-				return 'rounded-r';
-			} else if (radius === 'md') {
-				return 'rounded-r-md';
-			} else if (radius === 'lg') {
-				return 'rounded-r-lg';
-			} else if (radius === 'xl') {
-				return 'rounded-r-xl';
-			} else if (radius === '2xl') {
-				return 'rounded-r-2xl';
-			} else if (radius === '3xl') {
-				return 'rounded-r-3xl';
-			} else if (radius === 'full') {
-				return 'rounded-r-full';
-			}
+			return radiusRightMap[radius];
+		} else {
+			return '';
 		}
 	};
 
@@ -137,22 +108,13 @@
 		center: ' flex-col justify-center',
 	};
 
-	// 监听 visible 变化派发事件
-	// Listen to the change of visible and dispatch events
-	$effect(() => {
-		if (visible) {
-			onopen && onopen();
-		} else {
-			onclose && onclose();
-		}
-	});
-
 	// 点击遮罩时派发事件
 	// Dispatch events when clicking the mask
 	const clickMask = () => {
 		onclickMask && onclickMask();
 		if (maskClosable) {
 			visible = false;
+			onclose && onclose();
 		}
 	};
 
@@ -266,8 +228,8 @@
 
 {#if visible}
 	<div
-		class={`fixed w-screen h-screen inset-0 flex${positionClass[position] || positionClass['bottom']} px-0 pointer-events-none`}
-		style={`z-index:${zIndex};height:${innerHeight}px`}
+		class="fixed w-screen h-screen inset-0 flex{positionClass[position] || positionClass['bottom']} px-0 pointer-events-none"
+		style="z-index:{zIndex};height:{innerHeight}px"
 	>
 		<Transition
 			{visible}
@@ -278,17 +240,15 @@
 			transitionParams={transitionParamsFun()}
 			transitionOutParams={transitionOutParamsFun()}
 		>
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} ${radiusFun()} overflow-y-auto`}
+			<button
+				class="w-full h-full{transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} {radiusFun()} overflow-y-auto"
 				class:popup-container={hideScrollbar}
 				onclick={e => {
 					e.stopPropagation();
 				}}
 			>
 				{@render children?.()}
-			</div>
+			</button>
 		</Transition>
 	</div>
 {/if}