@mythpe/quasar-ui-qui 0.1.65 → 0.1.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "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/components/form/MAxios.vue

@@ -62,9 +62,21 @@ const prepare = async (fromWatch = !1) => {
   if (!props.service || loading.value) {
     return
   }
-  const method = typeof props.service === 'string'
-    ? (isGuest.value ? api.value.services[props.service]?.staticIndex : api.value.services[props.service]?.index)
-    : props.service
+  const s = props.service
+  let method: any = null
+  if (typeof s === 'string' && s.includes('.')) {
+    const args = s.split('.')
+    do {
+      if (!method) {
+        method = api.value.services[args.shift() as any]
+      }
+      method = method[args.shift() as any]
+    }
+    while (args.length)
+  } else {
+    method = typeof s === 'function' ? s : (isGuest.value ? api.value.services[s].staticIndex : api.value.services[s].index)
+  }
+
   if (!method) {
     throw Error(`No service: ${props.service}`)
   }

package/src/components/form/MOptions.vue

@@ -13,7 +13,7 @@
 
 import { useField } from 'vee-validate'
 import type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
-import { reactive, toValue, useTemplateRef } from 'vue'
+import { onMounted, reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QOptionGroup, type QOptionGroupSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 
@@ -40,6 +40,7 @@ interface P {
   type?: Props['type'];
   keepColor?: Props['keepColor'];
   service?: Props['service'];
+  guest?: boolean;
   fullWidth?: Props['fullWidth'];
   fitWidth?: Props['fullWidth'];
   fieldOptions?: Props['fieldOptions'];
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<P>(), {
   color: () => 'primary',
   type: 'radio',
   keepColor: undefined,
+  guest: !1,
   service: undefined,
   fullWidth: () => !1,
   fitWidth: () => !1,
@@ -91,13 +93,29 @@ const listeners = {
 const input = useTemplateRef<InstanceType<typeof QField> | InstanceType<typeof QOptionGroup>>('input')
 const scopes = reactive(inputScope)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
-const { alertError, __, props: pluginProps } = useMyth()
+const { alertError, __, props: pluginProps, api } = useMyth()
 const fetchData = async () => {
   if (props.service) {
+    const s = props.service
     loading.value = !0
     try {
-      const { _data } = await props.service()
-      options.value = _data as any
+      let method: any = null
+      if (typeof s === 'string' && s.includes('.')) {
+        const args = s.split('.')
+        do {
+          if (!method) {
+            method = api.value.services[args.shift() as any]
+          }
+          method = method[args.shift() as any]
+        }
+        while (args.length)
+      } else {
+        method = typeof s === 'function' ? s : (props.guest ? api.value.services[s].staticIndex : api.value.services[s].index)
+      }
+      if (method != null) {
+        const { _data } = await method()
+        options.value = _data as any
+      }
     } catch (e: any) {
       alertError(e?._message || e?.message || 'Failed to fetch data')
     } finally {
@@ -105,7 +123,10 @@ const fetchData = async () => {
     }
   }
 }
-fetchData()
+
+onMounted(() => {
+  fetchData()
+})
 defineOptions({
   name: 'MOptions',
   inheritAttrs: !1

package/src/composable/useDtHelpers.ts

@@ -424,8 +424,8 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
   const resetDialogForm = useResetForm()
   const resetVeeForm = async (attrs?: Record<string, any>) => {
     const init: any = {}
-    for (const k in props.defaultItem) {
-      init[k] = attrs && k in attrs ? attrs[k] : props.defaultItem[k]
+    for (const k in defaultItem.value) {
+      init[k] = attrs && k in attrs ? attrs[k] : defaultItem.value[k]
     }
     resetDialogForm({ values: init || {} }, { force: !0 })
     attrs && setValues(attrs, !1)

package/src/types/components.d.ts

@@ -546,10 +546,14 @@ export type MOptionsProps = Omit<QOptionGroupProps, 'name' | 'modelValue' | 'opt
    * Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle & QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
    */
   options?: MOptionsOptionContext[];
+  /**
+   * Uset auto static index myth api helpers.
+   */
+  guest?: boolean | undefined;
   /**
    * Get options by function. any send the current value to this function to get options.
    */
-  service?: ((value?: any) => Promise<ApiInterface>) | undefined;
+  service?: ((value?: any) => Promise<ApiInterface>) | string;
   /**
    * Service loading.
    */

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 {