free-fe-core-modules 0.0.24 → 0.0.26

package/components/Basic/BreadCrumbs.vue

@@ -9,7 +9,7 @@
     />
     <q-space></q-space>
     <q-btn v-if="meta.length > 0 && canBack"
-      flat icon="keyboard_arrow_left" @click="back">{{$t(backText)}}</q-btn>
+      flat :icon="backIcon" @click="back">{{$t(backText)}}</q-btn>
   </q-breadcrumbs>
 </template>
 
@@ -24,6 +24,7 @@ export default defineComponent({
   props: {
     canBack: { type: Boolean, default: true },
     backText: { type: String, default: '返回' },
+    backIcon: { type: String, default: 'keyboard_arrow_left' },
   },
   setup() {
     const router = useRouter();

package/components/Basic/SummaryHead.vue

@@ -33,6 +33,7 @@
         <q-btn
           flat
           round
+          :disable="item.disable"
           class="summary-head-btn"
           v-if="item.button"
           @click="button_clicked(item)">
@@ -133,7 +134,11 @@ export default defineComponent({
       return item.number;
     },
     button_clicked(item) {
+      if (item.disable) return;
+
+      item.disable = true;
       Promise.resolve(typeof item.action === 'function' ? item.action(item) : '').then(() => {
+        item.disable = false;
         if (item.event) {
           if (item.event_params) {
             this.Bus?.$emit(item.event, item.event_params);
@@ -150,6 +155,8 @@ export default defineComponent({
 
           this.router.push(item.route);
         }
+      }).catch(() => {
+        item.disable = false;
       });
     },
   },

package/composible/useObjectData.js

@@ -31,8 +31,11 @@ export function useObjectData(props, ctx) {
 
   const refreshData = (...args) => {
     // support multiple get data functions
+    let hasMultipleGetData = false;
+
     const getDataList = [];
     if (Array.isArray(props.GetData)) {
+      hasMultipleGetData = true;
       getDataList.push(...props.GetData);
     } else {
       getDataList.push(props.GetData);
@@ -45,12 +48,20 @@ export function useObjectData(props, ctx) {
 
       if (typeof getData === 'function') {
         Promise.resolve(getData(...args)).then((d) => {
-          Object.assign(data.value, unref(d));
+          if (hasMultipleGetData) {
+            Object.assign(data.value, unref(d[0]));
+          } else {
+            data.value = unref(d);
+          }
         }).finally(() => {
           callsLeft.value --;
         });
       } else {
-        Object.assign(data.value, unref(getData));
+        if (hasMultipleGetData) {
+          Object.assign(data.value, unref(getData[0]));
+        } else {
+          data.value = unref(getData);
+        }
         callsLeft.value --;
       }
     }

package/free-field/Fields/Column.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="free-field-column column" :class="columnClasses" v-if="Field">
     <free-field
-      v-for="(field, idx) in Field.Options?.List"
+      v-for="(field, idx) in Field.Options?.Fields"
       :Field="field"
       :values="fieldData"
       :key="idx"
-      @input="$emit('input')"></free-field>
+      ref="fieldsToValidate"
+      @input="$emit('input', field)"></free-field>
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 import { freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldColumn',
@@ -26,7 +28,7 @@ export default defineComponent({
       {
         Label: '不换行',
         Name: 'Options.NoWrap',
-        Type: 'Bollean',
+        Type: 'Boolean',
       },
       {
         Label: '横向对齐',
@@ -80,7 +82,7 @@ export default defineComponent({
       },
       {
         Label: '字段',
-        Name: 'Options.List',
+        Name: 'Options.Fields',
         Type: 'FieldList',
         Options: {
           Columns: [
@@ -117,6 +119,15 @@ export default defineComponent({
     ],
     Description: '',
   },
+  setup(props) {
+    if(!props.Field) return () => null;
+
+    const { validate } = useFormValidator('fieldsToValidate');
+
+    return {
+      validate,
+    }
+  },
   computed: {
     columnClasses() {
       return this.Field.Options?.NoWrap ? 'nowrap' : '' + this.Field.Options?.ItemsAlign + ' ' + this.Field.Options?.JustifyAlign;

package/free-field/Fields/DynamicList.js

@@ -224,7 +224,7 @@ export default defineComponent({
         for (let i = 0; i < tableData.value.length; i += 1) {
           const td = tableData.value[i];
 
-          td.auto__index = i;
+          td.auto__index = td.auto__index || i;
         }
       }
     });

package/free-field/Fields/MixedTable.vue

@@ -33,7 +33,7 @@
       </template>
       <template v-slot:body>
         <q-tr
-          v-for="(r,index) in (Field.Options?.Rows || [])"
+          v-for="(r,index) in localRows"
           :key="index"
           :class="((index || 0) % 2) ? 'row-zebra-odd' : 'row-zebra-even'"
         >
@@ -218,7 +218,9 @@ export default defineComponent({
           d.Options.Rows[i] = d.Options.Rows[i] || {};
 
           // set data row index
-          d.Options.Rows[i].auto__index = `${i + 1}`;
+          if (d.Options.Rows[i].auto__index === void 0) {
+            d.Options.Rows[i].auto__index = `${i + 1}`;
+          }
 
           // limit rowspan and colspan
           if (typeof rowColNumbers[i] === 'undefined') {
@@ -258,7 +260,8 @@ export default defineComponent({
         for (let i = 0; i < d.Options.Rows.length; i += 1) {
           // this.data.Options.Rows[i].rowSize = rowColNumbers[i];
           // remove extra cells according to the span
-          const newRow = { rowSize: rowColNumbers[i] };
+          const auto__index = d.Options.Rows[i].auto__index;
+          const newRow = { rowSize: rowColNumbers[i], auto__index };
           for (let j = 0; j < rowColNumbers[i]; j += 1) {
             newRow[j] = d.Options.Rows[i][j];
           }
@@ -359,6 +362,12 @@ export default defineComponent({
       cellChanged: (f) => {
         emit('input', f);
       },
+      localRows: computed(() => {
+        if (!props.Field?.Options?.Rows) return [];
+
+        props.Field.Options.Rows.sort((a, b) => (Number(a.auto__index) || 0) - (Number(b.auto__index) || 0));
+        return props.Field.Options.Rows;
+      }),
     }
   },
 });

package/free-field/Fields/Number.js

@@ -37,6 +37,17 @@ export default defineComponent({
         Label: '最大长度',
         Name: 'Options.MaxLength',
       },
+      {
+        Type: 'Number',
+        Label: '基数',
+        Name: 'Options.BaseNum',
+      },
+      {
+        Type: 'Boolean',
+        Label: '只允许整数',
+        Name: 'Options.IntegerOnly',
+        Default: false,
+      },
       {
         Type: 'DynamicList',
         Label: '附加字段',
@@ -118,7 +129,7 @@ export default defineComponent({
 
     const readonlyNode = () => h(ReadonlyContent, {
       Field: props.Field,
-      Content: fieldData.value,
+      Content: props.Field.Options?.BaseNum ? (Number(props.Field.Options?.BaseNum || 0) + Number(fieldData.value || 0)) : fieldData.value,
     });
 
     const before = () => h(freeFieldLabel, {
@@ -133,8 +144,21 @@ export default defineComponent({
       class: 'postfix',
     }, props.Field.Options?.Postfix));
 
+    const mask = computed(() => {
+      if (!props.Field?.Options) return undefined;
+
+      if (props.Field.Options.IntegerOnly) {
+        const ll = props.Field.Options.MaxLength || 15;
+        console.log('mask', Array.from({length: ll}).map(() => '#').join(''))
+        return Array.from({length: ll}).map(() => '#').join('');
+      }
+
+      return undefined;
+    });
+
     const inputNode = computed(() => h(QInput, {
-      type: 'number',
+      type: mask.value ? 'text' : 'number',
+      mask,
       maxlength: props.Field.Options?.MaxLength,
       autocomplete: 'off',
       // bottomSlots: true,

package/free-field/Fields/NumberRange.vue

@@ -17,7 +17,7 @@
         :readonly="Field.ReadOnly"
         :placeholder="$attrs.placeholder || $t(getModule('field-components').config['defaultInputFieldPlaceholder'])"
         hide-bottom-space
-        @input="rangeChanged"
+        @update:modelValue="rangeChanged"
         type="number"
         v-model.number="range.min"
         :ref="`input_field_validator_${Field.Name || Field.Label}`"
@@ -43,7 +43,7 @@
         :readonly="Field.ReadOnly"
         :placeholder="$attrs.placeholder || $t(getModule('field-components').config['defaultInputFieldPlaceholder'])"
         hide-bottom-space
-        @input="rangeChanged"
+        @update:modelValue="rangeChanged"
         type="number"
         v-model.number="range.max"
         :ref="`input_field_validator_${Field.Name || Field.Label}2`"

package/free-field/Fields/Permission.vue

@@ -17,7 +17,7 @@
         :key="idx"
         :val="r.Name"
         :label="r.Name || idx"
-        @input="setFieldData(r.Permission || {})"/>
+        @update:modelValue="setFieldData(r.Permission || {})"/>
     </div>
     <permission-editor
       v-if="Field && !Field.HideEditor"

package/free-field/Fields/Row.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="free-field-row row" :class="rowClasses" v-if="Field">
     <free-field
-      v-for="(field, idx) in Field.Options?.List"
+      v-for="(field, idx) in Field.Options?.Fields"
       :Field="field"
       :values="fieldData"
       :key="idx"
-      @input="$emit('input')"></free-field>
+      ref="fieldsToValidate"
+      @input="$emit('input', field)"></free-field>
   </div>
 </template>
 
 <script>
+// TODO: correct the validations
 import { defineComponent } from 'vue';
 import { freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldRow',
@@ -80,7 +83,7 @@ export default defineComponent({
       },
       {
         Label: '字段',
-        Name: 'Options.List',
+        Name: 'Options.Fields',
         Type: 'FieldList',
         Options: {
           Columns: [
@@ -117,6 +120,15 @@ export default defineComponent({
     ],
     Description: '',
   },
+  setup(props) {
+    if(!props.Field) return () => null;
+
+    const { validate } = useFormValidator('fieldsToValidate');
+
+    return {
+      validate,
+    }
+  },
   computed: {
     rowClasses() {
       return this.Field.Options?.NoWrap ? 'nowrap' : '' + this.Field.Options?.ItemsAlign + ' ' + this.Field.Options?.JustifyAlign;

package/free-field/Fields/Search.vue

@@ -81,7 +81,7 @@
                 <q-pagination
                   v-model="searchData.page"
                   :max="searchData.pages"
-                  @input="searchPaginationChanged"
+                  @update:modelValue="searchPaginationChanged"
                   boundary-numbers
                   direction-links
                   :max-pages="2"

package/free-field/Fields/Select.vue

@@ -47,7 +47,7 @@
         hide-bottom-space
         :modelValue="fieldData.value"
         @update:modelValue="selectChanged"
-        :options="Field.Options || []"
+        :options="localOptions"
         option-value="Value"
         option-label="Label"
         map-options
@@ -56,8 +56,9 @@
         :multiple="Field.Multiple"
         :readonly="Field.ReadOnly"
         ref="fieldToValid"
-        :use-input="Field && Field.UseInput"
-        :use-chip="Field && Field.UseChip"
+        :use-input="Field && (Field.UseInput || (Field.Info?.CanFilter))"
+        @filter="filterFunc"
+        :use-chips="Field && (Field.UseChip || (Field.Info && Field.Info.Chip))"
         v-bind="inputControlSettings"
         :rules="Field.Rules"
       >
@@ -147,7 +148,7 @@
             v-model="checked"
             :val="option.Value"
             :disable="Field.ReadOnly"
-            @input="checkChanged(option.Value)"
+            @update:modelValue="checkChanged(option.Value)"
           ></q-checkbox>
         </div>
       </span>
@@ -156,7 +157,7 @@
 </template>
 
 <script>
-import { ref, computed, defineComponent, getCurrentInstance, watch, watchEffect } from 'vue';
+import { ref, computed, defineComponent, getCurrentInstance, watchEffect } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { useFormValidator} from '../../composible/useFormValidator';
 
@@ -187,6 +188,16 @@ export default defineComponent({
         Label: '可多选',
         Name: 'Multiple',
       },
+      {
+        Type: 'Check',
+        Label: '显示为碎屑',
+        Name: 'Info.Chip',
+      },
+      {
+        Type: 'Check',
+        Label: '可筛选',
+        Name: 'Info.CanFilter',
+      },
       {
         Type: 'String',
         Name: 'Info.Url',
@@ -287,7 +298,7 @@ export default defineComponent({
     });
 
 
-    watch(fieldData, () => {
+    watchEffect(() => {
       if (props.Field.AsCheck) {
         if (fieldData.value) {
           checked.value = `${fieldData.value}`.split(',');
@@ -380,9 +391,12 @@ export default defineComponent({
       }
     });
 
+    const localOptions = ref(props.Field.Options || []);
+
     return {
       fieldData,
       setFieldData,
+      localOptions,
 
       hasError,
       checked,
@@ -395,6 +409,23 @@ export default defineComponent({
       selectChanged,
       checkChanged,
       inputControlSettings,
+
+      filterFunc: (val, update) => {
+        if (val === '') {
+          update(() => {
+            localOptions.value = this.Field.Options || [];
+          })
+          return;
+        }
+
+        update(() => {
+          const needle = val.toLowerCase();
+
+          localOptions.value = (this.Field.Options || []).filter(opt => {
+            return `${opt.Label || opt.Value || opt}`.toLowerCase().indexOf(needle) > -1;
+          });
+        })
+      },
     };
   },
 });

package/free-field/Fields/SelectionChain.vue

@@ -33,7 +33,7 @@
           map-options
           :label="valuesList[index] ? '' : option.Placeholder"
           emit-value
-          @input="selectionChanged(index)"
+          @update:modelValue="selectionChanged(index)"
           ref="fieldsToValid"
           v-bind="inputControlSettings"
         ></q-select>

package/free-field/Fields/Tabs.vue

@@ -37,12 +37,12 @@
           v-for="(t, idx) in fieldData.value" :key="idx"
           :name="idx">
           <free-field
-            v-for="(field, idx) in Field.Options?.List"
+            v-for="(field, idx) in Field.Options?.Fields"
             :Field="field"
             :values="t"
             :key="idx"
             ref="fieldsToValidate"
-            @input="fieldChanged"></free-field>
+            @input="fieldChanged(field)"></free-field>
         </q-tab-panel>
       </q-tab-panels>
     </div>
@@ -74,7 +74,7 @@ export default defineComponent({
       },
       {
         Label: '字段',
-        Name: 'Options.List',
+        Name: 'Options.Fields',
         Type: 'FieldList',
         Options: {
           Columns: [

package/free-field/Fields/Text.js

@@ -27,6 +27,7 @@ export default defineComponent({
   setup(props, { emit, slots, expose, attrs }){
     if (!props.Field) return {};
 
+    const { proxy:vm } = getCurrentInstance();
     const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const rows = ref(3);
@@ -54,6 +55,7 @@ export default defineComponent({
       rows: rows.value,
 
       ...inputControlSettings.value,
+      placeholder: props.Field?.Placeholder || attrs.placeholder || vm.$t(vm.getModule('core-modules').config['defaultInputFieldPlaceholder']),
 
       class: 'full-width',
       style: props.Field.Info?.Style,

package/free-field/Fields/Time.vue

@@ -13,7 +13,7 @@
     </span>
     <q-input v-else v-model="fieldData.value" hide-bottom-space
       :readonly="Field.ReadOnly"
-      @input="$emit('input')"
+      @update:modelValue="$emit('input')"
       v-bind="inputControlSettings"
       ref="fieldToValid">
       <template v-slot:before v-if="Field.Label !== void 0">

package/free-field/Fields/YearRange.vue

@@ -18,7 +18,7 @@
         hide-bottom-space
         :options="minYearOptions"
         :readonly="Field.ReadOnly"
-        @input="rangeChanged"
+        @update:modelValue="rangeChanged"
         v-bind="inputControlSettings"
         ref="input_field_validator_first"
       >
@@ -39,7 +39,7 @@
         hide-bottom-space
         :options="maxYearOptions"
         :readonly="Field.ReadOnly"
-        @input="rangeChanged"
+        @update:modelValue="rangeChanged"
         v-bind="inputControlSettings"
         ref="input_field_validator_second"
       />

package/free-field/composible/fieldWrapper.js

@@ -345,6 +345,7 @@ export default defineComponent({
       "div",
       {
         class: wrapperClass,
+        style: props.Field.Info?.Style || '',
       },
       [
         realComp.value,

package/free-field/composible/useUploader.js

@@ -146,12 +146,13 @@ export function useUploader(props, ctx) {
       zip: 'application/zip',
     };
 
-    extList.forEach((ext) => {
+    extList.forEach((ext = '') => {
+      if (!ext) return;
       let type = ext.trim().toLowerCase();
-      type = MIME_TYPE_LIST[type] || type;
+      type = MIME_TYPE_LIST[type];
 
-      if (type && typeList.indexOf(type) < 0) typeList.push(type);
-      if (ext && typeList.indexOf(ext) < 0) typeList.push(ext);
+      if (!ext.startsWith('.') && type && typeList.indexOf(type) < 0) typeList.push(type);
+      if (ext.startsWith('.') && typeList.indexOf(ext) < 0) typeList.push(ext);
     });
 
     return typeList.join(',');

package/index.js

@@ -53,10 +53,23 @@ const filters = {
       case '.png':
       case '.jpeg':
       case '.bmp':
+      case '.gif':
         return `${config.imageUrlBase}${url}`;
       case '.zip':
+      case '.rar':
+      case '.7z':
+      case '.tar':
+      case '.gz':
+      case '.bz2':
+      case '.xz':
+      case '.tgz':
         return `${config.zipUrlBase}${url}`;
       case '.mp4':
+      case '.avi':
+      case '.mov':
+      case '.wmv':
+      case '.flv':
+      case '.mkv':
         return `${config.videoUrlBase}${url}`;
       default:
         return `${config.documentUrlBase}${url}`;
@@ -210,9 +223,12 @@ export default (app, root) => {
           Type: 'Tabs',
           Label: '显示内容',
           DataType: 'Array',
-          Default: [{
-            Locale: appStore.locale || app.config.defaultLocale,
-          }, ],
+          Default: config.locales.map((l) => ({
+            Locale: l.locale,
+            Name: l.name,
+            Label: '',
+            Description: '',
+          })),
           Options: {
             Dense: true,
             LabelField: 'Name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "main": "index.js",
   "repository": "https://github.com/freeeis/free-fe-core-modules.git",
   "author": "zhiquan",

package/view/dict/index.vue

@@ -205,13 +205,21 @@ export default defineComponent({
     },
     addNode(n) {
       if (this.selectedDictNode && this.selectedDictNode.id === n.id) {
+        // collapse the node when clicking it again (after clicking add button)
         this.selectedDictNode = {};
         this.editingDict = {};
         this.$refs.dictTree.setExpanded(n.id, false);
       } else {
+        // add new node
         this.selectedDictNode = n;
         this.editingDict = {
           Type: 'String',
+          Labels: this.ctx.config.locales.map((l) => ({
+            Label: '',
+            Locale: l.locale,
+            Description: '',
+            Name: l.name,
+          })),
         };
       }
 
@@ -223,10 +231,31 @@ export default defineComponent({
       this.makeLabelsName(n);
 
       if (this.selectedDictNode && this.selectedDictNode.id === n.id) {
+        // collapse the node when clicking it again (after clicking edit button)
         this.selectedDictNode = {};
         this.editingDict = {};
         this.$refs.dictTree.setExpanded(n.id, false);
       } else {
+        // edit node
+        n.Labels = n.Labels || [];
+        // check labels according to the locales
+        const locales = this.ctx.config.locales || [];
+        for(let i = 0; i < locales.length; i += 1) {
+          const locale = locales[i];
+          const existsLabel = n.Labels.find((l) => l.Locale === locale.locale);
+
+          if (!existsLabel) {
+            n.Labels.push({
+              Label: '',
+              Locale: locale.locale,
+              Description: '',
+              Name: locale.name,
+            });
+          } else {
+            existsLabel.Name = locale.name;
+          }
+        }
+
         this.selectedDictNode = n;
         this.editingDict = { ...n };
         this.$refs.dictTree.setExpanded(n.id, true);
@@ -235,9 +264,12 @@ export default defineComponent({
     deleteNode(n) {
       if (n.addingNew || !n.id) return;
 
+      let label = (n.Labels || []).find((l) => l.Locale === this.$i18n.locale);
+      label = label && label.Label;
+
       this.$MsgDialog({
         type: '',
-        content: this.$t('删除确认', { type: this.$t('字典项'), name: n.Name }),
+        content: this.$t('删除确认', { type: this.$t('字典项'), name: label || n.Name }),
         canCancel: true,
         okText: this.$t('okButtonText'),
         cancelText: this.$t('cancelButtonText'),
@@ -245,7 +277,12 @@ export default defineComponent({
         .then(() => {
           this.deleteDict(n.id).then((d) => {
             if (d && d.msg === 'OK') {
-              this.refreshData();
+              const parentNode = this.$refs.dictTree.getNodeByKey(n.Parent);
+              if (parentNode) {
+                parentNode.children = parentNode.children.filter((c) => c.id !== n.id);
+              } else {
+                this.data.docs = this.data.docs.filter((c) => c.id !== n.id);
+              }
             }
           });
         })

package/view/error/list.vue

@@ -74,7 +74,7 @@
           <q-pagination
             v-model="data.page"
             :max="data.pages"
-            @input="paginationChanged"
+            @update:modelValue="paginationChanged"
             boundary-links
             boundary-numbers
             direction-links