@neatui/vue 4.8.2 → 5.1.0

package/src/components/form/Select.vue

@@ -114,7 +114,7 @@
     other?: {
       value: string;
       field?: string;
-      config?: object;
+      config?: Record<string, any>;
     };
     otherValue?: string;
     tools?: boolean;
@@ -235,15 +235,20 @@
         };
       }
 
+      // 值不在当前选项中（选项未加载、分页或远程搜索）时显示原始值，避免看起来像未选择
+      if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {
+        return { label: String(props.modelValue), value: props.modelValue };
+      }
+
       return {};
     }),
-    displayLabel: computed(() => {
+    displayLabel: computed((): string => {
       return state.selectd.label || '';
     }),
-    availableCount: computed(() => {
+    availableCount: computed((): number => {
       return state.filter?.filter((item: any) => !item.disabled)?.length || 0;
     }),
-    filter: computed(() => {
+    filter: computed((): any[] => {
       let filteredOptions = props.options || [];
 
       if (state.search) {
@@ -285,35 +290,24 @@
     { immediate: true },
   );
 
-  // 监听并验证modelValue的有效性
+  // 值是否在选项中（含 all 选项）
+  const inOptions = (value: any, options: any[] | undefined, allOption: any) =>
+    (allOption && value === allOption.value) || !!options?.some((option: any) => `${option.value}` === `${value}`);
+
+  // 只在选项变化使原本有效的值失效时清空（如级联切换上级后）。
+  // 值由外部写入（加载记录）、选项异步未到、分页或远程搜索尚未包含当前值时保留，避免丢失数据。
   watch(
     [() => props.modelValue, () => props.options, () => props.all, () => props.other],
-    ([value, options, allOption, otherConfig]) => {
+    ([value, options, allOption, otherConfig], [previousValue, previousOptions]) => {
       // 如果配置了 other，则允许任意值（可能是用户自定义输入）
-      if (otherConfig) {
-        return;
-      }
-
-      // 如果有值但不在有效选项中，清空该值
-      if (value != null && value !== '' && options?.length > 0) {
-        let isValid = false;
-
-        // 检查是否是 all 选项
-        if (allOption && value === allOption.value) {
-          isValid = true;
-        } else {
-          // 检查是否在普通选项中
-          isValid = options.some((option: any) => `${option.value}` === `${value}`);
-        }
-
-        if (!isValid) {
-          nextTick(() => {
-            change(null);
-          });
-        }
+      if (otherConfig || value == null || value === '' || !options?.length) return;
+      const invalidated = value === previousValue && options !== previousOptions && inOptions(value, previousOptions, allOption) && !inOptions(value, options, allOption);
+      if (invalidated) {
+        nextTick(() => {
+          change(null);
+        });
       }
     },
-    { immediate: true },
   );
 
   // 选择

package/src/components/form/SelectPicker.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script setup lang="ts">
+  import type { PropType } from 'vue';
   import { reactive, ref, computed } from 'vue';
   import Input from './Input.vue';
   import { IPickerView, IScrollView } from '../basic';
@@ -36,7 +37,7 @@
   const emits = defineEmits(['update:modelValue']);
   const props = defineProps({
     theme: { type: String, default: '@a' },
-    sz: { type: String, default: 'm' },
+    sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },
     tips: { type: String, default: '' },
@@ -50,7 +51,7 @@
       default: '',
     },
     rules: {
-      type: Array,
+      type: Array as PropType<object[]>,
       default: () => [],
     },
   });

package/src/components/form/Textarea.vue

@@ -44,8 +44,91 @@
   </div>
 </template>
 
+<script lang="ts">
+  import { nextTick } from 'vue';
+
+  interface MeasurePlan {
+    hold?: () => void;
+    collapse: () => void;
+    read: () => void;
+    apply: () => void;
+  }
+
+  /**
+   * 所有 Textarea 共用的测量批处理。
+   * 逐个实例「写 height → 读 scrollHeight → 写 height」会让每个实例都强制重排一次整页，
+   * 表格里上千个单元格就是上千次重排。这里同一轮先全部塌缩、再全部读取、最后全部落高，
+   * 整批只触发一两次布局计算。塌缩前先锁住外框高度，测量期间页面其余部分不动，也不会因容器变矮丢失滚动位置。
+   */
+  const pendingMeasures = new Set<() => MeasurePlan | null>();
+  let measureFlushQueued = false;
+
+  const flushMeasures = () => {
+    measureFlushQueued = false;
+    const plans: MeasurePlan[] = [];
+    pendingMeasures.forEach((createPlan) => {
+      const plan = createPlan();
+      if (plan) plans.push(plan);
+    });
+    pendingMeasures.clear();
+    plans.forEach((plan) => plan.hold?.());
+    plans.forEach((plan) => plan.collapse());
+    plans.forEach((plan) => plan.read());
+    plans.forEach((plan) => plan.apply());
+  };
+
+  const queueMeasure = (createPlan: () => MeasurePlan | null) => {
+    pendingMeasures.add(createPlan);
+    if (measureFlushQueued) return;
+    measureFlushQueued = true;
+    nextTick(flushMeasures);
+  };
+
+  const cancelMeasure = (createPlan: () => MeasurePlan | null) => {
+    pendingMeasures.delete(createPlan);
+  };
+
+  /**
+   * 共用一个 ResizeObserver。宽度取自回调条目本身，不调用 getBoundingClientRect，
+   * 挂载时也不预读宽度，避免每个实例各自强制布局。
+   */
+  const widthWatchers = new WeakMap<Element, { width: number | null; onChange: () => void }>();
+  let sharedResizeObserver: ResizeObserver | undefined;
+
+  const entryWidth = (entry: ResizeObserverEntry) => {
+    const box = entry.borderBoxSize as ResizeObserverSize | readonly ResizeObserverSize[] | undefined;
+    const size = Array.isArray(box) ? box[0] : box;
+    return size && typeof (size as ResizeObserverSize).inlineSize === 'number'
+      ? (size as ResizeObserverSize).inlineSize
+      : entry.contentRect.width;
+  };
+
+  const observeWidth = (node: Element, onChange: () => void) => {
+    if (typeof ResizeObserver === 'undefined') return;
+    sharedResizeObserver ||= new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const watcher = widthWatchers.get(entry.target);
+        if (!watcher) return;
+        const width = entryWidth(entry);
+        // 首次回调也测一次：挂载后到首次布局之间宽度可能已变（如表格列宽在单元格全部挂载后才确定）
+        if (watcher.width === null || Math.abs(width - watcher.width) > 0.5) {
+          watcher.width = width;
+          watcher.onChange();
+        }
+      });
+    });
+    widthWatchers.set(node, { width: null, onChange });
+    sharedResizeObserver.observe(node);
+  };
+
+  const unobserveWidth = (node: Element) => {
+    widthWatchers.delete(node);
+    sharedResizeObserver?.unobserve(node);
+  };
+</script>
+
 <script setup lang="ts">
-  import { reactive, watch, ref, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
+  import { reactive, watch, ref, onMounted, onBeforeUnmount, computed } from 'vue';
   import { isObject, isFunction } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
@@ -71,6 +154,7 @@
    * prefix         前缀内容
    * suffix         后缀内容
    * interacted     用户是否交互
+   * emptyValue     清空或删空内容时回传的值，默认 null；字符串 v-model 可传 ''
    * autoHeight     是否自动调整高度；同时传入 minRows 与 maxRows 时默认开启；单独开启时无限增高
    * rows           初始行数（未开启自动高度，或开启但未同时设 min/max 时）
    * minRows        与 maxRows 同时传入时生效的最小行数
@@ -97,6 +181,7 @@
     prefix?: Array<any>;
     suffix?: Array<any>;
     interacted?: boolean | number | null;
+    emptyValue?: null | string;
     autoHeight?: boolean | null;
     rows?: number;
     minRows?: number;
@@ -121,6 +206,7 @@
     prefix: () => [],
     suffix: () => [],
     interacted: null,
+    emptyValue: null,
     // Boolean 未传时 Vue 会落到 false，无法与「显式关闭」区分
     autoHeight: null,
     // textarea 特有属性默认值
@@ -152,58 +238,93 @@
   // 有 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;
+  // 测量拆成「塌缩 → 读取 → 落高」三步，交给模块级批处理统一调度（见文件末尾 queueMeasure）
+  const fMeasurePlan = (): MeasurePlan | null => {
     const node = el.value;
-    if (!node) return;
+    if (!node) return null;
 
     if (!isAutoHeight.value) {
-      node.style.height = '';
-      node.style.overflowY = '';
-      isOverflowing.value = false;
-      return;
+      return {
+        collapse() {
+          node.style.height = '';
+          node.style.overflowY = '';
+        },
+        read() {},
+        apply() {
+          isOverflowing.value = false;
+        },
+      };
     }
 
+    // 塌缩期间把外框锁在当前高度，落高后还原
+    const frame = node.parentElement;
+    const frameMinHeight = frame?.style.minHeight || '';
+    let frameHeight = 0;
+    const hold = () => {
+      frameHeight = frame?.offsetHeight || 0;
+    };
+    const lockFrame = () => {
+      if (frame && frameHeight) frame.style.minHeight = `${frameHeight}px`;
+    };
+    const releaseFrame = () => {
+      if (frame && frameHeight) frame.style.minHeight = frameMinHeight;
+    };
+
     // 未同时设 min/max：跟内容无限增高，不封顶
     if (!hasRowRange.value) {
-      node.style.height = 'auto';
-      node.style.overflowY = 'hidden';
-      node.style.height = `${node.scrollHeight + 1}px`;
-      isOverflowing.value = false;
-      return;
+      let contentHeight = 0;
+      return {
+        hold,
+        collapse() {
+          lockFrame();
+          node.style.height = 'auto';
+          node.style.overflowY = 'hidden';
+        },
+        read() {
+          contentHeight = node.scrollHeight;
+        },
+        apply() {
+          node.style.height = `${contentHeight + 1}px`;
+          releaseFrame();
+          isOverflowing.value = false;
+        },
+      };
     }
 
-    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;
-    }
+    let targetHeight = 0;
+    let overflowing = false;
+    return {
+      hold,
+      collapse() {
+        lockFrame();
+        node.style.height = '0px';
+        node.style.overflowY = 'hidden';
+      },
+      read() {
+        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 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;
+        overflowing = contentHeight > maxHeight + 1;
+        const measuredHeight = contentHeight <= minHeight + 1 ? minHeight : contentHeight;
+        targetHeight = Math.min(Math.max(measuredHeight, minHeight), maxHeight);
+      },
+      apply() {
+        node.style.height = `${Math.ceil(targetHeight)}px`;
+        node.style.overflowY = overflowing ? 'auto' : 'hidden';
+        releaseFrame();
+        isOverflowing.value = overflowing;
+      },
+    };
   };
 
-  const fAutoHeight = () => {
-    if (measurementQueued) return;
-    measurementQueued = true;
-    nextTick(fMeasureHeight);
-  };
+  const fAutoHeight = () => queueMeasure(fMeasurePlan);
 
   watch(
     [() => isAutoHeight.value, () => resolvedMinRows.value, () => resolvedMaxRows.value, () => props.modelValue, () => props.rows, () => props.sz, () => props.theme],
@@ -282,7 +403,7 @@
 
   // 清空
   function clear() {
-    emits('update:modelValue', null);
+    emits('update:modelValue', props.emptyValue);
     emits('clear');
   }
   // 输入
@@ -302,7 +423,7 @@
     }
     // 输入事件
     emits('input', e, state);
-    emits('update:modelValue', value || null);
+    emits('update:modelValue', value || props.emptyValue);
 
     // 自动高度
     fAutoHeight();
@@ -333,25 +454,16 @@
     return { ..._event };
   };
 
-  // 组件挂载后初始化自动高度
+  // 组件挂载后初始化自动高度；宽度变化（换行数随之变化）时重新测量
   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);
-    }
+    if (node) observeWidth(node, fAutoHeight);
     fAutoHeight();
   });
 
   onBeforeUnmount(() => {
-    resizeObserver?.disconnect();
-    resizeObserver = undefined;
+    if (el.value) unobserveWidth(el.value);
+    cancelMeasure(fMeasurePlan);
   });
 </script>
