[stdf]Update Dialog compoent, demo and documents.

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

@@ -3,38 +3,40 @@
 	import { Dialog, Cell, Toast, Loading } 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 toastVisible = false;
-	let toastVisible2 = false;
-	let toastVisible3 = false;
-	let toastVisible4 = false;
-
-	$: if (visible8) {
-		setTimeout(() => {
-			visible8 = false;
-		}, 3000);
-	}
-
-	let loading = 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 toastVisible = $state(false);
+	let toastVisible2 = $state(false);
+	let toastVisible3 = $state(false);
+	let toastVisible4 = $state(false);
+
+	$effect(() => {
+		if (visible8) {
+			setTimeout(() => {
+				visible8 = false;
+			}, 3000);
+		}
+	});
+
+	let loading = $state(false);
 	const somethingFnc = () => {
 		loading = true;
 		setTimeout(() => {
@@ -46,107 +48,121 @@
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
-	<Dialog bind:visible={visible1} title="Li Xiaoyao" content="Do you confirm that going to Xianling Island?" />
-
-	<Cell title="Content use slot" on:click={() => (visible2 = true)} />
-	<Dialog bind:visible={visible2} contentSlot>
-		<Aphorism slot="content" num={1} compact />
+	<Cell title="Basic Usage" onclick={() => (visible1 = true)} />
+	<Dialog bind:visible={visible1} title="Li Xiaoyao" content="Go to Fairy Island?" />
+
+	<Cell title="Content with Snippet" onclick={() => (visible2 = true)} />
+	<Dialog bind:visible={visible2}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Dialog>
 
-	<Cell title="Display the title" on:click={() => (visible3 = true)} />
+	<Cell title="No Title" onclick={() => (visible3 = true)} />
 	<Dialog bind:visible={visible3} title="" />
 
-	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
+	<Cell title="Close on Mask Click" onclick={() => (visible5 = true)} />
 	<Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
 
-	<Cell title="Custom icon" on:click={() => (visible6 = true)} />
+	<Cell title="Custom Icon" onclick={() => (visible6 = true)} />
 	<Dialog
 		bind:visible={visible6}
 		content="Please wear a mask!"
 		showIcon
 		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
-		secondaryText="Not carried"
+		secondaryText="No mask"
 		primaryText="OK"
 	/>
 
-	<Cell title="The content uses slot and rolls" on:click={() => (visible4 = true)} />
-	<Dialog bind:visible={visible4} contentSlot>
-		<div slot="content" class="max-h-56 overflow-auto">
-			<Aphorism num={6} compact />
-		</div>
+	<Cell title="Scrollable Content" onclick={() => (visible4 = true)} />
+	<Dialog bind:visible={visible4}>
+		{#snippet contentChild()}
+			<div class="max-h-56 overflow-auto">
+				<Aphorism num={6} compact />
+			</div>
+		{/snippet}
 	</Dialog>
 
-	<Cell title="Another animation effect" on:click={() => (visible11 = true)} />
-	<Dialog bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
+	<Cell title="Bounce Animation" onclick={() => (visible11 = true)} />
+	<Dialog bind:visible={visible11} content="Bounce transition" popup={{ easeType: 'backOut' }} />
 
-	<Cell title="Title left" on:click={() => (visible7 = true)} />
-	<Dialog bind:visible={visible7} title="Title left" titleAlign="left" />
+	<Cell title="Left Title" onclick={() => (visible7 = true)} />
+	<Dialog bind:visible={visible7} title="Left Title" titleAlign="left" />
 
-	<Cell title="Automatically close" on:click={() => (visible8 = true)} />
-	<Dialog bind:visible={visible8} content="do not move!I disappeared immediately after 3 seconds!" />
+	<Cell title="Auto Close" onclick={() => (visible8 = true)} />
+	<Dialog bind:visible={visible8} content="Don't move! Closing in 3s!" />
 
-	<Cell title="The main button accounts for a little more" on:click={() => (visible9 = true)} />
+	<Cell title="Primary Button Ratio" onclick={() => (visible9 = true)} />
 	<Dialog bind:visible={visible9} btnRatio={[3, 2]} />
 
-	<Cell title="Primary button position reverse" on:click={() => (visible10 = true)} />
+	<Cell title="Reverse Button Order" onclick={() => (visible10 = true)} />
 	<Dialog bind:visible={visible10} btnReverse />
 
-	<Cell title="The button spacing is larger" on:click={() => (visible19 = true)} />
+	<Cell title="Larger Button Gap" onclick={() => (visible19 = true)} />
 	<Dialog bind:visible={visible19} btnGap="16" />
 
-	<Cell title="The button is pure text" on:click={() => (visible12 = true)} />
+	<Cell title="Text Buttons" onclick={() => (visible12 = true)} />
 	<Dialog bind:visible={visible12} btnStyle="text" />
 
-	<Cell title="There is a division of the button for the button" on:click={() => (visible13 = true)} />
+	<Cell title="Text Buttons with Line" onclick={() => (visible13 = true)} />
 	<Dialog bind:visible={visible13} btnStyle="textLine" />
 
-	<Cell title="Full rounded button" on:click={() => (visible15 = true)} />
+	<Cell title="Rounded Buttons" onclick={() => (visible15 = true)} />
 	<Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
 
-	<Cell title="Monitoring secondary event" on:click={() => (visible14 = true)} />
-	<Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
-	<Toast bind:visible={toastVisible} message="Click to cancel!" />
-
-	<Cell title="Supervision and closing incident" on:click={() => (visible16 = true)} />
-	<Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
-	<Toast bind:visible={toastVisible2} message="Close Dialog!" />
-
-	<Cell title="Main incident" on:click={() => (visible17 = true)} />
-	<Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
-	<Toast bind:visible={toastVisible3} message="Click to confirm!" />
-
-	<Cell title="Main events asynchronous execution" on:click={() => (visible18 = true)} />
-	<Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="Ghost" content="Do you have to enter the lock demon tower?">
-		<span slot="primary">
-			{#if loading}
-				<Loading inverse width="12" height="6" type="1_17" />
-			{:else}
-				Enter
-			{/if}
-		</span>
+	<Cell title="Secondary Event" onclick={() => (visible14 = true)} />
+	<Dialog bind:visible={visible14} onsecondary={() => (toastVisible = true)} />
+	<Toast bind:visible={toastVisible} message="Cancelled!" />
+
+	<Cell title="Close Event" onclick={() => (visible16 = true)} />
+	<Dialog bind:visible={visible16} onclose={() => (toastVisible2 = true)} />
+	<Toast bind:visible={toastVisible2} message="Dialog closed!" />
+
+	<Cell title="Primary Event" onclick={() => (visible17 = true)} />
+	<Dialog bind:visible={visible17} onprimary={() => (toastVisible3 = true)} />
+	<Toast bind:visible={toastVisible3} message="Confirmed!" />
+
+	<Cell title="Async Primary Event" onclick={() => (visible18 = true)} />
+	<Dialog bind:visible={visible18} onprimary={somethingFnc} title="Ghost" content="Enter the Demon Tower?">
+		{#snippet primaryChild()}
+			<span>
+				{#if loading}
+					<Loading inverse width="12" height="6" type="1_17" />
+				{:else}
+					Enter
+				{/if}
+			</span>
+		{/snippet}
 	</Dialog>
-	<Toast bind:visible={toastVisible4} message="Enter the lock demon tower!he lock demon tower!" />
+	<Toast bind:visible={toastVisible4} message="Entered the tower!" />
 </div>
 
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //Introduce data
-
-    export let num = 0; //Display number
-    export let compact = false; //Whether to compact mode
-
-    //Randomly remove NUM data 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/dialog/+page.svelte

@@ -3,38 +3,40 @@
 	import { Dialog, Cell, Toast, Loading } 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 toastVisible = false;
-	let toastVisible2 = false;
-	let toastVisible3 = false;
-	let toastVisible4 = false;
-
-	$: if (visible8) {
-		setTimeout(() => {
-			visible8 = false;
-		}, 3000);
-	}
-
-	let loading = 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 toastVisible = $state(false);
+	let toastVisible2 = $state(false);
+	let toastVisible3 = $state(false);
+	let toastVisible4 = $state(false);
+
+	$effect(() => {
+		if (visible8) {
+			setTimeout(() => {
+				visible8 = false;
+			}, 3000);
+		}
+	});
+
+	let loading = $state(false);
 	const somethingFnc = () => {
 		loading = true;
 		setTimeout(() => {
@@ -46,21 +48,23 @@
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<Dialog bind:visible={visible1} title="李逍遥" content="你确认前往仙灵岛吗？" />
 
-	<Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
-	<Dialog bind:visible={visible2} contentSlot>
-		<Aphorism slot="content" num={1} compact />
+	<Cell title="内容使用 Snippet" onclick={() => (visible2 = true)} />
+	<Dialog bind:visible={visible2}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Dialog>
 
-	<Cell title="不显示标题" on:click={() => (visible3 = true)} />
+	<Cell title="不显示标题" onclick={() => (visible3 = true)} />
 	<Dialog bind:visible={visible3} title="" />
 
-	<Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
+	<Cell title="点击遮罩关闭" onclick={() => (visible5 = true)} />
 	<Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
 
-	<Cell title="自定义图标" on:click={() => (visible6 = true)} />
+	<Cell title="自定义图标" onclick={() => (visible6 = true)} />
 	<Dialog
 		bind:visible={visible6}
 		content="请佩戴口罩！"
@@ -70,61 +74,65 @@
 		primaryText="好的"
 	/>
 
-	<Cell title="内容使用插槽且滚动" on:click={() => (visible4 = true)} />
-	<Dialog bind:visible={visible4} contentSlot>
-		<div slot="content" class="max-h-56 overflow-auto">
-			<Aphorism num={6} compact />
-		</div>
+	<Cell title="内容使用 Snippet 且滚动" onclick={() => (visible4 = true)} />
+	<Dialog bind:visible={visible4}>
+		{#snippet contentChild()}
+			<div class="max-h-56 overflow-auto">
+				<Aphorism num={6} compact />
+			</div>
+		{/snippet}
 	</Dialog>
 
-	<Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
+	<Cell title="另一种动画效果" onclick={() => (visible11 = true)} />
 	<Dialog bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
 
-	<Cell title="标题居左" on:click={() => (visible7 = true)} />
+	<Cell title="标题居左" onclick={() => (visible7 = true)} />
 	<Dialog bind:visible={visible7} title="标题居左" titleAlign="left" />
 
-	<Cell title="自动关闭" on:click={() => (visible8 = true)} />
+	<Cell title="自动关闭" onclick={() => (visible8 = true)} />
 	<Dialog bind:visible={visible8} content="别动！3 秒后我立即消失！" />
 
-	<Cell title="主按钮占比多一点" on:click={() => (visible9 = true)} />
+	<Cell title="主按钮占比多一点" onclick={() => (visible9 = true)} />
 	<Dialog bind:visible={visible9} btnRatio={[3, 2]} />
 
-	<Cell title="主次按钮位置反转" on:click={() => (visible10 = true)} />
+	<Cell title="主次按钮位置反转" onclick={() => (visible10 = true)} />
 	<Dialog bind:visible={visible10} btnReverse />
 
-	<Cell title="按钮间距大一点" on:click={() => (visible19 = true)} />
+	<Cell title="按钮间距大一点" onclick={() => (visible19 = true)} />
 	<Dialog bind:visible={visible19} btnGap="16" />
 
-	<Cell title="按钮为纯文字" on:click={() => (visible12 = true)} />
+	<Cell title="按钮为纯文字" onclick={() => (visible12 = true)} />
 	<Dialog bind:visible={visible12} btnStyle="text" />
 
-	<Cell title="按钮为纯文字有分割线" on:click={() => (visible13 = true)} />
+	<Cell title="按钮为纯文字有分割线" onclick={() => (visible13 = true)} />
 	<Dialog bind:visible={visible13} btnStyle="textLine" />
 
-	<Cell title="全圆角按钮" on:click={() => (visible15 = true)} />
+	<Cell title="全圆角按钮" onclick={() => (visible15 = true)} />
 	<Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
 
-	<Cell title="监听次要事件" on:click={() => (visible14 = true)} />
-	<Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
+	<Cell title="监听次要事件" onclick={() => (visible14 = true)} />
+	<Dialog bind:visible={visible14} onsecondary={() => (toastVisible = true)} />
 	<Toast bind:visible={toastVisible} message="点击了取消！" />
 
-	<Cell title="监听关闭事件" on:click={() => (visible16 = true)} />
-	<Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
+	<Cell title="监听关闭事件" onclick={() => (visible16 = true)} />
+	<Dialog bind:visible={visible16} onclose={() => (toastVisible2 = true)} />
 	<Toast bind:visible={toastVisible2} message="关闭了 Dialog！" />
 
-	<Cell title="监听主要事件" on:click={() => (visible17 = true)} />
-	<Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
+	<Cell title="监听主要事件" onclick={() => (visible17 = true)} />
+	<Dialog bind:visible={visible17} onprimary={() => (toastVisible3 = true)} />
 	<Toast bind:visible={toastVisible3} message="点击了确认！" />
 
-	<Cell title="异步执行主要事件" on:click={() => (visible18 = true)} />
-	<Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="小鬼" content="你一定要进入锁妖塔吗？">
-		<span slot="primary">
-			{#if loading}
-				<Loading inverse width="12" height="6" type="1_17" />
-			{:else}
-				进入
-			{/if}
-		</span>
+	<Cell title="异步执行主要事件" onclick={() => (visible18 = true)} />
+	<Dialog bind:visible={visible18} onprimary={somethingFnc} title="小鬼" content="你一定要进入锁妖塔吗？">
+		{#snippet primaryChild()}
+			<span>
+				{#if loading}
+					<Loading inverse width="12" height="6" type="1_17" />
+				{:else}
+					进入
+				{/if}
+			</span>
+		{/snippet}
 	</Dialog>
 	<Toast bind:visible={toastVisible4} message="已进入锁妖塔！" />
 </div>
@@ -132,21 +140,29 @@
 <!-- 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/dialog/api.md

@@ -1,38 +1,35 @@
 ## Dialog Props
 
-| 属性            | 类型    | 默认值                          | 可选值                        | 必传 | 说明                      |
-| --------------- | ------- | ------------------------------- | ----------------------------- | ---- | ------------------------- |
-| visible         | Boolean | false                           | true/false                    | N    | 是否显示。                |
-| title           | String  | 当前语言的 dialog.title         | -                             | N    | 标题。                    |
-| titleAlign      | String  | 'center'                        | 'left'/'center'/'right'       | N    | 标题对齐方式。            |
-| content         | String  | 当前语言的 dialog.content       | -                             | N    | 内容。                    |
-| contentSlot     | Boolean | false                           | true/false                    | N    | 内容是否使用 slot。       |
-| popup           | Object  | {}                              | 参考 Popup Props              | N    | 弹出层参数。              |
-| showIcon        | Boolean | false                           | true/false                    | N    | 是否显示图标。            |
-| icon            | Object  | {}                              | 参考 Icon Props               | N    | 图标参数。                |
-| btnStyle        | String  | 'button'                        | 'button'/'text'/'textLine'    | N    | 按钮样式。                |
-| primaryText     | String  | 当前语言的 dialog.primaryText   | -                             | N    | 主按钮文字。              |
-| primarySlot     | Boolean | false                           | true/false                    | N    | 主按钮内部是否使用 slot。 |
-| primaryButton   | Object  | {}                              | 参考 Button Props             | N    | 主按钮参数。              |
-| secondaryText   | String  | 当前语言的 dialog.secondaryText | -                             | N    | 次按钮文字。              |
-| secondaryButton | Object  | {}                              | 参考 Button Props             | N    | 次按钮参数。              |
-| btnRatio        | Array   | [1, 1]                          | -                             | N    | 主次按钮大小比例。        |
-| btnReverse      | Boolean | false                           | true/false                    | N    | 主次按钮位置是否反转。    |
-| secondaryClose  | Boolean | true                            | true/false                    | N    | 次按钮是否关闭弹窗。      |
-| btnGap          | String  | '2'                             | '0'/'1'/'2'/'4'/'8'/'12'/'16' | N    | 按钮间距。                |
+| 名称            | 类型                                                          | 默认值                          | 必传 | 说明                   |
+| --------------- | ------------------------------------------------------------- | ------------------------------- | ---- | ---------------------- |
+| visible         | `boolean`                                                     | `false`                         | N    | 是否显示。             |
+| title           | `string`                                                      | 当前语言的 dialog.title         | N    | 标题。                 |
+| titleAlign      | `'left'\|'center'\|'right'`                                   | `'center'`                      | N    | 标题对齐方式。         |
+| content         | `string`                                                      | 当前语言的 dialog.content       | N    | 内容。                 |
+| popup           | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1)   | `{}`                            | N    | 弹出层参数。           |
+| showIcon        | `boolean`                                                     | `false`                         | N    | 是否显示图标。         |
+| icon            | [`Icon`](https://stdf.design/#/components?nav=icon&tab=1)     | `{}`                            | N    | 图标参数。             |
+| btnStyle        | `'button'\|'text'\|'textLine'`                                | `'button'`                      | N    | 按钮样式。             |
+| primaryText     | `string`                                                      | 当前语言的 dialog.primaryText   | N    | 主按钮文字。           |
+| primaryButton   | [`Button`](https://stdf.design/#/components?nav=button&tab=1) | `{}`                            | N    | 主按钮参数。           |
+| secondaryText   | `string`                                                      | 当前语言的 dialog.secondaryText | N    | 次按钮文字。           |
+| secondaryButton | [`Button`](https://stdf.design/#/components?nav=button&tab=1) | `{}`                            | N    | 次按钮参数。           |
+| btnRatio        | `[number,number]`                                             | `[1, 1]`                        | N    | 主次按钮大小比例。     |
+| btnReverse      | `boolean`                                                     | `false`                         | N    | 主次按钮位置是否反转。 |
+| secondaryClose  | `boolean`                                                     | `true`                          | N    | 次按钮是否关闭弹窗。   |
+| btnGap          | `'0'\|'1'\|'2'\|'4'\|'8'\|'12'\|'16'`                         | `'2'`                           | N    | 按钮间距。             |
 
 ## Dialog Events
 
-| 名称      | 参数 | 描述               |
-| --------- | ---- | ------------------ |
-| open      | -    | 对话框打开时触发。 |
-| close     | -    | 对话框关闭时触发。 |
-| primary   | -    | 点击主按钮时触发。 |
-| secondary | -    | 点击次按钮时触发。 |
+| 名称        | 类型         | 参数 | 描述               |
+| ----------- | ------------ | ---- | ------------------ |
+| onclose     | `() => void` | -    | 对话框关闭时触发。 |
+| onprimary   | `() => void` | -    | 点击主按钮时触发。 |
+| onsecondary | `() => void` | -    | 点击次按钮时触发。 |
 
-## Dialog Slots
+## Dialog Snippets
 
-| 名称    | 描述                                    |
-| ------- | --------------------------------------- |
-| content | contentSlot 为 true 时的 content 内容。 |
-| primary | primarySlot 为 true 时主按钮内容。      |
+| 名称         | 类型                                                                | 参数 | 描述                          |
+| ------------ | ------------------------------------------------------------------- | ---- | ----------------------------- |
+| contentChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染 content 内容。     |
+| primaryChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染 primaryText 内容。 |

doc/components/dialog/api_en.md

@@ -1,38 +1,35 @@
 ## Dialog Props
 
-| Prop            | Type    | Default Value                            | Optional Values               | Required | Description                                                              |
-| --------------- | ------- | ---------------------------------------- | ----------------------------- | -------- | ------------------------------------------------------------------------ |
-| visible         | Boolean | false                                    | true/false                    | No       | Whether the dialog box is displayed.                                     |
-| title           | String  | dialog.title in the current lang         | -                             | No       | The title of the dialog box.                                             |
-| titleAlign      | String  | 'center'                                 | 'left'/'center'/'right'       | No       | The alignment of the title.                                              |
-| content         | String  | dialog.content in the current lang       | -                             | No       | The content of the dialog box.                                           |
-| contentSlot     | Boolean | false                                    | true/false                    | No       | Whether the content uses a slot.                                         |
-| popup           | Object  | {}                                       | Refer to Popup props          | No       | The parameters of the pop-up layer.                                      |
-| showIcon        | Boolean | false                                    | true/false                    | No       | Whether to show icon.                                                    |
-| icon            | Object  | {}                                       | Refer to Icon props           | No       | Icon parameters.                                                         |
-| btnStyle        | String  | 'button'                                 | 'button'/'text'/'textLine'    | No       | Button style.                                                            |
-| primaryText     | String  | dialog.primaryText in the current lang   | -                             | No       | The text of the primary button.                                          |
-| primarySlot     | Boolean | false                                    | true/false                    | No       | Whether the primary button uses a slot.                                  |
-| primaryButton   | Object  | {}                                       | Refer to Button props         | No       | Primary button parameters.                                               |
-| secondaryText   | String  | dialog.secondaryText in the current lang | -                             | No       | The text of the secondary button.                                        |
-| secondaryButton | Object  | {}                                       | Refer to Button props         | No       | Secondary button parameters.                                             |
-| btnRatio        | Array   | [1, 1]                                   | -                             | No       | The size ratio of the primary and secondary buttons.                     |
-| btnReverse      | Boolean | false                                    | true/false                    | No       | Whether the positions of the primary and secondary buttons are reversed. |
-| secondaryClose  | Boolean | true                                     | true/false                    | No       | Whether the secondary button closes the dialog box.                      |
-| btnGap          | String  | '2'                                      | '0'/'1'/'2'/'4'/'8'/'12'/'16' | No       | The spacing between the buttons.                                         |
+| Name            | Type                                                          | Default                               | Required | Description                                  |
+| --------------- | ------------------------------------------------------------- | ------------------------------------- | -------- | -------------------------------------------- |
+| visible         | `boolean`                                                     | `false`                               | N        | Whether to show the dialog.                  |
+| title           | `string`                                                      | Current language dialog.title         | N        | Title.                                       |
+| titleAlign      | `'left'\|'center'\|'right'`                                   | `'center'`                            | N        | Title alignment.                             |
+| content         | `string`                                                      | Current language dialog.content       | N        | Content.                                     |
+| popup           | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1)   | `{}`                                  | N        | Popup parameters.                            |
+| showIcon        | `boolean`                                                     | `false`                               | N        | Whether to show icon.                        |
+| icon            | [`Icon`](https://stdf.design/#/components?nav=icon&tab=1)     | `{}`                                  | N        | Icon parameters.                             |
+| btnStyle        | `'button'\|'text'\|'textLine'`                                | `'button'`                            | N        | Button style.                                |
+| primaryText     | `string`                                                      | Current language dialog.primaryText   | N        | Primary button text.                         |
+| primaryButton   | [`Button`](https://stdf.design/#/components?nav=button&tab=1) | `{}`                                  | N        | Primary button parameters.                   |
+| secondaryText   | `string`                                                      | Current language dialog.secondaryText | N        | Secondary button text.                       |
+| secondaryButton | [`Button`](https://stdf.design/#/components?nav=button&tab=1) | `{}`                                  | N        | Secondary button parameters.                 |
+| btnRatio        | `[number,number]`                                             | `[1, 1]`                              | N        | Size ratio of primary and secondary buttons. |
+| btnReverse      | `boolean`                                                     | `false`                               | N        | Whether to reverse button positions.         |
+| secondaryClose  | `boolean`                                                     | `true`                                | N        | Whether secondary button closes dialog.      |
+| btnGap          | `'0'\|'1'\|'2'\|'4'\|'8'\|'12'\|'16'`                         | `'2'`                                 | N        | Gap between buttons.                         |
 
 ## Dialog Events
 
-| Name      | Parameters | Description                                     |
-| --------- | ---------- | ----------------------------------------------- |
-| open      | -          | Triggered when the dialog box is opened.        |
-| close     | -          | Triggered when the dialog box is closed.        |
-| primary   | -          | Triggered when the primary button is clicked.   |
-| secondary | -          | Triggered when the secondary button is clicked. |
+| Name        | Type         | Parameters | Description                                 |
+| ----------- | ------------ | ---------- | ------------------------------------------- |
+| onclose     | `() => void` | -          | Triggered when dialog closes.               |
+| onprimary   | `() => void` | -          | Triggered when primary button is clicked.   |
+| onsecondary | `() => void` | -          | Triggered when secondary button is clicked. |
 
-## Dialog Slots
+## Dialog Snippets
 
-| Name    | Description                                                 |
-| ------- | ----------------------------------------------------------- |
-| content | The content when contentSlot is set to true.                |
-| primary | The content of the primary button when primarySlot is true. |
+| Name         | Type                                                                | Parameters | Description                                  |
+| ------------ | ------------------------------------------------------------------- | ---------- | -------------------------------------------- |
+| contentChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Render the content when it is passed in.     |
+| primaryChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Render the primaryText when it is passed in. |

doc/components/dialog/guide.md

@@ -8,13 +8,13 @@ Dialog 弹框组件是在 Popup 基础上封装的，通过预先定义一些 Po
 
 而 Dialog 内部又使用了 Icon 和 Button 组件，可以通过传入 Icon 和 Button 的 Props 来实现不同的效果。比如示例中通过设置 Button 的 radius 自定义按钮的圆角风格。
 
-## content
+## contentChild
 
-Dialog 的内容可以通过 content 属性传入，当需要显示复杂内容时，可以将 contentSlot 设置为 true，通过 slot 传入内容，此时 content 会失效。
+Dialog 的内容可以通过 contentChild 这个 Snippet 渲染，当需要显示复杂内容时，可以通过此方式来实现。
 
 ## btnRatio
 
-Dialog 的按钮有主次之分，通过 btnRatio 可以设置主次按钮的大小比例，比如 btnRatio 为 [2:1] 时，主按钮宽度为次按钮的两倍。
+Dialog 的按钮有主次之分，通过 btnRatio 可以设置主次按钮的大小比例，如 btnRatio 为 `[2,1]` 时，主按钮宽度为次按钮的两倍。
 
 ## 关闭
 

doc/components/dialog/guide_en.md

@@ -1,21 +1,21 @@
 ## Usage
 
-Dialog is generally used to display content or steps that need to be explicitly known by the user, and can also perform some simple interactive operations. To avoid accidental touches, the click mask will not close by default. It is more powerful than the Modal component that is generally only used for display.
+Dialog is generally used to display content or steps that users need to be clearly aware of, while also enabling simple interactions. To prevent accidental touches, clicking the mask will not close the dialog by default. It is more powerful than the Modal component which is mainly used for display.
 
 ## Description
 
-Dialog is an encapsulated component based on Popup, which achieves different effects by predefining some of Popup's Props. For example, in the example, a different easing effect was achieved by setting the easeType of Popup.
+The Dialog component is built on top of Popup by pre-defining some Popup Props. Therefore, different effects can be achieved by passing in Popup properties. For example, in the demo, a different easing effect is achieved by setting the easeType of popup.
 
-Inside Dialog, Icon and Button components are used, and different effects can be achieved by passing in the Props of Icon and Button. For example, in the example, the radius of the button was customized by setting the radius of the Button.
+Dialog internally uses Icon and Button components, and different effects can be achieved by passing in Icon and Button Props. For example, in the demo, the button's rounded corner style is customized by setting the Button's radius.
 
-## Content
+## contentChild
 
-The content of the Dialog can be passed in through the content property. When complex content needs to be displayed, the contentSlot can be set to true, and the content can be passed in through the slot. At this time, the content property will be invalid.
+The content of Dialog can be rendered through the contentChild Snippet. When complex content needs to be displayed, it can be achieved through this method.
 
 ## btnRatio
 
-The buttons in the Dialog are of primary and secondary importance, and the size ratio of the main and secondary buttons can be set through btnRatio. For example, when btnRatio is [2:1], the width of the main button is twice that of the secondary button.
+Dialog's buttons have primary and secondary distinctions. The size ratio of primary and secondary buttons can be set through btnRatio. For example, when btnRatio is `[2,1]`, the width of the primary button is twice that of the secondary button.
 
 ## Close
 
-By default, Dialog will not close automatically. It can be closed by clicking the secondary button inside or by changing the visible property outside. Of course, these parameters can be controlled by the Props passed in.
+Dialog will not automatically close by default. By default, clicking the internal secondary button can close it, or it can be closed by changing the external visible prop. Of course, these parameters can be controlled through the passed Props.

packages/stdf/components/dialog/Dialog.svelte

@@ -13,17 +13,15 @@
 	/** @typedef {import('../../index.d').Dialog} DialogProps */
 	/** @type {DialogProps} */
 	let {
-		visible = false,
+		visible = $bindable(false),
 		title = dialogLang.title,
 		titleAlign = 'center',
 		content = dialogLang.content,
-		isContentChild = false,
 		popup = {},
 		showIcon = false,
 		icon = {},
 		btnStyle = 'button',
 		primaryText = dialogLang.primaryText,
-		isPrimaryChild = false,
 		primaryButton = {},
 		secondaryText = dialogLang.secondaryText,
 		secondaryButton = {},
@@ -34,7 +32,6 @@
 		onsecondary,
 		onprimary,
 		onclose,
-		onopen,
 		contentChild,
 		primaryChild,
 	} = $props();
@@ -46,31 +43,6 @@
 	// 按钮间距
 	// Button spacing
 	const btnGapClass = { '0': '', '1': ' gap-1', '2': ' gap-2', '4': ' gap-4', '8': ' gap-8', '12': ' gap-12', '16': ' gap-16' };
-
-	// 次按钮点击事件
-	// Secondary button click event
-	const secondaryFunc = () => {
-		if (secondaryClose) {
-			visible = false;
-		}
-		onsecondary && onsecondary();
-	};
-
-	// 主按钮点击事件
-	// Primary button click event
-	const primaryFunc = () => {
-		onprimary && onprimary();
-	};
-
-	// 监听visible变化，派发open/close事件
-	// Listen to the change of visible, dispatch open/close events
-	$effect(() => {
-		if (visible) {
-			onopen && onopen();
-		} else {
-			onclose && onclose();
-		}
-	});
 </script>
 
 <Popup
@@ -85,36 +57,37 @@
 	px="4"
 	{...popup}
 >
-	<div class={`px-4 pt-4${btnStyle === 'button' ? ' pb-2' : ''} text-center space-y-4`}>
-		<div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
+	<div class="px-4 pt-4{btnStyle === 'button' ? ' pb-2' : ''} text-center space-y-4">
+		<div class="font-bold{titleAlignClass[titleAlign] || titleAlignClass['center']}">{title}</div>
 		{#if showIcon}
-			<div>
-				<Icon {...icon} />
-			</div>
+			<div><Icon {...icon} /></div>
 		{/if}
 		<div>
-			{#if isContentChild}
+			{#if contentChild}
 				{@render contentChild?.()}
 			{:else}
 				{content}
 			{/if}
 		</div>
 		<div
-			class={`flex w-full${btnGapClass[btnGap] || btnGapClass['2']}${btnReverse ? ' flex-row-reverse' : ''}${
-				btnStyle === 'textLine' ? ' border-t border-black/10 dark:border-white/10' : ''
-			}`}
+			class="flex w-full{btnGapClass[btnGap] || btnGapClass['2']}{btnReverse ? ' flex-row-reverse' : ''}{btnStyle === 'textLine'
+				? ' border-t border-black/10 dark:border-white/10'
+				: ''}"
 		>
-			<div
-				class={`${btnStyle === 'textLine' && !btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''}`}
-				style="flex:{btnRatio[1]}"
-			>
+			<div class={btnStyle === 'textLine' && !btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''} style="flex:{btnRatio[1]}">
 				<Button
 					size="full"
 					fill={btnStyle === 'button' ? 'colorLight' : 'text'}
 					heightIn={btnStyle === 'button' ? '3' : '2'}
 					injClass={btnStyle === 'button' ? '' : 'font-bold'}
 					{...secondaryButton}
-					onclick={secondaryFunc}
+					onclick={() => {
+						if (secondaryClose) {
+							visible = false;
+							onclose && onclose();
+						}
+						onsecondary && onsecondary();
+					}}
 				>
 					{secondaryText}
 				</Button>
@@ -126,14 +99,14 @@
 					heightIn={btnStyle === 'button' ? '3' : '2'}
 					injClass={btnStyle === 'button' ? '' : 'font-bold'}
 					{...primaryButton}
-					onclick={primaryFunc}
+					onclick={() => onprimary && onprimary()}
 				>
-					{#if isPrimaryChild}
+					{#if primaryChild}
 						{@render primaryChild?.()}
 					{:else}
 						{primaryText}
-					{/if}</Button
-				>
+					{/if}
+				</Button>
 			</div>
 		</div>
 	</div>