free-fe-core-modules 0.0.1 → 0.0.3

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'
@@ -83,9 +83,17 @@ export default defineComponent({
   mixins: [mixins.ArrayDataMixin],
   props: {
     has_multiple_head: { type: Boolean, default: false },
+    values: {type: Object, default: () => ({})},
   },
   created() {
-    this.Bus?.$on('update_summary_head', this.refreshData);
+    if (this.values) {
+      this.data = this.values;
+    }
+  },
+  watch: {
+    values(v) {
+      this.data = v || [];
+    },
   },
   methods: {
     filteredValue(item) {
@@ -137,7 +145,6 @@ export default defineComponent({
     },
   },
   beforeUnmount() {
-    this.Bus?.$off('update_summary_head', this.refreshData);
   },
 });
 </script>

package/components/Dialog/BasicDialog.vue

@@ -6,7 +6,7 @@
     <q-card
       :class="['basic-dialog-card', dialogClass]"
       :style="`min-height: ${size.h}px;
-         width: ${size.w}px; min-width: ${size.w}`"
+        width: ${size.w}px; min-width: ${size.w}`"
     >
       <q-btn
         class="float-right close-dialog-button"
@@ -32,10 +32,6 @@
           v-if="tips"
           class="tips"
         >{{ tips }}</div>
-        <!-- <div
-          v-if="warning"
-          class="warning"
-        >{{ warning }}</div> -->
         <div
           v-if="warning"
           class="warning no-wrap"
@@ -106,6 +102,8 @@
 <script>
 import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import FreeField from '../../free-field/composible/fieldWrapper';
+import EIcon from '../Basic/EIcon.vue';
 
 export default defineComponent({
   name: 'BasicDialog',
@@ -149,6 +147,12 @@ export default defineComponent({
     fieldsData: { type: Object, default: () => ({}) },
     fieldsClass: { type: String, default: '' },
     dialogClass: { type: String, default: '' },
+
+    remove: { type: Function, default: () => {}}
+  },
+  components: {
+    FreeField,
+    EIcon,
   },
   data() {
     return {
@@ -161,13 +165,6 @@ export default defineComponent({
       reject: '',
     };
   },
-  // created() {
-  //   if (this.visible) {
-  //     this.show();
-  //   } else {
-  //     this.hide();
-  //   }
-  // },
   watch: {
     visible() {
       if (this.visible) {
@@ -200,7 +197,7 @@ export default defineComponent({
     // following method is REQUIRED
     // (don't change its name --> "show")
     show() {
-      debugger
+      // debugger
       this.$refs.dialog.show();
       this.timeout_counter();
 
@@ -257,15 +254,6 @@ export default defineComponent({
         this.remove();
       }
     },
-    // show_msg_box() {
-    //   this.show();
-    //   this.promise = new Promise((resolve, reject) => {
-    //     this.resolve = resolve;
-    //     this.reject = reject;
-    //   });
-
-    //   return this.promise;
-    // },
     btnCancel() {
       this.$emit('cancel');
 
@@ -280,12 +268,6 @@ export default defineComponent({
       }
     },
     btn_ok() {
-      // // validate
-      // if (this.validateFunc && typeof this.validateFunc === 'function') {
-      //   // now we only have such content, but later we might will have more
-      //   this.textValid = this.validateFunc(this.textContent);
-      //   if (!this.textValid) return;
-      // }
       if (!this.validate()) {
         return;
       }
@@ -322,10 +304,6 @@ export default defineComponent({
         }
       }, 1000);
     },
-    remove() {
-      this.$destroy();
-      document.body.removeChild(this.$el);
-    },
     onInputFieldInput(field){
       if(field.onInput) {
         field.onInput(field);
@@ -394,49 +372,4 @@ export default defineComponent({
   text-align: center;
   color: red;
 }
-
-// .admin {
-//   margin-top: 10px;
-//   text-align: center;
-//   color: red;
-//   font-size: 12px;
-// }
-
-// .cancel-btn {
-//   background: rgba(255, 255, 255, 1);
-//   border: 1px solid rgba(74, 74, 74, 1);
-//   color: rgba(74, 74, 74, 1);
-// }
-
-// .cancel-btn:hover {
-//   background: rgba(0, 69, 156, 1);
-//   color: rgba(255, 255, 255, 1);
-//   border: 0;
-// }
-
-// .disabled-cancel-btn {
-//   background: rgba(255, 255, 255, 1);
-//   border: 1px solid rgba(155, 155, 155, 1);
-//   color: rgba(155, 155, 155, 1);
-// }
-
-// .ok-btn {
-//   background: rgba(24, 115, 220, 1);
-//   color: rgba(255, 255, 255, 1);
-// }
-
-// .ok-btn:hover {
-//   background: rgba(0, 69, 156, 1);
-//   color: rgba(255, 255, 255, 1);
-// }
-
-// .disabled-ok-btn {
-//   background: rgba(155, 155, 155, 1);
-//   color: rgba(255, 255, 255, 1);
-// }
-
-// .disabled-ok-btn:hover {
-//   background: rgba(155, 155, 155, 1);
-//   color: rgba(255, 255, 255, 1);
-// }
 </style>

package/components/Dialog/index.js

@@ -1,38 +1,48 @@
-import { createApp } from 'vue'
-import BasicDialog from './BasicDialog.vue';
-
-let $inst
-// 创建挂载实例
-let createMount = (opts) => {
-  const app = createApp(BasicDialog, {
-    ...opts, modelValue: true,
-    remove () {
-      app.unmount(mountNode)
-      document.body.removeChild(mountNode)
-    }
-  })
-  return app.mount('#eis-dialog')
-}
-
-function MsgDialog (options = {}) {
-  if (typeof options === 'string') {
-    options = {content: options};
-  }
-
-  $inst = createMount(options)
-
-  return $inst.show()
-    .then((val) => {
-      return Promise.resolve(val);
-    })
-    .catch((err) => {
-      return Promise.reject(err);
-    });
-}
+import { createApp } from 'vue';
+import Dialog from './BasicDialog.vue'
 
+const MsgDialog = {};
 MsgDialog.install = (app) => {
-  app.config.globalProperties.$MsgDialog = MsgDialog;
-  // app.provide('MsgDialog', MsgDialog)
-}
+  let MsgDialogInstance;
+  const init = (opts) => {
+    const dialogApp = createApp(Dialog, {
+      ...opts, modelValue: true,
+      remove: () => {
+        dialogApp.unmount();
+      }
+    });
+
+    dialogApp.config.globalProperties = app.config.globalProperties;
+
+    const { reload, ...appContext } = app._context;
+    Object.assign(dialogApp._context, appContext);
+
+    MsgDialogInstance = dialogApp.mount('#free-dialog');
+  };
+
+  app.config.globalProperties.$MsgDialog = (options) => {
+    const opts = {};
+
+    if (typeof options === 'string') {
+      opts.content = options;
+    } else if (typeof options === 'object') {
+      Object.assign(opts, options);
+    }
+
+    if (!MsgDialogInstance) {
+      init(opts);
+    }
+
+    return MsgDialogInstance.show()
+      .then((val) => {
+        MsgDialogInstance = null;
+        return Promise.resolve(val);
+      })
+      .catch((err) => {
+        MsgDialogInstance = null;
+        return Promise.reject(err);
+      });
+  };
+};
 
 export default MsgDialog;

package/components/Dialog/index2.js

@@ -0,0 +1,44 @@
+import { createApp } from 'vue';
+import dialog from './BasicDialog.vue';
+
+// 创建挂载实例
+let createMount = (opts) => {
+  const app = createApp(dialog, {
+    ...opts, modelValue: true,
+    // remove () {
+    //   app.unmount(mountNode)
+    //   document.body.removeChild(mountNode)
+    // }
+  })
+
+  return app.mount('#free-dialog')
+}
+
+function MsgDialog (options = {}) {
+  if (typeof options === 'string') {
+    options = {content: options};
+  }
+
+  const $inst = createMount(options)
+
+  console.error($inst)
+  if (!$inst) {
+    console.error($inst)
+    return;
+  }
+
+  return $inst.show()
+    .then((val) => {
+      return Promise.resolve(val);
+    })
+    .catch((err) => {
+      return Promise.reject(err);
+    });
+}
+
+MsgDialog.install = (app) => {
+  app.config.globalProperties.$MsgDialog = MsgDialog;
+  // app.provide('MsgDialog', MsgDialog)
+}
+
+export default MsgDialog;

package/components/SelectLocales/index.vue

@@ -8,6 +8,7 @@
           clickable
           v-close-popup
           @click="localeChanged(locale.locale)"
+            :active="$i18n.locale === locale.locale"
         >
           <q-item-section>{{locale.name}}</q-item-section>
         </q-item>
@@ -30,10 +31,8 @@ export default defineComponent({
     },
   },
   created() {
-    // set the default locale
-    // if (this.locales && this.locales.length > 0) {
-    //   this.$i18n.locale = this.locales[0].locale;
-    // }
+    const appStore = useAppStore();
+    this.$i18n.locale = appStore.locale || (this.locales && (this.locales.length > 0) && this.locales[0]);
   },
   methods: {
     localeChanged(l){

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"

package/components/SlidingNews/index.vue

@@ -20,7 +20,6 @@
       :height="heightString"
       :autoplay="interval"
       :navigation="false"
-      v-bind="$attrs"
       animated
       infinite
       padding

package/components/StickyButtons/index.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   emits: ['click'],
   props: {
     position: { type: String, default: 'bottom-right' },
-    offset: { type: Array, default: () => [36, 128, 0, 0] },
+    offset: { type: Array, default: () => [36, 128] },
     fab: { type: Boolean, default: true },
     fabIcon: { type: String, default: 'add' },
     fabColor: { type: String, default: '' },
@@ -58,7 +58,7 @@ export default defineComponent({
   },
   data() {
     return {
-      stickyOffset: [36, 128, 0, 0],
+      stickyOffset: [36, 128],
       draggingSticky: false,
     };
   },

package/components/ThemeSwitch/index.vue

@@ -14,6 +14,7 @@
             clickable
             v-close-popup
             @click="theme = tm"
+            :active="theme === tm"
           >
             <q-item-section>{{$t(tm)}}</q-item-section>
           </q-item>
@@ -25,6 +26,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import useAppStore from '@/stores/app';
 
 export default defineComponent({
   name: 'ThemeSwitch',
@@ -56,22 +58,26 @@ 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);
       }
     },
   },
   created() {
-    if (this.themes && this.themes.length > 0) {
-      this.theme = this.themes[0];
-    }
+    const appStore = useAppStore();
+    this.theme = appStore.theme || (this.themes && (this.themes.length > 0) && this.themes[0]);
   },
 });
 </script>

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',
+      }))
+    ]));
+  },
+});