@mythpe/quasar-ui-qui 0.3.87 → 0.3.89

package/package.json

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

package/src/components/modal/MFrameDialog.vue

@@ -0,0 +1,94 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { computed, ref } from 'vue'
+import { useMyth } from '../../composable'
+import type { MFrameDialogProps as Props } from '../../types'
+
+interface P {
+  url: Props['url'];
+  height?: Props['height'];
+  noDownload?: boolean;
+  iframeProps?: Record<string, any>;
+}
+
+const props = defineProps<P>()
+const $q = useQuasar()
+defineEmits([
+  ...useDialogPluginComponent.emits
+])
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()
+const { openWindow } = useMyth()
+
+const loading = ref(!0)
+const src = computed<string | null>(() => props.url || null)
+const onCloseClick = () => {
+  onDialogOK()
+}
+
+const onDownloadClick = () => {
+  if (src.value) {
+    openWindow(src.value)
+  }
+}
+
+defineOptions({
+  name: 'FrameDialog'
+})
+</script>
+
+<template>
+  <q-dialog
+    ref="dialogRef"
+    maximized
+    no-shake
+    transition-hide="slide-up"
+    transition-show="slide-down"
+    @hide="onDialogHide"
+  >
+    <q-card class="q-dialog-plugin">
+      <q-card-section style="max-height: 80px">
+        <MContainer
+          dense
+          fluid
+        >
+          <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>
+        </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>
+  </q-dialog>
+</template>

package/src/components/modal/index.ts

@@ -1,7 +1,9 @@
 import MDialog from './MDialog.vue'
+import MDialogFile from './MDialogFile.vue'
+import MFrameDialog from './MFrameDialog.vue'
 import MModalMenu from './MModalMenu.vue'
 import MTooltip from './MTooltip.vue'
 
-export { MDialog, MModalMenu, MTooltip }
+export { MDialog, MDialogFile, MFrameDialog, MModalMenu, MTooltip }
 
 export default {}

package/src/plugin/defineAsyncComponents.ts

@@ -51,6 +51,7 @@ export const defineAsyncComponents = function (app: App) {
   // Modals.
   app.component('MDialog', defineAsyncComponent(() => import('../components/modal/MDialog.vue')))
   app.component('MDialogFile', defineAsyncComponent(() => import('../components/modal/MDialogFile.vue')))
+  app.component('MFrameDialog', defineAsyncComponent(() => import('../components/modal/MFrameDialog.vue')))
   app.component('MModalMenu', defineAsyncComponent(() => import('../components/modal/MModalMenu.vue')))
   app.component('MTooltip', defineAsyncComponent(() => import('../components/modal/MTooltip.vue')))
 

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

@@ -0,0 +1,20 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+import type { VNode } from 'vue'
+
+export type MFrameDialogProps = {
+  url: string | undefined | null;
+  height?: string;
+  noDownload?: boolean;
+  iframeProps?: Record<string, any>;
+}
+
+export type MFrameDialogSlots = {
+  default: () => VNode[];
+}

package/src/types/components.d.ts

@@ -71,6 +71,7 @@ import type { MSarIconProps, MSarIconSlots, MSarStringProps, MSarStringSlots } f
 import type { MMapProps, MMapSlots } from './api/MMap'
 import type { MInnerLoadingProps, MInnerLoadingSlots } from './api/MInnerLoading'
 import type { MDialogFileProps, MDialogFileSlots } from './api/MDialogFile'
+import type { MFrameDialogProps, MFrameDialogSlots } from './api/MFrameDialog'
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
@@ -124,6 +125,7 @@ declare module '@vue/runtime-core' {
     // Modals.
     MDialog: GlobalComponentConstructor<MDialogProps, MDialogSlots>;
     MDialogFile: GlobalComponentConstructor<MDialogFileProps, MDialogFileSlots>;
+    MFrameDialog: GlobalComponentConstructor<MFrameDialogProps, MFrameDialogSlots>;
     MModalMenu: GlobalComponentConstructor<MModalMenuProps, MModalMenuSlots>;
     MTooltip: GlobalComponentConstructor<MTooltipProps, MTooltipSlots>;
     // Datatable

package/src/types/index.d.ts

@@ -30,6 +30,7 @@ export { MCkeditorSlots } from './api/MCkeditor'
 export { MCkeditorProps } from './api/MCkeditor'
 export { MDialogSlots, MDialogProps } from './api/MDialog'
 export { MDialogFileSlots, MDialogFileProps } from './api/MDialogFile'
+export { MFrameDialogSlots, MFrameDialogProps } from './api/MFrameDialog'
 export { MTooltipSlots } from './api/MTooltip'
 export { MTooltipProps } from './api/MTooltip'
 export { MModalMenuSlots } from './api/MModalMenu'