[stdf]Add JSDoc

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

@@ -29,7 +29,7 @@
 </script>
 
 <div class="font-bold px-4 mt-8 text-left">Example of using a placeholder 3﹡4</div>
-<Grids cols={4}>
+<Grids cols="4">
 	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
 	</Grid>
@@ -52,16 +52,16 @@
 
 <div class="font-bold px-4 mt-8">Example of using a placeholder 4﹡6</div>
 <Grids>
-	<Grid row={3} col={2}>
+	<Grid row="3" col="2">
 		<Placeholder>3﹡2</Placeholder>
 	</Grid>
-	<Grid col={3}>
+	<Grid col="3">
 		<Placeholder>1﹡3</Placeholder>
 	</Grid>
-	<Grid row={4}>
+	<Grid row="4">
 		<Placeholder>4﹡1</Placeholder>
 	</Grid>
-	<Grid row={2}>
+	<Grid row="2">
 		<Placeholder>2﹡1</Placeholder>
 	</Grid>
 	<Grid>
@@ -79,23 +79,23 @@
 	<Grid>
 		<Placeholder>1﹡1</Placeholder>
 	</Grid>
-	<Grid col={4}>
+	<Grid col="4">
 		<Placeholder>1﹡4</Placeholder>
 	</Grid>
 </Grids>
 
 <div class="font-bold px-4 mt-8">Increase the outer marginal and unit grid spacing</div>
-<Grids cols={4} gap="4" mx="8" my="8">
-	<Grid row={3}>
+<Grids cols="4" gap="4" mx="8" my="8">
+	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
 	</Grid>
-	<Grid col={3}>
+	<Grid col="3">
 		<Placeholder>1﹡3</Placeholder>
 	</Grid>
-	<Grid row={2}>
+	<Grid row="2">
 		<Placeholder>2﹡1</Placeholder>
 	</Grid>
-	<Grid col={2}>
+	<Grid col="2">
 		<Placeholder>1﹡2</Placeholder>
 	</Grid>
 	<Grid>
@@ -109,8 +109,8 @@
 <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">
-			<Grid row={3}>
+		<Grids cols="5" mx="0" my="0">
+			<Grid row="3">
 				<div
 					class="flex flex-col justify-between bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 				>
@@ -119,14 +119,14 @@
 					<div class="text-gray-600">{month}</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 				>
 					{time}
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>
@@ -144,12 +144,12 @@
 				</div>
 			</Grid>
 
-			<Grid row={2} col={2}>
+			<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>
 				</div>
 			</Grid>
