feat: 新增 empty 组件 image 插槽, 完成部分组件的按需加载

package/component/src/component/button/index.less

@@ -1,27 +1,22 @@
 @import (reference) "../../theme/variable.less";
 
-@button-primary-color: var(--button-primary-color);
-@button-primary-border-color: var(--button-primary-border-color);
-@button-normal-color: var(--button-normal-color);
-@button-normal-border-color: var(--button-normal-border-color);
-@button-warm-color: var(--button-warm-color);
-@button-warm-border-color: var(--button-warm-border-color);
-@button-danger-color: var(--button-danger-color);
-@button-danger-border-color: var(--button-danger-border-color);
-@button-border-radius: var(--button-border-radius);
-@button-border-color: var(--button-border-color);
-
 :root {
-  --button-primary-color: @global-primary-color;
+  --button-primary-text-color: #fff;
-  --button-primary-border-color: @global-primary-color;
+  --button-primary-background-color: var(--global-primary-color);
-  --button-normal-color: @global-normal-color;
+  --button-primary-border-color: var(--global-primary-color);
-  --button-normal-border-color: @global-normal-color;
+  --button-normal-text-color: #fff;
-  --button-warm-color: @global-warm-color;
+  --button-normal-background-color: var(--global-normal-color);
-  --button-warm-border-color: @global-warm-color;
+  --button-normal-border-color: var(--global-normal-color);
-  --button-danger-color: @global-danger-color;
+  --button-warm-text-color: #fff;
-  --button-danger-border-color: @global-danger-color;
+  --button-warm-background-color: var(--global-warm-color);
-  --button-border-radius: @global-border-radius;
+  --button-warm-border-color: var(--global-warm-color);
-  --button-border-color: @global-neutral-color-6;
+  --button-danger-text-color: #fff;
+  --button-danger-background-color: var(--global-danger-color);
+  --button-danger-border-color: var(--global-danger-color);
+  --button-border-radius: var(--global-border-radius);
+  --button-border-color: var(--global-neutral-color-6);
+  --button-background-color: 0 0;
+  --button-text-color: #666;
 }
 
 .layui-btn {
@@ -31,63 +26,47 @@
   font-size: 14px;
   text-align: center;
   white-space: nowrap;
-  border-radius: @button-border-radius;
+  color: var(--button-text-color);
-  border-color: @button-border-color;
+  background: var(--button-background-color);
+  border-radius: var(--button-border-radius);
+  border-color: var(--button-border-color);
   border-width: 1px;
   border-style: solid;
-  background: 0 0;
-  color: #666;
   cursor: pointer;
-}
+  :hover,
-
+  :active {
-.layui-btn:hover,
-.layui-btn:active {
     color: #333;
-}
+  }
-
-.layui-btn + .layui-btn {
-  margin-left: 10px;
-}
-
-.layui-btn-radius {
-  border-radius: 100px;
-}
-
-.layui-btn .layui-icon {
-  padding: 0 2px;
-  vertical-align: middle\9;
-  vertical-align: bottom;
 }
 
 .layui-btn-primary {
-  color: #fff;
+  color: var(--button-primary-text-color);
-  background-color: @button-primary-color;
+  background-color: var(--button-primary-background-color);
-  border-color: @button-primary-border-color;
+  border-color: var(--button-primary-border-color);
 }
 
 .layui-btn-normal {
-  color: #fff;
+  color: var(--button-normal-text-color);
-  background-color: @button-normal-color;
+  background-color: var(--button-normal-background-color);
-  border-color: @button-normal-border-color;
+  border-color: var(--button-normal-border-color);
 }
 
 .layui-btn-warm {
-  color: #fff;
+  color: var(--button-warm-text-color);
-  background-color: @button-warm-color;
+  background-color: var(--button-warm-background-color);
-  border-color: @button-warm-border-color;
+  border-color: var(--button-warm-border-color);
 }
 
 .layui-btn-danger {
-  color: #fff;
+  color: var(--button-danger-text-color);
-  background-color: @button-danger-color;
+  background-color: var(--button-danger-background-color);
-  border-color: @button-danger-border-color;
+  border-color: var(--button-danger-border-color);
 }
 
 .layui-btn-primary:hover,
 .layui-btn-normal:hover,
 .layui-btn-warm:hover,
 .layui-btn-danger:hover {
-  color: #fff;
   opacity: 0.8;
   filter: alpha(opacity=80);
 }
@@ -120,6 +99,10 @@
   width: 100%;
 }
 
