@mythpe/quasar-ui-qui 0.0.59 → 0.0.61

package/package.json

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

package/src/components/form/MBtn.vue

@@ -10,18 +10,40 @@
   lang="ts"
   setup
 >
-import type { ButtonLoadingOptions, MBtnProps as Props } from '../../types'
+import type { ButtonLoadingOptions, MBtnProps } from '../../types'
 import { computed } from 'vue'
-import { useBindInput, useMyth } from '../../composable'
-import type { QBtnProps } from 'quasar'
+import { useMyth } from '../../composable'
 
+type Props = {
+  label?: MBtnProps['label'];
+  ariaLabel?: MBtnProps['ariaLabel'];
+  loading?: MBtnProps['loading'];
+  nativeLabel?: MBtnProps['nativeLabel'];
+}
 const props = defineProps<Props>()
-const { __, theme } = useMyth()
-const btnLoading = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
-const getLabel = computed<string | undefined>(() => props.label ? (__(props.label) ?? undefined) : undefined)
-const getSize = computed<string | undefined>(() => btnLoading.value.size)
-const getColor = computed<string | undefined>(() => btnLoading.value.color)
-const { attrs } = useBindInput<QBtnProps & { name: string }>(() => props, 'btn')
+const { __, theme, props: pluginOptions } = useMyth()
+const getLabel = computed<string | undefined>(() => {
+  if (props.nativeLabel === !0) {
+    return props.label
+  }
+  return props.label ? (__(props.label) ?? undefined) : undefined
+})
+const getAriaLabel = computed<string | undefined>(() => {
+  if (props.ariaLabel === !0 || (typeof props.ariaLabel === 'string' && !props.ariaLabel?.length)) {
+    if (props.label !== undefined) {
+      return __(props.label) || undefined
+    }
+  } else if (typeof props.ariaLabel === 'string' && props.ariaLabel?.length > 0) {
+    return __(props.ariaLabel) || undefined
+  }
+  return props.ariaLabel ? __(props.ariaLabel) : undefined
+})
+const hasLabel = computed<boolean>(() => !!getLabel.value)
+
+const loadingOptions = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
+const loadingSize = computed<string | undefined>(() => loadingOptions.value.size)
+const loadingColor = computed<string | undefined>(() => loadingOptions.value.color)
+
 defineOptions({
   name: 'MBtn',
   inheritAttrs: !1
@@ -31,161 +53,161 @@ defineOptions({
 <template>
   <q-btn
     v-bind="{
-      ariaLabel: getLabel,
+      ...pluginOptions.btn,
+      ariaLabel: getAriaLabel,
       ...$attrs,
-      ...attrs,
-      label: loading ? `${getLabel} ...` : getLabel,
+      label: loading && getLabel ? `${getLabel} ...` : getLabel,
     }"
   >
     <template
-      v-if="!!btnLoading && !$slots.loading"
+      v-if="!!loadingOptions && !$slots.loading"
       #loading
     >
       <q-spinner-audio
-        v-if="btnLoading.type === 'audio'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'audio'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-ball
-        v-if="btnLoading.type === 'ball'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'ball'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-bars
-        v-if="btnLoading.type === 'bars'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'bars'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-box
-        v-if="btnLoading.type === 'box'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'box'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-clock
-        v-if="btnLoading.type === 'clock'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'clock'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-comment
-        v-if="btnLoading.type === 'comment'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'comment'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-cube
-        v-if="btnLoading.type === 'cube'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'cube'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-dots
-        v-if="btnLoading.type === 'dots'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'dots'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-facebook
-        v-if="btnLoading.type === 'facebook'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'facebook'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-gears
-        v-if="btnLoading.type === 'gears'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'gears'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-grid
-        v-if="btnLoading.type === 'grid'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'grid'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-hearts
-        v-if="btnLoading.type === 'hearts'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'hearts'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-hearts
-        v-if="btnLoading.type === 'hearts'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'hearts'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-hourglass
-        v-if="btnLoading.type === 'hourglass'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'hourglass'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-infinity
-        v-if="btnLoading.type === 'infinity'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'infinity'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-ios
-        v-if="btnLoading.type === 'ios'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'ios'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-orbit
-        v-if="btnLoading.type === 'orbit'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'orbit'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-oval
-        v-if="btnLoading.type === 'oval'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'oval'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-pie
-        v-if="btnLoading.type === 'pie'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'pie'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-puff
-        v-if="btnLoading.type === 'puff'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'puff'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-radio
-        v-if="btnLoading.type === 'radio'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'radio'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-rings
-        v-if="btnLoading.type === 'rings'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'rings'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner-tail
-        v-if="btnLoading.type === 'tail'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'tail'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
       <q-spinner
-        v-if="btnLoading.type === 'spinner'"
-        :class="{'on-left': !!getLabel}"
-        :color="getColor"
-        :size="getSize"
+        v-if="loadingOptions.type === 'spinner'"
+        :class="{'on-left': hasLabel}"
+        :color="loadingColor"
+        :size="loadingSize"
       />
-      <template v-if="btnLoading.noLabel !== !1 && getLabel">
+      <template v-if="loadingOptions.noLabel !== !1 && getLabel">
         <span>{{ getLabel }}</span>
       </template>
     </template>

package/src/components/form/MCheckbox.vue

@@ -16,11 +16,34 @@ import { useBindInput, useMyth } from '../../composable'
 import type { MCheckboxProps as Props } from '../../types'
 import { QCheckbox, QField } from 'quasar'
 
-const props = withDefaults(defineProps<Props>(), {
-  name: '',
-  label: undefined,
-  disable: undefined,
-  viewMode: undefined,
+type P = {
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  name: Props['name'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  help?: Props['help'];
+  val?: Props['val'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  trueValue?: Props['trueValue'];
+  falseValue?: Props['falseValue'];
+  checkedIcon?: Props['checkedIcon'];
+  rowProps?: Props['rowProps'];
+  colProps?: Props['colProps'];
+  viewMode?: Props['viewMode'];
+  fieldOptions?: Props['fieldOptions'];
+  autocomplete: Props['autocomplete'];
+  disable: Props['disable'];
+}
+
+const props = withDefaults(defineProps<P>(), {
   auto: undefined,
   col: undefined,
   xs: undefined,
@@ -28,17 +51,28 @@ const props = withDefaults(defineProps<Props>(), {
   md: undefined,
   lg: undefined,
   xl: undefined,
+  name: () => '',
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  help: undefined,
+  val: undefined,
   required: undefined,
+  rules: undefined,
+  trueValue: () => !0,
+  falseValue: () => !1,
+  checkedIcon: undefined,
+  rowProps: undefined,
+  colProps: undefined,
+  viewMode: () => !1,
+  fieldOptions: undefined,
   autocomplete: undefined,
-  mobile: undefined,
-  email: undefined,
-  float: undefined,
-  useChoice: undefined
+  disable: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __ } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<Props>(() => props, 'checkbox')
-const { getLabel, inputRules, theme } = helper
+const { getLabel, inputRules, theme, getAutocompleteAttribute, getProp } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -91,10 +125,11 @@ defineOptions({
       <MCol v-bind="colProps">
         <q-field
           v-bind="{
-            ...$attrs,
+            ...theme,
+            ...pluginOptions.field,
             error: !!errorMessage,
             errorMessage,
-            hint: __(hint),
+            hint: hint ? __(hint) : hint,
             borderless: !0,
             outlined: !1,
             stackLabel: !0
@@ -103,11 +138,14 @@ defineOptions({
           <q-checkbox
             ref="input"
             v-bind="{
-              ...$attrs,
               ...theme,
+              ...pluginOptions.checkbox,
+              checkedIcon: getProp('checkedIcon'),
+              ...$attrs,
               modelValue: value,
-              disable: viewMode === !0 ? viewMode : disable,
-              label: undefined,
+              disable: viewMode === !0 ? !0 : disable,
+              autocomplete: getAutocompleteAttribute,
+              label: undefined
             }"
             v-on="listeners"
           >

package/src/components/form/MColor.vue

@@ -16,54 +16,28 @@ import { useField } from 'vee-validate'
 import { useBindInput } from '../../composable'
 import type { QField, QInput } from 'quasar'
 
-const props = withDefaults(defineProps<Props>(), {
+type P = {
+  name: Props['name'];
+  label?: Props['label'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  topLabel?: Props['topLabel'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
   name: () => '',
-  fillMask: undefined,
-  reverseFillMask: undefined,
-  unmaskedValue: undefined,
-  error: undefined,
-  noErrorIcon: undefined,
-  reactiveRules: undefined,
-  lazyRules: undefined,
-  stackLabel: undefined,
-  hideHint: undefined,
-  dark: undefined,
-  loading: undefined,
-  clearable: undefined,
-  filled: undefined,
-  outlined: undefined,
-  borderless: undefined,
-  standout: undefined,
-  labelSlot: undefined,
-  bottomSlots: undefined,
-  hideBottomSpace: undefined,
-  counter: undefined,
-  rounded: undefined,
-  square: undefined,
-  dense: undefined,
-  itemAligned: undefined,
-  disable: undefined,
-  readonly: undefined,
-  autofocus: undefined,
-  autogrow: undefined,
-  viewMode: undefined,
-  auto: undefined,
-  col: undefined,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined,
+  label: undefined,
   required: undefined,
-  autocomplete: undefined,
+  rules: undefined,
+  viewMode: () => !1,
   topLabel: undefined,
-  mobile: undefined,
-  email: undefined,
-  float: undefined
+  fieldOptions: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<Props>(() => props, 'input')
-const { getLabel, inputRules, attrs } = helper
+const { getLabel, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -88,7 +62,16 @@ defineOptions({
 <template>
   <MInput
     ref="input"
-    v-bind="{...$props,...attrs,rules:inputRules,modelValue:value}"
+    v-bind="{
+      ...$attrs,
+      name,
+      label,
+      required,
+      topLabel,
+      viewMode,
+      rules: inputRules,
+      modelValue: value
+    }"
     v-on="listeners"
   >
     <template #prepend>

package/src/components/form/MDate.vue

@@ -37,7 +37,7 @@ defineOptions({
   <MPicker
     ref="input"
     v-model="modelValue"
-    v-bind="{...$attrs,type:'date',name}"
+    v-bind="{...$attrs,type:'date',name,rules}"
   >
     <template
       v-for="(_,slot) in $slots as Readonly<MInputSlots>"

package/src/components/form/MEmail.vue

@@ -13,9 +13,7 @@
 import type { MInputProps as Props, MInputSlots } from '../../types'
 import { useTemplateRef } from 'vue'
 import MInput from './MInput.vue'
-import { useMyth } from '../../composable'
 
-const { props: pluginOptions } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const input = useTemplateRef<InstanceType<typeof MInput>>('input')
 defineExpose<{ input: typeof input }>({ input })
@@ -29,7 +27,7 @@ defineOptions({
   <MInput
     ref="input"
     v-model="modelValue"
-    v-bind="{...pluginOptions.input as any,...$attrs, type:'email',email:!0}"
+    v-bind="{...$attrs as any, type:'email',email:!0}"
   >
     <template
       v-for="(_,slot) in $slots as Readonly<MInputSlots>"

package/src/components/form/MField.vue

@@ -59,10 +59,10 @@ const props = withDefaults(defineProps<P>(), {
   topLabel: undefined,
   clearable: undefined
 })
-const { __ } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'input')
-const { hasTopLabel, getLabel, getPlaceholder, inputRules, attrs } = helper
+const { hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, theme } = helper
 const value = useFieldValue(() => props.name)
 const errorMessage = useFieldError(() => props.name)
 const input = useTemplateRef<InstanceType<typeof QField>>('input')
@@ -108,16 +108,18 @@ defineOptions({
     <q-field
       ref="input"
       v-bind="{
+        ...theme,
         ...$attrs,
-        ...attrs as any,
+        ...pluginOptions.field as any,
         clearable: !1,
         stackLabel: !0,
-        error:!!errorMessage,
+        error: !!errorMessage,
         errorMessage,
-        hint:__(hint),
-        label:hasTopLabel ? undefined : getLabel,
-        modelValue:value,
-        placeholder:getPlaceholder,
+        hint: hint ? __(hint) : hint,
+        label: hasTopLabel ? undefined : getLabel,
+        modelValue: value,
+        autocomplete: getAutocompleteAttribute,
+        placeholder: getPlaceholder
       }"
     >
       <template

package/src/components/form/MFile.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<P>(), {
   fieldOptions: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __ } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<P>(() => props, 'file', () => ({ choose: !0 }))
 const { hasTopLabel, getLabel, getPlaceholder, accepts, inputRules, attrs } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -165,7 +165,7 @@ defineOptions({
       :model-value="value"
       v-bind="{
         ...$attrs,
-        ...attrs as any,
+        ...pluginOptions.file as any,
         ...( viewMode ? { stackLabel: !0 } : {} )
       }"
       v-on="listeners"

package/src/components/form/MInput.vue

@@ -70,7 +70,7 @@ const props = withDefaults(defineProps<P>(), {
   float: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __ } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<Props>(() => props, 'input')
 const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -136,7 +136,7 @@ defineOptions({
       v-bind="{
         ...$attrs,
         ...theme,
-        ...( viewMode ? { stackLabel: !0 } : {} ),
+        ...( viewMode ? { ...pluginOptions.field, stackLabel: !0 } : pluginOptions.input as any),
         autocomplete: getAutocompleteAttribute,
         clearable: viewMode ? !1 : clearable,
         error: !!errorMessage,
@@ -144,7 +144,7 @@ defineOptions({
         hint: __(hint),
         label: hasTopLabel ? undefined : getLabel,
         modelValue: value,
-        placeholder: getPlaceholder
+        placeholder: getPlaceholder,
       }"
       v-on="listeners"
     >

package/src/components/form/MInputLabel.vue

@@ -15,7 +15,10 @@ import type { MInputLabelProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 
 const { __ } = useMyth()
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  field: () => ({} as Props['field']),
+  label: undefined
+})
 defineOptions({
   name: 'MInputLabel',
   inheritAttrs: !1

package/src/components/form/MOptions.vue

@@ -181,7 +181,10 @@ defineOptions({
       :model-value="value"
       :options="options"
       :type="viewMode ? undefined : type"
-      v-bind="{ ...pluginProps.options as any,...( viewMode ? pluginProps.field : {} ), ...$attrs, ...( viewMode ? { stackLabel: !0 } : {} ) }"
+      v-bind="{
+        ...$attrs,
+        ...( viewMode ? { ...pluginProps.field, stackLabel: !0 } : pluginProps.options as any )
+      }"
       v-on="listeners"
     >
       <template

package/src/components/form/MPicker.vue

@@ -18,38 +18,39 @@ import type { QFieldSlots } from 'quasar'
 import { QDate, QField, QTime } from 'quasar'
 
 const defSeparator = ' - '
-const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
-  name: '',
-  type: undefined,
-  fillMask: undefined,
-  reverseFillMask: undefined,
-  unmaskedValue: undefined,
-  error: undefined,
-  noErrorIcon: undefined,
-  reactiveRules: undefined,
-  lazyRules: undefined,
-  stackLabel: undefined,
-  hideHint: undefined,
-  dark: undefined,
-  loading: undefined,
-  clearable: undefined,
-  filled: undefined,
-  outlined: undefined,
-  borderless: undefined,
-  standout: undefined,
-  labelSlot: undefined,
-  bottomSlots: undefined,
-  hideBottomSpace: undefined,
-  counter: undefined,
-  rounded: undefined,
-  square: undefined,
-  dense: undefined,
-  itemAligned: undefined,
-  disable: undefined,
-  readonly: undefined,
-  autofocus: undefined,
-  autogrow: undefined,
-  viewMode: undefined,
+
+interface P {
+  name: Props['name'];
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  placeholder?: Props['placeholder'];
+  help?: Props['help'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  autocomplete?: Props['autocomplete'];
+  topLabel?: Props['topLabel'];
+  type?: Props['type'];
+  range?: Props['range'];
+  rangeSeparator?: Props['rangeSeparator'];
+  multiple?: Props['multiple'];
+  btnProps?: Props['btnProps'];
+  readonly?: Props['readonly'];
+  disable?: Props['disable'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
   auto: undefined,
   col: undefined,
   xs: undefined,
@@ -57,32 +58,31 @@ const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
   md: undefined,
   lg: undefined,
   xl: undefined,
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  placeholder: undefined,
+  help: undefined,
   required: undefined,
+  rules: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
   autocomplete: undefined,
   topLabel: undefined,
-  mobile: undefined,
-  email: undefined,
-  float: undefined,
-  landscape: undefined,
-  flat: undefined,
-  bordered: undefined,
-  yearsInMonthView: undefined,
-  noUnset: undefined,
-  todayBtn: undefined,
-  minimal: undefined,
-  multiple: undefined,
-  range: undefined,
-  emitImmediately: undefined,
-  format24h: undefined,
-  withSeconds: undefined,
-  nowBtn: undefined,
-  useChoice: undefined
+  type: () => 'date',
+  range: () => !1,
+  rangeSeparator: () => ' - ',
+  multiple: () => !1,
+  btnProps: undefined,
+  readonly: undefined,
+  disable: undefined,
+  fieldOptions: undefined
 })
 
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<Props>(() => props, 'picker', () => ({ choose: !0 }))
-const { hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
-const { __, props: pluginOptions, theme } = useMyth()
+const { theme, hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
+const { __, props: pluginOptions } = useMyth()
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -168,16 +168,16 @@ defineOptions({
     <q-field
       ref="input"
       v-model="value"
-      :error="!!errorMessage"
-      :error-message="errorMessage"
-      :hint="__(hint)"
-      :label="hasTopLabel ? undefined : getLabel"
       v-bind="{
         ...pluginOptions.input as any,
         ...pluginOptions.field as any,
-        ...theme.inputs,
+        ...theme,
         ...$attrs,
-        autocomplete:getAutocompleteAttribute,
+        error: !!errorMessage,
+        errorMessage,
+        hint: hint ? __(hint) : hint,
+        label: hasTopLabel ? undefined : getLabel,
+        autocomplete: getAutocompleteAttribute,
         stackLabel: !0
       }"
     >
@@ -227,10 +227,9 @@ defineOptions({
                 ref="dateElm"
                 v-bind="{
                   ...pluginOptions.date as any,
-                  ...props,
                   ...$attrs,
                   todayBtn: getProp('todayBtn') === undefined ? !0 : getProp('todayBtn'),
-                  mask:format,
+                  mask: format,
                   multiple,
                   range,
                   modelValue: dateRef ?? null
@@ -258,10 +257,9 @@ defineOptions({
                 v-else
                 ref="timeElm"
                 v-bind="{
-                  ...$props,
                   ...pluginOptions.time,
                   ...$attrs,
-                  mask:format,
+                  mask: format,
                   nowBtn: getProp('nowBtn') === undefined? !0 : getProp('nowBtn'),
                   modelValue: dateRef ?? null
                 }"

package/src/components/form/MRadio.vue

@@ -38,6 +38,7 @@ type P = {
   colProps?: Props['colProps'];
   viewMode?: Props['viewMode'];
   fieldOptions?: Props['fieldOptions'];
+  disable?: Props['disable'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -61,11 +62,12 @@ const props = withDefaults(defineProps<P>(), {
   rowProps: undefined,
   colProps: undefined,
   viewMode: () => !1,
-  fieldOptions: undefined
+  fieldOptions: undefined,
+  disable: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'radio')
-const { getLabel, inputRules, attrs, getProp } = helper
+const { getLabel, inputRules, getProp, theme } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -121,6 +123,7 @@ defineOptions({
           :error-message="errorMessage"
           :hint="__(hint)"
           v-bind="{
+            ...theme,
             ...pluginOptions.input as any,
             ...pluginOptions.field,
             ...$attrs,
@@ -132,13 +135,13 @@ defineOptions({
           <template #control>
             <q-radio
               ref="input"
-              :disable="viewMode"
               :model-value="value"
               :val="val"
               v-bind="{
+                ...theme,
                 ...pluginOptions.radio,
                 ...$attrs,
-                dense: attrs.dense,
+                disable: viewMode ? !0 : disable,
                 checkedIcon: getProp('checkedIcon'),
                 label: undefined
               }"

package/src/components/form/MSelect.vue

@@ -109,9 +109,9 @@ type Emits = {
 }
 const emit = defineEmits<Emits>()
 
-const { __, props: pluginOptions, theme } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
-const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
+const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -217,20 +217,19 @@ defineOptions({
       ref="input"
       v-bind="{
         behavior: $q.platform.is.ios === !0 ? 'dialog' : behavior,
-        ...attrs,
-        ...pluginOptions.select as any,
-        ...( viewMode ? pluginOptions.field : {} ),
+        ...theme,
+        ...$attrs,
+        ...( viewMode ? pluginOptions.field : pluginOptions.select as any ),
         emitValue: emitValue,
         error: !!errorMessage,
         errorMessage,
         hideSelected: hideSelected !== undefined ? hideSelected : search.length > 0,
-        modelValue: value,
-        optionLabel: optionLabel,
-        optionValue: optionValue,
+        optionLabel,
+        optionValue,
         options: getOptions,
-        readonly: readonly,
+        readonly,
         ...(viewMode ? { stackLabel: !0 } : { stackLabel: hasTopLabel ? !1 : (
-          theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense')
+          theme.dense !== undefined ? theme.dense : getProp('dense')
         ) } ),
         useChips: getProp('useChips') === !0 && !multiple ? !1 : getProp('useChips'),
         multiple,
@@ -239,8 +238,9 @@ defineOptions({
         useInput,
         autocomplete: getAutocompleteAttribute,
         clearable: viewMode ? !1 : clearable,
-        hint: __(hint),
+        hint: hint ? __(hint) : hint,
         label: viewMode && hasTopLabel ? undefined : (loading ? undefined : getPlaceholder),
+        modelValue: value,
       }"
       v-on="listeners"
     >
@@ -249,7 +249,7 @@ defineOptions({
         #no-option
       >
         <slot name="no-option">
-          <q-item :dense="theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('optionsDense')">
+          <q-item :dense="theme.dense !== undefined ? theme.dense : getProp('optionsDense')">
             <q-item-section side>
               <template v-if="loading">
                 <q-spinner color="primary" />

package/src/components/form/MToggle.vue

@@ -85,7 +85,7 @@ const props = withDefaults(defineProps<P>(), {
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'toggle', () => ({ choose: !0 }))
-const { getLabel: toggleLabel, inputRules, getProp } = helper
+const { getLabel: toggleLabel, inputRules, getProp, theme } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: toggleLabel,
@@ -96,7 +96,7 @@ const { value, errorMessage, handleChange } = inputScope
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
-const { __, props: pluginOptions, theme } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const getLabel = computed<string | undefined>(() => {
   const def = undefined
   const v = value.value
@@ -169,7 +169,7 @@ defineOptions({
             ...$attrs,
             borderless: !0,
             outlined: !1,
-            dense: theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense')
+            dense: theme.dense !== undefined ? theme.dense : getProp('dense')
           }"
         >
           <q-toggle
@@ -181,8 +181,9 @@ defineOptions({
             :true-value="trueValue"
             v-bind="{
               ...pluginOptions.toggle,
+              ...theme,
               ...$attrs,
-              dense: theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense'),
+              dense: theme.dense !== undefined ? theme.dense : getProp('dense'),
               checkedIcon: getProp('checkedIcon'),
               uncheckedIcon: getProp('uncheckedIcon'),
               color: !!errorMessage ? 'negative' : getProp('color'),

package/src/composable/useBindInput.ts

@@ -25,7 +25,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   })
 
   const themeStyle = computed(() => (key === 'btn' ? mTheme.value.buttons : mTheme.value.inputs) ?? {})
-  const theme = ref({})
+  const theme = ref<Record<string, any>>({})
   for (const k in themeStyle.value) {
     if (props[k] !== undefined) {
       theme.value[k] = props[k]

package/src/types/components.d.ts

@@ -76,7 +76,8 @@ export interface MTransitionsSlots {
 }
 
 export interface MBtnProps extends QBtnProps {
-  native?: boolean;
+  ariaLabel?: boolean | string | null | undefined;
+  nativeLabel?: boolean | undefined;
 }
 
 export interface MBtnSlots extends QBtnSlots {
@@ -576,7 +577,7 @@ export interface BaseCheckboxProps extends Omit<BaseInputsProps, 'topLabel'> {
   colProps?: Record<string, any>;
 }
 
-export interface MCheckboxProps extends Omit<QCheckboxProps, 'name' | 'modelValue' | 'label'>, BaseCheckboxProps {
+export interface MCheckboxProps extends BaseCheckboxProps, Omit<QCheckboxProps, 'name' | 'modelValue' | 'label'> {
   //
 }