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

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/MPassword.vue

@@ -0,0 +1,73 @@
+<!--
+  - 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 { MInputSlots, MPasswordProps as Props } from '../../types'
+import MInput from './MInput.vue'
+import { ref, useTemplateRef } from 'vue'
+
+type P = {
+  name?: Props['name'];
+  icon?: Props['icon'];
+  noToggle?: Props['noToggle'];
+}
+
+withDefaults(defineProps<P>(), {
+  name: () => '',
+  icon: () => !1,
+  noToggle: () => !1
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const inputType = ref<'text' | 'password'>('password')
+const togglePassword = () => {
+  inputType.value = inputType.value === 'text' ? 'password' : 'text'
+}
+const input = useTemplateRef<InstanceType<typeof MInput>>('input')
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({
+  name: 'MPassword',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MInput
+    ref="input"
+    v-model="modelValue"
+    :name="name"
+    v-bind="{...$attrs,type:inputType}"
+  >
+    <template
+      v-if="icon && !Boolean($slots.prepend)"
+      #prepend
+    >
+      <q-icon name="password" />
+    </template>
+    <template
+      v-if="!noToggle && !Boolean($slots.prepend)"
+      #append
+    >
+      <q-btn
+        :icon="'ion-ios-eye' + (inputType !== 'password' ? '-off' : '')"
+        flat
+        round
+        @click="togglePassword()"
+      />
+    </template>
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MInput>
+</template>

package/src/components/form/MPicker.vue

@@ -0,0 +1,313 @@
+<!--
+  - 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 { computed, reactive, ref, toValue, useTemplateRef } from 'vue'
+import type { MPickerProps as Props } from '../../types'
+import { useBindInput, useMyth } from '../../composable'
+import { useField } from 'vee-validate'
+import { QDate, QField, QFieldSlots, QTime } from 'quasar'
+import { myth } from '../../utils'
+
+const defSeparator = ' - '
+const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
+  name: '',
+  type: undefined,
+  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,
+  landscape: undefined,
+  flat: undefined,
+  bordered: undefined,
+  yearsInMonthView: undefined,
+  noUnset: undefined,
+  todayBtn: undefined,
+  minimal: undefined,
+  multiple: undefined,
+  range: undefined,
+  emitImmediately: undefined,
+  format24h: undefined,
+  withSeconds: undefined,
+  nowBtn: undefined,
+  useChoice: undefined
+})
+
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const helper = useBindInput<Props>(() => props, 'picker', () => ({ choose: !0 }))
+const { hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
+const { __ } = useMyth()
+const options = computed(() => myth.props.value)
+const theme = computed(() => myth.themeInput)
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const scopes = reactive(inputScope)
+const { value, errorMessage, handleChange } = inputScope
+
+const isDate = computed(() => props.type !== 'time')
+// const mask = computed(() => {
+//   if (props.range || props.multiple) {
+//     return undefined
+//     // return isDate.value ? '####/##/## - ####-##-##' : '##:## - ##:##'
+//   }
+//   return isDate.value ? '####/##/##' : '##:##'
+// })
+const format = computed(() => isDate.value ? 'YYYY/MM/DD' : 'HH:mm')
+const dateRef = ref<string | null>(null)
+const onBeforeShow = () => {
+  dateRef.value = value.value || null
+}
+const onBeforeHide = () => {
+  dateRef.value = null
+}
+const saveDialog = () => {
+  let newVal: any = dateRef.value
+  if (typeof newVal === 'object' && isDate.value) {
+    const values: any[] = Object.values(newVal)
+    for (const aKey in values) {
+      if (typeof values[aKey] === 'object') {
+        values[aKey] = Object.values(values[aKey])
+      }
+    }
+    newVal = values
+  }
+  handleChange(newVal, !!errorMessage.value)
+}
+
+const dateElm = useTemplateRef<InstanceType<typeof QDate>>('dateElm')
+const timeElm = useTemplateRef<InstanceType<typeof QTime>>('timeElm')
+defineExpose<{ input: typeof dateElm | typeof timeElm }>({ input: isDate.value ? dateElm : timeElm })
+defineOptions({
+  name: 'MPicker',
+  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="hasTopLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <q-field
+      ref="input"
+      v-model="value"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hint="__(hint)"
+      :label="hasTopLabel ? undefined : getLabel"
+      v-bind="{
+        ...options.input as any,
+        ...options.field as any,
+        ...theme,
+        ...$attrs,
+        autocomplete:getAutocompleteAttribute,
+        stackLabel: !0
+      }"
+    >
+      <template #control>
+        <slot name="control">
+          <div
+            v-if="!disable && !readonly && !viewMode && !!getPlaceholder && !value"
+            class="q-placeholder"
+          >
+            {{ getPlaceholder }}
+          </div>
+          <template v-else-if="viewMode && viewModeValue">
+            <div>{{ viewModeValue?.toString() }}</div>
+          </template>
+          <template v-else>
+            <div>
+              <template v-if="value && Array.isArray(value)">
+                {{ value.join(rangeSeparator || options.picker?.rangeSeparator || defSeparator) }}
+              </template>
+              <template v-else>
+                {{ value?.toString() }}
+              </template>
+            </div>
+          </template>
+        </slot>
+      </template>
+      <template #append>
+        <q-btn
+          v-if="!disable && !readonly && !viewMode"
+          :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
+          flat
+          round
+          v-bind="{...options?.pickerBtn, ...btnProps}"
+        >
+          <q-popup-proxy
+            cover
+            no-shake
+            persistent
+            transition-hide="jump-down"
+            transition-show="jump-up"
+            @before-show="onBeforeShow()"
+            @before-hide="onBeforeHide()"
+          >
+            <q-card>
+              <q-date
+                v-if="isDate"
+                ref="dateElm"
+                v-bind="{
+                  ...options.date as any,
+                  ...props,
+                  ...$attrs,
+                  todayBtn: getProp('todayBtn') === undefined ? !0 : getProp('todayBtn'),
+                  mask:format,
+                  multiple,
+                  range,
+                  modelValue: dateRef ?? null
+                }"
+                @update:model-value="dateRef = $event ?? null"
+              >
+                <template #default>
+                  <div class="row items-center justify-end">
+                    <MBtn
+                      v-close-popup
+                      :label="__('close')"
+                      color="negative"
+                      flat
+                    />
+                    <MBtn
+                      v-close-popup
+                      :label="__('save')"
+                      flat
+                      @click="saveDialog()"
+                    />
+                  </div>
+                </template>
+              </q-date>
+              <q-time
+                v-else
+                ref="timeElm"
+                v-bind="{
+                  ...$props,
+                  ...options.time,
+                  ...$attrs,
+                  mask:format,
+                  nowBtn: getProp('nowBtn') === undefined? !0 : getProp('nowBtn'),
+                  modelValue: dateRef ?? null
+                }"
+                @update:model-value="dateRef = $event ?? null"
+              >
+                <div class="row items-center justify-end">
+                  <MBtn
+                    v-close-popup
+                    :label="__('close')"
+                    color="negative"
+                    flat
+                  />
+                  <MBtn
+                    v-close-popup
+                    :label="__('save')"
+                    flat
+                    @click="saveDialog()"
+                  />
+                </div>
+              </q-time>
+            </q-card>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+
+      <template
+        v-for="(_,slot) in $slots as Readonly<QFieldSlots>"
+        :key="slot"
+        #[slot]
+      >
+        <slot :name="slot" />
+      </template>
+    </q-field>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>