@mythpe/quasar-ui-qui 0.0.72 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -201,9 +201,9 @@ const getTableTitle = computed(() => {
   }
   return undefined
 })
-const formRef = useForm<any, any>()
-const formScope = reactive(formRef)
-const { resetForm: resetDialogForm, setValues, handleSubmit } = formRef
+const useFormContext = useForm<any, any>()
+// const formScope = reactive(useFormContext)
+const { resetForm: resetDialogForm, setValues, handleSubmit } = useFormContext
 watch(() => props.defaultItem, (v) => {
   resetDialogForm({ values: { ...v || {} } }, { force: !0 })
 }, { immediate: !0, deep: !0 })
@@ -267,6 +267,7 @@ const dialogs = reactive<MDatatableDialogsOptions>({
   errors: dialogErrors
 })
 const resetDialogs = () => {
+  console.log('resetDialogs')
   dialogs.filter = !1
   dialogs.show = !1
   dialogs.form = !1
@@ -361,7 +362,9 @@ const hasShowBtn = computed<boolean>(() => {
 const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
 const hasFilterDialog = computed<boolean>(() => !!slots.filter)
 const hasMenu = computed<boolean>(() => {
-  if (!!props.pdf || !!props.excel) {
+  const pdf = !!props.pdf && getRows.value.length > 0
+  const excel = !!props.excel && getRows.value.length > 0
+  if (pdf || excel) {
     return !0
   }
   return hasAddBtn.value && !!addListBtnComputed.value
@@ -767,13 +770,14 @@ const openUpdateDialog = (i: MDtItem, index: MDtItemIndex) => {
         getRows.value[index] = { ..._data } as any
         nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
       }
-      setTimeout(async () => {
+      setTimeout(() => {
         resetVeeForm(_data)
-        nextTick()
-        dialogs.form = !0
+        nextTick(() => {
+          dialogs.form = !0
+        })
       }, openDialogTimeout)
     })
-    .catch((e) => {
+    .catch((e: any) => {
       const message = e?._message || e?.message
       message && alertError(message)
     })
@@ -895,7 +899,7 @@ const onSuccess: SubmissionHandler = async (form) => {
     scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
-      formRef.setErrors(_errors)
+      useFormContext.setErrors(_errors)
     }
   } finally {
     loading.value = !1
@@ -979,7 +983,7 @@ const deleteSelectionItem = () => {
   })
 }
 const logoutDatatable = () => {
-//
+  //
 }
 /**
  * ---
@@ -991,23 +995,22 @@ const logoutDatatable = () => {
 const contextmenu = ref(!1)
 const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | undefined) => {
   e.preventDefault?.()
-  nextTick(() => {
-    if (index === dialogs.index) {
-      selected.value = []
-      dialogs.item = undefined
-      dialogs.index = undefined
-      if (contextmenu.value) {
-        contextmenu.value = !1
-      }
-      return
-    }
-    selected.value = [row]
-    dialogs.item = row
-    dialogs.index = index
-    if (isGrid.value) {
-      contextmenu.value = !0
+  row = toValue(row)
+  if (index === dialogs.index) {
+    selected.value = []
+    dialogs.item = undefined
+    dialogs.index = undefined
+    if (contextmenu.value) {
+      contextmenu.value = !1
     }
-  })
+    return
+  }
+  selected.value = [row]
+  dialogs.item = row
+  dialogs.index = index
+  if (isGrid.value) {
+    contextmenu.value = !0
+  }
 }
 const contextmenuItemsProp = computed(() => props.contextItems)
 const contextmenuItems = computed<any>(() => ([
@@ -1084,7 +1087,7 @@ watch(loading, v => {
       $q.loading.hide()
     }
   }
-  tableOptions.hasAction = !!v
+  tableOptions.hasAction = v
 })
 watch([filterForm, () => $q.lang.nativeName], () => refreshNoUpdate(), { deep: !0 })
 watch(formDialogModel, (v) => {
@@ -1191,13 +1194,13 @@ defineOptions({
   >
     <!-- Context Menu -->
     <MModalMenu
+      v-if="false"
       v-model="contextmenu"
       class="shadow-6 relative-position"
       context-menu
       position="standard"
       touch-position
       v-bind="pluginOptions.dt?.contextmenu?.menu"
-      @hide="resetDialogs()"
     >
       <q-list
         v-if="dialogs.item"
@@ -1257,7 +1260,6 @@ defineOptions({
         @request="fetchDatatableItems"
         @update:selected="onUpdateSelectedItems"
         @virtual-scroll="endReach ? onScroll : undefined"
-        @row-contextmenu="onRowContextmenu"
       >
         <template
           v-for="slotName in getSlots"
@@ -1266,7 +1268,7 @@ defineOptions({
         >
           <slot
             :dt="datatableItemsScope"
-            :form="formScope"
+            :form="useFormContext"
             :index="dialogItemIndex"
             :item="dialogItem"
             :name="slotName"
@@ -1277,7 +1279,7 @@ defineOptions({
         <template #item="iTempProps">
           <slot
             :dt="datatableItemsScope"
-            :form="formScope"
+            :form="useFormContext"
             name="item"
             v-bind="iTempProps"
           >
@@ -1400,7 +1402,7 @@ defineOptions({
             >
               <slot
                 :dt="datatableItemsScope"
-                :form="formScope"
+                :form="useFormContext"
                 :index="dialogItemIndex"
                 :item="dialogItem"
                 name="top"
@@ -1409,7 +1411,7 @@ defineOptions({
               <MRow col>
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="title"
@@ -1442,7 +1444,7 @@ defineOptions({
                 </slot>
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="top-search"
@@ -1541,7 +1543,7 @@ defineOptions({
                 </MInput>
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="bottom-search"
@@ -1555,8 +1557,8 @@ defineOptions({
                   key="more-selection-btn"
                   :disable="tableOptions.loading"
                   icon="ion-ios-options"
-                  tooltip="myth.datatable.hints.more"
                   label="myth.datatable.hints.options"
+                  tooltip="myth.datatable.hints.more"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.more}"
                 >
                   <MModalMenu
@@ -1588,8 +1590,9 @@ defineOptions({
                           <span> {{ getFormTitle }}</span>
                         </q-item-section>
                       </q-item>
+                      <!-- Export PDF-->
                       <q-item
-                        v-if="pdf"
+                        v-if="pdf && getRows.length > 0"
                         v-close-popup
                         clickable
                         v-bind="pluginOptions.dt?.buttons?.moreItem"
@@ -1615,8 +1618,9 @@ defineOptions({
                           </span>
                         </q-item-section>
                       </q-item>
+                      <!-- Export Excel-->
                       <q-item
-                        v-if="excel"
+                        v-if="excel && getRows.length > 0"
                         v-close-popup
                         clickable
                         v-bind="pluginOptions.dt?.buttons?.moreItem"
@@ -1669,8 +1673,8 @@ defineOptions({
                   v-if="hasFilterDialog"
                   key="filter-selection-btn"
                   icon="o_filter_alt"
-                  tooltip="myth.datatable.hints.filter"
                   label="myth.datatable.hints.filter"
+                  tooltip="myth.datatable.hints.filter"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
                   @click="openFilterDialog()"
                 >
@@ -1704,7 +1708,7 @@ defineOptions({
                               <slot
                                 :dt="datatableItemsScope"
                                 :filter="tableOptions.tempFilter"
-                                :form="formScope"
+                                :form="useFormContext"
                                 :index="dialogItemIndex"
                                 :item="dialogItem"
                                 name="filter"
@@ -1888,7 +1892,7 @@ defineOptions({
               >
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="selection"
@@ -1912,7 +1916,7 @@ defineOptions({
         >
           <slot
             :dt="datatableItemsScope"
-            :form="formScope"
+            :form="useFormContext"
             :index="dialogItemIndex"
             :item="dialogItem"
             :name="`body-cell-${controlKey}`"
@@ -2006,7 +2010,7 @@ defineOptions({
       </q-table>
       <slot
         :dt="datatableItemsScope"
-        :form="formScope"
+        :form="useFormContext"
         :index="dialogItemIndex"
         :item="dialogItem"
         name="default"
@@ -2043,7 +2047,7 @@ defineOptions({
         >
           <slot
             :dt="datatableItemsScope"
-            :form="formScope"
+            :form="useFormContext"
             :index="dialogItemIndex"
             :item="dialogItem"
             name="show"
@@ -2080,14 +2084,14 @@ defineOptions({
               <q-toolbar :class="{'q-pa-none': $q.screen.lt.md}">
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="form-title-left"
                 />
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="form-title"
@@ -2113,7 +2117,7 @@ defineOptions({
                 </slot>
                 <slot
                   :dt="datatableItemsScope"
-                  :form="formScope"
+                  :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
                   name="form-title-right"
@@ -2150,7 +2154,7 @@ defineOptions({
               <slot
                 v-else
                 :dt="datatableItemsScope"
-                :form="formScope"
+                :form="useFormContext"
                 :index="dialogItemIndex"
                 :item="dialogItem"
                 name="form"
@@ -2163,7 +2167,7 @@ defineOptions({
             >
               <slot
                 :dt="datatableItemsScope"
-                :form="formScope"
+                :form="useFormContext"
                 :index="dialogItemIndex"
                 :item="dialogItem"
                 name="form-actions"

package/src/components/form/MMobile.vue

@@ -15,7 +15,7 @@ import { useTemplateRef } from 'vue'
 import MInput from './MInput.vue'
 import { useMyth } from '../../composable'
 
-const { props: pluginOptions } = useMyth()
+const { props: pluginOptions, mobileRule: mobile } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const input = useTemplateRef<InstanceType<typeof MInput>>('input')
 defineExpose<{ input: typeof input }>({ input })
@@ -29,8 +29,7 @@ defineOptions({
   <MInput
     ref="input"
     v-model="modelValue"
-    type="tel"
-    v-bind="{...pluginOptions.mobile as any,...$attrs}"
+    v-bind="{ type: 'tel', mobile, maxlength:mobile === !0 ? 10 : (mobile ?? 10), ...pluginOptions.mobile as any, ...$attrs }"
   >
     <template
       v-for="(_,slot) in $slots as Readonly<MInputSlots>"

package/src/components/form/MPicker.vue

@@ -108,7 +108,10 @@ const onBeforeHide = () => {
   dateRef.value = null
 }
 const saveDialog = () => {
-  let newVal: any = dateRef.value
+  let newVal: any = dateRef.value ?? null
+  if (!newVal) {
+    return
+  }
   if (typeof newVal === 'object' && isDate.value) {
     const values: any[] = Object.values(newVal)
     for (const aKey in values) {
@@ -208,6 +211,7 @@ defineOptions({
         <q-btn
           v-if="!disable && !readonly && !viewMode"
           :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
+          :color="!!errorMessage ? 'negative' : undefined"
           flat
           round
           v-bind="{...pluginOptions?.pickerBtn, ...btnProps}"

package/src/components/form/MSelect.vue

@@ -318,6 +318,8 @@ defineOptions({
         #[slot]="inputSlot"
       >
         <slot
+          :items="getOptions"
+          :value="value"
           :name="slot"
           v-bind="inputSlot || {}"
         />

package/src/components/grid/MCol.vue

@@ -53,7 +53,7 @@ defineOptions({
 <template>
   <div
     :class="classes"
-    v-bind="{...$attrs,':data-input-name': name??undefined}"
+    v-bind="{...$attrs,'data-input-name': name ?? undefined}"
   >
     <slot />
   </div>

package/src/composable/useBindInput.ts

@@ -64,6 +64,9 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
       if (typeof val === 'string' && val?.length > 0) {
         return val
       }
+      if (val === !0) {
+        return 'choose'
+      }
       return 'enter'
     })
     if (props.placeholder === undefined) {

package/src/style/main.sass

@@ -139,7 +139,7 @@ pre
 
   .m--input__top-label__content::after
     content: ' *'
-
+    color: q.$red
 
 .m--input__color-preview
   border: 1px solid q.$primary

package/src/types/components.d.ts

@@ -678,7 +678,7 @@ export interface MHiddenSlots {
   default: () => VNode[];
 }
 
-export type MFormScope = FormContext<Record<string, any>>;
+export type MFormScope = FormContext<Record<string, any>, Record<string, any>>;
 
 export interface MFormProps {
   /**
@@ -1208,6 +1208,7 @@ declare module '@vue/runtime-core' {
     MForm: GlobalComponentConstructor<MFormProps, MFormSlots>;
     MHidden: GlobalComponentConstructor<MHiddenProps, MHiddenSlots>;
     MHiddenInput: GlobalComponentConstructor<MHiddenInputProps, MHiddenInputSlots>;
+    MInput: GlobalComponentConstructor<MInputProps, MInputSlots>;
     MInputFieldControl: GlobalComponentConstructor<MInputFieldControlProps, MInputFieldControlSlots>;
     MInputLabel: GlobalComponentConstructor<MInputLabelProps, MInputLabelSlots>;
     MMobile: GlobalComponentConstructor<MInputProps, MInputSlots>;

package/src/types/myth-api.ts

@@ -33,4 +33,9 @@ export interface MythApi {
    * Add custom rules of vee-validate.
    */
   rules: string[];
+  /**
+   * Define mobile rule.
+   * Default is true. Length must be 10.
+   */
+  mobileRule?: boolean | string | number;
 }

package/src/utils/createMyth.ts

@@ -11,21 +11,26 @@ export const createMyth = (options: InstallOptions) => {
       services: {},
       axios: {} as AxiosInstance
     },
-    props: {},
-    rules: [],
     theme: {
       size: 'md',
       rounded: !0,
       shadow: 2,
       fluid: !0,
       buttons: {},
-      inputs: {},
+      inputs: {
+        hideBottomSpace: !0,
+        noErrorIcon: !0,
+        clearIcon: 'clear'
+      },
       buttonLoading: {
         type: 'spinner',
         color: undefined,
         size: undefined
       } as MythApi['theme']['buttonLoading']
-    }
+    },
+    props: {},
+    rules: [],
+    mobileRule: !0
   } as MythApi
   const opts = reactive<MythApi>(extend<MythApi>(!0, { ...defaultOptions }, options))
   const functions = {