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

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

@@ -199,6 +199,32 @@ export default {
 
 :::
 
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-button-container>
+      <lay-button type="default" :loading="loading">加载</lay-button>
+      <lay-switch v-model="loading"></lay-switch>
+  </lay-button-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const loading = ref(true)
+
+    return {
+      loading
+    }
+  }
+}
+</script>
+
+:::
+
 | Name   | Description | Accepted Values                          |
 | ------ | ------ | --------------------------------------------- |
 | type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |

docs/docs/zh-CN/components/carousel.md

@@ -1,11 +1,11 @@
 ::: demo
 
 <template>
-  <lay-carousel>
+  <lay-carousel v-model="active">
-    <lay-carousel-item>条目一</lay-carousel-item>
+    <lay-carousel-item id="1">条目一</lay-carousel-item>
-    <lay-carousel-item>条目二</lay-carousel-item>
+    <lay-carousel-item id="2">条目二</lay-carousel-item>
-    <lay-carousel-item>条目三</lay-carousel-item>
+    <lay-carousel-item id="3">条目三</lay-carousel-item>
-    <lay-carousel-item>条目四</lay-carousel-item>
+    <lay-carousel-item id="4">条目四</lay-carousel-item>
   </lay-carousel>
 </template>
 
@@ -15,7 +15,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const active = ref("1")
+
     return {
+      active
     }
   }
 }

docs/docs/zh-CN/components/menu.md

@@ -30,7 +30,9 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu selectedKey="5" :tree="isTree">
+  选中项: {{selectedKey}}
+  打开项: {{openKeys}}
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
     <lay-menu-item title="首页" id="1">
       <template v-slot:title> 
         <router-link to="">无感</router-link>
@@ -53,9 +55,13 @@ export default {
   setup() {
 
     const isTree = ref(true)
+    const selectedKey = ref("5")
+    const openKeys = ref(["7"])
 
     return {
-      isTree
+      isTree,
+      openKeys,
+      selectedKey
     }
   }
 }
@@ -69,7 +75,8 @@ export default {
 
 |             |          |     |
 | ----------- | -------- | --- |
-| selectedKey | 默认选择 | --  |
+| selectedKey (v-model) | 选中项 | --  |
+| openKeys (v-model) | 打开项 | --  |
 
 ::: field menu slots
 

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

@@ -5,8 +5,12 @@
 <template>
     <lay-timeline>
         <lay-timeline-item title="0.1.4">
-          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
+          [新增] button 按钮 loading 属性, 提供 加载 状态。<br>
-          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
+          [新增] tab 选项卡 allow-close 属性，支持 关闭。<br>
+          [新增] tab 选项卡 close change 事件，扩展 tab 动态逻辑。<br>
+          [新增] ClickOutside 工具。<br>
+          [新增] menu 菜单 selectedKey, openKeys 属性。<br>
+          [修复] menu 菜单 layui-this 样式，多 a 标签样式重叠。<br>
         </lay-timeline-item>
         <lay-timeline-item title="0.1.1">
           [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>

src/module/button/index.vue

@@ -10,19 +10,31 @@
       disabled ? 'layui-btn-disabled' : '',
     ]"
   >
-    <slot />
+    <i
+      v-if="loading"
+      class="
+        layui-icon
+        layui-icon-loading-1
+        layui-anim
+        layui-anim-rotate
+        layui-anim-loop
+      "
+    ></i>
+    <slot v-else />
   </button>
 </template>
 
 <script setup name="LayButton" lang="ts">
 import { defineProps } from 'vue'
 
-const props = defineProps<{
+const props =
-  type?: string
+  defineProps<{
-  size?: string
+    type?: string
-  fluid?: boolean
+    size?: string
-  radius?: boolean
+    fluid?: boolean
-  border?: string
+    radius?: boolean
-  disabled?: boolean
+    border?: string
-}>()
+    disabled?: boolean
+    loading?: boolean
+  }>()
 </script>

src/module/carousel/index.vue

@@ -4,39 +4,60 @@
     lay-anim
     lay-indicator="inside"
     lay-arrow="always"
-    :style="{width:width,height:height}"
+    :style="{ width: width, height: height }"
   >
     <div carousel-item>
-      <div> </div>
+      <slot></slot>
-      <div> </div>
-      <div> </div>
-      <div> </div>
-      <div class="layui-this"></div>
     </div>
     <div class="layui-carousel-ind">
       <ul>
-        <li class=""></li>
+        <li
-        <li class=""></li>
+          v-for="ss in slots"
-        <li class=""></li>
+          :key="ss"
-        <li class=""></li>
+          :class="[ss.props.id === modelValue ? 'layui-this' : '']"
-        <li class="layui-this"></li>
+          @click.stop="change(ss.props.id)"
+        ></li>
       </ul>
     </div>
-    <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button
+    <button class="layui-icon layui-carousel-arrow" lay-type="sub" @click="prev"></button
-    ><button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
+    ><button class="layui-icon layui-carousel-arrow" lay-type="add" @click="next"></button>
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
-import { withDefaults, defineProps } from 'vue'
+import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
+
+const slot = useSlots() as any
+const slots = slot.default && slot.default()
 
 const props = withDefaults(
   defineProps<{
-    width: string,
+    width?: string
-    height: string
+    height?: string
+    modelValue: string
   }>(),
   {
     width: '100%',
-    height: '280px'
+    height: '280px',
   }
 )
+
+const active = ref(props.modelValue)
+
+const emit = defineEmits(['update:modelValue','change','close'])
+
+const change = function (id: any) {
+  emit('update:modelValue', id)
+  emit('change', id)
+  active.value = id
+}
+
+provide('active', active)
+
+const prev = function() {
+    console.log("上一页")
+}
+
+const next = function() {
+    console.log("下一页")
+}
 </script>

src/module/carouselItem/index.vue

@@ -1,9 +1,16 @@
 <template>
-    <li class="layui-this">
+  <li :class="[active === id ? 'layui-this' : '']">
-        <slot></slot>
+    <slot></slot>
-    </li>
+  </li>
 </template>
-<script setup name="LayCarousel" lang="ts">
+<script setup name="LayCarouselItem" lang="ts">
-import { withDefaults, defineProps } from 'vue'
+import { defineProps, inject } from 'vue'
+
+const props =
+  defineProps<{
+    id: string
+  }>()
+
+const active = inject('active')
 
 </script>

src/module/dropdown/index.vue

@@ -2,6 +2,7 @@
   <div
     v-if="trigger === 'click'"
     class="layui-dropdown"
+    ref="dropdownRef"
     :class="[openState ? 'layui-dropdown-up' : '']"
   >
     <div @click="open">
@@ -30,7 +31,10 @@
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps, ref, watch } from 'vue'
+import useClickOutside from '../use/useClickOutside'
+
+const dropdownRef = ref<null | HTMLElement>(null)
 
 const props = withDefaults(
   defineProps<{
@@ -46,4 +50,13 @@ const openState = ref(false)
 const open = function () {
   openState.value = !openState.value
 }
+// 控制点击事件
+const isClickOutside = useClickOutside(dropdownRef)
+
+// 通过 watch 去监听事件的变化
+watch(isClickOutside, () => {
+  if (isClickOutside.value) {
+    openState.value = false
+  }
+})
 </script>

src/module/menu/index.vue

@@ -5,22 +5,38 @@
 </template>
 
 <script setup name="LayMenu" lang="ts">
-import { defineProps, provide, ref } from 'vue'
+import { defineProps, provide, ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
     selectedKey?: string
+    openKeys?: string[]
     tree?: boolean
   }>(),
   {
     selectedKey: '',
+    openKeys: function() {
+      return []
+    },
     tree: false,
   }
 )
 
 const isTree = ref(props.tree)
-const selectKey = ref(props.selectedKey)
+const selectedKey = ref(props.selectedKey)
+const openKeys = ref([...props.openKeys])
 
 provide('isTree', isTree)
-provide('selectKey', selectKey)
+provide('selectedKey', selectedKey)
+provide('openKeys',openKeys)
+
+const emit = defineEmits(['update:selectedKey','update:openKeys'])
+
+watch(selectedKey, function(val) {
+  emit('update:selectedKey',val)
+})
+
+watch(openKeys, function(val) {
+  emit('update:openKeys',val)
+},{deep : true})
 </script>

src/module/menuChildItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
+  <dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
     <slot v-if="slots.title" name="title"></slot>
     <a v-else href="javascript:void(0)">
       {{title}}
@@ -18,9 +18,9 @@ const props =
     title: string
   }>()
 
