@mythpe/quasar-ui-qui 0.2.53 → 0.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.53",
+  "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()
@@ -355,7 +361,7 @@ const onSuccess: SubmissionHandler = async (form) => {
   } catch (e: any) {
     const { _message, _errors } = e || {}
     dialogErrors.value = _errors || {}
-    await scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
+    await scrollToElementFromErrors(_errors, undefined, '.m-datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
       useFormContext.setErrors(_errors)
@@ -368,13 +374,15 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   const keys: (keyof typeof errors)[] = Object.keys(errors)
   if (keys[0]) {
     const message = errors[keys[0]] as string || __('messages.the_given_data_was_invalid')
-    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, '.m--datatable__dialog-form-container')
+    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, '.m-datatable__dialog-form-container')
   }
 }
 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) {
@@ -435,10 +443,10 @@ defineExpose({
 <template>
   <div
     :class="{
-      'm--datatable-component': !0,
-      'm--datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
-      'm--datatable-component__too_small': $q.screen.height < 900,
-      'm--datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
+      'm-datatable-component': !0,
+      'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
+      'm-datatable-component__too_small': $q.screen.height < 900,
+      'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
     }"
   >
     <!-- Context Menu -->
@@ -484,7 +492,7 @@ defineExpose({
         v-model:fullscreen="fullscreen"
         v-model:pagination="pagination"
         v-model:selected="selected"
-        :class="`m--datatable ` + ($q.screen.lt.md ? 'm--datatable-grid' : '')"
+        :class="`m-datatable ` + ($q.screen.lt.md ? 'm-datatable-grid' : '')"
         :columns="getHeaders"
         :filter="search"
         :grid="isGrid"
@@ -494,8 +502,8 @@ defineExpose({
         :rows-per-page-options="getRowsPerPageOptions"
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
         :visible-columns="visibleHeaders"
-        card-container-class="m--datatable-container"
-        table-class="m--datatable-container"
+        card-container-class="m-datatable-container"
+        table-class="m-datatable-container"
         v-bind="{
           virtualScroll: !0,
           wrapCells:!0,
@@ -525,7 +533,7 @@ defineExpose({
                 :class="iTempProps.selected ? ($q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2') : ''"
               >
                 <template v-if="getShowSelection || iTempProps.colsMap[controlKey ?? 'control'] !== undefined">
-                  <div class="m--datatable-card-control-header">
+                  <div class="m-datatable-card-control-header">
                     <MRow class="items-center justify-between">
                       <div class="q-px-md">
                         <q-checkbox
@@ -564,86 +572,32 @@ 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
-                            class="m--dt-context_menu_items"
+                            class="m-dt-context_menu_items"
                             gutter
                             space="xs"
                           >
@@ -656,7 +610,7 @@ defineExpose({
                           </MRow>
                         </template>
                         <template v-else>
-                          <div class="m--datatable-card-value">
+                          <div class="m-datatable-card-value">
                             <slot
                               :name="`card-cell-${col.name}`"
                               v-bind="iTempProps"
@@ -751,7 +705,7 @@ defineExpose({
                       v-if="!search"
                       name="ion-ios-search"
                     >
-                      <q-tooltip class="m--dt-btn-tooltip">
+                      <q-tooltip class="m-dt-btn-tooltip">
                         {{ __('myth.datatable.searchInput') }}
                       </q-tooltip>
                     </q-icon>
@@ -761,7 +715,7 @@ defineExpose({
                       name="ion-ios-close"
                       @click="search = ''"
                     >
-                      <q-tooltip class="m--dt-btn-tooltip">
+                      <q-tooltip class="m-dt-btn-tooltip">
                         {{ __('myth.datatable.searchInputClear') }}
                       </q-tooltip>
                     </q-icon>
@@ -845,7 +799,7 @@ defineExpose({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
                   @click="exportData('pdf')"
                 >
-                  <q-tooltip class="m--dt-btn-tooltip">
+                  <q-tooltip class="m-dt-btn-tooltip">
                     {{ __('myth.titles.exportPdf') }}
                   </q-tooltip>
                 </MDtBtn>
@@ -858,7 +812,7 @@ defineExpose({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
                   @click="exportData('excel')"
                 >
-                  <q-tooltip class="m--dt-btn-tooltip">
+                  <q-tooltip class="m-dt-btn-tooltip">
                     {{ __('myth.titles.exportExcel') }}
                   </q-tooltip>
                 </MDtBtn>
@@ -1065,7 +1019,7 @@ defineExpose({
                   >
                     <q-chip
                       clickable
-                      color="primary"
+                      color="body"
                       icon-remove="clear"
                       outline
                       removable
@@ -1155,7 +1109,7 @@ defineExpose({
               </q-btn-dropdown>
               <MRow
                 v-else
-                class="m--dt-context_menu_items justify-end"
+                class="m-dt-context_menu_items justify-end"
                 gutter
                 space="xs"
               >
@@ -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>
 
@@ -1304,7 +1213,7 @@ defineExpose({
       v-model="showDialogModel"
       v-bind="pluginOptions.dt?.showDialogProps"
     >
-      <q-card class="m--dialog-card">
+      <q-card class="m-dialog-card">
         <q-card-section ref="showTitleRef">
           <q-toolbar>
             <q-toolbar-title>
@@ -1314,7 +1223,7 @@ defineExpose({
                 flat
                 @click="closeShowDialog()"
               >
-                <q-tooltip class="m--dt-btn-tooltip">
+                <q-tooltip class="m-dt-btn-tooltip">
                   {{ __('myth.titles.back') }}
                 </q-tooltip>
               </q-btn>
@@ -1325,7 +1234,7 @@ defineExpose({
         <q-separator />
         <q-card-section
           :style="`height: ${($q.screen.height || 100) - 3 - (($refs.showActionsRef as any)?.$el?.offsetHeight || 60) - (($refs.showTitleRef as any)?.$el?.offsetHeight || 80)}px`"
-          class="scroll m--datatable__dialog-show-container"
+          class="scroll m-datatable__dialog-show-container"
         >
           <slot
             :dt="datatableItemsScope"
@@ -1355,12 +1264,12 @@ defineExpose({
       v-model="formDialogModel"
       v-bind="pluginOptions.dt?.formDialogProps"
     >
-      <div class="m--form__container full-height no-wrap">
+      <div class="m-form__container full-height no-wrap">
         <form
-          class="m--form column full-height justify-between no-wrap"
+          class="m-form column full-height justify-between no-wrap"
           @submit="defaultSubmitItem"
         >
-          <q-card class="m--dialog-card">
+          <q-card class="m-dialog-card">
             <q-card-section ref="formTitle">
               <q-toolbar :class="{'q-pa-none': $q.screen.lt.md}">
                 <slot
@@ -1388,7 +1297,7 @@ defineExpose({
                         text-color="none"
                         @click="closeFormDialog"
                       >
-                        <q-tooltip class="m--dt-btn-tooltip">
+                        <q-tooltip class="m-dt-btn-tooltip">
                           {{ __('myth.titles.close') }}
                         </q-tooltip>
                       </MBtn>
@@ -1409,7 +1318,7 @@ defineExpose({
             <q-card-section
               ref="formDialogCartSection"
               :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
-              class="scroll m--datatable__dialog-form-container"
+              class="scroll m-datatable__dialog-form-container"
             >
               <MContainer
                 v-if="loading && !dialogItem"
@@ -1445,7 +1354,7 @@ defineExpose({
             <q-card-actions
               ref="formActions"
               align="between"
-              class="m--datatable-form-actions print-hide"
+              class="m-datatable-form-actions print-hide"
             >
               <slot
                 :dt="datatableItemsScope"
@@ -1541,7 +1450,7 @@ defineExpose({
       >
         <MTooltip
           anchor="top middle"
-          class="m--datatable-fab-tooltip"
+          class="m-datatable-fab-tooltip"
           self="bottom start"
         >
           <span class="text-caption">{{ getFormTitle }}</span>

package/src/components/datatable/MDtBtn.vue

@@ -154,7 +154,7 @@ defineOptions({
   >
     <q-tooltip
       v-if="hasTooltip"
-      class="m--dt-btn-tooltip"
+      class="m-dt-btn-tooltip"
     >
       {{ getTooltip }}
     </q-tooltip>

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>