free-fe-core-modules 0.0.1

package/field-components/components/FieldComponents.vue

@@ -0,0 +1,246 @@
+<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/field-components/index.js

@@ -0,0 +1,13 @@
+import fields from './Fields';
+import display from './Display';
+import FreeField from './components/FieldComponents.vue';
+
+export default {
+  components: {
+    FreeField
+  },
+  fieldComponents: {
+    ...fields,
+    ...display,
+  },
+};

package/field-components/style.sass

@@ -0,0 +1,11 @@
+$inputFieldCategoryMargin: var(--input-field-category-margin, unset)
+$inputFieldWrapperMargin: var(--input-field-wrapper-margin, unset)
+$inputFieldMargin: var(--input-field-margin, unset)
+$simpleFieldHeight: var(--simple-field-height, unset)
+$simpleFieldWidth: var(--simple-field-width, 100%)
+$fieldLabelWidth: var(--field-label-width,120px)
+$fieldLabelFontSize: var(--field-label-font-size,12px)
+$fieldLabelColor: var(--field-label-color,unset)
+$fieldLabelAfter: var(--field-label-after,'')
+$fieldLabelRequiredColor: var(--field-label-required-color,#E33)
+$editorAreaBackground: var(--editor-area-background, unset)

package/free-fields/AutoHide.js

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,30 @@
+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)
+  }
+})

package/free-fields/Droppable.js

@@ -0,0 +1,114 @@
+import { defineComponent, h, ref } from 'vue';
+
+export default defineComponent({
+  name: "FreeFieldDroppable",
+  props: {
+    exact: Boolean,
+    dataName: [String, Array],
+    notToDraggable: Boolean,
+    enterClass: String,
+    enterStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['freeTrigger', 'drop'],
+  setup(props, { emit, slots }){
+    const selfRef = ref(null);
+    const originalStyle = {};
+
+    const getTransferData = (e) => {
+      let dropData;
+      if(typeof props.dataName === 'string') {
+        dropData = e.dataTransfer.getData(props.dataName);
+      } else if(Array.isArray(props.dataName)) {
+        dropData = {};
+        for(let dn of props.dataName) {
+          const dd = e.dataTransfer.getData(dn);
+
+          if(dd) {
+            dropData = `{"${dn}": ${dd}}`
+
+            break;
+          }
+        }
+      } else {
+        dropData = e.dataTransfer.getData('data')
+      }
+
+      return dropData || "";
+    }
+
+    const onDragenter =  (e) => {
+      if(props.exact && e.target !== selfRef.value) {
+        return;
+      }
+
+      Object.keys(props.enterStyle).forEach(sk => {
+        originalStyle[sk] = e.target.style[sk];
+      });
+
+      if (props.notToDraggable && e.target.draggable === true) {
+        return;
+      }
+
+      e.target.classList.add(props.enterClass);
+      Object.keys(originalStyle).forEach(sk => {
+        e.target.style[sk] = props.enterStyle[sk];
+      });
+    }
+
+    const onDragleave =  (e) => {
+      if(props.exact && e.target !== selfRef.value) {
+        return;
+      }
+
+      e.target.classList.remove(props.enterClass);
+      Object.keys(originalStyle).forEach(sk => {
+        e.target.style[sk] = originalStyle[sk];
+      });
+    }
+
+    const onDragover =  (e) => {
+      e.preventDefault()
+    }
+
+    const onDrop =  (e) => {
+      if(props.exact && e.target !== selfRef.value) {
+        return;
+      }
+
+      e.preventDefault()
+
+      // don't drop on other draggables
+      if (props.notToDraggable && e.target.draggable === true) {
+        return;
+      }
+
+      let dropData = getTransferData(e);
+
+      try{
+        dropData = dropData &&  JSON.parse(dropData);
+      } catch(_) {
+        dropData = "";
+      }
+
+      if(dropData) {
+        emit('drop', dropData);
+      }
+
+      e.target.classList.remove(props.enterClass);
+      Object.keys(originalStyle).forEach(sk => {
+        e.target.style[sk] = originalStyle[sk];
+      });
+    }
+
+    return () => h('div', {
+      ref: selfRef,
+      onDragenter,
+      onDragleave,
+      onDragover,
+      onDrop,
+    }, slots.default ? slots.default() : undefined)
+  }
+})

package/free-fields/EditableString.js

@@ -0,0 +1,63 @@
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  nextTick,
+} from "vue";
+
+export default defineComponent({
+  name: "FreeFieldEditableString",
+  props: {
+    modelValue: [String, Number],
+    debounce: Number
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const editable = ref(false);
+    const inputRef = ref(null);
+
+    const inputEvent = (e) => {
+      const vv = typeof props.modelValue === 'number' ? (Number(e.target.value) || 0) : e.target.value;
+      emit("update:modelValue", vv);
+      editable.value = false;
+    };
+
+    const renderH = computed(() => {
+      if(editable.value) {
+        return h("input", {
+          style: "outline: none; border: none;padding: 0;margin:0;width: 100%;",
+          ref: inputRef,
+          value: props.modelValue || '',
+          onKeydown: (e) => e.code === 'Enter' && inputRef.value.blur(),
+          onBlur: inputEvent,
+          onClick: (e) => {
+            e.cancelBubble = true;
+            e.preventDefault();
+          },
+        });
+      }
+
+      return h(
+          "div",
+          {
+            class: "",
+            style: "min-width: 4px; min-height: 12px;",
+            onClick: (e) => {
+              e.cancelBubble = true;
+              e.preventDefault();
+              editable.value = true;
+              nextTick(() => {
+                inputRef.value.focus();
+              });
+            },
+          },
+          [
+            props.modelValue
+          ]
+        );
+    })
+
+    return () => renderH.value;
+  },
+});

