@neatui/nuxt 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "NeatUI component library for Nuxt 3",
   "main": "./src/index.ts",
   "license": "MIT",

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

@@ -3,18 +3,23 @@
     <template v-for="(col, idx) in state.form" :key="idx">
       <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
         <template v-if="col.label">
-          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" :class="labelClass">
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
+              <span>{{ formatLabel(col) }}</span>
             </template>
           </h6>
-          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
+          <p
+            v-else
+            :class="[labelClass, `${clh({ ...(col.model[1] || {}) })}`]"
+            :style="`width:${state._lw + 'em'}; max-width:50%;`"
+            class="ar nr-sm flex-fixed o-ls"
+          >
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
+              <span>{{ formatLabel(col) }}</span>
             </template>
           </p>
         </template>
@@ -262,6 +267,16 @@
       type: [String, Number],
       default: '',
     },
+    // label冒号控制，false不显示，string自定义字符
+    colon: {
+      type: [Boolean, String],
+      default: true,
+    },
+    // 统一的label class
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
     // 是否垂直排列
     vertical: {
       type: Boolean,
@@ -269,6 +284,21 @@
     },
   });
 
+  // label展示文案，支持全局/单个字段开关冒号
+  const formatLabel = (col: any = {}) => {
+    const { label = '', colon: localColon = undefined } = col || {};
+    if (!label) return '';
+    if (/[:：]\s*$/.test(label)) return label;
+    const suffix = (() => {
+      if (localColon === false) return '';
+      if (isString(localColon)) return localColon;
+      if (localColon === true) return ':';
+      if (isString(props.colon)) return props.colon;
+      return props.colon ? ':' : '';
+    })();
+    return suffix ? `${label}${suffix}` : label;
+  };
+
   // 数据
   const state: any = reactive({
     form: [],