@mythpe/quasar-ui-qui 0.3.24 → 0.3.26

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -407,13 +407,13 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   }
 }
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
-const imageColumnsProp = computed<string[]>(() => toValue(props.imageColumns || []))
-const urlColumnsProp = computed<string[]>(() => toValue(props.urlColumns || []))
-const colorColumnsProp = computed<string[]>(() => toValue(props.colorColumns || []))
-const sarColumnsProp = computed<string[]>(() => toValue(props.sarColumns || []))
-const copyColumnsProp = computed<string[]>(() => toValue(props.copyColumns || []))
-const descColumnsProp = computed<string[]>(() => toValue(props.descColumns || []))
-const noWrapBtnProp = computed(() => getProp.value('noWrapBtn'))
+const computedImageColumns = computed<string[]>(() => toValue(props.imageColumns || []))
+const computedUrlColumns = computed<string[]>(() => toValue(props.urlColumns || []))
+const computedColorColumns = computed<string[]>(() => toValue(props.colorColumns || []))
+const computedSarColumns = computed<string[]>(() => toValue(props.sarColumns || []))
+const computedCopyColumns = computed<string[]>(() => toValue(props.copyColumns || []))
+const computedDescColumns = computed<string[]>(() => toValue(props.descColumns || []))
+const computedNoWrapBtn = computed(() => getProp.value('noWrapBtn'))
 const wrapCellsRef = ref<boolean>(!1)
 const onSearchEnter = () => {
   if (loading.value) {
@@ -633,7 +633,7 @@ defineExpose({
                         :auto="col.name !== controlKey"
                         :class="`overflow-hidden ${col.name === controlKey ? 'text-right col-12 q-pb-xs' : ''}`"
                       >
-                        <template v-if="imageColumnsProp.indexOf(col.name) !== -1">
+                        <template v-if="computedImageColumns.indexOf(col.name) !== -1">
                           <MDtImageColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :image-mode="getProp('imageMode')"
@@ -642,33 +642,35 @@ defineExpose({
                             @click="openImageDialog(col.value)"
                           />
                         </template>
-                        <template v-else-if="urlColumnsProp.indexOf(col.name) !== -1">
+                        <template v-else-if="computedUrlColumns.indexOf(col.name) !== -1">
                           <MDtUrlColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :value="col.value"
                             @click="openWindow(col.value)"
                           />
                         </template>
-                        <template v-else-if="colorColumnsProp.indexOf(col.name) !== -1">
+                        <template v-else-if="computedColorColumns.indexOf(col.name) !== -1">
                           <MDtColorColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :value="col.value"
                           />
                         </template>
-                        <template v-else-if="sarColumnsProp.indexOf(col.name) !== -1">
+                        <template v-else-if="computedSarColumns.indexOf(col.name) !== -1">
                           <MDtSarColumn
                             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]"
                             :value="col.value"
                           />
                         </template>
-                        <template v-else-if="copyColumnsProp.indexOf(col.name) !== -1">
+                        <template v-else-if="computedCopyColumns.indexOf(col.name) !== -1">
                           <MDtCopyColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :label="col.value"
-                            :value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : col.value"
+                            :value="col.copyValue && typeof col.copyValue === 'function' ? col.copyValue(iTempProps.row) : iTempProps.row[col.copyValue || col.field]"
                           />
                         </template>
-                        <template v-else-if="descColumnsProp.indexOf(col.name) !== -1">
+                        <template v-else-if="computedDescColumns.indexOf(col.name) !== -1">
                           <MDtDescColumn :value="col.value" />
                         </template>
                         <template v-else-if="col.name === controlKey">
@@ -1151,7 +1153,7 @@ defineExpose({
                 </MDtBtn>
                 <!-- Wrap Btn -->
                 <MDtBtn
-                  v-if="!noWrapBtnProp"
+                  v-if="!computedNoWrapBtn"
                   :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
                   flat
                   tooltip="myth.datatable.wrapBtn"
@@ -1317,7 +1319,7 @@ defineExpose({
           </slot>
         </template>
         <template
-          v-for="imageCol in imageColumnsProp"
+          v-for="imageCol in computedImageColumns"
           :key="`a-image-body-cell-${imageCol}`"
           #[`body-cell-${imageCol}`]="imageColProps"
         >
@@ -1332,7 +1334,7 @@ defineExpose({
           </q-td>
         </template>
         <template
-          v-for="u in urlColumnsProp"
+          v-for="u in computedUrlColumns"
           :key="`a-u-body-cell-${u}`"
           #[`body-cell-${u}`]="urlProps"
         >
@@ -1345,7 +1347,7 @@ defineExpose({
           </q-td>
         </template>
         <template
-          v-for="cc in colorColumnsProp"
+          v-for="cc in computedColorColumns"
           :key="`a-cc-body-cell-${cc}`"
           #[`body-cell-${cc}`]="ccProps"
         >
@@ -1357,32 +1359,33 @@ defineExpose({
           </q-td>
         </template>
         <template
-          v-for="sr in sarColumnsProp"
-          :key="`a-sr-body-cell-${sr}`"
-          #[`body-cell-${sr}`]="srProps"
+          v-for="sarCell in computedSarColumns"
+          :key="`sarCell-body-cell-${sarCell}`"
+          #[`body-cell-${sarCell}`]="sarCellProps"
         >
-          <q-td :props="srProps">
+          <q-td :props="sarCellProps">
             <MDtSarColumn
-              v-if="srProps.row[srProps.col.field] !== undefined && srProps.row[srProps.col.field] !== null"
-              :value="srProps.row[srProps.col.field]"
+              v-if="sarCellProps.row[sarCellProps.col.field] !== undefined && sarCellProps.row[sarCellProps.col.field] !== null"
+              :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]"
+              :value="sarCellProps.row[sarCellProps.col.field]"
             />
           </q-td>
         </template>
         <template
-          v-for="cp in copyColumnsProp"
-          :key="`a-cp-body-cell-${cp}`"
-          #[`body-cell-${cp}`]="copyColumnProps"
+          v-for="copyCell in computedCopyColumns.filter(e => !computedSarColumns.includes(e))"
+          :key="`copyCell-body-cell-${copyCell}`"
+          #[`body-cell-${copyCell}`]="copyCellProps"
         >
-          <q-td :props="copyColumnProps">
+          <q-td :props="copyCellProps">
             <MDtCopyColumn
-              v-if="copyColumnProps.row[copyColumnProps.col.field] !== undefined && copyColumnProps.row[copyColumnProps.col.field] !== null"
-              :label="copyColumnProps.row[copyColumnProps.col.field]"
-              :value="copyColumnProps.col.copyValue && typeof copyColumnProps.col.copyValue === 'function' ? copyColumnProps.col.copyValue(copyColumnProps.row) : copyColumnProps.row[copyColumnProps.col.copyValue || copyColumnProps.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>
         <template
-          v-for="cdd in descColumnsProp"
+          v-for="cdd in computedDescColumns"
           :key="`a-cdd-body-cell-${cdd}`"
           #[`body-cell-${cdd}`]="descColumnProps"
         >

package/src/components/datatable/MDtCopyColumn.vue

@@ -10,11 +10,13 @@
 
 import { useMyth } from '../../composable'
 import type { MDtCopyColumnProps } from '../../types'
+import MDtSarColumn from './MDtSarColumn.vue'
 
 interface Props {
   label?: MDtCopyColumnProps['label'];
   value?: MDtCopyColumnProps['value'];
   width?: MDtCopyColumnProps['width'];
+  sar?: MDtCopyColumnProps['sar'];
 }
 
 defineProps<Props>()
@@ -27,6 +29,7 @@ defineOptions({
 
 <template>
   <MRow
+    v-if="!!value"
     class="items-center justify-center"
     v-bind="$attrs"
   >
@@ -43,7 +46,13 @@ defineOptions({
         size="sm"
         @click="() => !!value ? copyText(value) : null"
       />
-      {{ label ?? '' }}
+      <MDtSarColumn
+        v-if="!!sar"
+        :value="label ?? ''"
+      />
+      <template v-else>
+        {{ label ?? '' }}
+      </template>
       <q-tooltip>
         {{ value }}
       </q-tooltip>

package/src/components/datatable/MDtSarColumn.vue

@@ -9,12 +9,20 @@
 <script lang="ts" setup>
 
 import type { MDtSarColumnProps } from '../../types'
+import MSarString from '../../components/sar/MSarString.vue'
+import { useMyth } from '../../composable'
+import { computed } from 'vue'
 
 interface Props {
   value?: MDtSarColumnProps['value'];
+  copyValue?: MDtSarColumnProps['copyValue'];
+  copy?: boolean;
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const { __, copyText } = useMyth()
+const val = computed(() => props.value || '0.00')
+const inputValue = computed(() => (props.copyValue || props.value) || '0.00')
 defineOptions({
   name: 'MDtSarColumn',
   inheritAttrs: !1
@@ -23,10 +31,24 @@ defineOptions({
 
 <template>
   <div
-    class="row q-gutter-lg justify-center items-center"
+    class="row justify-center items-center"
     v-bind="$attrs"
   >
-    <MSarString :text="value || '0.00'" />
+    <q-btn
+      v-if="!!copy && !!inputValue"
+      dense
+      flat
+      icon="ion-copy"
+      round
+      class="q-mr-xs"
+      size="sm"
+      @click="() => copyText(inputValue)"
+    >
+      <q-tooltip>
+        {{ __('labels.copy') }}
+      </q-tooltip>
+    </q-btn>
+    <MSarString :text="val" />
     <slot />
   </div>
 </template>

package/src/components/sar/MSarString.vue

@@ -11,16 +11,14 @@ import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
 import { useQuasar } from 'quasar'
+import type { MSarStringProps } from '../../types'
 
 interface Props {
-  text?: any;
+  text?: MSarStringProps['text'];
   string?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  text: undefined,
-  string: !1
-})
+const props = defineProps<Props>()
 
 const $q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })

package/src/types/m-datatable.d.ts

@@ -381,6 +381,7 @@ export interface MDtCopyColumnProps {
   label?: any;
   value?: any;
   width?: string | number;
+  sar?: boolean;
 }
 
 export interface MDtCopyColumnSlots {
@@ -416,6 +417,8 @@ export interface MDtImageColumnSlots {
 
 export interface MDtSarColumnProps {
   value?: any;
+  copy?: boolean;
+  copyValue?: boolean;
 }
 
 export interface MDtSarColumnSlots {