free-fe-core-modules 0.0.2 → 0.0.4

package/field-components/Fields/components/FieldTypeOptions.vue

@@ -1,248 +0,0 @@
-<template>
-  <span v-if="Field" class="simple-field input-field-field-type-options row items-center no-wrap">
-    <q-input
-      :value="optionLabel"
-      hide-bottom-space
-      readonly
-      v-bind="$attrs"
-      :ref="`input_field_validator_date`"
-    >
-      <template v-slot:before>
-        <span
-          :class="
-            `field-label ${
-              Field.Label && Field.Label.trim().length
-                ? ''
-                : 'field-label-empty'
-            } ${Field.Required ? 'required' : ''}`
-          "
-          v-if="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>
-      </template>
-      <q-popup-proxy ref="qTypeProxy" transition-show="scale" transition-hide="scale">
-        <div class="row input-field-field-type-options-content" style="max-height: 320px">
-          <q-card class="full-height" style="min-width: 500px">
-            <q-separator />
-            <q-splitter v-model="splitter" style="height: 300px">
-              <template v-slot:before>
-                <q-tabs v-model="leftTab" vertical active-bg-color="grey-4">
-                  <q-tab
-                    v-for="(category, index) in categoryList"
-                    :key="index"
-                    ripple
-                    :name="category"
-                    :label="$t(`fieldCategory${category}`)"
-                  ></q-tab>
-                </q-tabs>
-              </template>
-
-              <template v-slot:after>
-                <q-tab-panels
-                  v-model="leftTab"
-                  animated
-                  transition-prev="slide-down"
-                  transition-next="slide-up"
-                  class="full-height"
-                >
-                  <q-tab-panel
-                    v-for="(category, index) in categoryList"
-                    :key="index"
-                    :name="category"
-                    class="row full-height"
-                    style="width: 800px;"
-                  >
-                    <q-list class="col full-height scroll" style="max-width: 180px">
-                      <q-item
-                        v-for="(option, index) in categoryFields(category)"
-                        :key="index"
-                        clickable
-                        v-ripple
-                        :active="fieldData === option.Value"
-                        @click="typeChanged(option)"
-                      >
-                        <q-item-section>
-                          <q-item-label>{{ option.Label }}</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                    <q-card
-                      class="col full-height scroll"
-                      flat
-                      style="min-width: 500px; margin-bottom: 10px; border: 1px solid grey"
-                    >
-                      <q-card-section>
-                        <free-field
-                          v-for="(field, index)
-                            in (Array.isArray(demoField) ? demoField : [demoField])"
-                          :key="index"
-                          :Field="field"
-                          :values="demoData"
-                        ></free-field>
-                      </q-card-section>
-                      <q-card-section></q-card-section>
-                    </q-card>
-                  </q-tab-panel>
-                </q-tab-panels>
-              </template>
-            </q-splitter>
-          </q-card>
-        </div>
-      </q-popup-proxy>
-      <template v-slot:append>
-        <q-icon name="event" class="cursor-pointer"></q-icon>
-      </template>
-    </q-input>
-  </span>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
-
-export default defineComponent({
-  name: 'FieldTypeOptions',
-  mixins: [mixins.InputFieldMixin],
-  emits: ['updateOptions'],
-  data() {
-    return {
-      leftTab: 'Static',
-      splitter: 10,
-      testData: {
-        Type: 'String',
-        Label: 'Label',
-        Name: 'value',
-        Required: true,
-        value: 'test value',
-        Options: [
-          {
-            Label: 'Option one',
-            Value: 'test value',
-          },
-        ],
-        Warning: 'This is some warning message.',
-        Description: 'This is some description',
-        Tips: [
-          {
-            Text: 'this is some tip',
-          },
-        ],
-      },
-      optionLabel: '',
-      fieldCategory: [],
-    };
-  },
-  computed: {
-    demoField() {
-      if (!this.Field || !this.Field.Options) return [];// this.testData;
-
-      const f = this.Field.Options.find((o) => o.Value === this.fieldData);
-
-      if (f && f.fieldInfo && f.fieldInfo.demoField) {
-        return f.demoField;
-      }
-
-      return [];// { ...this.testData, Type: this.fieldData };
-    },
-    demoData() {
-      if (!this.Field || !this.Field.Options) return {};// this.testData;
-
-      const f = this.Field.Options.find((o) => o.Value === this.fieldData);
-
-      if (f && f.fieldInfo && f.fieldInfo.demoData) {
-        return f.demoData;
-      }
-
-      return {};// this.testData;
-    },
-    categoryList() {
-      return this.fieldCategory.map((fc) => fc.Name);
-    },
-    categoryFields() {
-      return (c) => {
-        const cat = this.fieldCategory.find((fc) => fc.Name === c);
-        if (cat) return cat.Fields || [];
-        return [];
-      };
-    },
-  },
-  async created() {
-    this.getTypeOptions();
-    this.getFieldOptionLabel();
-  },
-  methods: {
-    async getTypeOptions() {
-      const typeOptions = [];
-      for (let i = 0; i < Object.keys(this.ctx.FieldComponents).length; i += 1) {
-        const fk = Object.keys(this.ctx.FieldComponents)[i];
-        let fc = this.ctx.FieldComponents[fk];
-
-        if (typeof fc === 'function') {
-        // eslint-disable-next-line no-await-in-loop
-          fc = await fc();
-          fc = fc.default || fc;
-        }
-
-        if (fc && fc.fieldInfo) {
-          typeOptions.push(fc.fieldInfo);
-
-          if (fc.fieldInfo.Value === this.fieldData) {
-            this.optionLabel = fc.fieldInfo.Label;
-          }
-
-          // category
-          const info = fc.fieldInfo;
-          if (info.Category) {
-            if (this.fieldCategory.findIndex((cl) => cl.Name === info.Category) < 0) {
-              this.fieldCategory.push({ Name: info.Category, Fields: [info] });
-            } else {
-              const c = this.fieldCategory.find((cat) => cat.Name === info.Category);
-              if (c) {
-                c.Fields = c.Fields || [];
-                c.Fields.push(info);
-              }
-            }
-          } else if (this.fieldCategory.findIndex((cl) => cl.Name === 'Others') < 0) {
-            this.fieldCategory.push({ Name: 'Others', Fields: [info] });
-          } else {
-            const c = this.fieldCategory.find((cat) => cat.Name === 'Others');
-            if (c) {
-              c.Fields = c.Fields || [];
-              c.Fields.push(info);
-            }
-          }
-        }
-      }
-
-      this.$emit('updateOptions', { Name: this.Field.Name, Options: typeOptions });
-    },
-    getFieldOptionLabel() {
-      const opt = this.Field.Options.find((op) => op.Value === this.fieldData);
-      if (opt) this.optionLabel = opt.Label;
-    },
-    typeChanged(option) {
-      this.fieldData = option.Value;
-      if (option.DataType) this.data.DataType = option.DataType;
-
-      this.$emit('input');
-      this.getFieldOptionLabel();
-    },
-  },
-});
-</script>
-
-<style lang="sass">
-.input-field-field-type-options
-  .q-field__control
-    padding: 0 8px
-  .input-field-field-type-options-content
-    .q-panel
-      overflow: hidden
-</style>

