vuetify 3.3.11 → 3.3.13

package/lib/labs/VOtpInput/VOtpInput.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VOtpInput.css";
 
@@ -12,7 +12,7 @@ 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
+import { filterInputAttrs, focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVOtpInputProps = propsFactory({
   autofocus: Boolean,
   divider: String,
@@ -50,6 +50,7 @@ export const VOtpInput = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      attrs,
       emit,
       slots
     } = _ref;
@@ -75,34 +76,36 @@ export const VOtpInput = genericComponent()({
       const value = current.value.value;
       array[focusIndex.value] = value;
       model.value = array;
+      let target = null;
+      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());
+      }
+      if (target) focusChild(contentRef.value, target);
     }
     function onKeydown(e) {
       const array = model.value.slice();
       const index = focusIndex.value;
       let target = null;
+      if (!['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) return;
+      e.preventDefault();
       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') {
+      } else if (['Backspace', 'Delete'].includes(e.key)) {
         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;
+        if (focusIndex.value > 0 && e.key === 'Backspace') {
+          target = 'prev';
+        } else {
+          requestAnimationFrame(() => {
+            inputRef.value[index].select();
+          });
+        }
       }
       requestAnimationFrame(() => {
         if (target != null) {
@@ -148,12 +151,13 @@ export const VOtpInput = genericComponent()({
       });
     });
     useRender(() => {
-      return _createVNode("div", {
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      return _createVNode("div", _mergeProps({
         "class": ['v-otp-input', {
           'v-otp-input--divided': !!props.divider
         }, props.class],
         "style": [props.style]
-      }, [_createVNode("div", {
+      }, rootAttrs), [_createVNode("div", {
         "ref": contentRef,
         "class": "v-otp-input__content",
         "style": [dimensionStyles.value]
@@ -184,7 +188,12 @@ export const VOtpInput = genericComponent()({
             "onPaste": event => onPaste(i, event)
           }, null);
         }
-      })])), _createVNode(VOverlay, {
+      })])), _createVNode("input", _mergeProps({
+        "class": "v-otp-input-input",
+        "type": "hidden"
+      }, inputAttrs, {
+        "value": model.value.join('')
+      }), null), _createVNode(VOverlay, {
         "contained": true,
         "content-class": "v-otp-input__loader",
         "model-value": !!props.loading,

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

@@ -1 +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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"}
+{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","ref","watch","filterInputAttrs","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","attrs","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","fill","focusIndex","contentRef","inputRef","current","value","onInput","array","slice","target","requestAnimationFrame","onKeydown","e","index","includes","key","preventDefault","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","disabled","error","scoped","deep","window","rootAttrs","inputAttrs","_createVNode","_mergeProps","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 { filterInputAttrs, 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, { attrs, 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      let target: any = null\n\n      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\n      if (target) focusChild(contentRef.value!, target)\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 (![\n        'ArrowLeft',\n        'ArrowRight',\n        'Backspace',\n        'Delete',\n      ].includes(e.key)) return\n\n      e.preventDefault()\n\n      if (e.key === 'ArrowLeft') {\n        target = 'prev'\n      } else if (e.key === 'ArrowRight') {\n        target = 'next'\n      } else if (['Backspace', 'Delete'].includes(e.key)) {\n        array[focusIndex.value] = ''\n\n        model.value = array\n\n        if (focusIndex.value > 0 && e.key === 'Backspace') {\n          target = 'prev'\n        } else {\n          requestAnimationFrame(() => {\n            inputRef.value[index].select()\n          })\n        }\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      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\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          { ...rootAttrs }\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            <input\n              class=\"v-otp-input-input\"\n              type=\"hidden\"\n              { ...inputAttrs }\n              value={ model.value.join('') }\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/VStepper/VStepper.mjs

@@ -13,7 +13,7 @@ import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; //
 import { provideDefaults } from "../../composables/defaults.mjs";
 import { makeGroupProps, useGroup } from "../../composables/group.mjs"; // Utilities
 import { computed, toRefs } from 'vue';
-import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const VStepperSymbol = Symbol.for('vuetify:v-stepper');
 export const makeVStepperProps = propsFactory({
   altLabels: Boolean,
@@ -39,8 +39,8 @@ export const makeVStepperProps = propsFactory({
     mandatory: 'force',
     selectedClass: 'v-stepper-item--selected'
   }),
-  ...omit(makeVSheetProps(), ['color']),
-  ...makeVStepperActionsProps()
+  ...makeVSheetProps(),
+  ...only(makeVStepperActionsProps(), ['prevText', 'nextText'])
 }, 'VStepper');
 export const VStepper = genericComponent()({
   name: 'VStepper',
@@ -60,6 +60,7 @@ export const VStepper = genericComponent()({
       selected
     } = useGroup(props, VStepperSymbol);
     const {
+      color,
       editable,
       prevText,
       nextText
@@ -89,16 +90,19 @@ export const VStepper = genericComponent()({
         nextText
       },
       VStepperActions: {
-        disabled
+        color,
+        disabled,
+        prevText,
+        nextText
       }
     });
     useRender(() => {
       const [sheetProps] = VSheet.filterProps(props);
-      const [stepperActionProps] = VStepperActions.filterProps(props);
       const hasHeader = !!(slots.header || props.items.length);
       const hasWindow = props.items.length > 0;
       const hasActions = !props.hideActions && !!(hasWindow || slots.actions);
       return _createVNode(VSheet, _mergeProps(sheetProps, {
+        "color": props.bgColor,
         "class": ['v-stepper', {
           'v-stepper--alt-labels': props.altLabels,
           'v-stepper--flat': props.flat,
@@ -130,12 +134,11 @@ export const VStepper = genericComponent()({
         }), hasActions && (slots.actions?.({
           next,
           prev
-        }) ?? _createVNode(VStepperActions, _mergeProps({
-          "key": "stepper-actions"
-        }, stepperActionProps, {
+        }) ?? _createVNode(VStepperActions, {
+          "key": "stepper-actions",
           "onClick:prev": prev,
           "onClick:next": next
-        }), null))]
+        }, null))]
       });
     });
     return {

package/lib/labs/VStepper/VStepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepper.mjs","names":["makeVStepperActionsProps","VStepperActions","VStepperHeader","VStepperItem","VStepperWindow","VStepperWindowItem","VDivider","makeVSheetProps","VSheet","provideDefaults","makeGroupProps","useGroup","computed","toRefs","genericComponent","getPropertyFromItem","omit","propsFactory","useRender","VStepperSymbol","Symbol","for","makeVStepperProps","altLabels","Boolean","bgColor","String","editable","hideActions","items","type","Array","default","itemTitle","itemValue","mobile","nonLinear","flat","mandatory","selectedClass","VStepper","name","props","emits","v","setup","_ref","slots","_items","next","prev","selected","prevText","nextText","map","item","index","title","value","raw","activeIndex","findIndex","includes","id","disabled","length","sheetProps","filterProps","stepperActionProps","hasHeader","header","hasWindow","hasActions","actions","_createVNode","_mergeProps","class","style","_Fragment","icon","subtitle"],"sources":["../../../src/labs/VStepper/VStepper.tsx"],"sourcesContent":["// Styles\nimport './VStepper.sass'\n\n// Components\nimport { makeVStepperActionsProps, VStepperActions } from './VStepperActions'\nimport { VStepperHeader } from './VStepperHeader'\nimport { VStepperItem } from './VStepperItem'\nimport { VStepperWindow } from './VStepperWindow'\nimport { VStepperWindowItem } from './VStepperWindowItem'\nimport { VDivider } from '@/components/VDivider'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utilities\nimport { computed, toRefs } from 'vue'\nimport { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { StepperItemSlot } from './VStepperItem'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')\n\nexport type StepperItem = string | Record<string, any>\n\nexport type VStepperSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VStepperSlots = {\n  actions: VStepperSlot\n  default: StepperItem\n  header: StepperItem\n  'header-item': StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n  item: StepperItem\n} & {\n  [key: `header-item.${string}`]: StepperItemSlot\n  [key: `item.${string}`]: StepperItem\n}\n\nexport const makeVStepperProps = propsFactory({\n  altLabels: Boolean,\n  bgColor: String,\n  editable: Boolean,\n  hideActions: Boolean,\n  items: {\n    type: Array as PropType<readonly StepperItem[]>,\n    default: () => ([]),\n  },\n  itemTitle: {\n    type: String,\n    default: 'title',\n  },\n  itemValue: {\n    type: String,\n    default: 'value',\n  },\n  mobile: Boolean,\n  nonLinear: Boolean,\n  flat: Boolean,\n\n  ...makeGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-stepper-item--selected',\n  }),\n  ...omit(makeVSheetProps(), ['color']),\n  ...makeVStepperActionsProps(),\n}, 'VStepper')\n\nexport const VStepper = genericComponent<VStepperSlots>()({\n  name: 'VStepper',\n\n  props: makeVStepperProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    // TODO: fix typing\n    const { items: _items, next, prev, selected } = useGroup(props as any, VStepperSymbol)\n    const { editable, prevText, nextText } = toRefs(props)\n\n    const items = computed(() => props.items.map((item, index) => {\n      const title = getPropertyFromItem(item, props.itemTitle, item)\n      const value = getPropertyFromItem(item, props.itemValue, index + 1)\n\n      return {\n        title,\n        value,\n        raw: item,\n      }\n    }))\n    const activeIndex = computed(() => {\n      return _items.value.findIndex(item => selected.value.includes(item.id))\n    })\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (activeIndex.value === 0) return 'prev'\n      if (activeIndex.value === _items.value.length - 1) return 'next'\n\n      return false\n    })\n\n    provideDefaults({\n      VStepperItem: {\n        editable,\n        prevText,\n        nextText,\n      },\n      VStepperActions: {\n        disabled,\n      },\n    })\n\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n      const [stepperActionProps] = VStepperActions.filterProps(props)\n\n      const hasHeader = !!(slots.header || props.items.length)\n      const hasWindow = props.items.length > 0\n      const hasActions = !props.hideActions && !!(hasWindow || slots.actions)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          class={[\n            'v-stepper',\n            {\n              'v-stepper--alt-labels': props.altLabels,\n              'v-stepper--flat': props.flat,\n              'v-stepper--non-linear': props.nonLinear,\n              'v-stepper--mobile': props.mobile,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasHeader && (\n            <VStepperHeader key=\"stepper-header\">\n              { items.value.map((item, index) => (\n                <>\n                  { !!index && (<VDivider />) }\n\n                  <VStepperItem\n                    { ...item }\n                    v-slots={{\n                      default: slots[`header-item.${item.value}`] ?? slots.header,\n                      icon: slots.icon,\n                      title: slots.title,\n                      subtitle: slots.subtitle,\n                    }}\n                  />\n                </>\n              ))}\n            </VStepperHeader>\n          )}\n\n          { hasWindow && (\n            <VStepperWindow key=\"stepper-window\">\n              { items.value.map(item => (\n                <VStepperWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item),\n                  }}\n                />\n              ))}\n            </VStepperWindow>\n          )}\n\n          { slots.default?.({ prev, next }) }\n\n          { hasActions && (\n            slots.actions?.({ next, prev }) ?? (\n              <VStepperActions\n                key=\"stepper-actions\"\n                { ...stepperActionProps }\n                onClick:prev={ prev }\n                onClick:next={ next }\n              />\n            )\n          )}\n        </VSheet>\n      )\n    })\n\n    return {\n      prev,\n      next,\n    }\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VStepper.mjs","names":["makeVStepperActionsProps","VStepperActions","VStepperHeader","VStepperItem","VStepperWindow","VStepperWindowItem","VDivider","makeVSheetProps","VSheet","provideDefaults","makeGroupProps","useGroup","computed","toRefs","genericComponent","getPropertyFromItem","only","propsFactory","useRender","VStepperSymbol","Symbol","for","makeVStepperProps","altLabels","Boolean","bgColor","String","editable","hideActions","items","type","Array","default","itemTitle","itemValue","mobile","nonLinear","flat","mandatory","selectedClass","VStepper","name","props","emits","v","setup","_ref","slots","_items","next","prev","selected","color","prevText","nextText","map","item","index","title","value","raw","activeIndex","findIndex","includes","id","disabled","length","sheetProps","filterProps","hasHeader","header","hasWindow","hasActions","actions","_createVNode","_mergeProps","class","style","_Fragment","icon","subtitle"],"sources":["../../../src/labs/VStepper/VStepper.tsx"],"sourcesContent":["// Styles\nimport './VStepper.sass'\n\n// Components\nimport { makeVStepperActionsProps, VStepperActions } from './VStepperActions'\nimport { VStepperHeader } from './VStepperHeader'\nimport { VStepperItem } from './VStepperItem'\nimport { VStepperWindow } from './VStepperWindow'\nimport { VStepperWindowItem } from './VStepperWindowItem'\nimport { VDivider } from '@/components/VDivider'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utilities\nimport { computed, toRefs } from 'vue'\nimport { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { StepperItemSlot } from './VStepperItem'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')\n\nexport type StepperItem = string | Record<string, any>\n\nexport type VStepperSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VStepperSlots = {\n  actions: VStepperSlot\n  default: StepperItem\n  header: StepperItem\n  'header-item': StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n  item: StepperItem\n} & {\n  [key: `header-item.${string}`]: StepperItemSlot\n  [key: `item.${string}`]: StepperItem\n}\n\nexport const makeVStepperProps = propsFactory({\n  altLabels: Boolean,\n  bgColor: String,\n  editable: Boolean,\n  hideActions: Boolean,\n  items: {\n    type: Array as PropType<readonly StepperItem[]>,\n    default: () => ([]),\n  },\n  itemTitle: {\n    type: String,\n    default: 'title',\n  },\n  itemValue: {\n    type: String,\n    default: 'value',\n  },\n  mobile: Boolean,\n  nonLinear: Boolean,\n  flat: Boolean,\n\n  ...makeGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-stepper-item--selected',\n  }),\n  ...makeVSheetProps(),\n  ...only(makeVStepperActionsProps(), ['prevText', 'nextText']),\n}, 'VStepper')\n\nexport const VStepper = genericComponent<VStepperSlots>()({\n  name: 'VStepper',\n\n  props: makeVStepperProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    // TODO: fix typing\n    const { items: _items, next, prev, selected } = useGroup(props as any, VStepperSymbol)\n    const { color, editable, prevText, nextText } = toRefs(props)\n\n    const items = computed(() => props.items.map((item, index) => {\n      const title = getPropertyFromItem(item, props.itemTitle, item)\n      const value = getPropertyFromItem(item, props.itemValue, index + 1)\n\n      return {\n        title,\n        value,\n        raw: item,\n      }\n    }))\n    const activeIndex = computed(() => {\n      return _items.value.findIndex(item => selected.value.includes(item.id))\n    })\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (activeIndex.value === 0) return 'prev'\n      if (activeIndex.value === _items.value.length - 1) return 'next'\n\n      return false\n    })\n\n    provideDefaults({\n      VStepperItem: {\n        editable,\n        prevText,\n        nextText,\n      },\n      VStepperActions: {\n        color,\n        disabled,\n        prevText,\n        nextText,\n      },\n    })\n\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n\n      const hasHeader = !!(slots.header || props.items.length)\n      const hasWindow = props.items.length > 0\n      const hasActions = !props.hideActions && !!(hasWindow || slots.actions)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          color={ props.bgColor }\n          class={[\n            'v-stepper',\n            {\n              'v-stepper--alt-labels': props.altLabels,\n              'v-stepper--flat': props.flat,\n              'v-stepper--non-linear': props.nonLinear,\n              'v-stepper--mobile': props.mobile,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasHeader && (\n            <VStepperHeader key=\"stepper-header\">\n              { items.value.map((item, index) => (\n                <>\n                  { !!index && (<VDivider />) }\n\n                  <VStepperItem\n                    { ...item }\n                    v-slots={{\n                      default: slots[`header-item.${item.value}`] ?? slots.header,\n                      icon: slots.icon,\n                      title: slots.title,\n                      subtitle: slots.subtitle,\n                    }}\n                  />\n                </>\n              ))}\n            </VStepperHeader>\n          )}\n\n          { hasWindow && (\n            <VStepperWindow key=\"stepper-window\">\n              { items.value.map(item => (\n                <VStepperWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item),\n                  }}\n                />\n              ))}\n            </VStepperWindow>\n          )}\n\n          { slots.default?.({ prev, next }) }\n\n          { hasActions && (\n            slots.actions?.({ next, prev }) ?? (\n              <VStepperActions\n                key=\"stepper-actions\"\n                onClick:prev={ prev }\n                onClick:next={ next }\n              />\n            )\n          )}\n        </VSheet>\n      )\n    })\n\n    return {\n      prev,\n      next,\n    }\n  },\n})\n"],"mappings":"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"}

package/lib/labs/VStepper/index.d.mts

@@ -419,7 +419,7 @@ declare const VStepper: {
             [x: `v-slot:header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             flat?: boolean | undefined;
             style?: vue.StyleValue | undefined;
-            disabled?: boolean | "next" | "prev" | undefined;
+            disabled?: boolean | undefined;
             multiple?: boolean | undefined;
             tag?: string | undefined;
             mandatory?: NonNullable<boolean | "force"> | undefined;
@@ -572,7 +572,7 @@ declare const VStepper: {
         $options: vue.ComponentOptionsBase<{
             flat: boolean;
             style: vue.StyleValue;
-            disabled: boolean | "next" | "prev";
+            disabled: boolean;
             multiple: boolean;
             tag: string;
             mandatory: NonNullable<boolean | "force">;
@@ -651,7 +651,7 @@ declare const VStepper: {
         }, string, {
             flat: boolean;
             style: vue.StyleValue;
-            disabled: boolean | "next" | "prev";
+            disabled: boolean;
             multiple: boolean;
             tag: string;
             mandatory: NonNullable<boolean | "force">;
@@ -722,7 +722,7 @@ declare const VStepper: {
     } & {
         flat: boolean;
         style: vue.StyleValue;
-        disabled: boolean | "next" | "prev";
+        disabled: boolean;
         multiple: boolean;
         tag: string;
         mandatory: NonNullable<boolean | "force">;
@@ -803,7 +803,7 @@ declare const VStepper: {
 } & vue.ComponentOptionsBase<{
     flat: boolean;
     style: vue.StyleValue;
-    disabled: boolean | "next" | "prev";
+    disabled: boolean;
     multiple: boolean;
     tag: string;
     mandatory: NonNullable<boolean | "force">;
@@ -882,7 +882,7 @@ declare const VStepper: {
 }, string, {
     flat: boolean;
     style: vue.StyleValue;
-    disabled: boolean | "next" | "prev";
+    disabled: boolean;
     multiple: boolean;
     tag: string;
     mandatory: NonNullable<boolean | "force">;
@@ -931,11 +931,6 @@ declare const VStepper: {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    color: StringConstructor;
-    disabled: {
-        type: PropType<boolean | "next" | "prev">;
-        default: boolean;
-    };
     prevText: {
         type: StringConstructor;
         default: string;
@@ -944,36 +939,37 @@ declare const VStepper: {
         type: StringConstructor;
         default: string;
     };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    class: PropType<any>;
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    color: StringConstructor;
     modelValue: {
         type: null;
         default: undefined;
@@ -988,6 +984,7 @@ declare const VStepper: {
         type: PropType<string>;
         default: string;
     };
+    disabled: BooleanConstructor;
     altLabels: BooleanConstructor;
     bgColor: StringConstructor;
     editable: BooleanConstructor;
@@ -1008,11 +1005,6 @@ declare const VStepper: {
     nonLinear: BooleanConstructor;
     flat: BooleanConstructor;
 }, vue.ExtractPropTypes<{
-    color: StringConstructor;
-    disabled: {
-        type: PropType<boolean | "next" | "prev">;
-        default: boolean;
-    };
     prevText: {
         type: StringConstructor;
         default: string;
@@ -1021,36 +1013,37 @@ declare const VStepper: {
         type: StringConstructor;
         default: string;
     };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: PropType<any>;
     style: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    class: PropType<any>;
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    color: StringConstructor;
     modelValue: {
         type: null;
         default: undefined;
@@ -1065,6 +1058,7 @@ declare const VStepper: {
         type: PropType<string>;
         default: string;
     };
+    disabled: BooleanConstructor;
     altLabels: BooleanConstructor;
     bgColor: StringConstructor;
     editable: BooleanConstructor;