@neatui/vue 5.1.4 → 5.1.6

package/MIGRATION-5.0.md

@@ -62,7 +62,7 @@ Vue 最低版本声明统一为 3.5.11，与已有 Pinia 3 的要求一致；同
 
 - 渲染结构精简：节点即元素，attrs 原样落在节点元素上。无标题的 Text / Html / Button 节点只输出内容元素本身；分组、数组内部的层级不再包根元素，子节点直接落在节点元素（无标题分组）或内容容器（有标题分组）里；纯文本不再包 span，不输出空的 style / ui-col。模板不输出说明注释，空内容、没有提示、没有 submit 时不留占位注释（客户端渲染）。依赖旧包裹层（`.flex-block > [ui-row]`、内容节点外层 div、`span`）的样式或测试需要调整。
 - id 只给字段：`表单前缀-数据路径`（`.` 换成 `-`），如 `apply-contact-phone`、`apply-members-0-name`；前缀为 `idx`，未传时由 useId 生成 6 位短串。分组、容器、内容节点不再输出 id，需要时在 attrs 里写。旧的 `form-<idx>-g0-field-x` / `group-0` 形式不再生成，错误提示 id 为 `<字段 id>-error`。
-- `child` 可写成 `{ attrs, lists }`：attrs（可为函数）描述承载子节点的容器；容器用 ui-flex 布局时不加栅格和默认间距 `n-sl-sub`，写了 class 时替换默认间距；无标题分组的节点元素就是容器，节点写了 class 时同样不加默认间距（与根元素规则一致）。
+- `child` 可写成 `{ attrs, lists }`：attrs（可为函数）描述承载子节点的容器；容器用 ui-flex 布局时不加栅格和默认间距 `n-sm-sub`（5.1.5 前为 `n-sl-sub`），写了 class 时替换默认间距；无标题分组的节点元素就是容器，节点写了 class 时同样不加默认间距（与根元素规则一致）。
 - `media: false`：这一层不用栅格，自身不带 ui-col，分组 / 数组的下一层也不带 ui-row；ui-col 只在所在层有栅格时输出；`rows=""` 时根元素不再输出空的 ui-row。
 - 标题与内容均可递归组合；数组支持默认值、数量限制、增删排序和行上下文。
 - 新增 `setErrors`（回填服务端错误）、`isDirty / getChanges`（未保存改动）、`setBaseline`（设置重置基线）、`getData({ visibleOnly })`（去掉隐藏字段），`validate({ paths })` 支持局部校验。在同一对象上用 `Object.assign` 加载记录后调用 `setBaseline()`。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.1.4",
+  "version": "5.1.6",
   "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.1.4",
+    "@neatui/css": "^5.1.6",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/form/Input.vue

