@mythpe/quasar-ui-qui 0.4.24 → 0.4.25

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -212,7 +212,7 @@ const {
 const $q = useQuasar()
 const $router = useRouter()
 const { te } = useI18n({ useScope: 'global' })
-const useFormContext = useForm<any, any>()
+const useFormContext = useForm<any, any>({ initialValues: {} })
 const { resetForm: resetDialogForm, handleSubmit } = useFormContext
 
 const {
@@ -329,7 +329,7 @@ const {
 
 watch(defaultItem, (v) => {
   resetDialogForm({ values: { ...v || {} } }, { force: !0 })
-}, { immediate: !0, deep: !0 })
+}, { immediate: !1, deep: !0 })
 
 watch(() => getRows.value, (v) => emit('update:rows', v), { deep: !0 })
 watch([
@@ -463,10 +463,6 @@ const onLockSearch = () => {
   searchColumnsRef.value = !lockSearch.value ? [lockValueProp.value] : tempSearch.value
   // lockSearch.value = !lockSearch.value
 }
-onMounted(() => {
-  wrapCellsRef.value = getProp.value('wrapCells') ?? !1
-  refresh()
-})
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
     if (v) {
@@ -519,7 +515,16 @@ const showIfContext = (contextBtn: GenericMDtBtn): boolean => {
   }
   return !1
 }
-const tooSmall = computed(() => props.tooSmall === 0 ? false : ($q.screen.height < (props.tooSmall || 600)))
+const tooSmallComputed = computed(() => props.tooSmall === 0 ? false : ($q.screen.height < (props.tooSmall || 600)))
+
+onMounted(() => {
+  wrapCellsRef.value = getProp.value('wrapCells') ?? !1
+  refresh()
+  // setTimeout(() => {
+  //   filterForm.value = {}
+  //   console.log('filterForm.value', filterForm.value)
+  // }, 600)
+})
 defineOptions({
   name: 'MDatatable',
   inheritAttrs: !1
@@ -572,7 +577,7 @@ defineExpose({
       'm-datatable-component',
       {
         'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions?.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
-        'm-datatable-component__too_small': tooSmall,
+        'm-datatable-component__too_small': tooSmallComputed,
         'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn),
       }]"
   >
@@ -1093,10 +1098,9 @@ defineExpose({
                         @before-show="beforeCloseFilterDialog"
                       >
                         <q-card
+                          :style="`max-width: 600px; width: ${$q.screen.width}px`"
                           flat
-                          fstyle="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
                           square
-                          style="max-width: 700px"
                         >
                           <MContainer class="q-pa-lg">
                             <q-toolbar :class="{'q-pa-none': isSmall}">
@@ -1118,10 +1122,7 @@ defineExpose({
                                   />
                                 </MContainer>
                               </MCol>
-                              <MCol
-                                class="q-pt-lg"
-                                col="12"
-                              >
+                              <MCol col="12">
                                 <MRow class="justify-between">
                                   <MBtn
                                     v-close-popup
@@ -1244,7 +1245,7 @@ defineExpose({
                       >
                         <q-card style="min-width: 250px; max-width: 900px">
                           <q-card-section>
-                            <div class="text-body1 q-mb-md">
+                            <div class="text-body1 q-mb-xs">
                               {{ __('myth.datatable.columnsToShow') }}
                             </div>
                             <div class="text-body2">
@@ -1252,19 +1253,23 @@ defineExpose({
                               {{ __('myth.datatable.columnsToShowCaption') }}
                             </div>
                           </q-card-section>
+                          <q-separator />
                           <q-card-section>
-                            <template
-                              v-for="h in getHeaders"
-                              :key="h.name"
-                            >
-                              <q-checkbox
-                                v-model="visibleHeaders"
-                                :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
-                                :label="h.label"
-                                :val="h.name"
-                              />
-                            </template>
+                            <div class="row justify-between">
+                              <template
+                                v-for="h in getHeaders"
+                                :key="h.name"
+                              >
+                                <q-checkbox
+                                  v-model="visibleHeaders"
+                                  :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
+                                  :label="h.label"
+                                  :val="h.name"
+                                />
+                              </template>
+                            </div>
                           </q-card-section>
+                          <q-separator />
                           <q-card-section>
                             <MBtn
                               v-if="$q.screen.gt.xs"

package/src/components/form/MAxios.vue

@@ -12,7 +12,7 @@
 >
 
 import type { MAxiosProps as Props, MSelectModelEmit, MSelectSlots } from '../../types'
-import { computed, onMounted, toValue, useTemplateRef, watch } from 'vue'
+import { computed, onMounted, ref, toValue, useTemplateRef, watch } from 'vue'
 import { useFieldValue, useSetFieldValue } from 'vee-validate'
 import MSelect from './MSelect.vue'
 import { useMyth } from '../../composable'
@@ -37,16 +37,16 @@ type P = {
 }
 
 const props = withDefaults(defineProps<P>(), {
-  name: () => '',
+  name: '',
   label: undefined,
   placeholder: undefined,
-  viewMode: () => !1,
+  viewMode: !1,
   viewModeValue: undefined,
   service: undefined,
   guest: undefined,
   requestWith: undefined,
   params: () => () => ({}),
-  lazy: () => !1,
+  lazy: !1,
   useChoice: undefined,
   byId: undefined,
   searchLength: undefined,
@@ -69,6 +69,9 @@ const isGuest = computed(() => {
   return v !== undefined && v !== null && v !== !1
 })
 const getSearchLength = computed(() => {
+  if (props.lazy) {
+    return -1
+  }
   if (props.searchLength === undefined || props.searchLength === null) {
     return 3
   }
@@ -129,8 +132,18 @@ const prepare = async (fromWatch = !1, merge = {}) => {
       }
     })
 }
+const isFocus = ref(!1)
 const listeners = {
+  focus () {
+    isFocus.value = !0
+  },
+  blur () {
+    isFocus.value = !1
+  },
   'update:search': (val: any) => {
+    if (!val && isFocus.value) {
+      return
+    }
     if (!val && fieldValue.value) {
       return
     }

package/src/components/form/MSelect.vue

@@ -13,7 +13,7 @@
 
 import { useField } from 'vee-validate'
 import type { MSelectProps as Props } from '../../types'
-import { computed, reactive, toValue, useTemplateRef } from 'vue'
+import { computed, reactive, ref, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 import { QField, QSelect, type QSelectSlots, useQuasar } from 'quasar'
 
@@ -161,8 +161,15 @@ const onDoneOptions = () => {
   e?.updateInputValue('', !0)
   e?.hidePopup()
 }
+const isFocus = ref(!1)
 const listeners = {
-  blur: (v: any) => handleBlur(v, !0),
+  focus () {
+    isFocus.value = !0
+  },
+  blur (v: any) {
+    isFocus.value = !1
+    handleBlur(v, !0)
+  },
   'update:modelValue': (v: Props['modelValue']) => {
     handleChange(v, !!errorMessage.value)
     if (!props.emitValue) {
@@ -269,7 +276,7 @@ defineOptions({
         useChips: getProp('useChips') === !0 && !multiple ? !1 : getProp('useChips'),
         multiple,
         mapOptions,
-        loading: viewMode ? !1 : loading,
+        loading: viewMode || isFocus ? !1 : loading,
         useInput,
         autocomplete: getAutocompleteAttribute || undefined,
         clearable: viewMode ? !1 : clearable,
@@ -348,7 +355,10 @@ defineOptions({
         v-if="loading && !noLoading"
         #selected
       >
-        <q-skeleton width="60%" />
+        <q-skeleton
+          v-if="!isFocus"
+          width="60%"
+        />
       </template>
       <template
         v-if="multiple"

package/src/composable/useDtHelpers.ts

@@ -57,7 +57,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
   } = useMyth()
   const props = toValue(options)
   const getRows = ref<MDtItem[]>([])
-  const defaultItem = computed(() => props.defaultItem)
+  const defaultItem = computed(() => toValue(props.defaultItem))
   const getTableTitle = computed(() => {
     if (props.title) {
       if (te(props.title)) {