@mythpe/quasar-ui-qui 0.4.46 → 0.4.48

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -653,27 +653,27 @@ defineExpose({
         @update:selected="onUpdateSelectedItems"
         @virtual-scroll="endReach ? onScroll : undefined"
       >
-        <template #item="iTempProps">
+        <template #item="itemProps">
           <slot
             :dt="datatableItemsScope"
             :form="useFormContext"
             name="item"
-            v-bind="iTempProps"
+            v-bind="itemProps"
           >
             <div
-              :style="iTempProps.selected ? 'transform: scale(0.95);' : ''"
+              :style="itemProps.selected ? 'transform: scale(0.95);' : ''"
               class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
             >
               <q-card
-                :class="iTempProps.selected ? ($q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2') : ''"
+                :class="itemProps.selected ? ($q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2') : ''"
               >
-                <template v-if="getShowSelection || iTempProps.colsMap[controlKey] !== undefined">
+                <template v-if="getShowSelection || itemProps.colsMap[controlKey] !== undefined">
                   <div class="m-datatable-card-control-header">
                     <MRow class="items-center justify-between">
                       <div class="q-px-md">
                         <q-checkbox
                           v-if="getShowSelection"
-                          v-model="iTempProps.selected"
+                          v-model="itemProps.selected"
                           dense
                         />
                       </div>
@@ -681,7 +681,7 @@ defineExpose({
                         <MDtBtn
                           flat
                           icon="ion-ios-more"
-                          @click="onRowContextmenu($event,iTempProps.row,iTempProps.rowIndex)"
+                          @click="onRowContextmenu($event,itemProps.row,itemProps.rowIndex)"
                         />
                       </div>
                     </MRow>
@@ -690,7 +690,7 @@ defineExpose({
                 </template>
                 <MContainer :fluid="!1">
                   <template
-                    v-for="col in iTempProps.cols"
+                    v-for="col in itemProps.cols"
                     :key="col.name"
                   >
                     <MRow
@@ -711,8 +711,8 @@ defineExpose({
                           <MDtCopyColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :align="col.align as any || undefined"
-                            :label="col.value"
-                            :value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
+                            :label="col.copyLabel && typeof col.copyLabel === 'function' ? () => col.copyLabel(itemProps.row) : itemProps.row[col.copyLabel || col.field]"
+                            :value="col.copyValue && typeof col.copyValue === 'function' ? () => col.copyValue(itemProps.row) : itemProps.row[col.copyValue || col.field]"
                           />
                         </template>
                         <template v-else-if="computedImageColumns.indexOf(col.name) !== -1">
@@ -728,7 +728,7 @@ defineExpose({
                           <MDtUrlColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :copy="computedCopyColumns.includes(col.name)"
-                            :copy-value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
+                            :copy-value="col.copyValue && typeof col.copyValue === 'function' ? () => col.copyValue(itemProps.row) : itemProps.row[col.copyValue || col.field]"
                             :value="col.value"
                             @click="openWindow(col.value)"
                           />
@@ -745,7 +745,7 @@ defineExpose({
                             v-if="col.value !== undefined && col.value !== null"
                             :align="col.align as any"
                             :copy="computedCopyColumns.includes(col.name)"
-                            :copy-value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
+                            :copy-value="col.copyValue && typeof col.copyValue === 'function' ? () => col.copyValue(itemProps.row) : itemProps.row[col.copyValue || col.field]"
                             :string="col.field.includes('_to_string') || col.field.includes('ToString')"
                             :value="col.value"
                           />
@@ -764,8 +764,8 @@ defineExpose({
                           >
                             <!--Grid-->
                             <MDtContextmenuItems
-                              :index="iTempProps.rowIndex"
-                              :item="iTempProps.row"
+                              :index="itemProps.rowIndex"
+                              :item="itemProps.row"
                               :items="contextmenuItems"
                             />
                           </MRow>
@@ -774,7 +774,7 @@ defineExpose({
                           <div class="m-datatable-card-value">
                             <slot
                               :name="`card-cell-${col.name}`"
-                              v-bind="iTempProps"
+                              v-bind="itemProps"
                             >
                               {{ col.value }}
                             </slot>
@@ -1167,7 +1167,7 @@ defineExpose({
                   name="bottom-search"
                 />
               </MRow>
-              <template v-if="hasSelectedItem && contextmenuItems.length > 0">
+              <template v-if="hasSelectedItem && contextmenuItems.length > 0 && getShowSelection">
                 <MRow gutter="sm">
                   <!--<MDtBtn-->
                   <!--  v-if="hasUpdateBtn && isSingleSelectedItem"-->
@@ -1393,8 +1393,8 @@ defineExpose({
           <q-td :props="copyCellProps">
             <MDtCopyColumn
               :align="copyCellProps.col.align as any || undefined"
-              :label="copyCellProps.col.copyLabel && typeof copyCellProps.col.copyLabel === 'function' ? copyCellProps.col.copyLabel(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyLabel || copyCellProps.col.field]"
-              :value="copyCellProps.col.copyValue && typeof copyCellProps.col.copyValue === 'function' ? copyCellProps.col.copyValue(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyValue || copyCellProps.col.field]"
+              :label="copyCellProps.col.copyLabel && typeof copyCellProps.col.copyLabel === 'function' ? () => copyCellProps.col.copyLabel(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyLabel || copyCellProps.col.field]"
+              :value="copyCellProps.col.copyValue && typeof copyCellProps.col.copyValue === 'function' ? () => copyCellProps.col.copyValue(copyCellProps.row) : copyCellProps.row[copyCellProps.col.copyValue || copyCellProps.col.field]"
             />
           </q-td>
         </template>
@@ -1407,7 +1407,7 @@ defineExpose({
             <MDtUrlColumn
               v-if="urlProps.row[urlProps.col.field] !== undefined && urlProps.row[urlProps.col.field] !== null"
               :copy="computedCopyColumns.includes(urlProps.col.name)"
-              :copy-value="urlProps.col.copyValue && typeof urlProps.col.copyValue === 'function' ? urlProps.col.copyValue(urlProps.row) : urlProps.row[urlProps.col.copyValue || urlProps.col.field]"
+              :copy-value="urlProps.col.copyValue && typeof urlProps.col.copyValue === 'function' ? () => urlProps.col.copyValue(urlProps.row) : urlProps.row[urlProps.col.copyValue || urlProps.col.field]"
               :value="urlProps.row[urlProps.col.field]"
               @click="openWindow(urlProps.row[urlProps.col.field])"
             />
@@ -1451,7 +1451,7 @@ defineExpose({
               v-if="sarCellProps.row[sarCellProps.col.field] !== undefined && sarCellProps.row[sarCellProps.col.field] !== null"
               :align="sarCellProps.col.align as any"
               :copy="computedCopyColumns.includes(sarCellProps.col.name)"
-              :copy-value="sarCellProps.col.copyValue && typeof sarCellProps.col.copyValue === 'function' ? sarCellProps.col.copyValue(sarCellProps.row) : sarCellProps.row[sarCellProps.col.copyValue || sarCellProps.col.field]"
+              :copy-value="sarCellProps.col.copyValue && typeof sarCellProps.col.copyValue === 'function' ? () => sarCellProps.col.copyValue(sarCellProps.row) : sarCellProps.row[sarCellProps.col.copyValue || sarCellProps.col.field]"
               :string="sarCellProps.col.field.includes('_to_string') || sarCellProps.col.field.includes('ToString')"
               :value="sarCellProps.row[sarCellProps.col.field]"
             />

package/src/components/datatable/MDtCopyColumn.vue

@@ -30,6 +30,22 @@ const map = {
   right: 'end'
 }
 const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
+const getLabel = computed(() => {
+  if (typeof props.label === 'function') return props.label()
+  return props.label
+})
+const getValue = computed(() => {
+  if (typeof props.value === 'function') return props.value()
+  return props.value
+})
+const onCopy = () => {
+  if (getValue.value) {
+    const v = typeof getValue.value === 'function' ? getValue.value() : getValue.value
+    if (v) {
+      copyText(v)
+    }
+  }
+}
 defineOptions({
   name: 'MDtCopyColumn',
   inheritAttrs: !1
@@ -38,7 +54,7 @@ defineOptions({
 
 <template>
   <MRow
-    v-if="!!value"
+    v-if="!!getValue"
     :class="`items-center justify-${getAlign}`"
     v-bind="$attrs"
   >
@@ -47,23 +63,23 @@ defineOptions({
       class="ellipsis"
     >
       <q-btn
-        v-if="!!value"
+        v-if="!!getValue"
         dense
         flat
         icon="ion-copy"
         round
         size="sm"
-        @click="() => !!value ? copyText(value) : null"
+        @click="onCopy()"
       />
       <MDtSarColumn
         v-if="!!sar"
-        :value="label || ''"
+        :value="getLabel || ''"
       />
       <template v-else>
-        {{ label || '' }}
+        {{ getLabel || '' }}
       </template>
       <q-tooltip>
-        {{ tooltip || value }}
+        {{ tooltip || getValue }}
       </q-tooltip>
     </div>
     <slot />

package/src/components/datatable/MDtSarColumn.vue

@@ -32,6 +32,14 @@ const map = {
   right: 'end'
 }
 const getAlign = computed(() => props.align ? map[props.align] || undefined : undefined)
+const onCopy = () => {
+  if (inputValue.value) {
+    const v = typeof inputValue.value === 'function' ? inputValue.value() : inputValue.value
+    if (v) {
+      copyText(v)
+    }
+  }
+}
 defineOptions({
   name: 'MDtSarColumn',
   inheritAttrs: !1
@@ -51,7 +59,7 @@ defineOptions({
       icon="ion-copy"
       round
       size="sm"
-      @click="() => copyText(inputValue)"
+      @click="onCopy()"
     >
       <q-tooltip>
         {{ __('labels.copy') }}