@mythpe/quasar-ui-qui 0.4.34 → 0.4.37

package/package.json

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

package/src/composable/useDtHelpers.ts

@@ -130,7 +130,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
       controlKey: controlProps.value.name,
       controlStyle: controlProps.value.style,
       align: getProp.value('align'),
-      classes: props.rowClass
+      rowClass: props.rowClass
     } as any
     const h = parseHeaders(props.headers as MDtHeadersParameter, opt) || []
     if (!activeContextItems.value.length) {
@@ -421,7 +421,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>, emit?:
     const ex = async () => {
       loading.value = !0
       const toBLob = exportToBlob.value === !0 || exportToBlob.value === type
-      const headerItems = getHeaders.value.filter(e => e?.field !== controlKey.value && visibleHeaders.value.indexOf(e.name) !== -1)
+      const headerItems = getSortedHeaders.value.filter(e => e?.name !== controlKey.value && visibleHeaders.value.indexOf(e.name) !== -1)
       const data = getDatatableParams({
         pagination: pagination.value,
         filter: search.value

package/src/composable/useMyth.ts

@@ -13,7 +13,8 @@ import type { QDialogOptions, QDialogProps, QNotifyCreateOptions } from 'quasar'
 import { colors, copyToClipboard, extend, useQuasar } from 'quasar'
 import { Helpers, MythKey, type MythType, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
-import { computed, inject } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, inject, toValue } from 'vue'
 
 export const useMyth = () => {
   const plugin = inject(MythKey) as MythType
@@ -118,41 +119,40 @@ export const useMyth = () => {
    * @param headers
    * @param options
    */
-  const parseHeaders = (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] => {
-    const defaultOptions: Partial<ParseHeaderOptions> = {
-      controlKey: 'control'
-      // controlStyle: 'max-width: 150 px',
-      // align: 'center'
-      // sortable: !0
+  const parseHeaders = (headers: MaybeRefOrGetter<MDtHeadersParameter>, options: MaybeRefOrGetter<ParseHeaderOptions> = {}): MDtColumn[] => {
+    const defaultOptions = {
+      controlKey: 'control',
+      controlStyle: 'max-width: 150px',
+      controlAlign: 'right',
+      align: 'left',
+      sortable: !0
     }
-    const opts = extend<ParseHeaderOptions>(!0, {}, defaultOptions, options)
-    // console.log(opts)
-    const control: string | undefined = opts.controlKey || defaultOptions.controlKey
-    const controlStyle: string | undefined = opts.controlStyle || defaultOptions.controlStyle
-    const noSort = options.noSort || []
-    // delete opts.noSort
-    // if (opts.controlKey) {
-    //   control = opts.controlKey
-    // delete opts.controlKey
-    // }
-    // if (opts.controlStyle) {
-    //   controlStyle = opts.controlStyle
-    // delete opts.controlStyle
-    // }
+    const opts = extend<ParseHeaderOptions>(!0, {}, defaultOptions, toValue(options))
+    const control: string = opts.controlKey || defaultOptions.controlKey
+    const controlStyle: string | undefined = opts.controlStyle
+    const controlAlign: string | undefined = opts.controlAlign
+    const noSort = opts.noSort || []
+    const rowClass = opts.rowClass
+    delete opts.controlKey
+    delete opts.controlStyle
+    delete opts.controlAlign
+    delete opts.rowClass
     const result: MDtColumn[] = []
-
-    headers.forEach((elm: string | MDtColumn | undefined) => {
-      if (typeof elm !== 'string' && !elm?.name) return elm
-      // Todo: will do this
+    const h = toValue(headers)
+    h.forEach((elm: string | MDtColumn | undefined) => {
+      if (typeof elm !== 'string' && !elm?.name) {
+        return elm
+      }
       let item: MDtColumn = typeof elm === 'string' ? {
-        name: elm as string,
-        label: elm as string,
-        field: elm as string
+        name: elm,
+        label: elm,
+        field: elm
       } : { ...elm }
       item.name = item.name ?? ''
       item.label = (item.label === undefined || item.label === null) ? item.name : item.label
       item.field = (item.field === undefined || item.field === null) ? item.name : item.field
       item = {
+        ...opts,
         ...item,
         name: Str.strBefore(Str.strBefore(item.name), 'ToString'),
         label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
@@ -194,40 +194,26 @@ export const useMyth = () => {
         item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m-control-header'
         item.headerClasses = item.headerClasses.trim()
         item.sortable = !1
-        if (opts.controlAlign) {
-          item.align = opts.controlAlign
-        } else if (!item.align) {
-          // console.log(item)
-          item.align = 'right'
-        }
-        // opts.classes = opts.classes || ''
-        if (typeof opts.classes === 'function') {
-          const callback = opts.classes
-          opts.classes = (item) => (callback(item) || '') + ' m-control-cell'
-        } else if (typeof opts.classes === 'string') {
-          opts.classes += ' m-control-cell'
-          opts.classes = opts.classes.trim()
-        }
+        item.align = controlAlign ?? item.align ?? defaultOptions.controlAlign
       }
-      if (!item.align) {
-        item.align = 'left'
-      }
-      // item = { ...opts, ...item }
-
+      item.align = item.align ?? defaultOptions.align
+      // console.log(item)
       if (item.sortable === undefined && noSort.length > 0 && noSort.includes(item.name)) {
         item.sortable = !1
-      } else if (item.sortable === undefined) {
+      }
+      if (item.sortable === undefined) {
         item.sortable = !0
       }
-      if ((item.classes || opts.classes) && name !== control) {
+
+      if ((item.classes || rowClass) && name !== control) {
         const current = item.classes
         item.classes = (row: any) => {
           const res: string[] = []
-          if (opts.classes) {
-            if (typeof opts.classes === 'function') {
-              res.push(opts.classes(row))
+          if (rowClass) {
+            if (typeof rowClass === 'function') {
+              res.push(rowClass(row))
             } else {
-              res.push(opts.classes)
+              res.push(rowClass)
             }
           }
           if (current) {

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

@@ -10,17 +10,18 @@ import type { AxiosError, AxiosResponse } from 'axios'
 import type { DialogChainObject, QNotifyCreateOptions, QNotifyUpdateOptions, QTableProps } from 'quasar'
 import type { MDatatableProps } from './m-datatable'
 
+export type MDtColumn = QTableProps['columns'][number]
+
 export type ParseHeaderOptions = {
   controlKey?: 'control' | string;
   controlStyle?: 'max-width: 150px' | string;
-  controlAlign?: 'left' | 'right' | 'center' | undefined | null;
+  controlAlign?: 'left' | 'right' | 'center' | undefined;
   align?: 'left' | 'right' | 'center' | undefined;
   sortable?: boolean | undefined;
-  classes?: string | (() => string) | (<T>(item: T) => string);
+  rowClass?: string | (() => string) | (<T>(item: T) => string);
   noSort?: string[];
-}
-
-export type MDtColumn = QTableProps['columns'][number]
+  // [k: string]: any;
+} & MDtColumn
 
 export type MDtHeadersParameter = MDtColumn[] | (keyof MDatatableProps['defaultItem'])[]