[stdf]Update Divider compoent, demo and documents.

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

@@ -3,9 +3,9 @@
 	import { Divider } from '../../../../../packages/stdf/components';
 </script>
 
-<div class="flex flex-col space-y-8 py-8 text-left">
+<div class="flex flex-col space-y-8 py-8">
 	<div>
-		<div class="p-4 font-bold">Different length</div>
+		<div class="p-4 font-bold">Different lengths</div>
 		<Divider />
 		<Divider px="4" />
 		<Divider px="8" />
@@ -13,13 +13,13 @@
 		<Divider px="36" />
 	</div>
 	<div>
-		<div class="p-4 font-bold">Include text</div>
-		<Divider text="Zheng Plan" />
-		<Divider px="4" text="Red bank base" />
+		<div class="p-4 font-bold">Text</div>
+		<Divider text="The Guzheng Project" />
+		<Divider px="4" text="Red Cliff Base" />
 	</div>
 	<div>
 		<div class="p-4 font-bold">Different heights</div>
-		<div class="px-4 text-sm">start</div>
+		<div class="px-4 text-sm">Start</div>
 		<Divider py="0" />
 		<div class="px-4 text-sm">Height is 0</div>
 		<Divider />
@@ -29,50 +29,52 @@
 	</div>
 
 	<div>
-		<div class="p-4 font-bold">Text location</div>
+		<div class="p-4 font-bold">Text position</div>
 		<Divider text="Left" align="left" />
 		<Divider text="Center" />
 		<Divider text="Right" align="right" />
 	</div>
 	<div>
 		<div class="p-4 font-bold">Line style</div>
-		<Divider text="solid line" />
-		<Divider line="dashed" text="Dashed line" />
-		<Divider line="dotted" text="Dotted line" />
+		<Divider text="Solid" />
+		<Divider line="dashed" text="Dashed" />
+		<Divider line="dotted" text="Dotted" />
 	</div>
 	<div>
 		<div class="p-4 font-bold">Custom color</div>
-		<Divider injClass="border-blue dark:border-yellow" />
-		<Divider text="Custom line" injClass="border-[red] dark:border-extend1" />
-		<Divider text="Custom text" injClass="text-[red]" />
-		<Divider text="Custom lines and text" injClass="border-[red] text-[blue] dark:text-[yellow]" />
-		<Divider line="dashed" text="Custom dotted line" injClass="border-[#FF5722]" />
+		<Divider injClass="!border-[blue] dark:!border-[yellow]" />
+		<Divider text="Custom line" injClass="!border-[red] dark:!border-[purple]" />
+		<Divider text="Custom text" injClass="!text-[red]" />
+		<Divider text="Custom line and text" injClass="!border-[red] !text-[blue] dark:!text-[purple]" />
+		<Divider line="dashed" text="Custom dashed line" injClass="!border-[#FF5722]" />
 	</div>
 	<div class="px-4">
-		<div class="py-4 font-bold">Vertical segmentation line</div>
+		<div class="py-4 font-bold">Vertical divider</div>
 		<div class="text-sm">
-			Three -day volley<Divider layout="v" />Three -day Lianzhu<Divider layout="v" />Person computer
+			Three days in the sky<Divider layout="v" />Three days in a row<Divider layout="v" />Human computer
 		</div>
 	</div>
 	<div>
-		<div class="p-4 font-bold">Different thickness</div>
+		<div class="p-4 font-bold">Different weights</div>
 		<Divider />
 		<Divider weight="2" />
 		<Divider weight="4" />
 		<div class="px-4 text-sm">
-			Sword<Divider layout="v" />Three -day volley<Divider layout="v" weight="2" />Three -day Lianzhu<Divider layout="v" weight="4" />Person
-			computer
+			Guardian<Divider layout="v" />Three days in the sky<Divider layout="v" weight="2" />Three days in a row<Divider
+				layout="v"
+				weight="4"
+			/>Human computer
 		</div>
 	</div>
 	<div class="px-4">
-		<div class="py-4 font-bold">Custom vertical division line</div>
+		<div class="py-4 font-bold">Custom vertical divider</div>
 		<div class="text-sm">
-			Increase
+			Increase spacing
 			<Divider layout="v" mx="4" />
-			customize
-			<Divider layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
-			color
-			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
+			Custom
+			<Divider layout="v" mx="4" injClass="!border-[red] dark:!border-[purple]" />
+			Color
+			<Divider line="dashed" layout="v" mx="4" injClass="!border-[red] dark:!border-[purple]" />
 			Line style
 		</div>
 	</div>

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

@@ -42,11 +42,11 @@
 	</div>
 	<div>
 		<div class="p-4 font-bold">自定义颜色</div>
