@mythpe/quasar-ui-qui 0.2.54 → 0.2.55

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -17,6 +17,11 @@ import { computed, onMounted, ref, toValue, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import { useDtHelpers, useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
+import MDtImageColumn from './MDtImageColumn.vue'
+import MDtUrlColumn from './MDtUrlColumn.vue'
+import MDtColorColumn from './MDtColorColumn.vue'
+import MDtSarColumn from './MDtSarColumn.vue'
+import MDtCopyColumn from './MDtCopyColumn.vue'
 
 type Props = {
   controlKey?: MDatatableProps['controlKey'];
@@ -80,6 +85,7 @@ type Props = {
   urlColumns?: MDatatableProps['urlColumns'];
   colorColumns?: MDatatableProps['colorColumns'];
   sarColumns?: MDatatableProps['sarColumns'];
+  copyColumns?: MDatatableProps['copyColumns'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -136,14 +142,15 @@ const props = withDefaults(defineProps<Props>(), {
   bordered: undefined,
   flat: undefined,
   fixed: undefined,
-  imageColumns: () => ([]),
-  imageMode: () => 'image',
-  imageSize: () => '35px',
+  imageColumns: undefined,
+  imageMode: 'image',
+  imageSize: '35px',
   noBackBtn: !1,
   backIcon: undefined,
-  urlColumns: () => ([]),
-  colorColumns: () => ([]),
-  sarColumns: () => ([])
+  urlColumns: undefined,
+  colorColumns: undefined,
+  sarColumns: undefined,
+  copyColumns: undefined
 })
 
 interface Emits {
@@ -161,8 +168,7 @@ const {
   props: pluginOptions,
   theme,
   isSmall,
-  openWindow,
-  copyText
+  openWindow
 } = useMyth()
 
 const $q = useQuasar()
@@ -372,9 +378,11 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   }
 }
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
-const urlColumnsProp = computed<string[]>(() => toValue(props.urlColumns) || [])
-const colorColumnsProp = computed<string[]>(() => toValue(props.colorColumns) || [])
-const sarColumnsProp = computed<string[]>(() => toValue(props.sarColumns) || [])
+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 || []))
 onMounted(() => refresh())
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
@@ -564,82 +572,28 @@ defineExpose({
                         :auto="col.name !== controlKey"
                         :class="`overflow-hidden ${col.name === controlKey ? 'text-right col-12 q-pb-xs' : ''}`"
                       >
-                        <template v-if="imageColumns?.indexOf(col.name) !== -1">
-                          <template v-if="getProp('imageMode') === 'icon'">
-                            <q-btn
-                              v-if="!!col.value"
-                              dense
-                              fab-mini
-                              flat
-                              icon="ion-ios-eye"
-                              @click="openImageDialog(col.value)"
-                            >
-                              <q-tooltip class="m-dt-btn-tooltip">
-                                {{ __('myth.titles.show') }}
-                              </q-tooltip>
-                            </q-btn>
-                          </template>
-                          <template v-else-if="getProp('imageMode') === 'image'">
-                            <q-avatar :size="getProp('imageSize')">
-                              <q-img
-                                v-if="col.value"
-                                :src="col.value"
-                                :style="`width: ${getProp('imageSize')}; height: ${getProp('imageSize')}`"
-                                class="cursor-pointer"
-                                fit="contain"
-                                no-spinner
-                                @click="openImageDialog(col.value)"
-                              >
-                                <q-tooltip class="m-dt-btn-tooltip">
-                                  {{ __('myth.titles.show') }}
-                                </q-tooltip>
-                              </q-img>
-                              <q-icon
-                                v-else
-                                :size="getProp('imageSize')"
-                                name="ion-ios-aperture"
-                              />
-                            </q-avatar>
-                          </template>
+                        <template v-if="imageColumnsProp.indexOf(col.name) !== -1">
+                          <MDtImageColumn
+                            :image-mode="getProp('imageMode')"
+                            :image-size="getProp('imageSize')"
+                            :value="col.value"
+                            @click="openImageDialog(col.value)"
+                          />
                         </template>
                         <template v-else-if="urlColumnsProp.indexOf(col.name) !== -1">
-                          <MBtn
-                            v-if="!!col.value"
-                            dense
-                            fab-mini
-                            flat
-                            icon="ion-ios-open"
+                          <MDtUrlColumn
+                            :value="col.value"
                             @click="openWindow(col.value)"
-                          >
-                            <q-tooltip>
-                              {{ col.value }}
-                            </q-tooltip>
-                          </MBtn>
+                          />
                         </template>
                         <template v-else-if="colorColumnsProp.indexOf(col.name) !== -1">
-                          <div
-                            v-if="!!col.value"
-                            class="row q-gutter-lg justify-center items-center"
-                          >
-                            <div>
-                              {{ col.value }}
-                            </div>
-                            <div
-                              :style="`width: 20px; height: 20px; background-color: ${col.value};`"
-                              class="m-input__color-preview cursor-pointer"
-                              @click="copyText(col.value)"
-                            >
-                              <q-tooltip>{{ __('labels.copy') }}</q-tooltip>
-                            </div>
-                          </div>
+                          <MDtColorColumn :color="col.value" />
                         </template>
                         <template v-else-if="sarColumnsProp.indexOf(col.name) !== -1">
-                          <div
-                            v-if="!!col.value"
-                            class="row q-gutter-lg justify-center items-center"
-                          >
-                            <MSarString :text="col.value||'0.00'" />
-                          </div>
+                          <MDtSarColumn :value="col.value" />
+                        </template>
+                        <template v-else-if="copyColumnsProp.indexOf(col.name) !== -1">
+                          <MDtCopyColumn :value="col.value" />
                         </template>
                         <template v-else-if="col.name === controlKey">
                           <MRow
@@ -1065,7 +1019,7 @@ defineExpose({
                   >
                     <q-chip
                       clickable
-                      color="primary"
+                      color="body"
                       icon-remove="clear"
                       outline
                       removable
@@ -1170,48 +1124,17 @@ defineExpose({
           </slot>
         </template>
         <template
-          v-for="c in imageColumns"
+          v-for="c in imageColumnsProp"
           :key="`a-c-${c}`"
           #[`body-cell-${c}`]="colProps"
         >
           <q-td :props="colProps">
-            <template v-if="getProp('imageMode') === 'icon'">
-              <q-btn
-                v-if="colProps.row[c]"
-                :src="colProps.row[c]"
-                dense
-                fab-mini
-                flat
-                icon="ion-ios-eye"
-                @click="openImageDialog(colProps.row[c])"
-              >
-                <q-tooltip class="m-dt-btn-tooltip">
-                  {{ __('myth.titles.show') }}
-                </q-tooltip>
-              </q-btn>
-            </template>
-            <template v-else-if="getProp('imageMode') === 'image'">
-              <q-avatar :size="getProp('imageSize')">
-                <q-img
-                  v-if="colProps.row[c]"
-                  :src="colProps.row[c]"
-                  :style="`width: ${getProp('imageSize')}; height: ${getProp('imageSize')}`"
-                  class="cursor-pointer"
-                  fit="contain"
-                  no-spinner
-                  @click="openImageDialog(colProps.row[c])"
-                >
-                  <q-tooltip class="m-dt-btn-tooltip">
-                    {{ __('myth.titles.show') }}
-                  </q-tooltip>
-                </q-img>
-                <q-icon
-                  v-else
-                  :size="getProp('imageSize')"
-                  name="ion-ios-aperture"
-                />
-              </q-avatar>
-            </template>
+            <MDtImageColumn
+              :image-mode="getProp('imageMode')"
+              :image-size="getProp('imageSize')"
+              :value="colProps.row[c]"
+              @click="openImageDialog(colProps.row[c])"
+            />
           </q-td>
         </template>
         <template
@@ -1220,19 +1143,10 @@ defineExpose({
           #[`body-cell-${u}`]="urlProps"
         >
           <q-td :props="urlProps">
-            <template v-if="!!urlProps.row[u]">
-              <MBtn
-                dense
-                fab-mini
-                flat
-                icon="ion-ios-open"
-                @click="openWindow(urlProps.row[u])"
-              >
-                <q-tooltip>
-                  {{ urlProps.row[u] }}
-                </q-tooltip>
-              </MBtn>
-            </template>
+            <MDtUrlColumn
+              :value="urlProps.row[u]"
+              @click="openWindow(urlProps.row[u])"
+            />
           </q-td>
         </template>
         <template
@@ -1241,21 +1155,7 @@ defineExpose({
           #[`body-cell-${cc}`]="ccProps"
         >
           <q-td :props="ccProps">
-            <div
-              v-if="!!ccProps.row[cc]"
-              class="row q-gutter-lg justify-center items-center"
-            >
-              <div>
-                {{ ccProps.row[cc] }}
-              </div>
-              <div
-                :style="`width: 20px; height: 20px; background-color: ${ccProps.row[cc]};`"
-                class="m-input__color-preview cursor-pointer"
-                @click="copyText(ccProps.row[cc])"
-              >
-                <q-tooltip>{{ __('labels.copy') }}</q-tooltip>
-              </div>
-            </div>
+            <MDtColorColumn :color="ccProps.row[cc]" />
           </q-td>
         </template>
         <template
@@ -1264,7 +1164,16 @@ defineExpose({
           #[`body-cell-${sr}`]="srProps"
         >
           <q-td :props="srProps">
-            <MSarString :text="srProps.row[sr]||'0.00'" />
+            <MDtSarColumn :value="srProps.row[sr]" />
+          </q-td>
+        </template>
+        <template
+          v-for="cp in copyColumnsProp"
+          :key="`a-cp-${cp}`"
+          #[`body-cell-${cp}`]="copyColumnProps"
+        >
+          <q-td :props="copyColumnProps">
+            <MDtCopyColumn :value="copyColumnProps.row[cp]" />
           </q-td>
         </template>
 

package/src/components/datatable/MDtColorColumn.vue

@@ -0,0 +1,46 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+
+import { useMyth } from '../../composable'
+import type { MDtColorColumnProps } from '../../types'
+
+interface Props {
+  value?: MDtColorColumnProps['value'];
+  size?: MDtColorColumnProps['size'];
+}
+
+defineProps<Props>()
+const { __, copyText } = useMyth()
+defineOptions({
+  name: 'MDtColorColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="row q-gutter-lg justify-center items-center"
+    v-bind="$attrs"
+  >
+    <div>
+      {{ value || '' }}
+    </div>
+    <div
+      :class="`m-input__color-preview ${value ? 'cursor-pointer' : ''}`"
+      :style="`width: ${size||20}px; height: ${size||20}px; ${value ? `background-color: ${value};` : ''}`"
+      @click="() => !!value ? copyText(value) : null"
+    >
+      <q-tooltip v-if="!!value">
+        {{ __('labels.copy') }}
+      </q-tooltip>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/datatable/MDtCopyColumn.vue

@@ -0,0 +1,55 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+
+import { useMyth } from '../../composable'
+import type { MDtCopyColumnProps } from '../../types'
+
+interface Props {
+  value?: MDtCopyColumnProps['value'];
+  width?: MDtCopyColumnProps['width'];
+}
+
+defineProps<Props>()
+const { __, copyText } = useMyth()
+defineOptions({
+  name: 'MDtCopyColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="row q-gutter-md items-center"
+    v-bind="$attrs"
+  >
+    <div
+      :style="`max-width: ${width || 150}px;`"
+      class="ellipsis"
+    >
+      {{ value || '' }}
+      <q-tooltip>
+        {{ __('labels.copy') }}
+      </q-tooltip>
+    </div>
+    <q-btn
+      dense
+      flat
+      icon="ion-copy"
+      round
+      size="sm"
+      @click="() => !!value ? copyText(value) : null"
+    >
+      <q-tooltip>
+        {{ __('labels.copy') }}
+      </q-tooltip>
+    </q-btn>
+    <slot />
+  </div>
+</template>

package/src/components/datatable/MDtImageColumn.vue

@@ -0,0 +1,79 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+import type { MDtImageColumnProps } from '../../types'
+import { useMyth } from '../../composable'
+import { computed } from 'vue'
+
+interface Props {
+  imageMode?: MDtImageColumnProps['imageMode'];
+  imageSize?: MDtImageColumnProps['imageSize'];
+  value: MDtImageColumnProps['value'];
+}
+
+const props = defineProps<Props>()
+const getMode = computed(() => props.imageMode || 'image')
+type Emits = {
+  (e: 'click', evt?: Event): void;
+}
+const emit = defineEmits<Emits>()
+const { __ } = useMyth()
+defineOptions({
+  name: 'MDtImageColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <template v-if="getMode === 'icon'">
+    <q-btn
+      v-if="!!value"
+      dense
+      fab-mini
+      flat
+      icon="ion-ios-eye"
+      v-bind="$attrs"
+      @click="emit('click',$event)"
+    >
+      <q-tooltip class="m-dt-btn-tooltip">
+        {{ __('myth.titles.show') }}
+      </q-tooltip>
+    </q-btn>
+  </template>
+  <template v-else-if="getMode === 'image'">
+    <q-avatar
+      :size="imageSize"
+      v-bind="$attrs"
+    >
+      <q-img
+        v-if="!!value"
+        :src="value"
+        :style="`width: ${imageSize}; height: ${imageSize}`"
+        class="cursor-pointer"
+        fit="contain"
+        no-spinner
+        v-bind="$attrs"
+        @click="emit('click',$event)"
+      >
+        <q-tooltip class="m-dt-btn-tooltip">
+          {{ __('myth.titles.show') }}
+        </q-tooltip>
+      </q-img>
+      <q-icon
+        v-else
+        :size="imageSize"
+        name="ion-ios-aperture"
+      />
+    </q-avatar>
+  </template>
+</template>
+
+<style lang="sass" scoped>
+
+</style>

package/src/components/datatable/MDtSarColumn.vue

@@ -0,0 +1,32 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+
+import type { MDtSarColumnProps } from '../../types'
+
+interface Props {
+  value?: MDtSarColumnProps['value'];
+}
+
+defineProps<Props>()
+defineOptions({
+  name: 'MDtSarColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="row q-gutter-lg justify-center items-center"
+    v-bind="$attrs"
+  >
+    <MSarString :text="string || '0.00'" />
+    <slot />
+  </div>
+</template>

package/src/components/datatable/MDtUrlColumn.vue

@@ -0,0 +1,43 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+
+import type { MDtUrlColumnProps } from '../../types'
+
+interface Props {
+  value?: MDtUrlColumnProps['value'];
+}
+
+defineProps<Props>()
+type Emits = {
+  (e: 'click', evt?: Event): void;
+}
+const emit = defineEmits<Emits>()
+defineOptions({
+  name: 'MDtUrlColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MBtn
+    v-if="!!value"
+    dense
+    fab-mini
+    flat
+    icon="ion-ios-open"
+    v-bind="$attrs"
+    @click="emit('click',$event)"
+  >
+    <slot />
+    <q-tooltip>
+      {{ value }}
+    </q-tooltip>
+  </MBtn>
+</template>

package/src/components/datatable/index.ts

@@ -1,8 +1,21 @@
 import MDatatable from './MDatatable.vue'
 import MDtAvatar from './MDtAvatar.vue'
 import MDtBtn from './MDtBtn.vue'
+import MDtColorColumn from './MDtColorColumn.vue'
 import MDtContextmenuItems from './MDtContextmenuItems.vue'
+import MDtImageColumn from './MDtImageColumn.vue'
+import MDtSarColumn from './MDtSarColumn.vue'
+import MDtUrlColumn from './MDtUrlColumn.vue'
 
-export { MDatatable, MDtAvatar, MDtBtn, MDtContextmenuItems }
+export {
+  MDatatable,
+  MDtAvatar,
+  MDtBtn,
+  MDtColorColumn,
+  MDtContextmenuItems,
+  MDtImageColumn,
+  MDtSarColumn,
+  MDtUrlColumn
+}
 
 export default {}

package/src/plugin/defineAsyncComponents.ts

@@ -55,7 +55,12 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MDatatable', defineAsyncComponent(() => import('../components/datatable/MDatatable.vue')))
   app.component('MDtAvatar', defineAsyncComponent(() => import('../components/datatable/MDtAvatar.vue')))
   app.component('MDtBtn', defineAsyncComponent(() => import('../components/datatable/MDtBtn.vue')))
+  app.component('MDtColorColumn', defineAsyncComponent(() => import('../components/datatable/MDtColorColumn.vue')))
   app.component('MDtContextmenuItems', defineAsyncComponent(() => import('../components/datatable/MDtContextmenuItems.vue')))
+  app.component('MDtCopyColumn', defineAsyncComponent(() => import('../components/datatable/MDtCopyColumn.vue')))
+  app.component('MDtImageColumn', defineAsyncComponent(() => import('../components/datatable/MDtImageColumn.vue')))
+  app.component('MDtSarColumn', defineAsyncComponent(() => import('../components/datatable/MDtSarColumn.vue')))
+  app.component('MDtUrlColumn', defineAsyncComponent(() => import('../components/datatable/MDtUrlColumn.vue')))
 
   // Utils.
   app.component('MSarIcon', defineAsyncComponent(() => import('../components/sar/MSarIcon.vue')))

package/src/types/components.d.ts

@@ -8,7 +8,26 @@
 
 import type { GlobalComponentConstructor } from 'quasar'
 import type { ApiInterface } from './api-helpers'
-import type { MDatatableProps, MDatatableSlots, MDtAvatarProps, MDtAvatarSlots, MDtBtnProps, MDtBtnSlots, MDtContextmenuItemsProps, MDtContextmenuItemsSlots } from './m-datatable'
+import type {
+  MDatatableProps,
+  MDatatableSlots,
+  MDtAvatarProps,
+  MDtAvatarSlots,
+  MDtBtnProps,
+  MDtBtnSlots,
+  MDtColorColumnProps,
+  MDtColorColumnSlots,
+  MDtContextmenuItemsProps,
+  MDtContextmenuItemsSlots,
+  MDtCopyColumnProps,
+  MDtCopyColumnSlots,
+  MDtImageColumnProps,
+  MDtImageColumnSlots,
+  MDtSarColumnProps,
+  MDtSarColumnSlots,
+  MDtUrlColumnProps,
+  MDtUrlColumnSlots
+} from './m-datatable'
 import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
 import type { MTransitionGroupProps, MTransitionProps, MTransitionsSlots } from './api/MTransition'
 import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
@@ -103,7 +122,12 @@ declare module '@vue/runtime-core' {
     MDatatable: GlobalComponentConstructor<MDatatableProps, MDatatableSlots>;
     MDtAvatar: GlobalComponentConstructor<MDtAvatarProps, MDtAvatarSlots>;
     MDtBtn: GlobalComponentConstructor<MDtBtnProps, MDtBtnSlots>;
+    MDtColorColumn: GlobalComponentConstructor<MDtColorColumnProps, MDtColorColumnSlots>;
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
+    MDtCopyColumn: GlobalComponentConstructor<MDtCopyColumnProps, MDtCopyColumnSlots>;
+    MDtImageColumn: GlobalComponentConstructor<MDtImageColumnProps, MDtImageColumnSlots>;
+    MDtSarColumn: GlobalComponentConstructor<MDtSarColumnProps, MDtSarColumnSlots>;
+    MDtUrlColumn: GlobalComponentConstructor<MDtUrlColumnProps, MDtUrlColumnSlots>;
 
     // Utils.
     MSarIcon: GlobalComponentConstructor<MSarIconProps, MSarIconSlots>;

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

@@ -182,24 +182,22 @@ type MDatatableMainScope = {
   form: MDatatableFormScope,
 }
 
-export interface MDatatableSlots extends Omit<QTableSlots, `body-cell-${string}` | 'top'> {
-  tools: ((scope: { dt: MDatatableScope, }) => VNode[]);
+type MDatatableSlotFn<T = any> = (scope: T) => VNode[];
 
-  selection: ((scope: { dt: MDatatableScope, }) => VNode[]);
+export interface MDatatableSlots extends Omit<QTableSlots, 'top'> {
+  tools: MDatatableSlotFn<{ dt: MDatatableScope }>;
+  selection: MDatatableSlotFn<{ dt: MDatatableScope }>;
+  filter: MDatatableSlotFn<{ filter: MDatatableFilterForm } & MDatatableMainScope>;
+  show: MDatatableSlotFn<MDatatableMainScope>;
+  form: MDatatableSlotFn<MDatatableMainScope>;
+  'form-actions': MDatatableSlotFn<MDatatableMainScope>;
+  title: MDatatableSlotFn<MDatatableMainScope>;
+  'top-search': MDatatableSlotFn<MDatatableMainScope>;
+  'bottom-search': MDatatableSlotFn<MDatatableMainScope>;
 
-  filter: ((scope: { filter: MDatatableFilterForm } & MDatatableMainScope) => VNode[]);
-
-  show: ((scope: MDatatableMainScope) => VNode[]);
-
-  form: ((scope: MDatatableMainScope) => VNode[]);
-
-  'form-actions': ((scope: MDatatableMainScope) => VNode[]);
-
-  title: ((scope: MDatatableMainScope) => VNode[]);
-  'top-search': ((scope: MDatatableMainScope) => VNode[]);
-  'bottom-search': ((scope: MDatatableMainScope) => VNode[]);
-
-  [K: `body-cell-${string}`]: ((scope: Parameters<QTableSlots['body-cell']>[0] & { dt: MDatatableScope }) => VNode[]);
+  [key: `body-cell-${string}`]: MDatatableSlotFn<
+    Parameters<QTableSlots['body-cell']>[0] & { dt: MDatatableScope }
+  >;
 }
 
 export type MDtServiceNameCallbackProp = (() => Record<string, (() => Promise<AxiosResponse>)>)
@@ -310,6 +308,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Names of SAR columns in the table.
    */
   sarColumns?: MaybeRefOrGetter<string[]>;
+  /**
+   * Names of a text want to show copy btn
+   */
+  copyColumns?: MaybeRefOrGetter<string[]>;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {
@@ -338,3 +340,62 @@ export interface MDtContextmenuItemsSlots {
    */
   default: () => VNode[];
 }
+
+export interface MDtColorColumnProps {
+  value?: any;
+  size?: string | number;
+}
+
+export interface MDtColorColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtCopyColumnProps {
+  value?: any;
+  width?: string | number;
+}
+
+export interface MDtCopyColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtImageColumnProps {
+  imageMode?: MDatatableProps['imageMode'];
+  imageSize?: MDatatableProps['imageSize'];
+  value: any;
+}
+
+export interface MDtImageColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtSarColumnProps {
+  value?: any;
+}
+
+export interface MDtSarColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtUrlColumnProps {
+  value?: any;
+}
+
+export interface MDtUrlColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}