@mythpe/quasar-ui-qui 0.0.39 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -49,18 +49,18 @@
     "@types/express": "^5.0.0",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
     "core-js": "^3.39.0",
     "cssnano": "^7.0.6",
-    "eslint": "^9.15.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.14.0",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-vue": "^9.31.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.0.0",
     "fs-extra": "^11.2.0",
     "open": "^10.1.0",
     "postcss": "^8.4.49",

package/src/components/form/MBtn.vue

@@ -169,7 +169,7 @@ const btnLoading = computed(() => myth.btnLoading.value)
 const getLabel = computed<string | undefined>(() => props.label ? (__(props.label) ?? undefined) : undefined)
 const getSize = computed<string>(() => myth.btnLoading.value?.size || '20px')
 const getColor = computed<string | undefined>(() => myth.btnLoading.value?.color || undefined)
-const { attrs } = useBindInput<QBtnProps & { name: string }>(() => props, 'btn')
+const { theme, attrs } = useBindInput<QBtnProps & { name: string }>(() => props, 'btn')
 defineOptions({
   name: 'MBtn',
   inheritAttrs: !1
@@ -179,8 +179,8 @@ defineOptions({
 <template>
   <q-btn
     v-bind="{
-      ...$props,
-      ...attrs,
+      ...$attrs,
+      ...theme,
       label: loading ? `${getLabel} ...` : getLabel,
       ariaLabel: 'ariaLabel' in attrs && attrs.ariaLabel ? __(attrs.ariaLabel) : getLabel
     }"

package/src/components/form/MCheckbox.vue

@@ -19,11 +19,6 @@ import { QCheckbox, QField } from 'quasar'
 const props = withDefaults(defineProps<Props>(), {
   name: '',
   label: undefined,
-  toggleIndeterminate: undefined,
-  leftLabel: undefined,
-  keepColor: undefined,
-  dark: undefined,
-  dense: undefined,
   disable: undefined,
   viewMode: undefined,
   auto: undefined,
@@ -42,8 +37,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __ } = useMyth()
-const helper = useBindInput<any>(() => props, 'checkbox')
-const { getLabel, attrs, inputRules } = helper
+const helper = useBindInput<Props>(() => props, 'checkbox')
+const { getLabel, inputRules, theme } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -96,11 +91,11 @@ defineOptions({
       <MCol v-bind="colProps">
         <q-field
           v-bind="{
-            ...$props,
-            ...attrs,
-            error:!!errorMessage,
+            ...$attrs,
+            ...theme,
+            error: !!errorMessage,
             errorMessage,
-            hint:__(hint),
+            hint: __(hint),
             borderless: !0,
             outlined: !1,
             stackLabel: !0
@@ -109,10 +104,10 @@ defineOptions({
           <q-checkbox
             ref="input"
             v-bind="{
-              ...$props,
-              ...attrs,
-              modelValue:value,
-              disable:viewMode,
+              ...$attrs,
+              ...theme,
+              modelValue: value,
+              disable: viewMode === !0 ? viewMode : disable,
               label: undefined,
             }"
             v-on="listeners"

package/src/composable/useBindInput.ts

@@ -23,10 +23,10 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   })
 
   const { themeBtn, themeInput, props: pluginProps } = myth
-  const theme = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
-  const mergedTheme = ref({})
-  for (const k in theme.value) {
-    mergedTheme.value[k] = props[k] !== undefined ? theme.value[k] : props[k]
+  const themeStyle = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
+  const theme = ref({})
+  for (const k in themeStyle.value) {
+    theme.value[k] = props[k] !== undefined ? props[k] : themeStyle.value[k]
   }
   /**
    * Top Label Style.
@@ -35,8 +35,8 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
     if (props.topLabel !== undefined) {
       return props.topLabel !== !1
     }
-    if ('topLabel' in theme.value && theme.value.topLabel !== undefined) {
-      return theme.value.topLabel !== !1
+    if ('topLabel' in themeStyle.value && themeStyle.value.topLabel !== undefined) {
+      return themeStyle.value.topLabel !== !1
     }
     if (pluginProps.value[key] && 'topLabel' in pluginProps.value[key]) {
       return pluginProps.value[key]?.topLabel !== !1
@@ -195,7 +195,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   const attrs = computed(() => ({
     ...props,
     ...attributes,
-    ...mergedTheme.value
+    ...theme.value
   }))
   return {
     inputRules,
@@ -205,6 +205,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
     getPlaceholder,
     getAutocompleteAttribute,
     getProp,
-    attrs
+    attrs,
+    theme
   }
 }

package/src/types/theme.d.ts

@@ -5,8 +5,37 @@ export type ThemeShadow = string | number | 'transition' | 'none';
 export type ThemeRounded = boolean;
 export type ThemeFluid = boolean;
 export type ThemeInput =
-  Partial<Pick<QInputProps, 'standout' | 'dense' | 'filled' | 'outlined' | 'rounded' | 'borderless' | 'counter' | 'noErrorIcon' | 'hideBottomSpace' | 'bottomSlots' | 'clearIcon' | 'itemAligned' | 'square' | 'stackLabel'>>
+  Partial<Pick<QInputProps, 'standout'
+    | 'dense'
+    | 'filled'
+    | 'outlined'
+    | 'rounded'
+    | 'borderless'
+    | 'counter'
+    | 'noErrorIcon'
+    | 'hideBottomSpace'
+    | 'bottomSlots'
+    | 'clearIcon'
+    | 'itemAligned'
+    | 'square'
+    | 'stackLabel'
+    | 'color'
+    | 'textColor'
+  >>
   & {
   topLabel?: boolean;
 }
-export type ThemeBtn = Partial<Pick<QBtnProps, 'flat' | 'outline' | 'push' | 'unelevated' | 'noCaps' | 'rounded' | 'glossy' | 'square' | 'padding' | 'ripple' | 'dense'>>
+export type ThemeBtn = Partial<Pick<QBtnProps, 'flat'
+  | 'outline'
+  | 'push'
+  | 'unelevated'
+  | 'noCaps'
+  | 'rounded'
+  | 'glossy'
+  | 'square'
+  | 'padding'
+  | 'ripple'
+  | 'dense'
+  | 'color'
+  | 'textColor'
+>>

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 = {
   /**