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

package/lib/components/VMain/VMain.mjs

@@ -1,36 +1,40 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VMain.sass"; // Composables
+import "./VMain.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useMain } from "../../composables/layout.mjs";
+import { useLayout } from "../../composables/layout.mjs";
 import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
 
-import { defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { defineComponent } from "../../util/index.mjs";
+export const VMain = defineComponent({
   name: 'VMain',
-  props: makeProps(makeTagProps({
+  props: makeTagProps({
     tag: 'main'
-  })),
+  }),
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       mainStyles
-    } = useMain();
+    } = useLayout();
     const {
       ssrBootStyles
     } = useSsrBoot();
-    return () => _createVNode(props.tag, {
-      "class": "v-main",
-      "style": [mainStyles.value, ssrBootStyles.value]
-    }, {
-      default: () => [_createVNode("div", {
-        "class": "v-main__wrap"
-      }, [slots.default == null ? void 0 : slots.default()])]
-    }, 8, ["style"]);
+    return () => {
+      var _slots$default;
+
+      return _createVNode(props.tag, {
+        "class": "v-main",
+        "style": [mainStyles.value, ssrBootStyles.value]
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-main__wrap"
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]
+      });
+    };
   }
 
 });

package/lib/components/VMain/VMain.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VMain/VMain.tsx"],"names":["makeTagProps","useMain","useSsrBoot","defineComponent","makeProps","name","props","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,Y;SACAC,O;SACAC,U,yCAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,eAAeD,eAAe,CAAC;AAC7BE,EAAAA,IAAI,EAAE,OADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAACJ,YAAY,CAAC;AAAEO,IAAAA,GAAG,EAAE;AAAP,GAAD,CAAb,CAHa;;AAK7BC,EAAAA,KAAK,CAAEF,KAAF,EAAS;AAAEG,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAiBT,OAAO,EAA9B;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAoBT,UAAU,EAApC;AAEA,WAAO;AAAA,eAEG,QAFH;AAAA,eAGI,CACLQ,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;AAHJ;AAAA;AAAA,iBAQQ;AARR,UASCH,KAAK,CAACI,OATP,oBASCJ,KAAK,CAACI,OAAN,EATD;AAAA,oBAAP;AAaD;;AAtB4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useMain } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VMain',\n\n  props: makeProps(makeTagProps({ tag: 'main' })),\n\n  setup (props, { slots }) {\n    const { mainStyles } = useMain()\n    const { ssrBootStyles } = useSsrBoot()\n\n    return () => (\n      <props.tag\n        class=\"v-main\"\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        <div class=\"v-main__wrap\">\n          { slots.default?.() }\n        </div>\n      </props.tag>\n    )\n  },\n})\n"],"file":"VMain.mjs"}
+{"version":3,"sources":["../../../src/components/VMain/VMain.tsx"],"names":["makeTagProps","useLayout","useSsrBoot","defineComponent","VMain","name","props","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Y;SACAC,S;SACAC,U,yCAET;;SACSC,e;AAET,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;AACnCE,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,KAAK,EAAEN,YAAY,CAAC;AAAEO,IAAAA,GAAG,EAAE;AAAP,GAAD,CAHgB;;AAKnCC,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAiBT,SAAS,EAAhC;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAoBT,UAAU,EAApC;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEG,QAFH;AAAA,iBAGI,CACLQ,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;AAHJ;AAAA;AAAA,mBAQQ;AARR,8BASCH,KAAK,CAACI,OATP,qBASC,oBAAAJ,KAAK,CATN;AAAA;AAAA,KAAP;AAaD;;AAtBkC,CAAD,CAA7B","sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VMain = defineComponent({\n  name: 'VMain',\n\n  props: makeTagProps({ tag: 'main' }),\n\n  setup (props, { slots }) {\n    const { mainStyles } = useLayout()\n    const { ssrBootStyles } = useSsrBoot()\n\n    return () => (\n      <props.tag\n        class=\"v-main\"\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        <div class=\"v-main__wrap\">\n          { slots.default?.() }\n        </div>\n      </props.tag>\n    )\n  },\n})\n"],"file":"VMain.mjs"}

package/lib/components/VMain/VMain.sass

@@ -1,4 +1,5 @@
-@import './index'
+@forward './variables'
+@use './variables' as *
 
 @mixin firefox()
   @-moz-document url-prefix()

package/lib/components/VMain/_variables.scss