-		<Divider injClass="border-blue dark:border-yellow" />
-		<Divider text="自定义线条" injClass="border-[red] dark:border-extend1" />
-		<Divider text="自定义文字" injClass="text-[red]" />
-		<Divider text="自定义线条与文字" injClass="border-[red] text-[blue] dark:text-[yellow]" />
-		<Divider line="dashed" text="自定义虚线" injClass="border-[#FF5722]" />
+		<Divider injClass="!border-[blue] dark:!border-[yellow]" />
+		<Divider text="自定义线条" injClass="!border-[red] dark:!border-[purple]" />
+		<Divider text="自定义文字" injClass="!text-[red]" />
+		<Divider text="自定义线条与文字" injClass="!border-[red] !text-[blue] dark:!text-[purple]" />
+		<Divider line="dashed" text="自定义虚线" injClass="!border-[#FF5722]" />
 	</div>
 	<div class="px-4">
 		<div class="py-4 font-bold">垂直分割线</div>
@@ -69,9 +69,9 @@
 			加大间距
 			<Divider layout="v" mx="4" />
 			自定义
-			<Divider layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
+			<Divider layout="v" mx="4" injClass="!border-[red] dark:!border-[purple]" />
 			颜色
-			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
+			<Divider line="dashed" layout="v" mx="4" injClass="!border-[red] dark:!border-[purple]" />
 			与线条风格
 		</div>
 	</div>

doc/components/divider/api.md

@@ -1,13 +1,13 @@
 ## Divider Props
 
-| 属性     | 类型   | 默认值   | 可选值              | 必传 | 说明                        |
-| -------- | ------ | -------- | ------------------- | ---- | --------------------------- |
-| layout   | String | 'h'      | h/v                 | N    | 分隔线类型，水平 h/垂直 v。 |
-| px       | String | '4'      | 0/4/8/16/36         | N    | 左右留白（仅水平有效）。    |
-| py       | String | '4'      | 0/4/8               | N    | 高度（仅水平有效）。        |
-| text     | String | ''       | -                   | N    | 文本内容（仅水平有效）。    |
-| align    | String | 'center' | left/right/center   | N    | 文本位置（仅水平有效）。    |
-| line     | String | 'solid'  | solid/dashed/dotted | N    | 线条风格。                  |
-| weight   | String | '1'      | 1/2/4               | N    | 线条粗细。                  |
-| mx       | String | '1'      | 1/2/4               | N    | 左右间距（仅垂直有效）。    |
-| injClass | String | ''       | Class               | N    | 注入 CSS 名称。             |
+| 名称     | 类型                          | 默认值     | 必传 | 说明                        |
+| -------- | ----------------------------- | ---------- | ---- | --------------------------- |
+| layout   | `'h'\|'v'`                    | `'h'`      | N    | 分隔线类型，水平 h/垂直 v。 |
+| px       | `'0'\|'4'\|'8'\|'16'\|'36'`   | `'0'`      | N    | 左右留白（仅水平有效）。    |
+| py       | `'0'\|'4'\|'8'`               | `'4'`      | N    | 高度（仅水平有效）。        |
+| text     | `string`                      | `''`       | N    | 文本内容（仅水平有效）。    |
+| align    | `'left'\|'center'\|'right'`   | `'center'` | N    | 文本位置（仅水平有效）。    |
+| line     | `'solid'\|'dashed'\|'dotted'` | `'solid'`  | N    | 线条风格。                  |
+| weight   | `'1'\|'2'\|'4'`               | `'1'`      | N    | 线条粗细。                  |
+| mx       | `'1'\|'2'\|'4'`               | `'1'`      | N    | 左右间距（仅垂直有效）。    |
+| injClass | `string`                      | `''`       | N    | 注入 CSS 名称。             |

doc/components/divider/api_en.md

@@ -1,13 +1,13 @@
 ## Divider Props
 
