@mythpe/quasar-ui-qui 0.4.26 → 0.4.28

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -13,7 +13,7 @@
 import type { ApiInterface, GenericMDtBtn, MDatatableProps } from '../../types'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { computed, onMounted, ref, toValue, useAttrs, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, toValue, useAttrs, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import { useDtHelpers, useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
@@ -52,11 +52,12 @@ type Props = {
   hideShowBtn?: boolean;
   hideDestroyBtn?: boolean;
   storeRoute?: MDatatableProps['storeRoute'];
-  storeCallback?: MDatatableProps['storeCallback'];
   storeQueryParams?: boolean;
+  noStoreClose?: boolean;
   updateRoute?: MDatatableProps['updateRoute'];
-  updateCallback?: MDatatableProps['updateCallback'];
   updateQueryParams?: boolean;
+  noUpdateClose?: boolean;
+  noAutoClose?: boolean;
   showRoute?: MDatatableProps['showRoute'];
   showQueryParams?: boolean;
   noMouse?: MDatatableProps['noMouse'];
@@ -136,11 +137,12 @@ const props = withDefaults(defineProps<Props>(), {
   hideShowBtn: !1,
   hideDestroyBtn: !1,
   storeRoute: undefined,
-  storeCallback: undefined,
   storeQueryParams: !1,
+  noStoreClose: !1,
   updateRoute: undefined,
-  updateCallback: undefined,
   updateQueryParams: !1,
+  noUpdateClose: !1,
+  noAutoClose: !1,
   showRoute: undefined,
   showQueryParams: !1,
   noMouse: !1,
@@ -192,7 +194,17 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 interface Emits {
-  (e: 'update:rows', value: any): void
+  (e: 'update:rows', value: any): void;
+
+  (e: 'store', value: ApiInterface): void;
+
+  (e: 'update', value: ApiInterface): void;
+
+  (e: 'save', value: ApiInterface): void;
+
+  (e: 'destroy', value: ApiInterface): void;
+
+  (e: 'clone', value: ApiInterface): void;
 }
 
 const emit = defineEmits<Emits>()
@@ -313,7 +325,7 @@ const {
   onCloseImportDialog,
   downloadingExample,
   onDownloadExample
-} = useDtHelpers(() => props)
+} = useDtHelpers(() => props, emit)
 
 // Prevent user from back
 /* router.beforeResolve(() => {
@@ -373,7 +385,6 @@ const onSuccess: SubmissionHandler = async (form) => {
       }
     }
   }
-
   const ignoreKeys = [
     '_to_string',
     '_to_number_format',
@@ -382,7 +393,6 @@ const onSuccess: SubmissionHandler = async (form) => {
     'toNumberFormat',
     'toDateFormat'
   ]
-
   for (const i in ignoreKeys) {
     for (const k in form) {
       if (ignoreKeys[i] && k.slice(-ignoreKeys[i]?.length) === ignoreKeys[i]) {
@@ -408,17 +418,26 @@ const onSuccess: SubmissionHandler = async (form) => {
         if (_data) {
           updateDatatableItem(_data as any, dialogItemIndex.value)
         }
+        emit('update', response)
+        if (!props.noUpdateClose && !props.noAutoClose) {
+          closeFormDialog()
+        }
       } else {
         setTimeout(() => refresh(), openDialogTimeout)
+        emit('store', response)
+        if (props.noStoreClose || props.noAutoClose) {
+          getRows.value = [
+            _data as any,
+            ...getRows.value
+          ]
+          const index = 0
+          dialogItemIndex.value = index
+          nextTick(() => openUpdateDialog(_data as any, index))
+        } else {
+          closeFormDialog()
+        }
       }
-      if (isUpdateMode.value && props.updateCallback) {
-        props.updateCallback(response)
-      } else if (!isUpdateMode.value && props.storeCallback) {
-        props.storeCallback(response)
-      } else {
-        // nextTick()
-        closeFormDialog()
-      }
+      emit('save', response)
     }
   } catch (e: any) {
     const { _message, _errors } = e || {}
@@ -1721,8 +1740,8 @@ defineExpose({
                         md="6"
                       >
                         <q-skeleton
-                          type="QInput"
                           :key="`form-inp-skeleton-${ai}`"
+                          type="QInput"
                         />
                       </MCol>
                     </template>

package/src/components/form/MInput.vue

@@ -10,7 +10,7 @@
   lang="ts"
   setup
 >
-import { useField } from 'vee-validate'
+import { useField, useFieldValue } from 'vee-validate'
 import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QInput, type QInputSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
@@ -35,6 +35,7 @@ interface P {
   rules?: Props['rules'];
   viewMode?: Props['viewMode'];
   viewModeValue?: Props['viewModeValue'];
+  viewModeKey?: Props['viewModeValue'];
   autocomplete?: Props['autocomplete'];
   topLabel?: Props['topLabel'];
   fieldOptions?: Props['fieldOptions'];
@@ -91,7 +92,13 @@ const sarValue = computed<string | null>(() => {
     return '0.00'
   }
 })
-const computedViewModeValue = computed<any>(() => props.viewModeValue ?? value.value)
+const viewModeAttribute = useFieldValue(() => props.viewModeKey || props.name)
+const computedViewModeValue = computed<any>(() => {
+  if (props.viewModeKey) {
+    return viewModeAttribute.value
+  }
+  return props.viewModeValue ?? value.value
+})
 const computedInputClass = computed(() => {
   const classes: any[] = [props.inputClass]
   if (props.ltr) {

package/src/composable/useDtHelpers.ts

@@ -37,7 +37,7 @@ export const initMetaServer: MDatatableMetaServer = {
   total: null
 }
 
-export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
+export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?: any) => {
   const slots = useSlots()
   const $q = useQuasar()
   const router = useRouter()
@@ -693,7 +693,8 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     confirmMessage(__('messages.confirm_delete')).onOk(async () => {
       loading.value = !0
       try {
-        const { _message, _success } = await getMythApiServicesSchema().destroy(item.value.id)
+        const response = await getMythApiServicesSchema().destroy(item.value.id)
+        const { _message, _success } = response
         if (!hideAutoMessage.value && _success && _message) {
           _message && alertSuccess(_message)
         }
@@ -703,6 +704,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
             selected.value = []
           }
           removeDtItem(index)
+          emit('destroy', response)
         }
       } catch (e: any) {
         e?._message && alertError(e._message)
@@ -730,15 +732,14 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     confirmMessage(__('messages.confirm_delete')).onOk(async () => {
       loading.value = !0
       try {
-        const {
-          _message,
-          _success
-        } = await getMythApiServicesSchema().destroyAll(selected.value.map((e: MDtItem) => e.id))
+        const response = await getMythApiServicesSchema().destroyAll(selected.value.map((e: MDtItem) => e.id))
+        const { _message, _success } = response
         if (!hideAutoMessage.value && _success && _message) {
           _message && alertSuccess(_message)
         }
         if (_success) {
           refresh()
+          emit('destroy', response)
         }
       } catch (e: any) {
         e?._message && alertError(e._message)
@@ -822,9 +823,11 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
       .onOk(() => {
         $q.loading.show()
         getMythApiServicesSchema().clone(item.id)
-          .then(({ _message }) => {
+          .then((response: ApiInterface) => {
+            const { _message } = response
             _message && alertSuccess(_message)
             refreshNoUpdate()
+            emit('clone', response)
           })
           .catch(({ _message }) => {
             _message && alertError(_message)

package/src/types/api/MInput.d.ts

@@ -28,6 +28,10 @@ export type ViewModeProps = {
    * View Mode value for input or modelValue.
    */
   viewModeValue?: any | undefined;
+  /**
+   * View Mode key value for input or modelValue.
+   */
+  viewModeKey?: string;
   /**
    * View Mode class for input.
    */

package/src/types/m-datatable.d.ts

@@ -264,11 +264,12 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   hideShowBtn?: boolean;
   hideDestroyBtn?: boolean;
   storeRoute?: string | RouteLocationRaw;
-  storeCallback?: (response: ApiInterface) => void;
   storeQueryParams?: boolean;
+  noStoreClose?: boolean;
   updateRoute?: string | RouteLocationRaw;
-  updateCallback?: (response: ApiInterface) => void;
   updateQueryParams?: boolean;
+  noUpdateClose?: boolean;
+  noAutoClose?: boolean;
   showRoute?: string | RouteLocationRaw;
   showQueryParams?: boolean;
   noMouse?: boolean;