free-fe-core-modules 0.0.7 → 0.0.9

package/free-field/Fields/DateRange.js

@@ -1,6 +1,6 @@
 import { ref, defineComponent, getCurrentInstance, h, computed, watch, watchEffect } from 'vue';
 import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import { useFormValidator} from '../../composible/useFormValidator';
 
@@ -38,9 +38,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 

package/free-field/Fields/DynamicList.js

@@ -1,6 +1,6 @@
 import { ref, defineComponent, getCurrentInstance, h, computed, watchEffect } from 'vue';
 import { QTable, QTh, QTd, QTr, QIcon } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import FreeField from '../composible/fieldWrapper';
 import { useFormValidator} from '../../composible/useFormValidator';
@@ -177,9 +177,6 @@ export default defineComponent({
     selection: { type: String, default: 'none' },
   },
   emits: ['input', 'add', 'delete'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) {
       return () => null;

package/free-field/Fields/Labels.vue

@@ -172,6 +172,7 @@ export default defineComponent({
 
       if (changed) {
         this.setFieldData(currentList);
+        this.$emit('input');
       }
 
       this.newLabel = '';

package/free-field/Fields/Number.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, watch, computed } from 'vue';
 import { QInput } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import { useFormValidator} from '../../composible/useFormValidator';
@@ -93,9 +93,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots , expose }){
     if (!props.Field) return {};
 
@@ -115,7 +112,7 @@ export default defineComponent({
         v = Number(props.Field.MaxValue);
       }
 
-      setFieldData(v);
+      setFieldData(Number(v));
     })
 
     const readonlyNode = () => h(ReadonlyContent, {
@@ -150,7 +147,7 @@ export default defineComponent({
 
       modelValue: fieldData.value,
       'onUpdate:modelValue': (v) => {
-        setFieldData(v, emit);
+        setFieldData(Number(v), emit);
       },
     }, {
       before,

package/free-field/Fields/NumberRange.vue

@@ -0,0 +1,145 @@
+<template>
+  <span class="input-field-number-range simple-field">
+    <span v-if="Field.ReadOnly">
+      <span
+        :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+        v-if="Field.Label"
+      >
+        <q-tooltip v-if="Field.Description" anchor="top right">{{Field.Description}}</q-tooltip>
+        {{Field.Label || ''}}
+        <span v-if="Field.Required" class="required-mark">*</span>
+      </span>
+      <span class="readonly-content">{{fieldData}}</span>
+    </span>
+    <span v-else class="row items-center no-wrap">
+      <q-input
+        :readonly="Field.ReadOnly"
+        v-bind="$attrs"
+        :placeholder="$attrs.placeholder || $t(getModule('field-components').config['defaultInputFieldPlaceholder'])"
+        v-on="$listeners"
+        hide-bottom-space
+        @input="rangeChanged"
+        type="number"
+        v-model.number="range.min"
+        :ref="`input_field_validator_${Field.Name || Field.Label}`"
+        :maxlength="maxlength"
+      >
+        <template
+          v-slot:prepend
+          v-if="Field.Options && Field.Options.Prefix"
+        >
+          <span class="prefix">{{Field.Options.Prefix}}</span>
+        </template>
+
+        <template
+          v-slot:append
+          v-if="Field.Options && Field.Options.Postfix"
+        >
+          <span class="postfix">{{Field.Options.Postfix}}</span>
+        </template>
+      </q-input>
+      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <q-input
+        :readonly="Field.ReadOnly"
+        v-bind="$attrs"
+        :placeholder="$attrs.placeholder || $t(getModule('field-components').config['defaultInputFieldPlaceholder'])"
+        v-on="$listeners"
+        hide-bottom-space
+        @input="rangeChanged"
+        type="number"
+        v-model.number="range.max"
+        :ref="`input_field_validator_${Field.Name || Field.Label}2`"
+        :maxlength="maxlength"
+      >
+        <template
+          v-slot:prepend
+          v-if="Field.Options && Field.Options.Prefix"
+        >
+          <span class="prefix">{{Field.Options.Prefix}}</span>
+        </template>
+
+        <template
+          v-slot:append
+          v-if="Field.Options && Field.Options.Postfix"
+        >
+          <span class="postfix">{{Field.Options.Postfix}}</span>
+        </template>
+      </q-input>
+    </span>
+
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { InputFieldMixin } from 'eis-admin-mixins';
+
+export default {
+  name: 'InputFieldNumberRange',
+  mixins: [InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '数字范围',
+    Value: 'NumberRange',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      range: {
+        min: 0,
+        max: 0,
+      },
+    };
+  },
+  watch: {
+    fieldData() {
+      const yl = (this.fieldData || '').split(this.Field.Separator || '~');
+      [this.range.min, this.range.max] = yl;
+    },
+  },
+  computed: {
+    maxlength() {
+      if (this.Field && this.Field.Options && this.Field.Options.MaxLength) {
+        return this.Field.Options.MaxLength;
+      }
+
+      return '';
+    },
+  },
+  methods: {
+    rangeChanged() {
+      let min = Number(this.range.min);
+      let max = Number(this.range.max);
+      if (!min && min !== 0 && !max && max !== 0) return;
+
+      const minValue = this.Field.MinValue !== void 0 && Number(this.Field.MinValue) || -Infinity;
+      const maxValue = this.Field.MaxValue !== void 0 && Number(this.Field.MaxValue) || Infinity;
+
+      min = Math.max(min, minValue);
+      min = Math.min(min, maxValue);
+
+      max = Math.max(max, minValue);
+      max = Math.min(max, maxValue);
+
+      this.fieldData = [min, max].join(
+        this.Field.Separator || '~',
+      );
+
+      this.$emit('input');
+    },
+  },
+};
+</script>

package/free-field/Fields/Password.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, computed } from 'vue';
 import { QInput, QIcon } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import { useFormValidator} from '../../composible/useFormValidator';
 
@@ -29,9 +29,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
@@ -50,7 +47,7 @@ export default defineComponent({
       },
     });
 
-    const inputNode = () => computed(h(QInput, {
+    const inputNode = computed(() => h(QInput, {
       type: isPwd.value ?  'password' : 'text',
       maxlength: props.Field.Options?.MaxLength,
       autocomplete: props.Field.Options?.autocomplete ? '' : 'new-password',

package/free-field/Fields/Permission.vue

@@ -76,6 +76,7 @@ export default defineComponent({
   methods: {
     permissionChanged(v) {
       this.setFieldData(v);
+      this.$emit('input');
     },
   },
 });

package/free-field/Fields/PermissionEditor.vue

@@ -71,7 +71,6 @@ import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 export default defineComponent({
   name: 'PermissionEditor',
   emits:['changed'],
-  components: {},
   props: {
     ...freeFieldProps,
     Code: { type: String, default: '' },

package/free-field/Fields/Row.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="input-field-row row" :class="rowClasses">
+    <input-field
+      v-for="(field, idx) in Field.Options.List"
+      :Field="field"
+      :values="fieldData"
+      :key="idx"
+      @input="$emit('input')"></input-field>
+  </div>
+</template>
+
+<script>
+import { InputFieldMixin } from 'eis-admin-mixins';
+
+export default {
+  name: 'InputFieldRow',
+  mixins: [InputFieldMixin],
+  fieldInfo: {
+    Category: 'Container',
+    Label: '行',
+    Value: 'Row',
+    Extra: [
+      {
+        Label: '不换行',
+        Name: 'Options.NoWrap',
+        Type: 'Bollean',
+      },
+      {
+        Label: '竖向对齐',
+        Name: 'Options.ItemsAlign',
+        Type: 'Select',
+        Options: [
+          {
+            Label: '居上',
+            Value: 'items-start',
+          },
+          {
+            Label: '居中',
+            Value: 'items-center',
+          },
+          {
+            Label: '居下',
+            Value: 'items-end',
+          },
+        ],
+      },
+      {
+        Label: '横向对齐',
+        Name: 'Options.JustifyAlign',
+        Type: 'Select',
+        Options: [
+          {
+            Label: '居左',
+            Value: 'justify-start',
+          },
+          {
+            Label: '居中',
+            Value: 'justify-center',
+          },
+          {
+            Label: '居右',
+            Value: 'justify-end',
+          },
+          {
+            Label: '围绕',
+            Value: 'justify-around',
+          },
+          {
+            Label: '之间',
+            Value: 'justify-between',
+          },
+          {
+            Label: '均匀',
+            Value: 'justify-evently',
+          },
+        ],
+      },
+      {
+        Label: '字段',
+        Name: 'Options.List',
+        Type: 'FieldList',
+        Options: {
+          Columns: [
+            {
+              Label: '#',
+              Name: 'Index',
+              sortable: true,
+            },
+            {
+              Label: '类型',
+              Name: 'Type',
+              style: 'max-width: 120px;',
+              sortable: true,
+            },
+            {
+              Label: '名称',
+              Name: 'Name',
+              style: 'max-width: 200px;',
+            },
+            {
+              Label: '默认',
+              Name: 'Default',
+              style: 'max-width: 200px;',
+            },
+            {
+              Label: '标题',
+              Name: 'Label',
+              style: 'max-width: 200px;',
+              sortable: true,
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  computed: {
+    rowClasses() {
+      return '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/free-field/Fields/Search.vue

@@ -350,9 +350,9 @@ export default defineComponent({
     },
   },
   watch: {
-    fieldData(n, o) {
+    'fieldData.value': function(n, o) {
       // init search data from exist id
-      if (typeof this.fieldData.value === 'undefined') {
+      if (this.fieldData.value === void 0) {
         this.searchSelected = [];
         this.searchData = {};
         this.searchDisplay = '';
@@ -406,14 +406,11 @@ export default defineComponent({
     },
   },
   created() {
-    // search, add filters to col
-    if (this.Field.Type === 'Search') {
-      this.searchColumns.forEach((col) => {
-        if (col.filters) {
-          col.format = this.ctx.filters[col.filters];
-        }
-      });
-    }
+    this.searchColumns.forEach((col) => {
+      if (col.filters) {
+        col.format = (d) => this.$filter(col.filters, d);
+      }
+    });
   },
   methods: {
     search(p) {

package/free-field/Fields/Select.vue

@@ -163,7 +163,7 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
   },
-  emits:['udpate:fieldData', 'input'],
+  emits:['input'],
   fieldInfo: {
     Category: 'Simple',
     Label: '选择',

package/free-field/Fields/String.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, computed } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { QInput } from 'quasar';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
@@ -49,9 +49,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 

package/free-field/Fields/Tabs.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="input-field-tabs row no-wrap" v-if="Field">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="Field.Label !== void 0"
+    >
+      <q-tooltip
+        v-if="Field.Description"
+        anchor="top right"
+      >{{Field.Description}}</q-tooltip>
+      {{Field.Label || ''}}
+      <span
+        v-if="Field.Required"
+        class="required-mark"
+      >*</span>
+    </span>
+
+    <div class="col input-field-tabs-tabs-wrapper">
+      <q-tabs
+        class="tabs"
+        v-model="tab"
+        :shrink="true"
+        no-caps
+        :vertical="Field.Options.vertical || false"
+        :align="Field.Options.align || 'left'"
+        :dense="Field.Options && Field.Options.dense">
+        <q-tab
+          v-for="(t, idx) in fieldData.value" :key="idx"
+          :name="idx"
+          :label="t[Field.Options.LabelField]"
+          :dense="Field.Options && Field.Options.dense">
+        </q-tab>
+      </q-tabs>
+      <q-tab-panels v-model="tab">
+        <q-tab-panel
+          v-for="(t, idx) in fieldData.value" :key="idx"
+          :name="idx">
+          <free-field
+            v-for="(field, idx) in Field.Options.List"
+            :Field="field"
+            :values="t"
+            :key="idx"
+            ref="fieldsToValidate"
+            @input="fieldChanged"></free-field>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
+
+export default defineComponent({
+  name: 'InputFieldTabs',
+  fieldInfo: {
+    DataType: 'Array',
+    Category: 'Container',
+    Label: '标签页',
+    Value: 'Tabs',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '标签字段名',
+        Name: 'Options.LabelField',
+      },
+      {
+        Type: 'String',
+        Label: '数值字段名',
+        Name: 'Options.ValueField',
+      },
+      {
+        Label: '字段',
+        Name: 'Options.List',
+        Type: 'FieldList',
+        Options: {
+          Columns: [
+            {
+              Label: '#',
+              Name: 'Index',
+              sortable: true,
+            },
+            {
+              Label: '类型',
+              Name: 'Type',
+              style: 'max-width: 120px;',
+              sortable: true,
+            },
+            {
+              Label: '名称',
+              Name: 'Name',
+              style: 'max-width: 200px;',
+            },
+            {
+              Label: '默认',
+              Name: 'Default',
+              style: 'max-width: 200px;',
+            },
+            {
+              Label: '标题',
+              Name: 'Label',
+              style: 'max-width: 200px;',
+              sortable: true,
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    if(!props.Field) return () => null;
+
+    const { fieldData, setFieldData } = useFreeField(props);
+    const { validate } = useFormValidator('fieldsToValidate');
+
+    const tab = ref(0);
+
+    if (!Array.isArray(fieldData.value)) {
+      setFieldData([{}], emit)
+    }
+
+    if (props.Field.Options?.ValueField && props.Field.Default) {
+      const defaultTab = fieldData.value.findIndex((d) => d[props.Field.Options?.ValueField] === props.Field.Default);
+
+      if (defaultTab >= 0) {
+        tab.value = defaultTab;
+      }
+    }
+
+    return {
+      tab,
+      fieldData,
+
+      fieldChanged: () => {
+        emit('input');
+      },
+      validate,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.input-field-tabs {
+  &-tabs-wrapper {
+    margin-left: 12px;
+    border: 1px solid rgba($color: #000000, $alpha: 0.12);
+    .tabs {
+      border-bottom: 1px solid;
+    }
+  }
+}
+</style>

package/free-field/Fields/Text.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, watchEffect, computed } from 'vue';
 import { QInput } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import { useFormValidator} from '../../composible/useFormValidator';
@@ -24,9 +24,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 

package/free-field/Fields/Year.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, computed } from 'vue';
 import { QSelect } from 'quasar';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import { useFormValidator} from '../../composible/useFormValidator';
 
@@ -72,9 +72,6 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  methods: {
-    ...useFreeFieldMethods,
-  },
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};