补充部分组件描述

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 在实用价值的前提之下，我们并没有内置过多花俏的动画。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 按钮用于开始一个即时操作。
+:::
+
 ::: title 基础使用
 :::
 
@@ -206,7 +212,7 @@ export default {
 ::: title 按钮容器
 :::
 
-::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
+::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
 
 <template>
   <lay-button-container>

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感。
+:::
+
 ::: title 主色调
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 栅格化系统，是基于行（row）和列（col）来定义区块的外部框架，以保证页面的元素能够稳健地排布起来。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 语义化的矢量图形。使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 通过鼠标或键盘输入内容，是最基础的表单域的包装。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,10 +1,15 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 在需要等待加载内容的位置提供一个占位图形组合。
+:::
+
 ::: title 基础使用
 :::
 
-
 ::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
 
 <template>

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

@@ -4,7 +4,6 @@
 ::: title 基础使用
 :::
 
-
 ::: demo
 
 <template>

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 开关选择器, 需要表示开关状态/两种状态之间的切换时。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -1,6 +1,12 @@
 ::: anchor
 :::
 
+::: title 基本介绍
+:::
+
+::: describe 将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
+:::
+
 ::: title 基础使用
 :::
 

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

@@ -4,13 +4,11 @@
 ```
 npm install @layui/layui-vue --save
 ```
-:::describe 或
+
-:::
 ```
 yarn add @layui/layui-vue --save
 ```
-:::describe 或
+
-:::
 ```
 pnpm install @layui/layui-vue --save
 ```

example/src/plugin/create-describe.ts

@@ -18,7 +18,7 @@ export default function createContainer(
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<p style="margin-left: 24px;margin-bottom:20px;">${info}`
+          return `<p style="padding-left: 30px;padding-top: 20px;padding-bottom: 20px;">${info}`
         } else {
           return '</p>\n'
         }

src/component/avatar/index.vue

@@ -7,11 +7,13 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 
-const props = defineProps<{
+export interface LayAvatarProps {
   src?: String;
   size?: string;
   radius?: boolean;
-}>();
+}
+
+const props = withDefaults(defineProps<LayAvatarProps>(), {});
 </script>
 
 <template>

src/component/backTop/index.vue

@@ -16,11 +16,9 @@ import LayIcon from "../icon/index";
 import "./index.less";
 
 export interface LayBacktopProps {
-  /**通用*/
   target?: string;
   showHeight?: number;
   disabled?: boolean;
-  /**组件样式*/
   position?: "fixed" | "absolute";
   right?: number;
   bottom?: number;
@@ -30,7 +28,6 @@ export interface LayBacktopProps {
   color?: string;
   borderRadius?: number | string;
   circle?: boolean;
-  /**图标样式*/
   icon?: string;
   iconSize?: number;
   iconColor?: string;

src/component/breadcrumb/index.vue

@@ -7,10 +7,11 @@ export default {
 <script setup lang="ts">
 import { provide, withDefaults } from "vue";
 
-const props = withDefaults(
+export interface LayBreadcrumbProps {
-  defineProps<{
     separator?: string;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayBreadcrumbProps>(),
   {
     separator: "/",
   }

src/component/breadcrumbItem/index.vue

@@ -19,11 +19,13 @@ export default {
 <script setup lang="ts">
 import { inject, useSlots } from "vue";
 
+export interface LayBreadcrumbItemProps {
+  title?: string;
+}
+
 const slot = useSlots();
 
-const props = defineProps<{
+const props = defineProps<LayBreadcrumbItemProps>();
-  title?: string;
-}>();
 
 const separator = inject("separator");
 </script>

src/component/card/index.vue

@@ -8,12 +8,12 @@ export default {
 import { useSlots } from "vue";
 import "./index.less";
 
-const slot = useSlots();
-
 export interface LayCardProps {
   title?: string;
 }
 
+const slot = useSlots();
+
 const props = defineProps<LayCardProps>();
 </script>
 

src/component/col/index.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+export interface LayColProps {
   md?: string;
   xs?: string;
   sm?: string;
@@ -16,7 +16,9 @@ const props = defineProps<{
   xsOffset?: string;
   smOffset?: string;
   lgOffset?: string; 
-}>();
+}
+
+const props = defineProps<LayColProps>();
 
 const classes = computed(() => {
   return [

src/component/collapse/index.vue

@@ -12,11 +12,12 @@ import {
   watch,
 } from "vue";
 
-const props = withDefaults(
+export interface LayCollapseProps {
-  defineProps<{
     modelValue?: number | string | [];
     accordion?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayCollapseProps>(),
   {
     modelValue: () => [],
     accordion: false,

src/component/collapseItem/index.vue

@@ -7,12 +7,13 @@ export default {
 <script setup lang="ts">
 import { withDefaults, inject, computed, ref } from "vue";
 
-const props = withDefaults(
+export interface LayCollapseItemProps {
-  defineProps<{
     id: number | string;
     title: string;
     disabled?: boolean;  
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayCollapseItemProps>(),
   {
     disabled: false,
   }

src/component/container/interface.ts

@@ -0,0 +1 @@
+

src/component/countUp/index.vue

@@ -20,7 +20,7 @@ export interface LayCountupProps {
   decimalPlaces?: number; // 小数位数
   useGrouping?: boolean; // 是否使用千位分隔符
   separator?: string; // 千位分隔符
-  useEasing?: boolean;  // 使用动画
+  useEasing?: boolean; // 使用动画
   duration?: number; // 动画持续时间
   prefix?: string; // 前缀
   suffix?: string; // 后缀

src/component/dropdown/index.vue

@@ -8,13 +8,13 @@ export default {
 import { provide, ref, watch } from "vue";
 import { useClickOutside } from "@layui/hooks-vue";
 
-const dropdownRef = ref<null | HTMLElement>(null);
-const isClickOutside = useClickOutside(dropdownRef);
-
 export interface LayDropdownProps {
   trigger?: string;
 }
 
+const dropdownRef = ref<null | HTMLElement>(null);
+const isClickOutside = useClickOutside(dropdownRef);
+
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
 });

src/component/exception/index.vue

@@ -8,9 +8,9 @@ import { useSlots } from "vue";
 import "./index.less";
 
 export interface LayDropdownProps {
-  title?: string,
+  title?: string;
-  status?: '401' | '403' | '404' | '500',
+  status?: "401" | "403" | "404" | "500";
-  describe?: string
+  describe?: string;
 }
 
 const slots = useSlots();

src/component/exception/interface.ts

@@ -0,0 +1 @@
+

src/component/field/index.vue

@@ -9,9 +9,11 @@ import { useSlots } from "vue";
 
 const slot = useSlots();
 
-const props = defineProps<{
+export interface LayFieldProps {
   title?: string;  
-}>();
+}
+
+const props = defineProps<LayFieldProps>();
 </script>
 
 <template>

src/component/form/index.vue

@@ -13,8 +13,7 @@ import {
   modelType,
 } from "../../types/form";
 
-const props = withDefaults(
+export interface LayFormProps {
-  defineProps<{
     model?: modelType;
     required?: boolean;
     rules?: Rule;
@@ -23,7 +22,9 @@ const props = withDefaults(
     requiredErrorMessage?: string;
     validateMessage?: ValidateMessages;
     useCN?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayFormProps>(),
   {
     model: function () {
       return {};

src/component/formItem/index.vue

@@ -31,15 +31,16 @@ import Schema, {
 } from "async-validator";
 import cnValidateMessage from "./cnValidateMessage";
 
-const props = withDefaults(
+export interface LayFormItemProps {
-  defineProps<{
     prop?: string;
     mode?: string;
     label?: string;
     errorMessage?: string;
     rules?: Rule;
     required?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayFormItemProps>(),
   {
     mode: "block",
   }

src/component/line/index.vue

@@ -5,9 +5,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
+export interface LayLineProps {
   theme?: string; 
-}>();
+}
+
+const props = defineProps<LayLineProps>();
 </script>
 
 <template>

src/component/menuItem/index.vue

@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { inject, Ref, useSlots } from "vue";
 
-const slots = useSlots();
+export interface LayMenuItemProps {
-
-const props = defineProps<{
   id: string;
   title?: string; 
-}>();
+}
+
+const slots = useSlots();
+
+const props = defineProps<LayMenuItemProps>();
 
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 

src/component/page/index.vue

@@ -1,68 +1,67 @@
 <script lang="ts">
 export default {
-	name: "LayPage"
+  name: "LayPage",
-}
+};
 </script>
 
 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
 
+export interface LayPageProps {
+  total: number;
+  limit: number;
+  theme?: string;
+  showPage?: boolean | string;
+  showSkip?: boolean | string;
+  showCount?: boolean | string;
+  showLimit?: boolean | string;
+  showInput?: boolean | string;
+  showRefresh?: boolean | string;
+  pages?: number;
+  limits?: number[];
+}
+
 const slots = useSlots();
 
-const props = withDefaults(
+const props = withDefaults(defineProps<LayPageProps>(), {
-	defineProps<{
+  limit: 10,
-		total: number;
+  theme: "green",
-		limit: number;
+  showPage: false,
-		theme?: string;
+  showSkip: false,
-		showPage?: boolean | string;
+  showCount: false,
-		showSkip?: boolean | string;
+  showLimit: true,
-		showCount?: boolean | string;
+  showInput: false,
-		showLimit?: boolean | string;
+  showRefresh: false,
-		showInput?: boolean | string;
+  pages: 10,
-		showRefresh?: boolean | string;
+  limits: () => [10, 20, 30, 40, 50],
-		pages?: number;
+});
-		limits?: number[];
-	}>(),
-	{
-		limit: 10,
-		theme: "green",
-		showPage: false,
-		showSkip: false,
-		showCount: false,
-		showLimit: true,
-		showInput: false,
-		showRefresh: false,
-		pages: 10,
-		limits: () => [10, 20, 30, 40, 50],
-	}
-);
 const limits = ref(props.limits);
 const pages = props.pages / 2;
 const inlimit = computed({
-	get() {
+  get() {
-		return props.limit;
+    return props.limit;
-	},
+  },
-	set(v: number) {
+  set(v: number) {
-		emit("limit", v);
+    emit("limit", v);
-	},
+  },
 });
 const maxPage = ref(0);
 const totalPage = computed(() => {
-	maxPage.value = Math.ceil(props.total / props.limit);
+  maxPage.value = Math.ceil(props.total / props.limit);
-	let r: number[] = [],
+  let r: number[] = [],
-		start =
+    start =
-			maxPage.value <= props.pages
+      maxPage.value <= props.pages
-				? 1
+        ? 1
-				: currentPage.value > pages
+        : currentPage.value > pages
-				? currentPage.value - pages
+        ? currentPage.value - pages
-				: 1;
+        : 1;
-	for (let i = start; ; i++) {
+  for (let i = start; ; i++) {
-		if (r.length >= props.pages || i > maxPage.value) {
+    if (r.length >= props.pages || i > maxPage.value) {
-			break;
+      break;
-		}
+    }
-		r.push(i);
+    r.push(i);
-	}
+  }
-	return r;
+  return r;
 });
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
@@ -70,100 +69,100 @@ const currentPageShow: Ref<number> = ref(currentPage.value);
 const emit = defineEmits(["jump", "limit"]);
 
 const prev = function () {
-	if (currentPage.value === 1) {
+  if (currentPage.value === 1) {
-		return;
+    return;
-	}
+  }
-	currentPage.value--;
+  currentPage.value--;
 };
 
 const next = function () {
-	if (currentPage.value === maxPage.value) {
+  if (currentPage.value === maxPage.value) {
-		return;
+    return;
-	}
+  }
-	currentPage.value++;
+  currentPage.value++;
 };
 
 const jump = function (page: number) {
-	currentPage.value = page;
+  currentPage.value = page;
 };
 
 const jumpPage = function () {
-	currentPage.value = currentPageShow.value;
+  currentPage.value = currentPageShow.value;
 };
 
 watch(inlimit, function () {
-	currentPage.value = 1;
+  currentPage.value = 1;
-	// maxPage.value = Math.ceil(props.total / inlimit.value);
+  // maxPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {
-	currentPageShow.value = currentPage.value;
+  currentPageShow.value = currentPage.value;
-	emit("jump", { current: currentPage.value });
+  emit("jump", { current: currentPage.value });
 });
 </script>
 
 <template>
-	<div class="layui-box layui-laypage layui-laypage-default">
+  <div class="layui-box layui-laypage layui-laypage-default">
-		<span v-if="showCount" class="layui-laypage-count"
+    <span v-if="showCount" class="layui-laypage-count"
-			>共 {{ total }} 条 {{ maxPage }} 页</span
+      >共 {{ total }} 条 {{ maxPage }} 页</span
-		>
+    >
-		<a
+    <a
-			href="javascript:;"
+      href="javascript:;"
-			class="layui-laypage-prev"
+      class="layui-laypage-prev"
-			:class="[currentPage === 1 ? 'layui-disabled' : '']"
+      :class="[currentPage === 1 ? 'layui-disabled' : '']"
-			@click="prev()"
+      @click="prev()"
-		>
+    >
-			<slot v-if="slots.prev" name="prev"></slot>
+      <slot v-if="slots.prev" name="prev"></slot>
-			<template v-else>上一页</template>
+      <template v-else>上一页</template>
-		</a>
+    </a>
-		<template v-if="showPage">
+    <template v-if="showPage">
-			<template v-for="index of totalPage" :key="index">
+      <template v-for="index of totalPage" :key="index">
-				<span v-if="index === currentPage" class="layui-laypage-curr">
+        <span v-if="index === currentPage" class="layui-laypage-curr">
-					<em
+          <em
-						class="layui-laypage-em"
+            class="layui-laypage-em"
-						:class="[theme ? 'layui-bg-' + theme : '']"
+            :class="[theme ? 'layui-bg-' + theme : '']"
-					></em>
+          ></em>
-					<em>{{ index }}</em>
+          <em>{{ index }}</em>
-				</span>
+        </span>
-				<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
-			</template>
+      </template>
-		</template>
+    </template>
 
-		<a
+    <a
-			href="javascript:;"
+      href="javascript:;"
-			class="layui-laypage-next"
+      class="layui-laypage-next"
-			:class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
-			@click="next()"
+      @click="next()"
-		>
+    >
-			<slot v-if="slots.next" name="next"></slot>
+      <slot v-if="slots.next" name="next"></slot>
-			<template v-else>下一页</template>
+      <template v-else>下一页</template>
-		</a>
+    </a>
-		<span v-if="showLimit" class="layui-laypage-limits">
+    <span v-if="showLimit" class="layui-laypage-limits">
-			<select v-model="inlimit">
+      <select v-model="inlimit">
-				<option v-for="val of limits" :key="val" :value="val">
+        <option v-for="val of limits" :key="val" :value="val">
-					{{ val }} 条/页
+          {{ val }} 条/页
-				</option>
+        </option>
-			</select>
+      </select>
-		</span>
+    </span>
-		<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
+    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-			<i class="layui-icon layui-icon-refresh"></i>
+      <i class="layui-icon layui-icon-refresh"></i>
-		</a>
+    </a>
-		<span v-if="showSkip" class="layui-laypage-skip">
+    <span v-if="showSkip" class="layui-laypage-skip">
-			到第
+      到第
-			<input
+      <input
-				v-model="currentPageShow"
+        v-model="currentPageShow"
-				@keypress.enter="jumpPage()"
+        @keypress.enter="jumpPage()"
-				type="number"
+        type="number"
-				class="layui-input layui-input-number"
+        class="layui-input layui-input-number"
-			/>页
+      />页
-			<button
+      <button
-				type="button"
+        type="button"
-				class="layui-laypage-btn"
+        class="layui-laypage-btn"
-				@click="jumpPage()"
+        @click="jumpPage()"
-				:disabled="currentPageShow > maxPage"
+        :disabled="currentPageShow > maxPage"
-			>
+      >
-				确定
+        确定
-			</button>
+      </button>
-		</span>
+    </span>
-	</div>
+  </div>
 </template>

src/component/page/interface.ts

@@ -0,0 +1 @@
+

src/component/popper/index.vue

@@ -30,8 +30,8 @@ import {
   onMounted,
 } from "vue";
 import { on } from "../../utils/domUtil";
-const props = withDefaults(
+
-  defineProps<{
+export interface LayPopperProps {
     el: any;
     content?: string | Number;
     position?: string;
@@ -41,7 +41,9 @@ const props = withDefaults(
     disabled?: boolean;
     visible?: boolean;
     isCanHide?: boolean;
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayPopperProps>(),
   {
     position: 'top',
     isDark: true,

src/component/progress/index.vue

@@ -7,14 +7,16 @@ export default {
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps<{
+export interface LayProgressProps {
   percent: number | string;
   theme?: string;
   color?: string;
   size?: string;
   showText?: boolean;
   text?: string;
-}>();
+}
+
+const props = defineProps<LayProgressProps>();
 
 const styles = computed(() => {
   return [

src/component/radio/index.vue

@@ -5,12 +5,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
+export interface LayRadioProps {
   modelValue: string;
   disabled?: boolean;
   label?: string;
   name: string;
-}>();
+}
+
+const props = defineProps<LayRadioProps>();
 
 const emit = defineEmits(["update:modelValue", "change"]);
 

src/component/select/index.vue

@@ -20,6 +20,16 @@ import {
 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;
+}
+
 const selectRef = ref<null | HTMLElement>(null);
 const isClickOutside = useClickOutside(selectRef);
 
@@ -30,15 +40,7 @@ watch(isClickOutside, () => {
 });
 
 const props = withDefaults(
-	defineProps<{
+	defineProps<LaySelectProps>(),
-		modelValue?: string | number | [] | null;
-		name?: string;
-		placeholder?: string;
-		disabled?: boolean;
-		showEmpty?: boolean;
-		emptyMessage?: string;
-		multiple?: boolean;
-	}>(),
 	{
 		modelValue: null,
 		placeholder: "请选择",

src/component/selectOption/index.vue

@@ -9,12 +9,13 @@ import LayCheckbox from "../checkbox";
 import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
 import { computed, inject, onMounted, Ref } from "vue";
 
-const props = withDefaults(
+export interface LaySelectOptionProps {
-	defineProps<{
+    value: string | null | undefined;
-		value: string | null | undefined;
+    label?: string;
-		label?: string;
+    disabled?: boolean;
-		disabled?: boolean;
+}
-	}>(),
+
+const props = withDefaults(defineProps<LaySelectOptionProps>(),
 	{
 		disabled: false,
 	}

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/skeletonItem/index.vue

@@ -8,7 +8,7 @@ export default {
 import { withDefaults} from "vue";
 
 export interface LaySkeletonProps {
-  type?: string;
+    type?: string;
 }
 
 const props = withDefaults(defineProps<LaySkeletonProps>(), {

src/component/slider/index.vue

@@ -106,20 +106,20 @@ import { Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
-const emit = defineEmits(["update:modelValue"]);
+export interface LaySliderProps {
-
+    vertical?: boolean;
-interface LaySliderProps {
+    modelValue?: number | Array<number>;
-  vertical?: boolean;
+    min?: number;
-  modelValue?: number | Array<number>;
+    max?: number;
-  min?: number;
+    step?: number;
-  max?: number;
+    disabled?: boolean;
-  step?: number;
+    range?: boolean;
-  disabled?: boolean;
+    verticalrange?: number[];
-  range?: boolean;
+    standardrange?: number[];
-  verticalrange?: number[];
-  standardrange?: number[];
 }
 
+const emit = defineEmits(["update:modelValue"]);
+
 const props = withDefaults(defineProps<LaySliderProps>(), {
   vertical: false,
   modelValue: 0,

src/component/splitPanel/index.vue

@@ -8,16 +8,16 @@ export default {
 import { ref, watch, provide, withDefaults, onMounted } from "vue";
 import "./index.less";
 
-// 属性接口定义
 export interface LayStepProps {
-  vertical?: boolean;
+    vertical?: boolean;
-  minSize?: number;
+    minSize?: number;
 }
-// props初始化数据定义
+
 const props = withDefaults(defineProps<LayStepProps>(), {
   vertical: false,
   minSize: 50,
 });
+
 let domEvent = ref();
 let domStatus = ref(false);
 const target = ref();

src/component/splitPanelItem/index.vue

@@ -20,7 +20,7 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-  space?: number;
+    space?: number;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {

src/component/step/index.vue

@@ -14,13 +14,13 @@ import {
 import "./index.less";
 
 export interface LayStepProps {
-  active?: number;
+    active?: number;
-  center?: boolean;
+    center?: boolean;
-  direction?: string;
+    direction?: string;
-  space?: string;
+    space?: string;
-  currentStatus?: string;
+    currentStatus?: string;
-  composition?: string;
+    composition?: string;
-  simple?: boolean;
+    simple?: boolean;
 }
 
 const props = withDefaults(defineProps<LayStepProps>(), {

src/component/stepItem/index.vue

@@ -19,10 +19,10 @@ import {
 import type { ComputedRef } from "vue";
 
 export interface LayStepItemProps {
-  title?: string;
+    title?: string;
-  content?: string;
+    content?: string;
-  icon?: string;
+    icon?: string;
-  status?: string;
+    status?: string;
 }
 
 const props = withDefaults(defineProps<LayStepItemProps>(), {

src/component/subMenu/index.vue

@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { computed, inject, Ref, useSlots } from "vue";
 
-const slots = useSlots();
+export interface LaySubMenuProps {
-
-const props = defineProps<{
   id: string;
   title?: string;
-}>();
+}
+
+const slots = useSlots();
+
+const props = defineProps<LaySubMenuProps>();
 
 const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;

src/component/switch/interface.ts

@@ -0,0 +1 @@
+

src/component/tab/index.vue

@@ -17,6 +17,14 @@ import {
   watch,
 } from "vue";
 
+export interface LayTabProps {
+  type?: string;
+  modelValue: string;
+  allowClose?: boolean;
+  beforeClose?: Function;
+  beforeLeave?: Function;
+}
+
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const childrens: Ref<VNode[]> = ref([]);
@@ -32,13 +40,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   });
 };
 
-const props = defineProps<{
+const props = defineProps<LayTabProps>();
-  type?: string;
-  modelValue: string;
-  allowClose?: boolean;
-  beforeClose?: Function;
-  beforeLeave?: Function;
-}>();
 
 const emit = defineEmits(["update:modelValue", "change", "close"]);
 

src/component/tab/interface.ts

@@ -0,0 +1 @@
+

src/component/tabItem/index.vue

@@ -7,12 +7,14 @@ export default {
 <script setup lang="ts">
 import { withDefaults, inject, Ref } from "vue";
 
-const props = withDefaults(
+export interface LayTabItemProps {
-  defineProps<{
     id: string;
     title: string;
     closable?: boolean | string;  
-  }>(),
+}
+
+const props = withDefaults(
+  defineProps<LayTabItemProps>(),
   {
     closable: true,
   }

src/component/table/index.vue

@@ -22,8 +22,7 @@ import "./index.less";
 
 const tableId = guid();
 
-const props = withDefaults(
+export interface LayTableProps {
-  defineProps<{
     id?: string;
     skin?: string;
     size?: string;
@@ -33,7 +32,9 @@ const props = withDefaults(
     dataSource: Recordable[];
     defaultToolbar?: boolean;
     selectedKeys?: Recordable[];  
-  }>(),
+}
+
+const props = withDefaults(defineProps<LayTableProps>(),
   {
     id: "id",
     size: "md",

src/component/table/interface.ts

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

src/component/textarea/index.vue

@@ -6,10 +6,10 @@ export default {
 
 <script setup lang="ts">
 export interface LayTextareaProps {
-  name?: string;
+    name?: string;
-  modelValue?: string;
+    modelValue?: string;
-  placeholder?: string;
+    placeholder?: string;
-  disabled?: boolean;
+    disabled?: boolean;
 }
 
 const props = defineProps<LayTextareaProps>();

src/component/timelineItem/index.vue

@@ -7,13 +7,13 @@ export default {
 <script setup lang="ts">
 import { useSlots } from "vue";
 
-const slot = useSlots();
-
 export interface LayTimelineItemProps {
   title: string;
   simple?: boolean;
 }
 
+const slot = useSlots();
+
 const props = defineProps<LayTimelineItemProps>();
 </script>
 

src/component/transfer/index.vue

@@ -9,14 +9,14 @@ import "./index.less";
 import { Ref, ref, useSlots, watch } from "vue";
 import { Recordable } from "../../types";
 
-const slot = useSlots();
-
 export interface LayTransferProps {
   id?: string;
   title?: string[];
   dataSource: Recordable[];
 }
 
+const slot = useSlots();
+
 const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
   title: () => ["主列表", "副列表"],

src/component/transfer/interface.ts

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