style(prettier): reset code style with prettier

.eslintrc.js

@@ -1,26 +1,66 @@
+// module.exports = {
+//   env: {
+//     browser: true,
+//     node: true,
+//   },
+//   parser: 'vue-eslint-parser',
+//   parserOptions: {
+//     parser: '@typescript-eslint/parser',
+//     sourceType: 'module',
+//     ecmaVersion: 10,
+//   },
+//   plugins: ['@typescript-eslint', 'prettier'],
+//   extends: [
+//     'eslint:recommended',
+//     'plugin:vue/vue3-recommended',
+//     'plugin:@typescript-eslint/recommended',
+//   ],
+//   rules: {
+//     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+//     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+//     quotes: ['error', 'single'],
+//     semi: ['error', 'never'],
+//     'no-unused-vars': 'off',
+//     '@typescript-eslint/no-unused-vars': 'off',
+//   },
+// }
+
 module.exports = {
+  root: true,
   env: {
     browser: true,
+    es2021: true,
     node: true,
   },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
   parser: 'vue-eslint-parser',
+  plugins: ['@typescript-eslint', 'prettier'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+  ],
   parserOptions: {
     parser: '@typescript-eslint/parser',
     sourceType: 'module',
     ecmaVersion: 10,
   },
-  plugins: ['@typescript-eslint', 'prettier'],
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
   rules: {
+    'vue/valid-template-root': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'vue/one-component-per-file': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    quotes: ['error', 'single'],
-    semi: ['error', 'never'],
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
   },
 }

.husky/commit-msg

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 pnpx pretty-quick --staged
-pnpx lint-staged
+#pnpx lint-staged

.postcssrc.json

@@ -6,4 +6,4 @@
     },
     "autoprefixer": {}
   }
-}
+}

CHANGELOG.md

@@ -1 +1 @@
-### 更新日志
+### 更新日志

README.md

@@ -1,4 +1,3 @@
-
 <p align="center">
   <a href="http://www.layui.com">
     <img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
@@ -26,7 +25,6 @@
 
 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
 
-
 ## 快速上手 : Beta
 
 获得 layui-vue 你只需要使用 npm 引入下述文件：
@@ -43,31 +41,28 @@ import Layui from '@layui/layui-vue'
 import '@layui/layui-vue/lib/layui.css'
 import App from './App.vue'
 
-createApp(App)
+createApp(App).use(Layui).mount('#app')
-.use(Layui)
-.mount('#app')
-
 ```
 
 这是一个基本的入门页面：
 
 ```html
 <template>
-   <lay-layout>
+  <lay-layout>
-      <lay-header>
+    <lay-header>
-         <lay-logo>Layui Admin</lay-logo>
+      <lay-logo>Layui Admin</lay-logo>
-      </lay-header>
+    </lay-header>
-      <lay-side></lay-side>
+    <lay-side></lay-side>
-      <lay-body>
+    <lay-body>
-         <router-view></router-view>
+      <router-view></router-view>
-      </lay-body>
+    </lay-body>
-      <lay-footer>pearadmin.com</lay-footer>
+    <lay-footer>pearadmin.com</lay-footer>
-   </lay-layout>
+  </lay-layout>
 </template>
