@neatui/vue 5.5.2 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.5.2",
+  "version": "5.6.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.5.2",
+    "@neatui/css": "^5.6.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

@@ -16,14 +16,23 @@
         @mouseout="tipHover(0)"
         @click="clickhide"
       >
-        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
-          <div ui-hide=">mob" class="mob-follow-tips w-full nx-sl nt-sl nb-ss" ui-flex="row xm">
+        <div
+          ref="box"
+          :ui-tips-box="state.pos"
+          :class="tipBoxClass"
+          :style="tipBoxStyle"
+          @touchstart="onSheetTouchStart"
+          @touchmove="onSheetTouchMove"
+          @touchend="onSheetTouchEnd"
+          @touchcancel="onSheetTouchCancel"
+        >
+          <div ui-hide=">mob" :class="`mob-follow-tips w-full nx-sl nt-sl ${closable ? 'nb-ss' : 'nb-sl'}`" 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">
+              <button v-if="closable" ui-btn="@a none s :square" aria-label="关闭" @click="toggle">
                 <i ui-icon="close"></i>
               </button>
             </div>
@@ -41,6 +50,12 @@
   // hover：Teleport 内容的鼠标进出不会冒泡到祖先，需要逐级通知。
   type FollowContext = { children: Set<FollowBoundary>; hover: (on: boolean) => void };
   const followContextKey = Symbol('follow-context');
+  // 按打开顺序记录已打开的浮层，Esc 只由最后打开的一层处理。
+  const openStack: FollowBoundary[] = [];
+  const removeOpen = (item: FollowBoundary) => {
+    const idx = openStack.indexOf(item);
+    if (idx > -1) openStack.splice(idx, 1);
+  };
 </script>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch, inject, provide } from 'vue';
@@ -66,6 +81,8 @@
     dragTipHide?: boolean;
     mobile?: boolean;
     title?: string;
+    /** 移动端底部面板标题栏是否显示关闭按钮。 */
+    closable?: boolean;
     zIndex?: string | number | null;
     /** 桌面端是否放入浏览器 top layer（Popover API），盖住整页任意层级；移动端底部面板始终放入。 */
     topLayer?: boolean;
@@ -88,6 +105,7 @@
     dragTipHide: undefined,
     mobile: true,
     title: '',
+    closable: false,
     zIndex: undefined,
     topLayer: true,
   });
@@ -162,8 +180,13 @@
     () => state.show,
     (show) => {
       if (show) {
+        removeOpen(containsFollow);
+        openStack.push(containsFollow);
         emits('onshow');
       } else {
+        removeOpen(containsFollow);
+        // 拖动中被其他途径关闭时，清理拖动残留的内联样式。
+        if (sheetDrag) endSheetDrag(false);
         children.forEach(item => item.hide());
         emits('onhide');
       }
@@ -359,6 +382,156 @@
   };
   const onTouchCancel = () => { outsideTouch = null; };
 
