free-fe-core-modules 0.0.6 → 0.0.8

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 {};
 

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/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,162 @@
+<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([{}])
+    }
+
+    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: () => {
+        console.log('field changed', fieldData.value)
+        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 {};
 

package/free-field/Fields/index.js

@@ -35,6 +35,7 @@ import fQueryFilters from './QueryFilters.vue';
 // import fFileListCombined from './FileListCombined.vue';
 // import fImageListCombined from './ImageListCombined.vue';
 import fApiCall from './ApiCall.js';
+import fTabs from './Tabs.vue';
 
 export default {
   Static: fStatic,
@@ -74,42 +75,5 @@ export default {
   // FileListCombined: fFileListCombined,
   // ImageListCombined: fImageListCombined,
   ApiCall: fApiCall,
-  // Static: () => import('./Static.vue'),
-  // Select: () => import('./Select.vue'),
-  // String: () => import('./String.vue'),
-  // Password: () => import('./Password.vue'),
-  // Category: () => import('./Category.vue'),
-  // Check: () => import('./Check.vue'),
-  // Labels: () => import('./Labels.vue'),
-  // Number: () => import('./Number.vue'),
-  // Permission: () => import('./Permission.vue'),
-  // Search: () => import('./Search.vue'),
-  // Text: () => import('./Text.vue'),
-  // Time: () => import('./Time.vue'),
-  // TimeRange: () => import('./TimeRange.vue'),
-  // Date: () => import('./Date.vue'),
-  // DateRange: () => import('./DateRange.vue'),
-  // Year: () => import('./Year.vue'),
-  // YearRange: () => import('./YearRange.vue'),
-  // RadioList: () => import('./RadioList.vue'),
-  // Boolean: () => import('./Boolean.vue'),
-  // File: () => import('./File.vue'),
-  // FileList: () => import('./FileList.vue'),
-  // Image: () => import('./Image.vue'),
-  // ImageList: () => import('./ImageList.vue'),
-  // FixedList: () => import('./FixedList.vue'),
-  // DynamicList: () => import('./DynamicList.vue'),
-  // SingleList: () => import('./SingleList.vue'),
-  // SelectionChain: () => import('./SelectionChain.vue'),
-  // Rich: () => import('./Rich.vue'),
-  // FieldEditor: () => import('./FieldEditor.vue'),
-  // FieldList: () => import('./InputFieldList.vue'),
-  // MixedTable: () => import('./MixedTable.vue'),
-  // Customize: () => import('./Customize.vue'),
-  // AgreementCheck: () => import('./AgreementCheck.vue'),
-  // Separator: () => import('./Separator.vue'),
-  // QueryFilters: () => import('./QueryFilters.vue'),
-  // FileListCombined: () => import('./FileListCombined.vue'),
-  // ImageListCombined: () => import('./ImageListCombined.vue'),
-  // ApiCall: () => import('./ApiCall.vue'),
+  Tabs: fTabs,
 };

package/free-field/composible/useFreeField.js

@@ -96,48 +96,3 @@ export function useFreeField(props) {
     },
   }
 };
-
-
-// TODO: make function for validating all fields in the current component
-function validate() {
-  if (this.shouldHide) return true;
-
-  // could have customized validate function in component
-  if (this.selfValidate && typeof this.selfValidate === 'function' && !this.selfValidate()) {
-    return false;
-  }
-
-  const validators = Object.keys(this.$refs).filter((k) => k.startsWith('input_field_validator_'));
-  if (!validators || validators.length <= 0) {
-    return true;
-  }
-
-  let hasError = false;
-  for (let i = 0; i < validators.length; i += 1) {
-    const valid = validators[i];
-
-    if (this.$refs[valid]) {
-      if (Array.isArray(this.$refs[valid])) {
-        for (let j = 0; j < this.$refs[valid].length; j += 1) {
-          const sv = this.$refs[valid][j];
-
-          if (sv.shouldHide !== true) {
-            if (typeof sv.validate === 'function') {
-              hasError = !sv.validate() || hasError;
-            }
-          }
-        }
-      } else if (typeof this.$refs[valid].validate === 'function') {
-        if (this.$refs[valid].shouldHide !== true) {
-          hasError = !this.$refs[valid].validate() || hasError;
-        }
-      }
-    }
-  }
-
-  return !hasError;
-};
-
-export const useFreeFieldMethods = {
-  validate,
-};

