@neatui/vue 5.2.1 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.2.1",
+    "@neatui/css": "^5.3.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IFollowView.vue

@@ -67,6 +67,8 @@
     mobile?: boolean;
     title?: string;
     zIndex?: string | number | null;
+    /** 桌面端是否放入浏览器 top layer（Popover API），盖住整页任意层级；移动端底部面板始终放入。 */
+    topLayer?: boolean;
   }
 
   // 入参
@@ -87,6 +89,7 @@
     mobile: true,
     title: '',
     zIndex: undefined,
+    topLayer: true,
   });
 
   const dom: any = ref(null);
@@ -168,12 +171,14 @@
     },
   );
 
-  // 移动端底部面板放入浏览器 top layer（Popover API），无需比较 z-index 即可盖住整页；
-  // 桌面端不加 popover 属性，仍按 Follow 的祖先层级定位。不支持的浏览器退回普通 fixed。
+  // 弹层放入浏览器 top layer（Popover API），无需比较 z-index 即可盖住整页：
+  // 移动端底部面板始终放入；桌面端由 topLayer 控制（默认开启），关闭时按 Follow 的祖先层级定位。
+  // 不支持的浏览器退回普通 fixed。
   const SHEET_LEAVE_MS = 500;
   let sheetTimer: ReturnType<typeof setTimeout> | undefined;
   const supportsPopover = () => typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
   const isSheet = () => props.mobile && window.matchMedia('(max-width: 799px)').matches;
+  const useTopLayer = () => props.topLayer || isSheet();
   const releaseSheet = () => {
     clearTimeout(sheetTimer);
     const el = tip.value;
@@ -183,6 +188,38 @@
     } catch {}
     el.removeAttribute('popover');
   };
+  const openSheet = () => {
+    const el = tip.value;
+    if (!el || !supportsPopover()) return;
+    clearTimeout(sheetTimer);
+    // 不需要 top layer 时主动清理（如关闭动画期间禁用 topLayer 后快速重开）。
+    if (!useTopLayer()) return releaseSheet();
+    el.setAttribute('popover', 'manual');
+    try {
+      // 已打开时先关再开，使其移到 top layer 最上方。
+      if (el.matches(':popover-open')) el.hidePopover();
+      el.showPopover();
+    } catch {
+      el.removeAttribute('popover');
+    }
+  };
+  // 打开状态下跨越断点（如桌面端拖窄窗口）时，同步进入/离开 top layer。
+  let sheetMql: MediaQueryList | null = null;
+  const onSheetMediaChange = () => {
+    if (!state.show) return;
+    if (!useTopLayer()) return releaseSheet();
+    // 已在 top layer 时保持原顺序，避免父面板被重排到子面板之上。
+    if (!tip.value?.matches(':popover-open')) openSheet();
+  };
+  onMounted(() => {
+    sheetMql = window.matchMedia('(max-width: 799px)');
+    sheetMql.addEventListener('change', onSheetMediaChange);
+  });
+  onUnmounted(() => {
+    sheetMql?.removeEventListener('change', onSheetMediaChange);
+  });
+  // 展开期间动态切换 topLayer 时同步。
+  watch(() => props.topLayer, onSheetMediaChange);
   watch(
     () => state.show,
     (show) => {
@@ -190,15 +227,7 @@
       if (!el || !supportsPopover()) return;
       clearTimeout(sheetTimer);
       if (show) {
-        if (!isSheet()) return;
-        el.setAttribute('popover', 'manual');
-        try {
-          // 已打开时先关再开，使其移到 top layer 最上方。
-          if (el.matches(':popover-open')) el.hidePopover();
-          el.showPopover();
-        } catch {
-          el.removeAttribute('popover');
-        }
+        openSheet();
       } else if (el.hasAttribute('popover')) {
         // 等滑出动画结束再离开 top layer。
         sheetTimer = setTimeout(() => {
@@ -378,8 +407,11 @@
         },
         { hideOnScrollOut: false, zIndex: props.zIndex },
       );
-      // 初始即显示（如 modelValue=1）时 state.show 不会再变化，需要立即启动定位。
-      if (state.show) ex.value.listen();
+      // 初始即显示（如 modelValue=1）时 state.show 不会再变化，需要立即启动定位并同步 top layer。
+      if (state.show) {
+        ex.value.listen();
+        openSheet();
+      }
     } else {
       ex.value = null;
     }
@@ -433,8 +465,11 @@
 </script>
 <style lang="scss">
   @use '@neatui/css/query' as neatui;
-  // 抵消 [popover] 的 UA 默认样式；放在媒体查询外，面板打开时切到桌面宽度也不会走样。
-  .fekit-follow-mobile[popover] {
+  // 抵消 [popover] 的 UA 默认样式（桌面与移动端共用）；放在媒体查询外，跨断点时不会走样。
+  [ui-tips-view][popover] {
+    inset: auto;
+    width: auto;
+    height: auto;
     margin: 0;
     padding: 0;
     border: 0;

package/src/components/form/Cascader.vue

@@ -4,7 +4,7 @@
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
       pos="bl"
-      tipBoxClass="ny-sm nx-no"
+      tipBoxClass="ny-sm nx-ss"
     >
       <Input v-model="state.selectd.label" :clearable="false" :disabled="disabled" readonly v-bind="bindProps">
         <template #suffix><i ui-form-select=""></i></template>

package/src/components/form/MoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input
           v-bind="{ placeholder, rules, theme, sz, co, block, ready: true, type: 'text', tips, disabled, readonly, clearable: false, verify, prefix, suffix, interacted }"

package/src/components/form/MoreSelectTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type: 'text', tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         :modelValue="state.label"

package/src/components/form/PageMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
           <template #suffix><i ui-form-select=""></i></template>

package/src/components/form/PageSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>

package/src/components/form/SearchMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd" @click="toggle" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>

package/src/components/form/SearchSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.selectd.label"

package/src/components/form/Select.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.displayLabel"

package/src/components/form/SelectTree/SelectTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.label"