-
 ```
 
 ## [阅读文档](http://layui-vue.pearadmin.com/)
+
 从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！
 
 ## 使用趋势
@@ -75,14 +70,16 @@ createApp(App)
 [![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/5ZQ67WWS.png)](https://giteye.net/chart/5ZQ67WWS)
 
 ## 贡献者
-> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？   
+
+> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？  
 > 好的，姑且就这样认为吧。
- 
+
 [![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
 
 ## 交流群
 
-![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png "QQ图片20211008090242.png")
+![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png 'QQ图片20211008090242.png')
 
 ## 相关
-[官网](http://layui-vue.pearadmin.com/)、[更新日志](http://layui-vue.pearadmin.com/zh-CN/guide/changelog)、[交流群](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)
+
+[官网](http://layui-vue.pearadmin.com/)、[更新日志](http://layui-vue.pearadmin.com/zh-CN/guide/changelog)、[交流群](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)

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

@@ -65,19 +65,20 @@ export default {
   }
 }
 </script>
+
 :::
 
-|  |  |  |
+|                                   |              |                                                |
-|--|--|--|
+| --------------------------------- | ------------ | ---------------------------------------------- |
-| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
+| layui-anim-down                   | 顶部往下滑入 | `layui-anim layui-anim-down`                   |
-| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
+| layui-anim-downbit                | 微微往下滑入 | `layui-anim layui-anim-downbit`                |
-| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
+| layui-anim-up                     | 底部往上滑入 | `layui-anim layui-anim-up`                     |
-| layui-anim-upbit | 微微往上滑入 |  `layui-anim ayui-anim-upbit` |
+| layui-anim-upbit                  | 微微往上滑入 | `layui-anim ayui-anim-upbit`                   |
-| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
+| layui-anim-scale                  | 平滑放大     | `layui-anim layui-anim-scale`                  |
-| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
+| layui-anim-scaleSpring            | 弹簧式放大   | `layui-anim layui-anim-scaleSpring`            |
-| layui-anim-scalesmall | 平滑放小 |`layui-anim layui-anim-scalesmall`|
+| layui-anim-scalesmall             | 平滑放小     | `layui-anim layui-anim-scalesmall`             |
-| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring`|
+| layui-anim-scalesmall-spring      | 弹簧式放小   | `layui-anim layui-anim-scalesmall-spring`      |
-| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein`|
+| layui-anim-fadein                 | 渐现         | `layui-anim layui-anim-fadein`                 |
-| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout`|
+| layui-anim-fadeout                | 渐隐         | `layui-anim layui-anim-fadeout`                |
-| layui-anim-rotate | 360度旋转 | `layui-anim layui-anim-rotate`|
+| layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
-| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop`|
+| layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |

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

@@ -68,10 +68,11 @@ export default {
   }
 }
 </script>
+
 :::
 
-|  |  |  |
+|        |      |                |
-|--|--|--|
+| ------ | ---- | -------------- |
-| src | 图源 | -- |
+| src    | 图源 | --             |
-| size | 尺寸 | `xs` `sm` `lg`|
+| size   | 尺寸 | `xs` `sm` `lg` |
-| radius | 圆形 | `true` `false`|
+| radius | 圆形 | `true` `false` |

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

@@ -33,7 +33,7 @@ export default {
 
 :::
 
-|  |  |  |
+|       |      |                                               |
-|--|--|--|
+| ----- | ---- | --------------------------------------------- |
-| type | 类型 | `dot` `rim` |
+| type  | 类型 | `dot` `rim`                                   |
-| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
+| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

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

@@ -46,6 +46,6 @@ export default {
 
 :::
 
-|  |  |  |
+|           |        |     |
-|--|--|--|
+| --------- | ------ | --- |
-| separator | 分割符 | `/` |
+| separator | 分割符 | `/` |

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

@@ -48,7 +48,6 @@ export default {
 
 :::
 
-
 ::: demo 传入 columns 数据，自动生成表格
 
 <template>
@@ -74,7 +73,6 @@ export default {
 
 :::
 
-
 ::: demo 传入 columns 数据，自动生成表格
 
 <template>
@@ -177,7 +175,6 @@ export default {
 
 :::
 
-
 ::: demo 传入 columns 数据，自动生成表格
 
 <template>
@@ -202,10 +199,10 @@ export default {
 
 :::
 
-|  |  |  |
+|        |        |                                               |
-|--|--|--|
+| ------ | ------ | --------------------------------------------- |
-| type | 主题 | `primary` `normal` `warm` `danger` `disabled`|
+| type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |
-| size | 尺寸 | `lg` `sm` `xs` |
+| size   | 尺寸   | `lg` `sm` `xs`                                |
-| fluid | 最大化 | `true` `false` |
+| fluid  | 最大化 | `true` `false`                                |
-| radius | 圆角 | `true` `false` |
+| radius | 圆角   | `true` `false`                                |
-| border | 边框 | `green` `blue`  `orange` `red` `black` |
+| border | 边框   | `green` `blue` `orange` `red` `black`         |

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

@@ -49,7 +49,7 @@ export default {
 
 :::
 
-|  |  |  |
+|        |      |        |
-|--|--|--|
+| ------ | ---- | ------ |
 | header | 插槽 | `内容` |
-| body | 插槽 | `内容` |
+| body   | 插槽 | `内容` |

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

@@ -20,4 +20,4 @@ export default {
 }
 </script>
 
-:::
+:::

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

@@ -40,6 +40,7 @@ export default {
   }
 }
 </script>
+
 :::
 
 ::: demo
@@ -84,6 +85,7 @@ export default {
   }
 }
 </script>
+
 :::
 
 ::: demo
@@ -130,4 +132,5 @@ export default {
   }
 }
 </script>
-:::
+
+:::

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

@@ -59,6 +59,6 @@ export default {
 
 :::
 
-|  |  |  |
+|       |        |                |
-|--|--|--|
+| ----- | ------ | -------------- |
-| fluid | 流模式 | `true` `false` |
+| fluid | 流模式 | `true` `false` |

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

@@ -61,7 +61,6 @@ export default {
 
 :::
 
-
+|         |          |                 |
-|  |  |  |
+| ------- | -------- | --------------- |
-|--|--|--|
+| trigger | 触发方式 | `click` `hover` |
-| trigger | 触发方式 | `click` `hover` |

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

@@ -38,6 +38,6 @@ export default {
 
 :::
 
-|  |  |  |
+|             |          |     |
-|--|--|--|
+| ----------- | -------- | --- |
-| description | 描述信息 | -- |
+| description | 描述信息 | --  |

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

@@ -38,6 +38,6 @@ export default {
 
 :::
 
-|  |  |  |
+|       |      |     |
-|--|--|--|
+| ----- | ---- | --- |
-| title | 标题 | -- |
+| title | 标题 | --  |

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

@@ -220,4 +220,4 @@ export default {
 }
 </script>
 
-:::
+:::

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

@@ -71,6 +71,7 @@ export default {
     color: #fff;
 }
 </style>
+
 :::
 
 ::: demo
@@ -123,13 +124,13 @@ export default {
 
 :::
 
-|  |  |  |  |
+|          |      |                         |     |
-|--|--|--|--|
+| -------- | ---- | ----------------------- | --- |
-| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
+| xs       | 尺寸 | 超小屏幕 (手机<768px)   | 12  |
-| sm | 尺寸 | 小屏幕 (平板≥768px) | 12 |
+| sm       | 尺寸 | 小屏幕 (平板 ≥768px)    | 12  |
-| md | 尺寸 | 中等屏幕 (桌面≥992px) | 12 |
+| md       | 尺寸 | 中等屏幕 (桌面 ≥992px)  | 12  |
-| lg | 尺寸 | 大型屏幕 (桌面≥1200px) | 12 |
+| lg       | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12  |
-| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
+| xsOffset | 偏移 | 超小屏幕 (手机<768px)   | 12  |
-| smOffset | 偏移 | 小屏幕 (平板≥768px) | 12 |
+| smOffset | 偏移 | 小屏幕 (平板 ≥768px)    | 12  |
-| mdOffset | 偏移 | 中等屏幕 (桌面≥992px) | 12 |
+| mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px)  | 12  |
-| lgOffset | 偏移 | 大型屏幕 (桌面≥1200px) | 12 |
+| lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12  |

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

@@ -1047,6 +1047,6 @@ export default {
 
 :::
 
-|  |  |  |
+|      |      |                   |
-|--|--|--|
+| ---- | ---- | ----------------- |
 | type | 图标 | `layui-icon-home` |

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

@@ -86,8 +86,8 @@ export default {
 
 :::
 
-|  |  |  |
+|            |          |     |
-|--|--|--|
+| ---------- | -------- | --- |
-| v-model | 默认值 | -- |
+| v-model    | 默认值   | --  |
-| page | 开启分页 | -- |
+| page       | 开启分页 | --  |
-| showSearch | 启用搜索 | -- |
+| showSearch | 启用搜索 | --  |

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

@@ -8,22 +8,22 @@ layui 之所以赢得如此多人的青睐，更多是在于它「前后界面
 
 ```html
 <lay-layout>
-   <lay-header>
+  <lay-header>
-     <lay-logo>Layui Admin</lay-logo>
+    <lay-logo>Layui Admin</lay-logo>
-   </lay-header>
+  </lay-header>
-   <lay-side></lay-side>
+  <lay-side></lay-side>
-   <lay-body>
+  <lay-body>
-     <router-view></router-view>
+    <router-view></router-view>
-   </lay-body>
+  </lay-body>
-   <lay-footer>pearadmin.com</lay-footer>
+  <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
 
