@mythpe/quasar-ui-qui 0.0.58 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "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/MInput.vue

@@ -12,41 +12,39 @@
 >
 import { useField } from 'vee-validate'
 import { reactive, toValue, useTemplateRef } from 'vue'
-import type { MInputProps as Props } from '../../types'
 import { QField, QInput, type QInputSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
+import type { MInputProps as Props } from '../../types'
+
+type 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'];
+  fieldOptions?: Props['fieldOptions'];
+  clearable?: Props['clearable'];
+  mobile?: Props['mobile'];
+  email?: Props['email'];
+  float?: Props['float'];
+}
 
-const props = withDefaults(defineProps<Props>(), {
+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,
@@ -54,9 +52,19 @@ const props = withDefaults(defineProps<Props>(), {
   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,
+  fieldOptions: undefined,
+  clearable: undefined,
   mobile: undefined,
   email: undefined,
   float: undefined
@@ -64,7 +72,7 @@ const props = withDefaults(defineProps<Props>(), {
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __ } = useMyth()
 const helper = useBindInput<Props>(() => props, 'input')
-const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
+const { theme, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -126,17 +134,17 @@ defineOptions({
       :is="viewMode ? QField : QInput"
       ref="input"
       v-bind="{
-        ...attrs as any,
+        ...$attrs,
+        ...theme,
         ...( viewMode ? { stackLabel: !0 } : {} ),
         autocomplete: getAutocompleteAttribute,
         clearable: viewMode ? !1 : clearable,
         error: !!errorMessage,
-        required,
         errorMessage,
         hint: __(hint),
-        label: hasTopLabel?undefined:getLabel,
+        label: hasTopLabel ? undefined : getLabel,
         modelValue: value,
-        placeholder:getPlaceholder
+        placeholder: getPlaceholder
       }"
       v-on="listeners"
     >

package/src/composable/useBindInput.ts

@@ -27,7 +27,15 @@ 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({})
   for (const k in themeStyle.value) {
-    theme.value[k] = props[k] !== undefined ? props[k] : themeStyle.value[k]
+    if (props[k] !== undefined) {
+      theme.value[k] = props[k]
+      continue
+    }
+    if (attributes[k] !== undefined) {
+      theme.value[k] = attributes[k]
+      continue
+    }
+    theme.value[k] = themeStyle.value[k]
   }
 
   const hasTopLabel = computed(() => {
@@ -195,7 +203,6 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
     return Object.values(rules).filter(e => !!e).length > 0 ? rules : undefined
   })
   const attrs = computed(() => ({
-    ...props,
     ...attributes,
     ...theme.value
   }))

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 {