@mythpe/quasar-ui-qui 0.4.2 → 0.4.3

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -298,10 +298,7 @@ const {
   activeContextItems,
   datatableItemsScope,
   onCloneItem,
-  imageDialog,
-  openImageDialog,
-  closeImageDialog,
-
+  openAttachmentDialog,
   importDialogModel,
   onOpenImportDialog,
   onCloseImportDialog,
@@ -557,8 +554,6 @@ defineExpose({
   onDeleteItem,
   deleteSelectionItem,
   logoutDatatable,
-  openImageDialog,
-  closeImageDialog,
   isUpdateMode,
   setIsUpdateMode
 })
@@ -703,7 +698,7 @@ defineExpose({
                             :image-mode="getProp('imageMode')"
                             :image-size="getProp('imageSize')"
                             :value="col.value"
-                            @click="openImageDialog(col.value)"
+                            @click="openAttachmentDialog(col.value,{ image: true })"
                           />
                         </template>
                         <template v-else-if="computedUrlColumns.indexOf(col.name) !== -1">
@@ -1471,21 +1466,6 @@ defineExpose({
             />
           </q-td>
         </template>
-        <template
-          v-for="imageCol in computedImageColumns"
-          :key="`a-image-body-cell-${imageCol}`"
-          #[`body-cell-${imageCol}`]="imageColProps"
-        >
-          <q-td :props="imageColProps">
-            <MDtImageColumn
-              v-if="imageColProps.row[imageColProps.col.field] !== undefined && imageColProps.row[imageColProps.col.field] !== null"
-              :image-mode="getProp('imageMode')"
-              :image-size="getProp('imageSize')"
-              :value="imageColProps.row[imageColProps.col.field]"
-              @click="openImageDialog(imageColProps.row[imageColProps.col.field])"
-            />
-          </q-td>
-        </template>
         <template
           v-for="u in computedUrlColumns"
           :key="`a-u-body-cell-${u}`"
@@ -1501,6 +1481,21 @@ defineExpose({
             />
           </q-td>
         </template>
+        <template
+          v-for="imageCol in computedImageColumns"
+          :key="`a-image-body-cell-${imageCol}`"
+          #[`body-cell-${imageCol}`]="imageColProps"
+        >
+          <q-td :props="imageColProps">
+            <MDtImageColumn
+              v-if="imageColProps.row[imageColProps.col.field] !== undefined && imageColProps.row[imageColProps.col.field] !== null"
+              :image-mode="getProp('imageMode')"
+              :image-size="getProp('imageSize')"
+              :value="imageColProps.row[imageColProps.col.field]"
+              @click="openAttachmentDialog(imageColProps.row[imageColProps.col.field],{ image: true })"
+            />
+          </q-td>
+        </template>
         <template
           v-for="cc in computedColorColumns"
           :key="`a-cc-body-cell-${cc}`"
@@ -1811,54 +1806,6 @@ defineExpose({
       </q-card>
     </MDialog>
 
-    <!-- Image Dialog -->
-    <MDialog v-model="imageDialog.value">
-      <q-card>
-        <div class="row full-height">
-          <MCol col="12">
-            <MRow class="q-pa-sm justify-between items-center">
-              <q-btn
-                :href="imageDialog.src"
-                :label="__('myth.titles.download')"
-                flat
-                icon="ion-ios-cloud-download"
-                target="_blank"
-              />
-              <q-btn
-                fab-mini
-                flat
-                icon="ion-ios-close"
-                round
-                @click="closeImageDialog()"
-              />
-            </MRow>
-            <q-separator />
-          </MCol>
-          <MCol
-            class="text-center"
-            col="12"
-          >
-            <q-img
-              v-if="imageDialog.src && !imageDialog.asAttachment"
-              :height="`${$q.screen.height - 70}px`"
-              :src="imageDialog.src"
-              class="self-center"
-              fit="contain"
-            />
-            <iframe
-              v-if="imageDialog.src && imageDialog.asAttachment"
-              :height="`${$q.screen.height - 70}px`"
-              :src="imageDialog.src"
-              allowfullscreen
-              class="full-width"
-              frameborder="0"
-              scrolling="no"
-            />
-          </MCol>
-        </div>
-      </q-card>
-    </MDialog>
-
     <!-- Add Btn -->
     <q-page-sticky
       v-if="hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)"

package/src/components/modal/MFrameDialog.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { useDialogPluginComponent, useQuasar } from 'quasar'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useMyth } from '../../composable'
 import type { MFrameDialogProps as Props } from '../../types'
 
@@ -17,22 +17,29 @@ interface P {
   height?: Props['height'];
   noDownload?: boolean;
   iframeProps?: Record<string, any>;
+  image?: boolean;
 }
 
 const props = defineProps<P>()
-const $q = useQuasar()
 defineEmits([
   ...useDialogPluginComponent.emits
 ])
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()
+const $q = useQuasar()
+$q.loading.show()
 const { openWindow } = useMyth()
 
-const loading = ref(!0)
+const loading = computed({
+  get: () => $q.loading.isActive,
+  set: (v: boolean) => (v ? $q.loading.show() : $q.loading.hide())
+})
 const src = computed<string | null>(() => props.url || null)
 const onCloseClick = () => {
   onDialogOK()
 }
-
+const onLoad = () => {
+  $q.loading.hide()
+}
 const onDownloadClick = () => {
   if (src.value) {
     openWindow(src.value)
@@ -49,46 +56,71 @@ defineOptions({
     ref="dialogRef"
     maximized
     no-shake
-    transition-hide="slide-up"
-    transition-show="slide-down"
+    transition-hide="fade"
+    transition-show="fade"
     @hide="onDialogHide"
   >
-    <q-card class="q-dialog-plugin">
-      <q-card-section style="max-height: 80px">
-        <MContainer
-          dense
-          fluid
+    <div class="q-dialog-plugin">
+      <MContainer
+        class="no-padding"
+        dense
+        fluid
+      >
+        <q-card
+          flat
+          square
         >
-          <MRow class="items-center">
-            <MBtn
-              v-if="!noDownload"
-              icon="ion-ios-open"
-              label="labels.download"
-              @click="onDownloadClick()"
-            />
-            <q-space />
-            <MBtn
-              flat
-              icon="close"
-              padding="3px"
-              text-color="body"
-              @click="onCloseClick()"
+          <q-card-section style="max-height: 80px">
+            <MRow class="items-center">
+              <MBtn
+                v-if="!noDownload"
+                icon="ion-ios-open"
+                label="labels.download"
+                @click="onDownloadClick()"
+              />
+              <q-space />
+              <MBtn
+                flat
+                icon="close"
+                padding="3px"
+                text-color="body"
+                @click="onCloseClick()"
+              />
+            </MRow>
+          </q-card-section>
+          <q-separator />
+          <template v-if="!!src">
+            <q-img
+              v-if="image"
+              :height="`${$q.screen.height - 70}px`"
+              :src="src"
+              class="self-center"
+              fit="contain"
+              no-spinner
+              @error="onLoad()"
+              @load="onLoad()"
+            >
+              <template #loading>
+                <q-skeleton
+                  height="100%"
+                  width="100%"
+                />
+              </template>
+            </q-img>
+            <iframe
+              v-else
+              :height="height ?? ($q.screen.height - 80) + 'px'"
+              :src="src"
+              frameborder="0"
+              style="width: 100%;"
+              v-bind="iframeProps"
+              width="100%"
+              @load="loading = !1"
             />
-          </MRow>
-        </MContainer>
-      </q-card-section>
-      <template v-if="!!src">
-        <iframe
-          :height="height ?? ($q.screen.height - 80) + 'px'"
-          :src="src"
-          frameborder="0"
-          v-bind="iframeProps"
-          width="100%"
-          @load="loading = !1"
-        />
-        <slot />
-        <MInnerLoading :showing="loading" />
-      </template>
-    </q-card>
+            <slot />
+          </template>
+        </q-card>
+      </MContainer>
+    </div>
   </q-dialog>
 </template>

package/src/composable/useDtHelpers.ts

@@ -9,7 +9,6 @@ import type {
   MDatatableOptions,
   MDatatablePagination,
   MDatatableProps,
-  MDatatableScope,
   MDtExportOptions,
   MDtHeadersParameter,
   MDtItem,
@@ -22,6 +21,7 @@ import { is, useQuasar } from 'quasar'
 import { useRoute, useRouter } from 'vue-router'
 import type { AxiosRequestConfig } from 'axios'
 import { useResetForm, useSetFormValues } from 'vee-validate'
+import { MFrameDialog } from '../components'
 
 const initPaginationOptions: MDatatablePagination = {
   sortBy: undefined,
@@ -824,26 +824,15 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
   const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
   const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
 
-  const imageDialog = reactive<MDatatableScope['imageDialog']>({
-    value: !1,
-    src: undefined,
-    asAttachment: undefined
-  })
-  const openImageDialog = (src: string, opts?: { asAttachment?: boolean }) => {
-    imageDialog.src = src
-    imageDialog.asAttachment = opts?.asAttachment
-    nextTick(() => {
-      imageDialog.value = !0
-    })
-  }
-  const closeImageDialog = () => {
-    imageDialog.value = !1
-    nextTick(() => {
-      imageDialog.src = undefined
-      imageDialog.asAttachment = undefined
+  const openAttachmentDialog = (src: string, opts?: { image?: boolean }) => {
+    $q.dialog({
+      component: MFrameDialog,
+      componentProps: {
+        url: src,
+        ...opts
+      }
     })
   }
-
   const tableOptions = reactive<MDatatableOptions>({
     search,
     loading,
@@ -874,9 +863,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     firstSelectedItem,
     updateDatatableItem,
     updateSelectedItems,
-    imageDialog,
-    openImageDialog,
-    closeImageDialog,
+    openAttachmentDialog,
     setFilterOptions,
     updateFilterOptions,
     openFilterDialog,
@@ -957,7 +944,6 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     downloadingExample,
     onDownloadExample,
 
-    imageDialog,
     onRowContextmenu,
     getRowsPerPageOptions,
     getShowSelection,
@@ -1053,7 +1039,6 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     activeContextItems,
     datatableItemsScope,
     onCloneItem,
-    openImageDialog,
-    closeImageDialog
+    openAttachmentDialog
   }
 }

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

@@ -13,6 +13,7 @@ export type MFrameDialogProps = {
   height?: string;
   noDownload?: boolean;
   iframeProps?: Record<string, any>;
+  image?: boolean;
 }
 
 export type MFrameDialogSlots = {

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

@@ -156,9 +156,6 @@ export type MDatatableScope = {
   firstSelectedItem: ComputedRef<MDtItem>;
   updateDatatableItem: (item: MDtItem, index?: MDtItemIndex) => void;
   updateSelectedItems: ((selected: MDtItem[]) => void);
-  imageDialog: UnwrapNestedRefs<{ value: boolean, src?: string, asAttachment?: boolean }>;
-  openImageDialog: (src: string, opts?: { asAttachment?: boolean }) => void;
-  closeImageDialog: () => void;
   setFilterOptions: (data: any) => void;
   updateFilterOptions: (data: any) => void;
   openFilterDialog: () => void;