ci(field): 文档集成 field 组件解析

docs/docs/zh-CN/components/avatar.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-avatar :href="href"></lay-avatar>
+  <lay-avatar :src="src"></lay-avatar>
 </template>
 
 <script>
@@ -10,10 +10,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const href = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
+    const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
 
     return {
-        href
+        src
     }
   }
 }
@@ -24,7 +24,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-avatar :href="avatar" radius></lay-avatar>
+  <lay-avatar :src="src" radius></lay-avatar>
 </template>
 
 <script>
@@ -34,10 +34,10 @@ export default {
 
     setup() {
 
-        const avatar = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
+        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
         
         return {
-            avatar
+            src
         }
   }
 }
@@ -48,10 +48,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-avatar :href="avatar" size="xs"></lay-avatar> 
+  <lay-avatar :src="src" size="xs"></lay-avatar> 
-  <lay-avatar :href="avatar" size="sm"></lay-avatar>
+  <lay-avatar :src="src" size="sm"></lay-avatar>
-  <lay-avatar :href="avatar"></lay-avatar>
+  <lay-avatar :src="src"></lay-avatar>
-  <lay-avatar :href="avatar" size="lg"></lay-avatar>
+  <lay-avatar :src="src" size="lg"></lay-avatar>
 </template>
 
 <script>
@@ -60,10 +60,10 @@ import { ref } from 'vue'
 export default {
     setup() {
 
-        const avatar = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
+        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
 
         return {
-            avatar
+            src
         }
   }
 }
@@ -71,7 +71,9 @@ export default {
 
 :::
 
-<lay-field title="Avatar attributes" style="margin-top:40px"/>
+::: field Avatar attributes
+
+:::
 
 |        |      |                |
 | ------ | ---- | -------------- |

docs/docs/zh-CN/components/checkbox.md

@@ -103,7 +103,9 @@ export default {
 
 :::
 
-<lay-field title="Checkbox attributes" style="margin-top:40px"/>
+::: field Checkbox attributes
+
+::: 
 
 |          |      |                         |  
 | -------- | ---- | ----------------------- | 
@@ -111,7 +113,9 @@ export default {
 | skin       | 主题 | --  |
 | label       | 选中值 | --   | 
 
-<lay-field title="Checkbox events" style="margin-top:40px"/>
+::: field Checkbox events
+
+::: 
 
 |          |      |                         |  
 | -------- | ---- | ----------------------- | 

docs/docs/zh-CN/components/collapse.md

@@ -25,7 +25,10 @@ export default {
 
 :::
 
-<lay-field title="Collapse attributes" style="margin-top:40px"/>
+
+::: field Collapse attributes
+
+:::
 
 |       |        |                |
 | ----- | ------ | -------------- |

docs/docs/zh-CN/components/rate.md

@@ -64,10 +64,9 @@ export default {
 
 :::
 
-|         |          |                |
+::: field Rate attributes
-| ------- | -------- | -------------- |
+
-| v-model | 当前激活 | --             |
+:::
-| type    | 主题样式 | `card` `brief` |
 
 |         |          |     |
 | ------- | -------- | --- |

docs/docs/zh-CN/components/tab.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-tab v-model:modelValue="current">
+  <lay-tab v-model="current1">
     <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
     <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
   </lay-tab>
@@ -13,10 +13,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const current = ref("1")
+    const current1 = ref("1")
 
     return {
-      current
+      current1
     }
   }
 }
@@ -76,7 +76,10 @@ export default {
 
 :::
 
-<lay-field title="Tab attributes" style="margin-top:40px"/>
+::: field Tab attributes 
+
+:::
+
 
 |         |          |                |
 | ------- | -------- | -------------- |

docs/src/plugin/common-plugins.ts

@@ -23,23 +23,7 @@ const plugins = [
       md.use(snippet)
         .use(preWrapper)
         .use(container, 'demo', demo)
-        .use(...createContainer('tip', 'TIP'))
+        .use(...createContainer('field', '描述信息'))
-        .use(...createContainer('warning', 'WARNING'))
-        .use(...createContainer('danger', 'WARNING'))
-        .use(container, 'v-pre', {
-          render: (tokens: Token[], idx: number) =>
-            tokens[idx].nesting === 1 ? '<div v-pre>\n' : '</div>\n',
-        })
-        .use(container, 'details', {
-          render: (tokens: Token[], idx: number) => {
-            const info = tokens[idx].info.trim().slice(7).trim() // 7 = 'details'.length
-            return tokens[idx].nesting === 1
-              ? `<details class="custom-block details">${
-                  info ? `<summary>${info}</summary>` : ''
-                }\n`
-              : '</details>'
-          },
-        })
     },
   }),
 ]

docs/src/plugin/create-container.ts

@@ -21,11 +21,11 @@ export default function createContainer(
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<div class="${klass} custom-block"><p class="custom-block-title">${
+          return `<lay-field title="${
             info || defaultTitle
-          }</p>\n`
+          }" style="margin-top:40px">`
         } else {
-          return '</div>\n'
+          return '</lay-field>\n'
         }
       },
     },

src/module/avatar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <img
-    :src="href"
+    :src="src"
     class="layui-avatar"
     :class="[
       radius ? 'layui-avatar-radius' : '',
@@ -13,7 +13,7 @@
 import { defineProps } from 'vue'
 
 const props = defineProps<{
-  href?: String
+  src?: String
   radius?: boolean
   size?: string
 }>()