@@ -1,2 +1,4 @@
+@use '../../styles/settings';
+
 // Defaults
-$main-transition: 0.2s $standard-easing !default;
+$main-transition: 0.2s settings.$standard-easing !default;

package/lib/components/VMain/index.mjs

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

package/lib/components/VMain/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VMain/index.ts"],"names":["default","VMain"],"mappings":"SAASA,OAAO,IAAIC,K","sourcesContent":["export { default as VMain } from './VMain'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VMain/index.ts"],"names":["VMain"],"mappings":"SAASA,K","sourcesContent":["export { VMain } from './VMain'\n"],"file":"index.mjs"}

package/lib/components/VMenu/VMenu.css

@@ -0,0 +1,14 @@
+.v-menu .v-overlay__content {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+}
+.v-menu .v-overlay__content > .v-card,
+.v-menu .v-overlay__content > .v-sheet,
+.v-menu .v-overlay__content > .v-list {
+  background: rgb(var(--v-theme-surface));
+  border-radius: inherit;
+  overflow: auto;
+  height: 100%;
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}

package/lib/components/VMenu/VMenu.mjs

@@ -1,469 +1,100 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VMenu.sass"; // Components
-
-import { VThemeProvider } from "../VThemeProvider/index.mjs"; // Mixins
-
-import Activatable from "../../mixins/activatable/index.mjs";
-import Delayable from "../../mixins/delayable.mjs";
-import Dependent from "../../mixins/dependent/index.mjs";
-import Detachable from "../../mixins/detachable/index.mjs";
-import Menuable from "../../mixins/menuable/index.mjs";
-import Returnable from "../../mixins/returnable/index.mjs";
-import Roundable from "../../mixins/roundable/index.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Directives
+import "./VMenu.css"; // Components
 
-import ClickOutside from "../../directives/click-outside/index.mjs";
-import Resize from "../../directives/resize/index.mjs"; // Utilities
+import { VOverlay } from "../VOverlay/index.mjs";
+import { VDialogTransition } from "../transitions/index.mjs"; // Composables
 
