@mythpe/quasar-ui-qui 0.3.18 → 0.3.19

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -813,8 +813,9 @@ defineExpose({
                       :aria-label="__('menu')"
                       :icon="pluginOptions.dt?.searchInput?.optionsIcon || 'ion-ios-options'"
                       dense
+                      fab-mini
                       flat
-                      round
+                      text-color="body"
                       v-bind="pluginOptions.dt?.searchInput?.menuBtn as any"
                     >
                       <MModalMenu
@@ -969,7 +970,7 @@ defineExpose({
                         <q-separator />
                         <MRow class="items-center">
                           <MCol col="12">
-                            <MContainer class="q-pa-lg">
+                            <MContainer>
                               <slot
                                 :dt="datatableItemsScope"
                                 :filter="tempFilterForm"
@@ -1150,6 +1151,7 @@ defineExpose({
                   v-if="!noWrapBtnProp"
                   :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
                   flat
+                  tooltip="myth.datatable.wrapBtn"
                   @click="wrapCellsRef = !wrapCellsRef"
                 />
               </MRow>
@@ -1496,16 +1498,16 @@ defineExpose({
                       <q-skeleton width="200px" />
                     </template>
                     <template v-else>
-                      <MBtn
+                      <q-btn
+                        fab-mini
                         flat
                         icon="close"
-                        text-color="none"
                         @click="closeFormDialog"
                       >
                         <q-tooltip class="m-dt-btn-tooltip">
                           {{ __('myth.titles.close') }}
                         </q-tooltip>
-                      </MBtn>
+                      </q-btn>
                       {{ getFormTitle }}
                     </template>
                   </q-toolbar-title>

package/src/components/form/MCheckbox.vue

@@ -133,7 +133,8 @@ defineOptions({
             borderless: !0,
             outlined: !1,
             stackLabel: !0,
-            hideBottomSpace: !0
+            hideBottomSpace: !0,
+            standout: undefined
           }"
         >
           <q-checkbox

package/src/components/form/MOptions.vue

@@ -13,7 +13,7 @@
 
 import { useField } from 'vee-validate'
 import type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
-import { onMounted, reactive, toValue, useTemplateRef } from 'vue'
+import { computed, onMounted, reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QOptionGroup, type QOptionGroupSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 
@@ -44,10 +44,17 @@ interface P {
   fullWidth?: Props['fullWidth'];
   fitWidth?: Props['fullWidth'];
   fieldOptions?: Props['fieldOptions'];
+  disable?: Props['disable'];
+  optionValue?: Props['optionValue'];
+  optionLabel?: Props['optionLabel'];
+  prependIcon?: Props['prependIcon'];
+  prependIconProps?: Props['prependIconProps'];
+  appendIcon?: Props['appendIcon'];
+  appendIconProps?: Props['appendIconProps'];
 }
 
 const props = withDefaults(defineProps<P>(), {
-  name: () => '',
+  name: '',
   auto: undefined,
   col: undefined,
   xs: undefined,
@@ -62,7 +69,7 @@ const props = withDefaults(defineProps<P>(), {
   help: undefined,
   required: undefined,
   rules: undefined,
-  viewMode: () => !1,
+  viewMode: !1,
   viewModeValue: undefined,
   topLabel: undefined,
   color: undefined,
@@ -70,9 +77,16 @@ const props = withDefaults(defineProps<P>(), {
   keepColor: undefined,
   guest: !1,
   service: undefined,
-  fullWidth: () => !1,
-  fitWidth: () => !1,
-  fieldOptions: undefined
+  fullWidth: !1,
+  fitWidth: !1,
+  fieldOptions: undefined,
+  disable: undefined,
+  optionValue: undefined,
+  optionLabel: undefined,
+  prependIcon: undefined,
+  prependIconProps: undefined,
+  appendIcon: undefined,
+  appendIconProps: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
@@ -123,7 +137,26 @@ const fetchData = async () => {
     }
   }
 }
-
+const customViewModeValue = computed(() => {
+  if (!props.viewMode) {
+    return undefined
+  }
+  if (props.viewModeValue !== undefined) {
+    return props.viewModeValue
+  }
+  if (loading.value) {
+    return '...'
+  }
+  const opt = options.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 undefined
+})
 onMounted(() => {
   fetchData()
 })
@@ -196,13 +229,13 @@ defineOptions({
     <component
       :is="viewMode ? QField : QOptionGroup"
       ref="input"
-      :class="{'m-options': !0, 'm-options__full_width': fullWidth, 'm-options__fit_width': fitWidth }"
+      :class="['m-options',{'m-options__full_width': fullWidth, 'm-options__fit_width': fitWidth }]"
       :error="viewMode ? !!errorMessage : undefined"
       :error-message="viewMode ? errorMessage : undefined"
       :hint="viewMode ? ( hint ? __(hint) : undefined ) : undefined"
       :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
       :label="getLabel || undefined"
-      :model-value="viewMode ? (viewModeValue || value) : value"
+      :model-value="viewMode ? (customViewModeValue || value) : value"
       :options="options"
       :type="viewMode ? undefined : type"
       v-bind="{
@@ -210,10 +243,39 @@ defineOptions({
         ...theme,
         ...( viewMode ? { ...pluginProps.field } : pluginProps.options as any ),
         stackLabel: !0,
-        color:!!errorMessage ? 'negative' : getProp('color')
+        color:!!errorMessage ? 'negative' : getProp('color'),
+        disable: viewMode ? undefined : disable,
       }"
       v-on="listeners"
     >
+      <template
+        v-if="viewMode"
+        #control
+      >
+        <slot name="control">
+          <MInputFieldControl>
+            {{ customViewModeValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+      <template
+        v-if="!!prependIcon"
+        #prepend
+      >
+        <q-icon
+          :name="prependIcon"
+          v-bind="prependIconProps"
+        />
+      </template>
+      <template
+        v-if="!!appendIcon"
+        #append
+      >
+        <q-icon
+          :name="appendIcon"
+          v-bind="appendIconProps"
+        />
+      </template>
       <template
         v-for="(_,slot) in $slots as Readonly<QOptionGroupSlots>"
         :key="slot"
@@ -224,16 +286,6 @@ defineOptions({
           v-bind="inputSlot || {}"
         />
       </template>
-      <template
-        v-if="viewMode"
-        #control
-      >
-        <slot name="control">
-          <MInputFieldControl>
-            {{ viewModeValue ?? value }}
-          </MInputFieldControl>
-        </slot>
-      </template>
     </component>
     <slot
       name="help"

package/src/components/form/MRadio.vue

@@ -129,9 +129,12 @@ defineOptions({
             ...pluginOptions.input as any,
             ...pluginOptions.field,
             ...$attrs,
+            dense: !0,
             borderless: !0,
             outlined: !1,
-            stackLabel: !0
+            stackLabel: !0,
+            hideBottomSpace: !0,
+            standout: undefined
           }"
         >
           <template #control>

package/src/components/form/MSelect.vue

@@ -181,6 +181,9 @@ const listeners = {
 const input = useTemplateRef<InstanceType<typeof QSelect> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
 const getViewModeValue = computed(() => {
+  if (props.viewMode && props.loading) {
+    return '...'
+  }
   if (props.viewModeValue === undefined) {
     const i = getOptions.value.find((e) => {
       if (typeof props.optionValue === 'function') {
@@ -195,7 +198,7 @@ const getViewModeValue = computed(() => {
       return i[props.optionLabel]
     }
   }
-  return props.viewModeValue || value.value
+  return '...'
 })
 defineExpose<typeof scopes & {
   input: typeof input,
@@ -265,13 +268,13 @@ defineOptions({
         useChips: getProp('useChips') === !0 && !multiple ? !1 : getProp('useChips'),
         multiple,
         mapOptions,
-        loading,
+        loading: viewMode ? !1 : loading,
         useInput,
         autocomplete: getAutocompleteAttribute || undefined,
         clearable: viewMode ? !1 : clearable,
         hint: hint ? __(hint) : undefined,
         label: viewMode && hasTopLabel ? undefined : (getLabel || undefined),
-        modelValue: value
+        modelValue: viewMode ? getViewModeValue : value
       }"
       v-on="listeners"
     >
@@ -379,7 +382,7 @@ defineOptions({
       >
         <slot name="control">
           <MInputFieldControl>
-            {{ getViewModeValue ?? viewModeValue ?? value }}
+            {{ getViewModeValue }}
           </MInputFieldControl>
         </slot>
       </template>

package/src/components/form/MToggle.vue

@@ -49,6 +49,11 @@ interface P {
   viewMode?: Props['viewMode'];
   fieldOptions?: Props['fieldOptions'];
   hideBottomSpace?: boolean;
+  prependIcon?: Props['prependIcon'];
+  prependIconProps?: Props['prependIconProps'];
+  appendIcon?: Props['appendIcon'];
+  appendIconProps?: Props['appendIconProps'];
+  disable?: Props['disable'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -60,7 +65,7 @@ const props = withDefaults(defineProps<P>(), {
   lg: undefined,
   xl: undefined,
   val: undefined,
-  name: () => '',
+  name: '',
   label: undefined,
   caption: undefined,
   hint: undefined,
@@ -83,7 +88,12 @@ const props = withDefaults(defineProps<P>(), {
   colProps: undefined,
   viewMode: !1,
   fieldOptions: undefined,
-  hideBottomSpace: !0
+  hideBottomSpace: !0,
+  prependIcon: undefined,
+  prependIconProps: undefined,
+  appendIcon: undefined,
+  appendIconProps: undefined,
+  disable: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'toggle', () => ({ choose: !0 }))
@@ -110,7 +120,6 @@ const getLabel = computed<string | undefined>(() => {
   }
   return __('labels.none') as string || def
 })
-
 const input = useTemplateRef<InstanceType<typeof QToggle>>('input')
 const scopes = reactive(inputScope)
 defineExpose({ input, ...scopes })
@@ -121,7 +130,14 @@ defineOptions({
 </script>
 
 <template>
+  <MInput
+    v-if="viewMode"
+    :view-mode-value="getLabel"
+    v-bind="{...$props,...$attrs}"
+    view-mode
+  />
   <MCol
+    v-else
     :auto="auto"
     :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode},'m-toggle__col']"
     :col="col"
@@ -162,7 +178,6 @@ defineOptions({
       />
       <MCol v-bind="colProps">
         <q-field
-          :hide-bottom-space="hideBottomSpace"
           v-bind="{
             ...theme,
             error: !!errorMessage,
@@ -171,14 +186,16 @@ defineOptions({
             ...pluginOptions.input as any,
             ...pluginOptions.field,
             ...$attrs,
+            dense: !0,
             borderless: !0,
             outlined: !1,
-            // dense2: theme.dense !== undefined ? theme.dense : getProp('dense')
-            dense: !0
+            stackLabel: !0,
+            hideBottomSpace: !0,
+            standout: undefined
           }"
         >
           <q-toggle
-            :disable="viewMode"
+            :disable="disable"
             :false-value="falseValue"
             :indeterminate-value="indeterminateValue"
             :model-value="value"

package/src/style/m-container.sass

@@ -1,3 +1,4 @@
+
 $m-container-padding: $space-base !default
 $m-container-fluid-width: 1440px !default