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

src/css/layui.css

@@ -2610,16 +2610,24 @@ body .layui-table-tips .layui-layer-content {
   display: none;
   position: absolute;
   left: 0;
-  top: 42px;
+  top: 38px;
   z-index: 899;
   min-width: 100%;
-  border: 1px solid #eee;
   max-height: 360px;
   overflow-y: auto;
   background-color: #fff;
-  border-radius: 4px;
   box-sizing: border-box;
 }
+.layui-dropdown dl::before{
+  content: ' ';
+  display: block;
+  height: 4px;
+  width: 100%;
+}
+.layui-dropdown dl>.layui-dropdown-menu{
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
 
 .layui-dropdown-up dl {
   display: block;

src/module/checkbox/index.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 
-<script setup name="LayCheckbox" lang="ts">
+<script setup lang="ts">
 import { computed, defineProps, inject } from "vue";
 import "./index.less";
 
@@ -108,4 +108,4 @@ const handleClick = function () {
       <i class="layui-icon layui-icon-ok" />
     </div>
   </span>
-</template>
+</template>

src/module/dropdown/index.vue

@@ -1,3 +1,49 @@
+<script lang="ts">
+export default {
+  name: "LayDropdown"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps, 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 props = withDefaults(defineProps<LayDropdownProps>(),{
+    trigger: 'click',
+})
+
+const openState = ref(false)
+
+const open = function () {
+  openState.value = true
+}
+
+const hide = function () {
+  openState.value = false
+}
+
+const toggle = function () {
+  openState.value = !openState.value
+}
+
+watch(isClickOutside, () => {
+  if (isClickOutside.value) {
+    openState.value = false
+  }
+})
+
+provide('openState', openState)
+
+defineExpose({ open, hide, toggle });
+</script>
+
 <template>
   <div
     v-if="trigger === 'click'"
@@ -30,43 +76,4 @@
       </ul>
     </dl>
   </div>
-</template>
-
-<script setup name="LaySelect" lang="ts">
-import { defineProps, provide, ref, watch } from 'vue'
-import { useClickOutside } from '@layui/hooks-vue'
-
-const dropdownRef = ref<null | HTMLElement>(null)
-const isClickOutside = useClickOutside(dropdownRef)
-
-const props = withDefaults(
-  defineProps<{
-    trigger?: string
-  }>(),
-  {
-    trigger: 'click',
-  }
-)
-
-const openState = ref(false)
-
-const open = function () {
-  openState.value = true
-}
-
-const hide = function () {
-  openState.value = false
-}
-
-const toggle = function () {
-  openState.value = !openState.value
-}
-
-watch(isClickOutside, () => {
-  if (isClickOutside.value) {
-    openState.value = false
-  }
-})
-
-provide('openState', openState)
-</script>
+</template>

src/module/iconPicker/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <lay-dropdown>
+  <lay-dropdown ref="dropdownRef">
     <div
       class="
         layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
@@ -85,17 +85,18 @@
 import { defineProps, Ref, ref } from 'vue'
 import { LayIconList as icons } from "@layui/icons-vue"
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    page?: boolean
+export interface LayIconPickerProps {
+    page?: boolean,
+    modelValue?: string,
     showSearch?: boolean
-  }>(),
-  {
+}
+
+const props = withDefaults(defineProps<LayIconPickerProps>(),{
     modelValue: 'layui-icon-face-smile',
     page: false,
-  }
-)
+})
+
+const dropdownRef = ref<null | HTMLElement>(null);
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -104,6 +105,8 @@ const selectedIcon: Ref<string> = ref(props.modelValue as string)
 const selectIcon = function (icon: string) {
   emit('update:modelValue', icon)
   selectedIcon.value = icon
+  // @ts-ignore
+  dropdownRef.value.hide()
 }
 
 const icones: Ref = ref([])

src/module/popper/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <transition v-show="visible">
+    <transition v-show="innerVisible">
         <div ref="popper" :class="['layui-popper', {'layui-dark' : innnerIsDark}]" :style="style" :position="innnerPosition">
             <slot>{{content.value}}</slot>
             <div class="layui-popper-arrow"></div>
@@ -21,18 +21,19 @@
     const props = withDefaults(
         defineProps<{
             el : any,
-            content ?: Ref<string>,
+            content ?: Ref<string|Number>,
             position ?: Ref<string>,
             trigger ?: string,
             enterable ?: boolean,
             isDark ?: Ref<boolean>,
             disabled ?: Ref<boolean>,
-            modelValue ?: boolean
+            visible ?: Ref<boolean>,
+            isCanHide ?: Ref<boolean>,
+            updateVisible ?: Function
         }>(),
         {
             enterable : true,
-            trigger : 'hover',
-            modelValue : true
+            trigger : 'hover'
         }
     );
 
@@ -53,31 +54,32 @@
     const innnerPosition = ref(tempPosition.value);
     const innnerIsDark = ref(props.isDark??true);
     const innnerDisabled = ref(props.disabled??false);
-    const visible = ref(props.modelValue && !innnerDisabled.value);
+    const innerVisible = ref(props.visible??true);
 
-    const emit = defineEmits(['update:modelValue'])
-    watch(visible, (val)=>{
-        emit('update:modelValue', val);
-        val && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+    watch(innerVisible, (val)=>{
+        invokeShowPosistion();
+        props.updateVisible && props.updateVisible(val);
     })
     watch(innnerDisabled, (val)=>{
-        visible.value = false;
+        innerVisible.value = false;
     })
     watch(()=>props.content?.value, (val)=>{
-        visible.value && setTimeout(showPosistion, 5);
+        innerVisible.value && invokeShowPosistion();
     })
 
     const doShow = function(){
         if (!innnerDisabled.value) {
-            visible.value = true;
+            innerVisible.value = true;
         }
     }
 
     const doHidden = function(e : MouseEvent){
         if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target as Node))) return;
-        style.value = {top: (-window.innerHeight) + 'px',left:0};
+        // style.value = {top: (-window.innerHeight) + 'px',left:0};
         // popper.value.remove();
-        visible.value = false;
+        if (props.isCanHide?.value !== false) {
+            innerVisible.value = false;
+        }
         innnerPosition.value = tempPosition.value;
     }
 
@@ -90,7 +92,14 @@
     const showPosistion = function(){
         postionFns[tempPosition.value] && (style.value = postionFns[tempPosition.value](props.el, popper.value, innnerPosition));
     }
+    const invokeShowPosistion = function(){
+        if (innerVisible.value) {
+            popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion();
+            // 延时确保计算位置正确
+            setTimeout(()=>innerVisible.value && showPosistion(), 2);
+        };
+    }
     onMounted(()=>{
-        visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+        invokeShowPosistion();
     })
 </script>

src/module/popper/usePopper.ts

@@ -1,4 +1,4 @@
-import { h, ref, render, watchEffect} from "vue";
+import { h, ref, render, watchEffect, watch} from "vue";
 import popper from "./index.vue";
 import { once } from "../../tools/domUtil";
 const EVENT_MAP : any = {
@@ -14,11 +14,20 @@ const usePopper = {
             for (const key in props) {
                 _props[key] = ref(props[key]);
             }
+            _props.updateVisible = function(val:boolean) {
+                _props.visible && (_props.visible.value = val);
+            }
             _this.renderPopper(_props);
             watchEffect(() => {
                 for (const key in _props) {
+                    if (key === 'visible') {
+                        continue;
+                    }
                     _props[key].value = props[key];
                 }
+            });
+            watch(() => props.visible, (val: boolean)=> {
+                _props.updateVisible(val);
             })
         })
     },

