@mythpe/quasar-ui-qui 0.0.44 → 0.0.45

package/package.json

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

package/src/components/form/MCheckbox.vue

@@ -92,7 +92,6 @@ defineOptions({
         <q-field
           v-bind="{
             ...$attrs,
-            ...theme,
             error: !!errorMessage,
             errorMessage,
             hint: __(hint),

package/src/components/form/MInput.vue

@@ -12,11 +12,10 @@
 >
 
 import { useField } from 'vee-validate'
-import { computed, reactive, toValue, useTemplateRef } from 'vue'
+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 { myth } from '../../utils'
 
 const props = withDefaults(defineProps<Props>(), {
   name: () => '',
@@ -65,9 +64,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __ } = useMyth()
-const options = computed(() => myth.props.value)
 const helper = useBindInput<Props>(() => props, 'input')
-const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
+const { theme, attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -128,17 +126,15 @@ defineOptions({
       :is="viewMode ? QField : QInput"
       ref="input"
       v-bind="{
-        ...( viewMode ? options.field : {} ),
-        ...$props,
         ...attrs as any,
         ...( viewMode ? { stackLabel: !0 } : {} ),
-        autocomplete:getAutocompleteAttribute,
-        clearable:viewMode?!1:clearable,
-        error:!!errorMessage,
+        autocomplete: getAutocompleteAttribute,
+        clearable: viewMode ? !1 : clearable,
+        error: !!errorMessage,
         errorMessage,
-        hint:__(hint),
-        label:hasTopLabel?undefined:getLabel,
-        modelValue:value,
+        hint: __(hint),
+        label: hasTopLabel?undefined:getLabel,
+        modelValue: value,
         placeholder:getPlaceholder
       }"
       v-on="listeners"

package/src/components/form/MPassword.vue

@@ -18,12 +18,14 @@ type P = {
   name?: Props['name'];
   icon?: Props['icon'];
   noToggle?: Props['noToggle'];
+  viewMode?: Props['viewMode'];
 }
 
 withDefaults(defineProps<P>(), {
   name: () => '',
   icon: () => !1,
-  noToggle: () => !1
+  noToggle: () => !1,
+  viewMode: () => !1
 })
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const inputType = ref<'text' | 'password'>('password')
@@ -41,9 +43,11 @@ defineOptions({
 <template>
   <MInput
     ref="input"
-    v-model="modelValue"
+    :model-value="viewMode ? undefined : modelValue"
     :name="name"
+    :view-mode="viewMode"
     v-bind="{...$attrs,type:inputType}"
+    @update:model-value="modelValue = $event"
   >
     <template
       v-if="icon && !Boolean($slots.prepend)"
@@ -52,7 +56,7 @@ defineOptions({
       <q-icon name="password" />
     </template>
     <template
-      v-if="!noToggle && !Boolean($slots.prepend)"
+      v-if="!noToggle && !Boolean($slots.prepend) && !viewMode"
       #append
     >
       <q-btn

package/src/components/form/MSelect.vue

@@ -113,7 +113,7 @@ const emit = defineEmits<Emits>()
 const { __ } = useMyth()
 const { props: pluginOptions, themeInput } = myth
 const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
-const { hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
+const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -216,22 +216,20 @@ defineOptions({
     <component
       :is="viewMode ? QField : QSelect"
       ref="input"
-      :behavior="$q.platform.is.ios === !0 ? 'dialog' : behavior"
-      :emit-value="emitValue"
-      :error="!!errorMessage"
-      :error-message="errorMessage"
-      :hide-selected="hideSelected !== undefined ? hideSelected : search.length > 0"
-      :hint="__(hint)"
-      :label="viewMode && hasTopLabel ? undefined : (loading ? undefined : getPlaceholder)"
-      :model-value="value"
-      :option-label="optionLabel"
-      :option-value="optionValue"
-      :options="getOptions"
-      :readonly="readonly"
       v-bind="{
+        behavior: $q.platform.is.ios === !0 ? 'dialog' : behavior,
+        ...attrs,
         ...pluginOptions.select as any,
         ...( viewMode ? pluginOptions.field : {} ),
-        ...$attrs,
+        emitValue: emitValue,
+        error: !!errorMessage,
+        errorMessage,
+        hideSelected: hideSelected !== undefined ? hideSelected : search.length > 0,
+        modelValue: value,
+        optionLabel: optionLabel,
+        optionValue: optionValue,
+        options: getOptions,
+        readonly: readonly,
         ...(viewMode ? { stackLabel: !0 } : { stackLabel: hasTopLabel ? !1 : (
           themeInput.dense !== undefined ? themeInput.dense : getProp('dense')
         ) } ),
@@ -240,8 +238,10 @@ defineOptions({
         mapOptions,
         loading,
         useInput,
-        autocomplete:getAutocompleteAttribute,
-        clearable: viewMode ? !1 : clearable
+        autocomplete: getAutocompleteAttribute,
+        clearable: viewMode ? !1 : clearable,
+        hint: __(hint),
+        label: viewMode && hasTopLabel ? undefined : (loading ? undefined : getPlaceholder),
       }"
       v-on="listeners"
     >

package/src/composable/useBindInput.ts

@@ -23,6 +23,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   })
 
   const { themeBtn, themeInput, props: pluginProps } = myth
+  // console.log(themeInput.value)
   const themeStyle = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
   const theme = ref({})
   for (const k in themeStyle.value) {

package/src/utils/Str.ts

@@ -7,8 +7,8 @@
  */
 
 import lodash from 'lodash'
-// import inflection from 'lodash-inflection'
-// lodash.mixin(inflection)
+import inflection from 'lodash-inflection'
+lodash.mixin(inflection)
 
 export const Str = {
   /**

package/src/utils/myth.ts

@@ -83,6 +83,9 @@ export const myth = {
    * Default Inputs style.
    */
   themeInput,
+  setThemeInput (v: ThemeInput) {
+    themeInput.value = v
+  },
   /**
    * Theme Rounded.
    */

package/src/utils/vue-plugin.ts

@@ -14,6 +14,7 @@ import { myth } from './myth'
 import type { InstallOptions } from '../types'
 
 function install (app: App, options: InstallOptions = {}) {
+  console.log(options)
   if (options.rounded !== undefined) {
     myth.rounded.value = options.rounded
   }
@@ -36,7 +37,7 @@ function install (app: App, options: InstallOptions = {}) {
     myth.themeBtn.value = options.themeBtn
   }
   if (options.themeInput !== undefined) {
-    myth.themeInput.value = options.themeInput
+    myth.setThemeInput(options.themeInput)
   }
   if (options.baseUrl !== undefined) {
     myth.baseUrl.value = options.baseUrl