@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VDialog/VDialog.mjs

@@ -1,314 +1,126 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VDialog.sass"; // Components
-
-import { VThemeProvider } from "../VThemeProvider/index.mjs"; // Mixins
-
-import Activatable from "../../mixins/activatable/index.mjs";
-import Dependent from "../../mixins/dependent/index.mjs";
-import Detachable from "../../mixins/detachable/index.mjs";
-import Overlayable from "../../mixins/overlayable/index.mjs";
-import Returnable from "../../mixins/returnable/index.mjs";
-import Stackable from "../../mixins/stackable/index.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs"; // Directives
+import "./VDialog.css"; // Components
 
-import ClickOutside from "../../directives/click-outside/index.mjs"; // Helpers
+import { VDialogTransition } from "../transitions/index.mjs";
+import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
-import mixins from "../../util/mixins.mjs";
-import { removed } from "../../util/console.mjs";
-import { convertToUnit, keyCodes } from "../../util/helpers.mjs"; // Types
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeTransitionProps } from "../../composables/transition.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-const baseMixins = mixins(Activatable, Dependent, Detachable, Overlayable, Returnable, Stackable, Toggleable);
-/* @vue/component */
+import { nextTick, ref, watch } from 'vue';
+import { genericComponent, IN_BROWSER } from "../../util/index.mjs"; // Types
 
