vuetify 3.5.8 → 3.5.10

package/lib/components/VOtpInput/VOtpInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","nextTick","ref","watch","filterInputAttrs","focusChild","genericComponent","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","value","fill","focusIndex","contentRef","inputRef","current","onInput","test","array","slice","target","onKeydown","e","index","includes","key","preventDefault","requestAnimationFrame","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","color","bgColor","baseColor","disabled","error","scoped","deep","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","loader","event","loading","some","input"],"sources":["../../../src/components/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, nextTick, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, 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: 'number',\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 length = computed(() => Number(props.length))\n    const fields = computed(() => Array(length.value).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      // The maxlength attribute doesn't work for the number type input, so the text type is used.\n      // The following logic simulates the behavior of a number input.\n      if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {\n        current.value.value = ''\n        return\n      }\n      const array = model.value.slice()\n      const value = current.value.value\n\n      array[focusIndex.value] = value\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 !== length.value) {\n        target = 'next'\n      }\n\n      model.value = array\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        color: computed(() => props.color),\n        bgColor: computed(() => props.color),\n        baseColor: computed(() => props.baseColor),\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 === length.value) emit('finish', val.join(''))\n    }, { deep: true })\n\n    watch(focusIndex, val => {\n      if (val < 0) return\n\n      nextTick(() => {\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                    loader: undefined,\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                          disabled={ props.disabled }\n                          inputmode={ props.type === 'number' ? 'numeric' : 'text' }\n                          min={ props.type === 'number' ? 0 : undefined }\n                          maxlength=\"1\"\n                          placeholder={ props.placeholder }\n                          type={ props.type === 'number' ? 'text' : 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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"}
+{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","nextTick","ref","watch","filterInputAttrs","focusChild","genericComponent","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","value","fill","focusIndex","contentRef","inputRef","current","onInput","isValidNumber","array","slice","target","onKeydown","e","index","includes","key","preventDefault","requestAnimationFrame","select","onPaste","stopPropagation","clipboardText","clipboardData","getData","reset","onFocus","onBlur","isNaN","color","bgColor","baseColor","disabled","error","scoped","deep","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","loader","event","loading","some","input"],"sources":["../../../src/components/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, nextTick, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, 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: 'number',\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 length = computed(() => Number(props.length))\n    const fields = computed(() => Array(length.value).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      // The maxlength attribute doesn't work for the number type input, so the text type is used.\n      // The following logic simulates the behavior of a number input.\n      if (isValidNumber(current.value.value)) {\n        current.value.value = ''\n        return\n      }\n\n      const array = model.value.slice()\n      const value = current.value.value\n\n      array[focusIndex.value] = value\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 !== length.value) {\n        target = 'next'\n      }\n\n      model.value = array\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      const clipboardText = e?.clipboardData?.getData('Text') ?? ''\n\n      if (!isValidNumber(clipboardText)) return\n\n      model.value = clipboardText.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    function isValidNumber (value: string) {\n      return props.type === 'number' && !isNaN(Number(value))\n    }\n\n    provideDefaults({\n      VField: {\n        color: computed(() => props.color),\n        bgColor: computed(() => props.color),\n        baseColor: computed(() => props.baseColor),\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 === length.value) emit('finish', val.join(''))\n    }, { deep: true })\n\n    watch(focusIndex, val => {\n      if (val < 0) return\n\n      nextTick(() => {\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                    loader: undefined,\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                          disabled={ props.disabled }\n                          inputmode={ props.type === 'number' ? 'numeric' : 'text' }\n                          min={ props.type === 'number' ? 0 : undefined }\n                          maxlength=\"1\"\n                          placeholder={ props.placeholder }\n                          type={ props.type === 'number' ? 'text' : 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/components/VOtpInput/index.d.mts

@@ -8,7 +8,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 declare const VOtpInput: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
         length: string | number;
-        variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         type: "number" | "text" | "password";
         error: boolean;
         label: string;
@@ -30,11 +30,11 @@ declare const VOtpInput: {
         placeholder?: string | undefined;
         theme?: string | undefined;
         divider?: string | undefined;
-        rounded?: string | number | boolean | undefined;
+        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         modelValue?: string | number | undefined;
+        rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
         baseColor?: string | undefined;
-        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -48,8 +48,8 @@ declare const VOtpInput: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         "onUpdate:focused"?: ((val: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         onFinish?: ((val: string) => any) | undefined;
     }, {
         blur: () => void;
@@ -64,7 +64,7 @@ declare const VOtpInput: {
         'update:modelValue': (val: string) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         length: string | number;
-        variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         type: "number" | "text" | "password";
         error: boolean;
         label: string;
@@ -86,11 +86,11 @@ declare const VOtpInput: {
         placeholder?: string | undefined;
         theme?: string | undefined;
         divider?: string | undefined;
-        rounded?: string | number | boolean | undefined;
+        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         modelValue?: string | number | undefined;
+        rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
         baseColor?: string | undefined;
-        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -104,21 +104,21 @@ declare const VOtpInput: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         "onUpdate:focused"?: ((val: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         onFinish?: ((val: string) => any) | undefined;
     }, {
         length: string | number;
-        variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         type: "number" | "text" | "password";
         error: boolean;
         label: string;
         style: vue.StyleValue;
         autofocus: boolean;
         disabled: boolean;
-        rounded: string | number | boolean;
-        modelValue: string | number;
         focused: boolean;
+        modelValue: string | number;
+        rounded: string | number | boolean;
         focusAll: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -136,7 +136,7 @@ declare const VOtpInput: {
         Defaults: {};
     }, {
         length: string | number;
-        variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         type: "number" | "text" | "password";
         error: boolean;
         label: string;
@@ -158,11 +158,11 @@ declare const VOtpInput: {
         placeholder?: string | undefined;
         theme?: string | undefined;
         divider?: string | undefined;
-        rounded?: string | number | boolean | undefined;
+        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         modelValue?: string | number | undefined;
+        rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
         baseColor?: string | undefined;
-        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -176,8 +176,8 @@ declare const VOtpInput: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         "onUpdate:focused"?: ((val: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
         onFinish?: ((val: string) => any) | undefined;
     }, {
         blur: () => void;
@@ -188,16 +188,16 @@ declare const VOtpInput: {
         };
     }, {}, {}, {}, {
         length: string | number;
-        variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         type: "number" | "text" | "password";
         error: boolean;
         label: string;
         style: vue.StyleValue;
         autofocus: boolean;
         disabled: boolean;
-        rounded: string | number | boolean;
-        modelValue: string | number;
         focused: boolean;
+        modelValue: string | number;
+        rounded: string | number | boolean;
         focusAll: boolean;
     }>;
     __isFragment?: undefined;
@@ -205,7 +205,7 @@ declare const VOtpInput: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     length: string | number;
-    variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+    variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
     type: "number" | "text" | "password";
     error: boolean;
     label: string;
@@ -227,11 +227,11 @@ declare const VOtpInput: {
     placeholder?: string | undefined;
     theme?: string | undefined;
     divider?: string | undefined;
-    rounded?: string | number | boolean | undefined;
+    'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     modelValue?: string | number | undefined;
+    rounded?: string | number | boolean | undefined;
     bgColor?: string | undefined;
     baseColor?: string | undefined;
-    'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -245,8 +245,8 @@ declare const VOtpInput: {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
 } & {
-    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
     "onUpdate:focused"?: ((val: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
     onFinish?: ((val: string) => any) | undefined;
 }, {
     blur: () => void;
@@ -261,16 +261,16 @@ declare const VOtpInput: {
     'update:modelValue': (val: string) => true;
 }, string, {
     length: string | number;
-    variant: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+    variant: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
     type: "number" | "text" | "password";
     error: boolean;
     label: string;
     style: vue.StyleValue;
     autofocus: boolean;
     disabled: boolean;
-    rounded: string | number | boolean;
-    modelValue: string | number;
     focused: boolean;
+    modelValue: string | number;
+    rounded: string | number | boolean;
     focusAll: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -281,12 +281,12 @@ declare const VOtpInput: {
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     variant: Omit<{
-        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        type: PropType<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: PropType<NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">>;
-        default: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        type: PropType<NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">>;
+        default: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
     };
     error: BooleanConstructor;
     color: StringConstructor;
@@ -337,12 +337,12 @@ declare const VOtpInput: {
     };
 }, vue.ExtractPropTypes<{
     variant: Omit<{
-        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        type: PropType<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
         default: string;
         validator: (v: any) => boolean;
     }, "type" | "default"> & {
-        type: PropType<NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">>;
-        default: NonNullable<"filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled">;
+        type: PropType<NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">>;
+        default: NonNullable<"filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled">;
     };
     error: BooleanConstructor;
     color: StringConstructor;

package/lib/components/VOverlay/VOverlay.mjs

@@ -145,6 +145,7 @@ export const VOverlay = genericComponent()({
       if (v) isActive.value = false;
     });
     const root = ref();
+    const scrimEl = ref();
     const contentEl = ref();
     const {
       contentStyles,
@@ -166,8 +167,10 @@ export const VOverlay = genericComponent()({
       emit('click:outside', e);
       if (!props.persistent) isActive.value = false;else animateClick();
     }
-    function closeConditional() {
-      return isActive.value && globalTop.value;
+    function closeConditional(e) {
+      return isActive.value && globalTop.value && (
+      // If using scrim, only close if clicking on it rather than anything opened on top
+      !props.scrim || e.target === scrimEl.value);
     }
     IN_BROWSER && watch(isActive, val => {
       if (val) {
@@ -254,7 +257,8 @@ export const VOverlay = genericComponent()({
         "ref": root
       }, scopeId, attrs), [_createVNode(Scrim, _mergeProps({
         "color": scrimColor,
-        "modelValue": isActive.value && !!props.scrim
+        "modelValue": isActive.value && !!props.scrim,
+        "ref": scrimEl
       }, scrimEvents.value), null), _createVNode(MaybeTransition, {
         "appear": true,
         "persisted": true,
@@ -277,6 +281,7 @@ export const VOverlay = genericComponent()({
     })]));
     return {
       activatorEl,
+      scrimEl,
       target,
       animateClick,
       contentEl,

package/lib/components/VOverlay/VOverlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","onBeforeUnmount","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","opacity","Number","noClickAnimation","persistent","scrim","zIndex","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","_onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","target","targetEl","targetRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n  computed,\n  mergeProps,\n  onBeforeUnmount,\n  ref,\n  Teleport,\n  toRef,\n  Transition,\n  watch,\n} from 'vue'\nimport {\n  animate,\n  convertToUnit,\n  genericComponent,\n  getScrollParent,\n  IN_BROWSER,\n  propsFactory,\n  standardEasing,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n  [key: string]: unknown\n  modelValue: boolean\n  color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n  const { modelValue, color, ...rest } = props\n  return (\n    <Transition name=\"fade-transition\" appear>\n      { props.modelValue && (\n        <div\n          class={[\n            'v-overlay__scrim',\n            props.color.backgroundColorClasses.value,\n          ]}\n          style={ props.color.backgroundColorStyles.value }\n          { ...rest }\n        />\n      )}\n    </Transition>\n  )\n}\n\nexport type OverlaySlots = {\n  default: { isActive: Ref<boolean> }\n  activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n  absolute: Boolean,\n  attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n  closeOnBack: {\n    type: Boolean,\n    default: true,\n  },\n  contained: Boolean,\n  contentClass: null,\n  contentProps: null,\n  disabled: Boolean,\n  opacity: [Number, String],\n  noClickAnimation: Boolean,\n  modelValue: Boolean,\n  persistent: Boolean,\n  scrim: {\n    type: [Boolean, String],\n    default: true,\n  },\n  zIndex: {\n    type: [Number, String],\n    default: 2000,\n  },\n\n  ...makeActivatorProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeLazyProps(),\n  ...makeLocationStrategyProps(),\n  ...makeScrollStrategyProps(),\n  ...makeThemeProps(),\n  ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n  name: 'VOverlay',\n\n  directives: { ClickOutside },\n\n  inheritAttrs: false,\n\n  props: {\n    _disableGlobalStack: Boolean,\n\n    ...makeVOverlayProps(),\n  },\n\n  emits: {\n    'click:outside': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { slots, attrs, emit }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const isActive = computed({\n      get: () => model.value,\n      set: v => {\n        if (!(v && props.disabled)) model.value = v\n      },\n    })\n    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses, isRtl } = useRtl()\n    const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive)\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n    const {\n      activatorEl, activatorRef,\n      target, targetEl, targetRef,\n      activatorEvents,\n      contentEvents,\n      scrimEvents,\n    } = useActivator(props, { isActive, isTop: localTop })\n    const { dimensionStyles } = useDimension(props)\n    const isMounted = useHydration()\n    const { scopeId } = useScopeId()\n\n    watch(() => props.disabled, v => {\n      if (v) isActive.value = false\n    })\n\n    const root = ref<HTMLElement>()\n    const contentEl = ref<HTMLElement>()\n    const { contentStyles, updateLocation } = useLocationStrategies(props, {\n      isRtl,\n      contentEl,\n      target,\n      isActive,\n    })\n    useScrollStrategies(props, {\n      root,\n      contentEl,\n      targetEl,\n      isActive,\n      updateLocation,\n    })\n\n    function onClickOutside (e: MouseEvent) {\n      emit('click:outside', e)\n\n      if (!props.persistent) isActive.value = false\n      else animateClick()\n    }\n\n    function closeConditional () {\n      return isActive.value && globalTop.value\n    }\n\n    IN_BROWSER && watch(isActive, val => {\n      if (val) {\n        window.addEventListener('keydown', onKeydown)\n      } else {\n        window.removeEventListener('keydown', onKeydown)\n      }\n    }, { immediate: true })\n\n    onBeforeUnmount(() => {\n      if (!IN_BROWSER) return\n\n      window.removeEventListener('keydown', onKeydown)\n    })\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key === 'Escape' && globalTop.value) {\n        if (!props.persistent) {\n          isActive.value = false\n          if (contentEl.value?.contains(document.activeElement)) {\n            activatorEl.value?.focus()\n          }\n        } else animateClick()\n      }\n    }\n\n    const router = useRouter()\n    useToggleScope(() => props.closeOnBack, () => {\n      useBackButton(router, next => {\n        if (globalTop.value && isActive.value) {\n          next(false)\n          if (!props.persistent) isActive.value = false\n          else animateClick()\n        } else {\n          next()\n        }\n      })\n    })\n\n    const top = ref<number>()\n    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n      if (val) {\n        const scrollParent = getScrollParent(root.value)\n        if (scrollParent && scrollParent !== document.scrollingElement) {\n          top.value = scrollParent.scrollTop\n        }\n      }\n    })\n\n    // Add a quick \"bounce\" animation to the content\n    function animateClick () {\n      if (props.noClickAnimation) return\n\n      contentEl.value && animate(contentEl.value, [\n        { transformOrigin: 'center' },\n        { transform: 'scale(1.03)' },\n        { transformOrigin: 'center' },\n      ], {\n        duration: 150,\n        easing: standardEasing,\n      })\n    }\n\n    function onAfterLeave () {\n      _onAfterLeave()\n      emit('afterLeave')\n    }\n\n    useRender(() => (\n      <>\n        { slots.activator?.({\n          isActive: isActive.value,\n          props: mergeProps({\n            ref: activatorRef,\n            targetRef,\n          }, activatorEvents.value, props.activatorProps),\n        })}\n\n        { isMounted.value && hasContent.value && (\n          <Teleport\n            disabled={ !teleportTarget.value }\n            to={ teleportTarget.value }\n          >\n            <div\n              class={[\n                'v-overlay',\n                {\n                  'v-overlay--absolute': props.absolute || props.contained,\n                  'v-overlay--active': isActive.value,\n                  'v-overlay--contained': props.contained,\n                },\n                themeClasses.value,\n                rtlClasses.value,\n                props.class,\n              ]}\n              style={[\n                stackStyles.value,\n                {\n                  '--v-overlay-opacity': props.opacity,\n                  top: convertToUnit(top.value),\n                },\n                props.style,\n              ]}\n              ref={ root }\n              { ...scopeId }\n              { ...attrs }\n            >\n              <Scrim\n                color={ scrimColor }\n                modelValue={ isActive.value && !!props.scrim }\n                { ...scrimEvents.value }\n              />\n              <MaybeTransition\n                appear\n                persisted\n                transition={ props.transition }\n                target={ target.value }\n                onAfterLeave={ onAfterLeave }\n              >\n                <div\n                  ref={ contentEl }\n                  v-show={ isActive.value }\n                  v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n                  class={[\n                    'v-overlay__content',\n                    props.contentClass,\n                  ]}\n                  style={[\n                    dimensionStyles.value,\n                    contentStyles.value,\n                  ]}\n                  { ...contentEvents.value }\n                  { ...props.contentProps }\n                >\n                  { slots.default?.({ isActive }) }\n                </div>\n              </MaybeTransition>\n            </div>\n          </Teleport>\n        )}\n      </>\n    ))\n\n    return {\n      activatorEl,\n      target,\n      animateClick,\n      contentEl,\n      globalTop,\n      localTop,\n      updateLocation,\n    }\n  },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}
+{"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","onBeforeUnmount","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","opacity","Number","noClickAnimation","persistent","scrim","zIndex","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","_onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","target","targetEl","targetRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","scrimEl","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n  computed,\n  mergeProps,\n  onBeforeUnmount,\n  ref,\n  Teleport,\n  toRef,\n  Transition,\n  watch,\n} from 'vue'\nimport {\n  animate,\n  convertToUnit,\n  genericComponent,\n  getScrollParent,\n  IN_BROWSER,\n  propsFactory,\n  standardEasing,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n  [key: string]: unknown\n  modelValue: boolean\n  color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n  const { modelValue, color, ...rest } = props\n  return (\n    <Transition name=\"fade-transition\" appear>\n      { props.modelValue && (\n        <div\n          class={[\n            'v-overlay__scrim',\n            props.color.backgroundColorClasses.value,\n          ]}\n          style={ props.color.backgroundColorStyles.value }\n          { ...rest }\n        />\n      )}\n    </Transition>\n  )\n}\n\nexport type OverlaySlots = {\n  default: { isActive: Ref<boolean> }\n  activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n  absolute: Boolean,\n  attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n  closeOnBack: {\n    type: Boolean,\n    default: true,\n  },\n  contained: Boolean,\n  contentClass: null,\n  contentProps: null,\n  disabled: Boolean,\n  opacity: [Number, String],\n  noClickAnimation: Boolean,\n  modelValue: Boolean,\n  persistent: Boolean,\n  scrim: {\n    type: [Boolean, String],\n    default: true,\n  },\n  zIndex: {\n    type: [Number, String],\n    default: 2000,\n  },\n\n  ...makeActivatorProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeLazyProps(),\n  ...makeLocationStrategyProps(),\n  ...makeScrollStrategyProps(),\n  ...makeThemeProps(),\n  ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n  name: 'VOverlay',\n\n  directives: { ClickOutside },\n\n  inheritAttrs: false,\n\n  props: {\n    _disableGlobalStack: Boolean,\n\n    ...makeVOverlayProps(),\n  },\n\n  emits: {\n    'click:outside': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { slots, attrs, emit }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const isActive = computed({\n      get: () => model.value,\n      set: v => {\n        if (!(v && props.disabled)) model.value = v\n      },\n    })\n    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses, isRtl } = useRtl()\n    const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive)\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n    const {\n      activatorEl, activatorRef,\n      target, targetEl, targetRef,\n      activatorEvents,\n      contentEvents,\n      scrimEvents,\n    } = useActivator(props, { isActive, isTop: localTop })\n    const { dimensionStyles } = useDimension(props)\n    const isMounted = useHydration()\n    const { scopeId } = useScopeId()\n\n    watch(() => props.disabled, v => {\n      if (v) isActive.value = false\n    })\n\n    const root = ref<HTMLElement>()\n    const scrimEl = ref<HTMLElement>()\n    const contentEl = ref<HTMLElement>()\n    const { contentStyles, updateLocation } = useLocationStrategies(props, {\n      isRtl,\n      contentEl,\n      target,\n      isActive,\n    })\n    useScrollStrategies(props, {\n      root,\n      contentEl,\n      targetEl,\n      isActive,\n      updateLocation,\n    })\n\n    function onClickOutside (e: MouseEvent) {\n      emit('click:outside', e)\n\n      if (!props.persistent) isActive.value = false\n      else animateClick()\n    }\n\n    function closeConditional (e: Event) {\n      return isActive.value && globalTop.value && (\n        // If using scrim, only close if clicking on it rather than anything opened on top\n        !props.scrim || e.target === scrimEl.value\n      )\n    }\n\n    IN_BROWSER && watch(isActive, val => {\n      if (val) {\n        window.addEventListener('keydown', onKeydown)\n      } else {\n        window.removeEventListener('keydown', onKeydown)\n      }\n    }, { immediate: true })\n\n    onBeforeUnmount(() => {\n      if (!IN_BROWSER) return\n\n      window.removeEventListener('keydown', onKeydown)\n    })\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key === 'Escape' && globalTop.value) {\n        if (!props.persistent) {\n          isActive.value = false\n          if (contentEl.value?.contains(document.activeElement)) {\n            activatorEl.value?.focus()\n          }\n        } else animateClick()\n      }\n    }\n\n    const router = useRouter()\n    useToggleScope(() => props.closeOnBack, () => {\n      useBackButton(router, next => {\n        if (globalTop.value && isActive.value) {\n          next(false)\n          if (!props.persistent) isActive.value = false\n          else animateClick()\n        } else {\n          next()\n        }\n      })\n    })\n\n    const top = ref<number>()\n    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n      if (val) {\n        const scrollParent = getScrollParent(root.value)\n        if (scrollParent && scrollParent !== document.scrollingElement) {\n          top.value = scrollParent.scrollTop\n        }\n      }\n    })\n\n    // Add a quick \"bounce\" animation to the content\n    function animateClick () {\n      if (props.noClickAnimation) return\n\n      contentEl.value && animate(contentEl.value, [\n        { transformOrigin: 'center' },\n        { transform: 'scale(1.03)' },\n        { transformOrigin: 'center' },\n      ], {\n        duration: 150,\n        easing: standardEasing,\n      })\n    }\n\n    function onAfterLeave () {\n      _onAfterLeave()\n      emit('afterLeave')\n    }\n\n    useRender(() => (\n      <>\n        { slots.activator?.({\n          isActive: isActive.value,\n          props: mergeProps({\n            ref: activatorRef,\n            targetRef,\n          }, activatorEvents.value, props.activatorProps),\n        })}\n\n        { isMounted.value && hasContent.value && (\n          <Teleport\n            disabled={ !teleportTarget.value }\n            to={ teleportTarget.value }\n          >\n            <div\n              class={[\n                'v-overlay',\n                {\n                  'v-overlay--absolute': props.absolute || props.contained,\n                  'v-overlay--active': isActive.value,\n                  'v-overlay--contained': props.contained,\n                },\n                themeClasses.value,\n                rtlClasses.value,\n                props.class,\n              ]}\n              style={[\n                stackStyles.value,\n                {\n                  '--v-overlay-opacity': props.opacity,\n                  top: convertToUnit(top.value),\n                },\n                props.style,\n              ]}\n              ref={ root }\n              { ...scopeId }\n              { ...attrs }\n            >\n              <Scrim\n                color={ scrimColor }\n                modelValue={ isActive.value && !!props.scrim }\n                ref={ scrimEl }\n                { ...scrimEvents.value }\n              />\n              <MaybeTransition\n                appear\n                persisted\n                transition={ props.transition }\n                target={ target.value }\n                onAfterLeave={ onAfterLeave }\n              >\n                <div\n                  ref={ contentEl }\n                  v-show={ isActive.value }\n                  v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n                  class={[\n                    'v-overlay__content',\n                    props.contentClass,\n                  ]}\n                  style={[\n                    dimensionStyles.value,\n                    contentStyles.value,\n                  ]}\n                  { ...contentEvents.value }\n                  { ...props.contentProps }\n                >\n                  { slots.default?.({ isActive }) }\n                </div>\n              </MaybeTransition>\n            </div>\n          </Teleport>\n        )}\n      </>\n    ))\n\n    return {\n      activatorEl,\n      scrimEl,\n      target,\n      animateClick,\n      contentEl,\n      globalTop,\n      localTop,\n      updateLocation,\n    }\n  },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}

package/lib/components/VOverlay/index.d.mts

@@ -165,6 +165,7 @@ declare const VOverlay: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     }, {
         activatorEl: Ref<HTMLElement | undefined>;
+        scrimEl: Ref<HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined>;
@@ -379,6 +380,7 @@ declare const VOverlay: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     }, {
         activatorEl: Ref<HTMLElement | undefined>;
+        scrimEl: Ref<HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined>;
@@ -496,6 +498,7 @@ declare const VOverlay: {
     "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
 }, {
     activatorEl: Ref<HTMLElement | undefined>;
+    scrimEl: Ref<HTMLElement | undefined>;
     target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
     animateClick: () => void;
     contentEl: Ref<HTMLElement | undefined>;

package/lib/components/VOverlay/scrollStrategies.mjs

@@ -1,5 +1,5 @@
 // Utilities
-import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';
+import { effectScope, onScopeDispose, watchEffect } from 'vue';
 import { requestNewFrame } from "./requestNewFrame.mjs";
 import { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from "../../util/index.mjs"; // Types
 const scrollStrategies = {
@@ -22,7 +22,7 @@ export function useScrollStrategies(props, data) {
     scope?.stop();
     if (!(data.isActive.value && props.scrollStrategy)) return;
     scope = effectScope();
-    await nextTick();
+    await new Promise(resolve => setTimeout(resolve));
     scope.active && scope.run(() => {
       if (typeof props.scrollStrategy === 'function') {
         props.scrollStrategy(data, props, scope);

package/lib/components/VOverlay/scrollStrategies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollStrategies.mjs","names":["effectScope","nextTick","onScopeDispose","watchEffect","requestNewFrame","convertToUnit","getScrollParents","hasScrollbar","IN_BROWSER","propsFactory","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","makeScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","isActive","value","active","run","onScroll","e","bindScroll","targetEl","contentEl","offsetParent","root","scrollElements","Set","contained","undefined","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","scrollBehavior","removeProperty","remove","slow","raf","ric","update","start","performance","now","updateLocation","time","requestIdleCallback","cb","cancelAnimationFrame","requestAnimationFrame","cancelIdleCallback","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/VOverlay/scrollStrategies.ts"],"sourcesContent":["// Utilities\nimport { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue'\nimport { requestNewFrame } from './requestNewFrame'\nimport { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util'\n\n// Types\nimport type { EffectScope, PropType, Ref } from 'vue'\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>\n  contentEl: Ref<HTMLElement | undefined>\n  targetEl: Ref<HTMLElement | undefined>\n  isActive: Ref<boolean>\n  updateLocation: Ref<((e: Event) => void) | undefined>\n}\n\ntype ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n}\n\nexport interface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn\n  contained: boolean | undefined\n}\n\nexport const makeScrollStrategyProps = propsFactory({\n  scrollStrategy: {\n    type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n    default: 'block',\n    validator: (val: any) => typeof val === 'function' || val in scrollStrategies,\n  },\n}, 'VOverlay-scroll-strategies')\n\nexport function useScrollStrategies (\n  props: StrategyProps,\n  data: ScrollStrategyData\n) {\n  if (!IN_BROWSER) return\n\n  let scope: EffectScope | undefined\n  watchEffect(async () => {\n    scope?.stop()\n\n    if (!(data.isActive.value && props.scrollStrategy)) return\n\n    scope = effectScope()\n    await nextTick()\n    scope.active && scope.run(() => {\n      if (typeof props.scrollStrategy === 'function') {\n        props.scrollStrategy(data, props, scope!)\n      } else {\n        scrollStrategies[props.scrollStrategy]?.(data, props, scope!)\n      }\n    })\n  })\n\n  onScopeDispose(() => {\n    scope?.stop()\n  })\n}\n\nfunction closeScrollStrategy (data: ScrollStrategyData) {\n  function onScroll (e: Event) {\n    data.isActive.value = false\n  }\n\n  bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll)\n}\n\nfunction blockScrollStrategy (data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent\n  const scrollElements = [...new Set([\n    ...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined),\n    ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined),\n  ])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'))\n  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth\n\n  const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement)\n  if (scrollableParent) {\n    data.root.value!.classList.add('v-overlay--scroll-blocked')\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft))\n    el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop))\n\n    if (el !== document.documentElement) {\n      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))\n    }\n\n    el.classList.add('v-overlay-scroll-blocked')\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'))\n      const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'))\n\n      const scrollBehavior = el.style.scrollBehavior\n\n      el.style.scrollBehavior = 'auto'\n      el.style.removeProperty('--v-body-scroll-x')\n      el.style.removeProperty('--v-body-scroll-y')\n      el.style.removeProperty('--v-scrollbar-offset')\n      el.classList.remove('v-overlay-scroll-blocked')\n\n      el.scrollLeft = -x\n      el.scrollTop = -y\n\n      el.style.scrollBehavior = scrollBehavior\n    })\n    if (scrollableParent) {\n      data.root.value!.classList.remove('v-overlay--scroll-blocked')\n    }\n  })\n}\n\nfunction repositionScrollStrategy (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) {\n  let slow = false\n  let raf = -1\n  let ric = -1\n\n  function update (e: Event) {\n    requestNewFrame(() => {\n      const start = performance.now()\n      data.updateLocation.value?.(e)\n      const time = performance.now() - start\n      slow = time / (1000 / 60) > 2\n    })\n  }\n\n  ric = (typeof requestIdleCallback === 'undefined' ? (cb: Function) => cb() : requestIdleCallback)(() => {\n    scope.run(() => {\n      bindScroll(data.targetEl.value ?? data.contentEl.value, e => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf)\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e)\n            })\n          })\n        } else {\n          update(e)\n        }\n      })\n    })\n  })\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric)\n    cancelAnimationFrame(raf)\n  })\n}\n\n/** @private */\nfunction bindScroll (el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)]\n  scrollElements.forEach(el => {\n    el.addEventListener('scroll', onScroll, { passive: true })\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach(el => {\n      el.removeEventListener('scroll', onScroll)\n    })\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"scrollStrategies.mjs","names":["effectScope","onScopeDispose","watchEffect","requestNewFrame","convertToUnit","getScrollParents","hasScrollbar","IN_BROWSER","propsFactory","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","makeScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","isActive","value","Promise","resolve","setTimeout","active","run","onScroll","e","bindScroll","targetEl","contentEl","offsetParent","root","scrollElements","Set","contained","undefined","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","scrollBehavior","removeProperty","remove","slow","raf","ric","update","start","performance","now","updateLocation","time","requestIdleCallback","cb","cancelAnimationFrame","requestAnimationFrame","cancelIdleCallback","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/VOverlay/scrollStrategies.ts"],"sourcesContent":["// Utilities\nimport { effectScope, onScopeDispose, watchEffect } from 'vue'\nimport { requestNewFrame } from './requestNewFrame'\nimport { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util'\n\n// Types\nimport type { EffectScope, PropType, Ref } from 'vue'\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>\n  contentEl: Ref<HTMLElement | undefined>\n  targetEl: Ref<HTMLElement | undefined>\n  isActive: Ref<boolean>\n  updateLocation: Ref<((e: Event) => void) | undefined>\n}\n\ntype ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n}\n\nexport interface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn\n  contained: boolean | undefined\n}\n\nexport const makeScrollStrategyProps = propsFactory({\n  scrollStrategy: {\n    type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n    default: 'block',\n    validator: (val: any) => typeof val === 'function' || val in scrollStrategies,\n  },\n}, 'VOverlay-scroll-strategies')\n\nexport function useScrollStrategies (\n  props: StrategyProps,\n  data: ScrollStrategyData\n) {\n  if (!IN_BROWSER) return\n\n  let scope: EffectScope | undefined\n  watchEffect(async () => {\n    scope?.stop()\n\n    if (!(data.isActive.value && props.scrollStrategy)) return\n\n    scope = effectScope()\n    await new Promise(resolve => setTimeout(resolve))\n    scope.active && scope.run(() => {\n      if (typeof props.scrollStrategy === 'function') {\n        props.scrollStrategy(data, props, scope!)\n      } else {\n        scrollStrategies[props.scrollStrategy]?.(data, props, scope!)\n      }\n    })\n  })\n\n  onScopeDispose(() => {\n    scope?.stop()\n  })\n}\n\nfunction closeScrollStrategy (data: ScrollStrategyData) {\n  function onScroll (e: Event) {\n    data.isActive.value = false\n  }\n\n  bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll)\n}\n\nfunction blockScrollStrategy (data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent\n  const scrollElements = [...new Set([\n    ...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined),\n    ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined),\n  ])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'))\n  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth\n\n  const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement)\n  if (scrollableParent) {\n    data.root.value!.classList.add('v-overlay--scroll-blocked')\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft))\n    el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop))\n\n    if (el !== document.documentElement) {\n      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))\n    }\n\n    el.classList.add('v-overlay-scroll-blocked')\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'))\n      const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'))\n\n      const scrollBehavior = el.style.scrollBehavior\n\n      el.style.scrollBehavior = 'auto'\n      el.style.removeProperty('--v-body-scroll-x')\n      el.style.removeProperty('--v-body-scroll-y')\n      el.style.removeProperty('--v-scrollbar-offset')\n      el.classList.remove('v-overlay-scroll-blocked')\n\n      el.scrollLeft = -x\n      el.scrollTop = -y\n\n      el.style.scrollBehavior = scrollBehavior\n    })\n    if (scrollableParent) {\n      data.root.value!.classList.remove('v-overlay--scroll-blocked')\n    }\n  })\n}\n\nfunction repositionScrollStrategy (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) {\n  let slow = false\n  let raf = -1\n  let ric = -1\n\n  function update (e: Event) {\n    requestNewFrame(() => {\n      const start = performance.now()\n      data.updateLocation.value?.(e)\n      const time = performance.now() - start\n      slow = time / (1000 / 60) > 2\n    })\n  }\n\n  ric = (typeof requestIdleCallback === 'undefined' ? (cb: Function) => cb() : requestIdleCallback)(() => {\n    scope.run(() => {\n      bindScroll(data.targetEl.value ?? data.contentEl.value, e => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf)\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e)\n            })\n          })\n        } else {\n          update(e)\n        }\n      })\n    })\n  })\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric)\n    cancelAnimationFrame(raf)\n  })\n}\n\n/** @private */\nfunction bindScroll (el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)]\n  scrollElements.forEach(el => {\n    el.addEventListener('scroll', onScroll, { passive: true })\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach(el => {\n      el.removeEventListener('scroll', onScroll)\n    })\n  })\n}\n"],"mappings":"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"}