@neatui/vue 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @neatui/vue 更新记录
 
+## 5.2.1
+
+### IFollowView（移动端底部面板）
+- 面板改为从底部滑入滑出，暗层同步淡入淡出，使用 `cubic-bezier(0.32, 0.72, 0, 1)` 减速曲线；支持“减少动态效果”。
+- 面板通过 Popover API 进入浏览器 top layer，不再依赖 z-index；不支持时回退为普通 fixed。
+- 插槽内容撑满面板宽度，覆盖桌面端写死的宽度。
+- 面板贴底，Home 指示条安全区以面板底色留白（需页面 viewport 设置 `viewport-fit=cover`）。
+- 顶部圆角改为 `0.75em`；上方间距统一由标题栏提供；关闭按钮改用 CSS 图标 `ui-icon="close"`。
+- 移动端样式只作用于本层面板盒子，不再影响插槽内其他 `ui-tips` 结构。
+
+### 依赖
+- CSS 依赖更新为 `@neatui/css@^5.2.1`。
+
 ## 5.2.0
 
 ### Layer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.2.0",
+  "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.0",
+    "@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

@@ -17,14 +17,14 @@
         @click="clickhide"
       >
         <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
-          <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
+          <div ui-hide=">mob" class="mob-follow-tips w-full nx-sl nt-sl nb-ss" ui-flex="row xm">
             <div class="w-xs*s"></div>
             <div>
               <h5 class="bold">{{ title }}</h5>
             </div>
             <div class="w-xs*s" ui-flex="row rm">
               <button ui-btn="@a none s :square" @click="toggle">
-                <i class="icon icon-close"></i>
+                <i ui-icon="close"></i>
               </button>
             </div>
           </div>
@@ -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,6 +171,73 @@
     },
   );
 
+  // 弹层放入浏览器 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;
+    if (!el?.hasAttribute('popover')) return;
+    try {
+      if (el.matches(':popover-open')) el.hidePopover();
+    } 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) => {
+      const el = tip.value;
+      if (!el || !supportsPopover()) return;
+      clearTimeout(sheetTimer);
+      if (show) {
+        openSheet();
+      } else if (el.hasAttribute('popover')) {
+        // 等滑出动画结束再离开 top layer。
+        sheetTimer = setTimeout(() => {
+          if (!state.show) releaseSheet();
+        }, SHEET_LEAVE_MS);
+      }
+    },
+    { flush: 'post' },
+  );
+
   const hovershow = () => {
     if (props.event === 'hover') {
       state.hover = 1;
@@ -337,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;
     }
@@ -361,6 +434,7 @@
     document.removeEventListener('touchend', onTouchEnd);
     document.removeEventListener('touchcancel', onTouchCancel);
     parentChildren?.delete(containsFollow);
+    releaseSheet();
     outsideTouch = null;
     state.show = 0;
 
@@ -391,6 +465,20 @@
 </script>
 <style lang="scss">
   @use '@neatui/css/query' as neatui;
+  // 抵消 [popover] 的 UA 默认样式（桌面与移动端共用）；放在媒体查询外，跨断点时不会走样。
+  [ui-tips-view][popover] {
+    inset: auto;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+  }
   @include neatui.mob {
     .fekit-follow-mobile {
       position: fixed !important;
@@ -404,26 +492,52 @@
       align-content: center !important;
       inset: 0 0 0 0 !important;
 
+      // 底部面板：暗层淡入淡出，面板从底部滑入滑出（iOS 风格减速曲线）。
+      --follow-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
+      background-color: rgba(0, 0, 0, 0);
+      transition: background-color 0.4s var(--follow-sheet-ease);
+
       &[ui-tips-view='1'] {
         background-color: rgba(0, 0, 0, 0.5);
         pointer-events: auto !important;
       }
 
-      &[ui-tips] [ui-tips-box] {
+      &[ui-tips][ui-tips-view='1'] > [ui-tips-box] {
+        transform: translate3d(0, 0, 0) !important;
+      }
+
+      &[ui-tips] > [ui-tips-box] {
         position: relative !important;
 
         width: 100% !important;
-        bottom: env(safe-area-inset-bottom) !important;
+        bottom: 0 !important;
+        // iPhone Home 指示条安全区：面板背景铺到屏幕底边，内容让出安全区。
+        // 用透明下边框而非 padding，避免覆盖各组件 tipBoxClass 的内边距（背景默认绘制到边框下）。
+        border-bottom: env(safe-area-inset-bottom, 0px) solid transparent !important;
         right: unset !important;
         top: unset !important;
         left: unset !important;
-        transform: translate3d(0, 0.5em, 0);
+        border-radius: 0.75em 0.75em 0 0 !important;
+        // 上方间距统一由标题栏提供，忽略各组件 tipBoxClass 的上内边距（如 ny-sm）。
+        padding-top: 0 !important;
+        // 全程不透明，只做位移。
+        opacity: 1 !important;
+        transform: translate3d(0, 100%, 0) !important;
+        transition: transform 0.45s var(--follow-sheet-ease) !important;
+        will-change: transform;
 
         display: flex !important;
         flex-direction: column !important;
         justify-content: flex-end !important;
-        align-items: center !important;
-        align-content: center !important;
+        align-items: stretch !important;
+        align-content: stretch !important;
+
+        // 插槽内容撑满面板宽度，覆盖桌面端写死的宽度（如 w-ml*s）。
+        > * {
+          width: 100% !important;
+          max-width: 100%;
+          box-sizing: border-box;
+        }
 
         [ui-tips-arrow] {
           display: none;
@@ -431,9 +545,15 @@
       }
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      .fekit-follow-mobile,
+      .fekit-follow-mobile[ui-tips] > [ui-tips-box] {
+        transition-duration: 0.01s !important;
+      }
+    }
+
     .mob-follow-tips {
       position: relative;
-      padding-bottom: env(safe-area-inset-bottom, 16px);
       &::before {
         position: absolute;
         content: '';
@@ -442,7 +562,7 @@
         height: 3px;
         border-radius: 1em;
         background-color: var(--co-text-o-ss);
-        top: 5px;
+        top: 6px;
         left: 50%;
         transform: translateX(-50%);
       }

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"