free-fe-core-modules 0.0.4 → 0.0.6

package/components/Basic/BreadCrumbs.vue

@@ -9,12 +9,13 @@
     />
     <q-space></q-space>
     <q-btn v-if="meta.length > 0 && canBack"
-      flat icon="keyboard_arrow_left" @click="back">{{backText}}</q-btn>
+      flat icon="keyboard_arrow_left" @click="back">{{$t(backText)}}</q-btn>
   </q-breadcrumbs>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter, useRoute } from 'vue-router'
 import { mapWritableState } from 'pinia';
 import useAppStore from '@/stores/app';
 
@@ -24,6 +25,14 @@ export default defineComponent({
     canBack: { type: Boolean, default: true },
     backText: { type: String, default: '返回' },
   },
+  setup() {
+    const router = useRouter();
+
+    return {
+      router,
+      route: useRoute(),
+    };
+  },
   data() {
     return {
       nextFlag: false,
@@ -37,11 +46,11 @@ export default defineComponent({
       let mt = [];
       if (this.crumbs && this.crumbs.length) {
         mt = this.crumbs;
-      } else if (this.$route.meta && this.$route.meta.length) {
-        mt = this.$route.meta;
+      } else if (this.route.meta && this.route.meta.length) {
+        mt = this.route.meta;
       } else {
-        for (let i = 0; i < this.$route.matched.length; i += 1) {
-          const rm = this.$route.matched[i];
+        for (let i = 0; i < this.route.matched.length; i += 1) {
+          const rm = this.route.matched[i];
           if (rm.meta && rm.meta.length) mt = rm.meta;
         }
       }
@@ -65,14 +74,14 @@ export default defineComponent({
         return;
       }
 
-      this.$router.push(this.meta[index].route);
+      this.router.push(this.meta[index].route);
       // const backIndex = this.meta.length - 1 - index;
       // window.history.go(-backIndex);
     },
     back() {
-      const URL = this.$route.fullPath.indexOf('?') === -1
-        ? this.$route.fullPath
-        : this.$route.fullPath.split('?')[0];
+      const URL = this.route.fullPath.indexOf('?') === -1
+        ? this.route.fullPath
+        : this.route.fullPath.split('?')[0];
       if (this.whiteList.indexOf(URL) === -1) {
         window.history.go(-1);
       } else {

package/components/Basic/LeveledMenus.vue

@@ -6,7 +6,7 @@
         v-if="!m.Sub || m.Sub.length <= 0"
         clickable
         class="simple"
-        :class="group"
+        :class="`${group} level_${level || 0}`"
         :to="m.Route"
         expand-icon-class="simple-expand-icon"
         :ref="`menuItem_${group}_index`"
@@ -17,7 +17,7 @@
               <q-icon class="leaf-icon" :name="m.Icon"></q-icon>
             </q-item-section>
             <q-item-section>
-              <div class="q-item__label leaf-label">{{$t(m.Label)}}</div>
+              <div class="q-item__label leaf-label">{{translate ? $t(m.Label) : m.Label}}</div>
             </q-item-section>
             <q-item-section side
               class="leaf-expand-icon">
@@ -32,10 +32,10 @@
 
       <q-expansion-item
         v-if="m.Sub && m.Sub.length > 0"
-        :value="m.Sub.filter(s => $route.fullPath.startsWith(s.Route)).length > 0"
+        :modelValue="m.Sub.filter(s => $route.fullPath.startsWith(s.Route)).length > 0"
         exact
         class="expansion"
-        :class="group"
+        :class="`${group} level_${level || 0}`"
         :dense-toggle="dense"
         expand-icon-class="expansion-icon"
         :expand-icon="expandIcon"
@@ -44,13 +44,14 @@
         :content-inset-level="inset ? insetLevel || (showIcon ? 0.6 : 0.4) : undefined"
         expand-separator
         :icon="(showIcon && m.Icon) ? m.Icon : undefined"
-        :label="$t(m.Label)"
+        :label="translate ? $t(m.Label) : m.Label"
         :to="m.Route"
         :ref="`menuItem_${group}_index`"
       >
         <leveled-menus
           :menus="m.Sub"
           :group="`${group}_${index}`"
+          :level="level + 1"
           :showIcon="showIcon"
           :insetLevel="insetLevel"
           :dense="dense"
@@ -71,6 +72,7 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'LeveledMenus',
   props: {
+    level: { type: Number, default: 0 },
     group: { type: String, default: 'DEFAULT' },
     menus: { type: Array },
     showIcon: { type: Boolean, default: true },
@@ -81,7 +83,13 @@ export default defineComponent({
     leafExpandedIcon: { type: String, default: undefined },
     expandIcon: { type: String, default: undefined },
     expandedIcon: { type: String, default: undefined },
+    translate: { type: Boolean, default: false },
   },
 });
 </script>
 
+<style lang="sass">
+.leveled-menu
+  .simple-expand-icon
+    display: none
+</style>

package/components/Basic/SummaryHead.vue

@@ -76,6 +76,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
@@ -90,10 +91,12 @@ export default defineComponent({
       data,
       refreshData,
     } = useObjectData(props, ctx);
+    const router = useRouter();
 
     return {
-      data, 
+      data,
       refreshData,
+      router,
     };
   },
   created() {
@@ -150,7 +153,7 @@ export default defineComponent({
           // if (item.route_query) rParams.query = item.route_query;
           // if (item.route_params) rParams.params = item.route_params;
 
-          this.$router.push(item.route);
+          this.router.push(item.route);
         }
       });
     },

package/components/Dialog/BasicDialog.vue

@@ -65,7 +65,9 @@
             :key="index"
             :Field="field"
             :values="fieldsData"
-            :ref="`input_field_validator_${index}`"
+            ref="fieldsToValid"
+            @cancel="btnCancel"
+            @ok="onOKClick"
             @input="onInputFieldInput(field)"
           ></free-field>
         </div>
@@ -75,7 +77,7 @@
       <q-card-actions
         align="center"
         class="action-buttons full-width absolute"
-        v-if="canOK || canCancel"
+        v-if="(canOK || canCancel) && !hideActions"
       >
         <q-btn
           :label="cancelText"
@@ -101,6 +103,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useFormValidator } from '../../composible/useFormValidator';
 import FreeField from '../../free-field/composible/fieldWrapper';
 import EIcon from '../Basic/EIcon.vue';
 
@@ -125,6 +128,7 @@ export default defineComponent({
     needText: { type: Boolean, default: false },
     text_label: { type: String, default: '' },
     max_text_length: { type: Number, default: 100 },
+    hideActions: { type: Boolean, default: false },
     canOK: { type: Boolean, default: true },
     canCancel: { type: Boolean, default: false },
     canClose: { type: Boolean, default: false },
@@ -153,6 +157,14 @@ export default defineComponent({
     FreeField,
     EIcon,
   },
+  setup(props, { expose }) {
+    const { validate } = useFormValidator('fieldsToValid');
+    expose({
+      validate,
+    })
+
+    return {};
+  },
   data() {
     return {
       timeLeft: 0,
@@ -196,7 +208,6 @@ export default defineComponent({
     // following method is REQUIRED
     // (don't change its name --> "show")
     show() {
-      // debugger
       this.$refs.dialog.show();
       this.timeout_counter();
 

package/components/FloatingWindow/index.vue

@@ -15,6 +15,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'FloatingWindow',
@@ -24,6 +25,13 @@ export default defineComponent({
     onlyIn: { type: Array, default: () => [] },
     top: { type: Number, default: 0 },
   },
+  setup() {
+    const router = useRouter();
+
+    return {
+      router,
+    };
+  },
   data() {
     return {
       x: 150,
@@ -53,7 +61,7 @@ export default defineComponent({
         if (/^(http|https):\/\/.*/.test(this.url)) {
           window.open(this.url);
         } else {
-          this.$router.push(this.url);
+          this.router.push(this.url);
         }
       }
     },

package/components/SlidingCarousel/index.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
@@ -48,9 +49,11 @@ export default defineComponent({
       refreshData,
     } = useObjectData(props, ctx);
 
+    const router = useRouter();
     return {
-      data, 
+      data,
       refreshData,
+      router,
     };
   },
   data() {
@@ -77,7 +80,7 @@ export default defineComponent({
         // window.location.href = l;
           window.open(carouse.url);
         } else {
-          this.$router.push(carouse.url);
+          this.router.push(carouse.url);
         }
       }
     },

package/components/SlidingNews/index.vue

@@ -2,7 +2,7 @@
   <div
     v-if="visible"
     class="row full-width sliding-news justify-center"
-    :class="(data && data.length) ? '' : 'empty'"
+    :class="(localData.length) ? '' : 'empty'"
   >
     <span class="sliding-news-label row items-center">
       <e-icon
@@ -26,23 +26,19 @@
       vertical
     >
       <q-carousel-slide
-        v-for="(carouse, index) in data"
+        v-for="(carouse, index) in localData"
         :key="index"
         :name="index"
         @click="newsClicked(carouse)"
         style="cursor: pointer; padding: 0; margin: 0;"
       >
-        <div class="row items-center justify-center full-height">
-          <span class="sliding-news-title">{{carouse.Title}}</span>
+        <div class="row no-wrap items-center justify-center full-height">
+          <div class="sliding-news-title col ellipsis">{{carouse.title}}</div>
           <q-space />
-          <span class="float-right sliding-news-right">
-            <span
-              class="sliding-news-date"
-              :style="`line-height: ${heightString}`"
-            >
+          <div class="sliding-news-right"
+            :style="`line-height: ${heightString}`">
               {{filter('normalDate',(carouse.PublishDate || carouse.LastUpdateDate))}}
-            </span>
-          </span>
+          </div>
         </div>
       </q-carousel-slide>
     </q-carousel>
@@ -65,6 +61,7 @@
 </template>
 
 <script>
+import { useRouter, useRoute } from 'vue-router'
 import { defineComponent } from 'vue';
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
@@ -72,6 +69,13 @@ export default defineComponent({
   name: 'SlidingNews',
   props: {
     ...objectDataProps,
+    fields: {
+      type: Object,
+      default: () => ({
+        title: 'Title',
+        date: 'LastUpdateDate'
+      }),
+    },
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '40px' },
     width: { type: String, default: '100%' },
@@ -88,10 +92,13 @@ export default defineComponent({
       data,
       refreshData,
     } = useObjectData(props, ctx);
+    const router = useRouter();
 
     return {
-      data, 
+      data,
       refreshData,
+      router,
+      route: useRoute(),
     };
   },
   data() {
@@ -113,24 +120,26 @@ export default defineComponent({
       return this.height;
     },
   },
-  // watch: {
-  //   visible() {
-  //     if (!this.visible) {
-  //       clearInterval(this.timer);
-  //     }
-  //   },
-  // },
-  // created() {
-  //   this.timer = setInterval(this.carouselNext, this.interval);
-  // },
+  localData() {
+    const fks = Object.keys(this.fields || {});
+    return (this.data || []).map((dd) => {
+      const ret = {};
+      for (let i = 0; i < fks.length; i += 1) {
+        const fk = fks[i];
+        ret[fk] = dd[this.fields[fk]];
+      }
+
+      return { ...dd, ...ret };
+    });
+  },
   methods: {
     newsClicked(news) {
       let url = '';
       if (news.url) url += news.url;
       else if (this.url) url += `${this.url}${news.id || ''}`;
 
-      if (url && this.$route.fullPath !== url) {
-        this.$router.push({ path: url });
+      if (url && this.route.fullPath !== url) {
+        this.router.push({ path: url });
       }
     },
     // carouselNext() {

package/composible/useFormValidator.js

@@ -0,0 +1,56 @@
+import { unref, getCurrentInstance, computed } from "vue";
+
+export function useFormValidator(...list) {
+  const { proxy:vm } = getCurrentInstance();
+
+  return {
+    validate: computed(() => {
+      return (...args) => {
+        if (vm.shouldHide) return true;
+      
+        // could have customized validate function in component
+        if (vm.selfValidate && typeof vm.selfValidate === 'function') {
+          return vm.selfValidate();
+        }
+      
+        const refsList = [];
+        for(let i = 0; i < list.length; i += 1) {
+          if (typeof list[i] === 'string') {
+            list[i] = vm.$refs[list[i]];
+          } else if (typeof list[i] === 'function') {
+            list[i] = list[i]();
+          }
+          
+          if (Array.isArray(list[i])) {
+            refsList.push(...list[i])
+          } else {
+            refsList.push(list[i])
+          }
+        }
+  
+        if (refsList.length <= 0) return true;
+      
+        let hasErr = false;
+        for (let i = 0; i < refsList.length; i += 1) {
+          let refi = unref(refsList[i]);
+
+
+          const validFun = unref(refi.validate || refi.methods?.validate || refi.component?.exposed?.validate|| refi.component?.ctx?.validate);
+          const shouldHide = unref(refi.shouldHide || refi.component?.ctx?.shouldHide);
+      
+          if (typeof validFun === 'function' && shouldHide !== true) {
+            hasErr = !validFun() || hasErr;
+
+            if (hasErr) {
+              console.error('got error', args)
+              break;
+            }
+          }
+        }
+      
+        return !hasErr;
+      };
+    }),
+  }
+};
+

package/free-field/Fields/AgreementCheck.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, getCurrentInstance } from 'vue';
-import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { QCheckbox } from 'quasar';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldAgreementCheck',
@@ -21,7 +21,7 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  setup(props, { emit }){
+  setup(props, { emit, expose }){
     if (!props.Field) return {};
 
     const { proxy:vm } = getCurrentInstance();
@@ -106,6 +106,10 @@ export default defineComponent({
       return isValid;
     };
 
+    defineExpose({
+      validate,
+    })
+
     const checkboxNode = () => h(QCheckbox, {
       disable: props.Field?.ReadOnly,
       label: props.Field?.showLabel ? '' : props.Field?.Label,

package/free-field/Fields/Category.js

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue';
+import { freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldCategory',
@@ -9,7 +10,7 @@ export default defineComponent({
     Description: '',
   },
   props: {
-    Field: { type: Object },
+    ...freeFieldProps,
   },
   methods: {
   },

package/free-field/Fields/Check.js

@@ -76,6 +76,7 @@ export default defineComponent({
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
+    fieldData.value = fieldData.value || false;
 
     const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
       Field: props.Field,

package/free-field/Fields/Date.js

@@ -1,7 +1,8 @@
 import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldDate',
@@ -40,7 +41,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { proxy: vm } = getCurrentInstance();
@@ -80,7 +81,7 @@ export default defineComponent({
 
     const showPopup = ref(false);
 
-    const DateNode = () => h(QInput, {
+    const DateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -121,12 +122,19 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
+
+    const {
+      validate,
+    } = useFormValidator(DateNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-date row items-center no-wrap',
     }, [
-      props.Field.ReadOnly ? readonlyNode() : DateNode(),
+      props.Field.ReadOnly ? readonlyNode() : DateNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/DateRange.js

@@ -1,7 +1,8 @@
 import { ref, defineComponent, getCurrentInstance, h, computed, watch, watchEffect } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldDateRange',
@@ -40,7 +41,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { proxy: vm } = getCurrentInstance();
@@ -119,7 +120,7 @@ export default defineComponent({
     const showMaxPopup = ref(false);
 
 
-    const minDateNode = () => h(QInput, {
+    const minDateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -162,9 +163,9 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
 
-    const maxDateNode = () => h(QInput, {
+    const maxDateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -206,7 +207,12 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
+
+    const { validate } = useFormValidator(minDateNode, maxDateNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-date row items-center no-wrap',
@@ -214,11 +220,11 @@ export default defineComponent({
       props.Field.ReadOnly ? readonlyNode() : h('div', {
         class: 'row items-center no-wrap'
       }, [
-        minDateNode(),
+        minDateNode.value,
         h('span', {
           class: 'input-field-range-separator'
         },props.Field.Separator || '~'),
-        maxDateNode(),
+        maxDateNode.value,
       ]),
       slots.warning && slots.warning(),
     ]);