package/field-components/components/FieldComponents.vue

@@ -1,246 +0,0 @@
-<template>
-  <div
-    v-if="Field"
-    :class="`free-field-wrapper ${localField.Label
-    && localField.Label.trim().length ? 'with-label'
-      : 'without-label'} ${Field.Label ?
-      'free-field-wrapper-'+Field.Label : ''} ${Field.Name ?
-      'free-field-wrapper-'+dashedName : ''} ${(Field && Field.Info)
-        ? (Field.Info.Classes || '') : ''}`"
-  >
-    <component
-      :style="shouldHide ? 'display: none;' : ''"
-      :is="realComp"
-      :Field="localField"
-      :modelValue="data"
-      :ref="`input_field_validator_${localField.Name || localField.Label}`"
-      :class="[
-        (localField && localField.ReadOnly) ? 'free-field--readonly' : '',
-        (!shouldHide && hasError) ? 'hasError' : ''
-      ]"
-      @input="inputChanged"
-      v-bind="Object.assign({},vBindValue(localField), $attrs)"
-    >
-      <template
-        v-for="slt in ((Field && Field.Slots) || [])"
-        v-slot:[slt]="props"
-        >
-        <slot :name="slt" v-bind="props"></slot>
-      </template>
-    </component>
-  </div>
-</template>
-
-<script>
-import { defineComponent, markRaw } from 'vue';
-import mixins from 'free-fe-mixins';
-
-// TODO: any other solution to replace the eval??
-const evalFunc = (cond, pName = 'data') => {
-  const funcStr = `
-  (${pName}) => {
-    return ${cond};
-  }
-  `;
-
-  try {
-    // eslint-disable-next-line no-eval
-    return eval(funcStr);
-  } catch (ex) {
-    return undefined;
-  }
-};
-
-export default defineComponent({
-  name: 'FreeField',
-  mixins: [mixins.ObjectDataMixin, mixins.InputFieldValidator],
-  emits: ['input'],
-  props: {
-    Field: { type: Object },
-  },
-  data() {
-    return {
-      realComp: undefined,
-    };
-  },
-  computed: {
-    dashedName() {
-      return (this.Field.Name || '').replace(/\./g, '-');
-    },
-    shouldHide() {
-      if (!this.Field) {
-        return true;
-      }
-
-      // show when
-      if (this.Field.Info && this.Field.Info.ShowWhen) {
-        const theFunc = evalFunc(this.Field.Info.ShowWhen);
-        if (typeof theFunc !== 'function') {
-          return true;
-        }
-        const condResult = theFunc(this.data);
-        if (!condResult) return true;
-      }
-
-      // hide (when)
-      if (this.Field.Hidden
-        && this.Field.Info
-        && this.Field.Info.HideWhenUndefined) {
-        const checkField = this.Field.Info.HideWhenUndefinedField || this.Field.Name;
-        if (checkField) {
-          const fList = checkField.split(',');
-          for (let i = 0; i < fList.length; i += 1) {
-            const fl = fList[i];
-
-            const flv = Object.nestValue(this.data, fl.trim());
-            if (typeof flv === 'undefined') return true;
-
-            if (this.Field.Info.IncludeEmptyObject) {
-              return !Object.hasValue(flv);
-            }
-          }
-          return false;
-        }
-      }
-
-      return this.Field.Hidden;
-    },
-    localField() {
-      const rules = [];
-      const lField = { ...this.Field };
-      lField.Rules = lField.Rules || [];
-      for (let i = 0; i < lField.Rules.length; i += 1) {
-        const rule = lField.Rules[i];
-
-        if (typeof rule === 'string' && this.ctx.validators[rule] && this.ctx.validators[rule].validator) {
-            lField.Rules[i] = this.ctx.validators[rule].validator;
-          }
-      }
-
-      if (lField.Required) {
-        rules.push(val => typeof val !== 'undefined' && val !== '');
-      }
-
-      lField.rules = [].concat(this.Field.Rules).concat(rules).concat(lField.rules);
-
-      return lField;
-    },
-    vBindValue() {
-      return (d) => {
-        if (!d || typeof d !== 'object') return {};
-
-        const ret = {};
-        Object.keys(d).forEach((dk) => {
-          if (!dk) return;
-
-          if (
-            dk.charAt(0) === dk.charAt(0).toLowerCase()
-            || ['Placeholder', 'ReadOnly'].indexOf(dk) >= 0
-          ) {
-            switch (dk) {
-              case 'Placeholder':
-                ret.placeholder = d[dk];
-                break;
-              case 'ReadOnly':
-                ret.readonly = d[dk];
-                break;
-              default:
-                ret[dk] = d[dk];
-                break;
-            }
-          }
-        });
-
-        return ret;
-      };
-    },
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'Field.Type': function (nv) {
-      if (!this.realComp || this.realComp.name !== nv) {
-        this.getRRealComp();
-      }
-    },
-  },
-  created() {
-    this.getRRealComp();
-
-    if (this.Field && this.Field.Info && this.Field.Info.KeepChanged) {
-      this.$nextTick(() => {
-        this.$emit('input', this.Field);
-      });
-    }
-  },
-  methods: {
-    getRRealComp() {
-      // all components
-      const fComponents = this.ctx ? this.ctx.FieldComponents || {} : {};
-      let field;
-
-      // for some specified types
-      if (this.Field.Component) {
-        field = this.Field.Component;
-      } else if (this.Field.Type === 'Select' && this.Field.AsRadio) {
-        field = fComponents.RadioList;
-      } else {
-        if(typeof this.Field.Type === 'undefined') {
-          field = fComponents.String;
-        } else {
-          field = fComponents[this.Field.Type] || this.Field.Type;
-        }
-      }
-
-      this.realComp = markRaw(field);
-      // return field;
-    },
-    inputChanged(f) {
-      this.$emit('input', f || this.Field);
-    },
-  },
-});
-</script>
-
-<style lang="sass">
-@import '../style.sass'
-
-.free-field-wrapper
-  width: 100%
-  .free-field-wrapper
-    width: unset
-  .simple-field
-    // display: inline-block
-    width: 100%
-  .free-field-range-separator
-    margin: 0 6px
-  .field-label-empty
-    display: inline-block
-    margin-left: 0
-    padding-left: 0
-    width: $fieldLabelWidth
-    min-width: $fieldLabelWidth
-
-  .field-label
-    display: inline-block
-    margin-left: 0
-    padding-left: 0
-    font-size: $fieldLabelFontSize
-    width: $fieldLabelWidth
-    min-width: $fieldLabelWidth
-    color: $fieldLabelColor
-    text-align: right
-    white-space: normal
-
-  .field-label:after
-    content: $fieldLabelAfter
-
-  .required-mark
-    color: $fieldLabelRequiredColor
-    position: relative
-    top: 3px
-
-  .q-uploader
-    flex: 1
-    box-shadow: unset
-
-</style>

package/free-fields/AutoHide.js

@@ -1,66 +0,0 @@
-import {
-  defineComponent,
-  h,
-  ref,
-  computed,
-  nextTick,
-} from "vue";
-import { QIcon } from 'quasar';
-
-export default defineComponent({
-  name: "FreeFieldAutoHide",
-  props: {
-    hideIcon: String,
-    vertical: Boolean,
-    size: String,
-    duration: Number
-  },
-  setup(props, { slots }) {
-    const hovered = ref(false);
-    const defaultIcon = props.vertical ? 'more_vert' : 'more_horiz';
-    const freez = ref(false);
-
-    const renderH = computed(() => {
-      if(hovered.value) {
-        return h('div', {
-          onMouseleave: () => {
-            if(freez.value) return;
-
-            nextTick(() => {
-              hovered.value = false;
-              freez.value = true;
-            })
-          },
-          onMousemove: () => {
-            nextTick(() => {
-              freez.value = false;
-            })
-          }
-        }, slots.default ? slots.default() : undefined);
-      }
-
-      return h(
-          QIcon,
-          {
-            name: props.hideIcon || defaultIcon,
-            size: props.size || 'md',
-            onMouseenter: () => {
-              if(freez.value) return;
-
-              nextTick(() => {
-                freez.value = true;
-              })
-            },
-            onMousemove: () => {
-              nextTick(() => {
-                hovered.value = true;
-                freez.value = false;
-              })
-            }
-          }
-        );
-    })
-
-    return () => renderH.value;
-  },
-});

package/free-fields/CenterContent.js

@@ -1,15 +0,0 @@
-import {
-  defineComponent,
-  h,
-} from "vue";
-
-export default defineComponent({
-  name: "FreeFieldCenterContent",
-  setup(props, { slots }) {
-    return () => h('div', {
-      class: "relative-position full-height full-width"
-    }, h('div', {
-      class: "absolute-center"
-    }, slots.default ? slots.default() : undefined))
-  },
-});

package/free-fields/Draggable.js

@@ -1,30 +0,0 @@
-import { defineComponent, h } from 'vue';
-
-export default defineComponent({
-  name: "FreeFieldDraggable",
-  props: {
-    dropEffect: String,
-    dataName: String,
-    data: {
-      default: ""
-    },
-    extra: Object
-  },
-  setup(props, { slots }){
-    const onDragstart =  (e) => {
-      if(typeof props.data === 'object' && props.extra) {
-        e.dataTransfer.setData(props.dataName || "data", JSON.stringify(Array.isArray(props.data) ? [...props.data, ...props.extra] : {...props.data, ...props.extra}));
-      } else {
-        e.dataTransfer.setData(props.dataName || "data", JSON.stringify(props.data));
-      }
-
-      e.dataTransfer.dropEffect = props.dropEffect;
-    };
-
-    return () => h('div', {
-      class: 'free-field-draggable',
-      draggable: true,
-      onDragstart,
-    }, slots.default ? slots.default() : undefined)
-  }
-})