@mythpe/quasar-ui-qui 0.2.64 → 0.2.65

package/package.json

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

package/src/components/form/MUploader.vue

@@ -31,6 +31,7 @@ interface P {
   images?: Props['images'];
   svg?: Props['svg'];
   video?: Props['video'];
+  audio?: Props['audio'];
   pdf?: Props['pdf'];
   excel?: Props['excel'];
   autoUpload?: Props['autoUpload'];
@@ -61,6 +62,9 @@ interface P {
   shadow?: Props['shadow'];
   fieldOptions?: Props['fieldOptions'];
   mediaLabel?: Props['mediaLabel'];
+  ratio?: Props['ratio'];
+  videoProps?: Props['videoProps'];
+  audioProps?: Props['audioProps'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -78,6 +82,7 @@ const props = withDefaults(defineProps<P>(), {
   images: () => !1,
   svg: () => !1,
   video: () => !1,
+  audio: () => !1,
   pdf: () => !1,
   excel: () => !1,
   autoUpload: () => !0,
@@ -93,9 +98,9 @@ const props = withDefaults(defineProps<P>(), {
   updateBtn: () => !1,
   service: undefined,
   modelId: undefined,
-  defaultFileIcon: () => 'o_file_present',
-  deleteMediaIcon: () => 'ion-ios-trash',
-  uploadFilesIcon: () => 'o_cloud_upload',
+  defaultFileIcon: 'ion-ios-document',
+  deleteMediaIcon: 'ion-ios-trash',
+  uploadFilesIcon: 'ion-cloud-upload',
   pickFilesIcon: () => 'o_upload_file',
   removeUploadedIcon: () => 'o_done_all',
   removeQueuedIcon: () => 'o_clear_all',
@@ -107,7 +112,10 @@ const props = withDefaults(defineProps<P>(), {
   displayMode: () => 'card',
   shadow: () => 'shadow-5',
   fieldOptions: undefined,
-  mediaLabel: () => 'name'
+  mediaLabel: () => 'name',
+  ratio: 16 / 9,
+  videoProps: undefined,
+  audioProps: undefined
 })
 
 type Emits = {
@@ -141,7 +149,7 @@ watch(field, v => (modelValue.value = v), { deep: !0 })
 const { error, setErrors } = useError(() => props.name)
 const resetForm = useResetForm<Form>()
 const formValues = useFormValues<Form>()
-const { fields: attachments } = useFieldArray<MUploaderMediaItem | File>(() => props.name)
+const { fields: attachments } = useFieldArray<MUploaderMediaItem & File>(() => props.name)
 
 // const setFormValues = useSetFormValues()
 // const setFormTouched = useSetFormTouched()
@@ -466,6 +474,7 @@ defineOptions({
             :key="`fi-${i}`"
           >
             <MUploaderItem
+              :audio-props="audioProps"
               :collection="collection"
               :default-file-icon="defaultFileIcon"
               :delete-media-icon="deleteMediaIcon"
@@ -477,9 +486,11 @@ defineOptions({
               :model-id="modelIdProp"
               :model-value="file"
               :name="name"
+              :ratio="ratio"
               :return-type="returnType"
               :scope="scope"
               :service="service"
+              :video-props="videoProps"
               @remove-file="onDeleteUploaderFile"
               @delete-media="onDeleteMedia"
             />

package/src/components/parials/MUploaderItem.vue

@@ -18,11 +18,11 @@ import { useQuasar } from 'quasar'
 import { useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
 
-type ModelValue = MUploaderMediaItem | File & {
+type ModelValue = MUploaderMediaItem & File & {
   __sizeLabel?: string;
   __progressLabel?: string;
   __status?: string;
-  __img?: string;
+  __img?: any;
 };
 
 interface P {
@@ -41,6 +41,9 @@ interface P {
   deleteMediaIcon?: Props['deleteMediaIcon'];
   downloadFileIcon?: Props['downloadFileIcon'];
   mediaLabel?: Props['mediaLabel'];
+  ratio?: Props['ratio'];
+  videoProps?: Props['videoProps'];
+  audioProps?: Props['audioProps'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -58,7 +61,10 @@ const props = withDefaults(defineProps<P>(), {
   defaultFileIcon: undefined,
   deleteMediaIcon: undefined,
   downloadFileIcon: undefined,
-  mediaLabel: () => ''
+  mediaLabel: () => '',
+  ratio: 16 / 9,
+  videoProps: undefined,
+  audioProps: undefined
 })
 const modelValue = defineModel<ModelValue>({ required: !0, default: () => ({} as ModelValue) })
 const mediaProp = computed<MUploaderMediaItem>(() => modelValue.value as MUploaderMediaItem)
@@ -158,7 +164,7 @@ defineOptions({
   <q-item
     :class="displayMode === 'card' ? `rounded-borders ${shadow || 'shadow-1'}` : undefined"
     :dense="displayMode === 'card'"
-    :style="displayMode === 'card' ? 'max-width: 300px; min-width: 200px;' : undefined"
+    :style="displayMode === 'card' ? 'max-width: 350px; min-width: 200px;' : undefined"
   >
     <q-item-section
       v-if="displayMode === 'list'"
@@ -169,10 +175,14 @@ defineOptions({
         v-if="!!mediaProp.icon"
         :name="mediaProp.icon"
         :size="iconsSize"
-        color="primary"
+      />
+      <q-icon
+        v-else-if="!!modelValue.icon"
+        :name="modelValue.icon"
+        :size="iconsSize"
       />
       <q-img
-        v-else-if="!!modelValue.__img || (mediaProp.url && modelValue.type === 'image')"
+        v-else-if="!!modelValue.__img || (mediaProp.url && modelValue.is_image)"
         :ratio="1"
         :src="modelValue.__img ? modelValue.__img.src : mediaProp.url"
         fit="contain"
@@ -180,9 +190,10 @@ defineOptions({
       />
       <q-icon
         v-else
-        :name="modelValue.type === 'pdf' ? 'fa-regular fa-file-pdf' : (modelValue.type === 'excel' ? 'fa-regular fa-file-excel' : (modelValue.type === 'image' ? 'o_image' :defaultFileIcon))"
+        :name="modelValue.is_pdf ? 'far fa-file-pdf' : (
+          modelValue.is_excel ? 'far fa-file-excel' :
+          modelValue.is_audio ? 'ion-ios-musical-notes' : ( modelValue.is_video ? 'ion-ios-videocam' : (modelValue.is_image ? 'ion-ios-image' :defaultFileIcon )))"
         :size="props.iconsSize"
-        color="primary"
       />
     </q-item-section>
     <q-item-section :class="{'overflow-hidden': displayMode === 'card'}">
@@ -191,8 +202,7 @@ defineOptions({
         <q-icon
           v-if="updateBtn"
           class="cursor-pointer"
-          color="primary"
-          name="o_edit"
+          name="ion-ios-create"
           right
         >
           <q-popup-edit
@@ -262,7 +272,7 @@ defineOptions({
         caption
         class="print-hide"
       >
-        <span v-if="!!mediaProp.size_to_string">{{ mediaProp.size_to_string }} | {{ modelValue.type }}</span>
+        <span v-if="!!mediaProp.size_to_string">{{ mediaProp.size_to_string }} | {{ modelValue.type_to_string || modelValue.type }}</span>
         <span v-if="modelValue.__sizeLabel">{{ modelValue.__sizeLabel }} / {{ modelValue.__progressLabel }}</span>
       </q-item-label>
       <q-item-label
@@ -296,6 +306,30 @@ defineOptions({
           </q-tooltip>
         </q-btn>
       </q-item-label>
+      <q-item-label v-if="modelValue.is_audio">
+        <audio controls>
+          <source
+            v-if="!!modelValue.url"
+            :src="modelValue.url"
+            :type="modelValue.mime_type"
+            v-bind="audioProps"
+          >
+          Your browser does not support the audio element.
+        </audio>
+      </q-item-label>
+      <q-item-label v-if="modelValue.is_video">
+        <div
+          class="col-12 items-center self-center"
+          style="min-height: 120px;width: 100%"
+        >
+          <q-video
+            v-if="!!modelValue.url"
+            :ratio="ratio"
+            :src="modelValue.url"
+            v-bind="videoProps"
+          />
+        </div>
+      </q-item-label>
     </q-item-section>
   </q-item>
 </template>

package/src/composable/useBindInput.ts

@@ -3,7 +3,6 @@ import { computed, ref, toValue, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
 import type { MythComponentsProps as UiOpt } from '../types/plugin-props-option'
-import { biRadar } from '@quasar/extras/bootstrap-icons'
 
 type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };
@@ -143,7 +142,14 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
       if (typeof props.video === 'string' && props.video?.length > 0) {
         l.push(props.video)
       } else {
-        l.push('video/mp4')
+        l.push('video/*')
+      }
+    }
+    if (props.audio) {
+      if (typeof props.audio === 'string' && props.audio?.length > 0) {
+        l.push(props.audio)
+      } else {
+        l.push('audio/*')
       }
     }
     if (props.pdf) {

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

@@ -7,17 +7,20 @@
  */
 
 import type { HelpersStubSchema } from '../api-helpers'
-import type { QUploaderProps, QUploaderSlots } from 'quasar'
+import type { QUploaderProps, QUploaderSlots, QVideoProps } from 'quasar'
 import type { VNode } from 'vue'
 import type { MColProps } from './MCol'
 import type { BaseInputsProps } from './MInput'
 
-export type MUploaderMediaItem = {
+export type MediaType = 'image' | 'video' | 'audio' | 'pdf' | 'excel' | 'other';
+
+export interface MUploaderMediaItem {
   id: number;
   value: number;
   name: string;
   file_name: string;
-  type: string;
+  type: MediaType;
+  type_to_string: string;
   size: number;
   size_to_string: string;
   url: string;
@@ -25,13 +28,24 @@ export type MUploaderMediaItem = {
   icon: string;
   description: string;
   attachment_type: string;
-  attachment_type_id: number;
+  collection_to_string: string;
+  attachment_type_id: number | null;
   attachment_type_id_to_string: string;
   user_id: number | null;
   user_id_to_string: string;
   order_column: number;
+  original_url: boolean;
+  preview_url: boolean;
+  model_type_to_string: boolean;
+  is_image: boolean;
+  is_pdf: boolean;
+  is_excel: boolean;
+  is_video: boolean;
+  is_audio: boolean;
+
   [k: string]: any;
-};
+}
+
 export type MUploaderServiceType = Pick<HelpersStubSchema, 'getUploadAttachmentsUrl' | 'updateAttachment' | 'uploadAttachments' | 'deleteAttachment'>
 export type MUploaderProps = Omit<QUploaderProps, 'formFields' | 'headers' | 'url'> & MColProps & Pick<BaseInputsProps, 'fieldOptions'> & {
   /**
@@ -48,7 +62,7 @@ export type MUploaderProps = Omit<QUploaderProps, 'formFields' | 'headers' | 'ur
    */
   readonly?: boolean;
   /**
-   * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
+   * Comma separated a list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
    */
   accept?: string;
   /**
@@ -64,11 +78,15 @@ export type MUploaderProps = Omit<QUploaderProps, 'formFields' | 'headers' | 'ur
    */
   video?: boolean;
   /**
-   * Support for uploading pdf
+   * Support for uploading audio
+   */
+  audio?: boolean;
+  /**
+   * Support for uploading PDF
    */
   pdf?: boolean;
   /**
-   * Support for uploading excel
+   * Support for uploading Excel
    */
   excel?: boolean;
   /**
@@ -145,6 +163,9 @@ export type MUploaderProps = Omit<QUploaderProps, 'formFields' | 'headers' | 'ur
    * Default is: name.
    */
   mediaLabel?: string | undefined;
+  ratio?: QVideoProps['ratio'];
+  videoProps?: Omit<QVideoProps, 'ratio' | 'src'>;
+  audioProps?: any;
 }
 export type MUploaderSlots = QUploaderSlots & {
   /**