-			<Grid row={2} col={2}>
+			<Grid row="2" col="2">
 				<div class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1">
 					<div class="flex flex-col justify-center">
 						{#if currentDevice === 'iOS'}
@@ -194,7 +194,7 @@
 					</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>
@@ -211,7 +211,7 @@
 					<div>Bluetooth</div>
 				</div>
 			</Grid>
-			<Grid row={4}>
+			<Grid row="4">
 				<div
 					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 				>
@@ -222,7 +222,7 @@
 					<div>STDF</div>
 				</div>
 			</Grid>
-			<Grid row={3}>
+			<Grid row="3">
 				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10">
 					<div>92%</div>
 					<div class="animate-pulse">
@@ -231,7 +231,7 @@
 					<div>charging</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="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">
 					{#if currentDevice === 'iOS'}
 						<Icon name="ri-smartphone-line" size={30} />
@@ -246,7 +246,7 @@
 					{/if}
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 				>
@@ -258,7 +258,7 @@
 					</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>

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

@@ -29,7 +29,7 @@
 </script>
 
 <div class="font-bold px-4 mt-8">使用占位符示例 3﹡4</div>
-<Grids cols={4}>
+<Grids cols="4">
 	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
 	</Grid>
@@ -52,16 +52,16 @@
 
 <div class="font-bold px-4 mt-8">使用占位符示例 4﹡6</div>
 <Grids>
-	<Grid row={3} col={2}>
+	<Grid row="3" col="2">
 		<Placeholder>3﹡2</Placeholder>
 	</Grid>
-	<Grid col={3}>
+	<Grid col="3">
 		<Placeholder>1﹡3</Placeholder>
 	</Grid>
-	<Grid row={4}>
+	<Grid row="4">
 		<Placeholder>4﹡1</Placeholder>
 	</Grid>
-	<Grid row={2}>
+	<Grid row="2">
 		<Placeholder>2﹡1</Placeholder>
 	</Grid>
 	<Grid>
@@ -79,23 +79,23 @@
 	<Grid>
 		<Placeholder>1﹡1</Placeholder>
 	</Grid>
-	<Grid col={4}>
+	<Grid col="4">
 		<Placeholder>1﹡4</Placeholder>
 	</Grid>
 </Grids>
 
 <div class="font-bold px-4 mt-8">增加外边距与单元格间距</div>
-<Grids cols={4} gap="4" mx="8" my="8">
-	<Grid row={3}>
+<Grids cols="4" gap="4" mx="8" my="8">
+	<Grid row="3">
 		<Placeholder>3﹡1</Placeholder>
 	</Grid>
-	<Grid col={3}>
+	<Grid col="3">
 		<Placeholder>1﹡3</Placeholder>
 	</Grid>
-	<Grid row={2}>
+	<Grid row="2">
 		<Placeholder>2﹡1</Placeholder>
 	</Grid>
-	<Grid col={2}>
+	<Grid col="2">
 		<Placeholder>1﹡2</Placeholder>
 	</Grid>
 	<Grid>
@@ -109,8 +109,8 @@
 <div class="font-bold px-4 mt-8">场景示例 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">
-			<Grid row={3}>
+		<Grids cols="5" mx="0" my="0">
+			<Grid row="3">
 				<div
 					class="flex flex-col justify-between bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 				>
@@ -119,14 +119,14 @@
 					<div class="text-gray-600">{month}</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 				>
 					{time}
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>
@@ -144,12 +144,12 @@
 				</div>
 			</Grid>
 
-			<Grid row={2} col={2}>
+			<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>
 				</div>
 			</Grid>
-			<Grid row={2} col={2}>
+			<Grid row="2" col="2">
 				<div class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1">
 					<div class="flex flex-col justify-center">
 						{#if currentDevice === 'iOS'}
@@ -194,7 +194,7 @@
 					</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>
@@ -211,7 +211,7 @@
 					<div>蓝 牙</div>
 				</div>
 			</Grid>
-			<Grid row={4}>
+			<Grid row="4">
 				<div
 					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 				>
@@ -222,7 +222,7 @@
 					<div>STDF</div>
 				</div>
 			</Grid>
-			<Grid row={3}>
+			<Grid row="3">
 				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10">
 					<div>92%</div>
 					<div class="animate-pulse">
@@ -231,7 +231,7 @@
 					<div>充电中</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="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">
 					{#if currentDevice === 'iOS'}
 						<Icon name="ri-smartphone-line" size={30} />
@@ -246,7 +246,7 @@
 					{/if}
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 				>
@@ -258,7 +258,7 @@
 					</div>
 				</div>
 			</Grid>
-			<Grid row={2}>
+			<Grid row="2">
 				<div
 					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"
 				>

packages/stdf/components/grids/Grid.svelte

@@ -1,22 +1,23 @@
 <script>
-	// 单元格所占列数
-	// Number of columns occupied by the cell
+	/**
+	 * 单元格所占列数
+	 * Number of columns occupied by the cell
+	 * @type {'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'}
+	 * @default '1'
+	 */
 	export let col = '1';
 
-	// 单元格所占行数
-	// Number of rows occupied by the cell
+	/**
+	 * 单元格所占行数
+	 * Number of rows occupied by the cell
+	 * @type {'1' | '2' | '3' | '4' | '5' | '6'}
+	 * @default '1'
+	 */
 	export let row = '1';
 
 	// 根据行数生成样式
 	// Generate styles based on the number of rows
-	const rowObj = {
-		'1': 'row-span-1',
-		'2': 'row-span-2',
-		'3': 'row-span-3',
-		'4': 'row-span-4',
-		'5': 'row-span-5',
-		'6': 'row-span-6',
-	};
+	const rowObj = { '1': 'row-span-1', '2': 'row-span-2', '3': 'row-span-3', '4': 'row-span-4', '5': 'row-span-5', '6': 'row-span-6' };
 
 	// 根据列数生成样式
 	// Generate styles based on the number of columns

packages/stdf/components/grids/Grids.svelte

@@ -1,18 +1,34 @@
 <script>
-	//列数
-	// Number of columns
+	/**
+	 * 列数
+	 * Number of columns
+	 * @type {'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'}
+	 * @default '6'
+	 */
 	export let cols = '6';
 
-	//间距
-	// Spacing
+	/**
+	 * 间距
+	 * Spacing
+	 * @type {'0' | '1' | '2' | '4' | '8'}
+	 * @default '2'
+	 */
 	export let gap = '2';
 
-	//水平间距
-	// Horizontal spacing
+	/**
+	 * 水平间距
+	 * Horizontal spacing
+	 * @type {'0' | '1' | '2' | '4' | '8'}
+	 * @default '2'
+	 */
 	export let mx = '2';
 
-	//垂直间距
-	// Vertical spacing
+	/**
+	 * 垂直间距
+	 * Vertical spacing
+	 * @type {'0' | '1' | '2' | '4' | '8'}
+	 * @default '2'
+	 */
 	export let my = '2';
 
 	//根据列数生成样式
@@ -34,33 +50,15 @@
 
 	//水平外边距样式
 	// Horizontal margin style
-	const mxObj = {
-		'0': ' mx-0',
-		'1': ' mx-1',
-		'2': ' mx-2',
-		'4': ' mx-4',
-		'8': ' mx-8',
-	};
+	const mxObj = { '0': ' mx-0', '1': ' mx-1', '2': ' mx-2', '4': ' mx-4', '8': ' mx-8' };
 
 	//垂直外边距样式
 	// Vertical margin style
-	const myObj = {
-		'0': ' my-0',
-		'1': ' my-1',
-		'2': ' my-2',
-		'4': ' my-4',
-		'8': ' my-8',
-	};
+	const myObj = { '0': ' my-0', '1': ' my-1', '2': ' my-2', '4': ' my-4', '8': ' my-8' };
 
 	//内部间距样式
 	// Internal spacing style
-	const gapObj = {
-		'0': ' gap-0',
-		'1': ' gap-1',
-		'2': ' gap-2',
-		'4': ' gap-4',
-		'8': ' gap-8',
-	};
+	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']}`}>