Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

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

@@ -30,27 +30,6 @@ export default {
 
 :::
 
-::: title 主题配置
-:::
-
-<p style="margin-left: 30px">less</p>
-
-```
-@panel-border-color: #eee;
-@panel-border-radius: 2px;
-@panel-fore-color: #333;
-@panel-back-color: #fff;
-```
-
-<p style="margin-left: 30px">css</p>
-
-```
---panel-border-color: #eee;
---panel-border-radius: 2px;
---panel-fore-color: #333;
---panel-back-color: #fff;
-```
-
 ::: title Panel 插槽
 :::
 

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

@@ -11,7 +11,19 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.4.0">
-  <ul> 
+    <ul> 
+      <a name="0-4-5"> </a> 
+      <li> 
+        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <ul>
+          <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
+          <li>[修复] variable 全局变量重复导入的问题</li>
+          <li>[支持] icon 列表复制。</li>
+          <li>[支持] 夜间模式</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-4-4"> </a> 
       <li> 
         <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 

example/src/layouts/Layout.vue

@@ -345,8 +345,8 @@ export default {
   background-color: #f1f1f1!important;
 }
 
-.layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
+.layui-layout-document .layui-header .layui-nav .layui-nav-item  a,
-.layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
+.layui-layout-document .layui-header .layui-nav .layui-nav-item  a:hover {
   color: rgba(0, 0, 0, 0.8);
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.1",
+  "version": "0.4.5-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/avatar/index.vue

@@ -8,12 +8,15 @@ export default {
 import "./index.less";
 
 export interface LayAvatarProps {
-  src?: String;
+  src?: string;
-  size?: string;
+  size?: "xs" | "sm" | "md" | "lg";
   radius?: boolean;
 }
 
-const props = withDefaults(defineProps<LayAvatarProps>(), {});
+const props = withDefaults(defineProps<LayAvatarProps>(), {
+  size: "md",
+  radius: false,
+});
 </script>
 
 <template>

src/component/dropdown/index.vue

@@ -6,25 +6,25 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { provide, ref, watch } from "vue";
+import { provide, ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { DropdownTrigger } from "./interface";
 
 export interface LayDropdownProps {
-  trigger?: string;
+  trigger?: DropdownTrigger;
 }
 
-const dropdownRef = ref<null | HTMLElement>(null);
-
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
 });
 
+const openState = ref(false);
+const dropdownRef = ref<null | HTMLElement>(null);
+
 onClickOutside(dropdownRef, (event) => {
   openState.value = false;
 });
 
-const openState = ref(false);
-
 const open = function () {
   openState.value = true;
 };

src/component/dropdown/interface.ts

@@ -0,0 +1 @@
+export type DropdownTrigger = "click" | "hover";

src/component/empty/index.vue

@@ -5,12 +5,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { withDefaults } from "vue";
 import "./index.less";
+import { withDefaults } from "vue";
+import { String } from "src/types";
 
 export interface LayEmptyProps {
-  description?: string;
+  description?: String;
-  image?: string;
+  image?: String;
 }
 
 const props = withDefaults(defineProps<LayEmptyProps>(), {

src/component/input/index.vue

@@ -6,25 +6,32 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import { useSlots } from "vue";
 import { useI18n } from "vue-i18n";
-import { computed, useSlots } from "vue-demi";
+import { Boolean, String } from "src/types";
 
 const { t } = useI18n();
 const slots = useSlots();
 
 export interface LayInputProps {
-  name?: string;
+  name?: String;
-  type?: string;
+  type?: String;
-  value?: string;
+  value?: String;
-  disabled?: boolean;
+  disabled?: Boolean;
-  modelValue?: string;
+  modelValue?: String;
-  placeholder?: string;
+  placeholder?: String;
-  allowClear?: boolean;
+  allowClear?: Boolean;
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {});
 
-const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
+const emit = defineEmits([
+  "update:modelValue",
+  "input",
+  "change",
+  "focus",
+  "blur",
+]);
 
 const onInput = function (event: InputEvent) {
   const inputElement = event.target as HTMLInputElement;
@@ -32,16 +39,20 @@ const onInput = function (event: InputEvent) {
   emit("input", event);
 };
 
-const onFocus = function (event: FocusEvent) {
+const onClear = () => {
+  emit("update:modelValue", "");
+};
+
+const onFocus = (event: FocusEvent) => {
   emit("focus", event);
 };
 
-const onBlur = function () {
+const onChange = () => {
-  emit("blur");
+  emit("change");
 };
 
-const clear = () => {
+const onBlur = () => {
-  emit("update:modelValue", "");
+  emit("blur");
 };
 </script>
 
@@ -61,12 +72,13 @@ const clear = () => {
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
+      @change="onChange"
     />
     <span class="layui-input-suffix" v-if="slots.suffix">
       <slot name="suffix"></slot>
     </span>
     <span class="layui-input-clear" v-if="allowClear">
-      <lay-icon type="layui-icon-close-fill" @click="clear"></lay-icon>
+      <lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>
     </span>
   </div>
 </template>

src/component/panel/index.less

@@ -19,4 +19,11 @@
   border-color: @panel-border-color;
   background-color: @panel-back-color;
   color: @panel-fore-color;
+  .is-hover-shadow:hover {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  .shadow {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  
 }

src/component/panel/index.vue

@@ -6,10 +6,27 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import { computed } from "vue";
+import { PanelShadow } from "./interface";
+
+export interface LayPanelProps {
+  shadow?: PanelShadow;
+}
+
+const props = withDefaults(defineProps<LayPanelProps>(), {
+  shadow: "always",
+});
+
+const classes = computed(() => {
+  return {
+    shadow: props.shadow === "always",
+    "is-hover-shadow": props.shadow === "hover",
+  };
+});
 </script>
 
 <template>
-  <div class="layui-panel">
+  <div class="layui-panel" :class="classes">
     <slot></slot>
   </div>
 </template>

src/component/panel/interface.ts

@@ -0,0 +1 @@
+export type PanelShadow = "always" | "hover" | "never";

src/component/upload/index.vue

@@ -20,7 +20,7 @@ export interface LayUploadProps {
   field?: string;
   size?: number;
   multiple?: boolean;
-  number: number;
+  number?: number;
   drag?: boolean;
 }