-import mixins from "../../util/mixins.mjs";
-import { removed } from "../../util/console.mjs";
-import { convertToUnit, keyCodes } from "../../util/helpers.mjs"; // Types
-
-const baseMixins = mixins(Dependent, Delayable, Detachable, Menuable, Returnable, Roundable, Toggleable, Themeable);
-/* @vue/component */
-
-export default baseMixins.extend({
-  name: 'v-menu',
-  directives: {
-    ClickOutside,
-    Resize
-  },
+import { makeTransitionProps } from "../../composables/transition.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-  provide() {
-    return {
-      isInMenu: true,
-      // Pass theme through to default slot
-      theme: this.theme
-    };
-  },
+import { computed, inject, provide, ref, watch } from 'vue';
+import { genericComponent, getUid, useRender } from "../../util/index.mjs";
+import { VMenuSymbol } from "./shared.mjs"; // Types
 
+import { useForwardRef } from "../../composables/forwardRef.mjs";
+export const VMenu = genericComponent()({
+  name: 'VMenu',
+  inheritAttrs: false,
   props: {
-    auto: Boolean,
-    closeOnClick: {
-      type: Boolean,
-      default: true
-    },
-    closeOnContentClick: {
-      type: Boolean,
-      default: true
-    },
-    disabled: Boolean,
-    disableKeys: Boolean,
-    maxHeight: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    offsetX: Boolean,
-    offsetY: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true
-    },
-    openOnHover: Boolean,
-    origin: {
-      type: String,
-      default: 'top left'
-    },
-    transition: {
-      type: [Boolean, String],
-      default: 'v-menu-transition'
-    }
-  },
-
-  data() {
-    return {
-      calculatedTopAuto: 0,
-      defaultOffset: 8,
-      hasJustFocused: false,
-      listIndex: -1,
-      resizeTimeout: 0,
-      selectedIndex: null,
-      tiles: []
-    };
-  },
-
-  computed: {
-    activeTile() {
-      return this.tiles[this.listIndex];
-    },
-
-    calculatedLeft() {
-      const menuWidth = Math.max(this.dimensions.content.width, parseFloat(this.calculatedMinWidth));
-      if (!this.auto) return this.calcLeft(menuWidth) || '0';
-      return convertToUnit(this.calcXOverflow(this.calcLeftAuto(), menuWidth)) || '0';
-    },
-
-    calculatedMaxHeight() {
-      const height = this.auto ? '200px' : convertToUnit(this.maxHeight);
-      return height || '0';
-    },
-
-    calculatedMaxWidth() {
-      return convertToUnit(this.maxWidth) || '0';
-    },
-
-    calculatedMinWidth() {
-      if (this.minWidth) {
-        return convertToUnit(this.minWidth) || '0';
+    // TODO
+    // disableKeys: Boolean,
+    modelValue: Boolean,
+    id: String,
+    ...makeTransitionProps({
+      transition: {
+        component: VDialogTransition
       }
-
-      const minWidth = Math.min(this.dimensions.activator.width + Number(this.nudgeWidth) + (this.auto ? 16 : 0), Math.max(this.pageWidth - 24, 0));
-      const calculatedMaxWidth = isNaN(parseInt(this.calculatedMaxWidth)) ? minWidth : parseInt(this.calculatedMaxWidth);
-      return convertToUnit(Math.min(calculatedMaxWidth, minWidth)) || '0';
-    },
-
-    calculatedTop() {
-      const top = !this.auto ? this.calcTop() : convertToUnit(this.calcYOverflow(this.calculatedTopAuto));
-      return top || '0';
-    },
-
-    hasClickableTiles() {
-      return Boolean(this.tiles.find(tile => tile.tabIndex > -1));
-    },
-
-    styles() {
-      return {
-        maxHeight: this.calculatedMaxHeight,
-        minWidth: this.calculatedMinWidth,
-        maxWidth: this.calculatedMaxWidth,
-        top: this.calculatedTop,
-        left: this.calculatedLeft,
-        transformOrigin: this.origin,
-        zIndex: this.zIndex || this.activeZIndex
-      };
-    }
-
+    })
   },
-  watch: {
-    isActive(val) {
-      if (!val) this.listIndex = -1;
-    },
-
-    isContentActive(val) {
-      this.hasJustFocused = val;
-    },
-
-    listIndex(next, prev) {
-      if (next in this.tiles) {
-        const tile = this.tiles[next];
-        tile.classList.add('v-list-item--highlighted');
-        this.$refs.content.scrollTop = tile.offsetTop - tile.clientHeight;
-      }
-
-      prev in this.tiles && this.tiles[prev].classList.remove('v-list-item--highlighted');
-    }
-
+  emits: {
+    'update:modelValue': value => true
   },
 
-  created() {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('full-width')) {
-      removed('full-width', this);
-    }
-  },
-
-  mounted() {
-    this.isActive && this.callActivate();
-  },
-
-  methods: {
-    activate() {
-      // Update coordinates and dimensions of menu
-      // and its activator
-      this.updateDimensions(); // Start the transition
-
-      requestAnimationFrame(() => {
-        // Once transitioning, calculate scroll and top position
-        this.startTransition().then(() => {
-          if (this.$refs.content) {
-            this.calculatedTopAuto = this.calcTopAuto();
-            this.auto && (this.$refs.content.scrollTop = this.calcScrollPosition());
-          }
-        });
-      });
-    },
-
-    calcScrollPosition() {
-      const $el = this.$refs.content;
-      const activeTile = $el.querySelector('.v-list-item--active');
-      const maxScrollTop = $el.scrollHeight - $el.offsetHeight;
-      return activeTile ? Math.min(maxScrollTop, Math.max(0, activeTile.offsetTop - $el.offsetHeight / 2 + activeTile.offsetHeight / 2)) : $el.scrollTop;
-    },
-
-    calcLeftAuto() {
-      return parseInt(this.dimensions.activator.left - this.defaultOffset * 2);
-    },
-
-    calcTopAuto() {
-      const $el = this.$refs.content;
-      const activeTile = $el.querySelector('.v-list-item--active');
-
-      if (!activeTile) {
-        this.selectedIndex = null;
-      }
-
-      if (this.offsetY || !activeTile) {
-        return this.computedTop;
-      }
-
-      this.selectedIndex = Array.from(this.tiles).indexOf(activeTile);
-      const tileDistanceFromMenuTop = activeTile.offsetTop - this.calcScrollPosition();
-      const firstTileOffsetTop = $el.querySelector('.v-list-item').offsetTop;
-      return this.computedTop - tileDistanceFromMenuTop - firstTileOffsetTop - 1;
-    },
-
-    changeListIndex(e) {
-      // For infinite scroll and autocomplete, re-evaluate children
-      this.getTiles();
-
-      if (!this.isActive || !this.hasClickableTiles) {
-        return;
-      } else if (e.keyCode === keyCodes.tab) {
-        this.isActive = false;
-        return;
-      } else if (e.keyCode === keyCodes.down) {
-        this.nextTile();
-      } else if (e.keyCode === keyCodes.up) {
-        this.prevTile();
-      } else if (e.keyCode === keyCodes.end) {
-        this.lastTile();
-      } else if (e.keyCode === keyCodes.home) {
-        this.firstTile();
-      } else if (e.keyCode === keyCodes.enter && this.listIndex !== -1) {
-        this.tiles[this.listIndex].click();
-      } else {
-        return;
-      } // One of the conditions was met, prevent default action (#2988)
-
-
-      e.preventDefault();
-    },
-
-    closeConditional(e) {
-      const target = e.target;
-      return this.isActive && !this._isDestroyed && this.closeOnClick && !this.$refs.content.contains(target);
-    },
-
-    genActivatorAttributes() {
-      const attributes = Activatable.options.methods.genActivatorAttributes.call(this);
-
-      if (this.activeTile && this.activeTile.id) {
-        return { ...attributes,
-          'aria-activedescendant': this.activeTile.id
-        };
-      }
-
-      return attributes;
-    },
-
-    genActivatorListeners() {
-      const listeners = Menuable.options.methods.genActivatorListeners.call(this);
-
-      if (!this.disableKeys) {
-        listeners.keydown = this.onKeyDown;
-      }
-
-      return listeners;
-    },
-
-    genTransition() {
-      const content = this.genContent();
-      if (!this.transition) return content;
-      return this.$createElement('transition', {
-        props: {
-          name: this.transition
-        }
-      }, [content]);
-    },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const uid = getUid();
+    const id = computed(() => props.id || `v-menu-${uid}`);
+    const overlay = ref();
+    const parent = inject(VMenuSymbol, null);
+    let openChildren = 0;
+    provide(VMenuSymbol, {
+      register() {
+        ++openChildren;
+      },
 
-    genDirectives() {
-      const directives = [{
-        name: 'show',
-        value: this.isContentActive
-      }]; // Do not add click outside for hover menu
+      unregister() {
+        --openChildren;
+      },
 
-      if (!this.openOnHover && this.closeOnClick) {
-        directives.push({
-          name: 'click-outside',
-          value: {
-            handler: () => {
-              this.isActive = false;
-            },
-            closeConditional: this.closeConditional,
-            include: () => [this.$el, ...this.getOpenDependentElements()]
+      closeParents() {
+        setTimeout(() => {
+          if (!openChildren) {
+            isActive.value = false;
+            parent == null ? void 0 : parent.closeParents();
           }
-        });
-      }
-
-      return directives;
-    },
-
-    genContent() {
-      const options = {
-        attrs: { ...this.getScopeIdAttrs(),
-          role: 'role' in this.$attrs ? this.$attrs.role : 'menu'
-        },
-        staticClass: 'v-menu__content',
-        class: { ...this.rootThemeClasses,
-          ...this.roundedClasses,
-          'v-menu__content--auto': this.auto,
-          'v-menu__content--fixed': this.activatorFixed,
-          menuable__content__active: this.isActive,
-          [this.contentClass.trim()]: true
-        },
-        style: this.styles,
-        directives: this.genDirectives(),
-        ref: 'content',
-        on: {
-          click: e => {
-            const target = e.target;
-            if (target.getAttribute('disabled')) return;
-            if (this.closeOnContentClick) this.isActive = false;
-          },
-          keydown: this.onKeyDown
-        }
-      };
-
-      if (this.$listeners.scroll) {
-        options.on = options.on || {};
-        options.on.scroll = this.$listeners.scroll;
-      }
-
-      if (!this.disabled && this.openOnHover) {
-        options.on = options.on || {};
-        options.on.mouseenter = this.mouseEnterHandler;
-      }
-
-      if (this.openOnHover) {
-        options.on = options.on || {};
-        options.on.mouseleave = this.mouseLeaveHandler;
+        }, 40);
       }
 
-      return this.$createElement('div', options, this.getContentSlot());
-    },
+    });
+    watch(isActive, val => {
+      val ? parent == null ? void 0 : parent.register() : parent == null ? void 0 : parent.unregister();
+    });
 
-    getTiles() {
-      if (!this.$refs.content) return;
-      this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item'));
-    },
-
-    mouseEnterHandler() {
-      this.runDelay('open', () => {
-        if (this.hasJustFocused) return;
-        this.hasJustFocused = true;
-      });
-    },
-
-    mouseLeaveHandler(e) {
-      // Prevent accidental re-activation
-      this.runDelay('close', () => {
-        if (this.$refs.content.contains(e.relatedTarget)) return;
-        requestAnimationFrame(() => {
-          this.isActive = false;
-          this.callDeactivate();
-        });
-      });
-    },
-
-    nextTile() {
-      const tile = this.tiles[this.listIndex + 1];
-
-      if (!tile) {
-        if (!this.tiles.length) return;
-        this.listIndex = -1;
-        this.nextTile();
-        return;
-      }
-
-      this.listIndex++;
-      if (tile.tabIndex === -1) this.nextTile();
-    },
-
-    prevTile() {
-      const tile = this.tiles[this.listIndex - 1];
-
-      if (!tile) {
-        if (!this.tiles.length) return;
-        this.listIndex = this.tiles.length;
-        this.prevTile();
-        return;
-      }
-
-      this.listIndex--;
-      if (tile.tabIndex === -1) this.prevTile();
-    },
-
-    lastTile() {
-      const tile = this.tiles[this.tiles.length - 1];
-      if (!tile) return;
-      this.listIndex = this.tiles.length - 1;
-      if (tile.tabIndex === -1) this.prevTile();
-    },
-
-    firstTile() {
-      const tile = this.tiles[0];
-      if (!tile) return;
-      this.listIndex = 0;
-      if (tile.tabIndex === -1) this.nextTile();
-    },
-
-    onKeyDown(e) {
-      if (e.keyCode === keyCodes.esc) {
-        // Wait for dependent elements to close first
-        setTimeout(() => {
-          this.isActive = false;
-        });
-        const activator = this.getActivator();
-        this.$nextTick(() => activator && activator.focus());
-      } else if (!this.isActive && [keyCodes.up, keyCodes.down].includes(e.keyCode)) {
-        this.isActive = true;
-      } // Allow for isActive watcher to generate tile list
-
-
-      this.$nextTick(() => this.changeListIndex(e));
-    },
-
-    onResize() {
-      if (!this.isActive) return; // Account for screen resize
-      // and orientation change
-      // eslint-disable-next-line no-unused-expressions
-
-      this.$refs.content.offsetWidth;
-      this.updateDimensions(); // When resizing to a smaller width
-      // content width is evaluated before
-      // the new activator width has been
-      // set, causing it to not size properly
-      // hacky but will revisit in the future
-
-      clearTimeout(this.resizeTimeout);
-      this.resizeTimeout = window.setTimeout(this.updateDimensions, 100);
+    function onClickOutside() {
+      parent == null ? void 0 : parent.closeParents();
     }
 
-  },
-
-  render(h) {
-    const data = {
-      staticClass: 'v-menu',
-      class: {
-        'v-menu--attached': this.attach === '' || this.attach === true || this.attach === 'attach'
+    useRender(() => _createVNode(VOverlay, _mergeProps({
+      "ref": overlay,
+      "modelValue": isActive.value,
+      "onUpdate:modelValue": $event => isActive.value = $event,
+      "class": ['v-menu'],
+      "transition": props.transition,
+      "absolute": true,
+      "closeOnContentClick": true,
+      "positionStrategy": "connected",
+      "scrollStrategy": "reposition",
+      "scrim": false,
+      "openDelay": "300",
+      "closeDelay": "250",
+      "activatorProps": {
+        'aria-haspopup': 'menu',
+        'aria-expanded': String(isActive.value),
+        'aria-owns': id.value
       },
-      directives: [{
-        arg: '500',
-        name: 'resize',
-        value: this.onResize
-      }]
-    };
-    return h('div', data, [!this.activator && this.genActivator(), this.showLazyContent(() => [this.$createElement(VThemeProvider, {
-      props: {
-        root: true,
-        light: this.light,
-        dark: this.dark
-      }
-    }, [this.genTransition()])])]);
+      "onClick:outside": onClickOutside
+    }, attrs), {
+      default: slots.default,
+      activator: slots.activator
+    }));
+    return useForwardRef({
+      id
+    }, overlay);
   }
 
 });