@mythpe/quasar-ui-qui 0.2.83 → 0.2.84

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -88,6 +88,7 @@ type Props = {
   colorColumns?: MDatatableProps['colorColumns'];
   sarColumns?: MDatatableProps['sarColumns'];
   copyColumns?: MDatatableProps['copyColumns'];
+  descColumns?: MDatatableProps['descColumns'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -154,7 +155,8 @@ const props = withDefaults(defineProps<Props>(), {
   urlColumns: undefined,
   colorColumns: undefined,
   sarColumns: undefined,
-  copyColumns: undefined
+  copyColumns: undefined,
+  descColumns: undefined
 })
 
 interface Emits {
@@ -403,6 +405,7 @@ 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 || []))
 onMounted(() => refresh())
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
@@ -627,6 +630,9 @@ defineExpose({
                             :value="col.value"
                           />
                         </template>
+                        <template v-else-if="descColumnsProp.indexOf(col.name) !== -1">
+                          <MDtDescColumn :value="col.value" />
+                        </template>
                         <template v-else-if="col.name === controlKey">
                           <MRow
                             class="m-dt-context_menu_items"
@@ -1301,6 +1307,18 @@ defineExpose({
           </q-td>
         </template>
 
+        <template
+          v-for="cdd in descColumnsProp"
+          :key="`a-cdd-body-cell-${cdd}`"
+          #[`body-cell-${cdd}`]="descColumnProps"
+        >
+          <q-td :props="descColumnProps">
+            <MDtDescColumn
+              :value="descColumnProps.row[descColumnProps.col.field]"
+            />
+          </q-td>
+        </template>
+
         <template
           v-for="slotName in getSlots"
           :key="slotName"

package/src/components/datatable/MDtCopyColumn.vue

@@ -34,24 +34,20 @@ defineOptions({
       :style="`max-width: ${width ?? 150}px;`"
       class="ellipsis"
     >
+      <q-btn
+        v-if="!!value"
+        dense
+        flat
+        icon="ion-copy"
+        round
+        size="sm"
+        @click="() => !!value ? copyText(value) : null"
+      />
       {{ label ?? '' }}
       <q-tooltip>
         {{ value }}
       </q-tooltip>
     </div>
-    <q-btn
-      v-if="!!value"
-      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/MDtDescColumn.vue

@@ -0,0 +1,53 @@
+<!--
+  - 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 { MDtDescColumnProps } from '../../types'
+import { useMyth } from '../../composable'
+
+interface Props {
+  value?: MDtDescColumnProps['value'];
+}
+
+defineProps<Props>()
+
+const { __, copyText } = useMyth()
+
+defineOptions({
+  name: 'MDtDescColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="row q-gutter-md items-center justify-center"
+    v-bind="$attrs"
+  >
+    <div class="m-dt__max_desc">
+      <q-btn
+        v-if="!!value"
+        dense
+        flat
+        icon="ion-copy"
+        round
+        size="sm"
+        @click="() => !!value ? copyText(value) : null"
+      />
+      {{ value ?? '' }}
+      <q-tooltip>
+        <div
+          class="text-body2"
+          v-text="value"
+        />
+      </q-tooltip>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/composable/useMyth.ts

@@ -136,7 +136,6 @@ export const useMyth = () => {
       controlStyle = opts.controlStyle
       delete opts.controlStyle
     }
-
     const result: MDtColumn[] = []
 
     headers.forEach((elm: string | MDtColumn | undefined) => {

package/src/plugin/defineAsyncComponents.ts

@@ -59,6 +59,7 @@ export const defineAsyncComponents = function (app: App) {
   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('MDtDescColumn', defineAsyncComponent(() => import('../components/datatable/MDtDescColumn.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')))

package/src/types/components.d.ts

@@ -21,6 +21,8 @@ import type {
   MDtContextmenuItemsSlots,
   MDtCopyColumnProps,
   MDtCopyColumnSlots,
+  MDtDescColumnProps,
+  MDtDescColumnSlots,
   MDtImageColumnProps,
   MDtImageColumnSlots,
   MDtSarColumnProps,
@@ -127,6 +129,7 @@ declare module '@vue/runtime-core' {
     MDtColorColumn: GlobalComponentConstructor<MDtColorColumnProps, MDtColorColumnSlots>;
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
     MDtCopyColumn: GlobalComponentConstructor<MDtCopyColumnProps, MDtCopyColumnSlots>;
+    MDtDescColumn: GlobalComponentConstructor<MDtDescColumnProps, MDtDescColumnSlots>;
     MDtImageColumn: GlobalComponentConstructor<MDtImageColumnProps, MDtImageColumnSlots>;
     MDtSarColumn: GlobalComponentConstructor<MDtSarColumnProps, MDtSarColumnSlots>;
     MDtUrlColumn: GlobalComponentConstructor<MDtUrlColumnProps, MDtUrlColumnSlots>;

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

@@ -314,6 +314,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Names of a text want to show copy btn
    */
   copyColumns?: MaybeRefOrGetter<string[]>;
+  /**
+   * Names of a text want to show be truncate text
+   */
+  descColumns?: MaybeRefOrGetter<string[]>;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {
@@ -368,6 +372,17 @@ export interface MDtCopyColumnSlots {
   default: () => VNode[];
 }
 
+export interface MDtDescColumnProps {
+  value?: any;
+}
+
+export interface MDtDescColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
 export interface MDtImageColumnProps {
   imageMode?: MDatatableProps['imageMode'];
   imageSize?: MDatatableProps['imageSize'];