slider - 增加step

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 dist/
 example/dist/
 lib/
+es/
 /types/
 npm-debug.log*
 yarn-debug.log*

build.all.ts

@@ -0,0 +1,40 @@
+import { UserConfigExport } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default (): UserConfigExport => {
+  return {
+    publicDir: false,
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: resolve(__dirname, './')
+        }
+      ]
+    },
+    plugins: [
+      vue(),
+    ],
+    build: {
+      cssCodeSplit: false,
+      outDir: 'lib',
+      emptyOutDir: true,
+      lib: {
+        entry: resolve(__dirname, './src/index.ts'),
+        name: 'layui-vue',
+        formats: ['es'],
+        fileName: (name) => `index.js`
+      },
+      rollupOptions: {
+        output: {
+          globals: {
+            vue: 'Vue'
+          },
+          assetFileNames: 'index.css',
+        },
+        external: ['vue', 'vue-router']
+      }
+    }
+  }
+}

build.es.ts

@@ -0,0 +1,64 @@
+import { UserConfigExport } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import * as fs from 'fs'
+
+const inputDir = resolve(__dirname, './src/component')
+
+const inputsArray = fs.readdirSync(inputDir).filter((name) => {
+  const componentDir = resolve(inputDir, name)
+  const isDir = fs.lstatSync(componentDir).isDirectory()
+  return isDir && fs.readdirSync(componentDir).includes('index.ts')
+})
+
+const inputs = inputsArray.reduce((backObj, pkgName) => {
+  backObj[pkgName] = resolve(__dirname, `./src/component/${pkgName}/index.ts`)
+  return backObj
+}, {})
+
+inputs['index'] = resolve(__dirname, './src/index.ts')
+
+export default (): UserConfigExport => {
+  return {
+    publicDir: false,
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: resolve(__dirname, './')
+        }
+      ]
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true
+        }
+      },
+      postcss: {}
+    },
+    plugins: [vue()],
+    build: {
+      cssCodeSplit: true,
+      emptyOutDir: true,
+      outDir: 'es',
+      lib: {
+        entry: './index.ts',
+        formats: ['es']
+      },
+      rollupOptions: {
+        input: inputs,
+        output: {
+          globals: {
+            vue: 'Vue'
+          },
+          entryFileNames: ({ name }) => {
+            return name === 'index' ? 'index.js' : '[name]/index.js'
+          },
+          assetFileNames: '[name]/index.css'
+        },
+        external: ['vue', 'vue-router']
+      }
+    }
+  }
+}

build.less.ts

@@ -0,0 +1,6 @@
+/**
+ * merge less file 
+ * <p>
+ */
+
+

example/docs/zh-CN/components/animation.md

@@ -71,6 +71,113 @@ export default {
   }
 }
 </script>
