vuetify 3.1.10 → 3.1.11

package/lib/components/VDefaultsProvider/index.d.ts

@@ -1,4 +1,9 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType } from 'vue';
+
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
 
 type DefaultsInstance = undefined | {
     [key: string]: undefined | Record<string, unknown>;
@@ -6,7 +11,118 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
-declare const VDefaultsProvider: vue.DefineComponent<{
+declare const VDefaultsProvider: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+            root: boolean;
+            scoped: boolean;
+        }> & Omit<{
+            disabled: boolean;
+            root: boolean;
+            scoped: boolean;
+        } & {
+            reset?: string | number | undefined;
+            defaults?: DefaultsOptions;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "root" | "scoped">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            disabled: boolean;
+            root: boolean;
+            scoped: boolean;
+        } & {
+            reset?: string | number | undefined;
+            defaults?: DefaultsOptions;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            disabled: boolean;
+            root: boolean;
+            scoped: boolean;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        disabled: boolean;
+        root: boolean;
+        scoped: boolean;
+    } & {
+        reset?: string | number | undefined;
+        defaults?: DefaultsOptions;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[] | undefined> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     disabled: boolean;
     root: boolean;
     scoped: boolean;
@@ -27,30 +143,23 @@ declare const VDefaultsProvider: vue.DefineComponent<{
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
-    disabled: boolean;
-    root: boolean;
-    scoped: boolean;
-} & {
-    reset?: string | number | undefined;
-    defaults?: DefaultsOptions;
-} & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
-    };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     disabled: boolean;
     root: boolean;
     scoped: boolean;
-}>;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    defaults: PropType<DefaultsOptions>;
+    disabled: BooleanConstructor;
+    reset: (StringConstructor | NumberConstructor)[];
+    root: BooleanConstructor;
+    scoped: BooleanConstructor;
+}, vue.ExtractPropTypes<{
+    defaults: PropType<DefaultsOptions>;
+    disabled: BooleanConstructor;
+    reset: (StringConstructor | NumberConstructor)[];
+    root: BooleanConstructor;
+    scoped: BooleanConstructor;
+}>>;
 type VDefaultsProvider = InstanceType<typeof VDefaultsProvider>;
 
 export { VDefaultsProvider };

package/lib/components/VDialog/VDialog.css

