@mythpe/quasar-ui-qui 0.1.65 → 0.1.66

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -13,7 +13,7 @@
 import type { MDatatableProps } from '../../types'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { onMounted, ref, toValue, watch } from 'vue'
+import { computed, onMounted, ref, toValue, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import lodash from 'lodash'
 import { useDtHelpers, useMyth } from '../../composable'
@@ -78,6 +78,8 @@ type Props = {
   imageSize?: MDatatableProps['imageSize'];
   noBackBtn?: boolean;
   backIcon?: MDatatableProps['backIcon'];
+  urlColumns?: MDatatableProps['urlColumns'];
+  colorColumns?: MDatatableProps['colorColumns'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -138,7 +140,9 @@ const props = withDefaults(defineProps<Props>(), {
   imageMode: () => 'image',
   imageSize: () => '35px',
   noBackBtn: !1,
-  backIcon: undefined
+  backIcon: undefined,
+  urlColumns: () => ([]),
+  colorColumns: () => ([])
 })
 
 interface Emits {
@@ -155,7 +159,9 @@ const {
   scrollToElementFromErrors,
   props: pluginOptions,
   theme,
-  isSmall
+  isSmall,
+  openWindow,
+  copyText
 } = useMyth()
 
 const $q = useQuasar()
@@ -363,7 +369,8 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   }
 }
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
-
+const urlColumnsProp = computed<string[]>(() => toValue(props.urlColumns) || [])
+const colorColumnsProp = computed<string[]>(() => toValue(props.colorColumns) || [])
 onMounted(() => refresh())
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
@@ -499,21 +506,6 @@ defineExpose({
         @update:selected="onUpdateSelectedItems"
         @virtual-scroll="endReach ? onScroll : undefined"
       >
-        <template
-          v-for="slotName in getSlots"
-          :key="slotName"
-          #[slotName]="inputSlot"
-        >
-          <slot
-            :dt="datatableItemsScope"
-            :form="useFormContext"
-            :index="dialogItemIndex"
-            :item="dialogItem"
-            :name="slotName"
-            v-bind="inputSlot || {}"
-          />
-        </template>
-
         <template #item="iTempProps">
           <slot
             :dt="datatableItemsScope"
@@ -599,6 +591,37 @@ defineExpose({
                             </q-img>
                           </template>
                         </template>
+                        <template v-else-if="urlColumnsProp.indexOf(col.name) !== -1">
+                          <MBtn
+                            v-if="!!col.value"
+                            dense
+                            fab-mini
+                            flat
+                            icon="ion-ios-open"
+                            @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>
+                        </template>
                         <template v-else-if="col.name === controlKey">
                           <MRow
                             class="m--dt-context_menu_items"
@@ -631,7 +654,6 @@ defineExpose({
             </div>
           </slot>
         </template>
-
         <template #top="topSlotProps">
           <MCol col="12">
             <MContainer
@@ -1073,7 +1095,6 @@ defineExpose({
             </MContainer>
           </MCol>
         </template>
-
         <template
           v-if="endReach"
           #bottom
@@ -1081,7 +1102,6 @@ defineExpose({
           <q-space />
           <div v-text="__('replace.from_to', { from: pagination.rowsNumber, to: getRows.length })" />
         </template>
-
         <template
           v-if="!noBodyControl"
           #[`body-cell-${controlKey}`]="noBodyProps"
@@ -1171,6 +1191,65 @@ defineExpose({
             </template>
           </q-td>
         </template>
+        <template
+          v-for="u in urlColumnsProp"
+          :key="`a-u-${u}`"
+          #[`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>
+          </q-td>
+        </template>
+        <template
+          v-for="cc in colorColumnsProp"
+          :key="`a-cc-${cc}`"
+          #[`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>
+          </q-td>
+        </template>
+
+        <template
+          v-for="slotName in getSlots"
+          :key="slotName"
+          #[slotName]="inputSlot"
+        >
+          <slot
+            :dt="datatableItemsScope"
+            :form="useFormContext"
+            :index="dialogItemIndex"
+            :item="dialogItem"
+            :name="slotName"
+            v-bind="inputSlot || {}"
+          />
+        </template>
       </q-table>
       <slot
         :dt="datatableItemsScope"

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

@@ -8,7 +8,7 @@
 
 import type { AxiosResponse } from 'axios'
 import type { NamedColor, QAvatarProps, QAvatarSlots, QTableProps, QTableSlots } from 'quasar'
-import type { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { GenericFormValues, MBtnProps, MBtnSlots, MFormSlots } from './components'
 import type { StubSchema } from './api-helpers'
@@ -297,6 +297,14 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * default back icon.
    */
   backIcon?: string;
+  /**
+   * Names of url/link columns in the table.
+   */
+  urlColumns?: MaybeRefOrGetter<string[]>;
+  /**
+   * Names of color pattern columns in the table.
+   */
+  colorColumns?: MaybeRefOrGetter<string[]>;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {