free-fe-core-modules 0.0.2 → 0.0.4

package/components/Basic/EIcon.vue

@@ -4,14 +4,12 @@
       v-if="isIcon"
       class="full-width full-height"
       :name="name"
-      v-bind="$attrs"
     ></q-icon>
     <q-img
       v-else
       class="full-width full-height"
       style="display: block;"
       :src="imgPath"
-      v-bind="$attrs"
       round
     >
       <slot></slot>
@@ -54,8 +52,8 @@ export default defineComponent({
       // TODO:默认使用二倍图？
       if (this.relative) return `images/${this.name}${this.defaultSize}.png`;
       return this.thumb
-        ? this.$options.filters.serverThumb(this.name)
-        : this.$options.filters.serverImage(this.name);
+        ? this.$filter('serverThumb', this.name)
+        : this.$filter('serverImage', this.name);
     },
   },
 });

package/components/Basic/LeveledMenus.vue

@@ -85,8 +85,3 @@ export default defineComponent({
 });
 </script>
 
-<style lang="sass">
-.leveled-menu
-  .simple-expand-icon
-    display: none
-</style>

package/components/Basic/SummaryHead.vue

@@ -46,7 +46,7 @@
           <span class="text">{{ item.text }}</span>
         </q-btn>
         <span
-          v-if="typeof item.number !== 'undefined'"
+          v-if="item.number !== void 0"
           :class="
             item.number && Number(item.number).toString() !== 'NaN'
               ? 'summary-head-number is-number highlight'