+  // 底部面板下滑关闭（对齐 iOS/Android 原生嵌套滚动）：
+  // 标题栏随时可拖；内容区在手指下所有可滚动祖先都位于顶部时，向下拖动由面板接管；
+  // 同一手势中内容先滚回顶部、继续下拉也会接力为拖动；拖回原位后交还内容滚动。
+  const DRAG_SLOP = 4;
+  const SHEET_MASK_ALPHA = 0.5; // 与样式中暗层透明度一致
+  const VELOCITY_WINDOW = 100; // ms
+  type SheetDrag = {
+    id: number;
+    x: number;
+    y: number;
+    lastY: number;
+    anchor: number;
+    offset: number;
+    mode: 'pending' | 'drag' | 'scroll' | 'none';
+    scrollers: HTMLElement[];
+    samples: { y: number; t: number }[];
+  };
+  let sheetDrag: SheetDrag | null = null;
+  const isScrollableY = (el: HTMLElement) => /(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight + 1;
+  const scrollersOf = (target: EventTarget | null) => {
+    const list: HTMLElement[] = [];
+    for (let el = target instanceof Element ? target : null; el && el !== box.value; el = el.parentElement) {
+      if (el instanceof HTMLElement && isScrollableY(el)) list.push(el);
+    }
+    return list;
+  };
+  // 留 3px 容差：惯性回弹或小数像素未完全归零时也视为顶部，被遮住的内容可忽略。
+  const TOP_TOLERANCE = 3;
+  const atTop = (d: SheetDrag) => d.scrollers.every(el => el.scrollTop < TOP_TOLERANCE);
+  const setSheetOffset = (offset: number | null) => {
+    const panel: HTMLElement | null = box.value;
+    const mask: HTMLElement | null = tip.value;
+    if (!panel || !mask) return;
+    if (offset === null) {
+      // 移除内联样式，交还 CSS 过渡：从当前位置动画到打开或关闭状态。
+      panel.style.removeProperty('transform');
+      panel.style.removeProperty('transition');
+      mask.style.removeProperty('background-color');
+      mask.style.removeProperty('transition');
+      return;
+    }
+    const height = panel.offsetHeight || 1;
+    panel.style.setProperty('transition', 'none', 'important');
+    panel.style.setProperty('transform', `translate3d(0, ${offset}px, 0)`, 'important');
+    mask.style.setProperty('transition', 'none', 'important');
+    mask.style.setProperty('background-color', `rgba(0, 0, 0, ${SHEET_MASK_ALPHA * Math.max(0, 1 - offset / height)})`, 'important');
+  };
+  const findTouch = (list: TouchList, id: number) => [...list].find(item => item.identifier === id);
+  const endSheetDrag = (dismiss: boolean) => {
+    sheetDrag = null;
+    setSheetOffset(null);
+    if (dismiss) dismissOutside();
+  };
+  const onSheetTouchStart = (event: TouchEvent) => {
+    // 拖动中有新手指落下：放弃本次拖动并回弹，不开始新的拖动；
+    // 单指时视为上一手势的结束事件丢失，清理后正常开始。
+    if (sheetDrag) {
+      endSheetDrag(false);
+      if (event.touches.length > 1) return;
+    }
+    const touch = event.touches[0];
+    if (!state.show || !isSheet() || event.touches.length !== 1 || !touch) return;
+    // 滑块等自身需要拖动的控件不参与。
+    if (event.target instanceof Element && event.target.closest('input[type="range"], [ui-sheet-nodrag]')) return;
+    sheetDrag = {
+      id: touch.identifier,
+      x: touch.clientX,
+      y: touch.clientY,
+      lastY: touch.clientY,
+      anchor: touch.clientY,
+      offset: 0,
+      mode: 'pending',
+      scrollers: scrollersOf(event.target),
+      samples: [{ y: touch.clientY, t: event.timeStamp }],
+    };
+  };
+  const onSheetTouchMove = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d) return;
+    const touch = findTouch(event.touches, d.id);
+    if (!touch || event.touches.length !== 1) {
+      // 多指介入：放弃本次拖动并回弹。
+      if (d.mode === 'drag') endSheetDrag(false);
+      sheetDrag = null;
+      return;
+    }
+    const y = touch.clientY;
+    if (d.mode === 'pending') {
+      const dx = touch.clientX - d.x;
+      const dy = y - d.y;
+      if (Math.abs(dx) < DRAG_SLOP && Math.abs(dy) < DRAG_SLOP) return;
+      if (Math.abs(dx) > Math.abs(dy)) d.mode = 'none';
+      else if (dy > 0 && atTop(d)) d.mode = 'drag';
+      else d.mode = 'scroll';
+      d.anchor = y;
+    } else if (d.mode === 'scroll' && y > d.lastY && atTop(d)) {
+      // 内容已滚到顶部仍在下拉：接力为拖动面板。
+      d.mode = 'drag';
+      d.anchor = y;
+    }
+    d.lastY = y;
+    if (d.mode !== 'drag') return;
+    if (event.cancelable) event.preventDefault();
+    const offset = y - d.anchor;
+    // 接管瞬间锚点即当前位置（offset 为 0），只有真正推过原位才交还。
+    if (offset < 0 && d.scrollers.length) {
+      // 拖回原位且继续上推：交还内容滚动。
+      d.offset = 0;
+      setSheetOffset(null);
+      d.mode = 'scroll';
+      return;
+    }
+    d.offset = Math.max(0, offset);
+    setSheetOffset(d.offset);
+    d.samples.push({ y, t: event.timeStamp });
+    while (d.samples.length > 2 && event.timeStamp - d.samples[0]!.t > VELOCITY_WINDOW) d.samples.shift();
+  };
+  const onSheetTouchEnd = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    sheetDrag = null;
+    if (d.mode !== 'drag' || d.offset <= 0) {
+      setSheetOffset(null);
+      return;
+    }
+    const first = d.samples[0]!;
+    const last = d.samples[d.samples.length - 1]!;
+    const elapsed = event.timeStamp - last.t > VELOCITY_WINDOW ? Infinity : last.t - first.t;
+    const velocity = elapsed > 0 && elapsed !== Infinity ? (last.y - first.y) / elapsed : 0; // px/ms，向下为正
+    const height = box.value?.offsetHeight || 1;
+    // 按速度投射落点（快速下甩即关闭），明显上推时回弹。
+    const projected = d.offset + velocity * 200;
+    endSheetDrag(velocity > -0.2 && (projected > height / 2 || velocity > 0.6));
+  };
+
+  // 系统中断手势（来电、手势被接管等）：只回弹，不做关闭判定。
+  const onSheetTouchCancel = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    endSheetDrag(false);
+  };
+
+  // Esc 关闭最后打开的浮层；捕获阶段先于 Layer 的 Esc 处理，并以 preventDefault 阻止其关闭外层弹窗。
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing || !state.show) return;
+    if (openStack[openStack.length - 1] !== containsFollow) return;
+    event.preventDefault();
+    dismissOutside();
+  };
+
   const ensureTeleportTarget = () => {
     let area = document.querySelector('#ifollow');
     if (!area) {
@@ -370,6 +543,8 @@
   };
 
   onMounted(() => {
+    // 初始即显示（modelValue=1）时 show 监听不会触发，补登记打开顺序。
+    if (state.show && !openStack.includes(containsFollow)) openStack.push(containsFollow);
     ensureTeleportTarget();
     document.addEventListener('pointerdown', onPressStart, true);
     document.addEventListener('pointerup', onPressEnd, true);
@@ -380,6 +555,7 @@
     document.addEventListener('touchmove', onTouchMove, { passive: false });
     document.addEventListener('touchend', onTouchEnd, { passive: false });
     document.addEventListener('touchcancel', onTouchCancel);
+    document.addEventListener('keydown', onKeydown, true);
   });
 
   const ex: any = ref(null);
@@ -433,6 +609,9 @@
     document.removeEventListener('touchmove', onTouchMove);
     document.removeEventListener('touchend', onTouchEnd);
     document.removeEventListener('touchcancel', onTouchCancel);
+    document.removeEventListener('keydown', onKeydown, true);
+    sheetDrag = null;
+    removeOpen(containsFollow);
     parentChildren?.delete(containsFollow);
     releaseSheet();
     outsideTouch = null;
@@ -542,6 +721,12 @@
         [ui-tips-arrow] {
           display: none;
         }
+
+        // 内容滚到顶部后的继续下拉交给面板拖动，禁止滚动链与回弹抢手势。
+        &,
+        * {
+          overscroll-behavior-y: none;
+        }
       }
     }
 

