@neatui/vue 5.1.10 → 5.1.11

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @neatui/vue 更新记录
+
+## 5.1.11
+
+- FormLoader 新增 `mode="read"`：保留表单控件，统一设置 `disabled`；禁止字段写回、数组增删和排序，隐藏校验提示。插槽的 `bind.disabled` 同步为 `true`，自定义控件需绑定该属性。
+- FormLoader 的 `字段名-value` 插槽仅在 `view` 模式使用；`read` 使用普通控件或字段插槽。
+- Select、树选择、多选、分页选择和搜索选择的搜索区域在移动端撑满宽度。
+- CSS 依赖更新为 `@neatui/css@^5.1.11`。该版本包含不兼容的 Grid 间距语法调整：`ui-grid="3 mm"` 改为 `ui-grid="3" class="gap-mm"`，裸 `lm` 改为左侧垂直居中。响应式间距的前缀规则不同，请阅读 CSS 包随附的 `CHANGELOG.md` 进行迁移。

package/README.md

@@ -1,5 +1,7 @@
 # @neatui/vue
 
+升级说明见 [更新记录](./CHANGELOG.md)，5.1.11 包含 FormLoader read 模式及 CSS Grid 间距迁移说明。
+
 NeatUI Vue component package for Vue 3 and Nuxt projects.
 
 Nuxt users should use `@neatui/vue` directly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "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.10",
+    "@neatui/css": "^5.1.11",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",
@@ -52,6 +52,7 @@
   "files": [
     "src",
     "README.md",
+    "CHANGELOG.md",
     "MIGRATION-5.0.md"
   ]
 }

package/src/components/form/MoreSelect.vue

@@ -13,7 +13,7 @@
         </Input>
       </slot>
       <template #tips>
-        <div v-if="search" class="ny-sm nx-sl">
+        <div v-if="search" class="ny-sm nx-sl mob:w-full">
           <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>

package/src/components/form/MoreSelectTree.vue

@@ -9,7 +9,7 @@
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips v-if="!disabled && !readonly">
-        <div v-if="search" class="nb-sm nx-sl">
+        <div v-if="search" class="nb-sm nx-sl mob:w-full">
           <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>

package/src/components/form/PageMoreSelect.vue

@@ -7,7 +7,7 @@
         </Input>
       </slot>
       <template #tips>
-        <div v-if="filterable" class="ny-sm nx-sl" style="height: 3em">
+        <div v-if="filterable" class="ny-sm nx-sl mob:w-full" style="height: 3em">
           <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">

package/src/components/form/PageSelect.vue

@@ -5,7 +5,7 @@
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips>
-        <div v-if="filterable" class="ny-sm nx-sl" style="height: 3em">
+        <div v-if="filterable" class="ny-sm nx-sl mob:w-full" style="height: 3em">
           <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">

package/src/components/form/SearchMoreSelect.vue

@@ -5,7 +5,7 @@
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips>
-        <div class="ny-sm nx-sl" style="height: 3em">
+        <div class="ny-sm nx-sl mob:w-full" style="height: 3em">
           <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">

package/src/components/form/SearchSelect.vue

@@ -9,7 +9,7 @@
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips v-if="!readonly || !disabled">
-        <div v-if="search" class="ny-sm nx-sl">
+        <div v-if="search" class="ny-sm nx-sl mob:w-full">
           <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>

package/src/components/form/Select.vue

@@ -12,7 +12,7 @@
         </template>
       </Input>
       <template #tips v-if="!readonly && !disabled">
-        <div v-if="search" class="ny-sm nx-sl">
+        <div v-if="search" class="ny-sm nx-sl mob:w-full">
           <Input v-model="state.search" :theme="theme" :sz="sz">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>

package/src/components/form/SelectTree/SelectTree.vue

@@ -9,7 +9,7 @@
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips v-if="!readonly || !disabled">
-        <div v-if="search" class="nb-sm nx-sl">
+        <div v-if="search" class="nb-sm nx-sl mob:w-full">
           <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>

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

@@ -92,8 +92,8 @@
               <FieldMessage :col="col" :mode="mode" />
             </div>
 