@@ -163,7 +163,7 @@
 
   // 校验
   watch(
-    [() => state.interacted, () => props.modelValue],
+    [() => state.interacted, () => props.modelValue, () => props.tips, () => props.co],
     async () => {
       if (state.interacted) {
         const hasValue =

package/src/components/form/InputNumber.vue

@@ -138,7 +138,7 @@
 
   // 校验
   watch(
-    [() => state.interacted, () => state.value],
+    [() => state.interacted, () => state.value, () => props.tips, () => props.co],
     async () => {
       if (state.interacted) {
         // 提示文案
@@ -184,7 +184,7 @@
           tips = props.tips;
         }
         // 是否显示提示
-        const ontips = verify === 'no' && tips ? 'show' : '';
+        const ontips = (verify === 'no' && tips) || props.tips ? 'show' : '';
         // 状态颜色
         const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
         state.error = { tips, ontips, verify, co };

package/src/components/form/InputRange.vue

@@ -200,7 +200,7 @@
         tips = props.tips;
       }
       // 是否显示提示
-      const ontips = verify === 'no' && tips ? 'show' : '';
+      const ontips = (verify === 'no' && tips) || props.tips ? 'show' : '';
       // 状态颜色
       const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
       return { tips, ontips, verify, co };

package/src/components/form/Textarea.vue

@@ -344,7 +344,7 @@
 
   // 校验
   watch(
-    [() => state.interacted, () => props.modelValue],
+    [() => state.interacted, () => props.modelValue, () => props.tips, () => props.co],
     async () => {
       if (state.interacted) {
         // 提示文案

package/src/components/loader/FormLoader/FormLoader.vue

@@ -5,7 +5,7 @@
         <FormRender v-if="isBareContent(col)" bare :col="col" :mode="mode" :interacted="touched" :ctx="context()" v-bind="nodeAttrs(col)" />
 
         <div v-else v-bind="nodeAttrs(col)" v-on="isGroup(col) || col._array ? eventsOf(col, context()) : {}">
-          <div v-if="rowSlot(col)" class="flex-block" @focusout="col._touched = true">
+          <div v-if="rowSlot(col)" class="flex-fill" @focusout="col._touched = true">
             <slot :name="rowSlot(col)" v-bind="fieldScope(col)"></slot>
             <FieldMessage :col="col" :mode="mode" />
           </div>
@@ -29,8 +29,9 @@
               :interacted="touched"
               :debug="debug"
               rows=""
-              class="w-full"
-              ui-flex="row lm"
+              :class="isVertical(col) ? 'w-full' : 'flex-fixed nr-sm'"
+              :style="isVertical(col) ? undefined : labelStyle(col)"
+              :ui-flex="isVertical(col) ? 'row lm' : 'row rm'"
             />
             <h6 v-else-if="labelText(col.label) && isVertical(col)" :style="showStar(col) ? 'text-indent: -1em' : undefined" :class="labelClass || undefined" v-bind="labelAttrs(col.label)">
               <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
@@ -49,7 +50,7 @@
               </FormLoader>
             </div>
 
-            <div v-else-if="col._array" class="flex-block">
+            <div v-else-if="col._array" class="flex-fill">
               <div v-if="listOf(col).length" ui-row>
                 <div v-for="(row, i) in listOf(col)" :key="rowKey(row)" v-bind="rowAttrs(col)">
                   <div v-if="hasActions(col)" v-bind="rowBox(col)">
@@ -541,7 +542,7 @@
   const attrs = useAttrs();
   const slots = useSlots();
   // 外部写了 class 时去掉默认根 class，由外部接管
-  const rootClass = computed(() => (attrs.class ? undefined : 'n-sl-sub'));
+  const rootClass = computed(() => (attrs.class ? undefined : 'n-sm-sub'));
 
   // 入参
   const props: any = defineProps({
@@ -769,7 +770,7 @@
     const { 'ui-row': row, ...own } = childAttrsOf(col);
     const layout = own['ui-flex'] ?? flex;
     const rows = col.media === false || layout ? '' : String(row ?? col.attrs?.['ui-row'] ?? props.rows ?? '');
-    return { rows, attrs: { ...own, 'ui-row': rows || undefined, class: 'class' in own ? own.class : layout || styled ? undefined : 'n-sl-sub' } };
+    return { rows, attrs: { ...own, 'ui-row': rows || undefined, class: 'class' in own ? own.class : layout || styled ? undefined : 'n-sm-sub' } };
   };
   // 节点元素；无标题分组的节点元素同时是下一层容器
   const nodeAttrs = (col: any) => {
@@ -797,7 +798,7 @@
   // 有标题分组的子节点容器
   const boxAttrs = (col: any) => {
     const { attrs } = levelOf(col);
-    return { ...attrs, class: joinClass('flex-block', attrs.class) };
+    return { ...attrs, class: joinClass('flex-fill', attrs.class) };
   };
   const levelProps = () => ({
     bare: true,
@@ -832,11 +833,11 @@
     } else if (own['ui-flex'] === undefined) {
       // 没有操作按钮时行元素本身承载这一行的字段
       out['ui-row'] = rowRows(col) || undefined;
-      out.class = joinClass('mb-xs', own.class ?? 'n-sl-sub');
+      out.class = joinClass('mb-xs', own.class ?? 'n-sm-sub');
     }
     return out;
   };
-  const rowBox = (col: any) => ({ class: 'flex-block n-sl-sub', 'ui-row': rowRows(col) || undefined });
+  const rowBox = (col: any) => ({ class: 'flex-fill n-sm-sub', 'ui-row': rowRows(col) || undefined });
   const rowProps = (col: any, row: any, i: number) => ({
     ...levelProps(),
     form: col._array.child,

package/src/components/loader/FormLoader/FormRender.vue

@@ -2,7 +2,7 @@
   <button v-if="bare && col.model[0] === 'Button'" type="button" ui-btn="@a s" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></button>
   <div v-else-if="bare && col.model[0] === 'Html' && trusted" v-bind="contentAttrs" v-on="events" v-html="displayOf(col, ctx)"></div>
   <div v-else-if="bare" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></div>
-  <div v-else ref="root" class="flex-block pr" @focusout="col._touched = true">
+  <div v-else ref="root" class="flex-fill pr" @focusout="col._touched = true">
     <slot v-if="custom" />
     <button v-else-if="col.model[0] === 'Button'" type="button" ui-btn="@a s" v-bind="contentAttrs" v-on="events"><template v-if="plain !== null">{{ plain }}</template><FieldExtra v-else :value="displayOf(col, ctx)" :trusted="trusted" /></button>
     <div v-else-if="col.model[0] === 'Html' && trusted" v-bind="contentAttrs" v-on="events" v-html="displayOf(col, ctx)"></div>
@@ -17,7 +17,7 @@
       v-on="controlEvents"
       @update:modelValue="update"
     />
-    <FieldMessage :col="col" :mode="mode" />
+    <FieldMessage :col="col" :mode="mode" :native="nativeTips" />
   </div>
 </template>
 <script lang="ts">
@@ -278,14 +278,16 @@
   };
 
   export const FieldMessage = defineComponent({
-    props: ['col', 'mode'],
+    // native：控件自己用 ui-form-tips 显示错误，这里只留隐藏文本给读屏关联
+    props: ['col', 'mode', 'native'],
     // 没有内容时返回空数组：客户端渲染不留占位注释
     setup: (props) => () => props.mode !== 'view' ? [
       props.col.model?.[1]?.verify && props.col._checked
         ? h('i', { 'ui-form-verify': props.col._error ? 'no' : isEmpty(props.col._data?.[props.col.field]) ? '' : 'ok', 'aria-hidden': 'true' }) : null,
       props.col._error ? h('p', { id: `${props.col._fid}-error`, 'data-field-error': props.col.field,
-          role: props.col._error.type === 'warn' ? 'status' : 'alert',
-          class: `mt-xs ${props.col._error.type === 'warn' ? 'co-warn' : 'co-risk'}` }, props.col._error.msg) : null,
+          role: props.native ? undefined : props.col._error.type === 'warn' ? 'status' : 'alert',
+          hidden: props.native || undefined,
+          class: props.native ? undefined : `mt-xs ${props.col._error.type === 'warn' ? 'co-warn' : 'co-risk'}` }, props.col._error.msg) : null,
     ].filter(Boolean) : [],
   });
 
@@ -470,10 +472,18 @@
   };
 
   // FormLoader 自己的参数只传给声明了它们的控件，避免落到 Radio、Gallery 等控件的 DOM 上。
-  const formOnly = ['interacted', 'rules', 'verify', 'co', 'format', 'empty'];
+  const formOnly = ['interacted', 'rules', 'verify', 'co', 'tips', 'format', 'empty'];
+  const declaresOf = (entry: any, key: string) => {
+    const declared: any = entry?.component?.props;
+    return !declared || (isArray(declared) ? declared.includes(key) : Object.prototype.hasOwnProperty.call(declared, key));
+  };
+  // 控件声明了 tips + interacted（Input 及包着 Input 的选择、日期控件）就用它原生的 ui-form-tips 气泡显示错误，不另起一行；
+  // Upload 等的 tips 是悬停说明，不算
+  const nativeTips = computed(() => !props.custom && !!(props.entry?.component as any)?.props && declaresOf(props.entry, 'tips') && declaresOf(props.entry, 'interacted'));
   const controlProps = computed(() => {
     const { col, entry, mode } = props;
     const options = col.model?.[1] || {};
+    const error = mode !== 'view' && nativeTips.value ? col._error : null;
     const merged: Record<string, any> = {
       interacted: props.interacted,
       options: entry?.options ? col.enums : undefined,
@@ -481,13 +491,14 @@
       rules: [],
       verify: false,
       co: col._error?.type || options.co,
+      tips: error?.msg || options.tips,
+      ...(error ? { interacted: true } : {}),
       readonly: mode === 'view' ? true : options.readonly,
       disabled: mode === 'view' ? true : options.disabled,
     };
-    const declared: any = (entry?.component as any)?.props;
     // 没有声明 props 的自定义注册控件可能通过 $attrs 读取这些参数，保持透传。
-    const declares = (key: string) => !declared || (isArray(declared) ? declared.includes(key) : Object.prototype.hasOwnProperty.call(declared, key));
-    formOnly.forEach((key) => { if (!declares(key)) delete merged[key]; });
+    formOnly.forEach((key) => { if (!declaresOf(entry, key)) delete merged[key]; });
+    if (merged.tips === undefined) delete merged.tips;
     if (merged.options === undefined) delete merged.options;
     return merged;
   });