@mythpe/quasar-ui-qui 0.3.71 → 0.3.72

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -233,21 +233,23 @@ defineOptions({
   >
     <MColumn :class="contentClass">
       <slot name="top" />
-      <MTransitionGroup>
-        <div
+      <MTransition
+        in="fadeIn"
+        out="fadeOut"
+      >
+        <MRow
           v-if="label !== undefined"
           key="label"
-          class="row items-center"
+          class="items-center q-mb-md"
         >
           <q-skeleton
             v-if="loading"
-            class="q-mb-md"
             height="22px"
             width="80px"
           />
           <div
             v-else
-            :class="`text-h6 q-px-sm rounded-borders q-mb-sm ${!!errorMessage ? 'text-negative' : ''}`"
+            :class="`text-h6 q-px-sm rounded-borders ${!!errorMessage ? 'text-negative' : ''}`"
           >
             {{ label ? __(label) : label }}
             <span
@@ -260,20 +262,25 @@ defineOptions({
             :text="help"
             tooltip
           />
-        </div>
-        <slot name="hint">
-          <div
-            v-if="hint !== undefined && !loading"
-            key="hint"
-            class="m-input__hint"
-            v-bind="hintProps"
-          >
-            <span>{{ hint ? __(hint) : hint }}</span>
-          </div>
-        </slot>
+        </MRow>
+      </MTransition>
+      <slot name="hint">
         <div
-          key="avatar"
-          :class="`rounded-borders q-mb-sm ${!!errorMessage ? 'q-pa-xs' : ''}`"
+          v-if="hint !== undefined && !loading"
+          key="hint"
+          class="m-input__hint q-mb-md"
+          v-bind="hintProps"
+        >
+          <span>{{ hint ? __(hint) : hint }}</span>
+        </div>
+      </slot>
+      <div
+        key="avatar"
+        :class="['rounded-borders q-mb-md',{'q-pa-xs': !!errorMessage}]"
+      >
+        <MTransition
+          in="fadeIn"
+          out="fadeOut"
         >
           <q-skeleton
             v-if="loading"
@@ -281,7 +288,7 @@ defineOptions({
             type="QAvatar"
           />
           <q-avatar
-            v-if="!loading"
+            v-else-if="!loading"
             :color="errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile || isFileNotImage) ? emptyColor : undefined)"
             :icon="isFileNotImage && !url ? 'o_description' : undefined"
             :rounded="rounded"
@@ -309,21 +316,29 @@ defineOptions({
               v-text="getAvatarText"
             />
           </q-avatar>
-        </div>
+        </MTransition>
+      </div>
+      <MTransitionGroup
+        in="fadeIn"
+        out="fadeOut"
+      >
         <div
           v-if="!readonly"
           key="btn"
-          class="q-mt-lg"
+          class="q-mb-md"
         >
-          <q-skeleton
-            v-if="loading"
-            type="QBtn"
-          />
-          <MTransition>
+          <MTransition
+            in="fadeIn"
+            out="fadeOut"
+          >
+            <q-skeleton
+              v-if="loading"
+              type="QBtn"
+            />
             <div
-              v-if="!loading && !!modelValue"
+              v-else-if="!loading && !!modelValue"
               key="uploaded-text"
-              class="text-center q-mb-lg text-positive"
+              class="text-center q-mb-md text-positive"
             >
               <q-icon name="ion-checkmark" />
               {{ __('labels.uploaded') }}
@@ -347,18 +362,18 @@ defineOptions({
         >
           <span class="text-body2 text-negative">{{ errorMessage }}</span>
         </div>
-        <div
-          v-if="isFileNotImage && url"
-          key="btn-download"
-          class="q-mt-lg"
-        >
-          <MBtn
-            icon="ion-cloud-download"
-            label="labels.download"
-            @click="openWindow(url)"
-          />
-        </div>
       </MTransitionGroup>
+      <div
+        v-if="isFileNotImage && url"
+        key="btn-download"
+        class="q-mb-md"
+      >
+        <MBtn
+          icon="ion-cloud-download"
+          label="labels.download"
+          @click="openWindow(url)"
+        />
+      </div>
       <slot name="caption">
         <div
           v-if="!!caption"