@neatui/vue 5.1.0 → 5.1.2

package/MIGRATION-5.0.md

@@ -60,6 +60,10 @@ 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 时同样不加默认间距（与根元素规则一致）。
+- `media: false`：这一层不用栅格，自身不带 ui-col，分组 / 数组的下一层也不带 ui-row；ui-col 只在所在层有栅格时输出；`rows=""` 时根元素不再输出空的 ui-row。
 - 标题与内容均可递归组合；数组支持默认值、数量限制、增删排序和行上下文。
 - 新增 `setErrors`（回填服务端错误）、`isDirty / getChanges`（未保存改动）、`setBaseline`（设置重置基线）、`getData({ visibleOnly })`（去掉隐藏字段），`validate({ paths })` 支持局部校验。在同一对象上用 `Object.assign` 加载记录后调用 `setBaseline()`。
 - `validate()` 等待异步联动并检查最新数据；`reset()` 恢复当前数据对象的初始状态；`clearValidate()` 取消未完成校验。

package/package.json

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

@@ -10,7 +10,7 @@
         ref="tip"
         :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
         :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-        ui-tips="@a"
+        :ui-tips="theme"
         :ui-tips-view="state.show ? 1 : 0"
         @mouseover="hovershow"
         @mouseout="hoverhide"
@@ -43,6 +43,7 @@
 
   // 类型
   interface Props {
+    theme?: string;
     modelValue?: string | number;
     pos?: string;
     event?: string;
@@ -62,6 +63,7 @@
 
   // 入参
   const props: any = withDefaults(defineProps<Props>(), {
+    theme: '@a',
     modelValue: 0,
     pos: 'bl',
     event: 'click',
@@ -372,7 +374,7 @@
         touch-action: none !important;
       }
 
-      &[ui-tips~='@a'] [ui-tips-box] {
+      &[ui-tips] [ui-tips-box] {
         position: relative !important;
 
         width: 100% !important;

package/src/components/basic/IRouterView.vue

@@ -316,7 +316,7 @@
     .side-preview {
       min-width: 10rem;
       height: 100%;
-      box-shadow: -0.25em 0 0.5em rgba(0, 0, 0, 0.05);
+      box-shadow: -0.25em 0 0.5em var(--co-deep-o-mm);
       pointer-events: auto;
 
       &[ui-card~='@a'][ui-card~=':max'] {

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
+    <IFollowView :theme="popupTheme"
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
       pos="bl"
@@ -41,7 +41,7 @@
                   class="ux-hover nx-sm r-ss nowrap"
                   @click="select(item, optIndex)"
                 >
-                  <IFollowView v-if="item.optTips" event="hover">
+                  <IFollowView :theme="popupTheme" v-if="item.optTips" event="hover">
                     <div ui-flex="row xm">
                       <span :class="`${state.transSelected.value[optIndex] === item.value ? 'co-main' : ''}`"> {{ item.label || item }}</span>
                       <i v-if="item.children?.length" :class="`icon icon-next ${state.transSelected.value[optIndex] === item.value ? 'co-main' : 'co-note'}`"></i>
@@ -95,6 +95,7 @@
 
   const props = defineProps({
     theme: { type: String, default: '@a' },
+    popupTheme: { type: String, default: '@a' },
     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 ref="ifollow">
+    <IFollowView :theme="popupTheme" 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"
@@ -46,6 +46,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -76,6 +77,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     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 ref="ifollow">
+    <IFollowView :theme="popupTheme" 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"
@@ -39,6 +39,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -69,6 +70,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     sz: '',
     co: '',
     block: true,

package/src/components/form/Input.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''} ${preview ? 'preview' : ''}`"
+    :ui-form="[theme, sz && `sz:${sz}`, state.error.co, 'type:input', block && ':block', disabled && 'disabled', readonly && 'readonly', preview && 'preview'].filter(Boolean).join(' ')"
     @click="emits('click', $event)"
   >
     <div v-if="state.interacted" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>

package/src/components/form/InputNumber.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="[theme, sz && `sz:${sz}`, state.error.co, 'type:input', block && ':block', disabled && 'disabled', readonly && 'readonly'].filter(Boolean).join(' ')"
     @click="emits('click', $event)"
   >
     <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>

package/src/components/form/InputRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`${theme} sz:${sz} ${state.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`" @click="emits('click', $event)">
+  <div :ui-form="[theme, sz && `sz:${sz}`, state.co, 'type:input', block && ':block', disabled && 'disabled', readonly && 'readonly'].filter(Boolean).join(' ')" @click="emits('click', $event)">
     <div v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</div>
     <div ui-form-prefix="">
       <template v-for="(item, idx) in prefix" :key="idx">

package/src/components/form/MoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :theme="popupTheme" ref="ifollow" 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 }"
@@ -107,6 +107,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -135,6 +136,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     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 ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :theme="popupTheme" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" 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"
@@ -102,6 +102,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -131,6 +132,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     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 ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :theme="popupTheme" ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
       <slot>
         <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
           <template #suffix><i ui-form-select=""></i></template>
@@ -60,6 +60,7 @@
 
   const props: any = defineProps({
     theme: { type: String, default: '@a' },
+    popupTheme: { type: String, default: '@a' },
     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 ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+    <IFollowView :theme="popupTheme" ref="ifollow" tipBoxClass="ny-sm nx-no" 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>
@@ -55,6 +55,7 @@
       default: false,
     },
     theme: { type: String, default: '@a' },
+    popupTheme: { type: String, default: '@a' },
     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 ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :theme="popupTheme" ref="ifollow" tipBoxClass="ny-sm nx-no" 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>
@@ -59,6 +59,7 @@
       default: false,
     },
     theme: { type: String, default: '@a' },
+    popupTheme: { type: String, default: '@a' },
     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 ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :theme="popupTheme" ref="ifollow" tipBoxClass="ny-sm nx-no" 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"
@@ -100,6 +100,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -131,6 +132,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     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 ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :theme="popupTheme" ref="ifollow" tipBoxClass="ny-sm nx-no" 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"
@@ -127,6 +127,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -161,6 +162,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     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 ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :theme="popupTheme" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" 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"
@@ -96,6 +96,7 @@
     placeholder?: string;
     rules?: Array<object>;
     theme?: string;
+    popupTheme?: string;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -130,6 +131,7 @@
     placeholder: '',
     rules: () => [],
     theme: '@a',
+    popupTheme: '@a',
     sz: '',
     co: '',
     block: true,

package/src/components/form/Textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${isAutoHeight ? 'auto-height' : ''} ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="[theme, sz && `sz:${sz}`, state.error.co, 'type:textarea', isAutoHeight && 'auto-height', block && ':block', disabled && 'disabled', readonly && 'readonly'].filter(Boolean).join(' ')"
     @click="emits('click', $event)"
   >
     <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>

package/src/components/form/TimePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`${theme} type:input ${disabled ? 'disabled' : ''}`">
+  <div :ui-form="[theme, 'type:input', disabled && 'disabled'].filter(Boolean).join(' ')">
     <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>