@mythpe/quasar-ui-qui 0.3.71 → 0.3.73

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -23,6 +23,7 @@ import MDtColorColumn from './MDtColorColumn.vue'
 import MDtSarColumn from './MDtSarColumn.vue'
 import MDtCopyColumn from './MDtCopyColumn.vue'
 import { useRouter } from 'vue-router'
+import MDtContextmenuItems from './MDtContextmenuItems.vue'
 
 type Props = {
   controlKey?: MDatatableProps['controlKey'];
@@ -474,13 +475,33 @@ const mainAttrs = computed(() => ({
   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
 }))
+const showIfContext = (contextBtn: GenericMDtBtn): boolean => {
+  contextBtn = toValue(contextBtn)
+  if (selected.value.length === 0) {
+    const per = typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected.value[0], 0) : contextBtn.showIf === !0
+    const single = (!!contextBtn.click || !!contextBtn.attr?.to)
+    const multi = !!contextBtn.multiClick
+    return per && (single || multi)
+  }
+  if (!contextBtn.multiClick) {
+    return !1
+  }
+  // console.log(typeof contextBtn.showIf, contextBtn.name)
+  for (let idx = 0; idx < selected.value.length; idx++) {
+    const item = toValue(selected.value[idx])
+    const per = typeof contextBtn.showIf === 'function' ? contextBtn.showIf(item, idx) : contextBtn.showIf === !0
+    if (per) {
+      return !0
+    }
+  }
+  return !1
+}
 defineOptions({
   name: 'MDatatable',
   inheritAttrs: !1
@@ -1151,8 +1172,7 @@ defineExpose({
                         :key="`top-s-${i}`"
                       >
                         <MDtBtn
-                          v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf !==!1) && ( ((!!contextBtn.click || !!contextBtn.attr?.to) && isSingleSelectedItem)
-                            || (contextBtn.multiClick && !isSingleSelectedItem) )"
+                          v-if="showIfContext(contextBtn)"
                           :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?(te(`labels.${contextBtn.label}`) ?
                             __(`labels.${contextBtn.label}`) : __(contextBtn.label) ):undefined)"
                           v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn as any,...contextBtn as any,...contextBtn.attr as any,to: typeof contextBtn.attr?.to === 'function' ? contextBtn.attr.to(selected[0],0) : contextBtn.attr?.to}"

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"