fix: merge code

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint:prettier
+npx --no -- commitlint --edit $1

commitlint.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [2, 
+      "always",
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test'
+      ]
+    ],
+  },
+};

package.json

@@ -29,7 +29,11 @@
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
-    "lint:prettier": "prettier --write  'src/**/*'"
+    "lint:prettier": "prettier --write \"src/**/*.{vue,ts}\"",
+    "prepare": "husky install",
+    "postinstall": "npm run prepare",
+    "commit": "git-cz",
+    "commit:push": "git add . && git-cz && git push"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
@@ -46,6 +50,8 @@
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.4",
@@ -56,12 +62,13 @@
     "@vue/compiler-sfc": "^3.2.30",
     "@vue/server-renderer": "^3.2.30",
     "commitizen": "^4.2.4",
-    "cz-conventional-changelog": "3.3.0",
+    "cz-conventional-changelog": "^3.3.0",
     "escape-html": "^1.0.3",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
+    "husky": "^7.0.4",
     "less": "^4.1.2",
     "markdown-it-container": "^3.0.0",
     "prettier": "^2.5.1",
@@ -81,5 +88,15 @@
     "current node",
     "last 2 versions and > 2%",
     "ie > 10"
-  ]
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  }
 }

src/component/avatar/index.less

@@ -46,4 +46,4 @@
 .layui-avatar-list .layui-avatar {
   margin-left: -10px;
   display: inline-block;
-}
+}

src/component/avatar/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/avatar/index.vue

@@ -13,9 +13,7 @@ export interface LayAvatarProps {
   radius?: boolean;
 }
 
-const props = withDefaults(defineProps<LayAvatarProps>(), {
-  
-});
+const props = withDefaults(defineProps<LayAvatarProps>(), {});
 </script>
 
 <template>
@@ -27,4 +25,4 @@ const props = withDefaults(defineProps<LayAvatarProps>(), {
       size ? 'layui-avatar-' + size : '',
     ]"
   />
-</template>
+</template>

src/component/avatarList/index.vue

@@ -4,11 +4,10 @@ export default {
 };
 </script>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="layui-avatar-list">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/backTop/index.less

@@ -25,13 +25,13 @@
   }
 }
 
-.layui-backtop-medium{
+.layui-backtop-medium {
   width: @width - 10px;
   height: @height - 10px;
   font-size: 30px;
 }
 
-.layui-backtop-small{
+.layui-backtop-small {
   width: @width - 20px;
   height: @height - 20px;
   font-size: 20px;

src/component/backTop/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/backTop/index.vue

@@ -5,13 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import {
-  ref,
-  shallowRef,
-  withDefaults,
-  computed,
-  onMounted,
-} from "vue";
+import { ref, shallowRef, withDefaults, computed, onMounted } from "vue";
 import LayIcon from "../icon/index";
 import "./index.less";
 
@@ -50,15 +44,15 @@ let visible = ref(props.showHeight === 0);
 
 const classBacktop = computed(() => {
   return {
-    'layui-backtop-medium': props.size === "medium",
-    'layui-backtop-small': props.size === "small"
-  }
+    "layui-backtop-medium": props.size === "medium",
+    "layui-backtop-small": props.size === "small",
+  };
 });
 
 const borderRadius = computed(() => {
   if (props.circle) {
-    return "50%"
-  };
+    return "50%";
+  }
   return typeof props.borderRadius === "number"
     ? `${props.borderRadius}px`
     : props.borderRadius;
@@ -132,13 +126,15 @@ const getScrollTarget = () => {
     return getScrollParent(backtopRef.value!, false);
   } else {
     const targetElement = document.querySelector<HTMLElement>(props.target);
-    if (!targetElement){
+    if (!targetElement) {
       throw new Error(`target is not existed: ${props.target}`);
     }
     // 特定容器内部显示
     if (props.position === "absolute") {
-      if (!targetElement.parentElement){
-        throw new Error( `target parent element is not existed: ${props.target}`);
+      if (!targetElement.parentElement) {
+        throw new Error(
+          `target parent element is not existed: ${props.target}`
+        );
       }
       targetElement.parentElement.style.position = "relative";
       // backtopRef.value!.style.position = props.position;
@@ -163,7 +159,9 @@ const getScrollParent = (
     if (excludeStaticParent && style.position === "static") {
       continue;
     }
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)){
+    if (
+      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+    ) {
       return parent;
     }
   }
@@ -209,4 +207,4 @@ onMounted(() => {
       />
     </slot>
   </div>
-</template>
+</template>

src/component/breadcrumb/index.vue

@@ -8,14 +8,12 @@ export default {
 import { provide, withDefaults } from "vue";
 
 export interface LayBreadcrumbProps {
-    separator?: string;
+  separator?: string;
 }
 
-const props = withDefaults(defineProps<LayBreadcrumbProps>(),
-  {
-    separator: "/",
-  }
-);
+const props = withDefaults(defineProps<LayBreadcrumbProps>(), {
+  separator: "/",
+});
 
 provide("separator", props.separator);
 </script>
@@ -24,4 +22,4 @@ provide("separator", props.separator);
   <span class="layui-breadcrumb" style="visibility: visible">
     <slot></slot>
   </span>
-</template>
+</template>

src/component/breadcrumbItem/index.vue

@@ -12,8 +12,8 @@
 
 <script lang="ts">
 export default {
-  name: "LayBreadcrumbItem"
-}
+  name: "LayBreadcrumbItem",
+};
 </script>
 
 <script setup lang="ts">

src/component/button/index.less

@@ -113,4 +113,4 @@
   color: #d2d2d2 !important;
   cursor: not-allowed !important;
   opacity: 1;
-}
+}

src/component/button/index.vue

@@ -31,11 +31,11 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
 
 const emit = defineEmits(["click"]);
 
-const onClick = (event : any) => {
-  if(!props.disabled) {
+const onClick = (event: any) => {
+  if (!props.disabled) {
     emit("click", event);
   }
-}
+};
 
 const classes = computed(() => {
   return [

src/component/buttonContainer/index.less

@@ -7,4 +7,4 @@
   .layui-btn + .layui-btn {
     margin-left: 0;
   }
-}
+}

src/component/buttonContainer/index.vue

@@ -12,4 +12,4 @@ import "./index.less";
   <div class="layui-btn-container">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/card/index.less

@@ -31,4 +31,4 @@
 
 .layui-card:last-child {
   margin-bottom: 0;
-}
+}

src/component/card/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayCard"
-}
+  name: "LayCard",
+};
 </script>
 
 <script setup lang="ts">
@@ -28,4 +28,4 @@ const props = defineProps<LayCardProps>();
       <slot v-else></slot>
     </div>
   </div>
-</template>
+</template>

src/component/carousel/index.vue

@@ -1,17 +1,11 @@
 <script lang="ts">
 export default {
-  name: "LayCarousel"
-}
+  name: "LayCarousel",
+};
 </script>
 
 <script setup lang="ts">
-import {
-  withDefaults,
-  provide,
-  useSlots,
-  ref,
-  computed,
-} from "vue";
+import { withDefaults, provide, useSlots, ref, computed } from "vue";
 
 const slot = useSlots() as any;
 const slots = slot.default && (slot.default() as any[]);

src/component/carouselItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayCarouselItem"
-}
+  name: "LayCarouselItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -18,4 +18,4 @@ const active = inject("active");
   <li :class="[active === id ? 'layui-this' : '']">
     <slot></slot>
   </li>
-</template>
+</template>

src/component/checkboxGroup/index.vue

@@ -41,4 +41,4 @@ watch(
   <div class="layui-checkbox-group">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/col/index.vue

@@ -15,7 +15,7 @@ export interface LayColProps {
   mdOffset?: string;
   xsOffset?: string;
   smOffset?: string;
-  lgOffset?: string; 
+  lgOffset?: string;
 }
 
 const props = defineProps<LayColProps>();

src/component/collapse/index.vue

@@ -1,28 +1,21 @@
 <script lang="ts">
 export default {
-  name:"LayCollapse"
-}
+  name: "LayCollapse",
+};
 </script>
 
 <script setup lang="ts">
-import {
-  withDefaults,
-  provide,
-  ref,
-  watch,
-} from "vue";
+import { withDefaults, provide, ref, watch } from "vue";
 
 export interface LayCollapseProps {
-    modelValue?: number | string | [];
-    accordion?: boolean;
+  modelValue?: number | string | [];
+  accordion?: boolean;
 }
 
-const props = withDefaults(defineProps<LayCollapseProps>(),
-  {
-    modelValue: () => [],
-    accordion: false,
-  }
-);
+const props = withDefaults(defineProps<LayCollapseProps>(), {
+  modelValue: () => [],
+  accordion: false,
+});
 
 // 监听传入的值
 watch(
@@ -46,4 +39,4 @@ provide("layCollapse", {
   <div class="layui-collapse">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/collapseItem/index.vue

@@ -1,23 +1,21 @@
 <script lang="ts">
 export default {
-  name:"LayCollapseItem"
-}
+  name: "LayCollapseItem",
+};
 </script>
 
 <script setup lang="ts">
 import { withDefaults, inject, computed, ref } from "vue";
 
 export interface LayCollapseItemProps {
-    id: number | string;
-    title: string;
-    disabled?: boolean;  
+  id: number | string;
+  title: string;
+  disabled?: boolean;
 }
 
-const props = withDefaults(defineProps<LayCollapseItemProps>(),
-  {
-    disabled: false,
-  }
-);
+const props = withDefaults(defineProps<LayCollapseItemProps>(), {
+  disabled: false,
+});
 
 const { accordion, activeValues, emit } = inject("layCollapse") as any;
 
@@ -64,4 +62,4 @@ const showHandle = function () {
       </p>
     </div>
   </div>
-</template>
+</template>

src/component/colorPicker/index.less

@@ -75,7 +75,8 @@
   position: relative;
   height: 10px;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
+  background: #fff
+    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
   background-size: 10px 10px;
 }
 

src/component/colorPicker/index.vue

@@ -110,13 +110,7 @@ export interface LayColorPicker {
 
 const props = withDefaults(defineProps<LayColorPicker>(), {
   modelValue: { r: 217, g: 128, b: 95, a: 1 },
-  preset: [
-    "#009688",
-    "#1e9fff",
-    "#ffb800",
-    "#ff5722",
-    "#5fb878",
-  ]
+  preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"],
 });
 
 const saturationValue = ref<null | HTMLElement>(null);
@@ -494,4 +488,4 @@ function hex2rgba(s: any) {
     return { r, g, b, a };
   }
 }
-</script>
+</script>

src/component/container/index.less

@@ -9,4 +9,4 @@
   position: relative;
   margin: 0 auto;
   padding: 0 15px;
-}
+}

src/component/container/interface.ts

@@ -1 +0,0 @@
-

src/component/countUp/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/countUp/index.vue

@@ -1,6 +1,6 @@
 <template>
   <slot name="prefix"></slot>
-  <span ref="counterRef" style="font-family:sans-serif;" />
+  <span ref="counterRef" style="font-family: sans-serif" />
   <slot name="suffix"></slot>
 </template>
 
@@ -11,9 +11,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import { CountUp } from 'countup.js'
-import type { CountUpOptions } from 'countup.js'
+import { onMounted, ref, watch } from "vue";
+import { CountUp } from "countup.js";
+import type { CountUpOptions } from "countup.js";
 
 export interface LayCountupProps {
   endVal?: number; //显示的值
@@ -30,51 +30,58 @@ export interface LayCountupProps {
 const props = withDefaults(defineProps<LayCountupProps>(), {
   endVal: 0,
   option: () => {
-    return {}
-  }
+    return {};
+  },
 });
 
 const counterRef = ref<HTMLDivElement | null>(null);
 const instance = ref<CountUp | null>(null);
-const {decimalPlaces,useGrouping,separator,useEasing,duration,prefix,suffix} = props;
+const {
+  decimalPlaces,
+  useGrouping,
+  separator,
+  useEasing,
+  duration,
+  prefix,
+  suffix,
+} = props;
 const defaultOptions: CountUpOptions = {
   startVal: 0, // 开始数字
   decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
-  useEasing: useEasing ? useEasing : true,  // 使用缓动动画
+  useEasing: useEasing ? useEasing : true, // 使用缓动动画
   duration: duration ? duration : 2, // 动画持续时间
   useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
-  separator:separator ? separator : ",", // 千位分隔符
-  decimal:".", // 小数点分隔符
+  separator: separator ? separator : ",", // 千位分隔符
+  decimal: ".", // 小数点分隔符
   prefix: prefix ? prefix : "", // 前缀
   suffix: suffix ? suffix : "", // 后缀
-}
+};
 
 watch(
   () => props.endVal,
   () => {
-    update(props.endVal)
+    update(props.endVal);
   }
 );
 
 onMounted(() => {
-  createCounter()
-})
+  createCounter();
+});
 
 const createCounter = () => {
-  if (!counterRef.value) return
-  const opts: CountUpOptions = Object.assign(defaultOptions, props.option)
+  if (!counterRef.value) return;
+  const opts: CountUpOptions = Object.assign(defaultOptions, props.option);
   instance.value = new CountUp(counterRef?.value, props.endVal, opts);
   start();
-}
+};
 
 const start = () => {
-  if (!instance.value) return
+  if (!instance.value) return;
   instance?.value.start();
-}
+};
 
 const update = (newEndVal: number) => {
-  if (!instance.value) return
+  if (!instance.value) return;
   instance?.value.update(newEndVal);
-}
-
+};
 </script>