+<style>
+.site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.site-doc-icon li .doc-icon-name,
+.site-doc-icon li .doc-icon-code {
+  color: #c2c2c2;
+}
+
+.site-doc-icon li .doc-icon-fontclass {
+  height: 40px;
+  line-height: 20px;
+  padding: 0 5px;
+  font-size: 13px;
+  color: #333;
+}
+
+.site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.site-doc-icon li .layui-icon {
+  display: inline-block;
+  font-size: 32px;
+}
+
+.site-doc-color {
+  margin: 15px 0;
+}
+
+.site-doc-necolor li div {
+  border-radius: 0;
+  color: #000 !important;
+}
+
+.site-doc-color li div {
+  padding: 20px 10px;
+  color: #fff;
+  text-align: center;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.site-doc-bgcolor li {
+  padding: 20px 10px;
+}
+.anim .site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.anim .site-doc-icon li {
+  width: 50%;
+}
+
+.anim .site-doc-anim li {
+  height: auto;
+}
+
+.anim .site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.anim .site-doc-icon li .layui-anim {
+  width: 125px;
+  height: 125px;
+  line-height: 125px;
+  margin: 0 auto 10px;
+  text-align: center;
+  background-color: #009688;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.anim .site-doc-icon li .code {
+  white-space: nowrap;
+}
+</style>
 
 :::
 

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

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-avatar` 标签, 创建头像
 
 <template>
   <lay-avatar :src="src"></lay-avatar>

example/docs/zh-CN/components/backtop.md

@@ -11,6 +11,9 @@
   <lay-backtop></lay-backtop>
 </template>
 
+<script>
+</script>
+
 :::
 
 :::title 自定义
@@ -35,7 +38,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/badge.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-badge` 标签, 创建徽章
 
 <template>
     <lay-badge type="dot"></lay-badge>&nbsp;

example/docs/zh-CN/components/button.md

@@ -12,7 +12,6 @@
   <lay-button type="normal">百搭按钮</lay-button>
   <lay-button type="warm">暖色按钮</lay-button>
   <lay-button type="danger">警告按钮</lay-button>
-  <lay-button type="disabled">禁用按钮</lay-button>
 </template>
 
 <script>
@@ -60,7 +59,7 @@ export default {
 ::: title 按钮尺寸
 :::
 
-::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
+::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
 
 <template>
   <lay-button type="primary" size="lg">原始按钮</lay-button>
@@ -88,7 +87,7 @@ export default {
 ::: title 流式按钮
 :::
 
-::: demo 传入 `size` 属性, 创建最大化按钮
+::: demo 使用 `fluid` 属性, 创建最大化按钮
 
 <template>
   <lay-button type="primary" fluid>最大化按钮</lay-button>
@@ -114,7 +113,7 @@ export default {
 ::: title 圆角按钮
 :::
 
-::: demo 传入 `radius` 属性，创建圆角按钮
+::: demo 使用 `radius` 属性，创建圆角按钮
 
 <template>
   <lay-button type="primary" radius>原始按钮</lay-button>
@@ -234,7 +233,7 @@ export default {
 ::: title 加载按钮
 :::
 
-::: demo 传入 `loading` 属性, 控制按钮的加载状态
+::: demo 使用 `loading` 属性, 控制按钮的加载状态
 
 <template>
   <lay-button-container>

example/docs/zh-CN/components/card.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-card` 标签, 创建卡片组件
 
 <template>
 <div class="card-container">

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

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
 
 <template>
   <lay-form>

example/docs/zh-CN/components/confirm.md

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -39,7 +39,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/drawer.md

@@ -0,0 +1,175 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible = ref(false)
+
+    const changeVisible = function() {
+        visible.value = !visible.value;
+    }
+
+    return {
+        visible,
+        changeVisible
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 抽屉嵌套
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible1" type="primary">打开</lay-button>
+  <lay-layer type="drawer" v-model="visible1" title="标题">
+      <lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
+      <lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
+      内容
+      </lay-layer>
+  </lay-layer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(false)
+
+    const changeVisible1 = function() {
+        visible1.value = !visible1.value;
+    }
+
+    const visible2 = ref(false)
+
+    const changeVisible2 = function() {
+        visible2.value = !visible2.value;
+    }
+
+    return {
+        visible1,
+        visible2,
+        changeVisible1,
+        changeVisible2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 函数调用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="openDrawer" type="primary">调用</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容"
+        })
+    }
+
+    return {
+        openDrawer
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 不同方向
+:::
+
+::: demo
+
+<template>
+    <lay-button @click="openTopDrawer" type="primary">上</lay-button>
+    <lay-button @click="openBottomDrawer" type="primary">下</lay-button>
+    <lay-button @click="openLeftDrawer" type="primary">左</lay-button>
+    <lay-button @click="openRightDrawer" type="primary">右</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openTopDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "t"
+        })
+    }
+
+    const openBottomDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "b"
+        })
+    }
+
+    const openLeftDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "l"
+        })
+    }
+
+    const openRightDrawer = function() {
+        layer.drawer({
+            title: "标题",
+            content: "内容",
+            offset: "r"
+        })
+    }
+
+    return {
+        openTopDrawer,
+        openBottomDrawer,
+        openLeftDrawer,
+        openRightDrawer,
+    }
+  }
+}
+</script>
+
+:::

example/docs/zh-CN/components/exception.md

@@ -0,0 +1,145 @@
+::: anchor
+:::
+
+::: title 401
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="401" title="401" describe="暂无相关权限">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 403
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="403" title="403" describe="暂无相关权限">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 404
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="404" title="404" describe="跳转页面失败">
+    <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 500
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="500" title="500" describe="服务发生错误">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Exception 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | --     |
+| status | 状态 | `403` `404` `500` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Exception 插槽
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| action | 操作 | --     |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::

example/docs/zh-CN/components/grid.md

@@ -105,6 +105,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 
@@ -136,6 +149,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/icon.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-icon` 标签, 创建图标组件
 
 <template>
   <lay-icon type="layui-icon-face-smile"></lay-icon>
@@ -27,7 +27,7 @@ export default {
 ::: title 图标颜色
 :::
 
-::: demo
+::: demo 使用 `color` 属性设置颜色
 
 <template>
   <lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
@@ -55,7 +55,7 @@ export default {
 ::: title 图标尺寸
 :::
 
-::: demo
+::: demo 使用 `size` 属性设置尺寸
 
 <template>
   <lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>

example/docs/zh-CN/components/input.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-input` 标签, 创建输入框
 
 <template>
   <lay-input v-model="data1"></lay-input>

example/docs/zh-CN/components/inputNumber.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-input-number` 标签, 创建数字输入框
 
 <template>
   <lay-input-number v-model="data"></lay-input-number>

example/docs/zh-CN/components/layout.md

@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-body>content</lay-body>
     <lay-footer>footer</lay-footer>
@@ -27,21 +27,21 @@ export default {
 </script>
 
 <style>
-.lay-code .layui-footer,
-.lay-code .layui-header {
+.example .layui-footer,
+.example .layui-header {
   line-height: 60px;
   text-align: center;
   background: #87ca9a;
   color: white;
 }
-.lay-code .layui-side {
+.example .layui-side {
   display: flex;
   background: #77c38c;
   align-items: center;
   justify-content: center;
   color: white;
 }
-.lay-code .layui-body {
+.example .layui-body {
   display: flex;
   background: #5FB878;
   align-items: center;
@@ -58,7 +58,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>left</lay-side>
     <lay-body>content</lay-body>
     <lay-side>right</lay-side>
@@ -76,6 +76,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -85,7 +108,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-layout>
       <lay-side>side</lay-side>
@@ -105,6 +128,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -114,7 +160,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>side</lay-side>
     <lay-layout>
       <lay-header>header</lay-header>
@@ -123,7 +169,7 @@ export default {
     </lay-layout>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-layout>
       <lay-header>header</lay-header>
       <lay-body>body</lay-body>
@@ -132,7 +178,7 @@ export default {
     <lay-side>side</lay-side>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -143,7 +189,7 @@ export default {
     <lay-footer>Footer</lay-footer>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -166,6 +212,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/load.md

@@ -16,7 +16,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -85,7 +85,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/menu.md

@@ -12,12 +12,12 @@
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单三" id="10">
-            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单" id="13"></lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -52,12 +52,94 @@ export default {
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单三" id="10">
-            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+        </lay-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys = ref(["7"])
+    const selectedKey = ref("5")
+
+    return {
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 反转样式
+:::
+
+::: demo
+
+<template>
+  <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true">
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
+    <lay-menu-item title="用户" id="2"></lay-menu-item>
+    <lay-menu-item title="角色" id="3"></lay-menu-item> 
+    <lay-sub-menu title="目录" id="7">
+        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+        </lay-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys = ref(["7"])
+    const selectedKey = ref("5")
+
+    return {
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 切换主题
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys" :tree="true">
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
+    <lay-menu-item title="用户" id="2"></lay-menu-item>
+    <lay-menu-item title="角色" id="3"></lay-menu-item> 
+    <lay-sub-menu title="目录" id="7">
+        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单" id="13"></lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -90,17 +172,29 @@ export default {
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
     <lay-menu-item id="1">
-      <router-link to="">首页</router-link>
+      <router-link to="">
+        <lay-icon type="layui-icon-home"></lay-icon> 
+        首页
+      </router-link>
     </lay-menu-item>
     <lay-sub-menu id="7">
         <template v-slot:title> 
-          <router-link to="">目录</router-link>
+          <router-link to="">
+            <lay-icon type="layui-icon-home"></lay-icon> 
+            目录
+          </router-link>
         </template>
         <lay-menu-item id="8">
-            <router-link to="">菜单一</router-link>
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
         </lay-menu-item> 
         <lay-menu-item id="9">
-            <router-link to="">菜单二</router-link>
+            <router-link to="">
+              <lay-icon type="layui-icon-home"></lay-icon> 
+              菜单
+            </router-link>
         </lay-menu-item>
     </lay-sub-menu> 
   </lay-menu>
@@ -136,6 +230,9 @@ export default {
 | ------------------- | ------ | ---- |
 | v-model:selectedKey | 选中项 | --   |
 | v-model:openKeys    | 打开项 | --   |
+| theme    | 菜单主题 | `dark` `light`   |
+| inverted    | 特殊的激活样式 | `true` `false`  |
+| level    | 菜单层级 | `true` `false`  |
 
 :::
 
@@ -187,4 +284,4 @@ export default {
 :::
 
 ::: previousNext nav
-:::
+:::

example/docs/zh-CN/components/modal.md

@@ -28,7 +28,7 @@ export default {
     return {
         visible1
     };
-  },
+  }
 };
 </script>
 
@@ -61,7 +61,7 @@ export default {
     return {
         visible2
     };
-  },
+  }
 };
 </script>
 
@@ -94,7 +94,7 @@ export default {
     return {
         visible3
     };
-  },
+  }
 };
 </script>
 
@@ -127,7 +127,7 @@ export default {
     return {
         visible4
     };
-  },
+  }
 };
 </script>
 
@@ -160,7 +160,7 @@ export default {
     return {
         visible8
     };
-  },
+  }
 };
 </script>
 
@@ -193,7 +193,7 @@ export default {
         type5,
         visible5
     };
-  },
+  }
 };
 </script>
 
@@ -231,7 +231,7 @@ export default {
         btn6,
         visible6
     };
-  },
+  }
 };
 </script>
 
@@ -264,7 +264,7 @@ export default {
     return {
         visible7
     };
-  },
+  }
 };
 </script>
 
@@ -283,7 +283,7 @@ export default {
 
 <script>
 import { ref, watch } from "vue";
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 import { useRoute, useRouter } from "vue-router";
 export default {
   setup() {
@@ -307,7 +307,7 @@ export default {
         close,
         closeAll
     };
-  },
+  }
 };
 </script>
 

example/docs/zh-CN/components/msg.md

@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
 
     const openMsg = function() {
-        layer.msg("普通消息", { time: 1000 })
+        layer.msg("普通消息", { time: 100000 })
     }
     return {
         openMsg
@@ -42,13 +42,13 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
 
     const openSuccess = function() {
-        layer.msg("成功消息", { icon : 1, time: 1000})
+        layer.msg("成功消息", { icon : 1, time: 100000})
     }
 
     const openFailure = function() {

example/docs/zh-CN/components/page.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-page` 标签, 创建分页
 
 <template>
   <lay-page :limit="limit" 	@limit="limit = $event" :total="total" :show-page="showPage"></lay-page>

example/docs/zh-CN/components/panel.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-panel` 标签, 创建面板组件
 
 <template>
   <lay-panel><div style="padding: 30px;">面板</div></lay-panel>

example/docs/zh-CN/components/radio.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-radio` 标签, 创建一个单选框
 
 <template>
   <lay-form>

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

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-rate` 标签, 创建评分组件
 
 <template>
   <lay-rate v-model="all1"></lay-rate>

example/docs/zh-CN/components/result.md

@@ -0,0 +1,79 @@
+::: anchor
+:::
+
+::: title 成功
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+<template>
+  <lay-result></lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 失败
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+<template>
+  <lay-result status="failure"></lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Result 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | --     |
+| status | 状态 | `success` `failure` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Result 插槽
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值 |
+| ----------- | -------- | ------ |
+| content | 内容 | --     |
+| action | 操作 | --     |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::

example/docs/zh-CN/components/select.md

@@ -46,7 +46,6 @@ export default {
 import { ref } from 'vue'
 
 export default {
-  name:'selectChange',
   setup() {
     const value = ref(null);
     var i = 1;

example/docs/zh-CN/components/skeleton.md

@@ -5,7 +5,7 @@
 :::
 
 
-::: demo
+::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
 
 <template>
 <div>

example/docs/zh-CN/components/slider.md

@@ -4,7 +4,7 @@
 ::: title 横向
 :::
 
-::: demo
+::: demo 使用 `lay-slider` 标签, 创建滑块
 
 <template>
   <lay-slider v-model="value1" :disabled="false"></lay-slider>

example/docs/zh-CN/components/splitPanel.md

@@ -0,0 +1,118 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item>A</lay-split-panel-item>
+        <lay-split-panel-item>B</lay-split-panel-item>
+        <lay-split-panel-item>C</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 自定义比例
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 300px">
+        <lay-split-panel-item :space="30">1</lay-split-panel-item>
+        <lay-split-panel-item :space="20">2</lay-split-panel-item>
+        <lay-split-panel-item :space="50">3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 垂直布局
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+        <lay-split-panel-item>1</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
+        <lay-split-panel-item>3</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 组合用法
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-split-panel style="height: 600px;">
+        <lay-split-panel-item :space="60">
+            <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
+                <lay-split-panel-item :space="40">1</lay-split-panel-item>
+                <lay-split-panel-item :space="40">2</lay-split-panel-item>
+            </lay-split-panel>
+        </lay-split-panel-item>
+        <lay-split-panel-item :space="40">2</lay-split-panel-item>
+    </lay-split-panel>
+</div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title splitPanel属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
+| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50  |
+:::
+
+::: title splitPanelItem属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
+:::
+
+
+::: comment
+:::
+
+::: previousNext splitPanel
+:::

example/docs/zh-CN/components/switch.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-switch` 标签, 创建开关
 
 <template>
   <lay-switch v-model="active1"></lay-switch>

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

@@ -130,15 +130,15 @@ export default {
 
 :::
 
-::: title 控制是否关闭
+::: title 关闭前置
 :::
 
 ::: demo
 
 <template>
   <lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
-    <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-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
     <lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
     <lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
     <lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
@@ -178,15 +178,14 @@ export default {
 
 :::
 
-
 ::: title 嵌套循环
 :::
 
 ::: demo
 
 <template>
-  <lay-tab type="card" v-model="current6" @change="change6">
-    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
+  <lay-tab type="card" allow-close v-model="current6" @change="change6">
+    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
       内容{{a.id}}
     </lay-tab-item>
   </lay-tab>
@@ -204,12 +203,11 @@ export default {
     }
 
     const arr = ref([
-      {id:'1', title:'选项一'},
-      {id:'2', title:'选项二'}
+      {id:'1', title:'选项一', closable: false},
+      {id:'2', title:'选项二'},
+      {id:'3', title:'选项三'}
     ])
 
-    arr.value.push({id:'3', title:'选项三'})
-
     return {
       current6,
       arr
@@ -225,13 +223,13 @@ export default {
 
 ::: table
 
-| 属性        | 描述     | 可选值         |
-| ----------- | -------- | -------------- |
-| v-model     | 当前激活 | --             |
-| type        | 主题样式 | --             |
-| allow-close | 允许关闭 | `true` `false` |
-| before-close  | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭   |
-| before-leave  | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换   |
+| 属性         | 描述                                 | 可选值                                    |
+| ------------ | ------------------------------------ | ----------------------------------------- |
+| v-model      | 当前激活                             | --                                        |
+| type         | 主题样式                             | --                                        |
+| allow-close  | 允许关闭                             | `true` `false`                            |
+| before-close | `Function`关闭之前的回调钩子函数     | 参数(`id`), `return false` 表示不进行关闭 |
+| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
 
 :::
 
@@ -247,8 +245,21 @@ export default {
 
 :::
 
+::: title Tab Item 属性
+:::
+
+::: table
+
+| 属性     | 描述     | 可选值 |
+| -------- | -------- | ------ |
+| id       | 唯一标识 | --     |
+| title    | 头部标题 | --     |
+| closable | 允许关闭 | --     |
+
+:::
+
 ::: comment
 :::
 
 ::: previousNext tab
-:::
+:::

example/docs/zh-CN/components/table.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-table` 标签, 创建表格
 
 <template>
   <lay-table :columns="columns" :dataSource="dataSource">

example/docs/zh-CN/components/textarea.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-textarea` 标签, 创建文本域
 
 <template>
   <lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>

example/docs/zh-CN/components/transfer.md

@@ -4,7 +4,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 使用 `lay-transfer` 标签, 创建穿梭框
 
 <template>
   <lay-transfer :dataSource="dataSource1"></lay-transfer>

example/docs/zh-CN/guide/changelog.md

@@ -11,15 +11,48 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
-      <ul> 
+    <ul> 
+      <a name="0-3-6"> </a> 
+      <li> 
+        <h3>0.3.6 <span class="layui-badge-rim">2022-02-02</span></h3> 
+        <ul> 
+          <li>[新增] result 结果组件, 提供 success error 通用状态页。</li>
+          <li>[新增] exception 异常组件, 提供 403, 404, 500 通用异常页。</li>
+          <li>[新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。</li>
+          <li>[新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。</li>
+          <li>[新增] menu 组件 theme 属性, 可选值 light 和 dark。</li>
+          <li>[修复] table 组件 header 不随 body 滚动。</li>
+          <li>[升级] vue 3.2.29 版本。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="0-3-5"> </a> 
+      <li> 
+        <h3>0.3.5 <span class="layui-badge-rim">2022-01-24</span></h3> 
+        <ul> 
+          <li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
+          <li>[新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。</li>
+          <li>[修复] tab-item 组件 closable 属性警告, 兼容 string 类型。</li>
+          <li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
+          <li>[升级] icons-vue 1.0.3 版本。</li>
+          <li>[升级] layer-vue 1.3.1 版本。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-3-4"> </a> 
       <li> 
-        <h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3> 
+        <h3>0.3.4 <span class="layui-badge-rim">2022-01-19</span></h3> 
         <ul> 
           <li>[新增] avatar-list 头像列表组件。</li>
-          <li>[修复] button 按钮 disabled 为 true 时, 仍触发 click 事件。</li>
-          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
-          <li>[升级] vite 2.7.10。</li>        
+          <li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
+          <li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
+          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li> 
+          <li>[修复] layout 组件 side 因 flex 布局宽度不固定。</li>
+          <li>[优化] layer 的 children slot 渲染机制。</li>
+          <li>[升级] layer-vue 1.2.5 版本。</li>
+          <li>[升级] vue 3.2.27 版本。</li>   
         </ul> 
       </li>
     </ul>
@@ -50,7 +83,7 @@
           <li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
           <li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
           <li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
-          <li>[升级] layer-vue 1.2.4。</li>
+          <li>[升级] layer-vue 1.2.4 版本。</li>
         </ul> 
       </li>
     </ul>
@@ -68,7 +101,7 @@
           <li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
           <li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>  
           <li>[集成] eslint, prettier 规范插件 。</li>  
-          <li>[升级] icons-vue 1.0.2。</li>  
+          <li>[升级] icons-vue 1.0.2 版本。</li>  
         </ul> 
       </li>
     </ul>
@@ -87,7 +120,7 @@
           <li>[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。</li>
           <li>[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。</li>
           <li>[修复] tree 树开启 checkbox 时, 无法选中的问题。</li>
-          <li>[升级] layer-vue 1.2.2。</li>      
+          <li>[升级] layer-vue 1.2.2 版本。</li>      
         </ul> 
       </li>
     </ul>

example/docs/zh-CN/guide/getStarted.md

@@ -1,18 +1,23 @@
 ::: title 快速上手
 :::
 
-<br>
-
-::: describe 1. 使用 npm 下载
-:::
-
 ```
 npm install @layui/layui-vue --save
 ```
+:::describe 或
+:::
+```
+yarn add @layui/layui-vue --save
+```
+:::describe 或
+:::
+```
+pnpm install @layui/layui-vue --save
+```
 
 <br>
 
-::: describe 2. 在 main.ts 中依赖
+::: title 全局注册
 :::
 
 ```js
@@ -26,7 +31,27 @@ createApp(App).use(Layui).mount('#app')
 
 <br>
 
-::: describe 3. 在 index.vue 使用
+::: title 按需引入
+:::
+
+```js
+import App from './App.vue'
+import { createApp } from 'vue'
+import { LayButton, LayTable } from '@layui/layui-vue'
+import '@layui/layui-vue/es/button/index.css';
+import '@layui/layui-vue/es/table/index.css';
+
+var app = createApp(App).
+
+app.component("LayButton", LayButton);
+app.component("LayTable", LayTable);
+
+app.mount('#app')
+```
+<br>
+
+
+::: title 基础示例
 :::
 
 ```html
@@ -41,5 +66,3 @@ createApp(App).use(Layui).mount('#app')
   <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
-
-- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)

example/docs/zh-CN/guide/member.md

@@ -129,7 +129,7 @@
             莫名点
         </lay-col>
         <lay-col md="8">
-            焦点：skeleton step
+            焦点：skeleton step splitPanel
         </lay-col>
         <lay-col md="4">
             地点：中国 上海

example/src/components/LayCode.vue

@@ -2,18 +2,19 @@
   <div class="lay-code">
     <div id="source" class="source">
       <slot />
-    </div>
-    <div ref="meta" class="meta">
       <div v-if="$slots.description" class="description">
         <slot name="description" />
       </div>
+    </div>
+    <div ref="meta" class="meta">
       <div class="language-html">
         <slot name="code" />
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i class="layui-icon layui-icon-file" @click="copy" />
-      <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" title="在 Playground 中打开" />
+      <i class="layui-icon layui-icon-file btn" @click="copy" title="复制代码" />
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"  title="查看代码"/>
     </div>
   </div>
 </template>
@@ -22,6 +23,8 @@
 import { layer } from '@layui/layer-vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { usePlayGround } from '../plugin/usePlayground'
+
 const meta = ref<HTMLElement>({} as HTMLElement)
 const isFixContorl = ref(false)
 const codeAreaHeight = ref(0)
@@ -32,6 +35,15 @@ const toggle = function () {
   show.value = !show.value
 }
 
+const onPlayground = function(){
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+  const foundCode = foundCodes[0];
+  const text = foundCode.textContent || "";
+  
+  const { link } = usePlayGround(text)
+  window.open(link)
+}
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName('language-html')
   const foundCode = foundCodes[0];
@@ -121,6 +133,7 @@ function handleScroll() {
 }
 .lay-code .source {
   padding: 24px;
+  padding-bottom:15px;
 }
 .lay-code .meta {
   padding: 0 10px;
@@ -129,9 +142,10 @@ function handleScroll() {
   overflow: hidden;
   transition: height 0.2s;
 }
-.lay-code .meta .description {
+.lay-code .source .description {
   padding: 20px;
-  margin: 10px 0;
+  margin: 20px 0;
+  margin-bottom: 0px;
   border: 1px solid whitesmoke;
   box-sizing: border-box;
   background: var(--c-bg);
@@ -140,11 +154,11 @@ function handleScroll() {
   color: var(--c-text-light-1);
   word-break: break-word;
 }
-.lay-code .meta .description p {
+.lay-code .source .description p {
   margin: 0 !important;
   line-height: 26px !important;
 }
-.lay-code .meta .description code {
+.lay-code .source .description code {
   display: inline-block;
   padding: 1px 5px;
   margin: 0 4px;
@@ -155,6 +169,7 @@ function handleScroll() {
   line-height: 18px;
   color: var(--c-text-light);
 }
+
 .lay-code .control {
   height: 44px;
   box-sizing: border-box;
@@ -186,4 +201,7 @@ function handleScroll() {
   padding-left: 10px;
   padding-right: 10px;
 }
+.btn:hover::before {
+  color: #5FB878;
+}
 </style>

example/src/layouts/Layout.vue

@@ -30,20 +30,26 @@
         class="layui-nav layui-layout-right"
         style="margin-top: 0px; margin-bottom: 0px"
       >
+        <li class="layui-nav-item">
+          <a
+            href="https://layui-vue.gitee.io/layui-vue-playground"
+            target="_blank"
+          >
+            <lay-icon type="layui-icon-util" size="15px"></lay-icon>
+          </a>
+        </li>
         <li class="layui-nav-item">
           <a href="https://gitee.com/layui-vue">
             <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
-          <a
-            href="https://gitee.com/layui-vue/layui-vue/issues"
-          >
+          <a href="https://gitee.com/layui-vue/layui-vue/issues">
             <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.4 </a>
+          <a href="javascript:void(0)"> 0.3.6 </a>
         </li>
       </ul>
     </lay-header>
@@ -51,307 +57,47 @@
   </lay-layout>
 </template>
 <script>
-import { ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import menu from "../view/utils/menus";
 export default {
   setup() {
-    const route = useRoute()
-    const router = useRouter()
-    const currentPath = ref('/zh-CN/guide')
+    const route = useRoute();
+    const router = useRouter();
+    const currentPath = ref("/zh-CN/guide");
+    const theme = ref(false);
+
+    const menus = [];
+
+    menu.forEach((m) => {
+      m.children.forEach((c) => {
+        menus.push(c);
+      });
+    });
 
     watch(
       () => route.path,
       (val) => {
-        currentPath.value = val
+        currentPath.value = val;
       },
       {
         immediate: true,
         deep: true,
       }
-    )
-
-    const menus = [
-      {
-        id: 1,
-        title: '介绍',
-        subTitle: 'introduce',
-        path: '/zh-CN/guide/introduce',
-      },
-      {
-        id: 2,
-        title: '安装',
-        subTitle: 'get started',
-        path: '/zh-CN/guide/getStarted',
-      },
-      {
-        id: 3,
-        title: '更新',
-        subTitle: 'change log',
-        path: '/zh-CN/guide/changelog',
-      },
-      {
-        id: 4,
-        title: '布局',
-        subTitle: 'layout',
-        path: '/zh-CN/components/layout',
-      },
-      {
-        id: 5,
-        title: '容器',
-        subTitle: 'container',
-        path: '/zh-CN/components/container',
-      },
-      {
-        id: 6,
-        title: '按钮',
-        subTitle: 'button',
-        path: '/zh-CN/components/button',
-      },
-      {
-        id: 7,
-        title: '图标',
-        subTitle: 'iconfont',
-        path: '/zh-CN/components/icon',
-      },
-      {
-        id: 8,
-        title: '面板',
-        subTitle: 'panel',
-        path: '/zh-CN/components/panel',
-      },
-      {
-        id: 9,
-        title: '卡片',
-        subTitle: 'card',
-        path: '/zh-CN/components/card',
-      },
-      {
-        id: 10,
-        title: '动画',
-        subTitle: 'animation',
-        path: '/zh-CN/components/animation',
-      },
-      {
-        id: 11,
-        title: '栅格',
-        subTitle: 'grid',
-        path: '/zh-CN/components/grid',
-      },
-      {
-        id: 12,
-        title: '表单',
-        subTitle: 'form',
-        path: '/zh-CN/components/form',
-      },
-      {
-        id: 13,
-        title: '徽章',
-        subTitle: 'badge',
-        path: '/zh-CN/components/badge',
-      },
-      {
-        id: 14,
-        title: '区块',
-        subTitle: 'block',
-        path: '/zh-CN/components/block',
-      },
-      {
-        id: 15,
-        title: '分割',
-        subTitle: 'line',
-        path: '/zh-CN/components/line',
-      },
-      {
-        id: 16,
-        title: '菜单',
-        subTitle: 'nav',
-        path: '/zh-CN/components/menu',
-      },
-      {
-        id: 17,
-        title: '面包屑',
-        subTitle: 'breadcrumb',
-        path: '/zh-CN/components/breadcrumb',
-      },
-      {
-        id: 18,
-        title: '进度',
-        subTitle: 'progress',
-        path: '/zh-CN/components/progress',
-      },
-      {
-        id: 19,
-        title: '时间线',
-        subTitle: 'timeline',
-        path: '/zh-CN/components/timeline',
-      },
-      {
-        id: 20,
-        title: '颜色',
-        subTitle: 'color',
-        path: '/zh-CN/components/color',
-      },
-      {
-        id: 21,
-        title: '折叠面板',
-        subTitle: 'collapse',
-        path: '/zh-CN/components/collapse',
-      },
-      {
-        id: 22,
-        title: '表格',
-        subTitle: 'table',
-        path: '/zh-CN/components/table',
-      },
-      {
-        id: 23,
-        title: '头像',
-        subTitle: 'avatar',
-        path: '/zh-CN/components/avatar',
-      },
-      {
-        id: 24,
-        title: '字段',
-        subTitle: 'field',
-        path: '/zh-CN/components/field',
-      },
-      {
-        id: 25,
-        title: '空',
-        subTitle: 'empty',
-        path: '/zh-CN/components/empty',
-      },
-      {
-        id: 26,
-        title: '评分',
-        subTitle: 'rate',
-        path: '/zh-CN/components/rate',
-      },
-      {
-        id: 27,
-        title: '下拉菜单',
-        subTitle: 'dropdown',
-        path: '/zh-CN/components/dropdown',
-      },
-      {
-        id: 28,
-        title: '选项卡',
-        subTitle: 'tab',
-        path: '/zh-CN/components/tab',
-      },
-      {
-        id: 29,
-        title: '图标选择',
-        subTitle: 'iconPicker',
-        path: '/zh-CN/components/iconPicker',
-      },
-      {
-        id: 29,
-        title: '分页',
-        subTitle: 'page',
-        path: '/zh-CN/components/page',
-      },
-      {
-        id: 30,
-        title: '树形组件',
-        subTitle: 'tree',
-        path: '/zh-CN/components/tree',
-      },
-      {
-        id: 31,
-        title: '穿梭框',
-        subTitle: 'transfer',
-        path: '/zh-CN/components/transfer',
-      },
-      {
-        id: 32,
-        title: '复选框',
-        subTitle: 'checkbox',
-        path: '/zh-CN/components/checkbox',
-      },
-      {
-        id: 33,
-        title: '单选框',
-        subTitle: 'radio',
-        path: '/zh-CN/components/radio',
-      },
-      {
-        id: 34,
-        title: '输入框',
-        subTitle: 'input',
-        path: '/zh-CN/components/input',
-      }, 
-      {
-        id: 341,
-        title: '数字输入框',
-        subTitle: 'inputNumber',
-        path: '/zh-CN/components/inputNumber',
-      },
-      {
-        id: 35,
-        title: '文本域',
-        subTitle: 'textarea',
-        path: '/zh-CN/components/textarea',
-      },
-      {
-        id: 36,
-        title: '开关',
-        subTitle: 'switch',
-        path: '/zh-CN/components/switch',
-      },
-      {
-        id: 37,
-        title: '滑块',
-        subTitle: 'slider',
-        path: '/zh-CN/components/slider',
-      },
-      {
-        id: 38,
-        title: '轮播',
-        subTitle: 'carousel',
-        path: '/zh-CN/components/carousel',
-      },
-      {
-        id: 39,
-        title: '下拉选择',
-        subTitle: 'select',
-        path: '/zh-CN/components/select',
-      },
-      {
-        id: 40,
-        title: '颜色选择器',
-        subTitle: 'colorPicker',
-        path: '/zh-CN/components/colorPicker',
-      }, {
-        id: 41,
-        title: '文字提示',
-        subTitle: 'tooltip',
-        path: '/zh-CN/components/tooltip',
-      }, {
-        id: 42,
-        title: '返回顶部',
-        subTitle: 'backtop',
-        path: '/zh-CN/components/backtop',
-      },
-      {
-        id: 43,
-        title: '数字滚动',
-        subTitle: 'countup',
-        path: '/zh-CN/components/countup',
-      },
-    ]
+    );
 
     const handleClick = function (menu) {
-      router.push(menu.path)
-    }
+      router.push(menu.path);
+    };
 
     return {
       menus,
+      theme,
       currentPath,
       handleClick,
-    }
+    };
   },
-}
+};
 </script>
 <style>
 .layui-layout-document > .layui-header {

example/src/plugin/usePlayground.ts

@@ -0,0 +1,85 @@
+const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
+const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
+const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
+const layerRe = /import\s?\{\s?layer\s?\}\s?from\s?[\"|\']\@layui\/layer-vue[\"|\']/;
+
+// danger: 以下字符串拼接代码不可改动缩进或换行,否则会影响 URI hash 解码后代码的排版
+const MAIN_FILE_NAME = 'App.vue';
+// 用于全局引入 layui
+const SETUP_CODE = `import { setupLayuiVue } from './layui-vue.js'
+setupLayuiVue()`;
+
+/**
+ * √方案一:转换为setup语法糖 
+ * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
+ * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
+ * @param source 
+ * @returns 
+ */
+export const usePlayGround = (source: string) => {
+  const decodeCode = source;
+  const result = decodeCode.match(scriptRe)
+  
+  // 替换 script 标签
+  // $1 正则第一个括号匹配的内容
+  let code: string
+  if (result) {
+    code = decodeCode.replace(
+      scriptRe,
+      `<script lang="ts" setup>
+${SETUP_CODE}
+$1
+</script>`
+    )
+  } else {
+    code = `${decodeCode}
+<script lang="ts" setup>
+${SETUP_CODE}
+</script>
+`
+  }
+
+  // 去除 export default,保留其中的内容
+  const exportDefaultResult = code.match(exportDefaultRe)
+  if(exportDefaultResult){
+    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
+     // console.log("export",code);
+  }
+  // 去除 setup 函数,保留其中的内容
+  const setupResult = code.match(setupRe)
+  if(setupResult){
+    code = code.replace(setupRe,trimBr(setupResult[1]))
+     // console.log("setup",code);
+  }
+  // TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
+  // 替换 layer 引入语句  
+  if(code.match(layerRe)){
+    code = code.replace(layerRe,`import { layer } from "@layui/layui-vue"`)
+     // console.log("layer",code);
+  }
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+  }
+
+  const encoded = utoa(JSON.stringify(originCode))
+  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  return {
+    encoded,
+    link,
+  }
+}
+
+//编码
+function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)));
+}
+
+// 去除字符串两端的空白行
+function trimBr(str: string): string{
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
+}
+
+// 去除字符串两端的空格 
+function trim(str: string): string { 
+return str.replace(/(^\s*)|(\s*$)/g, ""); 
+} 

example/src/router/zh-CN.ts

@@ -76,6 +76,12 @@ const zhCN = [
         component: Component,
         meta: { title: "组件" },
         children: [
+          {
+            path: "/zh-CN/components/splitPanel",
+            component: () =>
+              import("../../docs/zh-CN/components/splitPanel.md"),
+            meta: { title: "分割面板" },
+          },
           {
             path: "/zh-CN/components/skeleton",
             component: () => import("../../docs/zh-CN/components/skeleton.md"),
@@ -315,6 +321,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/msg.md"),
             meta: { title: "信息" },
           },
+          {
+            path: "/zh-CN/components/drawer",
+            component: () => import("../../docs/zh-CN/components/drawer.md"),
+            meta: { title: "抽屉" },
+          },
           {
             path: "/zh-CN/components/backtop",
             component: () => import("../../docs/zh-CN/components/backtop.md"),
@@ -325,6 +336,15 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/components/countup.md"),
             meta: { title: "数字滚动" },
           },
+          {
+            path: "/zh-CN/components/exception",
+            component: () => import("../../docs/zh-CN/components/exception.md"),
+            meta: { title: "异常" },
+          },          {
+            path: "/zh-CN/components/result",
+            component: () => import("../../docs/zh-CN/components/result.md"),
+            meta: { title: "结果" },
+          },
         ],
       },
       {

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.6</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -34,7 +34,7 @@
               >更新日志</router-link
             ></span
           >
-          <span>下载量：<em class="site-showdowns">3124</em></span>
+          <span>下载量：<em class="site-showdowns">4680</em></span>
         </div>
       </div>
       <div class="site-banner-other">
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">544</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">612</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"

example/src/view/utils/menus.ts

@@ -303,6 +303,18 @@ const menus = [
         subTitle: "splitPanel",
         path: "/zh-CN/components/splitPanel",
       },
+      {
+        id: 100,
+        title: "异常",
+        subTitle: "exception",
+        path: "/zh-CN/components/exception",
+      },      
+      {
+        id: 100,
+        title: "结果",
+        subTitle: "result",
+        path: "/zh-CN/components/result",
+      },
     ],
   },
   {
@@ -333,6 +345,12 @@ const menus = [
         subTitle: "msg",
         path: "/zh-CN/components/msg",
       },
+      {
+        id: 94,
+        title: "抽屉",
+        subTitle: "drawer",
+        path: "/zh-CN/components/drawer",
+      },
     ],
   },
 ];

example/vite.config.ts

@@ -5,8 +5,8 @@ import plugins from './src/plugin/common-plugins'
 export default defineConfig({
   resolve: {
     alias: {
-      '/@src': path.resolve(__dirname, '../src'),
+      '/@src': path.resolve(__dirname, './src'),
     },
   },
   plugins,
-})
+})

package.json

@@ -1,12 +1,11 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.4",
-  "author": "sleeprite",
+  "version": "0.3.7-alpha.1",
+  "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "http://layui-vue.pearadmin.com",
-  "module": "lib/layui-vue.es.js",
-  "main": "lib/layui-vue.umd.js",
+  "main": "es/index.js",
   "types": "types/index.d.ts",
   "style": "lib/index.css",
   "keywords": [
@@ -16,29 +15,29 @@
   ],
   "exports": {
     ".": {
-      "import": "./lib/layui-vue.es.js",
-      "require": "./lib/layui-vue.umd.js"
+      "import": "./es/index.js"
     },
-    "./lib/": "./lib/"
+    "./lib/": "./lib/",
+    "./es/": "./es/"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build --emptyOutDir && npm run build:types",
+    "serve": "vite example",
+    "build": "npm run build:all && npm run build:es && npm run build:types && npm run build:example",
+    "build:es": "vite build --emptyOutDir --config ./build.es.ts",
+    "build:all": "vite build --emptyOutDir --config ./build.all.ts",
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
-    "lint:prettier": "prettier --write  'src/**/*'",
-    "commit": "git cz",
-    "prepublishOnly": "npm run build"
+    "lint:prettier": "prettier --write  'src/**/*'"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
-    "@layui/icons-vue": "^1.0.2",
-    "@layui/layer-vue": "^1.2.4",
+    "@layui/icons-vue": "^1.0.3",
+    "@layui/layer-vue": "^1.3.3",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",
-    "vue": "^3.2.26",
+    "vue": "^3.2.29",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
@@ -52,8 +51,8 @@
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
     "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.26",
-    "@vue/server-renderer": "^3.2.26",
+    "@vue/compiler-sfc": "^3.2.29",
+    "@vue/server-renderer": "^3.2.29",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "3.3.0",
     "escape-html": "^1.0.3",
@@ -66,13 +65,14 @@
     "prettier": "^2.5.1",
     "prismjs": "^1.25.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.61.0",
-    "typescript": "^4.5.2",
-    "vite": "2.7.10",
+    "rollup": "^2.66.1",
+    "typescript": "^4.5.5",
+    "vite": "2.7.13",
     "vite-plugin-md": "^0.11.6"
   },
   "files": [
     "lib",
+    "es",
     "types"
   ],
   "browserslist": [

src/component/avatar/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/avatar/index.vue

@@ -10,8 +10,8 @@ import "./index.less";
 
 const props = defineProps<{
   src?: String;
-  radius?: boolean;
   size?: string;
+  radius?: boolean;
 }>();
 </script>
 
@@ -24,4 +24,4 @@ const props = defineProps<{
       size ? 'layui-avatar-' + size : '',
     ]"
   />
-</template>
+</template>

src/component/avatarList/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/avatarList/index.vue

@@ -12,4 +12,4 @@ import { defineProps } from "vue";
   <div class="layui-avatar-list">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/backTop/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/backTop/index.vue

@@ -1,24 +1,3 @@
-<template>
-  <div
-    v-show="visible"
-    ref="backtopRef"
-    class="layui-backtop"
-    :class="classBacktop"
-    :style="{ ...styleBacktop }"
-    @click.stop="handleClick"
-    @mousedown="handlerMousedown"
-    @mouseup="handlerMouseup"
-  >
-    <slot>
-      <lay-icon
-        :type="props.icon"
-        :size="`${props.iconSize}px`"
-        :color="props.iconColor"
-      />
-    </slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayBacktop",
@@ -215,3 +194,24 @@ onMounted(() => {
   scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
 });
 </script>
+
+<template>
+  <div
+    v-show="visible"
+    ref="backtopRef"
+    class="layui-backtop"
+    :class="classBacktop"
+    :style="{ ...styleBacktop }"
+    @click.stop="handleClick"
+    @mousedown="handlerMousedown"
+    @mouseup="handlerMouseup"
+  >
+    <slot>
+      <lay-icon
+        :type="props.icon"
+        :size="`${props.iconSize}px`"
+        :color="props.iconColor"
+      />
+    </slot>
+  </div>
+</template>

src/component/badge/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/badge/index.vue

@@ -13,6 +13,7 @@ export interface LayBadgeProps {
   theme?: string;
   color?: string;
 }
+
 const props = defineProps<LayBadgeProps>();
 
 const classes = computed(() => {

src/component/block/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/body/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/body/index.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 
-<script setup name="LayBody" lang="ts">
+<script setup lang="ts">
 import "./index.less";
 </script>
 

src/component/breadcrumb/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/breadcrumb/index.vue

@@ -1,10 +1,10 @@
-<template>
-  <span class="layui-breadcrumb" style="visibility: visible">
-    <slot></slot>
-  </span>
-</template>
+<script lang="ts">
+export default {
+  name: "LayBreadcrumb",
+};
+</script>
 
-<script setup name="LayBreadcrumb" lang="ts">
+<script setup lang="ts">
 import { defineProps, provide, withDefaults } from "vue";
 
 const props = withDefaults(
@@ -18,3 +18,9 @@ const props = withDefaults(
 
 provide("separator", props.separator);
 </script>
+
+<template>
+  <span class="layui-breadcrumb" style="visibility: visible">
+    <slot></slot>
+  </span>
+</template>

src/component/breadcrumbItem/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/breadcrumbItem/index.vue

@@ -10,7 +10,13 @@
   <span lay-separator>{{ separator }}</span>
 </template>
 
-<script setup name="LayBreadcrumbItem" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayBreadcrumbItem"
+}
+</script>
+
+<script setup lang="ts">
 import { defineProps, inject, useSlots } from "vue";
 
 const slot = useSlots();

src/component/button/index.less

@@ -1,14 +1,16 @@
+@import "../../theme/variable.less";
+
 .layui-btn {
   height: 38px;
   line-height: 36px;
-  border: 1px solid transparent;
   padding: 0 18px;
-  background-color: #009688;
   color: #fff;
-  white-space: nowrap;
-  text-align: center;
   font-size: 14px;
-  border-radius: 2px;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  background-color: @button-primary-color;
+  border-radius: @button-border-radius;
   cursor: pointer;
 }
 
@@ -44,34 +46,19 @@
 }
 
 .layui-btn-primary:hover {
-  border-color: #009688;
   color: #333;
 }
 
 .layui-btn-normal {
-  background-color: #1e9fff;
+  background-color: @global-normal-color;
 }
 
 .layui-btn-warm {
-  background-color: #ffb800;
+  background-color: @global-warm-color;
 }
 
 .layui-btn-danger {
-  background-color: #ff5722;
-}
-
-.layui-btn-checked {
-  background-color: #5fb878;
-}
-
-.layui-btn-disabled,
-.layui-btn-disabled:active,
-.layui-btn-disabled:hover {
-  border-color: #eee !important;
-  background-color: #fbfbfb !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  opacity: 1;
+  background-color: @global-danger-color;
 }
 
 .layui-btn-lg {
@@ -93,12 +80,21 @@
   line-height: 22px;
   padding: 0 5px;
   font-size: 12px;
-}
-
-.layui-btn-xs i {
-  font-size: 12px !important;
+  i {
+    font-size: 12px !important;
+  }
 }
 
 .layui-btn-fluid {
   width: 100%;
 }
+
+.layui-btn-disabled,
+.layui-btn-disabled:active,
+.layui-btn-disabled:hover {
+  border-color: #eee !important;
+  background-color: #fbfbfb !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  opacity: 1;
+}

src/component/button/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/button/index.vue

@@ -17,6 +17,7 @@ export interface LayButtonProps {
   disabled?: boolean | string;
   loading?: boolean | string;
   nativeType?: "button" | "submit" | "reset";
+  icon?: string;
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
   loading: false,
   disabled: false,
   nativeType: "button",
+  icon: "",
 });
 
 const emit = defineEmits(["click"]);
@@ -58,6 +60,7 @@ const classes = computed(() => {
     :type="nativeType"
     @click="onClick"
   >
+    <i v-if="icon" :class="'layui-icon ' + icon"></i>
     <i
       v-if="loading"
       class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"

src/component/buttonContainer/index.less

@@ -0,0 +1,10 @@
+.layui-btn-container {
+  font-size: 0;
+  .layui-btn {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  .layui-btn + .layui-btn {
+    margin-left: 0;
+  }
+}

src/component/buttonContainer/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/buttonContainer/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="layui-btn-container">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayButtonContainer",
@@ -13,3 +7,9 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 </script>
+
+<template>
+  <div class="layui-btn-container">
+    <slot></slot>
+  </div>
+</template>

src/component/buttonGroup/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/card/index.less

@@ -0,0 +1,24 @@
+@import "../../theme/variable.less";
+
+.layui-card {
+  margin-bottom: 15px;
+  border-radius: @card-border-radius;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  .layui-card-header {
+    height: 42px;
+    line-height: 42px;
+    padding: 0 15px;
+    border-bottom: 1px solid #f6f6f6;
+    color: #333;
+    font-size: 14px;
+  }
+  .layui-card-body {
+    padding: 10px 15px;
+    line-height: 24px;
+  }
+}
+
+.layui-card:last-child {
+  margin-bottom: 0;
+}

src/component/card/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/card/index.vue

@@ -1,17 +1,10 @@
-<template>
-  <div class="layui-card">
-    <div class="layui-card-header" v-if="slot.header || title">
-      <slot name="header" v-if="slot.header"></slot>
-      <span v-else>{{ title }}</span>
-    </div>
-    <div class="layui-card-body">
-      <slot name="body" v-if="slot.body"></slot>
-      <slot v-else></slot>
-    </div>
-  </div>
-</template>
+<script lang="ts">
+export default {
+  name: "LayCard"
+}
+</script>
 
-<script setup name="LayCard" lang="ts">
+<script setup lang="ts">
 import { useSlots } from "vue";
 import "./index.less";
 
@@ -23,3 +16,16 @@ export interface LayCardProps {
 
 const props = defineProps<LayCardProps>();
 </script>
+
+<template>
+  <div class="layui-card">
+    <div class="layui-card-header" v-if="slot.header || title">
+      <slot name="header" v-if="slot.header"></slot>
+      <span v-else>{{ title }}</span>
+    </div>
+    <div class="layui-card-body">
+      <slot name="body" v-if="slot.body"></slot>
+      <slot v-else></slot>
+    </div>
+  </div>
+</template>

src/component/carousel/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/carousel/index.vue

@@ -1,40 +1,10 @@
-<template>
-  <div
-    class="layui-carousel"
-    :lay-anim="anim"
-    :lay-indicator="indicator"
-    :lay-arrow="arrow"
-    :style="{ width: width, height: height }"
-  >
-    <div carousel-item>
-      <slot></slot>
-    </div>
-    <div class="layui-carousel-ind">
-      <ul>
-        <li
-          v-for="ss in slots"
-          :key="ss"
-          :class="[ss.props.id === active ? 'layui-this' : '']"
-          @click.stop="change(ss.props.id)"
-        ></li>
-      </ul>
-    </div>
-    <button
-      class="layui-icon layui-carousel-arrow"
-      lay-type="sub"
-      @click="prev"
-    >
-      {{ anim === "updown" ? "" : "" }}</button
-    ><button
-      class="layui-icon layui-carousel-arrow"
-      lay-type="add"
-      @click="next"
-    >
-      {{ anim === "updown" ? "" : "" }}
-    </button>
-  </div>
-</template>
-<script setup name="LayCarousel" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayCarousel"
+}
+</script>
+
+<script setup lang="ts">
 import {
   withDefaults,
   defineProps,
@@ -107,3 +77,40 @@ const next = function () {
   }
 };
 </script>
+
+<template>
+  <div
+    class="layui-carousel"
+    :lay-anim="anim"
+    :lay-indicator="indicator"
+    :lay-arrow="arrow"
+    :style="{ width: width, height: height }"
+  >
+    <div carousel-item>
+      <slot></slot>
+    </div>
+    <div class="layui-carousel-ind">
+      <ul>
+        <li
+          v-for="ss in slots"
+          :key="ss"
+          :class="[ss.props.id === active ? 'layui-this' : '']"
+          @click.stop="change(ss.props.id)"
+        ></li>
+      </ul>
+    </div>
+    <button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="sub"
+      @click="prev"
+    >
+      {{ anim === "updown" ? "" : "" }}</button
+    ><button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="add"
+      @click="next"
+    >
+      {{ anim === "updown" ? "" : "" }}
+    </button>
+  </div>
+</template>

src/component/carouselItem/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/carouselItem/index.vue

@@ -1,9 +1,10 @@
-<template>
-  <li :class="[active === id ? 'layui-this' : '']">
-    <slot></slot>
-  </li>
-</template>
-<script setup name="LayCarouselItem" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayCarouselItem"
+}
+</script>
+
+<script setup lang="ts">
 import { defineProps, inject } from "vue";
 
 const props = defineProps<{
@@ -12,3 +13,9 @@ const props = defineProps<{
 
 const active = inject("active");
 </script>
+
+<template>
+  <li :class="[active === id ? 'layui-this' : '']">
+    <slot></slot>
+  </li>
+</template>

src/component/checkbox/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/checkboxGroup/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/checkboxGroup/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="layui-checkbox-group">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayCheckboxGroup",
@@ -12,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, defineProps, provide, ref, watch } from "vue";
-import { Recordable } from "../type";
+import { Recordable } from "../../types";
 
 export interface LayCheckboxGroupProps {
   modelValue?: Recordable[];
@@ -42,3 +36,9 @@ watch(
   (val) => (modelValue.value = val)
 );
 </script>
+
+<template>
+  <div class="layui-checkbox-group">
+    <slot></slot>
+  </div>
+</template>

src/component/col/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/collapse/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/collapse/index.vue

@@ -1,10 +1,9 @@
-<template>
-  <div class="layui-collapse">
-    <slot></slot>
-  </div>
-</template>
+<script lang="ts">
+export default {
+  name:"LayCollapse"
+}
+</script>
 
-<script setup name="LayCollapse"></script>
 <script setup lang="ts">
 import {
   withDefaults,
@@ -43,3 +42,9 @@ provide("layCollapse", {
   emit,
 });
 </script>
+
+<template>
+  <div class="layui-collapse">
+    <slot></slot>
+  </div>
+</template>

src/component/collapseItem/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/collapseItem/index.vue

@@ -1,21 +1,10 @@
-<template>
-  <div class="layui-colla-item">
-    <h2
-      :class="['layui-colla-title', { 'layui-disabled': disabled }]"
-      @click="showHandle"
-    >
-      <slot name="title" :props="props">{{ title }}</slot>
-      <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
-    </h2>
-    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
-      <p>
-        <slot :props="props"></slot>
-      </p>
-    </div>
-  </div>
-</template>
+<script lang="ts">
+export default {
+  name:"LayCollapseItem"
+}
+</script>
 
-<script setup name="LayCollapseItem" lang="ts">
+<script setup lang="ts">
 import { withDefaults, defineProps, inject, computed, ref } from "vue";
 
 const props = withDefaults(
@@ -58,3 +47,20 @@ const showHandle = function () {
   emit("change", props.id, !_isShow, activeValues.value);
 };
 </script>
+
+<template>
+  <div class="layui-colla-item">
+    <h2
+      :class="['layui-colla-title', { 'layui-disabled': disabled }]"
+      @click="showHandle"
+    >
+      <slot name="title" :props="props">{{ title }}</slot>
+      <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
+    </h2>
+    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
+      <p>
+        <slot :props="props"></slot>
+      </p>
+    </div>
+  </div>
+</template>