+

package/src/components/form/TimePicker.vue

@@ -1,11 +1,47 @@
 <template>
-  <div></div>
+  <div :ui-form="`${theme} type:input ${disabled ? 'disabled' : ''}`">
+    <input type="time" :value="modelValue || ''" :min="min" :max="max" :step="step" :disabled="disabled" :readonly="readonly"
+      :aria-invalid="error ? true : undefined" :aria-label="label" :required="required" @input="update" @change="change" @blur="emit('blur', $event)" @focus="emit('focus', $event)" />
+    <span v-if="verify && error" role="alert" class="co-risk">{{ error }}</span>
+  </div>
 </template>
-
+<script lang="ts">
+  export interface TimeConstraints { min?: string; max?: string; step?: number; required?: boolean }
+  const milliseconds = (value: unknown): number | null => {
+    const match = typeof value === 'string' && /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+    if (!match || +match[1] > 23 || +match[2] > 59 || +(match[3] || 0) > 59) return null;
+    return ((+match[1] * 60 + +match[2]) * 60 + +(match[3] || 0)) * 1000 + +(match[4] || '').padEnd(3, '0');
+  };
+  // 独立控件提示和 FormLoader 提交校验共用，不依赖浏览器语言或 DOM。
+  export const timeError = (value: unknown, options: TimeConstraints = {}): string | null => {
+    if (value === '' || value == null) return options.required ? '请选择时间' : null;
+    const time = milliseconds(value);
+    if (time === null) return '请输入有效时间';
+    const min = milliseconds(options.min), max = milliseconds(options.max);
+    const outside = min !== null && max !== null && min > max
+      ? time < min && time > max : (min !== null && time < min) || (max !== null && time > max);
+    if (outside) return `时间须在 ${options.min || '00:00'} 至 ${options.max || '23:59:59'} 之间`;
+    const step = Number.isFinite(options.step) && options.step! > 0 ? options.step! : 60;
+    if ((time - (min ?? 0)) % Math.round(step * 1000)) return `时间须按 ${step} 秒间隔选择`;
+    return null;
+  };
+</script>
 <script setup lang="ts">
