@mythpe/quasar-ui-qui 0.3.66 → 0.3.68

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -38,6 +38,7 @@ type Props = {
   excel?: boolean;
   exportUrl?: MDatatableProps['exportUrl'];
   hideSearch?: boolean;
+  hideTitle?: boolean;
   searchDebounce?: MDatatableProps['searchDebounce'];
   withIndex?: MDatatableProps['withIndex'];
   withStore?: MDatatableProps['withStore'];
@@ -115,6 +116,7 @@ const props = withDefaults(defineProps<Props>(), {
   excel: undefined,
   exportUrl: undefined,
   hideSearch: !1,
+  hideTitle: undefined,
   searchDebounce: 600,
   withIndex: undefined,
   withStore: undefined,
@@ -738,7 +740,10 @@ defineExpose({
                 v-bind="topSlotProps"
               />
               <!--Title and Search-->
-              <MRow col>
+              <MRow
+                :class="{hidden: !hasAddBtn && !getTableTitle && hideTitle && hideSearch}"
+                col
+              >
                 <!--Default Title Slot-->
                 <slot
                   :dt="datatableItemsScope"
@@ -747,7 +752,10 @@ defineExpose({
                   :item="dialogItem"
                   name="title"
                 >
-                  <MCol col="12">
+                  <MCol
+                    v-if="!hideTitle"
+                    col="12"
+                  >
                     <q-card flat>
                       <q-card-section>
                         <MRow
@@ -1501,126 +1509,129 @@ defineExpose({
       v-model="formDialogModel"
       v-bind="pluginOptions.dt?.formDialogProps"
     >
-      <div class="m-form__container full-height no-wrap">
-        <form
-          class="m-form column full-height justify-between no-wrap"
-          @submit="defaultSubmitItem"
-        >
-          <q-card class="m-dialog-card">
-            <q-card-section ref="formTitle">
-              <q-toolbar :class="['m-container__fluid', {'q-pa-none': isSmall}]">
+      <q-card class="q-dialog-plugin">
+        <div class="m-form__container full-height no-wrap">
+          <form
+            class="m-form column full-height justify-between no-wrap"
+            @submit="defaultSubmitItem"
+          >
+            <q-card class="m-dialog-card">
+              <q-card-section ref="formTitle">
+                <q-toolbar :class="['m-container__fluid', {'q-pa-none': isSmall}]">
+                  <slot
+                    :dt="datatableItemsScope"
+                    :form="useFormContext"
+                    :index="dialogItemIndex"
+                    :item="dialogItem"
+                    name="form-title-left"
+                  />
+                  <slot
+                    :dt="datatableItemsScope"
+                    :form="useFormContext"
+                    :index="dialogItemIndex"
+                    :item="dialogItem"
+                    name="form-title"
+                  >
+                    <q-toolbar-title>
+                      <template v-if="loading && !dialogItem">
+                        <q-skeleton width="200px" />
+                      </template>
+                      <template v-else>
+                        {{ getFormTitle }}
+                      </template>
+                    </q-toolbar-title>
+                    <q-btn
+                      flat
+                      icon="close"
+                      padding="3px"
+                      text-color="body"
+                      @click="closeFormDialog"
+                    >
+                      <q-tooltip class="m-dt-btn-tooltip">
+                        {{ __('myth.titles.close') }}
+                      </q-tooltip>
+                    </q-btn>
+                  </slot>
+                  <slot
+                    :dt="datatableItemsScope"
+                    :form="useFormContext"
+                    :index="dialogItemIndex"
+                    :item="dialogItem"
+                    name="form-title-right"
+                  />
+                </q-toolbar>
+              </q-card-section>
+              <q-separator />
+              <q-card-section
+                ref="formDialogCartSection"
+                :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
+                class="scroll m-datatable__dialog-form-container"
+              >
+                <MContainer
+                  v-if="loading && !dialogItem"
+                  :fluid="!1"
+                >
+                  <MRow
+                    v-if="loading"
+                    col
+                  >
+                    <template
+                      v-for="ai in 15"
+                      :key="`form-skeleton-${ai}`"
+                    >
+                      <MCol
+                        col="12"
+                        md="6"
+                      >
+                        <q-skeleton type="QInput" />
+                      </MCol>
+                    </template>
+                  </MRow>
+                </MContainer>
                 <slot
+                  v-else
                   :dt="datatableItemsScope"
                   :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
-                  name="form-title-left"
+                  name="form"
                 />
+              </q-card-section>
+              <q-separator />
+              <q-card-actions
+                ref="formActions"
+                align="between"
+                class="m-datatable-form-actions print-hide m-container__fluid"
+              >
                 <slot
                   :dt="datatableItemsScope"
                   :form="useFormContext"
                   :index="dialogItemIndex"
                   :item="dialogItem"
-                  name="form-title"
+                  name="form-actions"
                 >
-                  <q-toolbar-title>
-                    <template v-if="loading && !dialogItem">
-                      <q-skeleton width="200px" />
-                    </template>
-                    <template v-else>
-                      <q-btn
-                        fab-mini
-                        flat
-                        icon="close"
-                        @click="closeFormDialog"
-                      >
-                        <q-tooltip class="m-dt-btn-tooltip">
-                          {{ __('myth.titles.close') }}
-                        </q-tooltip>
-                      </q-btn>
-                      {{ getFormTitle }}
-                    </template>
-                  </q-toolbar-title>
+                  <MBtn
+                    :class="{'full-width': $q.screen.xs}"
+                    :label="__(`myth.titles.${isUpdateMode ? 'save' : 'store'}`)"
+                    :loading="loading"
+                    type="submit"
+                    v-bind="pluginOptions.dt?.dialogButtonsProps"
+                  />
                 </slot>
-                <slot
-                  :dt="datatableItemsScope"
-                  :form="useFormContext"
-                  :index="dialogItemIndex"
-                  :item="dialogItem"
-                  name="form-title-right"
-                />
-              </q-toolbar>
-            </q-card-section>
-            <q-separator />
-            <q-card-section
-              ref="formDialogCartSection"
-              :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
-              class="scroll m-datatable__dialog-form-container"
-            >
-              <MContainer
-                v-if="loading && !dialogItem"
-                :fluid="!1"
-              >
-                <MRow
-                  v-if="loading"
-                  col
-                >
-                  <template
-                    v-for="ai in 15"
-                    :key="`form-skeleton-${ai}`"
-                  >
-                    <MCol
-                      col="12"
-                      md="6"
-                    >
-                      <q-skeleton type="QInput" />
-                    </MCol>
-                  </template>
-                </MRow>
-              </MContainer>
-              <slot
-                v-else
-                :dt="datatableItemsScope"
-                :form="useFormContext"
-                :index="dialogItemIndex"
-                :item="dialogItem"
-                name="form"
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-actions
-              ref="formActions"
-              align="between"
-              class="m-datatable-form-actions print-hide m-container__fluid"
-            >
-              <slot
-                :dt="datatableItemsScope"
-                :form="useFormContext"
-                :index="dialogItemIndex"
-                :item="dialogItem"
-                name="form-actions"
-              >
                 <MBtn
-                  :class="{'full-width': $q.screen.xs}"
-                  :label="__(`myth.titles.${isUpdateMode ? 'save' : 'store'}`)"
-                  :loading="loading"
-                  type="submit"
+                  v-if="$q.screen.gt.sm"
+                  :disable="loading"
+                  label="myth.titles.close"
+                  outline
+                  text-color="body"
                   v-bind="pluginOptions.dt?.dialogButtonsProps"
+                  @click="closeFormDialog"
                 />
-              </slot>
-              <MBtn
-                v-if="$q.screen.gt.sm"
-                :disable="loading"
-                color="secondary"
-                label="myth.titles.close"
-                text-color="white"
-                v-bind="pluginOptions.dt?.dialogButtonsProps"
-                @click="closeFormDialog"
-              />
-            </q-card-actions>
-          </q-card>
-        </form>
-      </div>
+              </q-card-actions>
+            </q-card>
+          </form>
+        </div>
+      </q-card>
     </MDialog>
 
     <!-- Show Dialog -->

package/src/components/modal/MDialog.vue

@@ -45,8 +45,8 @@ defineOptions({
 
 <template>
   <q-dialog
-    :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'slide-down')"
-    :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'slide-up')"
+    :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'fade')"
+    :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'fade')"
     allow-focus-outside
     maximized
     no-backdrop-dismiss

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

@@ -235,6 +235,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   excel?: boolean;
   exportUrl?: MDtExportOptions | boolean;
   hideSearch?: boolean;
+  hideTitle?: boolean;
   searchDebounce?: string | number;
   withIndex?: string | string[];
   withStore?: string | string[];