package/src/components/form/Cascader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" class="mc-cascader">
-    <IFollowView :ui-tips="uiTips"
+    <IFollowView :ui-tips="uiTips" :closable="closable"
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
       pos="bl"
@@ -15,7 +15,7 @@
             <ul v-if="opt?.length" class="min-h-ms*s max-h-xl*s" :class="`nx-sm lh-ml ${optIndex === 0 ? '' : 'bl-xs b-back b-solid'}`" ui-scroll=":y s">
               <!-- 多选 -->
               <template v-if="multiple">
-                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss" ui-wrap="no" @click="multiSelect(item, optIndex)">
+                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" @click="multiSelect(item, optIndex)">
                   <div ui-flex="row xm">
                     <div :ui-form="`${theme} type:checkbox :block`">
                       <input
@@ -38,7 +38,7 @@
                   v-for="(item, idx) of opt"
                   :key="idx"
                   :class="item.value === state.transSelected?.value ? 'co-main' : ''"
-                  class="ux-hover nx-sm r-ss" ui-wrap="no"
+                  class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no"
                   @click="select(item, optIndex)"
                 >
                   <IFollowView :ui-tips="uiTips" v-if="item.optTips" event="hover">
@@ -96,6 +96,7 @@
   const props = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -47,6 +47,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -78,6 +79,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateRangePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <InputRange
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -40,6 +40,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -71,6 +72,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateView.vue

