@neatui/nuxt 0.1.0 → 1.0.0

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="w-full" 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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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="w-full"
+          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';
@@ -189,7 +187,7 @@
   import {
     Input,
     Switch,
-    TextArea,
+    Textarea,
     Select,
     SelectList,
     SelectTags,
@@ -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(() => {