vuetify 3.3.10 → 3.3.11

package/lib/labs/VOtpInput/VOtpInput.mjs

@@ -0,0 +1,213 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Styles
+import "./VOtpInput.css";
+
+// Components
+import { makeVFieldProps, VField } from "../../components/VField/VField.mjs";
+import { VOverlay } from "../../components/VOverlay/VOverlay.mjs";
+import { VProgressCircular } from "../../components/VProgressCircular/VProgressCircular.mjs"; // Composables
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { computed, ref, watch } from 'vue';
+import { focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVOtpInputProps = propsFactory({
+  autofocus: Boolean,
+  divider: String,
+  focusAll: Boolean,
+  label: {
+    type: String,
+    default: '$vuetify.input.otp'
+  },
+  length: {
+    type: [Number, String],
+    default: 6
+  },
+  modelValue: {
+    type: [Number, String],
+    default: undefined
+  },
+  placeholder: String,
+  type: {
+    type: String,
+    default: 'text'
+  },
+  ...makeDimensionProps(),
+  ...makeFocusProps(),
+  ...only(makeVFieldProps({
+    variant: 'outlined'
+  }), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'rounded', 'style', 'theme', 'variant'])
+}, 'VOtpInput');
+export const VOtpInput = genericComponent()({
+  name: 'VOtpInput',
+  props: makeVOtpInputProps(),
+  emits: {
+    finish: val => true,
+    'update:focused': val => true,
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue', '', val => String(val).split(''), val => val.join(''));
+    const {
+      t
+    } = useLocale();
+    const fields = computed(() => Array(Number(props.length)).fill(0));
+    const focusIndex = ref(-1);
+    const contentRef = ref();
+    const inputRef = ref([]);
+    const current = computed(() => inputRef.value[focusIndex.value]);
+    function onInput() {
+      const array = model.value.slice();
+      const value = current.value.value;
+      array[focusIndex.value] = value;
+      model.value = array;
+    }
+    function onKeydown(e) {
+      const array = model.value.slice();
+      const index = focusIndex.value;
+      let target = null;
+      if (e.key === 'ArrowLeft') {
+        target = 'prev';
+      } else if (e.key === 'ArrowRight') {
+        target = 'next';
+      } else if (e.key === 'Backspace') {
+        if (focusIndex.value > 0) {
+          target = 'prev';
+        }
+      } else if (e.key === 'Delete') {
+        array[focusIndex.value] = '';
+        model.value = array;
+        requestAnimationFrame(() => {
+          inputRef.value[index].select();
+        });
+      } else if (props.type === 'number' && isNaN(parseInt(e.key))) {
+        return;
+      } else if (focusIndex.value > model.value.length) {
+        target = model.value.length + 1;
+      } else if (focusIndex.value + 1 !== Number(props.length)) {
+        target = 'next';
+      } else {
+        requestAnimationFrame(() => current.value?.blur());
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (target != null) {
+          focusChild(contentRef.value, target);
+        }
+      });
+    }
+    function onPaste(index, e) {
+      e.preventDefault();
+      e.stopPropagation();
+      model.value = (e?.clipboardData?.getData('Text') ?? '').split('');
+      inputRef.value?.[index].blur();
+    }
+    function reset() {
+      model.value = [];
+    }
+    function onFocus(e, index) {
+      focus();
+      focusIndex.value = index;
+    }
+    function onBlur() {
+      blur();
+      focusIndex.value = -1;
+    }
+    provideDefaults({
+      VField: {
+        disabled: computed(() => props.disabled),
+        error: computed(() => props.error),
+        variant: computed(() => props.variant)
+      }
+    }, {
+      scoped: true
+    });
+    watch(model, val => {
+      if (val.length === props.length) emit('finish', val.join(''));
+    }, {
+      deep: true
+    });
+    watch(focusIndex, val => {
+      if (val < 0) return;
+      IN_BROWSER && window.requestAnimationFrame(() => {
+        inputRef.value[val].select();
+      });
+    });
+    useRender(() => {
+      return _createVNode("div", {
+        "class": ['v-otp-input', {
+          'v-otp-input--divided': !!props.divider
+        }, props.class],
+        "style": [props.style]
+      }, [_createVNode("div", {
+        "ref": contentRef,
+        "class": "v-otp-input__content",
+        "style": [dimensionStyles.value]
+      }, [fields.value.map((_, i) => _createVNode(_Fragment, null, [props.divider && i !== 0 && _createVNode("span", {
+        "class": "v-otp-input__divider"
+      }, [props.divider]), _createVNode(VField, {
+        "focused": isFocused.value && props.focusAll || focusIndex.value === i,
+        "key": i
+      }, {
+        ...slots,
+        default: () => {
+          return _createVNode("input", {
+            "ref": val => inputRef.value[i] = val,
+            "aria-label": t(props.label, i + 1),
+            "autofocus": i === 0 && props.autofocus,
+            "autocomplete": "one-time-code",
+            "class": ['v-otp-input__field'],
+            "inputmode": "text",
+            "min": props.type === 'number' ? 0 : undefined,
+            "maxlength": "1",
+            "placeholder": props.placeholder,
+            "type": props.type,
+            "value": model.value[i],
+            "onInput": onInput,
+            "onFocus": e => onFocus(e, i),
+            "onBlur": onBlur,
+            "onKeydown": onKeydown,
+            "onPaste": event => onPaste(i, event)
+          }, null);
+        }
+      })])), _createVNode(VOverlay, {
+        "contained": true,
+        "content-class": "v-otp-input__loader",
+        "model-value": !!props.loading,
+        "persistent": true
+      }, {
+        default: () => [slots.loader?.() ?? _createVNode(VProgressCircular, {
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": true,
+          "size": "24",
+          "width": "2"
+        }, null)]
+      }), slots.default?.()])]);
+    });
+    return {
+      blur: () => {
+        inputRef.value?.some(input => input.blur());
+      },
+      focus: () => {
+        inputRef.value?.[0].focus();
+      },
+      reset,
+      isFocused
+    };
+  }
+});
+//# sourceMappingURL=VOtpInput.mjs.map