@@ -173,8 +173,8 @@
         <div>&nbsp;</div>
       </div>
       <div class="ml-ss-sub" ui-flex="row rm">
-        <button v-if="state.panel" ui-btn="@a xs none" class="nx-ss co-risk" @click="remove">清除</button>
-        <button v-if="state.panel && !state.isNoTime" ui-btn="@a xs none" class="nx-ss co-main" @click="update">确定</button>
+        <button v-if="state.panel" ui-btn="@a s none" class="nx-ss mob:nx-ms co-risk" @click="remove">清除</button>
+        <button v-if="state.panel && !state.isNoTime" ui-btn="@a s none" class="nx-ss mob:nx-ms co-main" @click="update">确定</button>
       </div>
     </div>
   </div>

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-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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 }"
@@ -22,13 +22,13 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms" ui-wrap="no">
+            <li v-if="item.disabled" class="ux-hover nx-sm mob:ny-ss r-ss o-ms" ui-wrap="no">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
-            <li v-else class="ux-hover nx-sm r-ss" ui-wrap="no" @click.stop="select(item.value)">
+            <li v-else class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" @click.stop="select(item.value)">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
@@ -40,7 +40,7 @@
         <ul class="nx-sm lh-sl" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm ny-ss mob:ny-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>
@@ -108,6 +108,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -137,6 +138,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

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-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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"
@@ -103,6 +103,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

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-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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>
@@ -17,7 +17,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -28,7 +28,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm mob:ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <!-- <span class="ml-sm">全选({{ props.options?.length || 0 }})</span> -->
@@ -61,6 +61,7 @@
   const props: any = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: '' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

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-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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>
@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 16em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
             {{ item.label || item }}
           </li>
         </ul>
@@ -56,6 +56,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

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-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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>
@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -26,7 +26,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm mob:ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.filter?.length || 0 }})</span>
@@ -60,6 +60,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

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-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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"
@@ -18,7 +18,7 @@
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <li
-            class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no"
+            class="ux-hover nx-sm ny-ss mob:ny-sm r-ss" ui-wrap="no"
             :class="item.value === state.selectd?.value ? 'co-main' : ''"
             v-for="(item, idx) of state.filter"
             :key="idx"
@@ -101,6 +101,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

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-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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"
@@ -21,10 +21,10 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''">
+            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss mob:ny-sm r-ss o-ms" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''">
               <del>{{ item.label || item }}</del>
             </li>
-            <li v-else class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
+            <li v-else class="ux-hover nx-sm ny-ss mob:ny-sm r-ss" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
               <span>{{ item.label || item }}</span>
             </li>
           </template>
@@ -132,6 +132,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -167,6 +168,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: 'm',
     co: '',
     block: true,

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-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" 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"
@@ -97,6 +97,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -132,6 +133,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/MoreSelectPanel.vue