-const selectKey: Ref<string> = inject('selectKey') as Ref<string>
+const selectedKey: Ref<string> = inject('selectedKey') as Ref<string>
 
 const selectHandle = function () {
-  selectKey.value = props.id
+  selectedKey.value = props.id
 }
 </script>

src/module/menuItem/index.vue

@@ -2,7 +2,7 @@
   <li
     v-if="slots.default"
     class="layui-nav-item"
-    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
   >
     <a href="javascript:void(0)" @click="openHandle">
       {{ title }}
@@ -11,7 +11,7 @@
     <dl
       class="layui-nav-child"
       :class="[
-        isOpen && !isTree ? 'layui-show' : '',
+        openKeys.includes(id) && !isTree ? 'layui-show' : '',
         !isTree ? 'layui-anim layui-anim-upbit' : '',
       ]"
     >
@@ -22,7 +22,7 @@
   <li
     v-else
     class="layui-nav-item"
-    :class="[selectKey === id ? 'layui-this' : '']"
+    :class="[selectedKey === id ? 'layui-this' : '']"
     @click="selectHandle()"
   >
     <slot v-if="slots.title" name="title"></slot>
@@ -42,16 +42,20 @@ const props =
     title: string
   }>()
 
-const isOpen = ref(false)
-
 const isTree = inject('isTree')
-const selectKey: Ref<string> = inject('selectKey') as Ref<string>
+const selectedKey: Ref<string> = inject('selectedKey') as Ref<string>
+const openKeys: Ref<string[]> = inject('openKeys') as Ref<string[]>
 
 const openHandle = function () {
-  isOpen.value = !isOpen.value
+
+  if(openKeys.value.includes(props.id))  {
+      openKeys.value.splice(openKeys.value.indexOf(props.id),1)
+  } else {
+      openKeys.value.push(props.id)
+  }
 }
 
 const selectHandle = function () {
-  selectKey.value = props.id
+  selectedKey.value = props.id
 }
 </script>

src/module/use/useClickOutside.ts

@@ -0,0 +1,29 @@
+import { ref, onMounted, onUnmounted, Ref } from 'vue'
+
+const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
+
+  // 设置一个导出值
+  const isClickOutside = ref(false);
+  
+  // 给界面绑定上事件
+  const handler = (e: MouseEvent) => {
+    if (elementRef.value) {
+      // e.target 有可能是为 null 所以需要断言
+      if (elementRef.value.contains(e.target as HTMLElement)) {
+        // 判断目标节点是不是当前的节点
+        isClickOutside.value = false;
+      } else {
+        isClickOutside.value = true
+      }
+    }
+  }
+  onMounted(() => {
+    document.addEventListener('click', handler);
+  });
+  onUnmounted(() => {
+    document.removeEventListener('click', handler);
+  });
+  return isClickOutside;
+}
+
+export default useClickOutside;