@mythpe/quasar-ui-qui 0.0.26-dev → 0.0.27-dev

package/src/components/form/MOptions.vue

@@ -0,0 +1,255 @@
+<!--
+  - 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 type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
+import { reactive, toValue, useTemplateRef } from 'vue'
+import { QField, QOptionGroup, type QOptionGroupSlots } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+import { myth } from '../../utils'
+
+type P = {
+  name: Props['name'];
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  placeholder?: Props['placeholder'];
+  help?: Props['help'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  topLabel?: Props['topLabel'];
+  color?: Props['color'];
+  type?: Props['type'];
+  keepColor?: Props['keepColor'];
+  service?: Props['service'];
+  fullWidth?: Props['fullWidth'];
+  fitWidth?: Props['fullWidth'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  placeholder: undefined,
+  help: undefined,
+  required: undefined,
+  rules: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
+  topLabel: undefined,
+  color: () => 'primary',
+  type: 'radio',
+  keepColor: undefined,
+  service: undefined,
+  fullWidth: () => !1,
+  fitWidth: () => !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const options = defineModel<MOptionsOptionContext[]>('options', { required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'options')
+const { getLabel, inputRules, getProp } = 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 QField> | InstanceType<typeof QOptionGroup>>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+const { alertError, __ } = useMyth()
+const { props: pluginProps } = myth
+const fetchData = async () => {
+  if (props.service) {
+    loading.value = !0
+    try {
+      const { _data } = await props.service()
+      options.value = _data as any
+    } catch (e: any) {
+      alertError(e?._message || e?.message || 'Failed to fetch data')
+    } finally {
+      loading.value = !1
+    }
+  }
+}
+fetchData()
+defineOptions({
+  name: 'MOptions',
+  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="top-label">
+      <MInputLabel
+        v-if="!!getLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          v-if="!!help"
+          :text="help"
+          tooltip
+        />
+        <MTransition>
+          <q-spinner-dots
+            v-if="loading"
+            color="primary"
+            size="25px"
+          />
+        </MTransition>
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <MTransition>
+      <div
+        v-if="!!errorMessage"
+        class="text-negative text-caption"
+      >
+        <q-icon
+          v-if="!!errorMessage"
+          color="negative"
+          name="ion-ios-information-circle-outline"
+          size="20px"
+        />
+        {{ errorMessage }}
+      </div>
+    </MTransition>
+    <component
+      :is="viewMode ? QField : QOptionGroup"
+      ref="input"
+      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :color="!!errorMessage ? 'negative' : getProp('color')"
+      :error="viewMode ? !!errorMessage : undefined"
+      :error-message="viewMode ? errorMessage : undefined"
+      :hint="viewMode ? __(hint) : undefined"
+      :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
+      :label="getLabel"
+      :model-value="value"
+      :options="options"
+      :type="viewMode ? undefined : type"
+      v-bind="{ ...pluginProps.options as any,...( viewMode ? pluginProps.field : {} ), ...$attrs, ...( viewMode ? { stackLabel: !0 } : {} ) }"
+      v-on="listeners"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QOptionGroupSlots>"
+        :key="slot"
+        #[slot]="inputSlot"
+      >
+        <slot
+          :name="slot"
+          v-bind="inputSlot || {}"
+        />
+      </template>
+      <template
+        v-if="viewMode"
+        #control
+      >
+        <slot name="control">
+          <MInputFieldControl>
+            {{ viewModeValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+    </component>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!getLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+    <slot
+      :options="options"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>
+
+<style lang="sass">
+$c: calc(100% / 3)
+
+.m--options
+  .q-checkbox__inner,
+  .q-radio__inner,
+  .q-toggle__inner
+    align-self: flex-start
+
+  &__full_width
+    > div
+      .q-checkbox,
+      .q-radio,
+      .q-toggle,
+      .q-checkbox__label,
+      .q-radio__label,
+      .q-toggle__label
+        width: 100%
+
+  &__fit_width
+    margin-left: 0
+
+    > div
+      width: calc(100% / 3)
+      margin-left: 0
+</style>

package/src/components/form/MOtp.vue

@@ -0,0 +1,292 @@
+<!--
+  - 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 { isNaN } from 'lodash'
+import { computed, nextTick, onBeforeUnmount, onBeforeUpdate, ref, watch, watchEffect } from 'vue'
+import { date } from 'quasar'
+import type { MOtpProps as Props } from '../../types'
+import { useMyth } from '../../composable'
+import { myth } from '../../utils'
+
+export interface P {
+  // modelValue?: Props['modelValue'];
+  inputLength?: Props['inputLength'];
+  numeric?: Props['numeric'];
+  time?: Props['time'];
+  hideTime?: Props['hideTime'];
+  hideSendAgain?: Props['hideSendAgain'];
+  topLabel?: Props['topLabel'];
+  topLabelProps?: Props['topLabelProps'];
+  autofocus?: Props['autofocus'];
+  errors?: Props['errors'];
+}
+
+type Emits = {
+  (e: 'end'): void;
+  (e: 'send'): void;
+}
+const emit = defineEmits<Emits>()
+const { __ } = useMyth()
+const { props: pluginOptions } = myth
+const props = withDefaults(defineProps<P>(), {
+  // modelValue: undefined,
+  inputLength: () => 6,
+  numeric: () => !0,
+  time: () => 120,
+  hideTime: () => !1,
+  hideSendAgain: () => !1,
+  topLabel: undefined,
+  topLabelProps: undefined,
+  autofocus: () => !1,
+  errors: () => ([])
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const otpErrors = computed(() => props.errors ? props.errors : [])
+const length = computed<number>(() => parseInt(props.inputLength?.toString() || '0'))
+const fields = ref<any>([])
+const fieldValues = ref<(string | number | null | undefined)[]>([])
+watchEffect(() => {
+  fieldValues.value = (modelValue.value || '').toString().split('').slice(0, length.value)
+})
+
+const composite = computed(() => {
+  const nonNullFields = fieldValues.value.filter(v => (v || v?.toString() !== '0'))
+  if (length.value !== nonNullFields.length) {
+    return ''
+  }
+  return nonNullFields.join('')
+})
+
+watch(composite, () => {
+  if (composite.value) {
+    if (props.numeric !== !1) {
+      if (!isNaN(composite.value) && composite.value?.toString()?.length?.toString() === props.inputLength.toString()) {
+        modelValue.value = composite.value
+      }
+    } else {
+      modelValue.value = composite.value
+    }
+  }
+})
+
+// make sure to reset the refs before each update
+onBeforeUpdate(() => {
+  fields.value = []
+})
+
+const updateFieldRef = (element: any, index: number) => {
+  if (element) {
+    fields.value[index] = element
+  }
+}
+
+const focus = (index: number) => {
+  if (index >= 0) {
+    if (index < length.value) {
+      fields.value[index]?.select()
+    } else {
+      if (composite.value) {
+        fields.value[index - 1]?.blur()
+      }
+    }
+  }
+}
+
+const blur = (index: number) => {
+  fields.value[index]?.blur()
+}
+
+const onUpdate = (value: string | number | null, index: number) => {
+  if (value) {
+    if (props.numeric !== !1 && isNaN(value)) {
+      nextTick(() => {
+        setTimeout(() => {
+          focus(index)
+        }, 100)
+      })
+      return
+    }
+    focus(index + 1)
+    if (index === (length.value - 1)) {
+      blur(index)
+    }
+  }
+}
+
+const onKeyDown = (evt: KeyboardEvent, index: number) => {
+  if (props.numeric !== !1 && evt.key && evt.key.toString() !== '0' && !parseInt(evt.key) && evt.key?.length === 1) {
+    evt.preventDefault()
+  }
+}
+const onKeyUp = (evt: KeyboardEvent, index: number) => {
+  const key = evt.key
+  if (['Tab', 'Shift', 'Meta', 'Control', 'Alt', 'Enter', ' '].includes(key)) {
+    return
+  }
+
+  if (['Delete'].includes(key)) {
+    focus(index - 1)
+    return
+  }
+
+  if (key === 'ArrowLeft' || key === 'Backspace') {
+    focus(index - 1)
+  } else if (key === 'ArrowRight') {
+    focus(index + 1)
+  }
+
+  // The input is fill & replace the value
+  // if (key.length === 1) {
+  //   onUpdate(key, index)
+  //   const t = [...fieldValues.value]
+  //   t[index] = key
+  //   fieldValues.value = t
+  // }
+}
+const onPaste = (evt: ClipboardEvent, index: number) => {
+  const value: any = evt.clipboardData?.getData('text')?.toString() || ''
+  if (props.numeric !== !1 && isNaN(value)) {
+    evt.preventDefault()
+    return
+  }
+  if (value?.length > 0) {
+    fieldValues.value = value.slice(0, length.value).split('').map((e: string) => parseInt(e) || 0)
+    blur(index)
+  }
+}
+
+const seconds = ref<number>(0)
+const temp = ref<number>(0)
+watch(() => seconds.value, v => (temp.value = v))
+const startTiming = () => {
+  if (props.hideTime) {
+    return
+  }
+
+  if (seconds.value > 0) {
+    --seconds.value
+    if (!seconds.value) {
+      emit('end')
+    }
+  }
+}
+const getTime = computed<string | null>(() => {
+  const nullValue = null
+  if (props.hideTime) {
+    return nullValue
+  }
+  if (seconds.value < 1) {
+    return '00:00'
+  }
+
+  const newDate = date.buildDate({ minutes: 0, seconds: seconds.value, milliseconds: 0 })
+  const m = newDate.getMinutes()
+  const s = newDate.getSeconds()
+  return `${(m < 9 ? '0' : '') + m}:${(s < 9 ? '0' : '') + s}`
+})
+const disabled = computed(() => seconds.value > 0)
+let interval: any = null
+const clear = () => {
+  interval && clearInterval(interval)
+}
+const start = () => {
+  if (props.hideTime) {
+    return
+  }
+  clear()
+  seconds.value = parseInt(props.time?.toString()) || 120
+  interval = setInterval(() => startTiming(), 1000)
+}
+watch(() => props.time, () => start(), { immediate: !0, deep: !0 })
+onBeforeUnmount(() => clear())
+const onSend = () => {
+  if (disabled.value) {
+    return
+  }
+  emit('send')
+}
+defineExpose({ start })
+defineOptions({
+  name: 'MOtp',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    auto
+    class="text-center"
+    v-bind="$attrs"
+  >
+    <slot name="before-all" />
+    <MRow
+      v-if="!!topLabel"
+      class="justify-start q-mb-md text-body1"
+      v-bind="topLabelProps"
+    >
+      <div>
+        {{ __(topLabel) }}
+      </div>
+    </MRow>
+    <div :class="`row ${$q.lang.rtl ? 'reverse' : ''} q-gutter-x-sm justify-center`">
+      <q-input
+        v-for="i in length"
+        :key="i"
+        :ref="el => updateFieldRef(el, i - 1)"
+        v-model="fieldValues[i - 1]"
+        :autofocus="autofocus && i === 1"
+        :error="otpErrors.length > 0"
+        hide-bottom-space
+        input-class="text-center"
+        maxlength="1"
+        no-error-icon
+        outlined
+        style="width: 6ch"
+        v-bind="{...pluginOptions.otp as any,...$attrs}"
+        @keydown="onKeyDown($event, i - 1)"
+        @keyup="onKeyUp($event, i - 1)"
+        @paste.prevent="onPaste($event,i - 1)"
+        @update:model-value="onUpdate($event, i - 1)"
+      />
+    </div>
+    <div
+      v-if="otpErrors.length > 0"
+      class="q-my-md text-negative"
+    >
+      {{ otpErrors[0] }}
+    </div>
+    <slot name="after-input" />
+    <MFadeTransition>
+      <div
+        v-if="!hideTime"
+        class="q-mt-sm"
+      >
+        <span>{{ __('myth.otp.expire_line') }}:&nbsp;</span>
+        <span>{{ getTime }}</span>
+      </div>
+    </MFadeTransition>
+    <MFadeTransition>
+      <div
+        v-if="!hideSendAgain"
+        class="q-mt-sm"
+      >
+        <span>{{ __('myth.otp.send_again_title') }}&nbsp;</span>
+        <span
+          :class="{'text-decoration-underline':!0, disabled,'cursor-pointer': !disabled}"
+          @click="onSend()"
+        >{{ __('myth.otp.send_again_btn') }}</span>
+      </div>
+    </MFadeTransition>
+    <slot name="after-all" />
+  </MCol>
+</template>

package/src/components/form/MRadio.vue

@@ -6,9 +6,12 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import { useField } from 'vee-validate'
-import { defineProps, reactive, toValue, useTemplateRef } from 'vue'
+import { reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 import type { MRadioProps as Props } from '../../types'
 import { QField, QRadio } from 'quasar'

package/src/components/form/MSelect.vue

@@ -6,7 +6,10 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 
 import { useField } from 'vee-validate'
 import type { MSelectProps as Props } from '../../types'

package/src/components/form/MTime.vue

@@ -6,7 +6,10 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import type { MInputSlots, MTimeProps as Props } from '../../types'
 import { useTemplateRef } from 'vue'
 import MPicker from './MPicker.vue'