-            <FormRender v-else :col="col" :mode="mode" :entry="resolveEntry(col)" :interacted="touched" :ctx="context()" :custom="(!editable && hasSlot(`${col.field}-value`)) || !resolveEntry(col)">
-              <slot v-if="!editable && hasSlot(`${col.field}-value`)" :name="`${col.field}-value`" v-bind="fieldScope(col)"></slot>
+            <FormRender v-else :col="col" :mode="mode" :entry="resolveEntry(col)" :interacted="touched" :ctx="context()" :custom="(mode === 'view' && hasSlot(`${col.field}-value`)) || !resolveEntry(col)">
+              <slot v-if="mode === 'view' && hasSlot(`${col.field}-value`)" :name="`${col.field}-value`" v-bind="fieldScope(col)"></slot>
               <template v-else>
                 <slot v-if="col.slot" :name="col.slot" v-bind="fieldScope(col)"></slot>
                 <slot v-else-if="col.model[0]" :name="col.model[0]" v-bind="fieldScope(col)"></slot>
@@ -591,7 +591,7 @@
       type: Boolean,
       default: false,
     },
-    // edit 编辑 | view 查看
+    // edit 编辑 | read 禁用控件 | view 查看
     mode: {
       type: String,
       default: 'edit',
@@ -693,7 +693,7 @@
     shared.revision++;
     if (!props.root) shared.dataVersion.value++;
   }, { deep: true, flush: 'sync' });
-  const editable = computed(() => props.mode !== 'view');
+  const editable = computed(() => props.mode !== 'view' && props.mode !== 'read');
   // 调用过 validate 后所有字段展示校验状态
   const touched = computed(() => props.interacted || shared.state.validated);
 

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

@@ -252,7 +252,7 @@
   };
   // 内置控件和插槽使用相同写回规则，查看模式不接受写入。
   export const writeValue = (col: any, value: any, ctx: FormContext) => {
-    if (!col.field || ctx.mode === 'view') return;
+    if (!col.field || ctx.mode === 'view' || ctx.mode === 'read') return;
     const binding = col.value;
     col._data[col.field] = valueBinding(binding) && typeof binding.set === 'function' ? binding.set(value, ctx) : value;
   };
@@ -281,7 +281,7 @@
     // native：控件自己用 ui-form-tips 显示错误，这里只留隐藏文本给读屏关联
     props: ['col', 'mode', 'native'],
     // 没有内容时返回空数组：客户端渲染不留占位注释
-    setup: (props) => () => props.mode !== 'view' ? [
+    setup: (props) => () => props.mode !== 'view' && props.mode !== 'read' ? [
       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,
@@ -466,6 +466,7 @@
     return rest;
   });
   const update = (value: any) => {
+    if (props.mode === 'view' || props.mode === 'read') return;
     props.col._touched = true;
     writeValue(props.col, value, props.ctx);
     events.value['update:modelValue']?.(value);
@@ -483,7 +484,7 @@
   const controlProps = computed(() => {
     const { col, entry, mode } = props;
     const options = col.model?.[1] || {};
-    const error = mode !== 'view' && nativeTips.value ? col._error : null;
+    const error = mode !== 'view' && mode !== 'read' && nativeTips.value ? col._error : null;
     const merged: Record<string, any> = {
       interacted: props.interacted,
       options: entry?.options ? col.enums : undefined,
@@ -494,7 +495,8 @@
       tips: error?.msg || options.tips,
       ...(error ? { interacted: true } : {}),
       readonly: mode === 'view' ? true : options.readonly,
-      disabled: mode === 'view' ? true : options.disabled,
+      // read 保留控件，统一使用 disabled 呈现不可编辑状态。
+      disabled: mode === 'view' || mode === 'read' ? true : options.disabled,
     };
     // 没有声明 props 的自定义注册控件可能通过 $attrs 读取这些参数，保持透传。
     formOnly.forEach((key) => { if (!declaresOf(entry, key)) delete merged[key]; });
@@ -516,7 +518,7 @@
     const el = root.value;
     // 非 DOM 渲染环境（SSR、自定义渲染器）没有查询接口
     if (!el || typeof el.querySelectorAll !== 'function') return;
-    const errorId = props.col._error && props.mode !== 'view' ? `${props.col._fid}-error` : '';
+    const errorId = props.col._error && props.mode !== 'view' && props.mode !== 'read' ? `${props.col._fid}-error` : '';
     el.querySelectorAll<HTMLElement>(inputs).forEach((node) => {
       if (errorId) {
         node.setAttribute('aria-invalid', 'true');