free-fe-core-modules 0.0.2 → 0.0.3

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

@@ -27,7 +27,7 @@
             Name: `Scope.${scope.Field}`,
             Options: scope.Options || [],
           }"
-          :values="data"
+          :values="fieldData"
           @input="scopeChanged"
         />
       </div>
@@ -65,15 +65,15 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-// import mixins from 'free-fe-mixins';
+import { defineComponent, ref, watchEffect, watch, computed } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'PermissionEditor',
-  // mixins: [mixins.InputFieldMixin],
   emits:['changed'],
   components: {},
   props: {
+    ...freeFieldProps,
     Code: { type: String, default: '' },
     Service: { type: Object },
     Permission: { type: Object },
@@ -81,125 +81,83 @@ export default defineComponent({
     readonly: { type: Boolean, default: false },
     noDataScope: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      data: undefined,
-      hasThis: false,
-      permScope: {},
+  setup(props, { emit }) {
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const hasThis = ref(false);
+
+    watchEffect(() => {
+      hasThis.value = !!fieldData.value;
+    })
+
+    const scopeChanged = () => {
+      emit('changed', fieldData.value);
     };
-  },
-  watch: {
-    data() {
-      this.hasThis = !!this.data;
-    },
-    hasThis() {
-      if (this.hasThis) {
-        // checked from unchecked
-        this.data = this.data || {};
 
-        this.$emit('changed', this.data);
-      } else {
-        // unchecked from checked
-        this.data = undefined;
-        this.$emit('changed', this.data);
+    const childUpdated = (v, f) => {
+      if (!v && fieldData.value && fieldData.value[f]) {
+        fieldData.value[f] = undefined;
+      } else if (v) {
+        fieldData.value = fieldData.value || {};
+        fieldData.value[f] = v;
       }
-    },
-    Permission() {
-      this.data = this.Permission;
-    },
-  },
-  computed: {
-    permissionData() {
-      return (service) => (this.data ? this.data[service] : undefined);
-    },
-    childrenService() {
-      if (!this.Service) return [];
+
+      scopeChanged();
+    };
+
+    const permissionData = (service) => (fieldData.value ? fieldData.value[service] : undefined);
+
+    const childrenService = () => {
+      if (!props.Service) return [];
       const children = [];
 
-      for (let i = 0; i < Object.keys(this.Service).length; i += 1) {
-        const sk = Object.keys(this.Service)[i];
-        const service = this.Service[sk];
+      for (let i = 0; i < Object.keys(props.Service).length; i += 1) {
+        const sk = Object.keys(props.Service)[i];
+        const service = props.Service[sk];
 
         if (
           typeof service === 'object'
           && !Array.isArray(service)
           && ['scope'].indexOf(service) < 0
         ) {
-          children.push({ Name: sk, Index: this.Service[sk].Index || 0 });
+          children.push({ Name: sk, Index: props.Service[sk].Index || 0 });
         }
       }
       return children.sort(
         (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
       ).map((cdn) => cdn.Name);
-    },
-    childrenStepService() {
-      return this.childrenService.filter((s) => Number(s));
-    },
-    childrenNormalService() {
-      return this.childrenService.filter((s) => !Number(s));
-    },
-  },
-  created() {
-    this.data = this.Permission;
-  },
-  methods: {
-    childUpdated(v, f) {
-      if (!v && this.data && this.data[f]) {
-        // this.$set(this.data, f, undefined);
-        this.data[f] = undefined;
-      } else if (v) {
-        this.data = this.data || {};
-        // this.$set(this.data, f, v);
-        this.data[f] = v;
+    };
+
+    const childrenStepService = computed(() => childrenService().filter((s) => Number(s)));
+
+    const childrenNormalService = computed(() => childrenService().filter((s) => !Number(s)));
+
+    watchEffect(() => {
+      fieldData.value = props.Permission;
+    })
+
+    watch(hasThis, (v) => {
+      console.log('hasThis changed', v)
+      if (v) {
+        // checked from unchecked
+        fieldData.value = fieldData.value || {};
+      } else {
+        // unchecked from checked
+        fieldData.value = undefined;
+        setFieldData(undefined);
       }
+      scopeChanged();
+    })
 
-      this.$emit('changed', this.data);
-    },
-    scopeChanged() {
-      this.$emit('changed', this.data);
-    },
+    return {
+      fieldData: fieldData.value,
+      hasThis,
+      childUpdated,
+      scopeChanged,
+      permissionData,
+      childrenStepService,
+      childrenNormalService,
+    };
   },
 });
 </script>
-<style lang="sass" scoped>
-.input-field-permission-editor
-  font-size: 12px
-  padding: 4px
-  .input-field-permission-title
-    &.without-scope
-      height: 35px
-    .data-scope
-      margin-left: 32px
-  .step-number-icon-wrapper
-    border-radius: 50%
-    border: 1px solid $grey-7
-    height: 20px
-    width: 20px
-    display: inline-block
-    vertical-align: top
-    padding: 0
-    margin: 0
-    margin-right: 4px
-    .step-number-icon
-      display: block
-      height: 20px
-      line-height: 20px
-      text-align: center
-  .permission-field
-    &-steps
-      margin-left: 32px
-      &>.input-field-permission-editor
-        min-height: 180px
-        min-width: 128px
-      &-label
-        margin-left: 32px
-    &-children
-      padding: 0
-      margin-left: 16px
-</style>
-
-<style lang="sass">
-.input-field-permission-editor
-  .permission-field-steps.q-card__section
-    flex-wrap: wrap !important
-</style>

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

@@ -61,12 +61,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { ref, computed, defineComponent, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldQueryFilters',
-  mixins: [mixins.InputFieldMixin],
   emits:['search', 'export'],
   fieldInfo: {
     Category: 'Advanced',
@@ -75,49 +74,70 @@ export default defineComponent({
     Description: '',
   },
   props: {
+    ...freeFieldProps,
     dense: { type: Boolean, default: false },
     canExport: { type: Boolean, default: false },
     queryData: { type: Object, default: () => ({}) },
     searchIcon: { type: String, default: 'search' },
     clearIcon: { type: String, default: 'refresh' },
   },
-  data() {
-    return {
-      query: {},
-      queryChanged: false,
-      hasKw: false,
-      kwFields: [],
-    };
-  },
-  computed: {
-    localFields() {
+  setup(props, { emit }) {
+    if (!props.Field) return {};
+
+    const { fieldData } = useFreeField(props);
+
+    const query = ref({});
+    const queryChanged = ref(false);
+    const hasKw = ref(false);
+    const kwFields = ref([]);
+
+    watchEffect(()  => {
+      query.value = props.queryData;
+    })
+
+    watchEffect(() => {
+      (fieldData.value || []).forEach((fd) => {
+        if (
+          ['String', 'Text', 'Rich', 'Customize', 'Labels', 'Static'].indexOf(
+            fd.Type,
+          ) >= 0
+        ) {
+          if (!fd.Info || !fd.Info.Separate) {
+            hasKw.value = true;
+            if (fd.Label) {
+              kwFields.value.push(fd.Label);
+            }
+          }
+        }
+      });
+    })
+
+    const localFields = computed(() =>  {
       const fList = [];
-      let hasKw = false;
       const kwFields = [];
-      if (this.fieldData) {
-        this.fieldData.forEach((fd) => {
+      if (fieldData.value) {
+        (fieldData.value || []).forEach((fd) => {
+          // TODO: should not hardcode these types
           if (
             ['String', 'Text', 'Rich', 'Customize', 'Labels', 'Static'].indexOf(
               fd.Type,
             ) >= 0
           ) {
             if (!fd.Info || !fd.Info.Separate) {
-              hasKw = true;
               if (fd.Label) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 kwFields.push(fd.Label);
               }
             } else {
             // separate string field as selection
             // TODO: could be other types??
               fd.Type = 'Select';
-              if (this.dense) {
+              if (props.dense) {
                 delete fd.Label;
               }
               fList.push(fd);
             }
           } else {
-            if (this.dense) {
+            if (props.dense) {
               delete fd.Label;
             }
             fList.push(fd);
@@ -125,38 +145,35 @@ export default defineComponent({
         });
       }
 
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.hasKw = hasKw;
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.kwFields = kwFields;
+      kwFields.value = kwFields;
 
       return fList;
-    },
-  },
-  watch: {
-    queryData() {
-      this.query = this.queryData;
-    },
-  },
-  created() {
-    if (this.queryData && Object.keys(this.queryData).length > 0) {
-      this.query = this.queryData;
-    }
-  },
-  methods: {
-    search() {
-      if (this.queryChanged) {
-        this.$emit('search', this.query);
-        this.queryChanged = false;
+    });
+
+
+    const search = () => {
+      if (queryChanged.value) {
+        emit('search', query.value);
+        queryChanged.value = false;
       }
-    },
-    clear() {
-      if (Object.keys(this.query).length) {
-        this.query = {};
-        this.$emit('search', {});
-        this.queryChanged = false;
+    };
+    const clear = () => {
+      if (Object.keys(query.value).length) {
+        query.value = {};
+        emit('search', {});
+        queryChanged.value = false;
       }
-    },
+    };
+
+    return {
+      query,
+      queryChanged,
+      hasKw,
+      kwFields,
+      localFields,
+      search,
+      clear,
+    };
   },
 });
 </script>

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

@@ -36,8 +36,8 @@
         >
           <q-radio
             class="radio"
-            v-model="data[Field.Name]"
-            @input="validate(); $emit('input')"
+            v-model="fieldData.value"
+            @update:model-value="radioChanged"
             :val="oValue.Value"
             :disable="Field.ReadOnly"
           />
@@ -54,28 +54,52 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, ref } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldRadioList',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'Simple',
     Label: '展开单选',
     Value: 'RadioList',
     Description: '',
   },
-  methods: {
-    validate() {
-      if (!this.data || !this.Field || !this.Field.Name) {
-        this.hasError = false;
+  props: {
+    ...freeFieldProps,
+  },
+  setup(props, { expose, emit }) {
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+    const hasError = ref(false);
+
+    const validate = () => {
+      if (!props.Field.Name) {
+        hasError.value = false;
         return true;
       }
 
-      this.hasError = typeof this.data[this.Field.Name] === 'undefined';
-      return !this.hasError;
-    },
+      hasError.value = typeof fieldData.value === 'undefined';
+      return !hasError.value;
+    }
+
+    const radioChanged = (v) => {
+      validate();
+      setFieldData(v, emit);
+    };
+    
+    expose({
+      validate,
+    })
+
+    return {
+      hasError,
+      fieldData,
+      setFieldData,
+      validate,
+      radioChanged,
+    };
   },
 });
 </script>