@mythpe/quasar-ui-qui 0.4.96 → 0.4.97

package/package.json

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

package/src/components/form/MAxios.vue

@@ -23,6 +23,7 @@ type P = {
   label?: Props['label'];
   placeholder?: Props['placeholder'];
   viewMode?: Props['viewMode'];
+  viewModeKey?: Props['viewModeKey'];
   viewModeValue?: Props['viewModeValue'];
   service?: Props['service'];
   guest?: Props['guest'];
@@ -42,6 +43,7 @@ const props = withDefaults(defineProps<P>(), {
   label: undefined,
   placeholder: undefined,
   viewMode: !1,
+  viewModeKey: undefined,
   viewModeValue: undefined,
   service: undefined,
   guest: undefined,
@@ -193,6 +195,7 @@ defineOptions({ name: 'MAxios', inheritAttrs: !1 })
     :placeholder="placeholder"
     :required="required"
     :view-mode="viewMode"
+    :view-mode-key="viewModeKey"
     :view-mode-value="viewModeValue"
     axios-mode
     no-filter

package/src/components/form/MSelect.vue

@@ -11,7 +11,7 @@
   setup
 >
 
-import { useField } from 'vee-validate'
+import { useField, useFieldValue } from 'vee-validate'
 import type { MSelectProps as Props } from '../../types'
 import { computed, reactive, ref, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
@@ -35,6 +35,7 @@ type P = {
   required?: Props['required'];
   rules?: Props['rules'];
   viewMode?: Props['viewMode'];
+  viewModeKey?: Props['viewModeKey'];
   viewModeValue?: Props['viewModeValue'];
   autocomplete?: Props['autocomplete'];
   topLabel?: Props['topLabel'];
@@ -83,6 +84,7 @@ const props = withDefaults(defineProps<P>(), {
   required: undefined,
   rules: undefined,
   viewMode: !1,
+  viewModeKey: undefined,
   viewModeValue: undefined,
   autocomplete: undefined,
   topLabel: undefined,
@@ -187,25 +189,43 @@ const listeners = {
 }
 const input = useTemplateRef<InstanceType<typeof QSelect> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
+
+const viewModeAttribute = useFieldValue(() => props.viewModeKey || props.name)
 const getViewModeValue = computed(() => {
+  if (!props.viewMode) {
+    return undefined
+  }
   if (props.viewMode && props.loading) {
     return '...'
   }
-  if (props.viewModeValue === undefined) {
-    const i = getOptions.value.find((e) => {
-      if (typeof props.optionValue === 'function') {
-        return e[props.optionValue(e)] === value.value
-      }
-      return e[props.optionValue] === value.value
+  if (props.viewModeValue !== undefined) {
+    return props.viewModeValue
+  }
+  if (props.viewModeKey) {
+    return viewModeAttribute.value
+  }
+  if (props.loading) {
+    return '...'
+  }
+  if (props.multiple) {
+    const opts = getOptions.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]
     })
-    if (i) {
-      if (typeof props.optionLabel === 'function') {
-        return props.optionLabel(i)
-      }
-      return i[props.optionLabel]
-    }
+    return opts?.length ? opts?.join(', ') : '-'
+  }
+  const opt = getOptions.value?.find((e) => {
+    const k = props.optionValue === undefined ? 'value' : (typeof props.optionValue === 'function' ? props.optionValue(e) : props.optionValue)
+    return e[k] === value.value
+  })
+  if (opt) {
+    const k = props.optionLabel === undefined ? 'label' : (typeof props.optionLabel === 'function' ? props.optionLabel(opt) : props.optionLabel)
+    return opt[k]
   }
-  return value.value || '-'
+  return undefined
 })
 defineExpose<typeof scopes & {
   input: typeof input,