src/module/tooltip/index.vue

@@ -5,7 +5,7 @@ export default defineComponent({
   name: "LayTooltip",
   props: {
     content: {
-      type: String,
+      type: [Number, String],
       required: true,
     },
     position: {
@@ -19,6 +19,14 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    isCanHide: {
+      type: Boolean,
+      default: true
     }
   },
   render() {

src/module/transfer/index.vue

@@ -44,7 +44,7 @@ const allLeftChange = function (checked: any) {
 
 watch(
   leftSelectedKeys,
-  function () {
+  () => {
     if (
       leftDataSource.value.length === leftSelectedKeys.value.length &&
       leftDataSource.value.length != 0
@@ -70,7 +70,7 @@ const allRightChange = function (checked: any) {
 
 watch(
   rightSelectedKeys,
-  function () {
+  () => {
     if (
       rightDataSource.value.length === rightSelectedKeys.value.length &&
       rightDataSource.value.length != 0

src/module/tree/TreeNode.vue

@@ -113,11 +113,12 @@ function handleTitleClick(node: TreeData) {
         </span>
         <LayCheckbox
           v-if="showCheckbox"
-          v-model:checked="node.isChecked.value"
+          :modelValue="node.isChecked.value"
           :disabled="node.isDisabled.value"
           skin="primary"
+          label=""
           @change="
-            ({ checked }) => {
+            (checked) => {
               handleChange(checked, node)
             }
           "

src/module/tree/tree.ts

@@ -135,6 +135,7 @@ class Tree {
   setChildrenChecked(checked: boolean, nodes: TreeData[]) {
     const len = nodes.length
     for (let i = 0; i < len; i++) {
+      console.log(nodes[i], checked);
       nodes[i].isChecked.value = checked
       nodes[i].children &&
         nodes[i].children.length > 0 &&
@@ -167,6 +168,7 @@ class Tree {
     if (node.children) {
       this.setChildrenChecked(checked, node.children)
     }
+    console.log(this.getData());
   }
 
   getData() {

src/module/tree/useTree.ts

@@ -29,6 +29,7 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
 
   const nodeList = computed(() => {
     const nodes = tree.getData()
+    console.log(nodes);
     return nodes
   })