@neatui/vue 2.7.1 → 2.7.3

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

@@ -1,186 +1,184 @@
 <template>
-  <slot>
-    <div :ui-row="rows" class="n-sl-sub">
-      <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">
-              <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>
-              </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">
-              <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>
-              </template>
-            </p>
-          </template>
-          <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="full-w" v-bind="{ ...(col.model[1] || {}) }" />
-          <Select
-            v-else-if="col.model[0] === 'Select'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></Select>
-          <SelectList
-            v-else-if="col.model[0] === 'SelectList'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectTags
-            v-else-if="col.model[0] === 'SelectTags'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectPicker
-            v-else-if="col.model[0] === 'SelectPicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchSelect
-            v-else-if="col.model[0] === 'SearchSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelect
-            v-else-if="col.model[0] === 'MoreSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectList
-            v-else-if="col.model[0] === 'MoreSelectList'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectTags
-            v-else-if="col.model[0] === 'MoreSelectTags'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectPicker
-            v-else-if="col.model[0] === 'MoreSelectPicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchMoreSelect
-            v-else-if="col.model[0] === 'SearchMoreSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <PageSelect
-            v-else-if="col.model[0] === 'PageSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectTree
-            v-else-if="col.model[0] === 'SelectTree'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <DatePicker
-            v-else-if="col.model[0] === 'DatePicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <DateRangePicker
-            v-else-if="col.model[0] === 'DateRangePicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <TextArea
-            v-else-if="col.model[0] === 'TextArea'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></TextArea>
-          <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
-          <Cascader
-            v-else-if="col.model[0] === 'Cascader'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <template v-else>
-            <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
-            <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
-            <slot v-else :name="col.field" :col="col"></slot>
-          </template>
-        </div>
-      </template>
-      <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
-        <div v-if="vertical">
-          <slot name="submit"></slot>
-        </div>
-        <div v-else :style="`padding-left:${state._lw + 'em'};`">
-          <slot name="submit"></slot>
-        </div>
+  <div :ui-row="rows" class="n-sl-sub">
+    <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">
+            <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>
+            </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">
+            <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>
+            </template>
+          </p>
+        </template>
+        <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="full-w" v-bind="{ ...(col.model[1] || {}) }" />
+        <Select
+          v-else-if="col.model[0] === 'Select'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></Select>
+        <SelectList
+          v-else-if="col.model[0] === 'SelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTags
+          v-else-if="col.model[0] === 'SelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectPicker
+          v-else-if="col.model[0] === 'SelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchSelect
+          v-else-if="col.model[0] === 'SearchSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelect
+          v-else-if="col.model[0] === 'MoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectList
+          v-else-if="col.model[0] === 'MoreSelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectTags
+          v-else-if="col.model[0] === 'MoreSelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectPicker
+          v-else-if="col.model[0] === 'MoreSelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchMoreSelect
+          v-else-if="col.model[0] === 'SearchMoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <PageSelect
+          v-else-if="col.model[0] === 'PageSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTree
+          v-else-if="col.model[0] === 'SelectTree'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DatePicker
+          v-else-if="col.model[0] === 'DatePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DateRangePicker
+          v-else-if="col.model[0] === 'DateRangePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <TextArea
+          v-else-if="col.model[0] === 'TextArea'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></TextArea>
+        <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
+        <Cascader
+          v-else-if="col.model[0] === 'Cascader'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <template v-else>
+          <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
+          <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
+          <slot v-else :name="col.field" :col="col"></slot>
+        </template>
+      </div>
+    </template>
+    <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
+      <div v-if="vertical">
+        <slot name="submit"></slot>
+      </div>
+      <div v-else :style="`padding-left:${state._lw + 'em'};`">
+        <slot name="submit"></slot>
       </div>
     </div>
-  </slot>
+  </div>
 </template>
 <script lang="ts" setup>
   import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';
@@ -206,7 +204,7 @@
     SearchMoreSelect,
     ImgUpload,
     Upload,
-    Cascader
+    Cascader,
   } from '../../form';
   import { Tree } from '../../display';
 
@@ -240,39 +238,39 @@
     // 用户是否交互
     interacted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // JSON规则
     form: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 表单数据
     data: {
       type: Object as any,
-      default: () => ({})
+      default: () => ({}),
     },
     // 栅格系统
     rows: {
       type: String,
-      default: 'mob-24 pad-12 dpc-8'
+      default: 'mob-24 pad-12 dpc-8',
     },
     // 如果表单是数组的话这里传入下标
     idx: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 是否垂直排列
     vertical: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 数据
   const state: any = reactive({
     form: [],
-    _lw: 6
+    _lw: 6,
   });
 
   // 监听结构
@@ -384,13 +382,13 @@
             },
             {
               deep: true,
-              immediate: true
-            }
-          )
+              immediate: true,
+            },
+          ),
         );
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 处理
@@ -411,7 +409,7 @@
         }
       });
     },
-    { deep: true }
+    { deep: true },
   );
 
   onBeforeUnmount(() => {

package/src/components/loader/TableLoader/TableColView.vue

@@ -16,21 +16,7 @@
     <div v-if="json.model === 'Image'" :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" ui-img="@a read :round" v-bind="json.attrs" v-on="event(json, data)">
       <img :src="json.value || data[json.field] || DefaultImage" alt="" />
     </div>
-    <div
-      v-else
-      :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'"
-      v-bind="json.attrs"
-      v-on="event(json, data)"
-      v-html="
-        json.value !== null && json.value !== undefined
-          ? isFunction(json.value)
-            ? json.value(json)
-            : json.value
-          : findEnumName(json.enums, data[json.field]) !== null && findEnumName(json.enums, data[json.field]) !== undefined
-            ? findEnumName(json.enums, data[json.field])
-            : '‐‐'
-      "
-    ></div>
+    <div v-else :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" v-bind="json.attrs" v-on="event(json, data)" v-html="value(json, data)"></div>
   </template>
 </template>
 <script lang="ts" setup>
@@ -71,12 +57,12 @@
   const props: any = defineProps({
     col: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     data: {
       type: [Object],
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   });
 
   // 运行函数计算
@@ -97,6 +83,16 @@
 
   const json = computed(() => runfun(deepcopy(props.col)));
 
+  const value = (json: any, data: any) => {
+    return json.value !== null && json.value !== undefined
+      ? isFunction(json.value)
+        ? json.value(json)
+        : json.value
+      : findEnumName(json.enums, data[json.field]) !== null && findEnumName(json.enums, data[json.field]) !== undefined
+        ? findEnumName(json.enums, data[json.field])
+        : '‐‐';
+  };
+
   // 事件处理
   const event: any = (col: any, data: any): object => {
     const _event: any = {};