@mythpe/quasar-ui-qui 0.3.0 → 0.3.2

package/package.json

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

package/src/components/form/MColor.vue

@@ -13,7 +13,7 @@
 import type { MInputProps as Props, MInputSlots } from '../../types'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import { useField } from 'vee-validate'
-import { useBindInput } from '../../composable'
+import { useBindInput, useMyth } from '../../composable'
 import type { QField, QInput } from 'quasar'
 
 type P = {
@@ -48,7 +48,7 @@ const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   ...toValue<any>(props.fieldOptions)
 })
 const { value, errorMessage, handleChange, handleBlur } = inputScope
-
+const { colorStyle } = useMyth()
 const listeners = {
   blur: (v: any) => handleBlur(v, !0),
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
@@ -82,13 +82,13 @@ defineOptions({
   >
     <template #prepend>
       <div
-        :style="`width: 20px; height: 20px; background-color: ${value};`"
+        :style="`width: 20px; height: 20px; ${colorStyle(value,!0)}`"
         class="m-input__color-preview"
       />
     </template>
     <template
-      #append
       v-if="!viewMode && !readonly && !disable"
+      #append
     >
       <q-icon
         class="cursor-pointer"
@@ -99,7 +99,10 @@ defineOptions({
           transition-hide="scale"
           transition-show="scale"
         >
-          <q-color v-model="value" />
+          <q-color
+            v-model="value"
+            :name="name"
+          />
         </q-popup-proxy>
       </q-icon>
     </template>

package/src/components/form/MToggle.vue

@@ -123,7 +123,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode},'m-toggle__col']"
     :col="col"
     :lg="lg"
     :md="md"

package/src/components/form/MUploader.vue

@@ -10,7 +10,7 @@
   setup
 >
 import { QList, type QRejectedEntry, QUploader, type QUploaderFactoryObject } from 'quasar'
-import { computed, nextTick, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, toValue, useTemplateRef, watch } from 'vue'
 import { useBindInput, useError, useMyth, useValue } from '../../composable'
 import type { MUploaderMediaItem, MUploaderProps as Props, MUploaderXhrInfo } from '../../types'
 import { useFieldArray, useFieldValue, useFormValues, useResetForm } from 'vee-validate'
@@ -138,7 +138,7 @@ type Emits = {
   (e: 'remove-file', file: File): void;
 }
 const emit = defineEmits<Emits>()
-
+// const $q = useQuasar()
 type Form = Record<string, any>;
 const { alertError, alertSuccess, __, api, props: pluginOptions } = useMyth()
 const fieldId = useFieldValue<string | undefined>('id')
@@ -301,6 +301,11 @@ const onDeleteUploaderFile = (file: File) => {
   emit('remove-file', file)
 }
 const onDeleteMedia = (media: MUploaderMediaItem, result: boolean) => emit('delete-media', media, result)
+const onShowMedia = (media: MUploaderMediaItem) => {
+  showMediaItem.value = toValue(media)
+}
+const showMediaItem = ref<MUploaderMediaItem | null>(null)
+
 watch(() => uploader.value?.isUploading, (v) => {
   uploading.value = Boolean(v)
 })
@@ -495,12 +500,13 @@ defineOptions({
               @delete-media="onDeleteMedia"
             />
           </template>
-          <template v-if="attachments">
+          <template v-if="!!attachments">
             <template
               v-for="f in attachments"
               :key="f.key"
             >
               <MUploaderItem
+                :audio-props="audioProps"
                 :collection="collection"
                 :default-file-icon="defaultFileIcon"
                 :delete-media-icon="deleteMediaIcon"
@@ -516,14 +522,21 @@ defineOptions({
                 :scope="scope"
                 :service="service"
                 :update-btn="updateBtn"
+                :video-props="videoProps"
                 @values="setModelValue"
                 @remove-file="onDeleteUploaderFile"
                 @delete-media="onDeleteMedia"
+                @show-media="onShowMedia"
               />
             </template>
           </template>
         </q-list>
       </template>
     </q-uploader>
+    <MDialogFile
+      :type="showMediaItem?.type"
+      :url="showMediaItem?.url"
+      @hide="showMediaItem = null"
+    />
   </MCol>
 </template>

package/src/components/modal/MDialogFile.vue

@@ -0,0 +1,111 @@
+<!--
+  - 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 { computed } from 'vue'
+import type { MDialogFileProps as Props } from '../../types'
+import { useQuasar } from 'quasar'
+
+interface P {
+  url?: Props['url'] | undefined;
+  type?: Props['type'];
+}
+
+const props = defineProps<P>()
+
+type Emits = {
+  (e: 'hide'): void;
+}
+const emit = defineEmits<Emits>()
+
+const $q = useQuasar()
+const dialog = computed(() => !!props.url)
+const isPdf = computed(() => {
+  if (props.type === 'pdf') return !0
+  return props.url?.endsWith('.pdf')
+})
+
+const isImage = computed(() => {
+  if (props.type === 'image') return !0
+  if (!props.url) return false
+  return /\.(png|jpe?g|gif|webp|svg)$/i.test(props.url.split('?')[0] || '')
+})
+const isVideo = computed(() => {
+  if (props.type === 'video') return !0
+  const url = props.url
+  if (!url) return false
+  const videoExtensions = [
+    'mp4', 'mov', 'avi', 'wmv', 'flv', 'webm', 'mkv',
+    'm4v', '3gp', 'ogv', 'mpeg', 'mpg'
+  ]
+  const urlWithoutParams = (url.split('?')[0] || '').split('#')[0] || ''
+  const extension = urlWithoutParams.split('.').pop()?.toLowerCase()
+  return !!extension && videoExtensions.includes(extension)
+})
+const isAudio = computed(() => {
+  if (props.type === 'audio') return true
+  const url = props.url
+  if (!url?.trim()) return false
+  const audioExtensions = new Set([
+    'mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a',
+    'wma', 'opus', 'amr', 'mid', 'midi', 'weba'
+  ])
+
+  try {
+    const parsedUrl = new URL(url)
+    const pathname = parsedUrl.pathname
+    const extension = pathname.split('.').pop()?.toLowerCase() || ''
+    return audioExtensions.has(extension)
+  } catch {
+    const simplePath = url.split('?')[0]?.split('#')[0] || ''
+    const extension = simplePath.split('.').pop()?.toLowerCase() || ''
+    return audioExtensions.has(extension)
+  }
+})
+defineOptions({
+  name: 'MDialogFile',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-dialog
+    :model-value="dialog"
+    maximized
+    persistent
+    transition-hide="slide-down"
+    transition-show="slide-up"
+    @hide="emit('hide')"
+  >
+    <q-card v-if="!!url">
+      <q-card-section>
+        <MBtn
+          v-close-popup
+          label="labels.close"
+        />
+      </q-card-section>
+      <iframe
+        v-if="isPdf || isVideo || isAudio"
+        :height="$q.screen.height - 120 + 'px'"
+        :src="url"
+        frameborder="0"
+        width="100%"
+      />
+      <q-img
+        v-else-if="isImage"
+        :height="$q.screen.height - 120 + 'px'"
+        :src="url"
+        fit="contain"
+      />
+    </q-card>
+  </q-dialog>
+</template>

package/src/components/parials/MUploaderItem.vue

@@ -70,9 +70,11 @@ const modelValue = defineModel<ModelValue>({ required: !0, default: () => ({} as
 const mediaProp = computed<MUploaderMediaItem>(() => modelValue.value as MUploaderMediaItem)
 
 interface Emits {
-  (e: 'delete-media', media: MUploaderMediaItem, result: boolean): void;
+  (e: 'deleteMedia', media: MUploaderMediaItem, result: boolean): void;
 
-  (e: 'remove-file', File: File): void;
+  (e: 'showMedia', media: MUploaderMediaItem, event: Event): void;
+
+  (e: 'removeFile', File: File): void;
 
   (e: 'values', value: Props['modelValue']): void;
 }
@@ -127,13 +129,13 @@ const deleteMedia = (media: MUploaderMediaItem) => {
         .finally(() => {
           deleting.value = !1
           q.loading.hide()
-          emit('delete-media', media, r)
+          emit('deleteMedia', media, r)
         })
     }
   })
 }
 const deleteUploaderFile = (file: File) => {
-  nextTick(() => emit('remove-file', file))
+  nextTick(() => emit('removeFile', file))
 }
 const onUpdateField = (data: any) => {
   const model = modelValue.value as MUploaderMediaItem
@@ -279,19 +281,31 @@ defineOptions({
         v-if="(mediaProp.id && mediaProp.url) || (!hideDeleteMedia || (hideDeleteMedia && !mediaProp.id))"
         class="print-hide justify-between"
       >
-        <q-btn
-          v-if="mediaProp.id && mediaProp.url"
-          :href="mediaProp.url"
-          :icon="downloadFileIcon"
-          dense
-          flat
-          target="_blank"
-          v-bind="pluginOptions.uploaderOptions?.downloadBtnProps"
-        >
-          <q-tooltip class="m-dt-btn-tooltip">
-            {{ __('myth.titles.download') }}
-          </q-tooltip>
-        </q-btn>
+        <template v-if="mediaProp.id && mediaProp.url">
+          <q-btn
+            :href="mediaProp.url"
+            :icon="downloadFileIcon"
+            dense
+            flat
+            target="_blank"
+            v-bind="pluginOptions.uploaderOptions?.downloadBtnProps"
+          >
+            <q-tooltip class="m-dt-btn-tooltip">
+              {{ __('myth.titles.download') }}
+            </q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            icon="ion-ios-eye"
+            v-bind="pluginOptions.uploaderOptions?.downloadBtnProps"
+            @click="emit('showMedia', mediaProp, $event)"
+          >
+            <q-tooltip class="m-dt-btn-tooltip">
+              {{ __('labels.show') }}
+            </q-tooltip>
+          </q-btn>
+        </template>
         <q-btn
           v-if="(!hideDeleteMedia || (hideDeleteMedia && !mediaProp.id))"
           :disable="deleting || scope.isBusy || scope.isUploading"

package/src/composable/useColor.ts

@@ -0,0 +1,6 @@
+export const useColor = () => {
+  const toColors = (color: any) => {
+
+  }
+  return { toColors }
+}

package/src/composable/useMyth.ts

@@ -10,7 +10,7 @@ import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useRoute } from 'vue-router'
 import type { QDialogOptions, QDialogProps, QNotifyCreateOptions } from 'quasar'
-import { copyToClipboard, extend, useQuasar } from 'quasar'
+import { colors, copyToClipboard, extend, useQuasar } from 'quasar'
 import { Helpers, MythKey, type MythType, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 import { computed, inject } from 'vue'
@@ -277,6 +277,20 @@ export const useMyth = () => {
     })
   }
   const isSmall = computed(() => q.screen.lt.md)
+  const colorStyle = (value: any, bg: boolean = false) => {
+    if (!value) {
+      return ''
+    }
+    if (!value.startsWith('#')) {
+      value = colors.getPaletteColor(value)
+    }
+    const attr = bg ? 'background-color: ' : 'color: '
+    if (value === 'transparent') {
+      return `${attr} transparent;`
+    }
+    return `${attr} ${value};`
+  }
+
   return {
     __,
     getPageTitle,
@@ -291,6 +305,7 @@ export const useMyth = () => {
     ...Str,
     veeRules,
     isSmall,
+    colorStyle,
     ...plugin
   }
 }

package/src/index.sass

@@ -13,6 +13,7 @@
 @import './style/m-input'
 @import './style/m-picker'
 @import './style/m-select'
+@import './style/m-toggle'
 @import './style/print'
 @import './style/transition'
 @import './style/typography'

package/src/plugin/defineAsyncComponents.ts

@@ -49,6 +49,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('MModalMenu', defineAsyncComponent(() => import('../components/modal/MModalMenu.vue')))
   app.component('MTooltip', defineAsyncComponent(() => import('../components/modal/MTooltip.vue')))
 

package/src/style/m-toggle.sass

@@ -0,0 +1,3 @@
+
+.m-toggle__col + .m-toggle__col
+  padding-left: 10px

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

@@ -0,0 +1,19 @@
+/*
+ * 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'
+import type { MediaType } from './MUploader'
+
+export type MDialogFileProps = {
+  url: string | undefined | null;
+  type?: MediaType | null | undefined;
+}
+
+export type MDialogFileSlots = {
+  default: () => VNode[];
+}

package/src/types/components.d.ts

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

package/src/types/index.d.ts

@@ -28,8 +28,8 @@ export { MSarIconSlots } from './api/MSar'
 export { MSarIconProps } from './api/MSar'
 export { MCkeditorSlots } from './api/MCkeditor'
 export { MCkeditorProps } from './api/MCkeditor'
-export { MDialogSlots } from './api/MDialog'
-export { MDialogProps } from './api/MDialog'
+export { MDialogSlots, MDialogProps } from './api/MDialog'
+export { MDialogFileSlots, MDialogFileProps } from './api/MDialogFile'
 export { MTooltipSlots } from './api/MTooltip'
 export { MTooltipProps } from './api/MTooltip'
 export { MModalMenuSlots } from './api/MModalMenu'