-  interface Props {
-    props?: any;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {});
+  import { computed } from 'vue';
+  const props = withDefaults(defineProps<{
+    modelValue?: string | null; min?: string; max?: string; step?: number;
+    disabled?: boolean; readonly?: boolean; required?: boolean; label?: string; theme?: string; verify?: boolean;
+  }>(), { modelValue: '', step: 60, disabled: false, readonly: false, theme: '@a', verify: true });
+  const emit = defineEmits(['update:modelValue', 'change', 'invalid', 'blur', 'focus']);
+  const error = computed(() => timeError(props.modelValue, props));
+  const update = (event: Event) => {
+    if (props.disabled || props.readonly) return;
+    const value = (event.target as HTMLInputElement).value;
+    emit('update:modelValue', value);
+    const message = timeError(value, props);
+    if (message) emit('invalid', message);
+  };
+  const change = (event: Event) => {
+    if (!props.disabled && !props.readonly) emit('change', (event.target as HTMLInputElement).value);
+  };
 </script>

package/src/components/form/Upload.vue

@@ -203,7 +203,7 @@
     uploadStyle?: string;
     tips?: string;
     accept?: string | 'image/*' | 'video/*' | 'audio/*';
-    upload?: (formData: FormData) => Promise<any>;
+    upload?: (formData: FormData, fileExtension?: string) => Promise<any>;
     maxSize?: number;
     compress?: boolean;
     disabled?: boolean;

package/src/components/form/index.ts

@@ -1,3 +1,5 @@
+import Radio from './Radio.vue';
+import Gallery from './Gallery.vue';
 import Input from './Input.vue';
 import InputRange from './InputRange.vue';
 import Switch from './Switch.vue';
@@ -30,6 +32,9 @@ import Upload from './Upload.vue';
 import Cascader from './Cascader.vue';
 
 export {
+  Radio,
+  Gallery,
+  Gallery as SelectImg,
   Input,
   InputRange,
   Switch,