@mythpe/quasar-ui-qui 0.3.70 → 0.3.72

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -13,7 +13,7 @@
 import type { ApiInterface, GenericMDtBtn, MDatatableProps } from '../../types'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { computed, onMounted, ref, toValue, watch } from 'vue'
+import { computed, onMounted, ref, toValue, useAttrs, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import { useDtHelpers, useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
@@ -466,6 +466,21 @@ watch(formDialogModel, (v) => {
   }
 })
 const table = ref<InstanceType<typeof QTable>>()
+const mainAttrs = computed(() => ({
+  title: getTableTitle.value,
+  bordered: props.bordered === undefined ? pluginOptions.value.datatable?.bordered : props.bordered,
+  dense: props.dense === undefined ? (theme.value?.inputs?.dense !== undefined ? theme.value.inputs.dense : pluginOptions.value.datatable?.dense) : props.dense,
+  flat: props.flat === undefined ? pluginOptions.value.datatable?.flat : props.flat,
+  wrapCells: wrapCellsRef.value
+}))
+const attrs = useAttrs()
+console.log(attrs)
+const bindAttr = computed(() => ({
+  virtualScroll: !0,
+  ...pluginOptions.value.datatable as any,
+  ...attrs as any,
+  ...mainAttrs.value as any
+}))
 defineOptions({
   name: 'MDatatable',
   inheritAttrs: !1
@@ -579,16 +594,7 @@ defineExpose({
         card-container-class="m-datatable-container"
         color="primary"
         table-class="m-datatable-container"
-        v-bind="{
-          virtualScroll: !0,
-          ...pluginOptions.datatable as any,
-          ...$attrs as any,
-          title: getTableTitle,
-          bordered: bordered === undefined ? pluginOptions.datatable?.bordered : bordered,
-          dense: dense === undefined ? ( theme.inputs.dense !== undefined ? theme.inputs.dense : pluginOptions.datatable?.dense) : dense,
-          flat: flat === undefined ? pluginOptions.datatable?.flat : flat,
-          wrapCells: wrapCellsRef,
-        } as any"
+        v-bind="bindAttr"
         @request="fetchDatatableItems"
         @update:selected="onUpdateSelectedItems"
         @virtual-scroll="endReach ? onScroll : undefined"

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"

package/src/components/sar/MSarIcon.vue

@@ -13,7 +13,9 @@ import { computed } from 'vue'
 type Props = QIconProps
 const noDefault = defineModel<boolean>('noDefault', { required: !1, default: !1 })
 const props = defineProps<Props>()
-const getSize = computed<Props['size']>(() => noDefault.value ? props.size : props.size || '100%')
+const getSize = computed<any>(() => ({
+  size: noDefault.value ? props.size : (props.size || '100%')
+}))
 defineOptions({
   name: 'MSarString',
   inheritAttrs: !1
@@ -21,7 +23,7 @@ defineOptions({
 </script>
 
 <template>
-  <q-icon v-bind="{...$props,...$attrs,size: getSize} as any">
+  <q-icon v-bind="{...$props,...$attrs, ...getSize} as any">
     <slot name="default">
       <svg
         viewBox="0 0 1124.14 1256.39"