@mythpe/quasar-ui-qui 0.0.23 → 0.0.24-dev

package/src/components/form/MBtn.vue

@@ -1,24 +1,175 @@
-<script lang="ts" setup>
-import type { MBtnProps } from '../../types'
-import { useI18n } from 'vue-i18n'
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+import type { MBtnProps as Props } from '../../types'
 import { computed } from 'vue'
-import { extend } from 'quasar'
-import { myth } from '../../myth'
+import { myth } from '../../utils'
+import { useBindInput, useMyth } from '../../composable'
+import type { QBtnProps } from 'quasar'
 
-const props = defineProps<MBtnProps>()
-const options = computed(() => myth.options.value.btn ?? {})
-const { t, te } = useI18n({ useScope: 'global' })
-const getLabel = computed(() => {
-  if (props.label !== undefined) {
-    if (te(`attributes.${props.label}`)) {
-      return t(`attributes.${props.label}`)
-    }
-    if (te(`${props.label}`)) {
-      return t(`${props.label}`)
-    }
-  }
-  return props.label
+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 { __ } = 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')
 defineOptions({
   name: 'MBtn',
   inheritAttrs: !1
@@ -26,130 +177,157 @@ defineOptions({
 </script>
 
 <template>
-  <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
+  <q-btn v-bind="{...$props,...attrs,label:loading?`${getLabel} ...`:getLabel}">
     <template
-      v-if="!!options.loading && !$slots.loading"
+      v-if="!!btnLoading && !$slots.loading"
       #loading
     >
       <q-spinner-audio
-        v-if="options.loading.type === 'audio'"
-        :color="options.loading.color"
-        :size="options.loading.size"
-        class="on-left"
+        v-if="btnLoading.type === 'audio'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-ball
-        v-if="options.loading.type === 'ball'"
-        :color="options.loading.color"
-        :size="options.loading.size"
-        class="on-left"
+        v-if="btnLoading.type === 'ball'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-bars
-        v-if="options.loading.type === 'bars'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'bars'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-box
-        v-if="options.loading.type === 'box'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'box'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-clock
-        v-if="options.loading.type === 'clock'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'clock'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-comment
-        v-if="options.loading.type === 'comment'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'comment'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-cube
-        v-if="options.loading.type === 'cube'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'cube'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-dots
-        v-if="options.loading.type === 'dots'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'dots'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-facebook
-        v-if="options.loading.type === 'facebook'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'facebook'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-gears
-        v-if="options.loading.type === 'gears'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'gears'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-grid
-        v-if="options.loading.type === 'grid'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'grid'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-hearts
-        v-if="options.loading.type === 'hearts'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'hearts'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-hearts
-        v-if="options.loading.type === 'hearts'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'hearts'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-hourglass
-        v-if="options.loading.type === 'hourglass'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'hourglass'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-infinity
-        v-if="options.loading.type === 'infinity'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'infinity'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-ios
-        v-if="options.loading.type === 'ios'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'ios'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-orbit
-        v-if="options.loading.type === 'orbit'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'orbit'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-oval
-        v-if="options.loading.type === 'oval'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'oval'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-pie
-        v-if="options.loading.type === 'pie'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'pie'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-puff
-        v-if="options.loading.type === 'puff'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'puff'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-radio
-        v-if="options.loading.type === 'radio'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'radio'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-rings
-        v-if="options.loading.type === 'rings'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'rings'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
       <q-spinner-tail
-        v-if="options.loading.type === 'tail'"
-        :color="options.loading.color"
-        class="on-left"
+        v-if="btnLoading.type === 'tail'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
+      />
+      <q-spinner
+        v-if="btnLoading.type === 'spinner'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
       />
-      <template v-if="options.loading.label === !0">
-        {{ getLabel }}
+      <template v-if="btnLoading.noLabel !== !1 && getLabel">
+        <span>{{ getLabel }}</span>
       </template>
     </template>
     <template

package/src/components/form/MCheckbox.vue

@@ -0,0 +1,123 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+import { useField } from 'vee-validate'
+import { computed, reactive, toValue, useTemplateRef } from 'vue'
+import { useBindInput, useMyth } from '../../composable'
+import type { MCheckboxProps as Props } from '../../types'
+import { QCheckbox, QField } from 'quasar'
+import { myth } from '../../utils'
+
+const props = defineProps<Props>()
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const { __ } = useMyth()
+const helper = useBindInput<any>(() => props, 'checkbox')
+const { getLabel, attrs, inputRules } = helper
+const options = computed(() => myth.props.value)
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  type: 'checkbox',
+  checkedValue: () => props.val,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange } = inputScope
+
+const listeners = {
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<InstanceType<typeof QCheckbox> | null>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({ name: 'MCheckbox', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot
+      name="top-input"
+      v-bind="scopes"
+    />
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption text-caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <MRow v-bind="rowProps">
+      <slot
+        name="before"
+        v-bind="scopes"
+      />
+      <MCol v-bind="colProps">
+        <q-field
+          :error="!!errorMessage"
+          :error-message="errorMessage"
+          :hint="__(hint)"
+          v-bind="{
+            ...$props,
+            ...attrs,
+            borderless: !0,
+            outlined: !1,
+            stackLabel: !0
+          }"
+        >
+          <q-checkbox
+            ref="input"
+            v-bind="{
+              ...$props,
+              ...attrs,
+              modelValue:value,
+              disable:viewMode,
+              label: undefined,
+            }"
+            v-on="listeners"
+          >
+            <template #default>
+              <MRow class="items-center">
+                <div
+                  v-if="!!getLabel"
+                  class="text-color"
+                >
+                  {{ getLabel }}
+                </div>
+                <MHelpRow
+                  v-if="!!help"
+                  :right="!!getLabel"
+                  :text="help"
+                  tooltip
+                />
+              </MRow>
+            </template>
+          </q-checkbox>
+        </q-field>
+        <slot v-bind="scopes" />
+      </MCol>
+      <slot
+        name="after"
+        v-bind="scopes"
+      />
+    </MRow>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/MColor.vue

@@ -0,0 +1,122 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+import type { MInputProps as Props, MInputSlots } from '../../types'
+import { reactive, toValue, useTemplateRef } from 'vue'
+import { useField } from 'vee-validate'
+import { useBindInput } from '../../composable'
+import { QField, QInput } from 'quasar'
+
+const props = withDefaults(defineProps<Props>(), {
+  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,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  required: undefined,
+  autocomplete: undefined,
+  topLabel: undefined,
+  mobile: undefined,
+  email: undefined,
+  float: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<Props>(() => props, 'input')
+const { getLabel, inputRules, attrs } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange, handleBlur } = inputScope
+
+const listeners = {
+  blur: (v: any) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<InstanceType<typeof QInput> | InstanceType<typeof QField>>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({
+  name: 'MColor',
+  inheritAttrs: !1
+})
+
+</script>
+
+<template>
+  <MInput
+    ref="input"
+    v-bind="{...$props,...attrs,rules:inputRules,modelValue:value}"
+    v-on="listeners"
+  >
+    <template #prepend>
+      <div
+        :style="`width: 20px; height: 20px; background-color: ${value};`"
+        class="m--input__color-preview"
+      />
+    </template>
+    <template #append>
+      <q-icon
+        class="cursor-pointer"
+        name="colorize"
+      >
+        <q-popup-proxy
+          cover
+          transition-hide="scale"
+          transition-show="scale"
+        >
+          <q-color v-model="value" />
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MInput>
+</template>