@mythpe/quasar-ui-qui 0.1.60 → 0.1.62

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<P>(), {
   loading: !1,
   required: undefined,
   rules: () => ({}),
-  contentClass: undefined,
+  contentClass: 'items-center',
   emptyColor: 'grey-2',
   btnLabel: 'choose_file'
 })
@@ -90,7 +90,7 @@ type Emits = {
   (e: 'click', evt?: Event): void;
 }
 const emit = defineEmits<Emits>()
-const { __ } = useMyth()
+const { __, openWindow } = useMyth()
 const { accepts, inputRules } = useBindInput<any>(() => props, 'avatarViewer')
 const modelValueScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0
@@ -139,7 +139,16 @@ const isFile = computed(() => {
   }
   return modelValue.value instanceof File && modelValue.value?.type.slice(0, 6) !== 'image/'
 })
-const getAvatarText = computed(() => props.avatarText ? props.avatarText.slice(0, 1).toUpperCase() : undefined)
+const getFileType = computed(() => (type: string) => {
+  if (modelValue.value instanceof File) {
+    return modelValue.value?.type.slice(0, type.length) === type || modelValue.value?.type.slice(-1 * type.length) === type
+  }
+  return url.value?.slice(-1 * type.length) === type
+})
+const isImage = computed(() => getFileType.value('image/'))
+// const isPdf = computed(() => getFileType.value('pdf'))
+const isFileNotImage = computed(() => hasSrc.value && !isImage.value)
+const getAvatarText = computed<string | undefined>(() => props.avatarText ? props.avatarText.slice(0, 1).toUpperCase() : undefined)
 const loadingSrc = ref(!1)
 const onClick = (e?: Event) => {
   if (props.readonly) {
@@ -169,6 +178,14 @@ const onClearInput = () => {
   handleRemoved(!0, !1)
   handleUrl(undefined, !1)
 }
+const hideImage = ref(!1)
+const onLoadImage = () => {
+  isLoaded.value = !0
+}
+const onErrorImage = () => {
+  isLoaded.value = !0
+  hideImage.value = !0
+}
 onBeforeUnmount(() => {
   revoke()
   removeFile()
@@ -204,7 +221,7 @@ defineOptions({
       <slot name="top" />
       <MTransition>
         <div
-          v-if="!!label"
+          v-if="label !== undefined"
           key="label"
           class="row items-center"
         >
@@ -218,7 +235,7 @@ defineOptions({
             v-else
             :class="`text-h6 q-px-sm rounded-borders q-mb-sm ${!!errorMessage ? 'text-negative' : ''}`"
           >
-            {{ __(label) }}
+            {{ label ? __(label) : label }}
             <span
               v-if="required && !readonly"
               class="text-negative"
@@ -232,12 +249,12 @@ defineOptions({
         </div>
         <slot name="hint">
           <div
-            v-if="!!hint && !loading"
+            v-if="hint !== undefined && !loading"
             key="hint"
             class="m--input__hint"
             v-bind="hintProps"
           >
-            <span>{{ __(hint) }}</span>
+            <span>{{ hint ? __(hint) : hint }}</span>
           </div>
         </slot>
         <div
@@ -251,20 +268,20 @@ defineOptions({
           />
           <q-avatar
             v-else
-            :color="!!errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile) ? emptyColor : undefined)"
-            :icon="isFile ? 'o_description' : undefined"
+            :color="errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile || isFileNotImage) ? emptyColor : undefined)"
+            :icon="isFileNotImage ? 'o_description' : undefined"
             :rounded="rounded"
             :size="size"
             text-color="white"
           >
             <q-img
-              v-if="hasSrc && !isFile"
+              v-if="hasSrc && !isFile && !hideImage"
               :fit="fit"
+              :ratio="1"
               :size="size"
               :src="blobUrl || url"
-              ratio="1"
-              @error="isLoaded = !0"
-              @load="isLoaded = !0"
+              @error="onErrorImage"
+              @load="onLoadImage"
             >
               <template #loading>
                 <div class="text-white">
@@ -273,7 +290,7 @@ defineOptions({
               </template>
             </q-img>
             <div
-              v-if="getAvatarText && !hasSrc"
+              v-else-if="getAvatarText !== undefined && !hasSrc"
               class="text-white text-h3"
               v-text="getAvatarText"
             />
@@ -290,6 +307,7 @@ defineOptions({
           />
           <MBtn
             v-else
+            :color="undefined"
             :disable="!isLoaded && !!url"
             :label="'labels.' + ( clearable ? ( hasSrc ? 'remove' : btnLabel ) : ( required ? ( hasSrc ? 'change' : btnLabel ) : btnLabel ) )"
             :loading="loadingSrc"
@@ -305,6 +323,19 @@ defineOptions({
         >
           <span class="text-body2 text-negative">{{ errorMessage }}</span>
         </div>
+        <div
+          v-if="isFileNotImage && url"
+          key="btn-download"
+          class="q-mt-lg"
+        >
+          <MBtn
+            :color="undefined"
+            icon="ion-ios-download"
+            label="labels.download"
+            outline
+            @click="openWindow(url)"
+          />
+        </div>
       </MTransition>
       <slot name="caption">
         <div