@mythpe/quasar-ui-qui 0.0.40 → 0.0.42

package/package.json

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

package/src/components/form/MBtn.vue

@@ -16,160 +16,161 @@ import { myth } from '../../utils'
 import { useBindInput, useMyth } from '../../composable'
 import type { QBtnProps } from 'quasar'
 
-const props = withDefaults(defineProps<Props>(), {
-  /**
-   * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
-   */
-  size: undefined,
-  /**
-   * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
-   * Default value: 'button'
-   */
-  type: undefined,
-  /**
-   * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
-   */
-  to: undefined,
-  /**
-   * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
-   */
-  replace: undefined,
-  /**
-   * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
-   */
-  href: undefined,
-  /**
-   * Native <a> link target attribute; Use it only with 'to' or 'href' props
-   */
-  target: undefined,
-  /**
-   * The text that will be shown on the button
-   */
-  label: undefined,
-  /**
-   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
-   */
-  icon: undefined,
-  /**
-   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
-   */
-  iconRight: undefined,
-  /**
-   * Use 'outline' design
-   */
-  outline: undefined,
-  /**
-   * Use 'flat' design
-   */
-  flat: undefined,
-  /**
-   * Remove shadow
-   */
-  unelevated: undefined,
-  /**
-   * Applies a more prominent border-radius for a squared shape button
-   */
-  rounded: undefined,
-  /**
-   * Use 'push' design
-   */
-  push: undefined,
-  /**
-   * Removes border-radius so borders are squared
-   */
-  square: undefined,
-  /**
-   * Applies a glossy effect
-   */
-  glossy: undefined,
-  /**
-   * Makes button size and shape to fit a Floating Action Button
-   */
-  fab: undefined,
-  /**
-   * Makes button size and shape to fit a small Floating Action Button
-   */
-  fabMini: undefined,
-  /**
-   * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
-   */
-  padding: undefined,
-  /**
-   * Color name for component from the Quasar Color Palette
-   */
-  color: 'primary',
-  /**
-   * Overrides text color (if needed); Color name from the Quasar Color Palette
-   */
-  textColor: undefined,
-  /**
-   * Avoid turning label text into caps (which happens by default)
-   */
-  noCaps: undefined,
-  /**
-   * Avoid label text wrapping
-   */
-  noWrap: undefined,
-  /**
-   * Dense mode; occupies less space
-   */
-  dense: undefined,
-  /**
-   * Configure material ripple (disable it by setting it to 'false' or supply a config object)
-   * Default value: true
-   */
-  ripple: undefined,
-  /**
-   * Tabindex HTML attribute value
-   */
-  tabindex: undefined,
-  /**
-   * Label or content alignment
-   * Default value: 'center'
-   */
-  align: undefined,
-  /**
-   * Stack icon and label vertically instead of on same line (like it is by default)
-   */
-  stack: undefined,
-  /**
-   * When used on flexbox parent, button will stretch to parent's height
-   */
-  stretch: undefined,
-  /**
-   * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
-   * Default value: null
-   */
-  loading: undefined,
-  /**
-   * Put component in disabled mode
-   */
-  disable: undefined,
-  /**
-   * Makes a circle shaped button
-   */
-  round: undefined,
-  /**
-   * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
-   */
-  percentage: undefined,
-  /**
-   * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
-   */
-  darkPercentage: undefined,
-  /**
-   * Emitted when the component is clicked
-   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
-   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
-   */
-  onClick: undefined
-})
+// const props = withDefaults(defineProps<Props>(), {
+//   /**
+//    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
+//    */
+//   size: undefined,
+//   /**
+//    * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
+//    * Default value: 'button'
+//    */
+//   type: undefined,
+//   /**
+//    * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
+//    */
+//   to: undefined,
+//   /**
+//    * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
+//    */
+//   replace: undefined,
+//   /**
+//    * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
+//    */
+//   href: undefined,
+//   /**
+//    * Native <a> link target attribute; Use it only with 'to' or 'href' props
+//    */
+//   target: undefined,
+//   /**
+//    * The text that will be shown on the button
+//    */
+//   label: undefined,
+//   /**
+//    * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
+//    */
+//   icon: undefined,
+//   /**
+//    * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
+//    */
+//   iconRight: undefined,
+//   /**
+//    * Use 'outline' design
+//    */
+//   outline: undefined,
+//   /**
+//    * Use 'flat' design
+//    */
+//   flat: undefined,
+//   /**
+//    * Remove shadow
+//    */
+//   unelevated: undefined,
+//   /**
+//    * Applies a more prominent border-radius for a squared shape button
+//    */
+//   rounded: undefined,
+//   /**
+//    * Use 'push' design
+//    */
+//   push: undefined,
+//   /**
+//    * Removes border-radius so borders are squared
+//    */
+//   square: undefined,
+//   /**
+//    * Applies a glossy effect
+//    */
+//   glossy: undefined,
+//   /**
+//    * Makes button size and shape to fit a Floating Action Button
+//    */
+//   fab: undefined,
+//   /**
+//    * Makes button size and shape to fit a small Floating Action Button
+//    */
+//   fabMini: undefined,
+//   /**
+//    * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
+//    */
+//   padding: undefined,
+//   /**
+//    * Color name for component from the Quasar Color Palette
+//    */
+//   color: 'primary',
+//   /**
+//    * Overrides text color (if needed); Color name from the Quasar Color Palette
+//    */
+//   textColor: undefined,
+//   /**
+//    * Avoid turning label text into caps (which happens by default)
+//    */
+//   noCaps: undefined,
+//   /**
+//    * Avoid label text wrapping
+//    */
+//   noWrap: undefined,
+//   /**
+//    * Dense mode; occupies less space
+//    */
+//   dense: undefined,
+//   /**
+//    * Configure material ripple (disable it by setting it to 'false' or supply a config object)
+//    * Default value: true
+//    */
+//   ripple: undefined,
+//   /**
+//    * Tabindex HTML attribute value
+//    */
+//   tabindex: undefined,
+//   /**
+//    * Label or content alignment
+//    * Default value: 'center'
+//    */
+//   align: undefined,
+//   /**
+//    * Stack icon and label vertically instead of on same line (like it is by default)
+//    */
+//   stack: undefined,
+//   /**
+//    * When used on flexbox parent, button will stretch to parent's height
+//    */
+//   stretch: undefined,
+//   /**
+//    * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
+//    * Default value: null
+//    */
+//   loading: undefined,
+//   /**
+//    * Put component in disabled mode
+//    */
+//   disable: undefined,
+//   /**
+//    * Makes a circle shaped button
+//    */
+//   round: undefined,
+//   /**
+//    * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
+//    */
+//   percentage: undefined,
+//   /**
+//    * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
+//    */
+//   darkPercentage: undefined,
+//   /**
+//    * Emitted when the component is clicked
+//    * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
+//    * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
+//    */
+//   onClick: undefined
+// })
+const props = defineProps<Props>()
 const { __ } = useMyth()
 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 +180,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'
+>>