@@ -1,190 +0,0 @@
-<template>
-  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IPickerView ref="ipicker" tipBoxClass="ny-sm nx-no" 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 }"
-          :clearable="false"
-          readonly
-          v-model="state.value"
-          :interacted="interacted"
-        >
-          <template #suffix><i ui-form-select=""></i></template>
-        </Input>
-      </slot>
-      <template #options>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <template v-for="(item, idx) of props.options" :key="idx">
-            <li v-if="item.disable" class="ux-hover nx-sm r-ss o-ms">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <del class="ml-sm">{{ item.label || item }}</del>
-              </label>
-            </li>
-            <li v-else class="ux-hover nx-sm r-ss" @click.stop="select(item.value)">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <span class="ml-sm">{{ item.label || item }}</span>
-              </label>
-            </li>
-          </template>
-        </ul>
-        <div v-else class="w-full ny-ms" ui-flex="col cm" v-html="spare"></div>
-        <ul class="nx-sm lh-ml" v-if="tools">
-          <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
-          <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="state.all" />
-                <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>
-              </label>
-            </div>
-            <div>
-              <button v-show="state.has" class="co-risk" ui-btn="@a none s" @click="remove">清空</button>
-            </div>
-          </li>
-        </ul>
-      </template>
-    </IPickerView>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, ref, computed, watch } from 'vue';
-  import Input from './Input.vue';
-  import { IFollowView, IPickerView } from '../basic';
-  const ipicker: any = ref(null);
-
-  const emits = defineEmits(['update:modelValue']);
-
-  /**
-   * 入参说明
-   *
-   * modelValue     值
-   * options        枚举列表
-   * tools          是否显示工具栏
-   * spare          空闲兜底内容
-   * search         是否显示搜索框
-   *
-   * -----------------------------------------
-   * theme          主题
-   * sz             尺寸
-   * co             颜色
-   * block          撑满
-   * ready          准备就绪
-   * type           类型
-   * tips           提示文案
-   * placeholder    内容占位
-   * maxlength      最大长度
-   * minlength      最小长度
-   * disabled       是否禁用
-   * readonly       是否只读
-   * clearable      是否显示清除按钮
-   * rules          校验规则
-   * verify         是否是示校验图标
-   * prefix         前缀内容
-   * suffix         后缀内容
-   * interacted     用户是否交互
-   */
-
-  // 类型
-  interface Props {
-    modelValue?: Array<string | number>;
-    options: Array<object>;
-    tools?: boolean;
-    spare?: string;
-
-    // Input
-    placeholder?: string;
-    rules?: Array<object>;
-    theme?: string;
-    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
-    co?: string;
-    block?: boolean;
-    ready?: boolean;
-    type?: string;
-    tips?: string;
-    maxlength?: null | number;
-    minlength?: null | number;
-    disabled?: boolean;
-    readonly?: boolean;
-    clearable?: boolean;
-    verify?: boolean;
-    prefix?: Array<any>;
-    suffix?: Array<any>;
-    interacted?: boolean;
-  }
-  // 入参
-  const props: any = withDefaults(defineProps<Props>(), {
-    modelValue: () => [],
-    options: () => [],
-    tools: true,
-    spare: '当前没有可选项',
-
-    // Input
-    placeholder: '',
-    rules: () => [],
-    theme: '@a',
-    sz: '',
-    co: '',
-    block: true,
-    ready: false,
-    type: 'text',
-    tips: '',
-    maxlength: null,
-    minlength: null,
-    disabled: false,
-    readonly: false,
-    clearable: true,
-    verify: false,
-    prefix: () => [],
-    suffix: () => [],
-    interacted: false,
-  });
-  // 内部数据
-  const state: any = reactive({
-    name: computed(() => {
-      return Array.from({ length: 8 }, () => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
-    }),
-    show: 0,
-    value: '',
-    all: computed(() => {
-      return props.options?.every((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-    has: computed(() => {
-      return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-  });
-
-  // 监听外部数据
-  watch(
-    [() => props.modelValue, () => props.options],
-    ([v = [], o = []]: any = []) => {
-      const selectd: any = o?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
-      state.value = selectd.join(' Ι ') || '';
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 更新
-  const change = (item: any) => {
-    emits('update:modelValue', item);
-  };
-  // 选中
-  const select = (item: any) => {
-    const s = [...props.modelValue];
-    s?.indexOf(item) !== -1 ? s?.splice(s?.indexOf(item), 1) : s?.push(item);
-    change(s);
-  };
-  // 全选
-  const allselect = () => {
-    const s = state.all ? [] : props.options?.map((item: any) => item.value);
-    change(s);
-  };
-  // 清除
-  const remove = () => {
-    change([]);
-    ipicker.value.cancel();
-  };
-</script>
-. .