@truenewx/tnxvue3 3.4.7 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.4.7",
+  "version": "3.5.0",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "type": "module",
@@ -31,7 +31,7 @@
     "vue-router": "~5.1.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.4.5",
+    "@truenewx/tnxcore": "3.5.0",
     "bootstrap": "5.3.8",
     "cash-dom": "8.1.5",
     "mitt": "3.0.1"

package/src/components/ScrollView.vue

@@ -43,7 +43,7 @@ export default {
 
 .scroll-view-x {
     width: 100%;
-    min-height: 100%;
+    height: 100%;
     overflow-x: auto;
     overflow-y: visible;
     -webkit-overflow-scrolling: touch;

package/src/tdesign/mobile/dialog/Dialog.vue

@@ -1,9 +1,10 @@
 <template>
     <t-dialog
-        class="tnxtdm-dialog"
+        :class="['tnxtdm-dialog', dialogDomClass]"
         v-model:visible="visible"
         :title="title"
         :width="width"
+        :style="{height: height}"
         :close-on-overlay-click="options['close-on-overlay-click']"
         :close-btn="!buttons?.length"
         :destroy-on-close="true"
@@ -26,6 +27,7 @@
 
 <script>
 import DialogContent from './DialogContent.vue';
+import {updatePopupDomZIndex} from '../popup/popupZIndex';
 
 export default {
     name: 'TnxtdmDialog',
@@ -44,14 +46,13 @@ export default {
         contentProps: Object,
         buttons: Array,
         theme: String,
-        width: {
-            type: [Number, String],
-            default: '100%',
-        },
+        width: [Number, String],
+        height: String,
     },
     emits: ['update:modelValue', 'shown', 'closed'],
     data() {
         return {
+            dialogDomClass: `tnxtdm-dialog-${this.id}`,
             visible: this.modelValue,
             options: {
                 modal: true,
@@ -69,10 +70,16 @@ export default {
         },
         visible(val) {
             this.$emit('update:modelValue', val);
+            if (val) {
+                this.updateZIndex();
+            }
         }
     },
     mounted() {
         this.$nextTick(() => {
+            if (this.visible) {
+                this.updateZIndex();
+            }
             if (this.$refs.content && !this.$refs.content.close) {
                 this.$refs.content.close = () => {
                     this.close();
@@ -87,6 +94,15 @@ export default {
         });
     },
     methods: {
+        updateZIndex() {
+            this.$nextTick(() => {
+                window.requestAnimationFrame(() => {
+                    const dialogElement = document.body.querySelector(`.${this.dialogDomClass}`);
+                    const popupElement = dialogElement ? dialogElement.closest('.t-popup') : null;
+                    updatePopupDomZIndex(popupElement);
+                });
+            });
+        },
         btnClick(index) {
             const button = this.buttons[index];
             if (button) {
@@ -152,28 +168,46 @@ export default {
 
 <style>
 .tnxtdm-dialog {
+    --td-dialog-width: calc(var(--max-page-width) - 48px);
+    max-height: calc(100vh - 48px);
+}
 
-    &.t-dialog__wrapper.t-popup--center {
-        width: calc(100% - 48px);
-        max-width: calc(var(--max-page-width) - 48px);
-    }
+.tnxtdm-dialog .t-dialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
 
-    .t-dialog__content {
-        padding-top: 1rem;
-    }
+.tnxtdm-dialog .t-dialog .t-dialog__content {
+    flex: 1;
+    min-height: 0;
+    max-height: 100%;
+}
 
-    .t-dialog__close-btn {
-        right: 12px;
-    }
+.tnxtdm-dialog .t-dialog .t-dialog__content .t-dialog__body {
+    flex: 1;
+    min-height: 0;
+}
 
-    .t-dialog__footer {
-        padding: 12px 24px;
+.tnxtdm-dialog .t-dialog .t-dialog__content .t-dialog__body .t-dialog__body-text {
+    height: 100%;
+    max-height: 100%;
+}
 
-        .tnxtdm-dialog-footer {
-            padding: 12px 0;
-            width: 100%;
-        }
-    }
+.tnxtdm-dialog.t-dialog__wrapper.t-popup--center {
+    max-width: var(--max-page-width);
+}
+
+.tnxtdm-dialog .t-dialog__close-btn {
+    right: 12px;
+}
+
+.tnxtdm-dialog .t-dialog__footer {
+    padding: 12px 24px;
+}
 
+.tnxtdm-dialog .t-dialog__footer .tnxtdm-dialog-footer {
+    padding: 12px 0;
+    width: 100%;
 }
 </style>

package/src/tdesign/mobile/popup/Popup.vue

@@ -1,7 +1,7 @@
 <template>
     <slot name="trigger" :show="open" :visible="visible"></slot>
     <t-popup
-        class="tnxtdm-popup"
+        :class="['tnxtdm-popup', popupDomClass]"
         v-model="visible"
         :placement="placement"
         :destroy-on-close="true"
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import {updatePopupDomZIndex} from './popupZIndex';
+
 export default {
     name: 'TnxtdmPopup',
     props: {
@@ -41,6 +43,7 @@ export default {
     },
     data() {
         return {
+            popupDomClass: `tnxtdm-popup-${window.tnx.util.string.uuid32()}`,
             visible: false,
         }
     },
@@ -50,6 +53,9 @@ export default {
         },
         visible(val) {
             this.$emit('update:modelValue', val);
+            if (val) {
+                this.updateZIndex();
+            }
         },
     },
     emits: ['update:modelValue', 'close'],
@@ -57,6 +63,14 @@ export default {
         this.visible = this.modelValue;
     },
     methods: {
+        updateZIndex() {
+            this.$nextTick(() => {
+                window.requestAnimationFrame(() => {
+                    const popupElement = document.body.querySelector(`.${this.popupDomClass}`);
+                    updatePopupDomZIndex(popupElement);
+                });
+            });
+        },
         open() {
             this.visible = true;
         },
@@ -71,9 +85,14 @@ export default {
 <style>
 .tnxtdm-popup {
     border-radius: 12px 12px 0 0;
+    width: 100%;
+    max-width: var(--max-page-width);
     max-height: 80vh;
     display: flex;
     flex-direction: column;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
 }
 
 .tnxtdm-popup .tnxtdm-popup-header {

package/src/tdesign/mobile/popup/popupZIndex.js

@@ -0,0 +1,52 @@
+function getElementZIndex(element) {
+    if (!element) {
+        return 0;
+    }
+    const zIndex = parseInt(window.getComputedStyle(element).zIndex, 10);
+    if (isNaN(zIndex)) {
+        return 0;
+    }
+    return zIndex;
+}
+
+function getTopBodyChildZIndex(excludeElements = []) {
+    const excludeSet = new Set(excludeElements.filter(Boolean));
+    let maxZIndex = 0;
+
+    Array.from(document.body.children).forEach((element) => {
+        if (excludeSet.has(element)) {
+            return;
+        }
+        const zIndex = getElementZIndex(element);
+        if (zIndex > maxZIndex) {
+            maxZIndex = zIndex;
+        }
+    });
+
+    return maxZIndex;
+}
+
+function findOverlayElement(contentElement) {
+    let element = contentElement ? contentElement.previousElementSibling : null;
+    while (element) {
+        if (element.classList && element.classList.contains('t-overlay')) {
+            return element;
+        }
+        element = element.previousElementSibling;
+    }
+    return null;
+}
+
+export function updatePopupDomZIndex(contentElement) {
+    if (!contentElement || !document.body.contains(contentElement)) {
+        return;
+    }
+
+    const overlayElement = findOverlayElement(contentElement);
+    const maxZIndex = getTopBodyChildZIndex([contentElement, overlayElement]);
+
+    if (overlayElement) {
+        overlayElement.style.zIndex = String(maxZIndex + 1);
+    }
+    contentElement.style.zIndex = String(maxZIndex + 2);
+}

package/src/tdesign/mobile/tnxtdm.css

@@ -68,8 +68,18 @@
     font-size: 14px;
 }
 
-.t-dialog__body,
-.t-drawer__sidebar {
+.t-dialog__content {
+    padding: 0;
+}
+
+.t-dialog__header {
+    padding: 1rem 0 0;
+}
+
+.t-dialog__body {
+    margin-top: 1rem;
+    padding-left: 20px;
+    padding-right: 20px;
     overflow-y: auto;
 }
 
@@ -77,6 +87,10 @@
     margin-top: 1rem;
 }
 
+.t-drawer__sidebar {
+    overflow-y: auto;
+}
+
 .t-drawer__sidebar-item-icon {
     display: flex;
     align-items: center;
@@ -87,6 +101,10 @@
     padding-right: 0;
 }
 
+.t-popup {
+    z-index: 1001;
+}
+
 .t-popover__wrapper {
     display: flex;
     align-items: center;

package/src/tdesign/mobile/tnxtdm.ts

@@ -109,6 +109,8 @@ export default class TnxTdm extends TnxTd {
             contentProps: contentProps,
             buttons: buttons,
             theme: options.theme,
+            width: options.width,
+            height: options.height,
         });
         const dialog = dialogVm.mount(containerSelector) as ModalComponentInstance;
         dialog.options = Object.assign(dialog.options || {}, options);

package/src/tnxvue-router.ts

@@ -11,7 +11,6 @@ import {
     RouteLocationNormalized,
     RouteLocationNormalizedLoaded,
     RouteLocationNormalizedLoadedGeneric,
-    NavigationGuardNext,
 } from 'vue-router';
 import * as NetUtil from '../../tnxcore/src/util/net.ts';
 
@@ -160,8 +159,7 @@ export default function (items: RouteItem[], useHashHistory = true, fnImportPage
         router.$beforeLeaveHandlers[path] = handler;
     };
 
-    router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext): void => {
-        let allow = true;
+    router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded) => {
         let beforeLeaveHandler = router.$beforeLeaveHandlers[from.path];
         if (!beforeLeaveHandler) {
             let toItem = findItemByPath(null, items, to.path);
@@ -177,20 +175,7 @@ export default function (items: RouteItem[], useHashHistory = true, fnImportPage
             }
         }
         if (beforeLeaveHandler) {
-            let result = beforeLeaveHandler(to);
-            if (result instanceof Promise) {
-                result.then((allowed: boolean): void => {
-                    if (allowed) {
-                        next();
-                    }
-                });
-                return;
-            } else if (result === false) {
-                allow = false;
-            }
-        }
-        if (allow) {
-            next();
+            return beforeLeaveHandler(to);
         }
     });
 

package/src/tnxvue.ts

@@ -28,7 +28,8 @@ export type DialogOptions = {
     click?: boolean | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined);
     buttonText?: string | string[];
     buttons?: ButtonOptions[];
-    width?: number | string;
+    width?: string | number;
+    height?: string;
 }
 
 export type OpenType = 'alert' | 'confirm' | 'close' | 'none';

package/src/vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue';
-
-    const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-    export default component;
-}