add alpha branch

.gitignore

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

build.all.ts

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

build.es.ts

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

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

@@ -17,7 +17,7 @@ export default {
   setup() {
 
     const openMsg = function() {
-        layer.msg("普通消息", { time: 1000 })
+        layer.msg("普通消息", { time: 100000 })
     }
     return {
         openMsg
@@ -48,7 +48,7 @@ export default {
   setup() {
 
     const openSuccess = function() {
-        layer.msg("成功消息", { icon : 1, time: 1000})
+        layer.msg("成功消息", { icon : 1, time: 100000})
     }
 
     const openFailure = function() {

example/vite.config.ts

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

package.json

@@ -1,12 +1,11 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.5",
+  "version": "0.3.6-alpha.2",
-  "author": "sleeprite",
+  "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "http://layui-vue.pearadmin.com",
-  "module": "lib/layui-vue.es.js",
+  "main": "es/index.js",
-  "main": "lib/layui-vue.umd.js",
   "types": "types/index.d.ts",
   "style": "lib/index.css",
   "keywords": [
@@ -16,16 +15,16 @@
   ],
   "exports": {
     ".": {
-      "import": "./lib/layui-vue.es.js",
+      "import": "./es/index.js"
-      "require": "./lib/layui-vue.umd.js"
     },
-    "./lib/": "./lib/"
+    "./lib/": "./lib/",
+    "./es/": "./es/"
   },
   "scripts": {
-    "dev": "vite",
+    "serve": "vite example",
-    "build": "vite build --emptyOutDir && npm run build:types",
+    "build": "npm run build:all && npm run build:es && npm run build:types && npm run build:example",
-    "build:es": "es use",
+    "build:es": "vite build --emptyOutDir --config ./build.es.ts",
-    "build:umd": "umd use",
+    "build:all": "vite build --emptyOutDir --config ./build.all.ts",
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
@@ -73,7 +72,7 @@
   },
   "files": [
     "lib",
-    "src",
+    "es",
     "types"
   ],
   "browserslist": [

src/component/avatar/index.ts

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

src/component/avatarList/index.ts

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

src/component/backTop/index.ts

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

src/component/badge/index.ts

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

src/component/block/index.ts

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

src/component/body/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/breadcrumb/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/breadcrumb/index.vue

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

src/component/breadcrumbItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayBreadcrumbItem", Component);

src/component/button/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayButton", Component);

src/component/buttonContainer/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayButtonContainer", Component);

src/component/buttonGroup/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayButtonGroup", Component);

src/component/card/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCard ", Component);

src/component/carousel/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCarousel", Component);

src/component/carouselItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCarouselItem", Component);

src/component/checkbox/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCheckbox", Component);

src/component/checkboxGroup/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCheckboxGroup", Component);

src/component/col/index.ts

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

src/component/collapse/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCollapse", Component);

src/component/collapse/index.vue

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

src/component/collapseItem/index.ts

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

src/component/collapseItem/index.vue

@@ -15,7 +15,13 @@
   </div>
 </template>
 
-<script setup name="LayCollapseItem" lang="ts">
+<script lang="ts">
+export default {
+  name:"LayCollapseItem"
+}
+</script>
+
+<script setup lang="ts">
 import { withDefaults, defineProps, inject, computed, ref } from "vue";
 
 const props = withDefaults(

src/component/colorPicker/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayColorPicker", Component);

src/component/container/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayContainer", Component);

src/component/countUp/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayCountUp", Component);

src/component/dropdown/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayDropdown", Component);

src/component/dropdownItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayDropdownItem", Component);

src/component/empty/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayEmpty", Component);

src/component/field/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayField", Component);

src/component/footer/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayFooter", Component);

src/component/form/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/form/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <form class="layui-form" :onsubmit="submit">
-    <slot></slot>
-  </form>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayForm",
@@ -14,11 +8,10 @@ export default {
 import { toRefs, provide, reactive, onMounted } from "vue";
 import { Rule, ValidateError, ValidateMessages } from "async-validator";
 import {
-  layFormKey,
   LayFormItemContext,
   FormCallback,
   modelType,
-} from "../type/form";
+} from "../../types/form";
 
 const props = withDefaults(
   defineProps<{
@@ -150,7 +143,7 @@ const addField = function (item: LayFormItemContext) {
 defineExpose({ validate, clearValidate, reset });
 
 provide(
-  layFormKey,
+  'LayForm',
   reactive({
     formItems,
     addField,
@@ -160,3 +153,9 @@ provide(
   })
 );
 </script>
+
+<template>
+  <form class="layui-form" :onsubmit="submit">
+    <slot></slot>
+  </form>
+</template>

src/component/formItem/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/formItem/index.vue

@@ -1,36 +1,10 @@
-<template>
+<script lang="ts">
-  <div class="layui-form-item" ref="formItemRef">
+export default {
-    <label class="layui-form-label">
+  name: 'LayFormItem'
-      <span
+}
-        v-if="props.prop && isRequired"
+</script>
-        :class="
+
-          ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
+<script setup lang="ts">
-        "
-      >
-        <slot name="required" :props="{ ...props, model: layForm.model }">{{
-          layForm.requiredIcons ? "" : "*"
-        }}</slot>
-      </span>
-      <slot name="label" :props="{ ...props, model: layForm.model }">
-        {{ label }}
-      </slot>
-    </label>
-    <div :class="[mode ? 'layui-input-' + mode : '']">
-      <div ref="slotParent">
-        <slot :props="{ ...props, model: layForm.model }"></slot>
-      </div>
-      <span
-        v-if="errorStatus"
-        :class="[
-          'layui-error-message',
-          { 'layui-error-message-anim': errorStatus },
-        ]"
-        >{{ errorMsg }}</span
-      >
-    </div>
-  </div>
-</template>
-<script setup name="LayFormItem" lang="ts">
 import "./index.less";
 import {
   defineProps,
@@ -44,11 +18,10 @@ import {
   watch,
 } from "vue";
 import {
-  layFormKey,
   LayFormContext,
   LayFormItemContext,
   FieldValidateError,
-} from "../type/form";
+} from "../../types/form";
 import Schema, {
   Rule,
   RuleItem,
@@ -73,7 +46,7 @@ const props = withDefaults(
   }
 );
 
-const layForm = inject(layFormKey, {} as LayFormContext);
+const layForm = inject('LayForm', {} as LayFormContext);
 const formItemRef = ref<HTMLDivElement>();
 const slotParent = ref<HTMLDivElement>();
 
@@ -192,3 +165,36 @@ onMounted(() => {
   }
 });
 </script>
+
+<template>
+  <div class="layui-form-item" ref="formItemRef">
+    <label class="layui-form-label">
+      <span
+        v-if="props.prop && isRequired"
+        :class="
+          ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
+        "
+      >
+        <slot name="required" :props="{ ...props, model: layForm.model }">{{
+          layForm.requiredIcons ? "" : "*"
+        }}</slot>
+      </span>
+      <slot name="label" :props="{ ...props, model: layForm.model }">
+        {{ label }}
+      </slot>
+    </label>
+    <div :class="[mode ? 'layui-input-' + mode : '']">
+      <div ref="slotParent">
+        <slot :props="{ ...props, model: layForm.model }"></slot>
+      </div>
+      <span
+        v-if="errorStatus"
+        :class="[
+          'layui-error-message',
+          { 'layui-error-message-anim': errorStatus },
+        ]"
+        >{{ errorMsg }}</span
+      >
+    </div>
+  </div>
+</template>

src/component/header/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/icon/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import { LayIcon as Component } from "@layui/icons-vue";
-import type { IDefineComponent } from "../type/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayIcon", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/iconPicker/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayIconPicker", Component);

src/component/input/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayInput", Component);

src/component/inputNumber/index.ts

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

src/component/inputNumber/index.vue

@@ -1,45 +1,3 @@
-<template>
-  <div class="layui-input-number" :position="position" :size="size">
-    <lay-button
-      type="primary"
-      size="gl"
-      @mousedown="longDown(subtraction)"
-      @mouseup="cancelLongDown"
-      @blur="cancelLongDown"
-      :disabled="minControl"
-      class="layui-control-btn layui-subtraction-btn"
-    >
-      <lay-icon
-        :type="
-          position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
-        "
-      />
-    </lay-button>
-    <div class="layui-input-number-input">
-      <lay-input
-        v-model="num"
-        :readonly="disabledInput || disabled"
-        type="number"
-        :name="name"
-        @change="inputChange"
-      />
-    </div>
-    <lay-button
-      type="primary"
-      size="gl"
-      @mousedown="longDown(addition)"
-      @mouseup="cancelLongDown"
-      @blur="cancelLongDown"
-      :disabled="maxControl"
-      class="layui-control-btn layui-addition-btn"
-    >
-      <lay-icon
-        :type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
-      />
-    </lay-button>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayInputNumber",
@@ -151,3 +109,45 @@ const isNumber = function (num: any) {
   return /^\d+(\.\d+)?$/.test(num);
 };
 </script>
+
+<template>
+  <div class="layui-input-number" :position="position" :size="size">
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(subtraction)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="minControl"
+      class="layui-control-btn layui-subtraction-btn"
+    >
+      <lay-icon
+        :type="
+          position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
+        "
+      />
+    </lay-button>
+    <div class="layui-input-number-input">
+      <lay-input
+        v-model="num"
+        :readonly="disabledInput || disabled"
+        type="number"
+        :name="name"
+        @change="inputChange"
+      />
+    </div>
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(addition)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="maxControl"
+      class="layui-control-btn layui-addition-btn"
+    >
+      <lay-icon
+        :type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
+      />
+    </lay-button>
+  </div>
+</template>

src/component/layer/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import { LayLayer } from "@layui/layer-vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 LayLayer.install = (app: App) => {
   app.component(LayLayer.name || "LayLayer", LayLayer);

src/component/layout/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/line/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayLine", Component);

src/component/line/index.vue

@@ -2,7 +2,13 @@
   <hr :class="['layui-border-' + theme]" />
 </template>
 
-<script setup name="LayLine" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayLine"
+}
+</script>
+
+<script setup lang="ts">
 import { defineProps } from "vue";
 
 const props = defineProps<{

src/component/logo/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 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, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/logo/index.vue

@@ -4,4 +4,12 @@
   </div>
 </template>
 
-<script setup name="LayLogo" lang="ts"></script>
+<script lang="ts">
+export default {
+  name: "LayLogo"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+</script>

src/component/menu/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayMenu", Component);

src/component/menuItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayMenuItem", Component);

src/component/page/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayPage", Component);

src/component/panel/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayPanel", Component);

src/component/progress/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayProgress", Component);

src/component/radio/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayRadio ", Component);

src/component/rate/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayRate", Component);

src/component/row/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayRow", Component);

src/component/scroll/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayScroll", Component);

src/component/scroll/index.vue

@@ -4,4 +4,12 @@
   </div>
 </template>
 
-<script setup name="LayScroll" lang="ts"></script>
+<script lang="ts">
+export default {
+  name: "LayScroll"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+</script>

src/component/select/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LaySelect", Component);

src/component/selectOption/index.ts

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

src/component/selectOption/index.vue

@@ -24,7 +24,7 @@ export default {
 
 <script setup lang="ts">
 import LayCheckbox from "../checkbox";
-import { SelectItem, SelectItemHandle, SelectItemPush } from "../type";
+import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
 import { computed, defineProps, inject, onMounted, Ref } from "vue";
 
 const props = withDefaults(
@@ -72,6 +72,7 @@ const callSelectItemPush = function () {
 		label: props.label,
 		disabled: props.disabled,
 	};
+	// @ts-ignore
 	selectItemPush(item);
 };
 onMounted(() => {

src/component/side/index.ts

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

src/component/skeleton/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import Component from './index.vue'
-import type { IDefineComponent } from '../type/index'
+import type { IDefineComponent } from '../../types/index'
 
 Component.install = (app: App) => {
     app.component(Component.name || 'LaySkeleton', Component)

src/component/skeletonItem/index.ts

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

src/component/skeletonItem/index.vue

@@ -1,12 +1,10 @@
-<template>
+<script lang="ts">
-  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
+export default {
-    <div v-if="type==='image'" >
+  name: "LaySkeletonItem"
-      <lay-icon type="layui-icon-picture"></lay-icon>
+}
-    </div>
+</script>
-  </div>
-</template>
 
-<script setup name="LaySkeletonItem" lang="ts">
+<script setup lang="ts">
 import { defineProps, withDefaults} from "vue";
 
 export interface LaySkeletonProps {
@@ -16,4 +14,12 @@ export interface LaySkeletonProps {
 const props = withDefaults(defineProps<LaySkeletonProps>(), {
   type: 'p',
 });
-</script>-
+</script>
+
+<template>
+  <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>

src/component/slider/index.ts

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

src/component/slider/index.vue

@@ -1,105 +1,9 @@
-<template>
+<script lang="ts">
-  <div class="layui-slider-vertical" v-if="vertical">
+export default {
-    <div
+  name: "LaySlider"
-      ref="rangetracker2"
+}
-      @mousedown.stop="handle_mousedown"
+</script>
-      class="layui-slider-vrange"
-      v-if="range"
-    >
-      <div
-        :style="{ bottom: verticalRangeValue[1] + '%' }"
-        class="layui-slider-vertical-btn"
-      ></div>
-      <div
-        :style="{ bottom: verticalRangeValue[0] + '%' }"
-        class="layui-slider-vertical-btn"
-      ></div>
-      <div class="layui-slider-vertical-line"></div>
-      <div
-        :style="{
-          height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
-          bottom: verticalRangeValue[0] + '%',
-        }"
-        class="layui-slider-vertical-rate"
-      ></div>
-    </div>
 
-    <div
-      ref="verticaltracker"
-      @mousedown.stop="handle_mousedown"
-      class="layui-slider-vertical-track"
-      :class="[props.disabled ? 'layui-slider-disabled' : '']"
-      v-else
-    >
-      <lay-tooltip :content="modelValue + ''">
-        <div
-          :style="{ bottom: modelValue + '%' }"
-          class="layui-slider-vertical-btn"
-          :class="[props.disabled ? 'layui-slider-disabled' : '']"
-        ></div>
-      </lay-tooltip>
-      <div
-        :style="{ height: modelValue + '%' }"
-        class="layui-slider-vertical-rate"
-        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
-      ></div>
-      <div class="layui-slider-vertical-line"></div>
-    </div>
-  </div>
-
-  <div class="layui-slider-v" v-else>
-    <div
-      @mousedown.stop="handle_mousedown"
-      ref="rangetracker1"
-      class="layui-slider-srange"
-      v-if="range"
-    >
-      <lay-tooltip :content="rangeValue[0] + ''">
-        <div
-          :style="{ left: rangeValue[0] + '%' }"
-          class="layui-slider-btn-v"
-        ></div>
-      </lay-tooltip>
-      <lay-tooltip :content="rangeValue[1]">
-        <div
-          :style="{ left: rangeValue[1] + '%' }"
-          class="layui-slider-btn-v"
-        ></div>
-      </lay-tooltip>
-
-      <div class="layui-slider-line-v"></div>
-      <div
-        :style="{
-          width: rangeValue[1] - rangeValue[0] + '%',
-          left: rangeValue[0] + '%',
-        }"
-        class="layui-slider-rate-v"
-      ></div>
-    </div>
-
-    <div
-      ref="standardtracker"
-      @mousedown.stop="handle_mousedown"
-      class="layui-slider-track-v"
-      :class="[props.disabled ? 'layui-slider-disabled' : '']"
-      v-else
-    >
-      <lay-tooltip :content="modelValue + ''">
-        <div
-          :style="{ left: modelValue + '%' }"
-          class="layui-slider-btn-v"
-          :class="[props.disabled ? 'layui-slider-disabled' : '']"
-        ></div>
-      </lay-tooltip>
-      <div
-        :style="{ width: modelValue + '%' }"
-        class="layui-slider-rate-v"
-        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
-      ></div>
-      <div class="layui-slider-line-v"></div>
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { defineProps, reactive, Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
@@ -303,3 +207,106 @@ function moveNeighbors(rate: number, rangeValues: any) {
   }
 }
 </script>
+
+<template>
+  <div class="layui-slider-vertical" v-if="vertical">
+    <div
+      ref="rangetracker2"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-vrange"
+      v-if="range"
+    >
+      <div
+        :style="{ bottom: verticalRangeValue[1] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
+      <div
+        :style="{ bottom: verticalRangeValue[0] + '%' }"
+        class="layui-slider-vertical-btn"
+      ></div>
+      <div class="layui-slider-vertical-line"></div>
+      <div
+        :style="{
+          height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
+          bottom: verticalRangeValue[0] + '%',
+        }"
+        class="layui-slider-vertical-rate"
+      ></div>
+    </div>
+
+    <div
+      ref="verticaltracker"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-vertical-track"
+      :class="[props.disabled ? 'layui-slider-disabled' : '']"
+      v-else
+    >
+      <lay-tooltip :content="modelValue + ''">
+        <div
+          :style="{ bottom: modelValue + '%' }"
+          class="layui-slider-vertical-btn"
+          :class="[props.disabled ? 'layui-slider-disabled' : '']"
+        ></div>
+      </lay-tooltip>
+      <div
+        :style="{ height: modelValue + '%' }"
+        class="layui-slider-vertical-rate"
+        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
+      ></div>
+      <div class="layui-slider-vertical-line"></div>
+    </div>
+  </div>
+
+  <div class="layui-slider-v" v-else>
+    <div
+      @mousedown.stop="handle_mousedown"
+      ref="rangetracker1"
+      class="layui-slider-srange"
+      v-if="range"
+    >
+      <lay-tooltip :content="rangeValue[0] + ''">
+        <div
+          :style="{ left: rangeValue[0] + '%' }"
+          class="layui-slider-btn-v"
+        ></div>
+      </lay-tooltip>
+      <lay-tooltip :content="rangeValue[1]">
+        <div
+          :style="{ left: rangeValue[1] + '%' }"
+          class="layui-slider-btn-v"
+        ></div>
+      </lay-tooltip>
+
+      <div class="layui-slider-line-v"></div>
+      <div
+        :style="{
+          width: rangeValue[1] - rangeValue[0] + '%',
+          left: rangeValue[0] + '%',
+        }"
+        class="layui-slider-rate-v"
+      ></div>
+    </div>
+
+    <div
+      ref="standardtracker"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-track-v"
+      :class="[props.disabled ? 'layui-slider-disabled' : '']"
+      v-else
+    >
+      <lay-tooltip :content="modelValue + ''">
+        <div
+          :style="{ left: modelValue + '%' }"
+          class="layui-slider-btn-v"
+          :class="[props.disabled ? 'layui-slider-disabled' : '']"
+        ></div>
+      </lay-tooltip>
+      <div
+        :style="{ width: modelValue + '%' }"
+        class="layui-slider-rate-v"
+        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
+      ></div>
+      <div class="layui-slider-line-v"></div>
+    </div>
+  </div>
+</template>

src/component/splitPanel/index.ts

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

src/component/splitPanel/index.vue

@@ -11,7 +11,13 @@
   </div>
 </template>
 
-<script setup name="laySplitPanel" lang="ts">
+<script lang="ts">
+export default {
+  name: "laySplitPanel"
+}
+</script>
+
+<script setup lang="ts">
 import { ref, watch, provide, defineProps, withDefaults, onMounted } from "vue";
 import "./index.less";
 

src/component/splitPanelItem/index.ts

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

src/component/splitPanelItem/index.vue

@@ -21,7 +21,13 @@
   </div>
 </template>
 
-<script setup name="laySplitPanelItem" lang="ts">
+<script lang="ts">
+export default {
+  name: "LaySplitPanelItem"
+}
+</script>
+
+<script setup lang="ts">
 import {
   ref,
   inject,

src/component/step/index.ts

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

src/component/step/index.vue

@@ -1,10 +1,10 @@
-<template>
+<script lang="ts">
-  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+export default {
-    <slot></slot>
+  name: "LayStep"
-  </div>
+}
-</template>
+</script>
 
-<script setup name="layStep" lang="ts">
+<script setup lang="ts">
 import {
   ref,
   watch,
@@ -39,7 +39,7 @@ const steps = ref([]);
 
 const emits = defineEmits(["onChange"]);
 
-const change = (index) => {
+const change = (index: any) => {
   emits("onChange", index - 1);
 };
 
@@ -58,4 +58,8 @@ provide("LayStep", {
 });
 </script>
 
-<style scoped></style>
+<template>
+  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+    <slot></slot>
+  </div>
+</template>

src/component/stepItem/index.ts

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

src/component/stepItem/index.vue

@@ -81,7 +81,13 @@
   </div>
 </template>
 
-<script setup name="LayStepItem" lang="ts">
+<script lang="ts">
+export default {
+  name: "LayStepItem"
+}
+</script>
+
+<script setup lang="ts">
 import {
   ref,
   inject,
@@ -117,7 +123,7 @@ const setIndex = (val: number) => {
   index.value = val;
 };
 
-const onChange = (index) => {
+const onChange = (index: any) => {
   parents.change(index);
 };
 

src/component/subMenu/index.ts

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

src/component/switch/index.ts

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

src/component/tab/index.ts

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

src/component/tab/index.vue

@@ -1,30 +1,3 @@
-<template>
-  <div
-    class="layui-tab"
-    :class="[type ? 'layui-tab-' + type : '']"
-    v-if="active"
-  >
-    <ul class="layui-tab-title">
-      <li
-        v-for="(children, index) in childrens"
-        :key="children"
-        :class="[children.props.id === active ? 'layui-this' : '']"
-        @click.stop="change(children.props.id)"
-      >
-        {{ children.props.title }}
-        <i
-          v-if="allowClose && children.props.closable != false"
-          class="layui-icon layui-icon-close layui-unselect layui-tab-close"
-          @click.stop="close(index, children.props.id)"
-        ></i>
-      </li>
-    </ul>
-    <div class="layui-tab-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayTab",
@@ -114,3 +87,30 @@ watch(slotsChange, function () {
 provide("active", active);
 provide("slotsChange", slotsChange);
 </script>
+
+<template>
+  <div
+    class="layui-tab"
+    :class="[type ? 'layui-tab-' + type : '']"
+    v-if="active"
+  >
+    <ul class="layui-tab-title">
+      <li
+        v-for="(children, index) in childrens"
+        :key="children"
+        :class="[children.props.id === active ? 'layui-this' : '']"
+        @click.stop="change(children.props.id)"
+      >
+        {{ children.props.title }}
+        <i
+          v-if="allowClose && children.props.closable != false"
+          class="layui-icon layui-icon-close layui-unselect layui-tab-close"
+          @click.stop="close(index, children.props.id)"
+        ></i>
+      </li>
+    </ul>
+    <div class="layui-tab-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>

src/component/tabItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayTabItem", Component);

src/component/tabItem/index.vue

@@ -1,16 +1,10 @@
-<template>
-  <div class="layui-tab-item" :class="[active === id ? 'layui-show' : '']">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayTabItem",
 };
 </script>
 
-<script setup name="LayTabItem" lang="ts">
+<script setup lang="ts">
 import { withDefaults, defineProps, inject, Ref } from "vue";
 
 const props = withDefaults(
@@ -28,3 +22,9 @@ const active = inject("active");
 const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
 slotsChange.value = !slotsChange.value;
 </script>
+
+<template>
+  <div class="layui-tab-item" :class="[active === id ? 'layui-show' : '']">
+    <slot></slot>
+  </div>
+</template>

src/component/table/index.less

@@ -0,0 +1,6 @@
+.laytable-cell-checkbox {
+    width: 34px;
+}
+.layui-table-col-special {
+    width: 34px;
+}

src/component/table/index.ts

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

src/component/table/index.vue

@@ -13,8 +13,9 @@ import {
   withDefaults,
   defineEmits,
 } from "vue";
-import { Recordable } from "../type";
+import { Recordable } from "../../types";
 import { guid } from "../../utils/guidUtil";
+import "./index.less";
 
 const tableId = guid();
 
@@ -242,12 +243,3 @@ const print = function () {
     </div>
   </div>
 </template>
-
-<style scoped>
-.laytable-cell-checkbox {
-  width: 34px;
-}
-.layui-table-col-special {
-  width: 34px;
-}
-</style>

src/component/textarea/index.ts

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

src/component/timeline/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayTimeline", Component);

src/component/timelineItem/index.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
+import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
   app.component(Component.name || "LayTimelineItem", Component);

src/component/tooltip/index.ts

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

src/component/tooltip/index.vue

@@ -2,6 +2,7 @@
   <slot></slot>
   <lay-popper v-if="isMounted" v-bind="innerProps"></lay-popper>
 </template>
+
 <script lang="ts">
 import LayPopper from "../popper/index.vue";
 import { defineComponent, ref } from "vue";

src/component/transfer/index.ts

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

src/component/transfer/index.vue

@@ -3,10 +3,11 @@ export default {
   name: "LayTransfer",
 };
 </script>
+
 <script setup lang="ts">
 import "./index.less";
 import { defineProps, Ref, ref, useSlots, watch } from "vue";
-import { Recordable } from "../type";
+import { Recordable } from "../../types";
 
 const slot = useSlots();
 

src/component/tree/index.ts

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

src/component/tree/tree.ts

@@ -1,5 +1,5 @@
 import { OriginalTreeData, StringOrNumber } from "./tree.type";
-import { Nullable } from "../type";
+import { Nullable } from "../../types";
 import { Ref, ref } from "vue";
 
 type CustomKey = string | number;

src/index.ts

@@ -1,5 +1,4 @@
-import type { App } from "vue";
+import type { App, Component } from "vue";
-import type { IDefineComponent, InstallOptions } from "./component/type/index";
 
 import "./theme/index.less";
 import "@layui/layer-vue/lib/index.css";
@@ -75,7 +74,7 @@ import LaySubMenu from "./component/subMenu/index";
 import LaySplitPanel from "./component/splitPanel/index";
 import LaySplitPanelItem from "./component/splitPanelItem/index";
 
-const components: Record<string, IDefineComponent> = {
+const components: Record<string, Component> = {
   LaySplitPanel,
   LaySplitPanelItem,
   LayRadio,
@@ -146,9 +145,7 @@ const components: Record<string, IDefineComponent> = {
   LaySubMenu,
 };
 
-const install = (app: App, options?: InstallOptions): void => {
+const install = (app: App): void => {
-  const _options = options;
-  app.config.globalProperties.$PROOPTIONS = _options;
   for (const key in components) {
     const item = components[key];
     app.component(item.name || key, item);

src/types/form.ts

@@ -4,8 +4,6 @@ import type {
   ValidateMessages,
 } from "async-validator";
 
-export const layFormKey = "LayForm";
-
 export interface LayFormContext {
   model: modelType;
   required?: boolean;