@neatui/vue 2.11.0 → 2.15.0

package/src/components/loader/FormLoader/FormRender@v3.vue.backup

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

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

@@ -0,0 +1,85 @@
+<template>
+  <template v-for="(item, index) in $nodes" :key="item.paths">
+    <div class="fekit-node-loader" :data-level="level" :data-index="index" :data-paths="item.paths" v-bind="item.attrs" v-on="item.$events" v-html="item.value"></div>
+    <NodeLoader v-if="item.child" :nodes="item.child" :level="$level" :index="index" :paths="item.paths" />
+  </template>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import NodeLoader from './NodeLoader.vue';
+
+  interface NodeProps {
+    label?: string | ((data: any) => string);
+    field?: string | ((data: any) => string);
+    model?: string | ((data: any) => string);
+    attrs?: Record<string, any> | ((data: any) => Record<string, any>);
+    clear?: boolean | ((data: any) => boolean);
+    media?: string | ((data: any) => string);
+    value?: any | ((data: any) => any);
+    event?: Record<string, any> | ((data: any) => Record<string, any>);
+    child?: NodeProps[];
+  }
+
+  interface Props {
+    nodes: NodeProps[];
+    level?: number;
+    index?: number;
+    paths?: string;
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    nodes: () => [],
+    level: 0,
+    index: 0,
+    paths: '',
+  });
+
+  const $nodes = computed(() => {
+    return props.nodes.map((item, index) => {
+      const paths = props.paths ? `${props.paths}-${index}` : `${index}`;
+      const context = { node: item, level: props.level, index, paths } as const;
+
+      let attrs: any = item.attrs;
+      if (typeof attrs === 'function') {
+        try {
+          attrs = attrs(context);
+        } catch {
+          /* noop */
+        }
+      }
+
+      let value: any = (item as any).value;
+      if (typeof value === 'function') {
+        try {
+          value = value(context);
+        } catch {
+          /* noop */
+        }
+      }
+
+      let ev: any = (item as any).event;
+      if (typeof ev === 'function') {
+        try {
+          ev = ev(context);
+        } catch {
+          ev = undefined;
+        }
+      }
+
+      const $events: Record<string, any> = {};
+      if (ev && typeof ev === 'object') {
+        for (const key in ev) {
+          const fn = ev[key];
+          if (typeof fn === 'function') {
+            $events[key] = (...args: any[]) => fn(context, ...args);
+          }
+        }
+      }
+
+      return { ...item, index, paths, attrs, value, $events } as any;
+    });
+  });
+
+  const $level = computed(() => {
+    return props.level + 1;
+  });
+</script>

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

@@ -170,7 +170,7 @@
         <div v-for="(item, idx) in node.other.suffix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
       </div>
     </div>
-    <div v-if="$slots.submit" class="full-x" ui-flex="row lm">
+    <div v-if="$slots.submit" class="w-full" ui-flex="row lm">
       <div class="flex-fixed" :style="labelcss(node)">&nbsp;</div>
       <div class="flex-block"><slot name="submit"></slot></div>
     </div>

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

@@ -2,12 +2,19 @@
   <div class="flex-block pr">
     <template v-if="mode === 'view'">
       <slot :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
-        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px"></div></div>
       </slot>
     </template>
     <template v-else>
-      <el-input v-if="node.model[0] === 'Input'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
-      <el-input v-if="node.model[0] === 'TextArea'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }" @input="setInteracted" @blur="setInteracted" />
+      <el-input v-if="node.model[0] === 'Input'" v-model="value" class="w-full" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
+      <el-input
+        v-if="node.model[0] === 'Textarea'"
+        v-model="value"
+        class="w-full"
+        v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      />
       <el-select v-else-if="node.model[0] === 'Select'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
         <el-option v-for="item in node.enums" :key="item.value" :label="item.label" :value="item.value"> </el-option>
       </el-select>
@@ -19,17 +26,35 @@
       </el-checkbox-group>
       <el-checkbox v-else-if="node.model[0] === 'Checkbox'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-checkbox>
       <el-switch v-else-if="node.model[0] === 'Switch'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-switch>
-      <el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-select>
-      <el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-picker>
-      <el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
-      <el-date-picker v-else-if="node.model[0] === 'DateTimePicker'" v-model="value" type="datetime" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
-      <el-cascader v-else-if="node.model[0] === 'Cascader'" v-model="value" :options="node.enums" v-bind="{ ...node.model[1] }" @input="setInteracted" @blur="setInteracted"></el-cascader>
+      <el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-time-select>
+      <el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-time-picker>
+      <el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-date-picker>
+      <el-date-picker
+        v-else-if="node.model[0] === 'DateTimePicker'"
+        v-model="value"
+        type="datetime"
+        v-bind="{ ...(node.model[1] || {}) }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      >
+      </el-date-picker>
+      <el-cascader
+        v-else-if="node.model[0] === 'Cascader'"
+        v-model="value"
+        :options="node.enums"
+        v-bind="{ ...node.model[1] }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      ></el-cascader>
       <gallery-value v-else-if="node.model[0] === 'SelectImg'" :form="data" :node="node" v-bind="{ ...node.model[1] }"></gallery-value>
       <!-- 自定义组件插槽 -->
       <slot v-else-if="node.model[0]" :name="node.model[0]" :data="data" :node="node" :bind.sync="bind"></slot>
       <!-- 自定义字段插槽 -->
       <slot v-else :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
-        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px"></div></div>
       </slot>
       <p v-show="error.verify === 'no'" class="form-loader-verify" :data-verify-type="error.co">{{ error.tips }}</p>
     </template>