package/lib/labs/VOtpInput/VOtpInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","ref","watch","focusChild","genericComponent","IN_BROWSER","only","propsFactory","useRender","makeVOtpInputProps","autofocus","Boolean","divider","String","focusAll","label","type","default","length","Number","modelValue","undefined","placeholder","variant","VOtpInput","name","props","emits","finish","val","setup","_ref","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","fill","focusIndex","contentRef","inputRef","current","value","onInput","array","slice","onKeydown","e","index","target","key","requestAnimationFrame","select","isNaN","parseInt","onPaste","preventDefault","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","disabled","error","scoped","deep","window","_createVNode","class","style","map","_","i","_Fragment","event","loading","loader","some","input"],"sources":["../../../src/labs/VOtpInput/VOtpInput.tsx"],"sourcesContent":["// Styles\nimport './VOtpInput.sass'\n\n// Components\nimport { makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, watch } from 'vue'\nimport { focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VOtpInputSlots = {\n  default: never\n  loader: never\n}\n\nexport const makeVOtpInputProps = propsFactory({\n  autofocus: Boolean,\n  divider: String,\n  focusAll: Boolean,\n  label: {\n    type: String,\n    default: '$vuetify.input.otp',\n  },\n  length: {\n    type: [Number, String],\n    default: 6,\n  },\n  modelValue: {\n    type: [Number, String],\n    default: undefined,\n  },\n  placeholder: String,\n  type: {\n    type: String as PropType<'text' | 'password' | 'number'>,\n    default: 'text',\n  },\n\n  ...makeDimensionProps(),\n  ...makeFocusProps(),\n  ...only(makeVFieldProps({\n    variant: 'outlined' as const,\n  }), [\n    'baseColor',\n    'bgColor',\n    'class',\n    'color',\n    'disabled',\n    'error',\n    'loading',\n    'rounded',\n    'style',\n    'theme',\n    'variant',\n  ]),\n}, 'VOtpInput')\n\nexport const VOtpInput = genericComponent<VOtpInputSlots>()({\n  name: 'VOtpInput',\n\n  props: makeVOtpInputProps(),\n\n  emits: {\n    finish: (val: string) => true,\n    'update:focused': (val: boolean) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      '',\n      val => String(val).split(''),\n      val => val.join('')\n    )\n    const { t } = useLocale()\n\n    const fields = computed(() => Array(Number(props.length)).fill(0))\n    const focusIndex = ref(-1)\n    const contentRef = ref<HTMLElement>()\n    const inputRef = ref<HTMLInputElement[]>([])\n    const current = computed(() => inputRef.value[focusIndex.value])\n\n    function onInput () {\n      const array = model.value.slice()\n      const value = current.value.value\n\n      array[focusIndex.value] = value\n\n      model.value = array\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const array = model.value.slice()\n      const index = focusIndex.value\n      let target: 'next' | 'prev' | 'first' | 'last' | number | null = null\n\n      if (e.key === 'ArrowLeft') {\n        target = 'prev'\n      } else if (e.key === 'ArrowRight') {\n        target = 'next'\n      } else if (e.key === 'Backspace') {\n        if (focusIndex.value > 0) {\n          target = 'prev'\n        }\n      } else if (e.key === 'Delete') {\n        array[focusIndex.value] = ''\n\n        model.value = array\n\n        requestAnimationFrame(() => {\n          inputRef.value[index].select()\n        })\n      } else if (props.type === 'number' && isNaN(parseInt(e.key))) {\n        return\n      } else if (focusIndex.value > model.value.length) {\n        target = model.value.length + 1\n      } else if (focusIndex.value + 1 !== Number(props.length)) {\n        target = 'next'\n      } else {\n        requestAnimationFrame(() => current.value?.blur())\n\n        return\n      }\n\n      requestAnimationFrame(() => {\n        if (target != null) {\n          focusChild(contentRef.value!, target)\n        }\n      })\n    }\n\n    function onPaste (index: number, e: ClipboardEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      model.value = (e?.clipboardData?.getData('Text') ?? '').split('')\n\n      inputRef.value?.[index].blur()\n    }\n\n    function reset () {\n      model.value = []\n    }\n\n    function onFocus (e: FocusEvent, index: number) {\n      focus()\n\n      focusIndex.value = index\n    }\n\n    function onBlur () {\n      blur()\n\n      focusIndex.value = -1\n    }\n\n    provideDefaults({\n      VField: {\n        disabled: computed(() => props.disabled),\n        error: computed(() => props.error),\n        variant: computed(() => props.variant),\n      },\n    }, { scoped: true })\n\n    watch(model, val => {\n      if (val.length === props.length) emit('finish', val.join(''))\n    }, { deep: true })\n\n    watch(focusIndex, val => {\n      if (val < 0) return\n\n      IN_BROWSER && window.requestAnimationFrame(() => {\n        inputRef.value[val].select()\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-otp-input',\n            {\n              'v-otp-input--divided': !!props.divider,\n            },\n            props.class,\n          ]}\n          style={[\n            props.style,\n          ]}\n        >\n          <div\n            ref={ contentRef }\n            class=\"v-otp-input__content\"\n            style={[\n              dimensionStyles.value,\n            ]}\n          >\n            { fields.value.map((_, i) => (\n              <>\n                { props.divider && i !== 0 && (\n                  <span class=\"v-otp-input__divider\">{ props.divider }</span>\n                )}\n\n                <VField\n                  focused={ (isFocused.value && props.focusAll) || focusIndex.value === i }\n                  key={ i }\n                >\n                  {{\n                    ...slots,\n                    default: () => {\n                      return (\n                        <input\n                          ref={ val => inputRef.value[i] = val as HTMLInputElement }\n                          aria-label={ t(props.label, i + 1) }\n                          autofocus={ i === 0 && props.autofocus }\n                          autocomplete=\"one-time-code\"\n                          class={[\n                            'v-otp-input__field',\n                          ]}\n                          inputmode=\"text\"\n                          min={ props.type === 'number' ? 0 : undefined }\n                          maxlength=\"1\"\n                          placeholder={ props.placeholder }\n                          type={ props.type }\n                          value={ model.value[i] }\n                          onInput={ onInput }\n                          onFocus={ e => onFocus(e, i) }\n                          onBlur={ onBlur }\n                          onKeydown={ onKeydown }\n                          onPaste={ event => onPaste(i, event) }\n                        />\n                      )\n                    },\n                  }}\n                </VField>\n              </>\n            ))}\n\n            <VOverlay\n              contained\n              content-class=\"v-otp-input__loader\"\n              model-value={ !!props.loading }\n              persistent\n            >\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"24\"\n                  width=\"2\"\n                />\n              )}\n            </VOverlay>\n\n            { slots.default?.() }\n          </div>\n        </div>\n      )\n    })\n\n    return {\n      blur: () => {\n        inputRef.value?.some(input => input.blur())\n      },\n      focus: () => {\n        inputRef.value?.[0].focus()\n      },\n      reset,\n      isFocused,\n    }\n  },\n})\n\nexport type VOtpInput = InstanceType<typeof VOtpInput>\n"],"mappings":"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"}

