@mythpe/quasar-ui-qui 0.4.78 → 0.4.80

package/package.json

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

package/src/components/form/MOptions.vue

@@ -11,7 +11,7 @@
   setup
 >
 
-import { useField } from 'vee-validate'
+import { useField, useFieldValue } from 'vee-validate'
 import type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
 import { computed, onMounted, reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QOptionGroup, type QOptionGroupSlots } from 'quasar'
@@ -35,6 +35,7 @@ interface P {
   rules?: Props['rules'];
   viewMode?: Props['viewMode'];
   viewModeValue?: Props['viewModeValue'];
+  viewModeKey: Props['viewModeKey'];
   topLabel?: Props['topLabel'];
   color?: Props['color'];
   type?: Props['type'];
@@ -169,6 +170,7 @@ const fetchData = async () => {
     }
   }
 }
+const viewModeAttribute = useFieldValue(() => props.viewModeKey || props.name)
 const customViewModeValue = computed(() => {
   if (!props.viewMode) {
     return undefined
@@ -176,14 +178,24 @@ const customViewModeValue = computed(() => {
   if (props.viewModeValue !== undefined) {
     return props.viewModeValue
   }
+  if (props.viewModeKey) {
+    return viewModeAttribute.value
+  }
   if (loading.value) {
     return '...'
   }
+  if (props.type === 'checkbox') {
+    const opts = options.value?.filter((opt) => {
+      const k = props.optionValue === undefined ? 'value' : (typeof props.optionValue === 'function' ? props.optionValue(opt) : props.optionValue)
+      return value.value?.includes?.(opt[k])
+    }).map((opt) => {
+      const k = props.optionLabel === undefined ? 'label' : (typeof props.optionLabel === 'function' ? props.optionLabel(opt) : props.optionLabel)
+      return opt[k]
+    })
+    return opts.length ? opts.join(', ') : undefined
+  }
   const opt = options.value?.find((e) => {
     const k = props.optionValue === undefined ? 'value' : (typeof props.optionValue === 'function' ? props.optionValue(e) : props.optionValue)
-    if (props.type === 'checkbox') {
-      return value.value?.includes?.(e[k]) || e[k] === value.value
-    }
     return e[k] === value.value
   })
   if (opt) {

package/src/composable/useMyth.ts

@@ -9,7 +9,7 @@
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useRoute } from 'vue-router'
-import type { QDialogOptions, QDialogProps, QNotifyCreateOptions } from 'quasar'
+import type { QBtnProps, 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'
@@ -271,24 +271,31 @@ export const useMyth = () => {
       message,
       focus: 'none',
       noShake: !0,
-      allowFocusOutside: !0,
+      noBackdropDismiss: !0,
+      noFocus: !0,
+      noRouteDismiss: !0,
+      noEscDismiss: !0,
       persistent: !0,
-      cancel: {
-        color: cancelProps.color || undefined,
-        label: t(cancelProps?.label || 'labels.cancel'),
-        outline: !0,
-        noCaps: !0,
-        ...buttonsProps as any,
-        ...cancelProps as any
-      },
+      allowFocusOutside: !0,
       ok: {
-        color: okProps.color || 'primary',
+        color: okProps.color || undefined,
         label: t(okProps?.label || 'labels.confirm'),
-        outline: !1,
+        flat: !0,
         noCaps: !0,
+        unelevated: !0,
+        style: 'min-width: 80px;',
         ...buttonsProps as any,
         ...okProps as any
-      },
+      } as QBtnProps,
+      cancel: {
+        color: cancelProps.color || 'primary',
+        label: t(cancelProps?.label || 'labels.cancel'),
+        noCaps: !0,
+        unelevated: !0,
+        style: 'min-width: 80px;',
+        ...buttonsProps as any,
+        ...cancelProps as any
+      } as QBtnProps,
       ...dialogProps as any,
       ...opts as any
     })