+.layui-btn-radius {
+  border-radius: 100px;
+}
+
 .layui-btn-disabled,
 .layui-btn-disabled:active,
 .layui-btn-disabled:hover {
@@ -129,3 +112,13 @@
   cursor: not-allowed !important;
   opacity: 1;
 }
+
+.layui-btn + .layui-btn {
+  margin-left: 10px;
+}
+
+.layui-btn .layui-icon {
+  padding: 0 2px;
+  vertical-align: middle\9;
+  vertical-align: bottom;
+}

package/component/src/component/button/index.vue

@@ -1,3 +1,4 @@
+<!-- done -->
 <script lang="ts">
 export default {
   name: "LayButton",
@@ -9,6 +10,7 @@ import "./index.less";
 import { computed } from "vue";
 import {
   ButtonBorder,
+  ButtonEmits,
   ButtonNativeType,
   ButtonSize,
   ButtonType,
@@ -38,9 +40,9 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
   borderStyle: "soild",
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(ButtonEmits);
 
-const onClick = (event: any) => {
+const onClick = (event: MouseEvent) => {
   if (!props.disabled) {
     emit("click", event);
   }

package/component/src/component/button/interface.ts

@@ -2,3 +2,7 @@ export type ButtonType = "primary" | "normal" | "warm" | "danger";
 export type ButtonSize = "lg" | "sm" | "xs";
 export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
 export type ButtonNativeType = "button" | "submit" | "reset";
+
+export const ButtonEmits = {
+    click: (evt: MouseEvent) => evt instanceof MouseEvent,
+}

package/component/src/component/buttonContainer/index.less

@@ -2,11 +2,13 @@
 
 .layui-btn-container {
   font-size: 0;
-  .layui-btn {
+}
+
+.layui-btn-container .layui-btn {
   margin-right: 10px;
   margin-bottom: 10px;
-  }
+}
-  .layui-btn + .layui-btn {
+
-    margin-left: 0;
+.layui-btn-container .layui-btn + .layui-btn {
-  }
+  margin-left: 0;
 }

package/component/src/component/card/index.less

@@ -1,32 +1,30 @@
 @import (reference) "../../theme/variable.less";
 
-@card-border-radius: var(--card-border-radius);
-@card-fore-color: var(--card-fore-color);
-
 :root {
-  --card-border-radius: @global-border-radius;
+  --card-border-radius: var(--global-border-radius);
-  --card-fore-color: @global-fore-color;
 }
 
 .layui-card {
   margin-bottom: 15px;
-  border-radius: @card-border-radius;
   background-color: #ffffff;
-  .layui-card-header {
+  border-radius: var(--card-border-radius);
+}
+
+.layui-card .layui-card-header {
   height: 42px;
   line-height: 42px;
   padding: 0 15px;
   border-bottom: 1px solid #f6f6f6;
-    color: @card-fore-color;
   font-size: 14px;
-    .layui-card-header-extra {
+}
+
+.layui-card .layui-card-header .layui-card-header-extra {
   float: right;
-    }
+}
-  }
+
-  .layui-card-body {
+.layui-card .layui-card-body {
   padding: 10px 15px;
   line-height: 24px; 
-  }
 }
 
 .layui-card:last-child {

package/component/src/component/container/index.vue

@@ -5,11 +5,12 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import "./index.less";
+import { computed } from "vue";
+import { BooleanOrString } from '../../types';
 
 export interface LayContainerProps {
-  fluid?: boolean | string;
+  fluid?: BooleanOrString;
 }
 
 const props = withDefaults(defineProps<LayContainerProps>(), {

package/component/src/component/empty/index.less

@@ -8,12 +8,11 @@
 }
 
 .layui-empty-image {
-  height: 100px;
   margin-bottom: 8px;
 }
 
 .layui-empty-image img {
-  height: 100%;
+  height: 100px;
   margin: auto;
 }
 

package/component/src/component/empty/index.vue

@@ -6,13 +6,15 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { withDefaults } from "vue";
+import { useSlots, withDefaults } from "vue";
 
 export interface LayEmptyProps {
   description?: string;
   image?: string;
 }
 
+const slots = useSlots();
+
 const props = withDefaults(defineProps<LayEmptyProps>(), {
   description: "暂无数据",
 });
@@ -21,7 +23,8 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
 <template>
   <div class="layui-empty">
     <div class="layui-empty-image">
-      <img class="layui-empty-image-default" src="./index.svg" />
+      <slot v-if="slots.image" name="image"></slot>
+      <img v-else class="layui-empty-image-default" src="./index.svg" />
     </div>
     <div class="layui-empty-description">{{ description }}</div>
     <div class="layui-empty-extra">

package/component/src/component/panel/index.less

@@ -14,10 +14,12 @@
   border-radius: @panel-border-radius;
   border-color: @panel-border-color;
   background-color: #fff;
-  .is-hover-shadow:hover {
+}
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
-  }
+.layui-panel.is-hover-shadow:hover {
-  .shadow {
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
-  } 
+
+.layui-panel.shadow {
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }

package/component/src/component/timeline/index.vue

@@ -9,7 +9,7 @@ import "./index.less";
 import { computed, withDefaults } from "vue";
 
 export interface LayTimelineProps {
-  direction: "horizontal" | "vertical";
+  direction?: "horizontal" | "vertical";
 }
 
 const props = withDefaults(defineProps<LayTimelineProps>(), {

package/component/src/resolver/index.ts

@@ -6,6 +6,44 @@
  * √ layer API
  */
 const matchComponents = [
+  // done
+  {
+    pattern: /^LayButton$/,
+    styleDir: "button",
+  },
+  {
+    pattern: /^LayButtonContainer$/,
+    styleDir: "container",
+  },
+  {
+    pattern: /^LayButtonGroup$/,
+    styleDir: "buttonGroup",
+  },
+  {
+    pattern: /^LayContainer$/,
+    styleDir: "container",
+  },
+  {
+    pattern: /^LayCard$/,
+    styleDir: "card",
+  },
+  {
+    pattern: /^LayPanel$/,
+    styleDir: "panel",
+  },
+  {
+    pattern: /^LayFooter$/,
+    styleDir: "footer",
+  },
+  {
+    pattern: /^LayBody$/,
+    styleDir: "body",
+  }, 
+  {
+    pattern: /^LayEmpty$/,
+    styleDir: "empty",
+  },
+  // ....
   {
     pattern: /^LayAvatarList$/,
     styleDir: "avatar",

package/component/src/theme/index.less

@@ -302,20 +302,16 @@ a cite {
   box-sizing: border-box;
 }
 
-.layui-card-body,
-.layui-card-header,
 .layui-form-label,
 .layui-form-mid,
 .layui-input-block,
 .layui-input-inline,
 .layui-input-wrap,
-.layui-panel,
 .layui-textarea {
   position: relative;
 }
 
-.layui-form-select dl,
+.layui-form-select dl {
-.layui-panel {
   box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }
 
@@ -328,14 +324,6 @@ a cite {
   color: #fff !important;
 }
 
-.layui-panel-window {
-  position: relative;
-  padding: 15px;
-  border-radius: 0;
-  border-top: 5px solid @global-neutral-color-3;
-  background-color: #fff;
-}
-
 .layui-border,
 .layui-border-black,
 .layui-border-blue,

package/document/src/document/zh-CN/components/animation.md

@@ -99,7 +99,7 @@ export default {
 ::: table
 
 | 类名                             | 描述         | 使用                                           |
-| --------------------------------- | ------------ | ---------------------------------------------- |
+| ---------------------------------| ------------ | ---------------------------------------------- |
 | layui-anim-down                  | 顶部往下滑入 | `layui-anim layui-anim-down`                   |
 | layui-anim-downbit               | 微微往下滑入 | `layui-anim layui-anim-downbit`                |
 | layui-anim-up                    | 底部往上滑入 | `layui-anim layui-anim-up`                     |
@@ -111,7 +111,7 @@ export default {
 | layui-anim-fadein                | 渐现         | `layui-anim layui-anim-fadein`                 |
 | layui-anim-fadeout               | 渐隐         | `layui-anim layui-anim-fadeout`                |
 | layui-anim-rotate                | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
-| layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
+| layui-anim-rotate layui-anim-loop| 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
 
 :::
 

package/document/src/document/zh-CN/components/empty.md

@@ -80,6 +80,33 @@ export default {
 
 :::
 
+::: title 图片插槽
+:::
+
+::: demo
+
+<template>
+  <lay-empty description="刷新试试">
+    <template #image>
+      图片
+    </template>
+  </lay-empty>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Empty 属性
 :::
 

package/document/src/document/zh-CN/components/panel.md

@@ -30,6 +30,17 @@ export default {
 
 :::
 
+::: title Panel 属性
+:::
+
+::: table
+
+| 插槽    | 描述     | 类型 | 默认值 | 可选值 |
+| ------- | -------- | ------ | ------ | ----- |
+| shadow | 阴影 | `string`     | `always` | `always`  `hover`  `never` |
+
+:::
+
 ::: title Panel 插槽
 :::