@mythpe/quasar-ui-qui 0.2.0 → 0.2.1

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -222,9 +222,11 @@ const {
   fetchDatatableItems,
   exportData,
   openDialogTimeout,
+  beforeCloseFilterDialog,
   openFilterDialog,
   saveFilterDialog,
   closeFilterDialog,
+  filterDialogModel,
   onRemoveFilter,
   updateFilterOptions,
   openShowDialogNoIndex,
@@ -351,7 +353,7 @@ const onSuccess: SubmissionHandler = async (form) => {
   } catch (e: any) {
     const { _message, _errors } = e || {}
     dialogErrors.value = _errors || {}
-    scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
+    await scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
       useFormContext.setErrors(_errors)
@@ -854,13 +856,14 @@ defineExpose({
                   label="myth.datatable.hints.filter"
                   tooltip="myth.datatable.hints.filter"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
-                  @click="openFilterDialog()"
                 >
                   <MModalMenu
+                    v-model="filterDialogModel"
                     no-close-btn
                     persistent
                     position="top"
                     v-bind="pluginOptions.dt?.filterDialogProps as any"
+                    @before-show="beforeCloseFilterDialog"
                   >
                     <q-card
                       :style="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
@@ -1059,9 +1062,9 @@ defineExpose({
                       <span>
                         {{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}
                       </span>
-                      <span v-if="typeof filterValue === 'boolean'">: {{
-                        __(`labels.${filterValue ? 'yes' : 'no'}`)
-                      }}</span>
+                      <span v-if="typeof filterValue === 'boolean'">
+                        : {{ __(`labels.${filterValue ? 'yes' : 'no'}`) }}
+                      </span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
                       <span
                         v-else-if="Array.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
@@ -1072,6 +1075,7 @@ defineExpose({
                       <span
                         v-else-if="quasarHelpers.object(filterValue) && filterValue.label"
                       >: {{ filterValue.label }}</span>
+                      <span v-else-if="typeof filterValue === 'object'">:&nbsp;{{ Object.values(filterValue).join(' - ') }}</span>
                     </q-chip>
                   </MCol>
                 </template>

package/src/components/modal/MModalMenu.vue

@@ -18,7 +18,17 @@ interface Props {
   position?: MModalMenuProps['position'];
 }
 
+const modelValue = defineModel<boolean>({ required: !1, default: undefined })
 const { props: pluginOptions, __ } = useMyth()
+
+type Emits = {
+  (e: 'beforeShow', evt?: Event): void;
+  (e: 'show', evt?: Event): void;
+  (e: 'beforeHide', evt?: Event): void;
+  (e: 'hide', evt?: Event): void;
+}
+const emit = defineEmits<Emits>()
+
 withDefaults(defineProps<Props>(), {
   noCloseBtn: () => !1,
   position: () => 'bottom'
@@ -31,6 +41,7 @@ defineOptions({
 
 <template>
   <q-popup-proxy
+    v-model="modelValue"
     :position="position"
     allow-focus-outside
     class="m--modal_menu"
@@ -39,6 +50,10 @@ defineOptions({
     no-shake
     persistent
     v-bind="{...pluginOptions.modalMenu,...$attrs}"
+    @hide="emit('hide', $event)"
+    @show="emit('show', $event)"
+    @before-show="emit('beforeShow',$event)"
+    @before-hide="emit('beforeHide',$event)"
   >
     <q-card v-bind="pluginOptions.modalMenuOptions?.card">
       <slot />

package/src/composable/useDtHelpers.ts

@@ -431,20 +431,30 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     resetDialogForm({ values: init || {} }, { force: !0 })
     attrs && setValues(attrs, !1)
   }
-  const openFilterDialog = () => {
+  const beforeShowFilterDialog = async () => {
     resetDialogForm({ values: {}, errors: {} }, { force: !0 })
-    nextTick(() => {
+    await nextTick(() => {
       tempFilterForm.value = { ...filterForm.value }
+    })
+  }
+  const beforeCloseFilterDialog = async () => {
+    tempFilterForm.value = { ...filterForm.value }
+  }
+  const openFilterDialog = async () => {
+    await beforeShowFilterDialog()
+    await nextTick(() => {
       filterDialogModel.value = !0
     })
   }
-  const saveFilterDialog = () => {
+  const saveFilterDialog = async () => {
     filterDialogModel.value = !1
-    nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
+    await nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
   }
-  const closeFilterDialog = () => {
+  const closeFilterDialog = async () => {
     filterDialogModel.value = !1
-    tempFilterForm.value = { ...filterForm.value }
+    await nextTick(() => {
+      beforeCloseFilterDialog()
+    })
   }
   const onRemoveFilter = (key: string | number) => {
     const filter = filterForm.value
@@ -926,6 +936,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     fetchDatatableItems,
     exportData,
     openDialogTimeout,
+    beforeCloseFilterDialog,
     openFilterDialog,
     saveFilterDialog,
     closeFilterDialog,