@@ -1,44 +1,50 @@
 .v-dialog {
-  align-items: center;
-  justify-content: center;
-  margin: auto;
-}
-.v-dialog .v-overlay__content {
-  max-height: calc(100% - 48px);
-  width: calc(100% - 48px);
-  max-width: calc(100% - 48px);
   margin: 24px;
+  margin-inline-end: 24px;
+}
+.v-dialog.v-overlay--scroll-blocked {
+  margin-inline-end: calc(24px + var(--v-scrollbar-offset));
+}
+.v-dialog > .v-overlay__content {
+  max-height: 100%;
+  width: 100%;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.v-dialog .v-overlay__content > .v-card,
-.v-dialog .v-overlay__content > .v-sheet {
+.v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > .v-sheet {
   --v-scrollbar-offset: 0px;
   border-radius: 4px;
   overflow-y: auto;
   box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-dialog .v-overlay__content > .v-card {
+.v-dialog > .v-overlay__content > .v-card {
   display: flex;
   flex-direction: column;
 }
-.v-dialog .v-overlay__content > .v-card > .v-card-item {
+.v-dialog > .v-overlay__content > .v-card > .v-card-item {
   padding: 14px 24px 0;
 }
-.v-dialog .v-overlay__content > .v-card > .v-card-item + .v-card-text {
+.v-dialog > .v-overlay__content > .v-card > .v-card-item + .v-card-text {
   padding-top: 10px;
 }
-.v-dialog .v-overlay__content > .v-card > .v-card-text {
+.v-dialog > .v-overlay__content > .v-card > .v-card-text {
   font-size: inherit;
   letter-spacing: 0.03125em;
   line-height: inherit;
   padding: 16px 24px 10px;
 }
 
-.v-dialog--fullscreen {
+.v-dialog.v-dialog--fullscreen {
+  margin: 0;
+  margin-inline-end: 0;
   --v-scrollbar-offset: 0px;
 }
-.v-dialog--fullscreen .v-overlay__content {
+.v-dialog.v-dialog--fullscreen > .v-overlay__content {
   border-radius: 0;
   margin: 0;
   padding: 0;
@@ -49,28 +55,29 @@
   overflow-y: auto;
   top: 0;
   left: 0;
+  transform: none;
 }
-.v-dialog--fullscreen .v-overlay__content > .v-card,
-.v-dialog--fullscreen .v-overlay__content > .v-sheet {
+.v-dialog.v-dialog--fullscreen > .v-overlay__content > .v-card,
+.v-dialog.v-dialog--fullscreen > .v-overlay__content > .v-sheet {
   min-height: 100%;
   min-width: 100%;
   border-radius: 0;
 }
 
-.v-dialog--scrollable .v-overlay__content,
-.v-dialog--scrollable .v-overlay__content > form {
+.v-dialog--scrollable > .v-overlay__content,
+.v-dialog--scrollable > .v-overlay__content > form {
   display: flex;
 }
-.v-dialog--scrollable .v-overlay__content > .v-card,
-.v-dialog--scrollable .v-overlay__content > form > .v-card {
+.v-dialog--scrollable > .v-overlay__content > .v-card,
+.v-dialog--scrollable > .v-overlay__content > form > .v-card {
   display: flex;
   flex: 1 1 100%;
   flex-direction: column;
   max-height: 100%;
   max-width: 100%;
 }
-.v-dialog--scrollable .v-overlay__content > .v-card > .v-card-text,
-.v-dialog--scrollable .v-overlay__content > form > .v-card > .v-card-text {
+.v-dialog--scrollable > .v-overlay__content > .v-card > .v-card-text,
+.v-dialog--scrollable > .v-overlay__content > form > .v-card > .v-card-text {
   backface-visibility: hidden;
   overflow-y: auto;
 }

package/lib/components/VDialog/VDialog.mjs

@@ -11,7 +11,7 @@ import { useScopeId } from "../../composables/scopeId.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
 import { computed, mergeProps, nextTick, ref, watch } from 'vue';
 import { genericComponent, IN_BROWSER, useRender } from "../../util/index.mjs";
-import { filterVOverlayProps, makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Types
+import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Types
 export const VDialog = genericComponent()({
   name: 'VDialog',
   props: {
@@ -87,7 +87,7 @@ export const VDialog = genericComponent()({
       'aria-expanded': String(isActive.value)
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return _createVNode(VOverlay, _mergeProps({
         "ref": overlay,
         "class": ['v-dialog', {

package/lib/components/VDialog/VDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VDefaultsProvider","VOverlay","useProxiedModel","useScopeId","forwardRefs","computed","mergeProps","nextTick","ref","watch","genericComponent","IN_BROWSER","useRender","filterVOverlayProps","makeVOverlayProps","VDialog","name","props","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","emits","value","setup","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","matches","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activatorProps","String","overlayProps","activator","args"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, mergeProps, nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER, useRender } from '@/util'\nimport { filterVOverlayProps, makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n  name: 'VDialog',\n\n  props: {\n    fullscreen: Boolean,\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n\n    ...makeVOverlayProps({\n      origin: 'center center' as const,\n      scrollStrategy: 'block' as const,\n      transition: { component: VDialogTransition },\n      zIndex: 2400,\n    }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      if (\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = [...overlay.value.contentEl.querySelectorAll(\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]')) as HTMLElement[]\n\n        if (!focusable.length) return\n\n        const firstElement = focusable[0]\n        const lastElement = focusable[focusable.length - 1]\n\n        if (before === firstElement) {\n          lastElement.focus()\n        } else {\n          firstElement.focus()\n        }\n      }\n    }\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        val\n          ? document.addEventListener('focusin', onFocusin)\n          : document.removeEventListener('focusin', onFocusin)\n      }, { immediate: true })\n    }\n\n    watch(isActive, async val => {\n      await nextTick()\n      if (val) {\n        overlay.value!.contentEl?.focus({ preventScroll: true })\n      } else {\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    const activatorProps = computed(() =>\n      mergeProps({\n        'aria-haspopup': 'dialog',\n        'aria-expanded': String(isActive.value),\n      }, props.activatorProps)\n    )\n\n    useRender(() => {\n      const [overlayProps] = filterVOverlayProps(props)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-dialog',\n            {\n              'v-dialog--fullscreen': props.fullscreen,\n              'v-dialog--scrollable': props.scrollable,\n            },\n          ]}\n          { ...overlayProps }\n          v-model={ isActive.value }\n          aria-role=\"dialog\"\n          aria-modal=\"true\"\n          activatorProps={ activatorProps.value }\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => (\n              <VDefaultsProvider root>\n                { slots.default?.(...args) }\n              </VDefaultsProvider>\n            ),\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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"}
+{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VDefaultsProvider","VOverlay","useProxiedModel","useScopeId","forwardRefs","computed","mergeProps","nextTick","ref","watch","genericComponent","IN_BROWSER","useRender","makeVOverlayProps","VDialog","name","props","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","emits","value","setup","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","matches","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activatorProps","String","overlayProps","filterProps","activator","args"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, mergeProps, nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER, useRender } from '@/util'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n  name: 'VDialog',\n\n  props: {\n    fullscreen: Boolean,\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n\n    ...makeVOverlayProps({\n      origin: 'center center' as const,\n      scrollStrategy: 'block' as const,\n      transition: { component: VDialogTransition },\n      zIndex: 2400,\n    }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      if (\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = [...overlay.value.contentEl.querySelectorAll(\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]')) as HTMLElement[]\n\n        if (!focusable.length) return\n\n        const firstElement = focusable[0]\n        const lastElement = focusable[focusable.length - 1]\n\n        if (before === firstElement) {\n          lastElement.focus()\n        } else {\n          firstElement.focus()\n        }\n      }\n    }\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        val\n          ? document.addEventListener('focusin', onFocusin)\n          : document.removeEventListener('focusin', onFocusin)\n      }, { immediate: true })\n    }\n\n    watch(isActive, async val => {\n      await nextTick()\n      if (val) {\n        overlay.value!.contentEl?.focus({ preventScroll: true })\n      } else {\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    const activatorProps = computed(() =>\n      mergeProps({\n        'aria-haspopup': 'dialog',\n        'aria-expanded': String(isActive.value),\n      }, props.activatorProps)\n    )\n\n    useRender(() => {\n      const [overlayProps] = VOverlay.filterProps(props)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-dialog',\n            {\n              'v-dialog--fullscreen': props.fullscreen,\n              'v-dialog--scrollable': props.scrollable,\n            },\n          ]}\n          { ...overlayProps }\n          v-model={ isActive.value }\n          aria-role=\"dialog\"\n          aria-modal=\"true\"\n          activatorProps={ activatorProps.value }\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => (\n              <VDefaultsProvider root>\n                { slots.default?.(...args) }\n              </VDefaultsProvider>\n            ),\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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"}

package/lib/components/VDialog/VDialog.sass

@@ -3,17 +3,21 @@
 
 // Block
 .v-dialog
-  align-items: center
-  justify-content: center
-  margin: auto
+  margin: $dialog-margin
+  margin-inline-end: $dialog-margin
 
-  .v-overlay__content
-    max-height: calc(100% - #{$dialog-margin * 2})
-    width: calc(100% - #{$dialog-margin * 2})
-    max-width: calc(100% - #{$dialog-margin * 2})
-    margin: $dialog-margin
+  &.v-overlay--scroll-blocked
+    margin-inline-end: calc(#{$dialog-margin} + var(--v-scrollbar-offset))
+
+  > .v-overlay__content
+    max-height: 100%
+    width: 100%
+    max-width: 100%
     display: flex
     flex-direction: column
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
 
     > .v-card,
     > .v-sheet
@@ -39,10 +43,12 @@
         line-height: inherit
         padding: $dialog-card-text-padding
 
-.v-dialog--fullscreen
+.v-dialog.v-dialog--fullscreen
+  margin: 0
+  margin-inline-end: 0
   --v-scrollbar-offset: 0px
 
-  .v-overlay__content
+  > .v-overlay__content
     border-radius: 0
     margin: 0
     padding: 0
@@ -53,6 +59,7 @@
     overflow-y: auto
     top: 0
     left: 0
+    transform: none
 
     > .v-card,
     > .v-sheet
@@ -60,8 +67,8 @@
       min-width: 100%
       border-radius: 0
 
-.v-dialog--scrollable .v-overlay__content,
-.v-dialog--scrollable .v-overlay__content > form
+.v-dialog--scrollable > .v-overlay__content,
+.v-dialog--scrollable > .v-overlay__content > form
   display: flex
 
   > .v-card