package/i18n/en-us/index.js

@@ -1,73 +1,70 @@
 export default {
-    justNow: 'just now',
-    secondsAgo: 'seconds ago',
-    minutesAgo: 'minutes ago',
-    hoursAgo: 'hours ago',
-    daysAgo: 'days ago',
-    monthsAgo: 'months ago',
-    yearsAgo: 'yearsAgo',
-    SwitchTheme: 'Switch Theme',
+  justNow: 'just now',
+  secondsAgo: 'seconds ago',
+  minutesAgo: 'minutes ago',
+  hoursAgo: 'hours ago',
+  daysAgo: 'days ago',
+  monthsAgo: 'months ago',
+  yearsAgo: 'yearsAgo',
+  SwitchTheme: 'Switch Theme',
 
-    validatorNotEmptyName: "非空",
-    validatorNotEmptyDescription: "不能为空",
-    validatorMobilePhoneName: "手机号",
-    validatorMobilePhoneDescription: "中国手机号码格式",
-    validatorEmailName: "邮箱",
-    validatorEmailDescription: "",
-    validatorPhoneOrEmailName: "手机号或邮箱",
-    validatorPhoneOrEmailDescription: "",
-    validatorChinaIDNumberName: "中国身份证号码",
-    validatorChinaIDNumberDescription: "",
+  validatorNotEmptyName: "non-empty",
+  validatorNotEmptyDescription: "Cannot be empty",
+  validatorMobilePhoneName: "Phone Number",
+  validatorMobilePhoneDescription: "Chinese Mobile Number Format",
+  validatorEmailName: "mailbox",
+  validatorEmailDescription: "",
+  validatorPhoneOrEmailName: "mobile phone number or email",
+  validatorPhoneOrEmailDescription: "",
+  validatorChinaIDNumberName: "Chinese ID Number",
+  validatorChinaIDNumberDescription: "",
 
-    validatorOnlyNumberName: "只能是数字",
-    validatorOnlyNumberDescription: "",
-    validatorOnlyCharName: "只能是字母",
-    validatorOnlyCharDescription: "",
-    validatorOnlyUpCharName: "只能是大写字母",
-    validatorOnlyUpCharDescription: "",
-    validatorOnlyLowerCharName: "只能是小写字母",
-    validatorOnlyLowerCharDescription: "",
-    validatorOnlyChineseName: "只能是中文",
-    validatorOnlyChineseDescription: "",
-    validatorOnlyCCName: "只能是中文或字母",
-    validatorOnlyCCDescription: "",
-    validatorOnlyCCNName: "只能是中文或字母或数字",
-    validatorOnlyCCNDescription: "",
-    validatorOnlyCNName: "只能是中文或数字",
-    validatorOnlyCNDescription: "",
-    validatorOnlyCNUName: "只能是中文或数字或下划线",
-    validatorOnlyCNUDescription: "",
-    validatorOnlyCNSName: "只能是中文或数字或特殊字符",
-    validatorOnlyCNSDescription:
-    `只能是中文或数字或（"."、{'@'}、"<"、">"、"_"、"?"）`,
+  validatorOnlyNumberName: "number only",
+  validatorOnlyNumberDescription: "",
+  validatorOnlyCharName: "letters only",
+  validatorOnlyCharDescription: "",
+  validatorOnlyUpCharName: "uppercase letters only",
+  validatorOnlyUpCharDescription: "",
+  validatorOnlyLowerCharName: "lowercase letters only",
+  validatorOnlyLowerCharDescription: "",
+  validatorOnlyChineseName: "Chinese only",
 
-    validatorOnlyIntegerName: "只能是整数",
-    validatorOnlyIntegerDescription: "",
-    validatorOnlyPIName: "只能是正整数",
-    validatorOnlyPIDescription: "",
-    validatorOnlyPIZName: "只能是正整数或零",
-    validatorOnlyPIZDescription: "",
-    validatorOnlyNIName: "只能是负整数",
-    validatorOnlyNIDescription: "",
-    validatorOnlyNIZName: "只能是负整数或零",
-    validatorOnlyNIZDescription: "",
+  validatorOnlyChineseDescription: "",
+  validatorOnlyCCName: "Chinese or letters",
+  validatorOnlyCCDescription: "",
+  validatorOnlyCCNName: "Chinese or letters or numbers",
+  validatorOnlyCCNDescription: "",
+  validatorOnlyCNName: "Chinese or numbers",
+  validatorOnlyCNDescription: "",
+  validatorOnlyCNUName: "Chinese or numbers or underscores",
+  validatorOnlyCNUDescription: "",
+  validatorOnlyCNSName: "Chinese or numbers or special characters",
+  validatorOnlyCNSDescription: `Chinese or a number or ("."、{'@'}、"<"、">"、"_"、"?"）`,
 
-    validatorUrlName: "URL地址",
-    validatorUrlDescription: "",
-    validatorOfficePhoneName: "固定电话号码",
-    validatorOfficePhoneDescription: "固定电话号码（区号-号码）",
-    validatorChinaZipName: "中国邮政编码",
-    validatorChinaZipDescription: "",
+  validatorOnlyIntegerName: "integer only",
+  validatorOnlyIntegerDescription: "",
+  validatorOnlyPIName: "a positive integer",
+  validatorOnlyPIDescription: "",
+  validatorOnlyPIZName: "positive integers or zero",
+  validatorOnlyPIZDescription: "",
+  validatorOnlyNIName: "negative integers",
+  validatorOnlyNIDescription: "",
+  validatorOnlyNIZName: "a negative integer or zero",
+  validatorOnlyNIZDescription: "",
 
-    validatorPwd1Name: "密码（强度一）",
-    validatorPwd1Description: "长度在6-16位之间的任意密码",
-    validatorPwd2Name: "密码（强度二）",
-    validatorPwd2Description:
-      "长度在6-16位的密码，必须包含数字、大写字母、小写字母",
-    validatorPwd3Name: "密码（强度三）",
-    validatorPwd3Description:
-      "长度在6-16位的密码，必须包含数字、大写字母、小写字母、特殊字符",
-    validatorPwd4Name: "密码（强度四）",
-    validatorPwd4Description:
-      "长度在6-16位的密码，必须包含数字、至少2个大写字母、至少2个小写字母、特殊字符",
-}
+  validatorUrlName: "URL address",
+  validatorUrlDescription: "",
+  validatorOfficePhoneName: "landline",
+  validatorOfficePhoneDescription: "landline (area code - number)",
+  validatorChinaZipName: "China Postal Code",
+  validatorChinaZipDescription: "",
+
+  validatorPwd1Name: "Password (strength one)",
+  validatorPwd1Description: "Any password between 6-16 digits in length",
+  validatorPwd2Name: "Password (Strength Two)",
+  validatorPwd2Description: "Passwords 6-16 digits in length, must contain numbers, uppercase letters, lowercase letters",
+  validatorPwd3Name: "Password (strength three)",
+  validatorPwd3Description: "Passwords 6-16 characters in length, must contain numbers, uppercase letters, lowercase letters, special characters",
+  validatorPwd4Name: "Password (strength four)",
+  validatorPwd4Description: "A password of 6-16 digits in length must contain numbers, at least 2 uppercase letters, at least 2 lowercase letters, special characters",
+}