@mythpe/quasar-ui-qui 0.4.79 → 0.4.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.4.79",
+  "version": "0.4.81",
   "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'];
@@ -73,6 +74,7 @@ const props = withDefaults(defineProps<P>(), {
   rules: undefined,
   viewMode: !1,
   viewModeValue: undefined,
+  viewModeKey: undefined,
   topLabel: undefined,
   color: undefined,
   type: 'radio',
@@ -169,6 +171,7 @@ const fetchData = async () => {
     }
   }
 }
+const viewModeAttribute = useFieldValue(() => props.viewModeKey || props.name)
 const customViewModeValue = computed(() => {
   if (!props.viewMode) {
     return undefined
@@ -176,14 +179,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) {
@@ -288,11 +301,11 @@ defineOptions({
     >
       <template
         v-if="viewMode"
-        #control
+        #control="controlScope"
       >
         <slot name="control">
           <MInputFieldControl>
-            {{ customViewModeValue ?? value }}
+            {{ customViewModeValue ?? controlScope.modelValue }}
           </MInputFieldControl>
         </slot>
       </template>