@mythpe/quasar-ui-qui 0.3.49 → 0.3.50

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -92,6 +92,8 @@ type Props = {
   copyColumns?: MDatatableProps['copyColumns'];
   descColumns?: MDatatableProps['descColumns'];
   help?: MDatatableProps['help'];
+  subtitle?: MDatatableProps['subtitle'];
+  subtitleClass?: MDatatableProps['subtitleClass'];
   noWrapBtn?: boolean;
   lockValue?: MDatatableProps['lockValue'];
   align?: MDatatableProps['align'];
@@ -165,6 +167,8 @@ const props = withDefaults(defineProps<Props>(), {
   copyColumns: undefined,
   descColumns: undefined,
   help: undefined,
+  subtitle: undefined,
+  subtitleClass: undefined,
   noWrapBtn: undefined,
   lockValue: undefined,
   align: 'left'
@@ -722,6 +726,7 @@ defineExpose({
         <template #top="topSlotProps">
           <MCol col="12">
             <MContainer :fluid="!1">
+              <!--Top Slot-->
               <slot
                 :dt="datatableItemsScope"
                 :form="useFormContext"
@@ -730,7 +735,9 @@ defineExpose({
                 name="top"
                 v-bind="topSlotProps"
               />
+              <!--Title and Search-->
               <MRow col>
+                <!--Default Title Slot-->
                 <slot
                   :dt="datatableItemsScope"
                   :form="useFormContext"
@@ -739,47 +746,74 @@ defineExpose({
                   name="title"
                 >
                   <MCol col="12">
-                    <div class="row justify-between q-col-gutter-md">
-                      <div
-                        v-if="!noBackBtn"
-                        class="col-auto"
-                      >
-                        <q-btn
-                          :icon="backIcon || `ion-arrow-round-${$q.lang.rtl ? 'forward' : 'back'}`"
-                          flat
-                          @click="$router.back()"
-                        />
-                      </div>
-                      <div class="col">
-                        <div
-                          v-if="!!getTableTitle"
-                          class="text-h5 bordered-bottom ellipsis"
+                    <q-card class="q-mb-xl">
+                      <q-card-section>
+                        <MRow
+                          class="justify-between"
+                          col="md"
                         >
-                          <span>{{ getTableTitle }}</span>
-                          <span v-if="!!help">
-                            <q-icon
-                              class="cursor-pointer"
-                              name="ion-ios-information-circle-outline"
-                              right
-                              size="18px"
+                          <!--Back Button-->
+                          <MCol
+                            v-if="!noBackBtn"
+                            auto
+                          >
+                            <q-btn
+                              :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
+                              flat
+                              @click="$router.back()"
+                            />
+                          </MCol>
+                          <!--Table Title-->
+                          <MCol col>
+                            <div
+                              v-if="!!getTableTitle"
+                              class="text-h5 ellipsis"
                             >
-                              <q-tooltip>{{ __(help) }}</q-tooltip>
-                            </q-icon>
-                          </span>
-                        </div>
-                      </div>
-                      <!-- Add Btn -->
-                      <div
-                        v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
-                        class="col-auto"
-                      >
-                        <MBtn
-                          :label="getFormTitle"
-                          no-caps
-                          @click="openCreateDialog()"
-                        />
-                      </div>
-                    </div>
+                              <span>{{ getTableTitle }}</span>
+                              <span v-if="!!help">
+                                <q-icon
+                                  class="cursor-pointer"
+                                  name="ion-ios-information-circle-outline"
+                                  right
+                                  size="18px"
+                                >
+                                  <q-tooltip>
+                                    <div class="text-body1">
+                                      {{ __(help) }}
+                                    </div>
+                                  </q-tooltip>
+                                </q-icon>
+                              </span>
+                            </div>
+                            <slot
+                              :dt="datatableItemsScope"
+                              :form="useFormContext"
+                              :index="dialogItemIndex"
+                              :item="dialogItem"
+                              name="subtitle"
+                            >
+                              <div
+                                v-if="!!subtitle"
+                                :class="subtitleClass"
+                              >
+                                {{ __(subtitle) }}
+                              </div>
+                            </slot>
+                          </MCol>
+                          <!-- Add Btn -->
+                          <MCol
+                            v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
+                            auto
+                          >
+                            <MBtn
+                              :label="getFormTitle"
+                              no-caps
+                              @click="openCreateDialog()"
+                            />
+                          </MCol>
+                        </MRow>
+                      </q-card-section>
+                    </q-card>
                   </MCol>
                 </slot>
                 <slot
@@ -930,6 +964,7 @@ defineExpose({
                   name="bottom-search"
                 />
               </MRow>
+
               <!--Buttons-->
               <MRow
                 class="items-center justify-between"
@@ -1457,57 +1492,6 @@ defineExpose({
       />
     </q-pull-to-refresh>
 
-    <!-- Show Dialog -->
-    <MDialog
-      v-model="showDialogModel"
-      v-bind="pluginOptions.dt?.showDialogProps"
-    >
-      <q-card class="m-dialog-card">
-        <q-card-section ref="showTitleRef">
-          <q-toolbar>
-            <q-toolbar-title>
-              <q-btn
-                :icon="`ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
-                fab-mini
-                flat
-                @click="closeShowDialog()"
-              >
-                <q-tooltip class="m-dt-btn-tooltip">
-                  {{ __('myth.titles.back') }}
-                </q-tooltip>
-              </q-btn>
-              {{ getShowTitle }}
-            </q-toolbar-title>
-          </q-toolbar>
-        </q-card-section>
-        <q-separator />
-        <q-card-section
-          :style="`height: ${($q.screen.height || 100) - 3 - (($refs.showActionsRef as any)?.$el?.offsetHeight || 60) - (($refs.showTitleRef as any)?.$el?.offsetHeight || 80)}px`"
-          class="scroll m-datatable__dialog-show-container"
-        >
-          <slot
-            :dt="datatableItemsScope"
-            :form="useFormContext"
-            :index="dialogItemIndex"
-            :item="dialogItem"
-            name="show"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-actions
-          ref="showActionsRef"
-          align="left"
-          class="print-hide"
-        >
-          <MBtn
-            label="myth.titles.close"
-            v-bind="pluginOptions.dt?.dialogButtonsProps"
-            @click="closeShowDialog"
-          />
-        </q-card-actions>
-      </q-card>
-    </MDialog>
-
     <!-- Form Dialog -->
     <MDialog
       v-model="formDialogModel"
@@ -1635,6 +1619,57 @@ defineExpose({
       </div>
     </MDialog>
 
+    <!-- Show Dialog -->
+    <MDialog
+      v-model="showDialogModel"
+      v-bind="pluginOptions.dt?.showDialogProps"
+    >
+      <q-card class="m-dialog-card">
+        <q-card-section ref="showTitleRef">
+          <q-toolbar>
+            <q-toolbar-title>
+              <q-btn
+                :icon="`ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
+                fab-mini
+                flat
+                @click="closeShowDialog()"
+              >
+                <q-tooltip class="m-dt-btn-tooltip">
+                  {{ __('myth.titles.back') }}
+                </q-tooltip>
+              </q-btn>
+              {{ getShowTitle }}
+            </q-toolbar-title>
+          </q-toolbar>
+        </q-card-section>
+        <q-separator />
+        <q-card-section
+          :style="`height: ${($q.screen.height || 100) - 3 - (($refs.showActionsRef as any)?.$el?.offsetHeight || 60) - (($refs.showTitleRef as any)?.$el?.offsetHeight || 80)}px`"
+          class="scroll m-datatable__dialog-show-container"
+        >
+          <slot
+            :dt="datatableItemsScope"
+            :form="useFormContext"
+            :index="dialogItemIndex"
+            :item="dialogItem"
+            name="show"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions
+          ref="showActionsRef"
+          align="left"
+          class="print-hide"
+        >
+          <MBtn
+            label="myth.titles.close"
+            v-bind="pluginOptions.dt?.dialogButtonsProps"
+            @click="closeShowDialog"
+          />
+        </q-card-actions>
+      </q-card>
+    </MDialog>
+
     <!-- Image Dialog -->
     <MDialog v-model="imageDialog.value">
       <q-card>

package/src/components/modal/MDialog.vue

@@ -45,14 +45,13 @@ defineOptions({
 
 <template>
   <q-dialog
-    :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'jump-down')"
-    :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'jump-up')"
+    :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'slide-down')"
+    :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'slide-up')"
     allow-focus-outside
     maximized
     no-backdrop-dismiss
     no-esc-dismiss
     no-shake
-    persistent
     v-bind="{...pluginOptions.dialog,...$attrs}"
   >
     <slot />

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

@@ -7,7 +7,7 @@
  */
 
 import type { AxiosResponse } from 'axios'
-import type { NamedColor, QAvatarProps, QAvatarSlots, QTableProps, QTableSlots } from 'quasar'
+import type { NamedColor, QAvatarProps, QAvatarSlots, QTableProps, QTableSlots, VueClassProp } from 'quasar'
 import type { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { StubSchema } from './api-helpers'
@@ -192,17 +192,26 @@ type MDatatableSlotFn<T = any> = (scope: T) => VNode[];
 
 export interface MDatatableSlots extends Omit<QTableSlots, 'top'> {
   tools: MDatatableSlotFn<{ dt: MDatatableScope }>;
-  selection: MDatatableSlotFn<{ dt: MDatatableScope }>;
+  selection: MDatatableSlotFn<MDatatableMainScope>;
   filter: MDatatableSlotFn<{ filter: MDatatableFilterForm } & MDatatableMainScope>;
   show: MDatatableSlotFn<MDatatableMainScope>;
   form: MDatatableSlotFn<MDatatableMainScope>;
   'form-actions': MDatatableSlotFn<MDatatableMainScope>;
   title: MDatatableSlotFn<MDatatableMainScope>;
+  subtitle: MDatatableSlotFn<MDatatableMainScope>;
+  top: MDatatableSlotFn<MDatatableMainScope & Parameters<QTableSlots['top']>[0]>;
   'top-search': MDatatableSlotFn<MDatatableMainScope>;
   'bottom-search': MDatatableSlotFn<MDatatableMainScope>;
+  'form-title': MDatatableSlotFn<MDatatableMainScope>;
+  'form-title-left': MDatatableSlotFn<MDatatableMainScope>;
+  'form-title-right': MDatatableSlotFn<MDatatableMainScope>;
 
   [key: `body-cell-${string}`]: MDatatableSlotFn<
-    Parameters<QTableSlots['body-cell']>[0] & { dt: MDatatableScope }
+    Parameters<QTableSlots['body-cell']>[0] & MDatatableMainScope
+  >;
+
+  [key: `header-cell-${string}`]: MDatatableSlotFn<
+    Parameters<QTableSlots['header-cell']>[0] & MDatatableMainScope
   >;
 }
 
@@ -329,6 +338,14 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Help Tooltip
    */
   help?: string;
+  /**
+   * Subtitle of table
+   */
+  subtitle?: string;
+  /**
+   * Subtitle of class
+   */
+  subtitleClass?: VueClassProp;
   /**
    * Show, hide wrap the button in the table.
    */