-export default baseMixins.extend({
-  name: 'v-dialog',
-  directives: {
-    ClickOutside
-  },
+export const VDialog = genericComponent()({
+  name: 'VDialog',
+  inheritAttrs: false,
   props: {
-    dark: Boolean,
-    disabled: Boolean,
     fullscreen: Boolean,
-    light: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'none'
-    },
-    noClickAnimation: Boolean,
     origin: {
       type: String,
       default: 'center center'
     },
-    persistent: Boolean,
     retainFocus: {
       type: Boolean,
       default: true
     },
     scrollable: Boolean,
-    transition: {
-      type: [String, Boolean],
-      default: 'dialog-transition'
-    },
-    width: {
-      type: [String, Number],
-      default: 'auto'
-    }
+    modelValue: Boolean,
+    ...makeDimensionProps({
+      width: 'auto'
+    }),
+    ...makeTransitionProps({
+      transition: {
+        component: VDialogTransition
+      }
+    })
   },
-
-  data() {
-    return {
-      activatedBy: null,
-      animate: false,
-      animateTimeout: -1,
-      isActive: !!this.value,
-      stackMinZIndex: 200,
-      previousActiveElement: null
-    };
+  emits: {
+    'update:modelValue': value => true
   },
 
-  computed: {
-    classes() {
-      return {
-        ["v-dialog ".concat(this.contentClass).trim()]: true,
-        'v-dialog--active': this.isActive,
-        'v-dialog--persistent': this.persistent,
-        'v-dialog--fullscreen': this.fullscreen,
-        'v-dialog--scrollable': this.scrollable,
-        'v-dialog--animated': this.animate
-      };
-    },
-
-    contentClasses() {
-      return {
-        'v-dialog__content': true,
-        'v-dialog__content--active': this.isActive
-      };
-    },
-
-    hasActivator() {
-      return Boolean(!!this.$slots.activator || !!this.$scopedSlots.activator);
-    }
-
-  },
-  watch: {
-    isActive(val) {
-      if (val) {
-        this.show();
-        this.hideScroll();
-      } else {
-        var _this$previousActiveE;
-
-        this.removeOverlay();
-        this.unbind();
-        (_this$previousActiveE = this.previousActiveElement) == null ? void 0 : _this$previousActiveE.focus();
-      }
-    },
-
-    fullscreen(val) {
-      if (!this.isActive) return;
-
-      if (val) {
-        this.hideScroll();
-        this.removeOverlay(false);
-      } else {
-        this.showScroll();
-        this.genOverlay();
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const overlay = ref();
+
+    function onFocusin(e) {
+      var _overlay$value, _overlay$value2;
+
+      const before = e.relatedTarget;
+      const after = e.target;
+
+      if (before !== after && (_overlay$value = overlay.value) != null && _overlay$value.contentEl && // We're the topmost dialog
+      (_overlay$value2 = overlay.value) != null && _overlay$value2.isTop && // It isn't the document or the dialog body
+      ![document, overlay.value.contentEl].includes(after) && // It isn't inside the dialog body
+      !overlay.value.contentEl.contains(after)) {
+        const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+        if (!focusable.length) return;
+        const firstElement = focusable[0];
+        const lastElement = focusable[focusable.length - 1];
+
+        if (before === firstElement) {
+          lastElement.focus();
+        } else {
+          firstElement.focus();
+        }
       }
     }
 
-  },
-
-  created() {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('full-width')) {
-      removed('full-width', this);
-    }
-  },
-
-  beforeMount() {
-    this.$nextTick(() => {
-      this.isBooted = this.isActive;
-      this.isActive && this.show();
-    });
-  },
-
-  beforeDestroy() {
-    if (typeof window !== 'undefined') this.unbind();
-  },
-
-  methods: {
-    animateClick() {
-      this.animate = false; // Needed for when clicking very fast
-      // outside of the dialog
-
-      this.$nextTick(() => {
-        this.animate = true;
-        window.clearTimeout(this.animateTimeout);
-        this.animateTimeout = window.setTimeout(() => this.animate = false, 150);
+    if (IN_BROWSER) {
+      watch(() => isActive.value && props.retainFocus, val => {
+        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+      }, {
+        immediate: true
       });
-    },
-
-    closeConditional(e) {
-      const target = e.target; // Ignore the click if the dialog is closed or destroyed,
-      // if it was on an element inside the content,
-      // if it was dragged onto the overlay (#6969),
-      // or if this isn't the topmost dialog (#9907)
-
-      return !(this._isDestroyed || !this.isActive || this.$refs.content.contains(target) || this.overlay && target && !this.overlay.$el.contains(target)) && this.activeZIndex >= this.getMaxZIndex();
-    },
+    }
 
-    hideScroll() {
-      if (this.fullscreen) {
-        document.documentElement.classList.add('overflow-y-hidden');
-      } else {
-        Overlayable.options.methods.hideScroll.call(this);
-      }
-    },
+    watch(isActive, async val => {
+      await nextTick();
 
-    show() {
-      !this.fullscreen && !this.hideOverlay && this.genOverlay(); // Double nextTick to wait for lazy content to be generated
+      if (val) {
+        var _contentEl;
 
-      this.$nextTick(() => {
-        this.$nextTick(() => {
-          this.previousActiveElement = document.activeElement;
-          this.$refs.content.focus();
-          this.bind();
+        (_contentEl = overlay.value.contentEl) == null ? void 0 : _contentEl.focus({
+          preventScroll: true
         });
-      });
-    },
-
-    bind() {
-      window.addEventListener('focusin', this.onFocusin);
-    },
-
-    unbind() {
-      window.removeEventListener('focusin', this.onFocusin);
-    },
-
-    onClickOutside(e) {
-      this.$emit('click:outside', e);
-
-      if (this.persistent) {
-        this.noClickAnimation || this.animateClick();
       } else {
-        this.isActive = false;
-      }
-    },
+        var _activatorEl;
 
-    onKeydown(e) {
-      if (e.keyCode === keyCodes.esc && !this.getOpenDependents().length) {
-        if (!this.persistent) {
-          this.isActive = false;
-          const activator = this.getActivator();
-          this.$nextTick(() => activator && activator.focus());
-        } else if (!this.noClickAnimation) {
-          this.animateClick();
-        }
+        (_activatorEl = overlay.value.activatorEl) == null ? void 0 : _activatorEl.focus({
+          preventScroll: true
+        });
       }
-
-      this.$emit('keydown', e);
-    },
-
-    // On focus change, wrap focus to stay inside the dialog
-    // https://github.com/vuetifyjs/vuetify/issues/6892
-    onFocusin(e) {
-      if (!e || !this.retainFocus) return;
-      const target = e.target;
-
-      if (!!target && // It isn't the document or the dialog body
-      ![document, this.$refs.content].includes(target) && // It isn't inside the dialog body
-      !this.$refs.content.contains(target) && // We're the topmost dialog
-      this.activeZIndex >= this.getMaxZIndex() && // It isn't inside a dependent element (like a menu)
-      !this.getOpenDependentElements().some(el => el.contains(target)) // So we must have focused something outside the dialog and its children
-      ) {
-          // Find and focus the first available element inside the dialog
-          const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-          const el = [...focusable].find(el => !el.hasAttribute('disabled'));
-          el && el.focus();
-        }
-    },
-
-    genContent() {
-      return this.showLazyContent(() => [this.$createElement(VThemeProvider, {
-        props: {
-          root: true,
-          light: this.light,
-          dark: this.dark
-        }
-      }, [this.$createElement('div', {
-        class: this.contentClasses,
-        attrs: {
-          role: 'document',
-          tabindex: this.isActive ? 0 : undefined,
-          ...this.getScopeIdAttrs()
-        },
-        on: {
-          keydown: this.onKeydown
-        },
-        style: {
-          zIndex: this.activeZIndex
-        },
-        ref: 'content'
-      }, [this.genTransition()])])]);
-    },
-
-    genTransition() {
-      const content = this.genInnerContent();
-      if (!this.transition) return content;
-      return this.$createElement('transition', {
-        props: {
-          name: this.transition,
-          origin: this.origin,
-          appear: true
-        }
-      }, [content]);
-    },
-
-    genInnerContent() {
-      const data = {
-        class: this.classes,
-        ref: 'dialog',
-        directives: [{
-          name: 'click-outside',
-          value: {
-            handler: this.onClickOutside,
-            closeConditional: this.closeConditional,
-            include: this.getOpenDependentElements
-          }
-        }, {
-          name: 'show',
-          value: this.isActive
+    });
+    return () => {
+      return _createVNode(VOverlay, _mergeProps({
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "class": ['v-dialog', {
+          'v-dialog--fullscreen': props.fullscreen,
+          'v-dialog--scrollable': props.scrollable
         }],
-        style: {
-          transformOrigin: this.origin
+        "style": dimensionStyles.value,
+        "transition": props.transition,
+        "ref": overlay,
+        "aria-role": "dialog",
+        "aria-modal": "true",
+        "activatorProps": {
+          'aria-haspopup': 'dialog',
+          'aria-expanded': String(isActive.value)
         }
-      };
-
-      if (!this.fullscreen) {
-        data.style = { ...data.style,
-          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),
-          width: this.width === 'auto' ? undefined : convertToUnit(this.width)
-        };
-      }
-
-      return this.$createElement('div', data, this.getContentSlot());
-    }
-
-  },
-
-  render(h) {
-    return h('div', {
-      staticClass: 'v-dialog__container',
-      class: {
-        'v-dialog__container--attached': this.attach === '' || this.attach === true || this.attach === 'attach'
-      },
-      attrs: {
-        role: 'dialog'
-      }
-    }, [this.genActivator(), this.genContent()]);
+      }, attrs), {
+        default: slots.default,
+        activator: slots.activator
+      });
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VDialog/VDialog.ts"],"names":["VThemeProvider","Activatable","Dependent","Detachable","Overlayable","Returnable","Stackable","Toggleable","ClickOutside","mixins","removed","convertToUnit","keyCodes","baseMixins","extend","name","directives","props","dark","Boolean","disabled","fullscreen","light","maxWidth","type","String","Number","default","noClickAnimation","origin","persistent","retainFocus","scrollable","transition","width","data","activatedBy","animate","animateTimeout","isActive","value","stackMinZIndex","previousActiveElement","computed","classes","contentClass","trim","contentClasses","hasActivator","$slots","activator","$scopedSlots","watch","val","show","hideScroll","removeOverlay","unbind","focus","showScroll","genOverlay","created","$attrs","hasOwnProperty","beforeMount","$nextTick","isBooted","beforeDestroy","window","methods","animateClick","clearTimeout","setTimeout","closeConditional","e","target","_isDestroyed","$refs","content","contains","overlay","$el","activeZIndex","getMaxZIndex","document","documentElement","classList","add","options","call","hideOverlay","activeElement","bind","addEventListener","onFocusin","removeEventListener","onClickOutside","$emit","onKeydown","keyCode","esc","getOpenDependents","length","getActivator","includes","getOpenDependentElements","some","el","focusable","querySelectorAll","find","hasAttribute","genContent","showLazyContent","$createElement","root","class","attrs","role","tabindex","undefined","getScopeIdAttrs","on","keydown","style","zIndex","ref","genTransition","genInnerContent","appear","handler","include","transformOrigin","getContentSlot","render","h","staticClass","attach","genActivator"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VThemeProvider } from '../VThemeProvider'\n\n// Mixins\nimport Activatable from '../../mixins/activatable'\nimport Dependent from '../../mixins/dependent'\nimport Detachable from '../../mixins/detachable'\nimport Overlayable from '../../mixins/overlayable'\nimport Returnable from '../../mixins/returnable'\nimport Stackable from '../../mixins/stackable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Directives\nimport ClickOutside from '../../directives/click-outside'\n\n// Helpers\nimport mixins from '../../util/mixins'\nimport { removed } from '../../util/console'\nimport {\n  convertToUnit,\n  keyCodes,\n} from '../../util/helpers'\n\n// Types\nimport { VNode, VNodeData } from 'vue'\n\nconst baseMixins = mixins(\n  Activatable,\n  Dependent,\n  Detachable,\n  Overlayable,\n  Returnable,\n  Stackable,\n  Toggleable\n)\n\n/* @vue/component */\nexport default baseMixins.extend({\n  name: 'v-dialog',\n\n  directives: { ClickOutside },\n\n  props: {\n    dark: Boolean,\n    disabled: Boolean,\n    fullscreen: Boolean,\n    light: Boolean,\n    maxWidth: {\n      type: [String, Number],\n      default: 'none',\n    },\n    noClickAnimation: Boolean,\n    origin: {\n      type: String,\n      default: 'center center',\n    },\n    persistent: Boolean,\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n    transition: {\n      type: [String, Boolean],\n      default: 'dialog-transition',\n    },\n    width: {\n      type: [String, Number],\n      default: 'auto',\n    },\n  },\n\n  data () {\n    return {\n      activatedBy: null as EventTarget | null,\n      animate: false,\n      animateTimeout: -1,\n      isActive: !!this.value,\n      stackMinZIndex: 200,\n      previousActiveElement: null as HTMLElement | null,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        [(`v-dialog ${this.contentClass}`).trim()]: true,\n        'v-dialog--active': this.isActive,\n        'v-dialog--persistent': this.persistent,\n        'v-dialog--fullscreen': this.fullscreen,\n        'v-dialog--scrollable': this.scrollable,\n        'v-dialog--animated': this.animate,\n      }\n    },\n    contentClasses (): object {\n      return {\n        'v-dialog__content': true,\n        'v-dialog__content--active': this.isActive,\n      }\n    },\n    hasActivator (): boolean {\n      return Boolean(\n        !!this.$slots.activator ||\n        !!this.$scopedSlots.activator\n      )\n    },\n  },\n\n  watch: {\n    isActive (val) {\n      if (val) {\n        this.show()\n        this.hideScroll()\n      } else {\n        this.removeOverlay()\n        this.unbind()\n        this.previousActiveElement?.focus()\n      }\n    },\n    fullscreen (val) {\n      if (!this.isActive) return\n\n      if (val) {\n        this.hideScroll()\n        this.removeOverlay(false)\n      } else {\n        this.showScroll()\n        this.genOverlay()\n      }\n    },\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('full-width')) {\n      removed('full-width', this)\n    }\n  },\n\n  beforeMount () {\n    this.$nextTick(() => {\n      this.isBooted = this.isActive\n      this.isActive && this.show()\n    })\n  },\n\n  beforeDestroy () {\n    if (typeof window !== 'undefined') this.unbind()\n  },\n\n  methods: {\n    animateClick () {\n      this.animate = false\n      // Needed for when clicking very fast\n      // outside of the dialog\n      this.$nextTick(() => {\n        this.animate = true\n        window.clearTimeout(this.animateTimeout)\n        this.animateTimeout = window.setTimeout(() => (this.animate = false), 150)\n      })\n    },\n    closeConditional (e: Event) {\n      const target = e.target as HTMLElement\n      // Ignore the click if the dialog is closed or destroyed,\n      // if it was on an element inside the content,\n      // if it was dragged onto the overlay (#6969),\n      // or if this isn't the topmost dialog (#9907)\n      return !(\n        this._isDestroyed ||\n        !this.isActive ||\n        this.$refs.content.contains(target) ||\n        (this.overlay && target && !this.overlay.$el.contains(target))\n      ) && this.activeZIndex >= this.getMaxZIndex()\n    },\n    hideScroll () {\n      if (this.fullscreen) {\n        document.documentElement.classList.add('overflow-y-hidden')\n      } else {\n        Overlayable.options.methods.hideScroll.call(this)\n      }\n    },\n    show () {\n      !this.fullscreen && !this.hideOverlay && this.genOverlay()\n      // Double nextTick to wait for lazy content to be generated\n      this.$nextTick(() => {\n        this.$nextTick(() => {\n          this.previousActiveElement = document.activeElement as HTMLElement\n          this.$refs.content.focus()\n          this.bind()\n        })\n      })\n    },\n    bind () {\n      window.addEventListener('focusin', this.onFocusin)\n    },\n    unbind () {\n      window.removeEventListener('focusin', this.onFocusin)\n    },\n    onClickOutside (e: Event) {\n      this.$emit('click:outside', e)\n\n      if (this.persistent) {\n        this.noClickAnimation || this.animateClick()\n      } else {\n        this.isActive = false\n      }\n    },\n    onKeydown (e: KeyboardEvent) {\n      if (e.keyCode === keyCodes.esc && !this.getOpenDependents().length) {\n        if (!this.persistent) {\n          this.isActive = false\n          const activator = this.getActivator()\n          this.$nextTick(() => activator && (activator as HTMLElement).focus())\n        } else if (!this.noClickAnimation) {\n          this.animateClick()\n        }\n      }\n      this.$emit('keydown', e)\n    },\n    // On focus change, wrap focus to stay inside the dialog\n    // https://github.com/vuetifyjs/vuetify/issues/6892\n    onFocusin (e: Event) {\n      if (!e || !this.retainFocus) return\n\n      const target = e.target as HTMLElement\n\n      if (\n        !!target &&\n        // It isn't the document or the dialog body\n        ![document, this.$refs.content].includes(target) &&\n        // It isn't inside the dialog body\n        !this.$refs.content.contains(target) &&\n        // We're the topmost dialog\n        this.activeZIndex >= this.getMaxZIndex() &&\n        // It isn't inside a dependent element (like a menu)\n        !this.getOpenDependentElements().some(el => el.contains(target))\n        // So we must have focused something outside the dialog and its children\n      ) {\n        // Find and focus the first available element inside the dialog\n        const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n        const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined\n        el && el.focus()\n      }\n    },\n    genContent () {\n      return this.showLazyContent(() => [\n        this.$createElement(VThemeProvider, {\n          props: {\n            root: true,\n            light: this.light,\n            dark: this.dark,\n          },\n        }, [\n          this.$createElement('div', {\n            class: this.contentClasses,\n            attrs: {\n              role: 'document',\n              tabindex: this.isActive ? 0 : undefined,\n              ...this.getScopeIdAttrs(),\n            },\n            on: { keydown: this.onKeydown },\n            style: { zIndex: this.activeZIndex },\n            ref: 'content',\n          }, [this.genTransition()]),\n        ]),\n      ])\n    },\n    genTransition () {\n      const content = this.genInnerContent()\n\n      if (!this.transition) return content\n\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n          origin: this.origin,\n          appear: true,\n        },\n      }, [content])\n    },\n    genInnerContent () {\n      const data: VNodeData = {\n        class: this.classes,\n        ref: 'dialog',\n        directives: [\n          {\n            name: 'click-outside',\n            value: {\n              handler: this.onClickOutside,\n              closeConditional: this.closeConditional,\n              include: this.getOpenDependentElements,\n            },\n          },\n          { name: 'show', value: this.isActive },\n        ],\n        style: {\n          transformOrigin: this.origin,\n        },\n      }\n\n      if (!this.fullscreen) {\n        data.style = {\n          ...data.style as object,\n          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),\n          width: this.width === 'auto' ? undefined : convertToUnit(this.width),\n        }\n      }\n\n      return this.$createElement('div', data, this.getContentSlot())\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-dialog__container',\n      class: {\n        'v-dialog__container--attached':\n          this.attach === '' ||\n          this.attach === true ||\n          this.attach === 'attach',\n      },\n      attrs: { role: 'dialog' },\n    }, [\n      this.genActivator(),\n      this.genContent(),\n    ])\n  },\n})\n"],"file":"VDialog.mjs"}
+{"version":3,"sources":["../../../src/components/VDialog/VDialog.tsx"],"names":["VDialogTransition","VOverlay","makeDimensionProps","useDimension","makeTransitionProps","useProxiedModel","nextTick","ref","watch","genericComponent","IN_BROWSER","VDialog","name","inheritAttrs","props","fullscreen","Boolean","origin","type","String","default","retainFocus","scrollable","modelValue","width","transition","component","emits","value","setup","attrs","slots","isActive","dimensionStyles","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","isTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activator"],"mappings":"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","sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VDialog',\n\n  inheritAttrs: false,\n\n  props: {\n    fullscreen: Boolean,\n    origin: {\n      type: String,\n      default: 'center center',\n    },\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n    modelValue: Boolean,\n\n    ...makeDimensionProps({ width: 'auto' }),\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { dimensionStyles } = useDimension(props)\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?.isTop &&\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, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )].filter(el => !el.hasAttribute('disabled')) 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    return () => {\n      return (\n        <VOverlay\n          v-model={ isActive.value }\n          class={[\n            'v-dialog',\n            {\n              'v-dialog--fullscreen': props.fullscreen,\n              'v-dialog--scrollable': props.scrollable,\n            },\n          ]}\n          style={ dimensionStyles.value }\n          transition={ props.transition }\n          ref={ overlay }\n          aria-role=\"dialog\"\n          aria-modal=\"true\"\n          activatorProps={{\n            'aria-haspopup': 'dialog',\n            'aria-expanded': String(isActive.value),\n          }}\n          { ...attrs }\n          v-slots={{\n            default: slots.default,\n            activator: slots.activator,\n          }}\n        />\n      )\n    }\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"file":"VDialog.mjs"}

package/lib/components/VDialog/VDialog.sass

@@ -1,82 +1,69 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 // Block
 .v-dialog
-  border-radius: $dialog-border-radius
-  margin: $dialog-margin
-  overflow-y: auto
-  pointer-events: auto
-  transition: .3s map-get($transition, 'fast-in-fast-out')
-  width: 100%
-  z-index: inherit
-  +elevation($dialog-elevation)
-
-  &:not(.v-dialog--fullscreen)
-    max-height: $dialog-max-height
+  z-index: $dialog-z-index
+  align-items: center
+  justify-content: center
+  margin: auto
 
-  > *
-    width: 100%
+  .v-overlay__content
+    max-height: calc(100% - #{$dialog-margin * 2})
+    margin: $dialog-margin
+    display: flex
+    flex-direction: column
 
-  > .v-card
-    > .v-card__title
-      font-size: $dialog-card-title-font-size
-      font-weight: $dialog-card-title-font-weight
-      letter-spacing: $dialog-card-title-letter-spacing
-      padding: $dialog-card-title-padding
+    > .v-card,
+    > .v-sheet
+      border-radius: $dialog-border-radius
+      overflow-y: auto
 
-    > .v-card__text
-      padding: $dialog-card-text-padding
+      @include tools.elevation($dialog-elevation)
 
-    > .v-card__subtitle
-      padding: $dialog-card-subtitle-padding
+    > .v-card
+      display: flex
+      flex-direction: column
 
-    > .v-card__actions
-      padding: $dialog-card-actions-padding
+      > .v-card-avatar
+        padding: $dialog-card-avatar-padding
 
-// Element
-.v-dialog__content
-  align-items: center
-  display: flex
-  height: 100%
-  justify-content: center
-  left: 0
-  pointer-events: none
-  position: fixed
-  top: 0
-  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
-  width: 100%
-  z-index: 6
-  outline: none
+      > .v-card-header
+        padding: $dialog-card-header-padding
 
-.v-dialog__container
-  display: none
+        + .v-card-text
+          padding-top: $dialog-card-header-text-padding-top
 
-  &--attached
-    display: inline
-
-// Modifier
-.v-dialog--animated
-  animation-duration: .15s
-  animation-name: animate-dialog
-  animation-timing-function: map-get($transition, 'fast-in-fast-out')
+      > .v-card-text
+        font-size: inherit
+        letter-spacing: $dialog-card-text-letter-spacing
+        line-height: inherit
+        padding: $dialog-card-text-padding
 
 .v-dialog--fullscreen
-  border-radius: 0
-  margin: 0
-  height: 100%
-  position: fixed
-  overflow-y: auto
-  top: 0
-  left: 0
-
-  > .v-card
-    min-height: 100%
-    min-width: 100%
-    margin: 0 !important
-    padding: 0 !important
+  --v-scrollbar-offset: 0px
 
-.v-dialog--scrollable,
-.v-dialog--scrollable > form
+  .v-overlay__content
+    border-radius: 0
+    margin: 0
+    padding: 0
+    width: 100%
+    height: 100%
+    max-width: 100%
+    max-height: 100%
+    overflow-y: auto
+    top: 0
+    left: 0
+
+    > .v-card,
+    > .v-sheet
+      min-height: 100%
+      min-width: 100%
+      border-radius: 0
+
+.v-dialog--scrollable .v-overlay__content,
+.v-dialog--scrollable .v-overlay__content > form
   display: flex
 
   > .v-card
@@ -86,21 +73,6 @@
     max-height: 100%
     max-width: 100%
 
-    > .v-card__title,
-    > .v-card__actions
-      flex: 0 0 auto
-
-    > .v-card__text
+    > .v-card-text
       backface-visibility: hidden
-      flex: 1 1 auto
       overflow-y: auto
-
-@keyframes animate-dialog
-  0%
-    transform: scale(1)
-
-  50%
-    transform: scale(1.03)
-
-  100%
-    transform: scale(1)

package/lib/components/VDialog/_variables.scss

@@ -1,13 +1,15 @@
-@import '../../styles/styles.sass';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
 
-$dialog-border-radius: $border-radius-root !default;
-$dialog-card-subtitle-padding: 0 24px 20px !default;
-$dialog-card-actions-padding: 8px 16px !default;
-$dialog-card-text-padding: 0 24px 20px !default;
-$dialog-card-title-font-size: map-deep-get($headings, 'h6', 'size') !default;
-$dialog-card-title-font-weight: map-deep-get($headings, 'h6', 'weight') !default;
-$dialog-card-title-letter-spacing: map-deep-get($headings, 'h6', 'letter-spacing') !default;
-$dialog-card-title-padding: 16px 24px 10px !default;
+// Defaults
 $dialog-elevation: 24 !default;
+$dialog-z-index: $dialog-elevation * 100 !default;
+$dialog-border-radius: settings.$border-radius-root !default;
 $dialog-margin: 24px !default;
-$dialog-max-height: 90% !default;
+
+$dialog-card-avatar-padding: 0 !default;
+$dialog-card-header-padding: 14px 24px 0 !default;
+$dialog-card-header-text-padding-top: 10px !default;
+$dialog-card-text-padding: 16px 24px 10px !default;
+$dialog-card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-1', 'letter-spacing') !default;

package/lib/components/VDialog/index.mjs

@@ -1,4 +1,2 @@
-import VDialog from "./VDialog.mjs";
-export { VDialog };
-export default VDialog;
+export { VDialog } from "./VDialog.mjs";
 //# sourceMappingURL=index.mjs.map