@neatui/vue 5.2.0 → 5.2.1

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.2.1",
   "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.2.1",
     "@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>
@@ -168,6 +168,47 @@
     },
   );
 
+  // 移动端底部面板放入浏览器 top layer（Popover API），无需比较 z-index 即可盖住整页；
+  // 桌面端不加 popover 属性，仍按 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 releaseSheet = () => {
+    clearTimeout(sheetTimer);
+    const el = tip.value;
+    if (!el?.hasAttribute('popover')) return;
+    try {
+      if (el.matches(':popover-open')) el.hidePopover();
+    } catch {}
+    el.removeAttribute('popover');
+  };
+  watch(
+    () => state.show,
+    (show) => {
+      const el = tip.value;
+      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');
+        }
+      } 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;
@@ -361,6 +402,7 @@
     document.removeEventListener('touchend', onTouchEnd);
     document.removeEventListener('touchcancel', onTouchCancel);
     parentChildren?.delete(containsFollow);
+    releaseSheet();
     outsideTouch = null;
     state.show = 0;
 
@@ -391,6 +433,17 @@
 </script>
 <style lang="scss">
   @use '@neatui/css/query' as neatui;
+  // 抵消 [popover] 的 UA 默认样式；放在媒体查询外，面板打开时切到桌面宽度也不会走样。
+  .fekit-follow-mobile[popover] {
+    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 +457,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 +510,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 +527,7 @@
         height: 3px;
         border-radius: 1em;
         background-color: var(--co-text-o-ss);
-        top: 5px;
+        top: 6px;
         left: 50%;
         transform: translateX(-50%);
       }