[stdf]Update Grids compoent, demo and documents.

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

@@ -2,33 +2,33 @@
 <script>
 	import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../../packages/stdf/components';
 
-	let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
-	let curentIndex = 0;
-	$: currentDevice = devices[curentIndex];
+	const devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
+	let curentIndex = $state(0);
+	let currentDevice = $derived(devices[curentIndex]);
 	const changeDeviceFun = () => {
 		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
 	};
-	let color = false;
-	$: colorCss = `${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`;
-	const changeColorFun = e => {
-		color = e.detail;
+	let color = $state(false);
+	let colorCss = $derived(`${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`);
+	const changeColorFun = active => {
+		color = active;
 	};
-	//Get the current time
+	// Get current date
 	const date = new Date();
-	//Get the current month and turn into Chinese characters
+	// Get current month in Chinese
 	const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 	const monthIndex = date.getMonth();
-	$: month = monthArr[monthIndex];
+	let month = $derived(monthArr[monthIndex]);
 	const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
 	const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
 	const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
-	$: time = `${hour}:${minute}`;
-	//Get Chinese week
+	let time = $derived(`${hour}:${minute}`);
+	// Get Chinese week
 	const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-	$: weekDay = week[date.getDay()];
+	let weekDay = $derived(week[date.getDay()]);
 </script>
 
-<div class="font-bold px-4 mt-8 text-left">Example of using a placeholder 3﹡4</div>
+<div class="font-bold px-4 mt-8">Using Placeholder Example 3﹡4</div>
 <Grids cols="4">
 	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
@@ -50,7 +50,7 @@
 	</Grid>
 </Grids>
 
-<div class="font-bold px-4 mt-8">Example of using a placeholder 4﹡6</div>
+<div class="font-bold px-4 mt-8">Using Placeholder Example 4﹡6</div>
 <Grids>
 	<Grid row="3" col="2">
 		<Placeholder>3﹡2</Placeholder>
@@ -84,7 +84,7 @@
 	</Grid>
 </Grids>
 
-<div class="font-bold px-4 mt-8">Increase the outer marginal and unit grid spacing</div>
+<div class="font-bold px-4 mt-8">Increase Margin and Cell Gap</div>
 <Grids cols="4" gap="4" mx="8" my="8">
 	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
@@ -106,7 +106,7 @@
 	</Grid>
 </Grids>
 
-<div class="font-bold px-4 mt-8">Scene example 6﹡5</div>
+<div class="font-bold px-4 mt-8">Scene Example 6﹡5</div>
 <div class="pb-8 pt-2">
 	<div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
 		<Grids cols="5" mx="0" my="0">
@@ -131,13 +131,17 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full" on:change={changeColorFun}>
-							<div slot="false">
-								<Icon name="ri-paint-brush-line" size={12} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-paint-brush-fill" size={12} theme />
-							</div>
+						<Switch inside="child" radius="full" onchange={changeColorFun}>
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-paint-brush-line" size={12} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-paint-brush-fill" size={12} theme />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
 					<div>Colorful</div>
@@ -146,7 +150,7 @@
 
 			<Grid row="2" col="2">
 				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
-					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>Switching</Button>
+					<Button fill="lineTheme" radius="full" onclick={changeDeviceFun}>Device</Button>
 				</div>
 			</Grid>
 			<Grid row="2" col="2">
@@ -169,7 +173,7 @@
 							{#if currentDevice === 'iOS'}
 								A15 Bionic
 							{:else if currentDevice === 'Android'}
-								Snapdragon 8 Gen1
+								Snapdragon
 							{:else if currentDevice === 'Windows'}
 								AMD YES
 							{:else if currentDevice === 'macOS'}
@@ -199,13 +203,17 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full">
-							<div slot="false">
-								<Icon name="ri-bluetooth-line" size={12} top={-1} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
-							</div>
+						<Switch inside="child" radius="full">
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-bluetooth-line" size={12} top={-1} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
 					<div>Bluetooth</div>
@@ -228,7 +236,7 @@
 					<div class="animate-pulse">
 						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-extend1" />
 					</div>
-					<div>charging</div>
+					<div>充电中</div>
 				</div>
 			</Grid>
 			<Grid row="2">
@@ -263,13 +271,17 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full">
-							<div slot="false">
-								<Icon name="ri-wifi-off-line" size={12} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-wifi-line" size={12} theme />
-							</div>
+						<Switch inside="child" radius="full">
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-wifi-off-line" size={12} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-wifi-line" size={12} theme />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
 					<div>Wi-Fi</div>

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

@@ -2,30 +2,30 @@
 <script>
 	import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../../packages/stdf/components';
 
-	let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
-	let curentIndex = 0;
-	$: currentDevice = devices[curentIndex];
+	const devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
+	let curentIndex = $state(0);
+	let currentDevice = $derived(devices[curentIndex]);
 	const changeDeviceFun = () => {
 		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
 	};
-	let color = false;
-	$: colorCss = `${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`;
-	const changeColorFun = e => {
-		color = e.detail;
+	let color = $state(false);
+	let colorCss = $derived(`${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`);
+	const changeColorFun = active => {
+		color = active;
 	};
 	//获取当前时间
 	const date = new Date();
 	//获取当前月份转为汉字
 	const monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
 	const monthIndex = date.getMonth();
-	$: month = monthArr[monthIndex];
+	let month = $derived(monthArr[monthIndex]);
 	const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
 	const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
 	const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
-	$: time = `${hour}:${minute}`;
+	let time = $derived(`${hour}:${minute}`);
 	//获取中文周几
 	const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-	$: weekDay = week[date.getDay()];
+	let weekDay = $derived(week[date.getDay()]);
 </script>
 
 <div class="font-bold px-4 mt-8">使用占位符示例 3﹡4</div>
@@ -131,22 +131,26 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full" on:change={changeColorFun}>
-							<div slot="false">
-								<Icon name="ri-paint-brush-line" size={12} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-paint-brush-fill" size={12} theme />
-							</div>
+						<Switch inside="child" radius="full" onchange={changeColorFun}>
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-paint-brush-line" size={12} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-paint-brush-fill" size={12} theme />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
-					<div>彩 色</div>
+					<div>彩色</div>
 				</div>
 			</Grid>
 
 			<Grid row="2" col="2">
 				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
-					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>切换设备</Button>
+					<Button fill="lineTheme" radius="full" onclick={changeDeviceFun}>切换设备</Button>
 				</div>
 			</Grid>
 			<Grid row="2" col="2">
@@ -199,13 +203,17 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full">
-							<div slot="false">
-								<Icon name="ri-bluetooth-line" size={12} top={-1} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
-							</div>
+						<Switch inside="child" radius="full">
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-bluetooth-line" size={12} top={-1} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
 					<div>蓝 牙</div>
@@ -263,13 +271,17 @@
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 				>
 					<div class="flex justify-center">
-						<Switch inside="slot" radius="full">
-							<div slot="false">
-								<Icon name="ri-wifi-off-line" size={12} />
-							</div>
-							<div slot="true">
-								<Icon name="ri-wifi-line" size={12} theme />
-							</div>
+						<Switch inside="child" radius="full">
+							{#snippet falseChild()}
+								<div>
+									<Icon name="ri-wifi-off-line" size={12} />
+								</div>
+							{/snippet}
+							{#snippet trueChild()}
+								<div>
+									<Icon name="ri-wifi-line" size={12} theme />
+								</div>
+							{/snippet}
 						</Switch>
 					</div>
 					<div>Wi-Fi</div>

doc/components/grids/api.md

@@ -1,27 +1,27 @@
 ## Grids Props
 
-| 属性 | 类型   | 默认值 | 可选值                                             | 必传 | 说明         |
-| ---- | ------ | ------ | -------------------------------------------------- | ---- | ------------ |
-| cols | String | '6'    | '1'/'2'/'3'/'4'/'5'/'6'/'7'/'8'/'9'/'10'/'11'/'12' | N    | 列数。       |
-| gap  | String | '2'    | '0'/'1'/'2'/'4'/'8'                                | N    | 单元格间距。 |
-| mx   | String | '2'    | '0'/'1'/'2'/'4'/'8'                                | N    | 左右外边距。 |
-| my   | String | '2'    | '0'/'1'/'2'/'4'/'8'                                | N    | 上下外边距。 |
+| 名称 | 类型                                                            | 默认值 | 必传 | 说明         |
+| ---- | --------------------------------------------------------------- | ------ | ---- | ------------ |
+| cols | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'7'\|'8'\|'9'\|'10'\|'11'\|'12'` | `'6'`  | N    | 列数。       |
+| gap  | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`  | N    | 单元格间距。 |
+| mx   | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`  | N    | 左右外边距。 |
+| my   | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`  | N    | 上下外边距。 |
 
-## Grids Slots
+## Grids Snippets
 
-| 名称 | 说明         |
-| ---- | ------------ |
-| -    | Grids 内容。 |
+| 名称     | 说明         |
+| -------- | ------------ |
+| children | Grids 内容。 |
 
 ## Grid Props
 
-| 属性 | 类型   | 默认值 | 可选值                                             | 必传 | 说明             |
-| ---- | ------ | ------ | -------------------------------------------------- | ---- | ---------------- |
-| col  | String | '1'    | '1'/'2'/'3'/'4'/'5'/'6'/'7'/'8'/'9'/'10'/'11'/'12' | N    | 单元格所占列数。 |
-| row  | String | '1'    | '1'/'2'/'3'/'4'/'5'/'6'                            | N    | 单元格所占行数。 |
+| 名称 | 类型                                                            | 默认值 | 可选值 | 必传             | 说明 |
+| ---- | --------------------------------------------------------------- | ------ | ------ | ---------------- | ---- |
+| col  | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'7'\|'8'\|'9'\|'10'\|'11'\|'12'` | `'1'`  | N      | 单元格所占列数。 |
+| row  | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'`                                  | `'1'`  | N      | 单元格所占行数。 |
 
-## Grid Slots
+## Grid Snippets
 
-| 名称 | 说明        |
-| ---- | ----------- |
-| -    | Grid 内容。 |
+| 名称     | 说明        |
+| -------- | ----------- |
+| children | Grid 内容。 |

doc/components/grids/api_en.md

@@ -1,27 +1,27 @@
 ## Grids Props
 
-| Property | Type   | Default | Options                                            | Required | Description                |
-| -------- | ------ | ------- | -------------------------------------------------- | -------- | -------------------------- |
-| cols     | String | '6'     | '1'/'2'/'3'/'4'/'5'/'6'/'7'/'8'/'9'/'10'/'11'/'12' | No       | Number of columns          |
-| gap      | String | '2'     | '0'/'1'/'2'/'4'/'8'                                | No       | Spacing between grid cells |
-| mx       | String | '2'     | '0'/'1'/'2'/'4'/'8'                                | No       | Left and right margin      |
-| my       | String | '2'     | '0'/'1'/'2'/'4'/'8'                                | No       | Top and bottom margin      |
+| Name | Type                                                            | Default | Required | Description       |
+| ---- | --------------------------------------------------------------- | ------- | -------- | ----------------- |
+| cols | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'7'\|'8'\|'9'\|'10'\|'11'\|'12'` | `'6'`   | N        | Number of columns |
+| gap  | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`   | N        | Cell spacing      |
+| mx   | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`   | N        | Horizontal margin |
+| my   | `'0'\|'1'\|'2'\|'4'\|'8'`                                       | `'2'`   | N        | Vertical margin   |
 
-## Grids Slots
+## Grids Snippets
 
-| Name | Description                   |
-| ---- | ----------------------------- |
-| -    | The content inside the Grids. |
+| Name     | Description   |
+| -------- | ------------- |
+| children | Grids content |
 
 ## Grid Props
 
-| Property | Type   | Default | Options                                            | Required | Description                          |
-| -------- | ------ | ------- | -------------------------------------------------- | -------- | ------------------------------------ |
-| col      | String | '1'     | '1'/'2'/'3'/'4'/'5'/'6'/'7'/'8'/'9'/'10'/'11'/'12' | No       | The number of columns the cell spans |
-| row      | String | '1'     | '1'/'2'/'3'/'4'/'5'/'6'                            | No       | The number of rows the cell spans    |
+| Name | Type                                                            | Default | Required | Description                            |
+| ---- | --------------------------------------------------------------- | ------- | -------- | -------------------------------------- |
+| col  | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'\|'7'\|'8'\|'9'\|'10'\|'11'\|'12'` | `'1'`   | N        | Number of columns occupied by the cell |
+| row  | `'1'\|'2'\|'3'\|'4'\|'5'\|'6'`                                  | `'1'`   | N        | Number of rows occupied by the cell    |
 
-## Grid Slots
+## Grid Snippets
 
-| Name | Description                  |
-| ---- | ---------------------------- |
-| -    | The content inside the Grid. |
+| Name     | Description  |
+| -------- | ------------ |
+| children | Grid content |

packages/stdf/components/grids/Grid.svelte

@@ -25,4 +25,6 @@
 	};
 </script>
 
-<div class={`${rowObj[row] || rowObj['1']}${colObj[col] || colObj['1']}`}>{@render children?.()}</div>
+<div class="{rowObj[row] || rowObj['1']}{colObj[col] || colObj['1']}">
+	{@render children?.()}
+</div>

packages/stdf/components/grids/Grids.svelte

@@ -33,6 +33,6 @@
 	const gapObj = { '0': ' gap-0', '1': ' gap-1', '2': ' gap-2', '4': ' gap-4', '8': ' gap-8' };
 </script>
 
-<div class={`grid${colsObj[cols] || colsObj['6']}${mxObj[mx] || mxObj['2']}${myObj[my] || myObj['2']}${gapObj[gap] || gapObj['2']}`}>
+<div class="grid{colsObj[cols] || colsObj['6']}{mxObj[mx] || mxObj['2']}{myObj[my] || myObj['2']}{gapObj[gap] || gapObj['2']}">
 	{@render children?.()}
 </div>