@mythpe/quasar-ui-qui 0.0.96 → 0.0.98

package/package.json

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

package/src/components/form/MOtp.vue

@@ -17,37 +17,39 @@ import { date } from 'quasar'
 import type { MOtpProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 
-export interface P {
-  // modelValue?: Props['modelValue'];
+type P = {
   inputLength?: Props['inputLength'];
-  numeric?: Props['numeric'];
+  string?: Props['string'];
   time?: Props['time'];
-  hideTime?: Props['hideTime'];
-  hideSendAgain?: Props['hideSendAgain'];
+  noTiming?: Props['noTiming'];
+  noSendAgain?: Props['noSendAgain'];
   topLabel?: Props['topLabel'];
   topLabelProps?: Props['topLabelProps'];
   autofocus?: Props['autofocus'];
   errors?: Props['errors'];
+  type?: Props['type'];
 }
 
-type Emits = {
-  (e: 'end'): void;
-  (e: 'send'): void;
-}
-const emit = defineEmits<Emits>()
-const { __, props: pluginOptions } = useMyth()
 const props = withDefaults(defineProps<P>(), {
-  // modelValue: undefined,
-  inputLength: () => 6,
-  numeric: () => !0,
-  time: () => 120,
-  hideTime: () => !1,
-  hideSendAgain: () => !1,
+  inputLength: 4,
+  string: !1,
+  time: 120,
+  noTiming: !1,
+  noSendAgain: !1,
   topLabel: undefined,
   topLabelProps: undefined,
-  autofocus: () => !1,
-  errors: () => ([])
+  autofocus: !1,
+  errors: () => ([]),
+  type: 'tel'
 })
+type Func = () => void;
+type Emits = {
+  (e: 'countdown', options: { start: Func, clear: Func, startTiming: Func }): void;
+  (e: 'resend', options: { start: Func, clear: Func, startTiming: Func }): void;
+}
+const emit = defineEmits<Emits>()
+
+const { __, props: pluginOptions } = useMyth()
 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'))
@@ -57,22 +59,23 @@ watchEffect(() => {
   fieldValues.value = (modelValue.value || '').toString().split('').slice(0, length.value)
 })
 
-const composite = computed(() => {
-  const nonNullFields = fieldValues.value.filter(v => (v || v?.toString() !== '0'))
+const inputValue = computed(() => {
+  // const nonNullFields = fieldValues.value.filter(v => (v || v?.toString() !== '0'))
+  const nonNullFields = fieldValues.value.filter(v => (v === 0 || v === '0') || ((v?.toString?.()?.length || 0) > 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
+watch(inputValue, (v) => {
+  if (v) {
+    if (props.string) {
+      if (!isNaN(v) && v?.toString?.()?.length?.toString?.() === props.inputLength.toString()) {
+        modelValue.value = v
       }
     } else {
-      modelValue.value = composite.value
+      modelValue.value = v
     }
   }
 })
@@ -93,12 +96,15 @@ const focus = (index: number) => {
     if (index < length.value) {
       fields.value[index]?.select()
     } else {
-      if (composite.value) {
+      if (inputValue.value) {
         fields.value[index - 1]?.blur()
       }
     }
   }
 }
+const select = (index: number) => {
+  fields.value[index]?.select()
+}
 
 const blur = (index: number) => {
   fields.value[index]?.blur()
@@ -106,12 +112,8 @@ const blur = (index: number) => {
 
 const onUpdate = (value: string | number | null, index: number) => {
   if (value) {
-    if (props.numeric !== !1 && isNaN(value)) {
-      nextTick(() => {
-        setTimeout(() => {
-          focus(index)
-        }, 100)
-      })
+    if (props.string && isNaN(value)) {
+      nextTick(() => setTimeout(() => focus(index), 100))
       return
     }
     focus(index + 1)
@@ -122,7 +124,7 @@ const onUpdate = (value: string | number | null, index: number) => {
 }
 
 const onKeyDown = (evt: KeyboardEvent/*,  index: number */) => {
-  if (props.numeric !== !1 && evt.key && evt.key.toString() !== '0' && !parseInt(evt.key) && evt.key?.length === 1) {
+  if (props.string && evt.key && evt.key.toString() !== '0' && !parseInt(evt.key) && evt.key?.length === 1) {
     evt.preventDefault()
   }
 }
@@ -132,12 +134,12 @@ const onKeyUp = (evt: KeyboardEvent, index: number) => {
     return
   }
 
-  if (['Delete'].includes(key)) {
+  if (['delete', 'backspace'].includes(key?.toLowerCase())) {
     focus(index - 1)
     return
   }
 
-  if (key === 'ArrowLeft' || key === 'Backspace') {
+  if (key === 'ArrowLeft') {
     focus(index - 1)
   } else if (key === 'ArrowRight') {
     focus(index + 1)
@@ -153,7 +155,7 @@ const onKeyUp = (evt: KeyboardEvent, index: number) => {
 }
 const onPaste = (evt: ClipboardEvent, index: number) => {
   const value: any = evt.clipboardData?.getData('text')?.toString() || ''
-  if (props.numeric !== !1 && isNaN(value)) {
+  if (props.string && isNaN(value)) {
     evt.preventDefault()
     return
   }
@@ -162,25 +164,28 @@ const onPaste = (evt: ClipboardEvent, index: number) => {
     blur(index)
   }
 }
-
+const onFocusIn = (evt: FocusEvent, index: number) => {
+  select(index)
+}
 const seconds = ref<number>(0)
 const temp = ref<number>(0)
+let interval: ReturnType<typeof setInterval> | null = null
 watch(() => seconds.value, v => (temp.value = v))
 const startTiming = () => {
-  if (props.hideTime) {
+  if (props.noTiming) {
     return
   }
 
   if (seconds.value > 0) {
     --seconds.value
     if (!seconds.value) {
-      emit('end')
+      emit('countdown', { start, clear, startTiming })
     }
   }
 }
 const getTime = computed<string | null>(() => {
   const nullValue = null
-  if (props.hideTime) {
+  if (props.noTiming) {
     return nullValue
   }
   if (seconds.value < 1) {
@@ -193,12 +198,11 @@ const getTime = computed<string | null>(() => {
   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) {
+  if (props.noTiming) {
     return
   }
   clear()
@@ -207,13 +211,13 @@ const start = () => {
 }
 watch(() => props.time, () => start(), { immediate: !0, deep: !0 })
 onBeforeUnmount(() => clear())
-const onSend = () => {
+const onResend = () => {
   if (disabled.value) {
     return
   }
-  emit('send')
+  emit('resend', { start, clear, startTiming })
 }
-defineExpose({ start })
+defineExpose({ start, clear, startTiming, inputValue })
 defineOptions({
   name: 'MOtp',
   inheritAttrs: !1
@@ -232,9 +236,7 @@ defineOptions({
       class="justify-start q-mb-md text-body1"
       v-bind="topLabelProps"
     >
-      <div>
-        {{ __(topLabel) }}
-      </div>
+      {{ __(topLabel) }}
     </MRow>
     <div :class="`row ${$q.lang.rtl ? 'reverse' : ''} q-gutter-x-sm justify-center`">
       <q-input
@@ -244,6 +246,7 @@ defineOptions({
         v-model="fieldValues[i - 1]"
         :autofocus="autofocus && i === 1"
         :error="otpErrors.length > 0"
+        :type="type"
         hide-bottom-space
         input-class="text-center"
         maxlength="1"
@@ -251,6 +254,7 @@ defineOptions({
         outlined
         style="width: 6ch"
         v-bind="{...pluginOptions.otp as any,...$attrs}"
+        @focusin="onFocusIn($event, i - 1)"
         @keydown="onKeyDown($event)"
         @keyup="onKeyUp($event, i - 1)"
         @paste.prevent="onPaste($event,i - 1)"
@@ -266,7 +270,7 @@ defineOptions({
     <slot name="after-input" />
     <MFadeTransition>
       <div
-        v-if="!hideTime"
+        v-if="!noTiming"
         class="q-mt-sm"
       >
         <span>{{ __('myth.otp.expire_line') }}:&nbsp;</span>
@@ -275,13 +279,13 @@ defineOptions({
     </MFadeTransition>
     <MFadeTransition>
       <div
-        v-if="!hideSendAgain"
+        v-if="!noSendAgain"
         class="q-mt-sm"
       >
         <span>{{ __('myth.otp.send_again_title') }}&nbsp;</span>
         <span
           :class="{'text-decoration-underline':!0, disabled,'cursor-pointer': !disabled}"
-          @click="onSend()"
+          @click="onResend()"
         >{{ __('myth.otp.send_again_btn') }}</span>
       </div>
     </MFadeTransition>

package/src/types/components.d.ts

@@ -562,13 +562,37 @@ export type MOptionsProps = Omit<QOptionGroupProps, 'name' | 'modelValue' | 'opt
 }
 
 export type MOtpProps = Omit<QInputProps, 'modelValue'> & {
-  modelValue?: string | number;
+  /**
+   * Value of input after typing all inputs.
+   */
+  modelValue?: any;
+  /**
+   * Length of inputs.
+   */
   inputLength?: string | number;
-  numeric?: boolean;
+  /**
+   * Values is string not number.
+   */
+  string?: boolean;
+  /**
+   * Resend time countdown in seconds.
+   */
   time?: string | number;
-  hideTime?: boolean;
-  hideSendAgain?: boolean;
+  /**
+   * Don't use timing to resend code.
+   */
+  noTiming?: boolean;
+  /**
+   * Don't use send again button.
+   */
+  noSendAgain?: boolean;
+  /**
+   * Top input label.
+   */
   topLabel?: string | undefined;
+  /**
+   * Top input props.
+   */
   topLabelProps?: any | undefined;
   errors?: string[];
 }