chore(divider): split demo code (#2702)

jd-opensource · Nov 30, 2023 · a772f36 · a772f36
1 parent 6798dce
commit a772f36
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 201 deletions.
diff --git a/src/packages/__VUE/divider/demo.vue b/src/packages/__VUE/divider/demo.vue
@@ -1,52 +1,49 @@
 <template>
   <div class="demo full bg-w">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-divider />
-    <h2>{{ translate('withText') }}</h2>
-    <nut-divider>{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('contentPosition') }}</h2>
-    <nut-divider content-position="left">{{ translate('text') }}</nut-divider>
-    <nut-divider content-position="right">{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('dashed') }}</h2>
-    <nut-divider dashed>{{ translate('text') }}</nut-divider>
-    <h2>{{ translate('customStyle') }}</h2>
-    <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">{{
-      translate('text')
-    }}</nut-divider>
-    <h2>{{ translate('verticalDivider') }}</h2>
-    <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
-      {{ translate('text') }}
-      <nut-divider direction="vertical" />
-      <a href="#" :style="{ color: '#1989fa' }">{{ translate('link') }}</a>
-      <nut-divider direction="vertical" />
-      <a href="#" :style="{ color: '#1989fa' }">{{ translate('link') }}</a>
-    </div>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('text') }}</h2>
+    <Text />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('dashed') }}</h2>
+    <Dashed />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
   </div>
 </template>
 
 <script setup lang="ts">
-import NutDivider from './index.vue';
+import Basic from './demo/basic.vue';
+import Text from './demo/text.vue';
+import Position from './demo/position.vue';
+import Dashed from './demo/dashed.vue';
+import Custom from './demo/custom.vue';
+import Vertical from './demo/vertical.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
+const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
-    withText: '展示文本',
-    contentPosition: '内容位置',
+    text: '展示文本',
+    position: '内容位置',
     dashed: '虚线',
-    customStyle: '自定义样式',
-    verticalDivider: '垂直分割线',
-    text: '文本',
-    link: '链接'
+    custom: '自定义样式',
+    vertical: '垂直分割线'
   },
   'en-US': {
     basic: 'Basic Usage',
-    withText: 'With Text',
-    contentPosition: 'Content Position',
+    text: 'With Text',
+    position: 'Content Position',
     dashed: 'Dashed',
-    customStyle: 'Custom Style',
-    verticalDivider: 'Vertical Divider',
-    text: 'Text',
-    link: 'Link'
+    custom: 'Custom Style',
+    vertical: 'Vertical Divider'
   }
 });
 </script>
diff --git a/src/packages/__VUE/divider/demo/basic.vue b/src/packages/__VUE/divider/demo/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider />
+</template>
diff --git a/src/packages/__VUE/divider/demo/custom.vue b/src/packages/__VUE/divider/demo/custom.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/dashed.vue b/src/packages/__VUE/divider/demo/dashed.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider dashed> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/position.vue b/src/packages/__VUE/divider/demo/position.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-divider content-position="left"> text </nut-divider>
+  <nut-divider> text </nut-divider>
+  <nut-divider content-position="right"> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/text.vue b/src/packages/__VUE/divider/demo/text.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-divider> text </nut-divider>
+</template>
diff --git a/src/packages/__VUE/divider/demo/vertical.vue b/src/packages/__VUE/divider/demo/vertical.vue
@@ -0,0 +1,9 @@
+<template>
+  <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
+    text1
+    <nut-divider direction="vertical" />
+    <a href="#" style="color: #1989fa"> link </a>
+    <nut-divider direction="vertical" />
+    text2
+  </div>
+</template>
diff --git a/src/packages/__VUE/divider/doc.en-US.md b/src/packages/__VUE/divider/doc.en-US.md
@@ -18,106 +18,51 @@ app.use(Divider);
 
 Default render one horizontal divider line.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider />
-</template>
-```
-
-:::
+> demo: divider basic
 
 ### With Text
 
 Insert text into divider with default slot.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider>text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider text
 
 ### Content Position
 
 Set Content Position with content-position attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider content-position="left">text</nut-divider>
-  <nut-divider content-position="right">text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider position
 
 ### Dashed
 
 Render dashed divider line with dashed attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider dashed>text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider dashed
 
 ### Custom Style
 
 User can custom divider style with style attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">text</nut-divider>
-</template>
-```
-
-:::
+> demo: divider custom
 
 ### Vertical Divider
 
-:::demo
-
-```vue
-<template>
-  <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
-    Text
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">Link</a>
-    <nut-divider direction="vertical" />
-    <a href="#" :style="{ color: '#1989fa' }">Link</a>
-  </div>
-</template>
-```
-
-:::
+> demo: divider vertical
 
 ## API
 
 ### Props
 
-| Attribute        | Description                                        | Type    | Default      |
-| ---------------- | -------------------------------------------------- | ------- | ------------ |
-| dashed           | Whether to use dashed border                       | boolean | `false`      |
-| hairline         | Whether to use hairline                            | boolean | `true`       |
-| content-position | Content position, can be set to `left` or `right`  | string  | `center`     |
-| direction        | The direction of divider, can to set to `vertical` | string  | `horizontal` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| dashed | Whether to use dashed border | boolean | `false` |
+| hairline | Whether to use hairline | boolean | `true` |
+| content-position | Content position, can be set to `left` or `right` | string | `center` |
+| direction | The direction of divider, can to set to `vertical` | string | `horizontal` |
 
 ### Slots
 
-| Name    | Description                                   |
-| ------- | --------------------------------------------- |
+| Name | Description |
+| --- | --- |
 | default | Default slot, when `direction` = `horizontal` |
 
 ## Theming
@@ -126,15 +71,15 @@ User can custom divider style with style attribute.
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                               | Default Value            |
-| ---------------------------------- | ------------------------ |
-| --nut-divider-margin               | _16px 0_                 |
-| --nut-divider-text-font-size       | _var(--nut-font-size-2)_ |
-| --nut-divider-text-color           | _#909ca4_                |
-| --nut-divider-line-height          | _2px_                    |
-| --nut-divider-before-margin-right  | _16px_                   |
-| --nut-divider-after-margin-left    | _16px_                   |
-| --nut-divider-vertical-height      | _12px_                   |
-| --nut-divider-vertical-top         | _2px_                    |
-| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_    |
-| --nut-divider-vertical-margin      | _0 8px_                  |
+| Name | Default Value |
+| --- | --- |
+| --nut-divider-margin | _16px 0_ |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ |
+| --nut-divider-text-color | _#909ca4_ |
+| --nut-divider-line-height | _2px_ |
+| --nut-divider-before-margin-right | _16px_ |
+| --nut-divider-after-margin-left | _16px_ |
+| --nut-divider-vertical-height | _12px_ |
+| --nut-divider-vertical-top | _2px_ |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ |
+| --nut-divider-vertical-margin | _0 8px_ |