package/free-fields/FieldCategory.js

@@ -0,0 +1,83 @@
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  nextTick,
+} from "vue";
+import { QSpace, QSeparator } from 'quasar';
+
+export default defineComponent({
+  name: "FreeFieldCategory",
+  props: {
+    hide: Boolean,
+    hidden: Boolean,
+    line: Boolean,
+    title: String,
+    titleClass: String,
+    titleStyle: String,
+    showLabel: {
+      type: String,
+      default: 'Show'
+    },
+    hideLabel: {
+      type: String,
+      default: 'Hide'
+    },
+    titleClickable: Boolean,
+    showLabelWhenHidden: Boolean
+  },
+  setup(props, { slots }) {
+    const hidden = ref(props.hidden || false);
+    const hovered = ref(false);
+    const titleClickable = props.titleClickable && props.hide;
+
+    return () => h('div',{
+      class: 'free-field-category',
+      style: 'font-size: 16px;'
+    },[
+      h('div', {
+        class: `free-field-category-title row no-wrap text-grey-9 ${titleClickable ? 'cursor-pointer' : ''}`,
+        onMouseenter: () => {
+          nextTick(() => {
+            hovered.value = true
+          })
+        },
+        onMouseleave: () => {
+          nextTick(() => {
+            hovered.value = false
+          })
+        },
+        onClick: () => {
+          if(!titleClickable) return;
+
+          nextTick(() => {
+            hidden.value = !hidden.value;
+          })
+        }
+      },
+      [
+        h('div', {
+          class: props.titleClass || 'q-mb-sm',
+          style: props.titleStyle,
+        } ,props.title || ''),
+        h(QSpace),
+        props.hide ? ((hovered.value || (props.showLabelWhenHidden && hidden.value)) ? h('div', {
+          class: `free-field-category-hide-btn cursor-pointer ${props.titleClass}`,
+          style: props.titleStyle,
+          onClick: () => {
+            if(props.titleClickable) return;
+
+            nextTick(() => {
+              hidden.value = !hidden.value;
+            })
+          }
+        } ,(hidden.value ? props.showLabel : props.hideLabel) || '') : undefined) : undefined,
+      ]),
+      slots.default ? (hidden.value ? undefined : slots.default()) : undefined,
+      props.line ? h(QSeparator, {
+        class: 'free-field-category-line q-my-sm'
+      }) : undefined,
+    ]);
+  },
+});