-| Property | Type   | Default  | Options             | Required | Description                                                          |
-| -------- | ------ | -------- | ------------------- | -------- | -------------------------------------------------------------------- |
-| layout   | String | 'h'      | h/v                 | No       | The Orientation of Divider, horizontal or vertical                   |
-| px       | String | '4'      | 0/4/8/16/36         | No       | Left and right paddings (only available for horizontal divider)      |
-| py       | String | '4'      | 0/4/8               | No       | Height (only available for horizontal divider)                       |
-| text     | String | ''       | -                   | No       | Text content (only available for horizontal divider)                 |
-| align    | String | 'center' | left/right/center   | No       | Text alignment (only available for horizontal divider)               |
-| line     | String | 'solid'  | solid/dashed/dotted | No       | Line style                                                           |
-| weight   | String | '1'      | 1/2/4               | No       | Line thickness                                                       |
-| mx       | String | '1'      | 1/2/4               | No       | Spacing between left and right (only available for vertical divider) |
-| injClass | String | ''       | Class               | No       | CSS class name to be injected                                        |
+| Name     | Type                          | Default    | Required | Description                               |
+| -------- | ----------------------------- | ---------- | -------- | ----------------------------------------- |
+| layout   | `'h'\|'v'`                    | `'h'`      | N        | Divider type, horizontal h/vertical v.    |
+| px       | `'0'\|'4'\|'8'\|'16'\|'36'`   | `'0'`      | N        | Left and right padding (horizontal only). |
+| py       | `'0'\|'4'\|'8'`               | `'4'`      | N        | Height (horizontal only).                 |
+| text     | `string`                      | `''`       | N        | Text content (horizontal only).           |
+| align    | `'left'\|'center'\|'right'`   | `'center'` | N        | Text position (horizontal only).          |
+| line     | `'solid'\|'dashed'\|'dotted'` | `'solid'`  | N        | Line style.                               |
+| weight   | `'1'\|'2'\|'4'`               | `'1'`      | N        | Line thickness.                           |
+| mx       | `'1'\|'2'\|'4'`               | `'1'`      | N        | Left and right margin (vertical only).    |
+| injClass | `string`                      | `''`       | N        | Inject CSS class name.                    |

doc/components/divider/guide.md

@@ -8,4 +8,4 @@
 
 ## Props 类型
 
-部分 Props 比如 px、py、weight、mx，明明是数字为何要用字符类型？主要是由于可选参数传入组件内部是作为 object 的 key 使用的，就必须为字符，况且组件传值的时候写 '' 应该比写 {} 更方便吧！坚持传入数字的话也可以。
+部分 Props 比如 px、py、weight、mx，明明是数字为何要用字符类型？主要是由于可选参数传入组件内部是作为 object 的 key 使用的，就必须为字符，况且组件传值的时候写 '' 应该比写 {} 更方便吧！坚持传入数字的话也可以，只是开启类型检查时会报错。

doc/components/divider/guide_en.md

@@ -8,4 +8,4 @@ Passing in values other than the available options will be treated as the defaul
 
 ## Prop Types
 
-For some Props such as px, py, weight, mx, they are clearly numbers, why use string types? It is mainly because the optional parameters passed in to the component are used as object keys inside, so they must be strings. Besides, it should be more convenient to write '' instead of {} when passing values to the component! Of course, you can also insist on passing in numbers.
+For some Props such as px, py, weight, mx, they are clearly numbers, why use string types? It is mainly because the optional parameters passed in to the component are used as object keys inside, so they must be strings. Besides, it should be more convenient to write '' instead of {} when passing values to the component! Of course, you can also insist on passing in numbers, but it will report an error when type checking is enabled.

packages/stdf/components/divider/Divider.svelte

@@ -30,27 +30,24 @@
 
 {#if layout === 'v'}
 	<div
-		class={`inline ${weightWObj[weight] || weightWObj['1']} border-black/10 dark:border-white/20 ${mxObj[mx] || mxObj['1']} ${
-			lineObj[line] || lineObj.solid
-		} ${injClass}`}
+		class="inline {weightWObj[weight] || weightWObj['1']} border-black/10 dark:border-white/20 {mxObj[mx] || mxObj['1']} {lineObj[line] ||
+			lineObj.solid} {injClass}"
 	></div>
 {:else}
-	<div class={`flex items-center ${pxObj[px] || pxObj['0']} ${pyObj[py] || pyObj['4']}`}>
+	<div class="flex items-center {pxObj[px] || pxObj['0']} {pyObj[py] || pyObj['4']}">
 		{#if (text !== '' && align !== 'left') || text === ''}
 			<div
-				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
-					lineObj[line] || lineObj.solid
-				}  ${injClass}`}
+				class="grow {weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 {lineObj[line] ||
+					lineObj.solid} {injClass}"
 			></div>
 		{/if}
 		{#if text !== ''}
-			<div class={`flex-none mx-2 text-xs text-gray-400 ${injClass}`}>{text}</div>
+			<div class="flex-none mx-2 text-xs text-gray-400 {injClass}">{text}</div>
 		{/if}
 		{#if (text !== '' && align !== 'right') || text === ''}
 			<div
-				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
-					lineObj[line] || lineObj.solid
-				}  ${injClass}`}
+				class="grow {weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 {lineObj[line] ||
+					lineObj.solid} {injClass}"
 			></div>
 		{/if}
 	</div>