package/lib/labs/VOtpInput/VOtpInput.sass

@@ -0,0 +1,55 @@
+// Imports
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-otp-input
+  @include tools.rounded(4px)
+
+  align-items: center
+  display: flex
+  justify-content: center
+  padding: .5rem
+  position: relative
+
+  .v-field
+    height: 100%
+    margin: 0 .25rem
+
+.v-otp-input__divider
+  margin: 0 8px
+
+.v-otp-input__content
+  align-items: center
+  display: flex
+  height: 64px
+  padding: .5rem
+  justify-content: center
+  max-width: 320px
+  position: relative
+  border-radius: inherit
+
+  .v-otp-input--divided &
+    max-width: 360px
+
+.v-otp-input__field
+  font-size: 1.25rem
+  height: 100%
+  outline: none
+  text-align: center
+  width: 100%
+
+  &[type=number]::-webkit-outer-spin-button,
+  &[type=number]::-webkit-inner-spin-button
+    -webkit-appearance: none
+    margin: 0
+
+  &[type=number]
+    -moz-appearance: textfield
+
+.v-otp-input__loader
+  align-items: center
+  display: flex
+  height: 100%
+  justify-content: center
+  width: 100%

package/lib/labs/VOtpInput/_variables.scss

@@ -0,0 +1,2 @@
+@use '../../styles/settings';
+@use '../../styles/tools';