@neatui/vue 4.6.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@fekit/floor": "^3.0.1",
-    "@fekit/follow": "^1.7.0",
+    "@fekit/follow": "^1.8.0",
     "@fekit/itable": "^1.1.6",
     "@fekit/pullload": "^1.3.5",
     "@fekit/scale": "^2.0.1",

package/src/components/basic/IFollowView.vue

@@ -56,6 +56,7 @@
     clickTipHide?: boolean;
     mobile?: boolean;
     title?: string;
+    zIndex?: string | number | null;
   }
 
   // 入参
@@ -73,6 +74,7 @@
     clickTipHide: false,
     mobile: true,
     title: '',
+    zIndex: undefined,
   });
 
   const dom: any = ref(null);
@@ -214,13 +216,20 @@
             }
           }
         },
-        { hideOnScrollOut: false },
+        { hideOnScrollOut: false, zIndex: props.zIndex },
       );
     } else {
       ex.value = null;
     }
   });
 
+  watch(
+    () => props.zIndex,
+    (zIndex) => {
+      ex.value?.setOptions({ zIndex });
+    },
+  );
+
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
     // 移除触摸事件监听器

package/src/components/basic/IPickerView.vue

@@ -123,8 +123,9 @@
     border-radius: 0.5em 0.5em 0 0;
   }
 
-  // 显示动画
-  @keyframes am-show-am {
+  // Keep picker keyframes off the shared am-show-am / am-hide-am names
+  // so Layer's am="am" preset is not overwritten.
+  @keyframes am-picker-show {
     0% {
       opacity: 0;
       transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
@@ -135,8 +136,7 @@
     }
   }
 
-  // 隐藏动画
-  @keyframes am-hide-am {
+  @keyframes am-picker-hide {
     0% {
       opacity: 1;
       transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
@@ -147,39 +147,34 @@
     }
   }
 
-  // 引用显示
-  %am-show-am {
-    transform: translate3d(0, -150%, 0);
+  %am-picker-show {
+    transform: translate3d(0, 100%, 0);
     opacity: 0;
     transform-style: preserve-3d;
   }
 
-  // 引用隐藏
-  %am-hide-am {
+  %am-picker-hide {
     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-    opacity: 0;
+    opacity: 1;
     transform-style: preserve-3d;
   }
 
-  // 传参调用
   @mixin am-view-am($time: 450ms, $delay: 100ms) {
     &.show,
     &[view='2'] {
       & > * {
-        @extend %am-show-am;
-        animation: am-show-am $time $delay both;
+        @extend %am-picker-show;
+        animation: am-picker-show $time $delay both;
       }
     }
 
     &.hide,
     &[view='1'] {
-      opacity: 0;
-      transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
       pointer-events: none;
 
       & > * {
-        @extend %am-hide-am;
-        animation: am-hide-am $time $delay both;
+        @extend %am-picker-hide;
+        animation: am-picker-hide $time $delay both;
       }
     }
 
@@ -189,36 +184,11 @@
     }
   }
 
-  // 动画时间
   $time: 400ms;
   $delay: 100ms;
 
-  // 全套引用
-  [am-view='am'] {
-    &.show,
-    &[view='2'] {
-      & > * {
-        @extend %am-show-am;
-        animation: am-show-am $time $delay both;
-      }
-    }
-
-    &.hide,
-    &[view='1'] {
-      opacity: 0;
-      transition: ($time + $delay) * 0.4 ($time + $delay) * 0.6;
-      pointer-events: none;
-
-      & > * {
-        @extend %am-hide-am;
-        animation: am-hide-am $time $delay ease-in-out both;
-      }
-    }
-
-    &.none,
-    &[view='0'] {
-      display: none;
-    }
+  .fekit-picker[am-view='am'] {
+    @include am-view-am($time, $delay);
   }
 
   @keyframes am-dark-show {

package/src/components/form/Textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${isAutoHeight ? 'auto-height' : ''} ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
     @click="emits('click', $event)"
   >
     <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
@@ -21,8 +21,8 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
-        :rows="rows"
-        ui-scroll=":y"
+        :rows="displayRows"
+        :ui-scroll="isAutoHeight && !isOverflowing ? undefined : ':y'"
         dir="auto"
         @focus="emits('focus', $event, state)"
         @input="input($event)"
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, watch, ref, nextTick, onMounted } from 'vue';
+  import { reactive, watch, ref, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
   import { isObject, isFunction } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
@@ -71,8 +71,10 @@
    * prefix         前缀内容
    * suffix         后缀内容
    * interacted     用户是否交互
-   * autoHeight     是否自动调整高度
-   * rows           初始行数
+   * autoHeight     是否自动调整高度；同时传入 minRows 与 maxRows 时默认开启；单独开启时无限增高
+   * rows           初始行数（未开启自动高度，或开启但未同时设 min/max 时）
+   * minRows        与 maxRows 同时传入时生效的最小行数
+   * maxRows        与 minRows 同时传入时生效的最大行数，超出后出现滚动条
    */
 
   // 类型
@@ -95,8 +97,10 @@
     prefix?: Array<any>;
     suffix?: Array<any>;
     interacted?: boolean | number | null;
-    autoHeight?: boolean;
+    autoHeight?: boolean | null;
     rows?: number;
+    minRows?: number;
+    maxRows?: number;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
@@ -117,8 +121,9 @@
     prefix: () => [],
     suffix: () => [],
     interacted: null,
+    // Boolean 未传时 Vue 会落到 false，无法与「显式关闭」区分
+    autoHeight: null,
     // textarea 特有属性默认值
-    autoHeight: false,
     rows: 3,
   });
 
@@ -132,18 +137,81 @@
   });
 
   // textarea 元素引用
-  const el: any = ref(null);
+  const el = ref<HTMLTextAreaElement | null>(null);
+  const isOverflowing = ref(false);
+
+  const fRowLimit = (value: unknown, fallback: number) => {
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? Math.max(1, Math.floor(n)) : fallback;
+  };
+
+  const hasRowRange = computed(() => props.minRows != null && props.maxRows != null);
+  const isAutoHeight = computed(() => (props.autoHeight === false ? false : props.autoHeight === true ? true : hasRowRange.value));
+  const resolvedMinRows = computed(() => fRowLimit(props.minRows, 1));
+  const resolvedMaxRows = computed(() => Math.max(resolvedMinRows.value, fRowLimit(props.maxRows, 10)));
+  // 有 min/max 时从最小行起算；仅 autoHeight 时保留 rows，并无限增高
+  const displayRows = computed(() => (isAutoHeight.value && hasRowRange.value ? resolvedMinRows.value : props.rows));
+
+  let measurementQueued = false;
+  let resizeObserver: ResizeObserver | undefined;
+  let observedWidth = 0;
+
+  const fMeasureHeight = () => {
+    measurementQueued = false;
+    const node = el.value;
+    if (!node) return;
+
+    if (!isAutoHeight.value) {
+      node.style.height = '';
+      node.style.overflowY = '';
+      isOverflowing.value = false;
+      return;
+    }
+
+    // 未同时设 min/max：跟内容无限增高，不封顶
+    if (!hasRowRange.value) {
+      node.style.height = 'auto';
+      node.style.overflowY = 'hidden';
+      node.style.height = `${node.scrollHeight + 1}px`;
+      isOverflowing.value = false;
+      return;
+    }
+
+    node.style.height = '0px';
+    node.style.overflowY = 'hidden';
+
+    const style = getComputedStyle(node);
+    let lineHeight = parseFloat(style.lineHeight);
+    if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+      lineHeight = (parseFloat(style.fontSize) || 14) * 1.5;
+    }
+
+    const paddingBlock = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    const minHeight = resolvedMinRows.value * lineHeight + paddingBlock;
+    const maxHeight = resolvedMaxRows.value * lineHeight + paddingBlock;
+    const contentHeight = node.scrollHeight;
+    const overflowing = contentHeight > maxHeight + 1;
+    const measuredHeight = contentHeight <= minHeight + 1 ? minHeight : contentHeight;
+    const targetHeight = Math.min(Math.max(measuredHeight, minHeight), maxHeight);
+
+    node.style.height = `${Math.ceil(targetHeight)}px`;
+    node.style.overflowY = overflowing ? 'auto' : 'hidden';
+    isOverflowing.value = overflowing;
+  };
 
