@mythpe/quasar-ui-qui 0.3.30 → 0.3.31

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -639,7 +639,15 @@ defineExpose({
                         :auto="col.name !== controlKey"
                         :class="`overflow-hidden ${col.name === controlKey ? 'text-right col-12 q-pb-xs' : ''}`"
                       >
-                        <template v-if="computedImageColumns.indexOf(col.name) !== -1">
+                        <template v-if="computedCopyColumns.indexOf(col.name) !== -1">
+                          <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]"
+                          />
+                        </template>
+                        <template v-else-if="computedImageColumns.indexOf(col.name) !== -1">
                           <MDtImageColumn
                             v-if="col.value !== undefined && col.value !== null"
                             :image-mode="getProp('imageMode')"
@@ -671,14 +679,6 @@ defineExpose({
                             :value="col.value"
                           />
                         </template>
-                        <template v-else-if="computedCopyColumns.indexOf(col.name) !== -1">
-                          <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]"
-                          />
-                        </template>
                         <template v-else-if="computedDescColumns.indexOf(col.name) !== -1">
                           <MDtDescColumn
                             :align="col.align as any || undefined"
@@ -1345,6 +1345,19 @@ defineExpose({
             </q-td>
           </slot>
         </template>
+        <template
+          v-for="copyCell in computedCopyColumns.filter(e => !computedSarColumns.includes(e))"
+          :key="`copyCell-body-cell-${copyCell}`"
+          #[`body-cell-${copyCell}`]="copyCellProps"
+        >
+          <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]"
+            />
+          </q-td>
+        </template>
         <template
           v-for="imageCol in computedImageColumns"
           :key="`a-image-body-cell-${imageCol}`"
@@ -1368,6 +1381,8 @@ defineExpose({
           <q-td :props="urlProps">
             <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]"
               :value="urlProps.row[urlProps.col.field]"
               @click="openWindow(urlProps.row[urlProps.col.field])"
             />
@@ -1401,19 +1416,6 @@ defineExpose({
             />
           </q-td>
         </template>
-        <template
-          v-for="copyCell in computedCopyColumns.filter(e => !computedSarColumns.includes(e))"
-          :key="`copyCell-body-cell-${copyCell}`"
-          #[`body-cell-${copyCell}`]="copyCellProps"
-        >
-          <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]"
-            />
-          </q-td>
-        </template>
         <template
           v-for="cdd in computedDescColumns"
           :key="`a-cdd-body-cell-${cdd}`"

package/src/components/datatable/MDtCopyColumn.vue

@@ -19,6 +19,7 @@ interface Props {
   width?: MDtCopyColumnProps['width'];
   sar?: MDtCopyColumnProps['sar'];
   align?: MDtCopyColumnProps['align'];
+  tooltip?: MDtCopyColumnProps['align'];
 }
 
 const props = defineProps<Props>()
@@ -56,13 +57,13 @@ defineOptions({
       />
       <MDtSarColumn
         v-if="!!sar"
-        :value="label ?? ''"
+        :value="label || ''"
       />
       <template v-else>
-        {{ label ?? '' }}
+        {{ label || '' }}
       </template>
       <q-tooltip>
-        {{ value }}
+        {{ tooltip || value }}
       </q-tooltip>
     </div>
     <slot />

package/src/components/datatable/MDtSarColumn.vue

@@ -15,8 +15,8 @@ import { computed } from 'vue'
 
 interface Props {
   value?: MDtSarColumnProps['value'];
-  copyValue?: MDtSarColumnProps['copyValue'];
   copy?: boolean;
+  copyValue?: MDtSarColumnProps['copyValue'];
   align?: MDtSarColumnProps['align'];
 }
 

package/src/components/datatable/MDtUrlColumn.vue

@@ -8,12 +8,17 @@
 
 <script lang="ts" setup>
 
-import type { MDtUrlColumnProps } from '../../types'
+import type { MDtSarColumnProps, MDtUrlColumnProps } from '../../types'
+import MDtCopyColumn from './MDtCopyColumn.vue'
+import { useMyth } from '../../composable'
 
 interface Props {
   value?: MDtUrlColumnProps['value'];
+  copy?: boolean;
+  copyValue?: MDtSarColumnProps['copyValue'];
 }
 
+const { __ } = useMyth()
 defineProps<Props>()
 type Emits = {
   (e: 'click', evt?: Event): void;
@@ -26,8 +31,30 @@ defineOptions({
 </script>
 
 <template>
+  <template v-if="copy">
+    <MDtCopyColumn
+      :copy-value="copyValue"
+      :tooltip="__('labels.copy_url')"
+      :value="value"
+    >
+      <q-btn
+        v-if="!!value"
+        dense
+        fab-mini
+        flat
+        icon="ion-ios-open"
+        v-bind="$attrs"
+        @click="emit('click',$event)"
+      >
+        <slot />
+        <q-tooltip>
+          {{ __('labels.open_url') }}
+        </q-tooltip>
+      </q-btn>
+    </MDtCopyColumn>
+  </template>
   <q-btn
-    v-if="!!value"
+    v-else-if="!!value"
     dense
     fab-mini
     flat

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

@@ -389,6 +389,7 @@ export interface MDtCopyColumnProps {
   width?: string | number;
   sar?: boolean;
   align?: 'left' | 'right' | 'center';
+  tooltip?: any;
 }
 
 export interface MDtCopyColumnSlots {
@@ -439,6 +440,8 @@ export interface MDtSarColumnSlots {
 
 export interface MDtUrlColumnProps {
   value?: any;
+  copy?: boolean;
+  copyValue?: any;
 }
 
 export interface MDtUrlColumnSlots {