src/component/dropdownItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayDropdownItem"
-}
+  name: "LayDropdownItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -20,4 +20,4 @@ const click = function () {
       <slot></slot>
     </div>
   </li>
-</template>
+</template>

src/component/exception/index.less

@@ -1,43 +1,43 @@
-.layui-exception{
-    .layui-exception-image{
-        width: 50%;
-        display: inline-block;
-        vertical-align: top;
-        > div {
-            height: 200px;
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-        }
-        .error-401 {
-            background-image: url(./image/401.svg);
-        }
-        .error-403 {
-            background-image: url(./image/403.svg);
-        }
-        .error-404 {
-            background-image: url(./image/404.svg);
-        }
-        .error-500 {
-            background-image: url(./image/500.svg);
-        }
+.layui-exception {
+  .layui-exception-image {
+    width: 50%;
+    display: inline-block;
+    vertical-align: top;
+    > div {
+      height: 200px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
     }
-    .layui-exception-details{
-        .layui-exception-details-content {
-            margin-left: 100px;
-            .layui-exception-details-title{
-                font-size: 60px;
-                color: #434e59;
-                margin-bottom: 24px;
-                font-weight: 600;
-            }
-            .layui-exception-details-describe{
-                font-size: 18px;
-                color: rgba(0, 0, 0, .45);
-                margin-bottom: 26px;
-            }
-        }
-        width: 50%;
-        vertical-align: top;
-        display: inline-block;
+    .error-401 {
+      background-image: url(./image/401.svg);
     }
-}
+    .error-403 {
+      background-image: url(./image/403.svg);
+    }
+    .error-404 {
+      background-image: url(./image/404.svg);
+    }
+    .error-500 {
+      background-image: url(./image/500.svg);
+    }
+  }
+  .layui-exception-details {
+    .layui-exception-details-content {
+      margin-left: 100px;
+      .layui-exception-details-title {
+        font-size: 60px;
+        color: #434e59;
+        margin-bottom: 24px;
+        font-weight: 600;
+      }
+      .layui-exception-details-describe {
+        font-size: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        margin-bottom: 26px;
+      }
+    }
+    width: 50%;
+    vertical-align: top;
+    display: inline-block;
+  }
+}

src/component/exception/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-    name: "LayException"
-}
+  name: "LayException",
+};
 </script>
 <script setup lang="ts">
 import { useSlots } from "vue";
@@ -17,28 +17,28 @@ const slots = useSlots();
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   title: "Exception",
-  describe: "describe"
+  describe: "describe",
 });
 </script>
 <template>
-    <div class="layui-exception">
-        <div class="layui-exception-image">
-            <slot name="image" v-if="slots.default"></slot>
-            <template v-else>
-                <div v-if="status=='401'" class="error-401" />
-                <div v-if="status=='403'" class="error-403" />
-                <div v-if="status=='404'" class="error-404" />
-                <div v-if="status=='500'" class="error-500" />
-            </template>
-        </div>
-        <div class="layui-exception-details">
-            <div class="layui-exception-details-content">
-                <div class="layui-exception-details-title">{{title}}</div>
-                <div class="layui-exception-details-describe">{{describe}}</div>
-                <div class="layui-exception-details-operate">
-                    <slot name="action"></slot>
-                </div>
-            </div>
-        </div>
+  <div class="layui-exception">
+    <div class="layui-exception-image">
+      <slot name="image" v-if="slots.default"></slot>
+      <template v-else>
+        <div v-if="status == '401'" class="error-401" />
+        <div v-if="status == '403'" class="error-403" />
+        <div v-if="status == '404'" class="error-404" />
+        <div v-if="status == '500'" class="error-500" />
+      </template>
     </div>
-</template>
+    <div class="layui-exception-details">
+      <div class="layui-exception-details-content">
+        <div class="layui-exception-details-title">{{ title }}</div>
+        <div class="layui-exception-details-describe">{{ describe }}</div>
+        <div class="layui-exception-details-operate">
+          <slot name="action"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/component/exception/interface.ts

@@ -1 +0,0 @@
-

src/component/field/index.less

@@ -1,12 +1,11 @@
-
 @import "../../theme/variable.less";
 
 @field-border-color: var(--field-border-color);
 @field-border-radius: var(--field-border-radius);
 
 :root {
-    --field-border-color: @global-border-color;
-    --field-border-radius: @global-border-radius;
+  --field-border-color: @global-border-color;
+  --field-border-radius: @global-border-radius;
 }
 
 .layui-field {

src/component/field/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayField"
-}
+  name: "LayField",
+};
 </script>
 
 <script setup lang="ts">
@@ -11,7 +11,7 @@ import { useSlots } from "vue";
 const slot = useSlots();
 
 export interface LayFieldProps {
-  title?: string;  
+  title?: string;
 }
 
 const props = defineProps<LayFieldProps>();
@@ -30,4 +30,4 @@ const props = defineProps<LayFieldProps>();
       <a name="docend">{{ title }}</a>
     </legend>
   </fieldset>
-</template>
+</template>

src/component/form/index.vue