-  // 自动高度功能
   const fAutoHeight = () => {
-    nextTick(() => {
-      if (props.autoHeight && el.value) {
-        el.value.style.height = 'auto';
-        el.value.style.height = el.value.scrollHeight + 1 + 'px';
-      }
-    });
+    if (measurementQueued) return;
+    measurementQueued = true;
+    nextTick(fMeasureHeight);
   };
 
+  watch(
+    [() => isAutoHeight.value, () => resolvedMinRows.value, () => resolvedMaxRows.value, () => props.modelValue, () => props.rows, () => props.sz, () => props.theme],
+    () => {
+      fAutoHeight();
+    },
+  );
+
   // 外部传入交互标识，主要用于外部没有输入但点击了提交
   watch(
     () => props.interacted,
@@ -267,7 +335,23 @@
 
   // 组件挂载后初始化自动高度
   onMounted(() => {
-    // 自动高度
+    const node = el.value;
+    if (node && typeof ResizeObserver !== 'undefined') {
+      observedWidth = node.getBoundingClientRect().width;
+      resizeObserver = new ResizeObserver(() => {
+        const width = node.getBoundingClientRect().width;
+        if (Math.abs(width - observedWidth) > 0.5) {
+          observedWidth = width;
+          fAutoHeight();
+        }
+      });
+      resizeObserver.observe(node);
+    }
     fAutoHeight();
   });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+  });
 </script>