Merge pull request #802 from vusion/hotfix/fix-3.3.x

修复 bugs
vusion · Feb 4, 2024 · 326a9aa · 326a9aa
2 parents dadece3 + 69ffde0
commit 326a9aa
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 9 deletions.
diff --git a/src/components/m-parent.vue/m-child.vue b/src/components/m-parent.vue/m-child.vue
@@ -45,11 +45,29 @@ export default {
                     return;
                 }
 
-                const index = parentVM.$slots.default ? parentVM.$slots.default.indexOf(this.$vnode) : -1;
-                if (~index)
+                if (!parentVM.$slots.default || !parentVM.$slots.default.length) {
+                    parentVM.itemVMs.push(this);
+                    return;
+                }
+
+                const defaultSlots = parentVM.$slots.default;
+                const currentSlotIndex = defaultSlots.indexOf(this.$vnode);
+                if (currentSlotIndex === -1) {
+                    parentVM.itemVMs.push(this);
+                    return;
+                }
+
+                // 根据 slot.default 位置，进行插入
+                const index = parentVM.itemVMs.findIndex((itemVM) => {
+                    const slotIndex = defaultSlots.indexOf(itemVM.$vnode);
+                    return slotIndex > currentSlotIndex;
+                });
+
+                if (index !== -1) {
                     parentVM.itemVMs.splice(index, 0, this);
-                else
+                } else {
                     parentVM.itemVMs.push(this);
+                }
             });
         !this.groupVM
             && this.$contact(this.$options.groupName, (groupVM) => {

diff --git a/src/components/u-date-picker.vue/index.vue b/src/components/u-date-picker.vue/index.vue
@@ -377,6 +377,7 @@ export default {
 .root {
     display: inline-block;
     position: relative;
+    max-width: 100%; /* 防止表格等小的地方超出区域 */
     width: var(--datepicker-input-width);
 }
 

diff --git a/src/components/u-date-picker.vue/range.vue b/src/components/u-date-picker.vue/range.vue
@@ -412,6 +412,7 @@ export default {
 .root {
     display: inline-block;
     position: relative;
+    max-width: 100%; /* 防止表格等小的地方超出区域 */
     width: var(--datepicker-range-input-width);
 }
 

diff --git a/src/components/u-form.vue/item.vue b/src/components/u-form.vue/item.vue
@@ -279,10 +279,23 @@ export default {
 .root[layout="block"] > .field {
     vertical-align: top;
 }
-.root[layout="center"]{
+.root[layout="center"] {
     display: flex;
     align-items: center;
 }
+
+.root[layout="center"] .label {
+    flex-shrink: 0;
+}
+
+.root[layout="center"] .field {
+    flex: 1;
+}
+
+.root[layout="center"] .wrap {
+    width: 100%;
+}
+
 .root[layout="end"]{
     display: flex;
     align-items: flex-end;

diff --git a/src/components/u-modal.vue/index.vue b/src/components/u-modal.vue/index.vue
@@ -9,7 +9,7 @@
             leave-active-class="animate__animated animate__fadeOutUpSmall animate__fast">
             <div :class="[$style.dialog, $env.VUE_APP_DESIGNER ? $style.pos : null, customClass]" ref="dialog"
                 v-if="currentVisible && animationVisible"
-                :style="{ width: width + 'px' }" :size="size">
+                :style="{ width: width + 'px' }" :size="size" @click.stop="noop">
                 <slot name="inject"></slot>
                 <div :class="$style.head" vusion-slot-name="head" :child-cut-disabled="true" v-if="showHead">
                     <slot name="head">
@@ -184,6 +184,8 @@ export const UModal = {
             if (this.maskClose && !this.$refs.dialog.contains(e.target))
                 this.close();
         },
+        noop() { // 因为dialog 直接用overlay 套了实际额内容，导致只能stop 方式阻止事件冒泡....
+        },
     },
     install(Vue, id) {
         const Ctor = Vue.component(id);

diff --git a/src/components/u-select.vue/index.vue b/src/components/u-select.vue/index.vue
@@ -319,12 +319,18 @@ export default {
     },
     created() {
         this.$watch('selectedVM', (selectedVM, oldVM) => {
-            if (selectedVM && oldVM && selectedVM.currentText === oldVM.currentText)
+            if (selectedVM && oldVM && selectedVM.currentText === oldVM.currentText) {
                 return;
-            if (this.filterable)
-                this.filterText = this.selectedVM ? this.selectedVM.currentText : '';
-            else
+            }
+            if (this.filterable) {
+                if (this.selectedVM) {
+                    this.filterText = this.selectedVM.currentText;
+                }
+                // blur 事件会处理这个未搜索到置空的问题
+                // this.filterText = ? this.selectedVM.currentText : '';
+            } else {
                 this.currentText = this.selectedVM ? this.selectedVM.currentText : '';
+            }
         });
         this.$watch('selectedVMs', (selectedVMs) => {
             this.currentText = selectedVMs

diff --git a/src/components/u-tabs.vue/__tests__/__snapshots__/demo.test.js.snap b/src/components/u-tabs.vue/__tests__/__snapshots__/demo.test.js.snap
@@ -1782,6 +1782,94 @@ exports[`u-tabs.vue Demo-路由 1`] = `
 </div>
 `;
 
+exports[`u-tabs.vue Demo-随机添加测试 1`] = `
+<div appear="square" class="root" item-width="auto" size="normal">
+  <div>
+    <span vusion-slot-name="extra"> </span>
+    <nav>
+      <span></span>
+      <div>
+        <div>
+          <a alignment="center" selected="selected" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab1
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab2
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab3
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab4
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab5
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab6
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab7
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab8
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab9
+            </span>
+          </a>
+          <a alignment="center" target="_self">
+            <span vusion-slot-name="title" vusion-slot-name-edit="title">
+              Tab10
+            </span>
+          </a>
+        </div>
+      </div>
+      <span></span>
+    </nav>
+  </div>
+  <div>
+    <div class="root" style vusion-disabled-selected="true" vusion-slot-name="default">模板内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">样式内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">逻辑内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">模板内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">样式内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">逻辑内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">模板内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">样式内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">逻辑内容
+    </div>
+    <div class="root" style="display: none;" vusion-disabled-selected="true" vusion-slot-name="default">逻辑内容
+    </div>
+  </div>
+</div>
+`;
+
 exports[`u-tabs.vue Demo-默认显示和可关闭 1`] = `
 <div>
   <div appear="square" class="root" item-width="auto" size="normal">

diff --git a/src/components/u-tabs.vue/docs/cases.md b/src/components/u-tabs.vue/docs/cases.md
@@ -1,3 +1,62 @@
+### 随机添加测试
+```vue
+<template>
+    <u-tabs value="1">
+        <u-tab v-if="showArr.includes(1)" value="1" title="Tab1">模板内容</u-tab>
+        <u-tab v-if="showArr.includes(2)" value="2" title="Tab2">样式内容</u-tab>
+        <u-tab v-if="showArr.includes(3)" value="3" title="Tab3">逻辑内容</u-tab>
+        <u-tab v-if="showArr.includes(4)" value="4" title="Tab4">模板内容</u-tab>
+        <u-tab v-if="showArr.includes(5)" value="5" title="Tab5">样式内容</u-tab>
+        <u-tab v-if="showArr.includes(6)" value="6" title="Tab6">逻辑内容</u-tab>
+        <u-tab v-if="showArr.includes(7)" value="7" title="Tab7">模板内容</u-tab>
+        <u-tab v-if="showArr.includes(8)" value="8" title="Tab8">样式内容</u-tab>
+        <u-tab v-if="showArr.includes(9)" value="9" title="Tab9">逻辑内容</u-tab>
+        <u-tab v-if="showArr.includes(10)" value="10" title="Tab10">逻辑内容</u-tab>
+    </u-tabs>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            showArr: [],
+        };
+    },
+    created() {
+        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+        this.addShow(arr);
+    },
+    methods: {
+        addShow(arr) {
+            if (arr.length === 0) {
+                return;
+            }
+            const n = [...arr];
+            let i = Math.floor(Math.random() * n.length);
+            this.showArr.push(n[i]);
+            n.splice(i, 1);
+
+            i = Math.floor(Math.random() * n.length);
+            this.showArr.push(n[i]);
+            n.splice(i, 1);
+
+            i = Math.floor(Math.random() * n.length);
+            this.showArr.push(n[i]);
+            n.splice(i, 1);
+
+            i = Math.floor(Math.random() * n.length);
+            this.showArr.push(n[i]);
+            n.splice(i, 1);
+
+             i = Math.floor(Math.random() * n.length);
+            this.showArr.push(n[i]);
+            n.splice(i, 1);
+            setTimeout(() => this.addShow(n), 0);
+        },
+    },
+};
+</script>
+```
+
 ### 形态
 
 #### text