补充部分组件描述

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/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,16 +1,13 @@
 <script lang="ts">
 export default {
-	name: "LayPage"
+  name: "LayPage",
-}
+};
 </script>
 
 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
 
-const slots = useSlots();
+export interface LayPageProps {
-
-const props = withDefaults(
-	defineProps<{
   total: number;
   limit: number;
   theme?: string;
@@ -22,8 +19,11 @@ const props = withDefaults(
   showRefresh?: boolean | string;
   pages?: number;
   limits?: number[];
-	}>(),
+}
-	{
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<LayPageProps>(), {
   limit: 10,
   theme: "green",
   showPage: false,
@@ -34,8 +34,7 @@ const props = withDefaults(
   showRefresh: false,
   pages: 10,
   limits: () => [10, 20, 30, 40, 50],
-	}
+});
-);
 const limits = ref(props.limits);
 const pages = props.pages / 2;
 const inlimit = computed({

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;
     label?: string;
     disabled?: boolean;
-	}>(),
+}
+
+const props = withDefaults(defineProps<LaySelectOptionProps>(),
 	{
 		disabled: false,
 	}

src/component/slider/index.vue

@@ -106,9 +106,7 @@ import { Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
-const emit = defineEmits(["update:modelValue"]);
+export interface LaySliderProps {
-
-interface LaySliderProps {
     vertical?: boolean;
     modelValue?: number | Array<number>;
     min?: number;
@@ -120,6 +118,8 @@ interface LaySliderProps {
     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;
     minSize?: number;
 }
-// props初始化数据定义
+
 const props = withDefaults(defineProps<LayStepProps>(), {
   vertical: false,
   minSize: 50,
 });
+
 let domEvent = ref();
 let domStatus = ref(false);
 const target = ref();

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/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";
+