@mythpe/quasar-ui-qui 0.0.58 → 0.0.59

package/package.json

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

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
   }))