@@ -44,28 +69,28 @@
     props: {
       mode: {
         type: String,
-        default: 'edit'
+        default: 'edit',
       },
       node: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       data: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       interacted: {
         type: Boolean,
-        default: false
-      }
+        default: false,
+      },
     },
     data() {
       return {
         _interacted: false,
         bind: {
-          value: null
+          value: null,
         },
-        error: {}
+        error: {},
       };
     },
     created() {},
@@ -99,8 +124,8 @@
             this.$set(this.data, this.node.field, value);
           }
           this.validate();
-        }
-      }
+        },
+      },
     },
     methods: {
       async validate() {
@@ -166,7 +191,7 @@
             this.validate();
           }, 50);
         }
-      }
+      },
     },
     watch: {
       bind: {
@@ -183,22 +208,22 @@
           this.$set(this.data, this.node.field, value);
           this.$set(this.bind, 'value', value);
         },
-        deep: true
+        deep: true,
       },
       interacted: {
         handler(val) {
           this._interacted = val;
           this.validate();
         },
-        deep: true
+        deep: true,
       },
       value: {
         handler() {
           this.validate();
         },
-        deep: true
-      }
-    }
+        deep: true,
+      },
+    },
   };
 </script>
 <style>

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -75,7 +75,7 @@
 <script setup lang="ts">
   import { nextTick, reactive, ref, watch, onMounted } from 'vue';
   import LayerLoader from './LayerLoader.vue';
-  import { useBasicStore, useWorksStore, storeToRefs } from '@/store';
+  import { useBasicStore, useWorksStore, storeToRefs } from '@/stores';
   import { deepcopy } from '@fekit/utils';
   import scrollto from '@fekit/scrollto';
 

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-x" ui-flex="row xt">
+  <div class="w-full" ui-flex="row xt">
     <div class="flex-block mr-mm-sub my-sm-sub" ui-flex="row lm wrap">
       <template v-for="(item, idx) in state.limit" :key="idx">
         <div v-if="!item._close" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">

package/src/components/loader/MoveLoader/MoveLoader.vue

@@ -46,8 +46,8 @@
     layer: {
       moveing: false,
       from: null,
-      correct: ''
-    }
+      correct: '',
+    },
   });
   const word: any = {};
 
@@ -61,7 +61,7 @@
   const props: any = withDefaults(defineProps<Props>(), {
     data: () => [],
     path: '',
-    line: true
+    line: true,
   });
 
   // 内部状态
@@ -267,7 +267,7 @@
         top: 1.5em;
         bottom: 0.5em;
         left: 0.6em;
-        background-color: var(--co-line-ls);
+        background-color: var(--co-line-o-ls);
       }
     }
 
@@ -388,7 +388,7 @@
   }
 
   [data-selected='true'] {
-    background: var(--co-main-ss) !important;
+    background: var(--co-main-o-ss) !important;
   }
 
   .fekit-json-tree-tools {
@@ -451,7 +451,7 @@
       left: 0;
       top: 0;
       z-index: 1;
-      box-shadow: inset 0 1px 0 0 var(--co-main-ls);
+      box-shadow: inset 0 1px 0 0 var(--co-main-o-ls);
     }
 
     // &[tree-level='2'] {
@@ -478,7 +478,7 @@
       left: 0;
       top: 0;
       z-index: 1;
-      box-shadow: inset 0 0 0 1px var(--co-main-ls);
+      box-shadow: inset 0 0 0 1px var(--co-main-o-ls);
     }
   }
   // 插入后面
@@ -493,7 +493,7 @@
       left: 0;
       top: 0;
       z-index: 1;
-      box-shadow: inset 0 -1px 0 0 var(--co-main-ls);
+      box-shadow: inset 0 -1px 0 0 var(--co-main-o-ls);
     }
 
     // &[tree-level='2'] {

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

@@ -15,7 +15,7 @@
   <template v-else>
     <div v-if="model.value" v-bind="attrs" v-on="event">
       <div v-if="model.value === 'image'" ui-cover="1:1" v-bind="model.attrs">
-        <div class="pa full bg-case-ls r-sm ot-no ol-no" :class="state.isloaded ? 'o-no' : 'o-ms'" ui-flex="col cm"><i ui-load="@d"></i></div>
+        <div class="pa full bg-case-o-ls r-sm ot-no ol-no" :class="state.isloaded ? 'o-no' : 'o-ms'" ui-flex="col cm"><i ui-load="@d"></i></div>
         <img ref="img" class="r-sm" :src="value" @load="state.isloaded = 1" />
       </div>
       <label v-else-if="model.value === 'switch'" ui-form="@a type:switch" @click.prevent>

package/src/components/loader/index.ts

@@ -1,4 +1,4 @@
-import FormLoader from './FormLoader';
+import FormLoader from './FormLoader/FormLoader@v2.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';

package/src/components/tools/Pagination@a.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ui-pagination="@a" class="full-x pading" ui-flex="row rm">
+  <div ui-pagination="@a" class="w-full pading" ui-flex="row rm">
     <div class="ml-sl ar mob-ac" ui-flex="row rm">
       <div class="mx-ss-sub" ui-flex="row">
         <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>

package/tsconfig.json

@@ -19,6 +19,6 @@
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/shims-vue.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/shims-vue.d.ts", "src/components/loader/FormLoader/FormRender@v3.vue.backup", "src/components/loader/FormLoader/FormLoader@v3.vue.backup"],
   "exclude": ["node_modules"]
 }

package/src/components/loader/FormLoader/index.ts

@@ -1,2 +0,0 @@
-import FormLoader from './FormLoader@v2.vue';
-export default FormLoader;