@@ -7,33 +7,27 @@ export default {
 <script setup lang="ts">
 import { toRefs, provide, reactive, onMounted } from "vue";
 import { Rule, ValidateError, ValidateMessages } from "async-validator";
-import {
-  LayFormItemContext,
-  FormCallback,
-  modelType,
-} from "../../types/form";
+import { LayFormItemContext, FormCallback, modelType } from "../../types/form";
 
 export interface LayFormProps {
-    model?: modelType;
-    required?: boolean;
-    rules?: Rule;
-    initValidate?: boolean;
-    requiredIcons?: string;
-    requiredErrorMessage?: string;
-    validateMessage?: ValidateMessages;
-    useCN?: boolean;
+  model?: modelType;
+  required?: boolean;
+  rules?: Rule;
+  initValidate?: boolean;
+  requiredIcons?: string;
+  requiredErrorMessage?: string;
+  validateMessage?: ValidateMessages;
+  useCN?: boolean;
 }
 
-const props = withDefaults(defineProps<LayFormProps>(),
-  {
-    model: function () {
-      return {};
-    },
-    useCN: true,
-    requiredIcons: "",
-    initValidate: false,
-  }
-);
+const props = withDefaults(defineProps<LayFormProps>(), {
+  model: function () {
+    return {};
+  },
+  useCN: true,
+  requiredIcons: "",
+  initValidate: false,
+});
 
 const formItems: LayFormItemContext[] = [];
 const formItemMap: { [key: string]: LayFormItemContext } = {};
@@ -144,7 +138,7 @@ const addField = function (item: LayFormItemContext) {
 defineExpose({ validate, clearValidate, reset });
 
 provide(
-  'LayForm',
+  "LayForm",
   reactive({
     formItems,
     addField,
@@ -159,4 +153,4 @@ provide(
   <form class="layui-form" :onsubmit="submit">
     <slot></slot>
   </form>
-</template>
+</template>

src/component/formItem/index.less

@@ -10,7 +10,8 @@
   .layui-input-block,
   .layui-input-inline {
     .layui-form-danger {
-      &, .layui-input {
+      &,
+      .layui-input {
         border-color: #ff5722 !important;
       }
     }

src/component/formItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: 'LayFormItem'
-}
+  name: "LayFormItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -32,21 +32,19 @@ import Schema, {
 import cnValidateMessage from "./cnValidateMessage";
 
 export interface LayFormItemProps {
-    prop?: string;
-    mode?: string;
-    label?: string;
-    errorMessage?: string;
-    rules?: Rule;
-    required?: boolean;
+  prop?: string;
+  mode?: string;
+  label?: string;
+  errorMessage?: string;
+  rules?: Rule;
+  required?: boolean;
 }
 
-const props = withDefaults(defineProps<LayFormItemProps>(),
-  {
-    mode: "block",
-  }
-);
+const props = withDefaults(defineProps<LayFormItemProps>(), {
+  mode: "block",
+});
 
-const layForm = inject('LayForm', {} as LayFormContext);
+const layForm = inject("LayForm", {} as LayFormContext);
 const formItemRef = ref<HTMLDivElement>();
 const slotParent = ref<HTMLDivElement>();
 
@@ -197,4 +195,4 @@ onMounted(() => {
       >
     </div>
   </div>
-</template>
+</template>

src/component/iconPicker/index.vue

@@ -80,8 +80,8 @@
 
 <script lang="ts">
 export default {
-  name: "LayIconPicker"
-}
+  name: "LayIconPicker",
+};
 </script>
 
 <script setup lang="ts">

src/component/input/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
 export default {
-  name: "LayInput"
-}
+  name: "LayInput",
+};
 </script>
 
 <script setup lang="ts">
-import "./index.less"
-import { useI18n } from 'vue-i18n'
+import "./index.less";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
@@ -18,8 +18,7 @@ export interface LayInputProps {
   placeholder?: string;
 }
 
-const props = withDefaults(defineProps<LayInputProps>(), {
-});
+const props = withDefaults(defineProps<LayInputProps>(), {});
 
 const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
 
@@ -51,4 +50,4 @@ const onBlur = function () {
     @focus="onFocus"
     @blur="onBlur"
   />
-</template>
+</template>

src/component/inputNumber/index.vue

@@ -9,12 +9,7 @@ import layButton from "../button/index";
 import layIcon from "../icon/index";
 import layInput from "../input/index";
 import "./index.less";
-import {
-  ref,
-  watch,
-  withDefaults,
-  computed,
-} from "vue";
+import { ref, watch, withDefaults, computed } from "vue";
 
 export interface LayInputNumberProps {
   modelValue?: number;

src/component/line/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
 export default {
-  name: "LayLine"
-}
+  name: "LayLine",
+};
 </script>
 
 <script setup lang="ts">
 export interface LayLineProps {
-  theme?: string; 
+  theme?: string;
 }
 
 const props = defineProps<LayLineProps>();
@@ -14,4 +14,4 @@ const props = defineProps<LayLineProps>();
 
 <template>
   <hr :class="['layui-border-' + theme]" />
-</template>
+</template>

src/component/logo/index.vue

@@ -6,9 +6,8 @@
 
 <script lang="ts">
 export default {
-  name: "LayLogo"
-}
+  name: "LayLogo",
+};
 </script>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>

src/component/menu/index.less

@@ -5,8 +5,8 @@
   left: calc(100% + 5px);
 }
 
-.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit
-, .layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
+.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit,
+.layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
   top: 0px;
   left: calc(-100% - 20px);
 }
@@ -47,7 +47,7 @@
   line-height: 60px;
 }
 
-.layui-nav .layui-nav-item >  a {
+.layui-nav .layui-nav-item > a {
   display: block;
   padding: 0 30px;
   color: rgba(255, 255, 255, 0.7);
@@ -280,7 +280,7 @@
 .layui-nav-light {
   background-color: #ffffff;
   * {
-    color: grey!important;
+    color: grey !important;
   }
   .layui-nav-itemed > .layui-nav-child {
     background-color: rgba(0, 0, 0, 0.02);
@@ -293,22 +293,22 @@
 }
 
 .layui-nav-tree .layui-this * {
-  color: white!important;
+  color: white !important;
 }
 
-.layui-nav-tree.inverted .layui-this, 
+.layui-nav-tree.inverted .layui-this,
 .layui-nav-tree.inverted .layui-this:hover {
   border-radius: 4px;
   margin: 0px 6px;
   width: auto;
 }
 
-.layui-nav-tree.inverted .layui-this > a, 
-.layui-nav-tree.inverted .layui-this:hover > a  {
+.layui-nav-tree.inverted .layui-this > a,
+.layui-nav-tree.inverted .layui-this:hover > a {
   border-radius: 4px;
 }
 
-.layui-nav-tree.inverted .layui-this > a{
+.layui-nav-tree.inverted .layui-this > a {
   padding: 5px 24px 5px 24px;
 }
 
@@ -316,4 +316,4 @@
   .layui-nav-itemed > .layui-nav-child {
     background-color: transparent;
   }
-}
+}

src/component/menu/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayMenu"
-}
+  name: "LayMenu",
+};
 </script>
 
 <script setup lang="ts">
@@ -23,9 +23,9 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   selectedKey: "",
   openKeys: () => [],
   tree: false,
-  theme: 'dark',
+  theme: "dark",
   inverted: false,
-  level: false
+  level: false,
 });
 
 const isTree = computed(() => props.tree);
@@ -54,7 +54,15 @@ provide("openKeys", openKeys);
 </script>
 
 <template>
-  <ul class="layui-nav" :class="[level? 'level':'',inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
+  <ul
+    class="layui-nav"
+    :class="[
+      level ? 'level' : '',
+      inverted ? 'inverted' : '',
+      tree ? 'layui-nav-tree' : '',
+      theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
+    ]"
+  >
     <slot></slot>
   </ul>
-</template>
+</template>

src/component/menuItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayMenuItem"
-}
+  name: "LayMenuItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -9,7 +9,7 @@ import { inject, Ref, useSlots } from "vue";
 
 export interface LayMenuItemProps {
   id: string;
-  title?: string; 
+  title?: string;
 }
 
 const slots = useSlots();
@@ -34,4 +34,4 @@ const selectHandle = function () {
       <span v-else>{{ title }}</span>
     </a>
   </li>
-</template>
+</template>

src/component/page/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/page/index.vue

@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 export interface LayPageProps {
   total: number;
@@ -116,7 +116,7 @@ watch(currentPage, function () {
       @click="prev()"
     >
       <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>{{ t('page.prev') }}</template>
+      <template v-else>{{ t("page.prev") }}</template>
     </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
@@ -138,7 +138,7 @@ watch(currentPage, function () {
       @click="next()"
     >
       <slot v-if="slots.next" name="next"></slot>
-      <template v-else>{{ t('page.next') }}</template>
+      <template v-else>{{ t("page.next") }}</template>
     </a>
     <span v-if="showLimit" class="layui-laypage-limits">
       <select v-model="inlimit">
@@ -168,4 +168,4 @@ watch(currentPage, function () {
       </button>
     </span>
   </div>
-</template>
+</template>

src/component/page/interface.ts

@@ -1 +0,0 @@
-

src/component/panel/index.less

@@ -1,6 +1,5 @@
 @import "../../theme/variable.less";
 
-
 @panel-border-color: var(--panel-border-color);
 @panel-border-radius: var(--panel-border-radius);
 @panel-fore-color: var(--panel-fore-color);

src/component/popper/index.vue

@@ -27,27 +27,24 @@ import { CSSProperties, ref, watch, onMounted } from "vue";
 import { on } from "../../utils/domUtil";
 
 export interface LayPopperProps {
-    el: any;
-    content?: string | Number;
-    position?: string;
-    trigger?: string;
-    enterable?: boolean;
-    isDark?: boolean;
-    disabled?: boolean;
-    isCanHide?: boolean;
+  el: any;
+  content?: string | Number;
+  position?: string;
+  trigger?: string;
+  enterable?: boolean;
+  isDark?: boolean;
+  disabled?: boolean;
+  isCanHide?: boolean;
 }
 
-const props = withDefaults(defineProps<LayPopperProps>(),
-  {
-    position: 'top',
-    isDark: true,
-    disabled: false,
-    enterable: true,
-    isCanHide: true,
-    trigger: "hover",
-  }
-);
-
+const props = withDefaults(defineProps<LayPopperProps>(), {
+  position: "top",
+  isDark: true,
+  disabled: false,
+  enterable: true,
+  isCanHide: true,
+  trigger: "hover",
+});
 
 const EVENT_MAP: any = {
   hover: ["mouseenter", null, "mouseleave", false],
@@ -66,18 +63,21 @@ const innnerPosition = ref(props.position);
 const innerVisible = ref(!props.isCanHide);
 const isExist = ref(!props.isCanHide);
 
-watch(() => props.isCanHide, (val) => {
-  innerVisible.value = !val;
-});
+watch(
+  () => props.isCanHide,
+  (val) => {
+    innerVisible.value = !val;
+  }
+);
 
 watch(innerVisible, (val) => {
   invokeShowPosistion();
 });
 
 watch(popper, (val) => {
-  if (props.trigger === 'hover' && props.enterable) {
-    on(popper.value, EVENT_MAP['hover'][0], doShow);
-    on(popper.value, EVENT_MAP['hover'][2], doHidden);
+  if (props.trigger === "hover" && props.enterable) {
+    on(popper.value, EVENT_MAP["hover"][0], doShow);
+    on(popper.value, EVENT_MAP["hover"][2], doHidden);
   }
 });
 
@@ -91,10 +91,10 @@ watch(
 const doShow = function () {
   if (!props.disabled) {
     if (!isExist.value) {
-        isExist.value = true;
-        setTimeout(()=>innerVisible.value = true, 0);
+      isExist.value = true;
+      setTimeout(() => (innerVisible.value = true), 0);
     } else {
-        innerVisible.value = true;
+      innerVisible.value = true;
     }
   }
 };
@@ -103,14 +103,14 @@ const doHidden = function (e: MouseEvent) {
   if (checkTarget.value && props.el.contains(e.target)) {
     return;
   }
-  
+
   // isCanHide参数由外控制
   if (props.isCanHide === false) {
     return;
   }
   innerVisible.value = false;
   innnerPosition.value = props.position;
-  style.value = { top: -window.innerHeight + "px", left: 0 }
+  style.value = { top: -window.innerHeight + "px", left: 0 };
 };
 
 // 计算位置显示

src/component/quote/index.less

@@ -19,4 +19,4 @@
 
 .layui-quote-nm {
   border-left: 5px solid #eee;
-}
+}

src/component/quote/index.vue

@@ -12,11 +12,13 @@ export interface LayQuoteProps {
 }
 
 const props = defineProps<LayQuoteProps>();
-
 </script>
 
 <template>
-  <blockquote class="layui-quote" :class="[type ? `layui-quote-${props.type}` : '']">
+  <blockquote
+    class="layui-quote"
+    :class="[type ? `layui-quote-${props.type}` : '']"
+  >
     <slot></slot>
   </blockquote>
 </template>

src/component/radio/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayRadio"
-}
+  name: "LayRadio",
+};
 </script>
 
 <script setup lang="ts">
@@ -49,4 +49,4 @@ const handleClick = function () {
       <span><slot></slot></span>
     </div>
   </span>
-</template>
+</template>

src/component/result/index.less

@@ -1,38 +1,34 @@
 .result {
-	text-align: center;
-
+  text-align: center;
 }
 .result .success svg {
-	color: #32C682;
-	text-align: center;
-	margin-top: 40px;
-
+  color: #32c682;
+  text-align: center;
+  margin-top: 40px;
 }
 .result .failure svg {
-	color: #f56c6c;
-	text-align: center;
-	margin-top: 40px;
-
+  color: #f56c6c;
+  text-align: center;
+  margin-top: 40px;
 }
 .result .title {
-	margin-top: 25px;
-
+  margin-top: 25px;
 }
 .result .desc {
-	margin-top: 25px;
-	width: 60%;
-	margin-left: 20%;
-	color: rgba(0, 0, 0, .45);
+  margin-top: 25px;
+  width: 60%;
+  margin-left: 20%;
+  color: rgba(0, 0, 0, 0.45);
 }
 .result .content {
-	margin-top: 20px;
-	width: 80%;
-	border-radius: 10px;
-	background-color: whitesmoke;
-	margin-left: 10%;
+  margin-top: 20px;
+  width: 80%;
+  border-radius: 10px;
+  background-color: whitesmoke;
+  margin-left: 10%;
 }
 .result .action {
-	padding-top: 10px;
-	border-top: 1px whitesmoke solid;
-	margin-top: 25px;
+  padding-top: 10px;
+  border-top: 1px whitesmoke solid;
+  margin-top: 25px;
 }

src/component/row/index.less

@@ -122,7 +122,6 @@
 }
 
 @media screen and (min-width: 768px) {
-
   .layui-hide-sm {
     display: none !important;
   }
@@ -143,7 +142,6 @@
 }
 
 @media screen and (min-width: 992px) {
-
   .layui-hide-md {
     display: none !important;
   }
@@ -164,7 +162,6 @@
 }
 
 @media screen and (min-width: 1200px) {
-
   .layui-hide-lg {
     display: none !important;
   }

src/component/scroll/index.vue

@@ -1,14 +1,13 @@
 <script lang="ts">
 export default {
-  name: "LayScroll"
-}
+  name: "LayScroll",
+};
 </script>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="layui-side-scroll">
     <slot></slot>
   </div>
-</template>
+</template>

src/component/select/index.less

@@ -40,7 +40,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   }
 }
 
-
 .layui-select {
   height: 38px;
   line-height: 1.3;
@@ -56,4 +55,4 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 
 .layui-select::-webkit-input-placeholder {
   line-height: 1.3;
-}
+}

src/component/select/index.vue

@@ -1,150 +1,147 @@
 <script lang="ts">
 export default {
-	name: "LaySelect"
-}
+  name: "LaySelect",
+};
 </script>
 
 <script setup lang="ts">
 import "./index.less";
 import LaySelectOption from "../selectOption/index.vue";
 import {
-	provide,
-	isProxy,
-	ref,
-	watch,
-	computed,
-	reactive,
-	toRefs,
-	Ref,
+  provide,
+  isProxy,
+  ref,
+  watch,
+  computed,
+  reactive,
+  toRefs,
+  Ref,
 } from "vue";
 import { useClickOutside } from "@layui/hooks-vue";
 import { SelectItem } from "../../types";
 
 export interface LaySelectProps {
-    modelValue?: string | number | [] | null;
-    name?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    showEmpty?: boolean;
-    emptyMessage?: string;
-    multiple?: boolean;
+  modelValue?: string | number | [] | null;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  showEmpty?: boolean;
+  emptyMessage?: string;
+  multiple?: boolean;
 }
 
 const selectRef = ref<null | HTMLElement>(null);
 const isClickOutside = useClickOutside(selectRef);
 
 watch(isClickOutside, () => {
-	if (isClickOutside.value) {
-		openState.value = false;
-	}
+  if (isClickOutside.value) {
+    openState.value = false;
+  }
 });
 
-const props = withDefaults(
-	defineProps<LaySelectProps>(),
-	{
-		modelValue: null,
-		placeholder: "请选择",
-		disabled: false,
-		showEmpty: true,
-		multiple: false,
-	}
-);
+const props = withDefaults(defineProps<LaySelectProps>(), {
+  modelValue: null,
+  placeholder: "请选择",
+  disabled: false,
+  showEmpty: true,
+  multiple: false,
+});
 
 const openState = ref(false);
 
 const open = function () {
-	// 禁用
-	if (props.disabled) {
-		openState.value = false;
-		return;
-	}
-	openState.value = !openState.value;
+  // 禁用
+  if (props.disabled) {
+    openState.value = false;
+    return;
+  }
+  openState.value = !openState.value;
 };
 
 const emit = defineEmits(["update:modelValue", "change"]);
 const selectItem = ref<SelectItem>({
-	value: !props.multiple
-		? props.modelValue
-		: props.modelValue
-		? ([] as any[]).concat(props.modelValue)
-		: [],
-	label: props.multiple ? [] : null,
-	multiple: props.multiple,
+  value: !props.multiple
+    ? props.modelValue
+    : props.modelValue
+    ? ([] as any[]).concat(props.modelValue)
+    : [],
+  label: props.multiple ? [] : null,
+  multiple: props.multiple,
 } as SelectItem);
 
 watch(
-	() => selectItem.value.value,
-	(val) => {
-		emit("update:modelValue", val);
-		emit("change", val);
-	},
-	{
-		deep: true,
-	}
+  () => selectItem.value.value,
+  (val) => {
+    emit("update:modelValue", val);
+    emit("change", val);
+  },
+  {
+    deep: true,
+  }
 );
 
 watch(props, () => {
-	let value = props.modelValue;
-	if (props.multiple) {
-		if (Array.isArray(value)) {
-			selectItem.value.value = value;
-			selectItem.value.label = value.map((o) => ItemsMap.value[o]);
-		} else {
-			console.error("多选时请传入数组值");
-		}
-	} else {
-		selectItem.value.value = value;
-		//@ts-ignore
-		selectItem.value.label = ItemsMap.value[value] || "";
-	}
+  let value = props.modelValue;
+  if (props.multiple) {
+    if (Array.isArray(value)) {
+      selectItem.value.value = value;
+      selectItem.value.label = value.map((o) => ItemsMap.value[o]);
+    } else {
+      console.error("多选时请传入数组值");
+    }
+  } else {
+    selectItem.value.value = value;
+    //@ts-ignore
+    selectItem.value.label = ItemsMap.value[value] || "";
+  }
 });
 
 // 禁止操作子项
 const disabledItemMap: { [key: string | number]: boolean } = {};
 const selectItemHandle = function (
-	_selectItem: SelectItem,
-	isChecked?: boolean
+  _selectItem: SelectItem,
+  isChecked?: boolean
 ) {
-	if (!props.multiple) {
-		openState.value = false;
-	}
-	disabledItemMap[_selectItem.value as string | number] =
-		_selectItem.disabled as boolean;
-	if (typeof isChecked !== "boolean") {
-		props.multiple
-			? (selectItem.value.label as any[]).push(_selectItem.label)
-			: (selectItem.value.label = _selectItem.label);
-		return;
-	}
-	let values = selectItem.value.value;
-	if (props.multiple && Array.isArray(values)) {
-		const _values = values as any[];
-		const _labels = selectItem.value.label as any[];
-		if (isChecked) {
-			_values.push(_selectItem.value);
-			_labels.push(_selectItem.label);
-		} else {
-			_values.splice(_values.indexOf(_selectItem.value), 1);
-			_labels.splice(_labels.indexOf(_selectItem.label), 1);
-		}
-		selectItem.value.value = _values;
-		selectItem.value.label = _labels;
-	} else {
-		selectItem.value.value = _selectItem.value;
-		selectItem.value.label = _selectItem.label;
-	}
+  if (!props.multiple) {
+    openState.value = false;
+  }
+  disabledItemMap[_selectItem.value as string | number] =
+    _selectItem.disabled as boolean;
+  if (typeof isChecked !== "boolean") {
+    props.multiple
+      ? (selectItem.value.label as any[]).push(_selectItem.label)
+      : (selectItem.value.label = _selectItem.label);
+    return;
+  }
+  let values = selectItem.value.value;
+  if (props.multiple && Array.isArray(values)) {
+    const _values = values as any[];
+    const _labels = selectItem.value.label as any[];
+    if (isChecked) {
+      _values.push(_selectItem.value);
+      _labels.push(_selectItem.label);
+    } else {
+      _values.splice(_values.indexOf(_selectItem.value), 1);
+      _labels.splice(_labels.indexOf(_selectItem.label), 1);
+    }
+    selectItem.value.value = _values;
+    selectItem.value.label = _labels;
+  } else {
+    selectItem.value.value = _selectItem.value;
+    selectItem.value.label = _selectItem.label;
+  }
 };
 
 const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) {
-	e.stopPropagation();
-	selectItemHandle(_selectItem, false);
+  e.stopPropagation();
+  selectItemHandle(_selectItem, false);
 };
 const ItemsMap: Ref<{ [index: string]: string }> = ref({});
 const selectItemPush = function (p: SelectItem) {
-	if (p.value !== null) {
-		//@ts-ignore
-		ItemsMap.value[p.value] = p.label;
-	}
+  if (p.value !== null) {
+    //@ts-ignore
+    ItemsMap.value[p.value] = p.label;
+  }
 };
 provide("selectItemHandle", selectItemHandle);
 provide("selectItem", selectItem);
@@ -152,76 +149,76 @@ provide("selectItemPush", selectItemPush);
 </script>
 
 <template>
-	<div
-		ref="selectRef"
-		class="layui-unselect layui-form-select"
-		:class="{ 'layui-form-selected': openState }"
-	>
-		<div class="layui-select-title" @click="open">
-			<input
-				type="text"
-				:placeholder="
-					selectItem.value !== null &&
-					Array.isArray(selectItem.value) &&
-					selectItem.value.length > 0
-						? ''
-						: emptyMessage ?? placeholder
-				"
-				:disabled="disabled"
-				readonly
-				:value="
-					!selectItem.multiple && selectItem.value !== null
-						? selectItem.label
-						: null
-				"
-				:name="name"
-				:class="[
-					'layui-input',
-					'layui-unselect',
-					{ 'layui-disabled': disabled },
-				]"
-			/>
-			<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
-			<!-- 多选 -->
-			<div
-				v-if="selectItem.multiple && Array.isArray(selectItem.label)"
-				class="layui-multiple-select-row"
-			>
-				<div class="layui-multiple-select-badge">
-					<template v-for="(item, index) in selectItem.label" :key="index">
-						<lay-badge theme="green">
-							<span>{{ item }}</span>
-							<i
-								:class="['layui-icon', { 'layui-icon-close': true }]"
-								v-if="
-									!disabled &&
-									!(
-										Array.isArray(selectItem.value) &&
-										selectItem.value.length > 0 &&
-										disabledItemMap[selectItem.value[index]]
-									)
-								"
-								@click="
-									removeItemHandle($event, {
-										label: item,
-										value: Array.isArray(selectItem.value)
-											? selectItem.value[index]
-											: null,
-									})
-								"
-							>
-							</i>
-						</lay-badge>
-					</template>
-				</div>
-			</div>
-		</div>
-		<dl class="layui-anim layui-anim-upbit">
-			<!-- 多选不支持空提示 -->
-			<template v-if="!multiple && showEmpty">
-				<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
-			</template>
-			<slot></slot>
-		</dl>
-	</div>
-</template>
+  <div
+    ref="selectRef"
+    class="layui-unselect layui-form-select"
+    :class="{ 'layui-form-selected': openState }"
+  >
+    <div class="layui-select-title" @click="open">
+      <input
+        type="text"
+        :placeholder="
+          selectItem.value !== null &&
+          Array.isArray(selectItem.value) &&
+          selectItem.value.length > 0
+            ? ''
+            : emptyMessage ?? placeholder
+        "
+        :disabled="disabled"
+        readonly
+        :value="
+          !selectItem.multiple && selectItem.value !== null
+            ? selectItem.label
+            : null
+        "
+        :name="name"
+        :class="[
+          'layui-input',
+          'layui-unselect',
+          { 'layui-disabled': disabled },
+        ]"
+      />
+      <i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
+      <!-- 多选 -->
+      <div
+        v-if="selectItem.multiple && Array.isArray(selectItem.label)"
+        class="layui-multiple-select-row"
+      >
+        <div class="layui-multiple-select-badge">
+          <template v-for="(item, index) in selectItem.label" :key="index">
+            <lay-badge theme="green">
+              <span>{{ item }}</span>
+              <i
+                :class="['layui-icon', { 'layui-icon-close': true }]"
+                v-if="
+                  !disabled &&
+                  !(
+                    Array.isArray(selectItem.value) &&
+                    selectItem.value.length > 0 &&
+                    disabledItemMap[selectItem.value[index]]
+                  )
+                "
+                @click="
+                  removeItemHandle($event, {
+                    label: item,
+                    value: Array.isArray(selectItem.value)
+                      ? selectItem.value[index]
+                      : null,
+                  })
+                "
+              >
+              </i>
+            </lay-badge>
+          </template>
+        </div>
+      </div>
+    </div>
+    <dl class="layui-anim layui-anim-upbit">
+      <!-- 多选不支持空提示 -->
+      <template v-if="!multiple && showEmpty">
+        <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
+      </template>
+      <slot></slot>
+    </dl>
+  </div>
+</template>

src/component/selectOption/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-	name: "LaySelectOption",
+  name: "LaySelectOption",
 };
 </script>
 
@@ -10,74 +10,72 @@ import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
 import { computed, inject, onMounted, Ref } from "vue";
 
 export interface LaySelectOptionProps {
-    value: string | null | undefined;
-    label?: string;
-    disabled?: boolean;
+  value: string | null | undefined;
+  label?: string;
+  disabled?: boolean;
 }
 
-const props = withDefaults(defineProps<LaySelectOptionProps>(),
-	{
-		disabled: false,
-	}
-);
+const props = withDefaults(defineProps<LaySelectOptionProps>(), {
+  disabled: false,
+});
 
 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 const selectItem = inject("selectItem") as Ref<SelectItem>;
 const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
 
 const selectHandle = function () {
-	!props.disabled && callSelectItemHandle(!selected.value);
+  !props.disabled && callSelectItemHandle(!selected.value);
 };
 const callSelectItemHandle = function (isChecked?: boolean) {
-	// console.log("callSelectItemHandle");
-	selectItemHandle(
-		{
-			value: props.value,
-			label: props.label,
-			disabled: props.disabled,
-		},
-		isChecked
-	);
+  // console.log("callSelectItemHandle");
+  selectItemHandle(
+    {
+      value: props.value,
+      label: props.label,
+      disabled: props.disabled,
+    },
+    isChecked
+  );
 };
 const selected = computed({
-	get() {
-		const selectValues = selectItem.value.value;
-		if (Array.isArray(selectValues)) {
-			return (selectValues as any[]).indexOf(props.value) > -1;
-		}
-		return selectItem.value.value === props.value;
-	},
-	set(val) {},
+  get() {
+    const selectValues = selectItem.value.value;
+    if (Array.isArray(selectValues)) {
+      return (selectValues as any[]).indexOf(props.value) > -1;
+    }
+    return selectItem.value.value === props.value;
+  },
+  set(val) {},
 });
 const callSelectItemPush = function () {
-	let item = {
-		value: props.value,
-		label: props.label,
-		disabled: props.disabled,
-	};
-	// @ts-ignore
-	selectItemPush(item);
+  let item = {
+    value: props.value,
+    label: props.label,
+    disabled: props.disabled,
+  };
+  // @ts-ignore
+  selectItemPush(item);
 };
 onMounted(() => {
-	callSelectItemPush();
-	selected.value && callSelectItemHandle();
+  callSelectItemPush();
+  selected.value && callSelectItemHandle();
 });
 </script>
 
 <template>
-	<dd
-		:value="value"
-		:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
-		@click="selectHandle"
-	>
-		<template v-if="selectItem.multiple">
-			<lay-checkbox
-				skin="primary"
-				v-model="selected"
-				@change="selectHandle"
-				label=""
-			/>
-		</template>
-		<slot>{{ label }}</slot>
-	</dd>
-</template>
+  <dd
+    :value="value"
+    :class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
+    @click="selectHandle"
+  >
+    <template v-if="selectItem.multiple">
+      <lay-checkbox
+        skin="primary"
+        v-model="selected"
+        @change="selectHandle"
+        label=""
+      />
+    </template>
+    <slot>{{ label }}</slot>
+  </dd>
+</template>

src/component/side/index.vue

@@ -9,7 +9,7 @@ import { computed, CSSProperties } from "vue";
 import "./index.less";
 
 export interface LaySideProps {
-    width?: string | number;
+  width?: string | number;
 }
 
 const props = withDefaults(defineProps<LaySideProps>(), {

src/component/skeleton/index.less

@@ -1,5 +1,4 @@
 .lay-skeleton {
-  
   .lay-skeleton-item {
     height: 16px;
     border-radius: 5px;

src/component/skeleton/index.ts

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

src/component/skeleton/index.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 export default {
-  name: "LaySkeleton"
-}
+  name: "LaySkeleton",
+};
 </script>
 
 <script setup lang="ts">
-import LaySkeletonItem from '../skeletonItem/index.vue'
-import './index.less'
-import { withDefaults} from "vue";
+import LaySkeletonItem from "../skeletonItem/index.vue";
+import "./index.less";
+import { withDefaults } from "vue";
 
 export interface LaySkeletonProps {
   rows?: number;
@@ -23,19 +23,23 @@ const props = withDefaults(defineProps<LaySkeletonProps>(), {
 </script>
 
 <template>
-  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+  <div
+    :class="['lay-skeleton', animated ? 'lay-skeleton-animated' : '']"
+    v-bind="$attrs"
+  >
     <template v-if="loading">
       <slot name="skeleton">
         <lay-skeleton-item
-            v-for="item in rows"
-            :key="item"
-            :class="[
-              item===1? 'lay-skeleton-first': '',
-              item === rows? 'lay-skeleton-last': '']"
-            type="p"
+          v-for="item in rows"
+          :key="item"
+          :class="[
+            item === 1 ? 'lay-skeleton-first' : '',
+            item === rows ? 'lay-skeleton-last' : '',
+          ]"
+          type="p"
         ></lay-skeleton-item>
       </slot>
     </template>
     <slot v-else></slot>
   </div>
-</template>
+</template>

src/component/skeletonItem/index.ts

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

src/component/skeletonItem/index.vue

@@ -1,25 +1,28 @@
 <script lang="ts">
 export default {
-  name: "LaySkeletonItem"
-}
+  name: "LaySkeletonItem",
+};
 </script>
 
 <script setup lang="ts">
-import { withDefaults} from "vue";
+import { withDefaults } from "vue";
 
 export interface LaySkeletonProps {
-    type?: string;
+  type?: string;
 }
 
 const props = withDefaults(defineProps<LaySkeletonProps>(), {
-  type: 'p',
+  type: "p",
 });
 </script>
 
 <template>
-  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
-    <div v-if="type==='image'" >
+  <div
+    :class="['lay-skeleton-item', `lay-skeleton-type--${type}`]"
+    v-bind="$attrs"
+  >
+    <div v-if="type === 'image'">
       <lay-icon type="layui-icon-picture"></lay-icon>
     </div>
   </div>
-</template>
+</template>

src/component/slider/index.vue

@@ -6,19 +6,25 @@
       class="layui-slider-vrange"
       v-if="range"
     >
-        <lay-tooltip :content="'' + verticalRangeValue[1]" :is-can-hide="tooptipHide">
-            <div
-                :style="{ bottom: verticalRangeValue[1] + '%' }"
-                class="layui-slider-vertical-btn"
-            ></div>
-        </lay-tooltip>
-        <lay-tooltip :content="'' + verticalRangeValue[0]" :is-can-hide="tooptipHide">
-            <div
-                :style="{ bottom: verticalRangeValue[0] + '%' }"
-                class="layui-slider-vertical-btn"
-            ></div>
-        </lay-tooltip>
-        
+      <lay-tooltip
+        :content="'' + verticalRangeValue[1]"
+        :is-can-hide="tooptipHide"
+      >
+        <div
+          :style="{ bottom: verticalRangeValue[1] + '%' }"
+          class="layui-slider-vertical-btn"
+        ></div>
+      </lay-tooltip>
+      <lay-tooltip
+        :content="'' + verticalRangeValue[0]"
+        :is-can-hide="tooptipHide"
+      >
+        <div
+          :style="{ bottom: verticalRangeValue[0] + '%' }"
+          class="layui-slider-vertical-btn"
+        ></div>
+      </lay-tooltip>
+
       <div class="layui-slider-vertical-line"></div>
       <div
         :style="{
@@ -36,7 +42,7 @@
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
       v-else
     >
-      <lay-tooltip :content="modelValue + ''"  :is-can-hide="tooptipHide">
+      <lay-tooltip :content="modelValue + ''" :is-can-hide="tooptipHide">
         <div
           :style="{ bottom: modelValue + '%' }"
           class="layui-slider-vertical-btn"
@@ -59,13 +65,13 @@
       class="layui-slider-srange"
       v-if="range"
     >
-      <lay-tooltip :content="rangeValue[0] + ''"  :is-can-hide="tooptipHide">
+      <lay-tooltip :content="rangeValue[0] + ''" :is-can-hide="tooptipHide">
         <div
           :style="{ left: rangeValue[0] + '%' }"
           class="layui-slider-btn-v"
         ></div>
       </lay-tooltip>
-      <lay-tooltip :content="rangeValue[1] + ''"  :is-can-hide="tooptipHide">
+      <lay-tooltip :content="rangeValue[1] + ''" :is-can-hide="tooptipHide">
         <div
           :style="{ left: rangeValue[1] + '%' }"
           class="layui-slider-btn-v"
@@ -112,15 +118,15 @@ import { on, off } from "evtd";
 import "./index.less";
 
 export interface LaySliderProps {
-    vertical?: boolean;
-    modelValue?: number | Array<number>;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    range?: boolean;
-    verticalrange?: number[];
-    standardrange?: number[];
+  vertical?: boolean;
+  modelValue?: number | Array<number>;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  range?: boolean;
+  verticalrange?: number[];
+  standardrange?: number[];
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -302,7 +308,7 @@ const verticalRangeMove = (e: MouseEvent) => {
   emit("update:modelValue", verticalRangeValue.value);
 };
 
-function moveNeighbors(rate: number, rangeValues: any) { 
+function moveNeighbors(rate: number, rangeValues: any) {
   let d1 = Math.abs(rate - rangeValues.value[0]);
   let d2 = Math.abs(rate - rangeValues.value[1]);
   if (d1 > d2) {
@@ -341,7 +347,7 @@ function calcWithStep(
     }
 
     if (props.step === 0) val.value[idx] = Math.floor(rate);
-    
+
     if (Array.isArray(val.value)) {
       if (r < 0 && props.step !== 0) {
         val.value[idx] -= props.step;
@@ -361,4 +367,4 @@ function cross(val: any) {
     currbtn = currbtn === 0 ? 1 : 0;
   }
 }
-</script>
+</script>

src/component/splitPanel/index.less

@@ -1,4 +1,4 @@
-.lay-split-panel{
+.lay-split-panel {
   height: 100%;
   display: flex;
   position: relative;
@@ -7,12 +7,12 @@
     flex-grow: 1;
     border: 1px #eeeeee solid;
   }
-  .lay-split-panel-item-move{
+  .lay-split-panel-item-move {
     user-select: none;
     pointer-events: none;
     cursor: col-resize;
   }
-  .lay-split-panel-line{
+  .lay-split-panel-line {
     height: 100%;
     width: 3px;
     border: 1px #eeeeee solid;
@@ -22,7 +22,7 @@
     cursor: col-resize;
     display: flex;
     align-items: center;
-    &:before{
+    &:before {
       content: "";
       height: 6px;
       width: 100%;
@@ -33,15 +33,15 @@
   }
 }
 
-.lay-split-panel-vertical{
+.lay-split-panel-vertical {
   flex-direction: column;
   position: relative;
-  .lay-split-panel-item-move{
+  .lay-split-panel-item-move {
     user-select: none;
     pointer-events: none;
     cursor: row-resize;
   }
-  .lay-split-panel-line{
+  .lay-split-panel-line {
     display: flex;
     justify-content: center;
     width: 100%;
@@ -51,7 +51,7 @@
     background-color: #fafafa;
     border-top: none;
     border-bottom: none;
-    &:before{
+    &:before {
       content: "";
       height: 100%;
       width: 6px;
@@ -60,4 +60,4 @@
       border-bottom: none;
     }
   }
-}
+}

src/component/splitPanel/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "laySplitPanel"
-}
+  name: "laySplitPanel",
+};
 </script>
 
 <script setup lang="ts">
@@ -9,8 +9,8 @@ import { ref, watch, provide, withDefaults, onMounted } from "vue";
 import "./index.less";
 
 export interface LayStepProps {
-    vertical?: boolean;
-    minSize?: number;
+  vertical?: boolean;
+  minSize?: number;
 }
 
 const props = withDefaults(defineProps<LayStepProps>(), {

src/component/splitPanelItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LaySplitPanelItem"
-}
+  name: "LaySplitPanelItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -20,7 +20,7 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-    space?: number;
+  space?: number;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {
@@ -98,4 +98,4 @@ onBeforeUnmount(() => {
   >
     <slot></slot>
   </div>
-</template>
+</template>

src/component/step/index.less

@@ -1,111 +1,111 @@
 @width-height-pace: 24px;
 @step-color: @step-success-color;
-@step-fail-color: #FF5722;
-@step-primary-color: #1E9FFF;
-@step-warning-color: #FFB800;
-@step-success-color: #5FB878;
+@step-fail-color: #ff5722;
+@step-primary-color: #1e9fff;
+@step-warning-color: #ffb800;
+@step-success-color: #5fb878;
 
-.lay-step{
+.lay-step {
   display: flex;
   flex-wrap: nowrap;
-  .lay-step-item{
+  .lay-step-item {
     flex-grow: 1;
     position: relative;
   }
 
-  .is-item-center{
+  .is-item-center {
     text-align: center;
   }
 
   .lay-step-item-last {
     flex-grow: 0 !important;
   }
-  .lay-step-item-pace{
+  .lay-step-item-pace {
     cursor: pointer;
     width: @width-height-pace;
     height: @width-height-pace;
-    border: 1px #8D8D8D solid;
+    border: 1px #8d8d8d solid;
     border-radius: 50%;
     text-align: center;
     line-height: @width-height-pace;
-    background: #FFFFFF;
+    background: #ffffff;
   }
-  .is-center{
+  .is-center {
     margin: 0 auto;
   }
-  .lay-step-item-active{
+  .lay-step-item-active {
     border: 1px @step-color solid;
     color: @step-color;
   }
 
-  .lay-step-item-wait{
+  .lay-step-item-wait {
     border: 1px #000000 solid;
     color: #000000;
   }
 
   .lay-step-item--success {
     border: 1px @step-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-color;
   }
 
-  .lay-step-item--fail{
+  .lay-step-item--fail {
     border: 1px @step-fail-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-fail-color;
   }
 
-  .lay-step-item--warning{
+  .lay-step-item--warning {
     border: 1px @step-warning-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-warning-color;
   }
-  .lay-step-item--primary{
+  .lay-step-item--primary {
     border: 1px @step-primary-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-primary-color;
   }
 
   .lay-step-item-success {
     border: 1px @step-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-color;
   }
 
-  .lay-step-item-fail{
+  .lay-step-item-fail {
     border: 1px @step-fail-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-fail-color;
   }
 
-  .lay-step-item-warning{
+  .lay-step-item-warning {
     border: 1px @step-warning-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-warning-color;
   }
-  .lay-step-item-primary{
+  .lay-step-item-primary {
     border: 1px @step-primary-color solid;
-    color: #FFFFFF;
+    color: #ffffff;
     background: @step-primary-color;
   }
 
-  .lay-step-item-content{
-    color: #8D8D8D;
+  .lay-step-item-content {
+    color: #8d8d8d;
     cursor: pointer;
-    .lay-step-item-content-title{
+    .lay-step-item-content-title {
       font-weight: bold;
       font-size: 16px;
     }
   }
 
   .lay-step-item-content-row {
-    color: #8D8D8D;
+    color: #8d8d8d;
     position: absolute;
     top: 5px;
     left: 24px;
-    width: calc( 100% - 26px );
-    .lay-step-item-content-title{
-      word-wrap:break-word;
+    width: calc(100% - 26px);
+    .lay-step-item-content-title {
+      word-wrap: break-word;
       max-width: calc(100% - 8px);
       font-weight: bold;
       display: inline-block;
@@ -116,41 +116,40 @@
     }
   }
 
-  .lay-step-item-content-active{
+  .lay-step-item-content-active {
     color: @step-color;
   }
 
-  .lay-step-item-content--success{
+  .lay-step-item-content--success {
     color: @step-color;
   }
-  .lay-step-item-content--fail{
+  .lay-step-item-content--fail {
     color: @step-fail-color;
   }
-  .lay-step-item-content--warning{
+  .lay-step-item-content--warning {
     color: @step-warning-color;
   }
-  .lay-step-item-content--primary{
+  .lay-step-item-content--primary {
     color: @step-primary-color;
   }
 
-  .lay-step-item-content-wait{
+  .lay-step-item-content-wait {
     color: #000000;
   }
-  .lay-step-item-content-success{
+  .lay-step-item-content-success {
     color: @step-color;
   }
-  .lay-step-item-content-fail{
+  .lay-step-item-content-fail {
     color: @step-fail-color;
   }
-  .lay-step-item-content-warning{
+  .lay-step-item-content-warning {
     color: @step-warning-color;
   }
-  .lay-step-item-content-primary{
+  .lay-step-item-content-primary {
     color: @step-primary-color;
   }
 
-
-  .lay-step-item-line{
+  .lay-step-item-line {
     position: relative;
   }
 
@@ -163,7 +162,7 @@
     display: block;
     height: 1px;
     width: 100%;
-    background: #C9C5C5;
+    background: #c9c5c5;
   }
   .is-line-center:before {
     left: 50%;
@@ -189,7 +188,7 @@
     background: @step-primary-color !important;
   }
 
-  .lay-step-simple{
+  .lay-step-simple {
     height: 30px;
     padding: 0 8px;
     line-height: 30px;
@@ -197,10 +196,10 @@
     background-color: #cecece;
     cursor: pointer;
   }
-  .lay-step-item-simple{
+  .lay-step-item-simple {
     padding: 0 18px;
   }
-  .lay-step-item-simple:after{
+  .lay-step-item-simple:after {
     content: "";
     position: absolute;
     top: 0;
@@ -215,7 +214,7 @@
     height: auto;
     width: auto;
   }
-  .lay-step-item-simple:before{
+  .lay-step-item-simple:before {
     content: "";
     position: absolute;
     top: 0;
@@ -230,7 +229,7 @@
     height: auto;
     width: auto;
   }
-  .lay-step-item-simple-border:before{
+  .lay-step-item-simple-border:before {
     left: 1px;
     border-color: transparent transparent transparent #ffffff;
   }
@@ -250,27 +249,29 @@
   .lay-step-item-simple-primary {
     background-color: @step-primary-color;
   }
-  .lay-step-item-simple-active-border:after{
+  .lay-step-item-simple-active-border:after {
     border-color: transparent transparent transparent #9fd4ae !important;
   }
-  .lay-step-item-simple-success-border:after{
-    border-color: transparent transparent transparent @step-success-color!important;
+  .lay-step-item-simple-success-border:after {
+    border-color: transparent transparent transparent
+      @step-success-color!important;
   }
-  .lay-step-item-simple-fail-border:after{
+  .lay-step-item-simple-fail-border:after {
     border-color: transparent transparent transparent @step-fail-color!important;
   }
-  .lay-step-item-simple-warning-border:after{
-    border-color: transparent transparent transparent @step-warning-color!important;
+  .lay-step-item-simple-warning-border:after {
+    border-color: transparent transparent transparent
+      @step-warning-color!important;
   }
-  .lay-step-item-simple-primary-border:after{
-    border-color: transparent transparent transparent @step-primary-color!important;
+  .lay-step-item-simple-primary-border:after {
+    border-color: transparent transparent transparent
+      @step-primary-color!important;
   }
-
 }
 .lay-step-column {
   height: 100%;
   flex-flow: column;
-  .lay-step-item-line{
+  .lay-step-item-line {
     position: relative;
     height: 100%;
     width: 24px;
@@ -281,16 +282,16 @@
     position: absolute;
     top: 0;
     left: 50%;
-   // transform: translateX(-50%);
+    // transform: translateX(-50%);
     display: block;
     width: 1px;
     height: 100%;
-    background: #C9C5C5;
+    background: #c9c5c5;
   }
-  .lay-step-item-content{
+  .lay-step-item-content {
     margin-left: 8px;
   }
-  .is-vertical{
+  .is-vertical {
     display: flex;
   }
-}
+}

src/component/step/index.vue

@@ -1,26 +1,21 @@
 <script lang="ts">
 export default {
-  name: "LayStep"
-}
+  name: "LayStep",
+};
 </script>
 
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  provide,
-  withDefaults,
-} from "vue";
+import { ref, watch, provide, withDefaults } from "vue";
 import "./index.less";
 
 export interface LayStepProps {
-    active?: number;
-    center?: boolean;
-    direction?: string;
-    space?: string;
-    currentStatus?: string;
-    composition?: string;
-    simple?: boolean;
+  active?: number;
+  center?: boolean;
+  direction?: string;
+  space?: string;
+  currentStatus?: string;
+  composition?: string;
+  simple?: boolean;
 }
 
 const props = withDefaults(defineProps<LayStepProps>(), {

src/component/stepItem/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LayStepItem"
-}
+  name: "LayStepItem",
+};
 </script>
 
 <script setup lang="ts">
@@ -19,10 +19,10 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-    title?: string;
-    content?: string;
-    icon?: string;
-    status?: string;
+  title?: string;
+  content?: string;
+  icon?: string;
+  status?: string;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {
@@ -199,4 +199,4 @@ onBeforeUnmount(() => {
   >
     <slot>{{ index + 1 }}.{{ title }}</slot>
   </div>
-</template>
+</template>

src/component/subMenu/index.vue

@@ -5,7 +5,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, Ref, useSlots, watch } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  ref,
+  Ref,
+  useSlots,
+  watch,
+} from "vue";
 
 export interface LaySubMenuProps {
   id: string;
@@ -36,23 +44,26 @@ const isOpen = computed(() => {
 const layuiNavChild = ref<HTMLElement>();
 const position = ref<String>();
 watch(isOpen, () => {
-  if (isOpen.value && position.value !== 'left-nav') {
+  if (isOpen.value && position.value !== "left-nav") {
     setTimeout(setPosition, 0);
   }
 });
-const setPosition = function() {
+const setPosition = function () {
   if (!isTree || !layuiNavChild.value) {
     return;
   }
   const offsetWidth = layuiNavChild.value.offsetWidth;
-  if (window.innerWidth < layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10) {
-    position.value = 'left-nav';
+  if (
+    window.innerWidth <
+    layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10
+  ) {
+    position.value = "left-nav";
   } else {
-    position.value = '';
+    position.value = "";
   }
-}
-window.addEventListener('resize', setPosition);
-onBeforeUnmount(()=>window.removeEventListener('resize', setPosition));
+};
+window.addEventListener("resize", setPosition);
+onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 </script>
 
 <template>

src/component/switch/interface.ts

@@ -1 +0,0 @@
-

src/component/tab/index.vue

@@ -114,4 +114,4 @@ provide("slotsChange", slotsChange);
       <slot></slot>
     </div>
   </div>
-</template>
+</template>

src/component/tab/interface.ts

@@ -1 +0,0 @@
-

src/component/tabItem/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/tabItem/index.vue

@@ -8,17 +8,14 @@ export default {
 import { withDefaults, inject, Ref } from "vue";
 
 export interface LayTabItemProps {
-    id: string;
-    title: string;
-    closable?: boolean | string;  
+  id: string;
+  title: string;
+  closable?: boolean | string;
 }
 
-const props = withDefaults(
-  defineProps<LayTabItemProps>(),
-  {
-    closable: true,
-  }
-);
+const props = withDefaults(defineProps<LayTabItemProps>(), {
+  closable: true,
+});
 
 const active = inject("active");
 const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;

src/component/table/index.vue

@@ -5,13 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  useSlots,
-  withDefaults,
-  onMounted,
-} from "vue";
+import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
 import { Recordable } from "../../types";
 import { guid } from "../../utils/guidUtil";
 import LayCheckbox from "../checkbox";
@@ -23,25 +17,23 @@ import "./index.less";
 const tableId = guid();
 
 export interface LayTableProps {
-    id?: string;
-    skin?: string;
-    size?: string;
-    page?: Recordable;
-    checkbox?: boolean;
-    columns: Recordable[];
-    dataSource: Recordable[];
-    defaultToolbar?: boolean;
-    selectedKeys?: Recordable[];  
+  id?: string;
+  skin?: string;
+  size?: string;
+  page?: Recordable;
+  checkbox?: boolean;
+  columns: Recordable[];
+  dataSource: Recordable[];
+  defaultToolbar?: boolean;
+  selectedKeys?: Recordable[];
 }
 
-const props = withDefaults(defineProps<LayTableProps>(),
-  {
-    id: "id",
-    size: "md",
-    dataSource: () => [],
-    selectedKeys: () => [],
-  }
-);
+const props = withDefaults(defineProps<LayTableProps>(), {
+  id: "id",
+  size: "md",
+  dataSource: () => [],
+  selectedKeys: () => [],
+});
 
 const emit = defineEmits([
   "change",
@@ -114,11 +106,10 @@ let tableHeader = ref<HTMLElement | null>(null);
 let tableBody = ref<HTMLElement | null>(null);
 
 onMounted(() => {
-  tableBody.value?.addEventListener('scroll', () => {
-    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;  
-  })
-})
-
+  tableBody.value?.addEventListener("scroll", () => {
+    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
+  });
+});
 </script>
 
 <template>
@@ -256,4 +247,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-</template>
+</template>

src/component/table/interface.ts

@@ -1 +1 @@
-import { Recordable } from "../../types";
+import { Recordable } from "../../types";

src/component/textarea/index.vue

@@ -8,10 +8,10 @@ export default {
 import "./index.less";
 
 export interface LayTextareaProps {
-    name?: string;
-    modelValue?: string;
-    placeholder?: string;
-    disabled?: boolean;
+  name?: string;
+  modelValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
 }
 
 const props = defineProps<LayTextareaProps>();

src/component/timelineItem/index.vue

@@ -33,4 +33,4 @@ const props = defineProps<LayTimelineItemProps>();
       <slot></slot>
     </div>
   </li>
-</template>
+</template>

src/component/tooltip/index.vue

@@ -9,7 +9,7 @@ import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "LayTooltip",
   components: {
-    LayPopper
+    LayPopper,
   },
   props: {
     content: {
@@ -33,19 +33,19 @@ export default defineComponent({
       default: true,
     },
   },
-  setup(){
+  setup() {
     const isMounted = ref(false);
     return {
-      isMounted
-    }
+      isMounted,
+    };
   },
   computed: {
-    innerProps(){
-      return {el: this.$el.nextElementSibling, ...this.$props};
-    }
+    innerProps() {
+      return { el: this.$el.nextElementSibling, ...this.$props };
+    },
   },
   mounted() {
-    this.$nextTick(() => this.isMounted = true);
-  }
+    this.$nextTick(() => (this.isMounted = true));
+  },
 });
 </script>

src/component/transfer/index.less

@@ -113,4 +113,4 @@
 .layui-transfer-box {
   display: inline-block;
   vertical-align: middle;
-}
+}

src/component/transfer/interface.ts

@@ -1,2 +1 @@
 import { Recordable } from "../../types";
-

src/component/tree/index.less

@@ -1,4 +1,3 @@
-
 .layui-tree {
   line-height: 22px;
 }
@@ -133,9 +132,9 @@
 }
 
 .layui-tree-spread
-> .layui-tree-entry
-> .layui-tree-iconClick
-> .layui-tree-iconArrow:after {
+  > .layui-tree-entry
+  > .layui-tree-iconClick
+  > .layui-tree-iconArrow:after {
   transform: rotate(90deg) translate(3px, 4px);
 }
 
@@ -177,4 +176,4 @@
 .layui-tree-emptyText {
   text-align: center;
   color: #999;
-}
+}

src/index.ts

@@ -74,9 +74,9 @@ import LayStepItem from "./component/stepItem/index";
 import LaySubMenu from "./component/subMenu/index";
 import LaySplitPanel from "./component/splitPanel/index";
 import LaySplitPanelItem from "./component/splitPanelItem/index";
-import LayException from "./component/exception/index"
-import LayResult from "./component/result/index"
-import LayConfigProvider from "./provider"
+import LayException from "./component/exception/index";
+import LayResult from "./component/result/index";
+import LayConfigProvider from "./provider";
 
 const components: Record<string, Component> = {
   LaySplitPanel,
@@ -149,7 +149,7 @@ const components: Record<string, Component> = {
   LaySubMenu,
   LayException,
   LayResult,
-  LayConfigProvider
+  LayConfigProvider,
 };
 
 const install = (app: App): void => {
@@ -231,9 +231,9 @@ export {
   LaySubMenu,
   LayException,
   LayResult,
-  LayConfigProvider
+  LayConfigProvider,
 };
 
 export { layer, useLayer };
 
-export default { install };
+export default { install };

src/locales/index.ts

@@ -1,13 +1,13 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n } from "vue-i18n";
 import zh_CN from "./zh_CN";
-import en_US from './en_US';
+import en_US from "./en_US";
 
 const i18n = createI18n({
-  locale: 'en_US',
+  locale: "en_US",
   messages: {
     zh_CN: zh_CN,
     en_US: en_US,
   },
-})
+});
 
-export default i18n;
+export default i18n;

src/provider/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/provider/index.vue

@@ -63,7 +63,8 @@ watch(
     locals?.forEach((item: any) => {
       changeLocales(item.name, item.locale, item.merge);
     });
-  }, { immediate: true, deep: true}
+  },
+  { immediate: true, deep: true }
 );
 
 watch(
@@ -85,4 +86,4 @@ watch(
 
 <template>
   <slot></slot>
-</template>
+</template>

src/theme/variable.less

@@ -4,7 +4,7 @@
 
 @global-warm-color: var(--global-warm-color);
 
-@global-danger-color:  var(--global-danger-color);
+@global-danger-color: var(--global-danger-color);
 
 @global-checked-color: var(--global-checked-color);
 
@@ -17,14 +17,13 @@
 @global-back-color: var(--global-back-color);
 
 :root {
-
   --global-primary-color: #009688;
 
   --global-normal-color: #1e9fff;
 
   --global-warm-color: #ffb800;
 
-  --global-danger-color:  #ff5722;
+  --global-danger-color: #ff5722;
 
   --global-checked-color: #5fb878;
 
@@ -35,15 +34,12 @@
   --global-fore-color: #333;
 
   --global-back-color: #ffffff;
-
 }
 
-body[lay-theme='dark'] {
-
+body[lay-theme="dark"] {
   --global-border-color: #d2d2d2;
 
   --global-fore-color: #ffffff;
 
   --global-back-color: #393d49;
-  
 }

src/types/form.ts

@@ -32,4 +32,4 @@ export declare interface FormCallback {
 
 export declare interface FieldValidateError extends ValidateError {
   label?: string;
-}
+}

src/types/select.ts

@@ -12,5 +12,5 @@ export interface SelectItemHandle {
 }
 
 export interface SelectItemPush {
-  (selectItem: SelectItem): void
-}
+  (selectItem: SelectItem): void;
+}

src/utils/domUtil.ts

@@ -3,7 +3,7 @@
  * <p>
  * @param elem dom
  * */
-export function getTop(elem: any) : any {
+export function getTop(elem: any): any {
   return (
     elem.offsetTop + ((elem.offsetParent && getTop(elem.offsetParent)) || 0)
   );
@@ -14,7 +14,7 @@ export function getTop(elem: any) : any {
  * <p>
  * @param elem dom
  * */
-export function getLeft(elem: any) : any {
+export function getLeft(elem: any): any {
   return (
     elem.offsetLeft + ((elem.offsetParent && getLeft(elem.offsetParent)) || 0)
   );

src/utils/guidUtil.ts

@@ -13,5 +13,18 @@ export function S4() {
  * @param null 无参
  * */
 export function guid() {
-  return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+  return (
+    S4() +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    "-" +
+    S4() +
+    S4() +
+    S4()
+  );
 }