@mythpe/quasar-ui-qui 0.0.19-dev → 0.0.19

package/src/components/form/MAxios.vue

@@ -0,0 +1,144 @@
+<!--
+  - 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 { MAxiosProps as Props, MSelectModelEmit } from '../../types'
+import type { QSelectSlots } from 'quasar'
+import { computed, onMounted, toValue, useTemplateRef, watch } from 'vue'
+import { useSetFieldValue } from 'vee-validate'
+import MSelect from './MSelect.vue'
+import { useMyth } from '../../composable'
+
+type P = {
+  name: Props['name'];
+  label?: Props['label'];
+  placeholder?: Props['placeholder'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  service?: Props['service'];
+  guest?: Props['guest'];
+  requestWith?: Props['requestWith'];
+  params?: Props['params'];
+  lazy?: Props['lazy'];
+  useChoice?: Props['useChoice'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  label: undefined,
+  placeholder: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
+  service: undefined,
+  guest: undefined,
+  requestWith: undefined,
+  params: () => () => ({}),
+  lazy: () => !1,
+  useChoice: undefined
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+type Emits = {
+  (e: 'model', value: MSelectModelEmit): void;
+}
+const emit = defineEmits<Emits>()
+const search = defineModel<string>('search', { required: !1, default: '' })
+const setFieldValue = useSetFieldValue(() => props.name)
+const { alertError, api } = useMyth()
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const items = defineModel<Props['items']>('items', { required: !1, default: [] })
+const isGuest = computed(() => {
+  const v = toValue(props.guest)
+  return v !== undefined && v !== null && v !== !1
+})
+const prepare = async (fromWatch = !1) => {
+  if (!props.service || loading.value) {
+    return
+  }
+  const method = typeof props.service === 'string'
+    ? (isGuest.value ? api.value[props.service]?.staticIndex : api.value[props.service]?.index)
+    : props.service
+  if (!method) {
+    throw Error(`No service: ${props.service}`)
+  }
+  const params: any = {
+    requestWith: undefined,
+    search: search.value,
+    itemsPerPage: -1,
+    page: 1,
+    staticRequest: 1,
+    ...(toValue(props.params) || {})
+  }
+  if (props.requestWith) {
+    params.requestWith = toValue(props.requestWith)
+  }
+  loading.value = !0
+  items.value = []
+  method({ params })
+    .then(({ _data }: any) => {
+      items.value = _data || []
+    })
+    .catch((e: any) => {
+      alertError(e?.message || 'An error occurred')
+    })
+    .finally(() => {
+      loading.value = !1
+      if (fromWatch) {
+        if (modelValue.value !== null && modelValue.value !== undefined) {
+          setFieldValue(undefined)
+        }
+      }
+    })
+}
+const listeners = {
+  'update:search': prepare,
+  model: (v: MSelectModelEmit) => emit('model', v)
+}
+onMounted(() => {
+  if (!props.lazy) {
+    prepare()
+  }
+})
+watch(props.params, () => prepare(!0), { deep: !0 })
+const input = useTemplateRef<InstanceType<typeof MSelect>>('input')
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({ name: 'MAxios', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MSelect
+    ref="input"
+    v-model="modelValue"
+    v-model:loading="loading"
+    v-model:search="search"
+    :label="label"
+    :name="name"
+    :options="items"
+    :placeholder="placeholder"
+    :view-mode="viewMode"
+    :view-mode-value="viewModeValue"
+    axios-mode
+    no-filter
+    v-bind="$attrs"
+    v-on="listeners"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<QSelectSlots>"
+      :key="slot"
+      #[slot]="inputSlot"
+    >
+      <slot
+        :name="slot"
+        v-bind="inputSlot || {}"
+      />
+    </template>
+  </MSelect>
+</template>

package/src/components/form/MBtn.vue

@@ -10,26 +10,166 @@
   lang="ts"
   setup
 >
-import type { MBtnProps } from '../../types'
-import { useI18n } from 'vue-i18n'
+import type { MBtnProps as Props } from '../../types'
 import { computed } from 'vue'
-import { extend } from 'quasar'
 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
@@ -37,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"
       />
-      <template v-if="options.loading.label === !0">
-        {{ getLabel }}
+      <q-spinner
+        v-if="btnLoading.type === 'spinner'"
+        :class="{'on-left': !!getLabel}"
+        :color="getColor"
+        :size="getSize"
+      />
+      <template v-if="btnLoading.noLabel !== !1 && getLabel">
+        <span>{{ getLabel }}</span>
       </template>
     </template>
     <template