-|  |  |  |
+|            |      |     |
-|--|--|--|
+| ---------- | ---- | --- |
-| lay-layout | 容器 | -- |
+| lay-layout | 容器 | --  |
-| lay-header | 顶部 | -- |
+| lay-header | 顶部 | --  |
-| lay-logo | 图标  | -- |
+| lay-logo   | 图标 | --  |
-| lay-side | 侧边 | -- |
+| lay-side   | 侧边 | --  |
-| lay-body | 内容 | -- |
+| lay-body   | 内容 | --  |
-| lay-footer | 底部  | -- |
+| lay-footer | 底部 | --  |

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

@@ -31,6 +31,6 @@ export default {
 
 :::
 
-|  |  |  |
+|       |      |                                               |
-|--|--|--|
+| ----- | ---- | --------------------------------------------- |
-| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
+| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

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

@@ -56,7 +56,6 @@ export default {
 
 :::
 
-
+|             |          |     |
-|  |  |  |
+| ----------- | -------- | --- |
-|--|--|--|
+| selectedKey | 默认选择 | --  |
-| selectedKey | 默认选择 | -- |

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

@@ -107,13 +107,13 @@ export default {
 
 :::
 
-|  |  |  |
+|             |              |         |
-|--|--|--|
+| ----------- | ------------ | ------- |
-| limit | 每页数量 | -- |
+| limit       | 每页数量     | --      |
-| total | 总条数 | -- |
+| total       | 总条数       | --      |
-| jump | 切换回调 | -- |
+| jump        | 切换回调     | --      |
-| showCount | 显示总数 | `false` |
+| showCount   | 显示总数     | `false` |
-| showPage | 显示每页 | `false` |
+| showPage    | 显示每页     | `false` |
-| showLimit | 显示每页数量 | `false` |
+| showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
-| showSkip | 显示跳转 | `false` |
+| showSkip    | 显示跳转     | `false` |

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

@@ -16,4 +16,4 @@ export default {
 }
 </script>
 
-:::
+:::

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

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 export default {
   setup() {
@@ -20,7 +20,6 @@ export default {
 
 :::
 
-
 ::: demo
 
 <template>
@@ -68,12 +67,11 @@ export default {
 
 :::
 
-
+|          |          |                                               |
-|  |  |  |
+| -------- | -------- | --------------------------------------------- |
-|--|--|--|
+| percent  | 进度     | --                                            |
-| percent | 进度 | -- |
+| theme    | 主题     | `orange` `green` `cyan` `blue` `black` `gray` |
-| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
+| size     | 尺寸     | `big`                                         |
-| size | 尺寸 | `big` |
+| text     | 提示     | --                                            |
-| text | 提示 | -- |
+| color    | 颜色     | --                                            |
-| color| 颜色 | -- |
+| showText | 展示描述 | --                                            |
-| showText | 展示描述 | -- |

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 export default {
   setup() {
@@ -48,12 +48,12 @@ export default {
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 export default {
   setup() {
 
-    const all2 = ref(4)
+    const all2 = ref(4);
 
     return {
       all2
@@ -64,8 +64,7 @@ export default {
 
 :::
 
-
+|         |          |     |
-|  |  |  |
+| ------- | -------- | --- |
-|--|--|--|
+| v-model | 评分值   | --  |
-| v-model | 评分值 | -- |
+| length  | 评分长度 | --  |
-| length | 评分长度 | -- |

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

@@ -76,7 +76,7 @@ export default {
 
 :::
 
-|  |  |  |
+|         |          |                |
-|--|--|--|
+| ------- | -------- | -------------- |
-| v-model | 当前激活 | -- |
+| v-model | 当前激活 | --             |
-| type | 主题样式 | `card` `brief` |
+| type    | 主题样式 | `card` `brief` |

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

@@ -193,11 +193,11 @@ export default {
 
 :::
 
-|  |  |  |
+|                 |            |     |
-|--|--|--|
+| --------------- | ---------- | --- |
-| columns | 列配置 | -- |
+| columns         | 列配置     | --  |
-| dataSource | 数据源 | -- |
+| dataSource      | 数据源     | --  |
-| checkbox | 开启复现框 | -- |
+| checkbox        | 开启复现框 | --  |
-| id | 主键 | -- |
+| id              | 主键       | --  |
-| selectKeys | 选中项 | -- |
+| selectKeys      | 选中项     | --  |
-| default-toolbar | 开启工具栏 | -- |
+| default-toolbar | 开启工具栏 | --  |

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

@@ -19,4 +19,4 @@ export default {
 }
 </script>
 
-:::
+:::

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

@@ -39,4 +39,4 @@ export default {
 }
 </script>
 
-:::
+:::

docs/docs/zh-CN/guide/home.md

@@ -38,4 +38,4 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
       </div>
     </li>
   </ul>
-</div>
+</div>

docs/docs/zh-CN/guide/install.md

@@ -1,33 +1,35 @@
-<br> 
+<br>
 
 使用 npm 下载
+
 ```
 npm install @layui/layui-vue --save
 ```
 
 在 main.ts 中
+
 ```js
 import App from './App.vue'
 import { createApp } from 'vue'
 import Layui from '@layui/layui-vue'
 import '@layui/layui-vue/lib/layui.css'
 
-createApp(App)
+createApp(App).use(Layui).mount('#app')
-.use(Layui)
-.mount('#app')
 ```
 
 这是一个基本的入门页面：
+
 ```html
 <lay-layout>
-   <lay-header>
+  <lay-header>
-     <lay-logo>Layui Admin</lay-logo>
+    <lay-logo>Layui Admin</lay-logo>
-   </lay-header>
+  </lay-header>
-   <lay-side></lay-side>
+  <lay-side></lay-side>
-   <lay-body>
+  <lay-body>
-     <router-view></router-view>
+    <router-view></router-view>
-   </lay-body>
+  </lay-body>
-   <lay-footer>pearadmin.com</lay-footer>
+  <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
-完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
+
+完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)

docs/index.html

@@ -1,25 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="force-rendering" content="webkit" />
+    <meta name="applicable-device" content="pc,mobile" />
+    <meta name="author" content="Jmys <jmys1992@gmail.com>" />
+    <meta
+      name="keywords"
+      content="element-pro,pro-components,admin,element-plus,components,vue,ui"
+    />
+    <link rel="icon" href="/favicon.ico" />
+    <title>Layui - Vue 开源前端 UI 框架</title>
+    <!--preload-links-->
+  </head>
 
-<head>
+  <body>
-  <meta charset="UTF-8" />
+    <div id="app">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <!--app-html-->
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    </div>
-  <meta name="renderer" content="webkit" />
+    <script type="module" src="/src/entry-client.ts"></script>
-  <meta name="force-rendering" content="webkit" />
+  </body>
-  <meta name="applicable-device" content="pc,mobile" />
+</html>
-  <meta name="author" content="Jmys <jmys1992@gmail.com>" />
-  <meta name="keywords" content="element-pro,pro-components,admin,element-plus,components,vue,ui" />
-  <link rel="icon" href="/favicon.ico" />
-  <title>Layui - Vue 开源前端 UI 框架</title>
-  <!--preload-links-->
-</head>
-
-<body>
-  <div id="app">
-    <!--app-html-->
-  </div>
-  <script type="module" src="/src/entry-client.ts"></script>
-</body>
-
-</html>

docs/src/components/LayCode.vue

@@ -3,14 +3,8 @@
     <div class="source">
       <slot />
     </div>
-    <div
+    <div ref="meta" class="meta">
-      ref="meta"
+      <div v-if="$slots.description" class="description">
-      class="meta"
-    >
-      <div
-        v-if="$slots.description"
-        class="description"
-      >
         <slot name="description" />
       </div>
       <div class="language-html">
@@ -22,7 +16,11 @@
       class="control"
       @click="toggleShow"
     >
-      <i :class="[show ? 'layui-icon layui-icon-up' : 'layui-icon layui-icon-down']" />
+      <i
+        :class="[
+          show ? 'layui-icon layui-icon-up' : 'layui-icon layui-icon-down',
+        ]"
+      />
     </div>
   </div>
 </template>
@@ -34,10 +32,10 @@ const meta = ref<HTMLElement>({} as HTMLElement)
 const isFixContorl = ref(false)
 const codeAreaHeight = ref(0)
 
-const show = ref(false);
+const show = ref(false)
 
-const toggleShow = function() {
+const toggleShow = function () {
-  show.value = !show.value;
+  show.value = !show.value
 }
 
 onMounted(() => {

docs/src/components/LaySearch.vue

@@ -1,33 +1,33 @@
 <template>
-  <select :name="name" lay-verify="required"></select>
+  <select :name="name" lay-verify="required" />
   <div
     class="layui-unselect layui-form-select"
-    @click="open"
     :class="[openState ? 'layui-form-selected' : '']"
+    @click="open"
   >
     <div class="layui-select-title">
       <input
         type="text"
         placeholder="Search"
         class="layui-input layui-unselect"
-        @input="change"
         :value="name"
         style="
           background: rgba(255, 255, 255, 0.05);
           border: none;
           color: whitesmoke;
         "
-      /><i class="layui-edge"></i>
+        @input="change"
+      /><i class="layui-edge" />
     </div>
     <dl class="layui-anim layui-anim-upbit" style="">
       <dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
       <dd
-        v-else
         v-for="data in menus"
-        :value = "name"
+        v-else
-        @click="jump(data)"
         :key="data"
+        :value="name"
         class="layui-select-tips"
+        @click="jump(data)"
       >
         {{ data.title }}
       </dd>
@@ -38,11 +38,11 @@
 <script setup name="LaySelect" lang="ts">
 import { defineProps, Ref, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { Recordable } from '/@src/module/type'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  datas?: Recordable[]
-    datas?: object[]
+}>()
-  }>()
 
 const route = useRoute()
 const router = useRouter()
@@ -60,16 +60,16 @@ const jump = function (data: any) {
   router.push(data.path)
 }
 
-const change = function(e: any) {
+const change = function (e: any) {
   name.value = e.target.value
-  if(e.target.value === ""){
+  if (e.target.value === '') {
     menus.value = props.datas
-  }else{
+  } else {
-    menus.value = searchList(e.target.value, props.datas);
+    menus.value = searchList(e.target.value, props.datas)
   }
 }
 
-const searchList = function (str: String, container: any) {
+const searchList = function (str: string, container: any) {
   var newList = []
   var startChar = str.charAt(0)
   var strLen = str.length
@@ -100,4 +100,4 @@ const searchList = function (str: String, container: any) {
   }
   return newList
 }
-</script>
+</script>

docs/src/entry-server.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { createApp } from './main'
 import { renderToString } from '@vue/server-renderer'
 

docs/src/layouts/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="width:100%;height:300px">
     <lay-layout>
-      <lay-header style="background:#393D49">
+      <lay-header style="background: #393d49">
         <lay-logo>
           <img src="../assets/logo.png" />
         </lay-logo>
@@ -10,7 +10,7 @@
           style="margin-top: 10px; margin-bottom: 0px"
         >
           <lay-form>
-            <lay-search :datas="menus"></lay-search>
+            <lay-search :datas="menus" />
           </lay-form>
         </ul>
         <ul
@@ -38,8 +38,8 @@
           style="padding: 6px"
         >
           <li
-            :key="menu"
             v-for="menu in menus"
+            :key="menu"
             :class="[
               currentPath === menu.path ? 'layui-menu-item-checked2' : '',
             ]"
@@ -58,7 +58,7 @@
       </lay-side>
       <lay-body>
         <div style="padding: 20px">
-          <router-view></router-view>
+          <router-view />
         </div>
       </lay-body>
     </lay-layout>
@@ -254,7 +254,8 @@ export default {
         title: '图标选择',
         subTitle: 'iconPicker',
         path: '/zh-CN/components/iconPicker',
-      },{
+      },
+      {
         id: 29,
         title: '分页',
         subTitle: 'page',
@@ -304,19 +305,19 @@ export default {
   padding-left: 10px;
 }
 
-@media screen and (max-width:768px) {
+@media screen and (max-width: 768px) {
-	.layui-side {
+  .layui-side {
-    width: 0px!important;
+    width: 0px !important;
   }
   .layui-body {
-    left: 0px!important;
+    left: 0px !important;
-    width: 100%!important;
+    width: 100% !important;
   }
   .layui-logo {
-    display: none!important;
+    display: none !important;
   }
   .layui-layout-left {
-    left: 0px!important;
+    left: 0px !important;
   }
 }
 </style>

docs/src/router/index.ts

@@ -11,6 +11,6 @@ export function createRouter(): Router {
   const baseUrl = import.meta.env.BASE_URL
   return _createRouter({
     history: createWebHashHistory(baseUrl),
-    routes:  routes 
+    routes: routes,
   })
-}
+}

docs/src/router/zh-CN.ts

@@ -16,7 +16,8 @@ const zhCN = [
         path: '/zh-CN/guide/install',
         component: () => import('../../docs/zh-CN/guide/install.md'),
         meta: { title: '安装' },
-      }, {
+      },
+      {
         path: '/zh-CN/guide/changelog',
         component: () => import('../../docs/zh-CN/guide/changelog.md'),
         meta: { title: '更新' },
@@ -43,7 +44,8 @@ const zhCN = [
         path: '/zh-CN/components/container',
         component: () => import('../../docs/zh-CN/components/container.md'),
         meta: { title: '容器' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/breadcrumb',
         component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
         meta: { title: '面包屑' },
@@ -52,27 +54,33 @@ const zhCN = [
         path: '/zh-CN/components/button',
         component: () => import('../../docs/zh-CN/components/button.md'),
         meta: { title: '按钮' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/icon',
         component: () => import('../../docs/zh-CN/components/icon.md'),
         meta: { title: '图标' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/panel',
         component: () => import('../../docs/zh-CN/components/panel.md'),
         meta: { title: '面板' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/animation',
         component: () => import('../../docs/zh-CN/components/animation.md'),
         meta: { title: '动画' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/card',
         component: () => import('../../docs/zh-CN/components/cards.md'),
         meta: { title: '卡片' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/grid',
         component: () => import('../../docs/zh-CN/components/grid.md'),
         meta: { title: '栅格' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/form',
         component: () => import('../../docs/zh-CN/components/form.md'),
         meta: { title: '表单' },
@@ -136,22 +144,26 @@ const zhCN = [
         path: '/zh-CN/components/rate',
         component: () => import('../../docs/zh-CN/components/rate.md'),
         meta: { title: '评分' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/dropdown',
         component: () => import('../../docs/zh-CN/components/dropdown.md'),
         meta: { title: '下拉' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/tab',
         component: () => import('../../docs/zh-CN/components/tab.md'),
         meta: { title: '选项卡' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/iconPicker',
         component: () => import('../../docs/zh-CN/components/iconPicker.md'),
         meta: { title: '图标选择' },
-      }, {
+      },
+      {
         path: '/zh-CN/components/tree',
         component: () => import('../../docs/zh-CN/components/tree.md'),
-        meta: { title: '树形组件' }
+        meta: { title: '树形组件' },
       },
       {
         path: '/zh-CN/components/page',
@@ -162,7 +174,7 @@ const zhCN = [
         path: '/zh-CN/components/transfer',
         component: () => import('../../docs/zh-CN/components/transfer.md'),
         meta: { title: '穿梭框' },
-      }
+      },
     ],
   },
 ]

docs/src/styles/markdown.css

@@ -62,7 +62,6 @@ h1 {
   }
 }
 
-
 h3 {
   margin-top: 1.5rem;
 }
@@ -159,7 +158,8 @@ table td {
   font-size: 0;
 }
 
-.site-doc-icon li .doc-icon-name, .site-doc-icon li .doc-icon-code {
+.site-doc-icon li .doc-icon-name,
+.site-doc-icon li .doc-icon-code {
   color: #c2c2c2;
 }
 
@@ -184,8 +184,8 @@ table td {
   font-size: 14px;
   text-align: center;
   color: #666;
-  transition: all .3s;
+  transition: all 0.3s;
-  -webkit-transition: all .3s;
+  -webkit-transition: all 0.3s;
 }
 
 .site-doc-icon li .layui-icon {
@@ -199,7 +199,7 @@ table td {
 
 .site-doc-necolor li div {
   border-radius: 0;
-  color: #000!important;
+  color: #000 !important;
 }
 
 .site-doc-color li div {
@@ -268,8 +268,8 @@ table td {
   font-size: 14px;
   text-align: center;
   color: #666;
-  transition: all .3s;
+  transition: all 0.3s;
-  -webkit-transition: all .3s;
+  -webkit-transition: all 0.3s;
 }
 
 .anim .site-doc-icon li .layui-anim {
@@ -286,4 +286,4 @@ table td {
 
 .anim .site-doc-icon li .code {
   white-space: nowrap;
-}
+}

package.json

@@ -60,6 +60,7 @@
     "@vitejs/plugin-vue": "^1.9.3",
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/server-renderer": "^3.2.20",
     "@vue/test-utils": "^2.0.0-rc.15",
     "babel-jest": "^26.6.3",
@@ -88,8 +89,7 @@
     "types"
   ],
   "lint-staged": {
-    "*.{ts,vue,tsx,md}": "eslint --fix",
+    "*.{ts,vue,tsx}": "eslint --fix",
-    "*.{css,less,vue,md}": "stylelint --fix",
     "*": "prettier -w -u"
   },
   "husky": {

pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   '@vitejs/plugin-vue': ^1.9.3
   '@vue/compiler-sfc': ^3.2.20
   '@vue/eslint-config-prettier': ^6.0.0
+  '@vue/eslint-config-typescript': ^7.0.0
   '@vue/server-renderer': ^3.2.20
   '@vue/test-utils': ^2.0.0-rc.15
   babel-jest: ^26.6.3
@@ -59,6 +60,7 @@ devDependencies:
   '@vitejs/plugin-vue': 1.9.3_vite@2.5.10
   '@vue/compiler-sfc': 3.2.20
   '@vue/eslint-config-prettier': 6.0.0_b212975186fa54a111c0d83e5f3c21af
+  '@vue/eslint-config-typescript': 7.0.0_b1c40b501c70e0dc0050a49887752d81
   '@vue/server-renderer': 3.2.20_vue@3.2.20
   '@vue/test-utils': 2.0.0-rc.15_vue@3.2.20
   babel-jest: 26.6.3_@babel+core@7.15.8
@@ -2580,6 +2582,27 @@ packages:
       prettier: 2.4.1
     dev: true
 
+  /@vue/eslint-config-typescript/7.0.0_b1c40b501c70e0dc0050a49887752d81:
+    resolution:
+      {
+        integrity: sha512-UxUlvpSrFOoF8aQ+zX1leYiEBEm7CZmXYn/ZEM1zwSadUzpamx56RB4+Htdjisv1mX2tOjBegNUqH3kz2OL+Aw==,
+      }
+    engines: { node: ^10.12.0 || >=12.0.0 }
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^4.4.0
+      '@typescript-eslint/parser': ^4.4.0
+      eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
+      eslint-plugin-vue: ^5.2.3 || ^6.0.0 || ^7.0.0
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 4.33.0_d753869925cce96d3eb2141eeedafe57
+      '@typescript-eslint/parser': 4.33.0_eslint@7.32.0+typescript@4.4.3
+      eslint: 7.32.0
+      eslint-plugin-vue: 7.19.1_eslint@7.32.0
+      vue-eslint-parser: 7.11.0_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vue/reactivity/3.2.20:
     resolution:
       {

src/index.ts

@@ -29,7 +29,7 @@ import LayTimelineItem from './module/timelineItem/index'
 import LayTextarea from './module/textarea/index'
 import LaySwitch from './module/switch/index'
 import LayCollapse from './module/collapse/index'
-import LayCollapseItem  from './module/collapseItem/index'
+import LayCollapseItem from './module/collapseItem/index'
 import LayContainer from './module/container/index'
 import LayMenu from './module/menu/index'
 import LayMenuItem from './module/menuItem/index'
@@ -105,7 +105,7 @@ const components: Record<string, IDefineComponent> = {
   LayTree,
   LayTable,
   LayPage,
-  LayTransfer
+  LayTransfer,
 }
 
 const install = (app: App, options?: InstallOptions): void => {

src/module/avatar/index.vue

@@ -1,14 +1,20 @@
 <template>
-    <img :src="src" class="layui-avatar" :class="[radius ? 'layui-avatar-radius':'', size ? 'layui-avatar-' + size: '']"/>
+  <img
+    :src="src"
+    class="layui-avatar"
+    :class="[
+      radius ? 'layui-avatar-radius' : '',
+      size ? 'layui-avatar-' + size : '',
+    ]"
+  />
 </template>
 
 <script setup name="LayAvatar" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  src?: string
-    src?: string
+  radius?: boolean
-    radius?: boolean
+  size?: string
-    size?: string
+}>()
-  }>()
 </script>

src/module/badge/index.vue

@@ -1,18 +1,17 @@
 <template>
   <span :class="classList" :style="styleList">
-    <slot v-if="type != 'dot'"></slot>
+    <slot v-if="type != 'dot'" />
   </span>
 </template>
 
 <script setup name="LayBadge" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  type?: string
-    type?: string
+  theme?: string
-    theme?: string
+  color?: string
-    color?: string
+}>()
-  }>()
 
 const classList = [
   {
@@ -24,4 +23,4 @@ const classList = [
 ]
 
 const styleList = props.color ? 'background-color: ' + props.color : ''
-</script>
+</script>

src/module/block/index.vue

@@ -1,14 +1,13 @@
 <template>
-  <blockquote class="layui-elem-quote" :class="[nm?'layui-quote-nm':'']">
+  <blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
-      <slot></slot>
+    <slot />
   </blockquote>
 </template>
 
 <script setup name="LayBlock" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  nm?: boolean
-    nm?: boolean
+}>()
-  }>()
 </script>

src/module/body/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayBody', Component)
+  app.component(Component.name || 'LayBody', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/body/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-body">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayBody" lang="ts">
+<script setup name="LayBody" lang="ts"></script>
-
-</script>

src/module/breadcrumb/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayBreadcrumb', Component)
+  app.component(Component.name || 'LayBreadcrumb', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/breadcrumb/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <span class="layui-breadcrumb" style="visibility: visible;">
+  <span class="layui-breadcrumb" style="visibility: visible">
-      <slot></slot>
+    <slot />
   </span>
 </template>
 
@@ -15,10 +15,9 @@ const props = withDefaults(
     separator?: string
   }>(),
   {
-    separator: "/"
+    separator: '/',
   }
 )
 
-provide("separator",props.separator);
+provide('separator', props.separator)
-
 </script>

src/module/breadcrumbItem/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayBreadcrumbItem', Component)
+  app.component(Component.name || 'LayBreadcrumbItem', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/breadcrumbItem/index.vue

@@ -1,16 +1,14 @@
 <template>
-    <a href="javascript:void(0)">{{title}}</a>
+  <a href="javascript:void(0)">{{ title }}</a>
-    <span lay-separator="">{{separator}}</span>
+  <span lay-separator="">{{ separator }}</span>
 </template>
 
 <script setup name="LayBreadcrumbItem" lang="ts">
 import { defineProps, inject } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  title: string
-    title: string
+}>()
-  }>()
-
-const separator =  inject("separator");
 
+const separator = inject('separator')
 </script>

src/module/button/index.vue

@@ -9,19 +9,18 @@
       border ? 'layui-border-' + border : '',
     ]"
   >
-    <slot></slot>
+    <slot />
   </button>
 </template>
 
 <script setup name="LayButton" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  type?: string
-    type?: string
+  size?: string
-    size?: string
+  fluid?: boolean
-    fluid?: boolean
+  radius?: boolean
-    radius?: boolean
+  border?: string
-    border?: string 
+}>()
-  }>()
 </script>

src/module/buttonContainer/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-btn-container">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayButtonContainer" lang="ts">
+<script setup name="LayButtonContainer" lang="ts"></script>
-
-</script>

src/module/buttonGroup/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-btn-group">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayButtonGroup" lang="ts">
+<script setup name="LayButtonGroup" lang="ts"></script>
-
-</script>

src/module/card/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCard ', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/card/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="layui-card">
     <div class="layui-card-header">
-        <slot name="header"></slot>
+      <slot name="header" />
     </div>
     <div class="layui-card-body">
-      <slot name="body"></slot>
+      <slot name="body" />
     </div>
   </div>
 </template>
 
-<script setup name="LayCard" lang="ts">
+<script setup name="LayCard" lang="ts"></script>
-
-</script>

src/module/checkbox/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCheckbox', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/checkbox/index.vue

@@ -12,9 +12,9 @@
       ]"
       :lay-skin="skin"
     >
-      <span><slot></slot></span>
+      <span><slot /></span>
-      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
-      <i v-if="!skin" class="layui-icon layui-icon-ok"></i>
+      <i v-if="!skin" class="layui-icon layui-icon-ok" />
     </div>
   </span>
 </template>
@@ -22,14 +22,13 @@
 <script setup name="LayCheckbox" lang="ts">
 import { defineProps, ref, watch } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  modelValue: string[]
-    modelValue: string[]
+  label: string
-    label: string
+  disabled?: boolean
-    disabled?: boolean
+  name?: string
-    name?: string
+  skin?: string
-    skin?: string
+}>()
-  }>()
 
 const hasValue = ref(false)
 

src/module/col/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCol', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/col/index.vue

@@ -12,22 +12,21 @@
       lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
     ]"
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script setup name="LayCol" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  md?: string
-    md?: string
+  xs?: string
-    xs?: string
+  sm?: string
-    sm?: string
+  lg?: string
-    lg?: string
+  mdOffset?: string
-    mdOffset?: string
+  xsOffset?: string
-    xsOffset?: string
+  smOffset?: string
-    smOffset?: string
+  lgOffset?: string
-    lgOffset?: string
+}>()
-  }>()
+</script>
-</script>

src/module/collapse/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCollapse', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/collapse/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="layui-collapse">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayCollapse" lang="ts">
+<script setup name="LayCollapse" lang="ts"></script>
-</script>

src/module/collapseItem/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCollapseItem', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/collapseItem/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="layui-colla-item">
     <h2 class="layui-colla-title" @click="showHandle">
-      {{ title }}<i class="layui-icon layui-colla-icon">{{ isShow ? "":"" }}</i>
+      {{ title
+      }}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
     </h2>
-    <div class="layui-colla-content" :class="isShow ? 'layui-show':''">
+    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
       <p>
-        <slot></slot>
+        <slot />
       </p>
     </div>
   </div>
@@ -14,17 +15,14 @@
 <script setup name="LayCollapseItem" lang="ts">
 import { defineProps, Ref, ref } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  show?: boolean
-    show?: boolean
+  title?: string
-    title?: string
+}>()
-  }>()
 
 const isShow = ref(props.show) as Ref
 
-const showHandle = function() {
+const showHandle = function () {
   isShow.value = !isShow.value
 }
-
-
 </script>

src/module/container/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayContainer', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/container/index.vue

@@ -1,17 +1,15 @@
 <template>
   <div :class="classes">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script setup name="LayContainer" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  fluid?: boolean
-    fluid?: boolean
+}>()
-  }>()
 
 const classes = props.fluid ? 'layui-fluid' : 'layui-container'
-
 </script>

src/module/count/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayCount', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/count/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <span class="layui-count">
+  <span class="layui-count" />
-
-  </span>
 </template>
 
-<script setup name="LayCount" lang="ts">
+<script setup name="LayCount" lang="ts"></script>
-
-</script>

src/module/dropdown/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayDropdown', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/dropdown/index.vue

@@ -5,25 +5,25 @@
     :class="[openState ? 'layui-dropdown-up' : '']"
   >
     <div @click="open">
-      <slot></slot>
+      <slot />
     </div>
     <dl class="layui-anim layui-anim-upbit">
       <ul class="layui-menu layui-dropdown-menu">
-        <slot name="content"></slot>
+        <slot name="content" />
       </ul>
     </dl>
   </div>
   <div
     v-if="trigger === 'hover'"
     class="layui-dropdown"
+    :class="[openState ? 'layui-dropdown-up' : '']"
     @mouseenter="open"
     @mouseleave="open"
-    :class="[openState ? 'layui-dropdown-up' : '']"
   >
-    <slot></slot>
+    <slot />
     <dl class="layui-anim layui-anim-upbit">
       <ul class="layui-menu layui-dropdown-menu">
-        <slot name="content"></slot>
+        <slot name="content" />
       </ul>
     </dl>
   </div>

src/module/dropdownItem/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayDropdownItem', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/dropdownItem/index.vue

@@ -1,8 +1,9 @@
 <template>
-    <li><div class="layui-menu-body-title">
+  <li>
-        <slot></slot>
+    <div class="layui-menu-body-title">
-    </div></li>
+      <slot />
+    </div>
+  </li>
 </template>
 
-<script setup name="LayDropdownItem" lang="ts">
+<script setup name="LayDropdownItem" lang="ts"></script>
-</script>

src/module/empty/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayEmpty', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/empty/index.vue

@@ -3,7 +3,9 @@
     <div class="layui-empty-image">
       <img class="layui-empty-image-default" src="./index.svg" />
     </div>
-    <div class="layui-empty-description">{{ description }}</div>
+    <div class="layui-empty-description">
+      {{ description }}
+    </div>
   </div>
 </template>
 

src/module/field/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayField', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/field/index.vue

@@ -1,15 +1,14 @@
 <template>
   <fieldset class="layui-elem-field">
-    <legend>{{title}}</legend>
+    <legend>{{ title }}</legend>
     <div class="layui-field-box">
-      <slot></slot>
+      <slot />
     </div>
   </fieldset>
 </template>
 
 <script setup name="LayField" lang="ts">
-const props =
+const props = defineProps<{
-  defineProps<{
+  title?: string
-    title?: string
+}>()
-  }>()
 </script>

src/module/footer/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayFooter', Component)
+  app.component(Component.name || 'LayFooter', Component)
 }
 
 export default Component as IDefineComponent

src/module/footer/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-footer">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayFooter" lang="ts">
+<script setup name="LayFooter" lang="ts"></script>
-
-</script>

src/module/form/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayForm', Component)
+  app.component(Component.name || 'LayForm', Component)
 }
 
 export default Component as IDefineComponent

src/module/form/index.vue

@@ -1,8 +1,7 @@
 <template>
   <form class="layui-form">
-    <slot></slot>
+    <slot />
   </form>
 </template>
 
-<script setup name="LayForm" lang="ts">
+<script setup name="LayForm" lang="ts"></script>
-</script>

src/module/formItem/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayFormItem', Component)
+  app.component(Component.name || 'LayFormItem', Component)
 }
 
 export default Component as IDefineComponent

src/module/formItem/index.vue

@@ -2,7 +2,7 @@
   <div class="layui-form-item">
     <label class="layui-form-label">{{ label }}</label>
     <div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>

src/module/header/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayHeader', Component)
+  app.component(Component.name || 'LayHeader', Component)
 }
 
 export default Component as IDefineComponent

src/module/header/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-header">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayHeader" lang="ts">
+<script setup name="LayHeader" lang="ts"></script>
-
-</script>

src/module/icon/index.vue

@@ -1,12 +1,11 @@
 <template>
-    <i class="layui-icon" :class="[type]"></i>
+  <i class="layui-icon" :class="[type]" />
 </template>
 
 <script setup name="LayIcon" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  type?: string
-    type?: string
+}>()
-  }>()
 </script>

src/module/iconPicker/index.vue

@@ -6,30 +6,30 @@
       "
     >
       <div class="layui-inline layui-iconpicker-main">
-        <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
+        <i class="layui-inline layui-icon" :class="[selectedIcon]" />
       </div>
       <span class="layui-inline layui-iconpicker-suffix"
-        ><i class="layui-icon layui-icon-down layui-anim"></i
+        ><i class="layui-icon layui-icon-down layui-anim"
-      ></span>
+      /></span>
     </div>
     <template #content>
       <div class="layui-iconpicker-view layui-iconpicker-scroll">
-        <div class="layui-iconpicker-search" v-if="showSearch">
+        <div v-if="showSearch" class="layui-iconpicker-search">
           <div class="layui-form layui-input-wrap layui-input-wrap-prefix">
             <div class="layui-input-prefix">
-              <i class="layui-icon layui-icon-search"></i>
+              <i class="layui-icon layui-icon-search" />
             </div>
             <input
               type="text"
               value=""
-              @input="search"
               placeholder="search"
               autocomplete="off"
               class="layui-input"
               lay-affix="clear"
+              @input="search"
             />
             <div class="layui-input-suffix layui-input-affix-event layui-hide">
-              <i class="layui-icon layui-icon-clear"></i>
+              <i class="layui-icon layui-icon-clear" />
             </div>
           </div>
         </div>
@@ -38,29 +38,32 @@
             <li
               v-for="icon in icones"
               :key="icon"
-              @click="selectIcon(icon.class)"
               :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+              @click="selectIcon(icon.class)"
             >
-              <i class="layui-icon" :class="[icon.class]"></i>
+              <i class="layui-icon" :class="[icon.class]" />
-              <p class="layui-elip">{{ icon.name }}</p>
+              <p class="layui-elip">
+                {{ icon.name }}
+              </p>
             </li>
           </ul>
         </div>
-        <div class="layui-iconpicker-page" v-if="page">
+        <div v-if="page" class="layui-iconpicker-page">
           <div
-            class="layui-box layui-laypage layui-laypage-default"
             id="layui-laypage-1"
+            class="layui-box layui-laypage layui-laypage-default"
           >
             <span class="layui-laypage-count">共 {{ total }} 个</span
             ><a
               href="javascript:;"
-              @click="prev()"
               class="layui-laypage-prev"
               :class="[currentPage === 1 ? 'layui-disabled' : '']"
-              ><i class="layui-icon layui-icon-left"></i></a
+              @click="prev()"
+              ><i class="layui-icon layui-icon-left" /></a
             ><span class="layui-laypage-curr"
-              ><em class="layui-laypage-em"></em
+              ><em class="layui-laypage-em" /><em
-              ><em>{{ currentPage }} / {{ totalPage }}</em></span
+                >{{ currentPage }} / {{ totalPage }}</em
+              ></span
             ><span class="layui-laypage-spr">…</span
             ><a href="javascript:;" class="layui-laypage-last" title="尾页"
               >14</a
@@ -69,8 +72,8 @@
               :class="[currentPage === totalPage ? 'layui-disabled' : '']"
               class="layui-laypage-next"
               @click="next()"
-              ><i class="layui-icon layui-icon-right"></i
+              ><i class="layui-icon layui-icon-right"
-            ></a>
+            /></a>
           </div>
         </div>
       </div>
@@ -90,15 +93,15 @@ const props = withDefaults(
   }>(),
   {
     modelValue: 'layui-icon-face-smile',
-    page: false
+    page: false,
   }
 )
 
 const emit = defineEmits(['update:modelValue'])
 
-const selectedIcon: Ref<String> = ref(props.modelValue as String)
+const selectedIcon: Ref<string> = ref(props.modelValue as string)
 
-const selectIcon = function (icon: String) {
+const selectIcon = function (icon: string) {
   emit('update:modelValue', icon)
   selectedIcon.value = icon
 }
@@ -116,7 +119,7 @@ if (props.page) {
 }
 
 const next = function () {
-  if (currentPage.value === totalPage) {
+  if (currentPage.value === totalPage.value) {
     return
   }
   currentPage.value = currentPage.value + 1
@@ -159,7 +162,7 @@ const search = function (e: any) {
   }
 }
 
-const searchList = function (str: String, container: any) {
+const searchList = function (str: string, container: any) {
   var newList = []
   var startChar = str.charAt(0)
   var strLen = str.length
@@ -190,4 +193,4 @@ const searchList = function (str: String, container: any) {
   }
   return newList
 }
-</script>
+</script>

src/module/input/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayInput', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/input/index.vue

@@ -1,22 +1,27 @@
 <template>
-  <input :type="type" :value="modelValue" :placeholder="placeholder" :name="name" class="layui-input" @input="updateValue"/>
+  <input
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :name="name"
+    class="layui-input"
+    @input="updateValue"
+  />
 </template>
 
 <script setup name="LayInput" lang="ts">
 import { defineProps, defineEmits } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  name?: string
-    name?: string
+  type?: string
-    type?: string
+  modelValue?: string
-    modelValue?: string
+  placeholder?: string
-    placeholder?: string
+}>()
-  }>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const updateValue = function(event: InputEvent) {
+const updateValue = function (event: InputEvent) {
   emit('update:modelValue', (event.target as HTMLInputElement).value)
 }
-
 </script>

src/module/layout/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayLayout', Component)
+  app.component(Component.name || 'LayLayout', Component)
 }
 
 export default Component as IDefineComponent

src/module/layout/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-layout layui-layout-admin">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayLayout" lang="ts">
+<script setup name="LayLayout" lang="ts"></script>
-
-</script>

src/module/line/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayLine', Component)
+  app.component(Component.name || 'LayLine', Component)
 }
 
 export default Component as IDefineComponent

src/module/line/index.vue

@@ -5,8 +5,7 @@
 <script setup name="LayLine" lang="ts">
 import { defineProps } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  theme?: string
-    theme?: string
+}>()
-  }>()
 </script>

src/module/logo/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayLogo', Component)
+  app.component(Component.name || 'LayLogo', Component)
 }
 
 export default Component as IDefineComponent

src/module/logo/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layui-logo">
-      <slot></slot>
+    <slot />
   </div>
 </template>
 
-<script setup name="LayLogo" lang="ts">
+<script setup name="LayLogo" lang="ts"></script>
-
-</script>

src/module/menu/index.ts

@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayMenu', Component)
+  app.component(Component.name || 'LayMenu', Component)
 }
 
 export default Component as IDefineComponent

src/module/menu/index.vue

@@ -1,7 +1,7 @@
 <template>
-   <ul class="layui-nav" :class="[tree ? 'layui-nav-tree':'']">
+  <ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
-       <slot></slot>
+    <slot />
-   </ul>
+  </ul>
 </template>
 
 <script setup name="LayMenu" lang="ts">
@@ -13,7 +13,7 @@ const props = withDefaults(
     tree?: boolean
   }>(),
   {
-    selectedKey: "",
+    selectedKey: '',
     tree: false,
   }
 )
@@ -21,6 +21,6 @@ const props = withDefaults(
 const isTree = ref(props.tree)
 const selectKey = ref(props.selectedKey)
 
-provide("isTree",isTree);
+provide('isTree', isTree)
-provide("selectKey",selectKey)
+provide('selectKey', selectKey)
 </script>