@@ -76,15 +76,35 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SummaryHead',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     has_multiple_head: { type: Boolean, default: false },
+    values: {type: Object, default: () => ({})},
+  },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
   },
   created() {
+    if (this.values) {
+      this.data = this.values;
+    }
+  },
+  watch: {
+    values(v) {
+      this.data = v || [];
+    },
   },
   methods: {
     filteredValue(item) {

package/components/Dialog/BasicDialog.vue

@@ -100,14 +100,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
-import FreeField from '../../field-components/components/FieldComponents.vue';
+import FreeField from '../../free-field/composible/fieldWrapper';
 import EIcon from '../Basic/EIcon.vue';
 
 export default defineComponent({
   name: 'BasicDialog',
-  mixins: [mixins.InputFieldValidator],
+  // mixins: [mixins.InputFieldValidator],
   emits: ['hide', 'ok', 'cancel'],
   props: {
     persistent: { type: Boolean, default: true },

package/components/SlidingCarousel/index.vue

@@ -6,7 +6,6 @@
     infinite
     :transition-prev="transitionPrev"
     :transition-next="transitionNext"
-    v-bind="$attrs"
     :height="heightString"
     :autoplay="interval"
     :arrows="data && data.length > 0"
@@ -27,13 +26,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingCarousel',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '220px' },
     width: { type: String, default: '100%' },
@@ -43,6 +42,17 @@ export default defineComponent({
     swipeable: { type: Boolean, default: true },
     thumbnails: { type: Boolean, default: true },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       slide: 0,

package/components/SlidingNews/index.vue

@@ -20,7 +20,6 @@
       :height="heightString"
       :autoplay="interval"
       :navigation="false"
-      v-bind="$attrs"
       animated
       infinite
       padding
@@ -66,13 +65,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingNews',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '40px' },
     width: { type: String, default: '100%' },
@@ -84,6 +83,17 @@ export default defineComponent({
     transitionPrev: { type: String, default: 'slide-up' },
     transitionNext: { type: String, default: 'slide-down' },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       visible: true,

package/components/ThemeSwitch/index.vue

@@ -58,15 +58,17 @@ export default defineComponent({
   watch: {
     theme(v) {
       if (v) {
-        const appEle = document.getElementById('q-app');
+        const appEle = document.getElementById('free-app');
 
-        let arr = appEle.className.split(' ');
+        let arr = appEle?.className.split(' ');
 
-        arr = arr.filter(cl => !cl.startsWith('theme-'));
+        if (arr) {
+          arr = arr.filter(cl => !cl.startsWith('theme-'));
 
-        arr.push(`theme-${v}`);
+          arr?.push(`theme-${v}`);
 
-        appEle.className = arr.join(' ');
+          appEle.className = arr.join(' ');
+        }
 
         const appStore = useAppStore();
         appStore.SET_THEME(v);

package/composible/useObjectData.js

@@ -0,0 +1,69 @@
+import { ref, getCurrentInstance, watch, watchEffect, defineEmits } from "vue";
+
+export const objectDataProps = {
+  GetData: Function,
+  Bus: Object,
+  modelValue: {},
+  autoGet: { type: Boolean, default: true },
+};
+
+export function useObjectData(props, ctx) {
+  const { proxy:vm } = getCurrentInstance();
+
+  const data = ref({});
+  const callsLeft = ref(100);
+
+  watch(data, (v) => {
+    ctx.emit('update:modelValue', v);
+  });
+
+  watch(() => props.modelValue, () => {
+    data.value = props.modelValue;
+  })
+
+  // call after refresh when all function got called
+  watchEffect(() => {
+    if (vm.afterRefresh && callsLeft.value <= 0) {
+      vm.afterRefresh(...args);
+    }
+  })
+
+  const refreshData = (...args) => {
+    // support multiple get data functions
+    const getDataList = [];
+    if (Array.isArray(props.GetData)) {
+      getDataList.push(...props.GetData);
+    } else {
+      getDataList.push(props.GetData);
+    }
+
+    callsLeft.value = getDataList.length;
+
+    for (let i = 0; i < getDataList.length; i += 1) {
+      const getData = getDataList[i];
+
+      if (typeof getData === 'function') {
+        Promise.resolve(getData(...args)).then((d) => {
+          Object.assign(data.value, d);
+        }).finally(() => {
+          callsLeft.value --;
+        });
+      } else {
+        Object.assign(data.value, getData);
+        callsLeft.value --;
+      }
+    }
+  };
+
+  if(props.modelValue) {
+    data.value = props.modelValue;
+  } else if (props.autoGet) {
+    refreshData();
+  }
+
+  return {
+    data,
+    refreshData,
+  }
+};
+

package/free-field/Fields/AgreementCheck.js

@@ -0,0 +1,170 @@
+import { defineComponent, h, ref, getCurrentInstance } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { QCheckbox } from 'quasar';
+
+export default defineComponent({
+  name: 'InputFieldAgreementCheck',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '协议同意勾选框',
+    Value: 'AgreementCheck',
+    Extra: [
+      {
+        Type: 'Check',
+        Label: '居中显示',
+        Name: 'Options.Center',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  setup(props, { emit }){
+    if (!props.Field) return {};
+
+    const { proxy:vm } = getCurrentInstance();
+    const { fieldData, setFieldData } = useFreeField(props);
+    const hasError = ref(false);
+
+    const fieldTip = (tip) => {
+      if (!tip || !tip.Text) return '';
+      if (!tip.Links || !Array.isArray(tip.Links) || tip.Links.length <= 0) {
+        return [{ Text: tip.Text }];
+      }
+
+      // process tip with links
+      let linkPos = [];
+      tip.Links.forEach((tl) => {
+        if (!tl || !tl.Text || !tl.Link) return;
+
+        const start = tip.Text.indexOf(tl.Text);
+        if (start >= 0) {
+          linkPos.push({
+            start,
+            end: start + tl.Text.length,
+            Link: tl.Link,
+            File: tl.File,
+          });
+        }
+      });
+
+      const textSplit = [];
+      let start = 0;
+      linkPos = linkPos.sort((a, b) => a.start - b.start);
+      for (let i = 0; i < linkPos.length; i += 1) {
+        const lp = linkPos[i];
+
+        const beforeText = tip.Text.substr(start, lp.start - start);
+        if (beforeText) {
+          textSplit.push({ Text: beforeText });
+        }
+
+        textSplit.push({
+          Text: tip.Text.substr(lp.start, lp.end - lp.start),
+          Link: lp.File
+            ? vm.$filter('serverDocument', lp.File)
+            : lp.Link,
+        });
+
+        start += lp.end;
+      }
+
+      const afterText = tip.Text.substr(start);
+      if (afterText) {
+        textSplit.push({
+          Text: afterText,
+        });
+      }
+
+      if (textSplit.length > 0) return textSplit;
+
+      return [{ Text: tip.Text }];
+    };
+
+    const validate = () => {
+      if (props.Field.Required) {
+        hasError.value = typeof fieldData.value === 'undefined' || !fieldData.value;
+        return !hasError.value;
+      }
+
+      const rules = Array.isArray(typeof props.Field.Rules)
+        ? props.Field.Rules
+        : [props.Field.Rules];
+
+      let isValid = true;
+      for (let i = 0; i < rules.length; i += 1) {
+        const r = rules[i];
+
+        if (typeof r === 'function') {
+          isValid = isValid && r(fieldData.value);
+        }
+      }
+
+      hasError.value = !isValid;
+      return isValid;
+    };
+
+    const checkboxNode = () => h(QCheckbox, {
+      disable: props.Field?.ReadOnly,
+      label: props.Field?.showLabel ? '' : props.Field?.Label,
+
+      class: 'check',
+      style: props.Field.Info?.Style,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    });
+
+    const tipsNode = () => h('div', {},[
+      h('span', {
+        class: 'input-field-tips-prefix'
+      }),
+      h('span',{
+        class: 'tips-list'
+      }, (props.Field.Tips || []).map((tip) => h('span', {
+        class:'input-field-tips-tip',
+      }, [
+        h('span', {
+          class: 'input-field-tips-tip-prefix'
+        }),
+        fieldTip(tip).map((t) => h('span', {}, [
+          t.Link ? h('span', {
+            class: 'tip-link'
+          },[
+            h('span', {class: 'tip-link-prefix'}),
+            h('a',{
+              href: t.Link,
+            },t.Text),
+            h('span', {class: 'tip-link-postfix'}),
+          ]) : h('span',{class: 'tip-text'}, t.Text),
+        ])),
+        h('span', {
+          class: 'input-field-tips-tip-postfix'
+        })
+      ]))),
+      h('span',{
+        class: 'input-field-tips-postfix'
+      })
+    ]);
+
+    return () => h('div', {
+      class: `input-field-agreement-check row items-center no-wrap\
+              ${props.Field.Options?.Center ? 'center full-width justify-center' : ''}`,
+    }, h('div',{
+      class: `row no-wrap items-center relative-position ${hasError.value ? 'input-field--error' : ''}`,
+    },[
+      props.Field.Options?.Center || h('span', { class: 'field-label-empty', }),
+      checkboxNode(),
+      tipsNode(),
+      hasError.value && h('div', {
+        class: 'input-field--error-tag',
+      }, h(QIcon,{
+        name: 'error',
+      }))
+    ]));
+  },
+});

package/free-field/Fields/ApiCall.js

@@ -0,0 +1,123 @@
+import { defineComponent, getCurrentInstance, h, ref, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import ReadonlyContent from '../composible/readonlyContent';
+
+export default defineComponent({
+  name: 'InputFieldApiCall',
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '特定接口处理',
+    Value: 'ApiCall',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '数据获取地址',
+        Name: 'Options.Url',
+      },
+      {
+        Type: 'Select',
+        Label: '调用方法',
+        Name: 'Options.Method',
+        Options: [
+          'get',
+          'post',
+          'put',
+          'delete',
+          'patch',
+        ],
+      },
+      {
+        Type: 'String',
+        Label: '传送字段名',
+        Name: 'Options.Fields',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '默认将传送当前字段数据，但可以指定相同数据层级下的其他字段。',
+          },
+        ],
+      },
+      {
+        Type: 'String',
+        Label: '附加字段名',
+        Name: 'Options.ExtraFieldNames',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '如果接口返回值中有这些字段，他们将会被赋予当前父数据中。',
+          },
+        ],
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { slots }){
+    if (!props.Field) return {};
+
+    const { proxy:vm } = getCurrentInstance();
+    const { fieldData } = useFreeField(props);
+
+    const callResult = ref('');
+
+    const apiCall = () => {
+      let Fields = props.Field.Options.Fields || props.Field.Name;
+
+      if (!props.Field.Options || !props.Field.Options.Fields) {
+        return;
+      }
+
+      const paramObj = {};
+      if (Fields.length > 0) {
+        if (typeof Fields === 'string') {
+          Fields = Fields.split(',');
+        }
+        for (let i = 0; i < Fields.length; i += 1) {
+          const fld = Fields[i];
+
+          if (fld) {
+            Object.setValue(paramObj, fld, Object.nestValue(fieldData.value, fld));
+          }
+        }
+      } else {
+        Object.setValue(paramObj, props.Field.Name, fieldData.value);
+      }
+
+      vm[`${props.Field.Options.Method || 'post'}Request`](props.Field.Options.Url, paramObj).then((d) => {
+        if (d && d.msg === 'OK') {
+          if (d.data && d.data.value) {
+            callResult.value = JSON.stringify(d.data.value);
+          } else {
+            callResult.value = JSON.stringify(d.data);
+          }
+
+          // other extra new fields
+          (props.Field.Options.ExtraFieldNames || '').split(',').forEach((fname) => {
+            Object.setValue(props.values, fname, d.data[fname]);
+          });
+        }
+      });
+    };
+
+    watchEffect(() => {
+      fieldData.value && apiCall();
+    })
+
+    const readonlyNode = () => h(ReadonlyContent, {
+      Field: props.Field,
+      Content: callResult.value,
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-apicall row items-center no-wrap',
+    }, [
+      readonlyNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/{field-components/Fields/Boolean.vue → free-field/Fields/Boolean.js}

@@ -1,41 +1,10 @@
-<template>
-  <span class="simple-field input-field-boolean row items-center no-wrap">
-    <span
-      :class="`field-label ${(Field.Label && Field.Label.trim().length)
-        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-      v-if="Field.showLabel && !Field.dense && typeof Field.Label !== 'undefined'"
-    >
-      <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 v-else-if="!Field.showLabel && !Field.dense" class="field-label-empty"></span>
-
-    <q-toggle
-      v-model="fieldData"
-      :label="!Field.showLabel ? Field.Label : ''"
-      @input="$emit('input')"
-      :disable="Field.ReadOnly"
-      v-bind="$attrs">
-      <q-tooltip v-if="Field.Description">{{Field.Description}}</q-tooltip>
-    </q-toggle>
-    <slot name="warning"></slot>
-  </span>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, h, ref } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QToggle } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
 
 export default defineComponent({
   name: 'InputFieldBoolean',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'Simple',
     Label: '开关',
@@ -96,17 +65,42 @@ export default defineComponent({
     ],
     Description: '',
   },
-  watch: {
-    fieldData() {
-      if (!this.fieldData) {
-        this.fieldData = false;
-      }
-    },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
   },
-  created() {
-    if (!this.fieldData) {
-      this.fieldData = false;
-    }
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const toggleNode = () => h(QToggle, {
+      disable: props.Field?.ReadOnly,
+      label: props.Field?.showLabel ? props.Field?.Lable :  '',
+
+      style: props.Field.Info?.Style,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    })
+
+    return () => h('div', {
+      class: 'simple-field input-field-boolean row items-center no-wrap',
+    }, [
+      before(),
+      toggleNode(),
+      slots.warning && slots.warning(),
+    ]);
   },
 });
-</script>

package/free-field/Fields/Category.js

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'InputFieldCategory',
+  fieldInfo: {
+    Category: 'Static',
+    Label: '字段分类',
+    Value: 'Category',
+    Description: '',
+  },
+  props: {
+    Field: { type: Object },
+  },
+  methods: {
+  },
+  setup(props, { slots }){
+    if (!props.Field || (typeof props.Field.Label === 'undefined')) return;
+
+    return () => h('div', {
+      class: 'simple-field input-field-category row items-center no-wrap',
+    }, [
+      h('span', {
+        class: 'label'
+      }, props.Field.Label),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});