@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VOverlay/useActivator.mjs

@@ -1,7 +1,9 @@
-// Utilities
-import { getCurrentInstance, IN_BROWSER, isComponentInstance, propsFactory, SUPPORTS_FOCUS_VISIBLE } from "../../util/index.mjs";
+// Composables
 import { makeDelayProps, useDelay } from "../../composables/delay.mjs";
-import { computed, effectScope, nextTick, onScopeDispose, ref, watch, watchEffect } from 'vue'; // Types
+import { VMenuSymbol } from "../VMenu/shared.mjs"; // Utilities
+
+import { getCurrentInstance, IN_BROWSER, isComponentInstance, propsFactory, SUPPORTS_FOCUS_VISIBLE } from "../../util/index.mjs";
+import { computed, effectScope, inject, nextTick, onScopeDispose, ref, watch, watchEffect } from 'vue'; // Types
 
 export const makeActivatorProps = propsFactory({
   activator: [String, Object],
@@ -18,19 +20,29 @@ export const makeActivatorProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  closeOnContentClick: Boolean,
   ...makeDelayProps()
 });
-export function useActivator(props, isActive) {
+export function useActivator(props, _ref) {
+  let {
+    isActive,
+    isTop
+  } = _ref;
   const activatorEl = ref();
   let isHovered = false;
   let isFocused = false;
+  let firstEnter = true;
   const openOnFocus = computed(() => props.openOnFocus || props.openOnFocus == null && props.openOnHover);
   const openOnClick = computed(() => props.openOnClick || props.openOnClick == null && !props.openOnHover && !openOnFocus.value);
   const {
     runOpenDelay,
     runCloseDelay
   } = useDelay(props, value => {
-    if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused)) {
+    if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused) && !(props.openOnHover && isActive.value && !isTop.value)) {
+      if (isActive.value !== value) {
+        firstEnter = true;
+      }
+
       isActive.value = value;
     }
   });
@@ -81,6 +93,57 @@ export function useActivator(props, isActive) {
 
     return events;
   });
+  const contentEvents = computed(() => {
+    const events = {};
+
+    if (props.openOnHover) {
+      events.mouseenter = () => {
+        isHovered = true;
+        runOpenDelay();
+      };
+
+      events.mouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+
+    if (props.closeOnContentClick) {
+      const menu = inject(VMenuSymbol, null);
+
+      events.click = () => {
+        isActive.value = false;
+        menu == null ? void 0 : menu.closeParents();
+      };
+    }
+
+    return events;
+  });
+  const scrimEvents = computed(() => {
+    const events = {};
+
+    if (props.openOnHover) {
+      events.mouseenter = () => {
+        if (firstEnter) {
+          isHovered = true;
+          firstEnter = false;
+          runOpenDelay();
+        }
+      };
+
+      events.mouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+
+    return events;
+  });
+  watch(isTop, val => {
+    if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) {
+      isActive.value = false;
+    }
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;
@@ -89,14 +152,14 @@ export function useActivator(props, isActive) {
       activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
     });
   });
+  const vm = getCurrentInstance('useActivator');
   let scope;
   watch(() => !!props.activator, val => {
     if (val && IN_BROWSER) {
       scope = effectScope();
       scope.run(() => {
-        _useActivator(props, {
+        _useActivator(props, vm, {
           activatorEl,
-          activatorRef,
           activatorEvents
         });
       });
@@ -110,15 +173,17 @@ export function useActivator(props, isActive) {
   return {
     activatorEl,
     activatorRef,
-    activatorEvents
+    activatorEvents,
+    contentEvents,
+    scrimEvents
   };
 }
 
-function _useActivator(props, _ref) {
+function _useActivator(props, vm, _ref2) {
   let {
     activatorEl,
     activatorEvents
-  } = _ref;
+  } = _ref2;
   watch(() => props.activator, (val, oldVal) => {
     if (oldVal && val !== oldVal) {
       const activator = getActivator(oldVal);
@@ -144,8 +209,8 @@ function _useActivator(props, _ref) {
     let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
 
     if (!el) return;
-    Object.entries(activatorEvents.value).forEach(_ref2 => {
-      let [name, cb] = _ref2;
+    Object.entries(activatorEvents.value).forEach(_ref3 => {
+      let [name, cb] = _ref3;
       el.addEventListener(name, cb);
     });
     Object.keys(_props).forEach(k => {
@@ -163,8 +228,8 @@ function _useActivator(props, _ref) {
     let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
 
     if (!el) return;
-    Object.entries(activatorEvents.value).forEach(_ref3 => {
-      let [name, cb] = _ref3;
+    Object.entries(activatorEvents.value).forEach(_ref4 => {
+      let [name, cb] = _ref4;
       el.removeEventListener(name, cb);
     });
     Object.keys(_props).forEach(k => {
@@ -172,8 +237,6 @@ function _useActivator(props, _ref) {
     });
   }
 
-  const vm = getCurrentInstance('useActivator');
-
   function getActivator() {
     var _activator;
 
@@ -184,7 +247,13 @@ function _useActivator(props, _ref) {
       if (selector === 'parent') {
         var _vm$proxy, _vm$proxy$$el;
 
-        activator = vm == null ? void 0 : (_vm$proxy = vm.proxy) == null ? void 0 : (_vm$proxy$$el = _vm$proxy.$el) == null ? void 0 : _vm$proxy$$el.parentNode;
+        let el = vm == null ? void 0 : (_vm$proxy = vm.proxy) == null ? void 0 : (_vm$proxy$$el = _vm$proxy.$el) == null ? void 0 : _vm$proxy$$el.parentNode;
+
+        while (el.hasAttribute('data-no-activator')) {
+          el = el.parentNode;
+        }
+
+        activator = el;
       } else if (typeof selector === 'string') {
         // Selector
         activator = document.querySelector(selector);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VOverlay/useActivator.tsx"],"names":["getCurrentInstance","IN_BROWSER","isComponentInstance","propsFactory","SUPPORTS_FOCUS_VISIBLE","makeDelayProps","useDelay","computed","effectScope","nextTick","onScopeDispose","ref","watch","watchEffect","makeActivatorProps","activator","String","Object","activatorProps","type","default","openOnClick","Boolean","undefined","openOnHover","openOnFocus","useActivator","props","isActive","activatorEl","isHovered","isFocused","value","runOpenDelay","runCloseDelay","availableEvents","click","e","stopPropagation","currentTarget","target","mouseenter","mouseleave","focus","matches","blur","activatorEvents","events","activatorRef","$el","scope","val","run","_useActivator","stop","flush","immediate","oldVal","getActivator","unbindActivatorProps","bindActivatorProps","el","_props","entries","forEach","name","cb","addEventListener","keys","k","removeAttribute","setAttribute","removeEventListener","vm","selector","proxy","parentNode","document","querySelector","nodeType","Node","ELEMENT_NODE"],"mappings":"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","sourcesContent":["// Utilities\nimport { getCurrentInstance, IN_BROWSER, isComponentInstance, propsFactory, SUPPORTS_FOCUS_VISIBLE } from '@/util'\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport {\n  computed,\n  effectScope,\n  nextTick,\n  onScopeDispose,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\n// Types\nimport type { DelayProps } from '@/composables/delay'\nimport type {\n  ComponentPublicInstance,\n  EffectScope,\n  PropType,\n  Ref,\n} from 'vue'\n\ninterface ActivatorProps extends DelayProps {\n  activator?: 'parent' | string | Element | ComponentPublicInstance\n  activatorProps: Record<string, any>\n\n  openOnClick: boolean | undefined\n  openOnHover: boolean\n  openOnFocus: boolean | undefined\n}\n\nexport const makeActivatorProps = propsFactory({\n  activator: [String, Object] as PropType<ActivatorProps['activator']>,\n  activatorProps: {\n    type: Object as PropType<ActivatorProps['activatorProps']>,\n    default: () => ({}),\n  },\n\n  openOnClick: {\n    type: Boolean,\n    default: undefined,\n  },\n  openOnHover: Boolean,\n  openOnFocus: {\n    type: Boolean,\n    default: undefined,\n  },\n\n  ...makeDelayProps(),\n})\n\nexport function useActivator (\n  props: ActivatorProps,\n  isActive: Ref<boolean>\n) {\n  const activatorEl = ref<HTMLElement>()\n\n  let isHovered = false\n  let isFocused = false\n\n  const openOnFocus = computed(() => props.openOnFocus || (props.openOnFocus == null && props.openOnHover))\n  const openOnClick = computed(() => props.openOnClick || (props.openOnClick == null && !props.openOnHover && !openOnFocus.value))\n\n  const { runOpenDelay, runCloseDelay } = useDelay(props, value => {\n    if (value === (\n      (props.openOnHover && isHovered) ||\n      (openOnFocus.value && isFocused)\n    )) {\n      isActive.value = value\n    }\n  })\n\n  const availableEvents = {\n    click: (e: MouseEvent) => {\n      e.stopPropagation()\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n      isActive.value = !isActive.value\n    },\n    mouseenter: (e: MouseEvent) => {\n      isHovered = true\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n      runOpenDelay()\n    },\n    mouseleave: (e: MouseEvent) => {\n      isHovered = false\n      runCloseDelay()\n    },\n    focus: (e: FocusEvent) => {\n      if (\n        SUPPORTS_FOCUS_VISIBLE &&\n        !(e.target as HTMLElement).matches(':focus-visible')\n      ) return\n\n      isFocused = true\n      e.stopPropagation()\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n\n      runOpenDelay()\n    },\n    blur: (e: FocusEvent) => {\n      isFocused = false\n      e.stopPropagation()\n\n      runCloseDelay()\n    },\n  }\n\n  const activatorEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {}\n\n    if (openOnClick.value) {\n      events.click = availableEvents.click\n    }\n    if (props.openOnHover) {\n      events.mouseenter = availableEvents.mouseenter\n      events.mouseleave = availableEvents.mouseleave\n    }\n    if (openOnFocus.value) {\n      events.focus = availableEvents.focus\n      events.blur = availableEvents.blur\n    }\n\n    return events\n  })\n\n  const activatorRef = ref()\n  watchEffect(() => {\n    if (!activatorRef.value) return\n\n    nextTick(() => {\n      const activator = activatorRef.value\n      activatorEl.value = isComponentInstance(activator) ? activator.$el : activator\n    })\n  })\n\n  let scope: EffectScope\n  watch(() => !!props.activator, val => {\n    if (val && IN_BROWSER) {\n      scope = effectScope()\n      scope.run(() => {\n        _useActivator(props, { activatorEl, activatorRef, activatorEvents })\n      })\n    } else if (scope) {\n      scope.stop()\n    }\n  }, { flush: 'post', immediate: true })\n\n  return { activatorEl, activatorRef, activatorEvents }\n}\n\nfunction _useActivator (props: ActivatorProps, { activatorEl, activatorEvents }: ReturnType<typeof useActivator>) {\n  watch(() => props.activator, (val, oldVal) => {\n    if (oldVal && val !== oldVal) {\n      const activator = getActivator(oldVal)\n      activator && unbindActivatorProps(activator)\n    }\n    if (val) {\n      nextTick(() => bindActivatorProps())\n    }\n  }, { immediate: true })\n\n  watch(() => props.activatorProps, () => {\n    bindActivatorProps()\n  })\n\n  onScopeDispose(() => {\n    unbindActivatorProps()\n  })\n\n  function bindActivatorProps (el = getActivator(), _props = props.activatorProps) {\n    if (!el) return\n\n    Object.entries(activatorEvents.value).forEach(([name, cb]) => {\n      el.addEventListener(name, cb as (e: Event) => void)\n    })\n\n    Object.keys(_props).forEach(k => {\n      if (_props[k] == null) {\n        el.removeAttribute(k)\n      } else {\n        el.setAttribute(k, _props[k])\n      }\n    })\n  }\n\n  function unbindActivatorProps (el = getActivator(), _props = props.activatorProps) {\n    if (!el) return\n\n    Object.entries(activatorEvents.value).forEach(([name, cb]) => {\n      el.removeEventListener(name, cb as (e: Event) => void)\n    })\n\n    Object.keys(_props).forEach(k => {\n      el.removeAttribute(k)\n    })\n  }\n\n  const vm = getCurrentInstance('useActivator')\n  function getActivator (selector = props.activator): HTMLElement | undefined {\n    let activator\n    if (selector) {\n      if (selector === 'parent') {\n        activator = vm?.proxy?.$el?.parentNode\n      } else if (typeof selector === 'string') {\n        // Selector\n        activator = document.querySelector(selector)\n      } else if ('$el' in selector) {\n        // Component (ref)\n        activator = selector.$el\n      } else {\n        // HTMLElement | Element\n        activator = selector\n      }\n    }\n\n    // The activator should only be a valid element (Ignore comments and text nodes)\n    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : null\n\n    return activatorEl.value\n  }\n}\n"],"file":"useActivator.mjs"}
+{"version":3,"file":"useActivator.mjs","names":["makeDelayProps","useDelay","VMenuSymbol","getCurrentInstance","IN_BROWSER","isComponentInstance","propsFactory","SUPPORTS_FOCUS_VISIBLE","computed","effectScope","inject","nextTick","onScopeDispose","ref","watch","watchEffect","makeActivatorProps","activator","String","Object","activatorProps","type","default","openOnClick","Boolean","undefined","openOnHover","openOnFocus","closeOnContentClick","useActivator","props","isActive","isTop","activatorEl","isHovered","isFocused","firstEnter","value","runOpenDelay","runCloseDelay","availableEvents","click","e","stopPropagation","currentTarget","target","mouseenter","mouseleave","focus","matches","blur","activatorEvents","events","contentEvents","menu","closeParents","scrimEvents","val","activatorRef","$el","vm","scope","run","_useActivator","stop","flush","immediate","oldVal","getActivator","unbindActivatorProps","bindActivatorProps","el","_props","entries","forEach","name","cb","addEventListener","keys","k","removeAttribute","setAttribute","removeEventListener","selector","proxy","parentNode","hasAttribute","document","querySelector","nodeType","Node","ELEMENT_NODE"],"sources":["../../../src/components/VOverlay/useActivator.tsx"],"sourcesContent":["// Composables\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport { VMenuSymbol } from '@/components/VMenu/shared'\n\n// Utilities\nimport { getCurrentInstance, IN_BROWSER, isComponentInstance, propsFactory, SUPPORTS_FOCUS_VISIBLE } from '@/util'\nimport {\n  computed,\n  effectScope,\n  inject,\n  nextTick,\n  onScopeDispose,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\n// Types\nimport type { DelayProps } from '@/composables/delay'\nimport type {\n  ComponentInternalInstance,\n  ComponentPublicInstance,\n  EffectScope,\n  PropType,\n  Ref,\n} from 'vue'\n\ninterface ActivatorProps extends DelayProps {\n  activator?: 'parent' | string | Element | ComponentPublicInstance\n  activatorProps: Record<string, any>\n\n  openOnClick: boolean | undefined\n  openOnHover: boolean\n  openOnFocus: boolean | undefined\n\n  closeOnContentClick: boolean\n}\n\nexport const makeActivatorProps = propsFactory({\n  activator: [String, Object] as PropType<ActivatorProps['activator']>,\n  activatorProps: {\n    type: Object as PropType<ActivatorProps['activatorProps']>,\n    default: () => ({}),\n  },\n\n  openOnClick: {\n    type: Boolean,\n    default: undefined,\n  },\n  openOnHover: Boolean,\n  openOnFocus: {\n    type: Boolean,\n    default: undefined,\n  },\n\n  closeOnContentClick: Boolean,\n\n  ...makeDelayProps(),\n})\n\nexport function useActivator (\n  props: ActivatorProps,\n  { isActive, isTop }: { isActive: Ref<boolean>, isTop: Ref<boolean> }\n) {\n  const activatorEl = ref<HTMLElement>()\n\n  let isHovered = false\n  let isFocused = false\n  let firstEnter = true\n\n  const openOnFocus = computed(() => props.openOnFocus || (props.openOnFocus == null && props.openOnHover))\n  const openOnClick = computed(() => props.openOnClick || (props.openOnClick == null && !props.openOnHover && !openOnFocus.value))\n\n  const { runOpenDelay, runCloseDelay } = useDelay(props, value => {\n    if (\n      value === (\n        (props.openOnHover && isHovered) ||\n        (openOnFocus.value && isFocused)\n      ) && !(props.openOnHover && isActive.value && !isTop.value)\n    ) {\n      if (isActive.value !== value) {\n        firstEnter = true\n      }\n      isActive.value = value\n    }\n  })\n\n  const availableEvents = {\n    click: (e: MouseEvent) => {\n      e.stopPropagation()\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n      isActive.value = !isActive.value\n    },\n    mouseenter: (e: MouseEvent) => {\n      isHovered = true\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n      runOpenDelay()\n    },\n    mouseleave: (e: MouseEvent) => {\n      isHovered = false\n      runCloseDelay()\n    },\n    focus: (e: FocusEvent) => {\n      if (\n        SUPPORTS_FOCUS_VISIBLE &&\n        !(e.target as HTMLElement).matches(':focus-visible')\n      ) return\n\n      isFocused = true\n      e.stopPropagation()\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement\n\n      runOpenDelay()\n    },\n    blur: (e: FocusEvent) => {\n      isFocused = false\n      e.stopPropagation()\n\n      runCloseDelay()\n    },\n  }\n\n  const activatorEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {}\n\n    if (openOnClick.value) {\n      events.click = availableEvents.click\n    }\n    if (props.openOnHover) {\n      events.mouseenter = availableEvents.mouseenter\n      events.mouseleave = availableEvents.mouseleave\n    }\n    if (openOnFocus.value) {\n      events.focus = availableEvents.focus\n      events.blur = availableEvents.blur\n    }\n\n    return events\n  })\n\n  const contentEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {}\n\n    if (props.openOnHover) {\n      events.mouseenter = () => {\n        isHovered = true\n        runOpenDelay()\n      }\n      events.mouseleave = () => {\n        isHovered = false\n        runCloseDelay()\n      }\n    }\n\n    if (props.closeOnContentClick) {\n      const menu = inject(VMenuSymbol, null)\n      events.click = () => {\n        isActive.value = false\n        menu?.closeParents()\n      }\n    }\n\n    return events\n  })\n\n  const scrimEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {}\n    if (props.openOnHover) {\n      events.mouseenter = () => {\n        if (firstEnter) {\n          isHovered = true\n          firstEnter = false\n          runOpenDelay()\n        }\n      }\n      events.mouseleave = () => {\n        isHovered = false\n        runCloseDelay()\n      }\n    }\n\n    return events\n  })\n\n  watch(isTop, val => {\n    if (val && (\n      (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused)) ||\n      (openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))\n    )) {\n      isActive.value = false\n    }\n  })\n\n  const activatorRef = ref()\n  watchEffect(() => {\n    if (!activatorRef.value) return\n\n    nextTick(() => {\n      const activator = activatorRef.value\n      activatorEl.value = isComponentInstance(activator) ? activator.$el : activator\n    })\n  })\n\n  const vm = getCurrentInstance('useActivator')\n  let scope: EffectScope\n  watch(() => !!props.activator, val => {\n    if (val && IN_BROWSER) {\n      scope = effectScope()\n      scope.run(() => {\n        _useActivator(props, vm, { activatorEl, activatorEvents })\n      })\n    } else if (scope) {\n      scope.stop()\n    }\n  }, { flush: 'post', immediate: true })\n\n  return { activatorEl, activatorRef, activatorEvents, contentEvents, scrimEvents }\n}\n\nfunction _useActivator (\n  props: ActivatorProps,\n  vm: ComponentInternalInstance,\n  { activatorEl, activatorEvents }: Pick<ReturnType<typeof useActivator>, 'activatorEl' | 'activatorEvents'>\n) {\n  watch(() => props.activator, (val, oldVal) => {\n    if (oldVal && val !== oldVal) {\n      const activator = getActivator(oldVal)\n      activator && unbindActivatorProps(activator)\n    }\n    if (val) {\n      nextTick(() => bindActivatorProps())\n    }\n  }, { immediate: true })\n\n  watch(() => props.activatorProps, () => {\n    bindActivatorProps()\n  })\n\n  onScopeDispose(() => {\n    unbindActivatorProps()\n  })\n\n  function bindActivatorProps (el = getActivator(), _props = props.activatorProps) {\n    if (!el) return\n\n    Object.entries(activatorEvents.value).forEach(([name, cb]) => {\n      el.addEventListener(name, cb as (e: Event) => void)\n    })\n\n    Object.keys(_props).forEach(k => {\n      if (_props[k] == null) {\n        el.removeAttribute(k)\n      } else {\n        el.setAttribute(k, _props[k])\n      }\n    })\n  }\n\n  function unbindActivatorProps (el = getActivator(), _props = props.activatorProps) {\n    if (!el) return\n\n    Object.entries(activatorEvents.value).forEach(([name, cb]) => {\n      el.removeEventListener(name, cb as (e: Event) => void)\n    })\n\n    Object.keys(_props).forEach(k => {\n      el.removeAttribute(k)\n    })\n  }\n\n  function getActivator (selector = props.activator): HTMLElement | undefined {\n    let activator\n    if (selector) {\n      if (selector === 'parent') {\n        let el = vm?.proxy?.$el?.parentNode\n        while (el.hasAttribute('data-no-activator')) {\n          el = el.parentNode\n        }\n        activator = el\n      } else if (typeof selector === 'string') {\n        // Selector\n        activator = document.querySelector(selector)\n      } else if ('$el' in selector) {\n        // Component (ref)\n        activator = selector.$el\n      } else {\n        // HTMLElement | Element\n        activator = selector\n      }\n    }\n\n    // The activator should only be a valid element (Ignore comments and text nodes)\n    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : null\n\n    return activatorEl.value\n  }\n}\n"],"mappings":"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"}

package/lib/components/VOverlay/util/point.mjs

@@ -29,18 +29,18 @@ export function anchorToPoint(anchor, box) {
       side,
       align
     } = anchor;
-    const x = align === 'start' ? 0 : align === 'center' ? box.width / 2 : align === 'end' ? box.width : align;
+    const x = align === 'left' ? 0 : align === 'center' ? box.width / 2 : align === 'right' ? box.width : align;
     const y = side === 'top' ? 0 : side === 'bottom' ? box.height : side;
     return elementToViewport({
       x,
       y
     }, box);
-  } else if (anchor.side === 'start' || anchor.side === 'end') {
+  } else if (anchor.side === 'left' || anchor.side === 'right') {
     const {
       side,
       align
     } = anchor;
-    const x = side === 'start' ? 0 : side === 'end' ? box.width : side;
+    const x = side === 'left' ? 0 : side === 'right' ? box.width : side;
     const y = align === 'top' ? 0 : align === 'center' ? box.height / 2 : align === 'bottom' ? box.height : align;
     return elementToViewport({
       x,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/VOverlay/util/point.ts"],"names":["elementToViewport","point","offset","x","y","viewportToElement","getOffset","a","b","anchorToPoint","anchor","box","side","align","width","height"],"mappings":"AAWA;AACA,OAAO,SAASA,iBAAT,CAA4BC,KAA5B,EAAiDC,MAAjD,EAAuE;AAC5E,SAAO;AACLC,IAAAA,CAAC,EAAEF,KAAK,CAACE,CAAN,GAAUD,MAAM,CAACC,CADf;AAELC,IAAAA,CAAC,EAAEH,KAAK,CAACG,CAAN,GAAUF,MAAM,CAACE;AAFf,GAAP;AAID;AAED;;AACA,OAAO,SAASC,iBAAT,CAA4BJ,KAA5B,EAAkDC,MAAlD,EAAwE;AAC7E,SAAO;AACLC,IAAAA,CAAC,EAAEF,KAAK,CAACE,CAAN,GAAUD,MAAM,CAACC,CADf;AAELC,IAAAA,CAAC,EAAEH,KAAK,CAACG,CAAN,GAAUF,MAAM,CAACE;AAFf,GAAP;AAID;AAED;;AACA,OAAO,SAASE,SAAT,CAAqCC,CAArC,EAA2CC,CAA3C,EAAiD;AACtD,SAAO;AACLL,IAAAA,CAAC,EAAEI,CAAC,CAACJ,CAAF,GAAMK,CAAC,CAACL,CADN;AAELC,IAAAA,CAAC,EAAEG,CAAC,CAACH,CAAF,GAAMI,CAAC,CAACJ;AAFN,GAAP;AAID;AAED;;AACA,OAAO,SAASK,aAAT,CAAwBC,MAAxB,EAA8CC,GAA9C,EAAuE;AAC5E,MAAID,MAAM,CAACE,IAAP,KAAgB,KAAhB,IAAyBF,MAAM,CAACE,IAAP,KAAgB,QAA7C,EAAuD;AACrD,UAAM;AAAEA,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAkBH,MAAxB;AAEA,UAAMP,CAAS,GACbU,KAAK,KAAK,OAAV,GAAoB,CAApB,GACEA,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACG,KAAJ,GAAY,CAAjC,GACAD,KAAK,KAAK,KAAV,GAAkBF,GAAG,CAACG,KAAtB,GACAD,KAJJ;AAKA,UAAMT,CAAS,GACbQ,IAAI,KAAK,KAAT,GAAiB,CAAjB,GACEA,IAAI,KAAK,QAAT,GAAoBD,GAAG,CAACI,MAAxB,GACAH,IAHJ;AAKA,WAAOZ,iBAAiB,CAAC;AAAEG,MAAAA,CAAF;AAAKC,MAAAA;AAAL,KAAD,EAA2BO,GAA3B,CAAxB;AACD,GAdD,MAcO,IAAID,MAAM,CAACE,IAAP,KAAgB,OAAhB,IAA2BF,MAAM,CAACE,IAAP,KAAgB,KAA/C,EAAsD;AAC3D,UAAM;AAAEA,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAkBH,MAAxB;AAEA,UAAMP,CAAS,GACbS,IAAI,KAAK,OAAT,GAAmB,CAAnB,GACEA,IAAI,KAAK,KAAT,GAAiBD,GAAG,CAACG,KAArB,GACAF,IAHJ;AAIA,UAAMR,CAAS,GACbS,KAAK,KAAK,KAAV,GAAkB,CAAlB,GACEA,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACI,MAAJ,GAAa,CAAlC,GACAF,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACI,MAAzB,GACAF,KAJJ;AAMA,WAAOb,iBAAiB,CAAC;AAAEG,MAAAA,CAAF;AAAKC,MAAAA;AAAL,KAAD,EAA2BO,GAA3B,CAAxB;AACD;;AAED,SAAOX,iBAAiB,CAAC;AACvBG,IAAAA,CAAC,EAAEQ,GAAG,CAACG,KAAJ,GAAY,CADQ;AAEvBV,IAAAA,CAAC,EAAEO,GAAG,CAACI,MAAJ,GAAa;AAFO,GAAD,EAGLJ,GAHK,CAAxB;AAID","sourcesContent":["import type { ParsedAnchor } from './anchor'\nimport type { Box } from '@/util/box'\n\ntype Point = { x: number, y: number }\ndeclare class As<T extends string> {\n  private as: T\n}\ntype ElementPoint = Point & As<'element'>\ntype ViewportPoint = Point & As<'viewport'>\ntype Offset = Point & As<'offset'>\n\n/** Convert a point in local space to viewport space */\nexport function elementToViewport (point: ElementPoint, offset: Offset | Box) {\n  return {\n    x: point.x + offset.x,\n    y: point.y + offset.y,\n  } as ViewportPoint\n}\n\n/** Convert a point in viewport space to local space */\nexport function viewportToElement (point: ViewportPoint, offset: Offset | Box) {\n  return {\n    x: point.x - offset.x,\n    y: point.y - offset.y,\n  } as ElementPoint\n}\n\n/** Get the difference between two points */\nexport function getOffset<T extends Point> (a: T, b: T) {\n  return {\n    x: a.x - b.x,\n    y: a.y - b.y,\n  } as Offset\n}\n\n/** Convert an anchor object to a point in local space */\nexport function anchorToPoint (anchor: ParsedAnchor, box: Box): ViewportPoint {\n  if (anchor.side === 'top' || anchor.side === 'bottom') {\n    const { side, align } = anchor\n\n    const x: number =\n      align === 'start' ? 0\n      : align === 'center' ? box.width / 2\n      : align === 'end' ? box.width\n      : align\n    const y: number =\n      side === 'top' ? 0\n      : side === 'bottom' ? box.height\n      : side\n\n    return elementToViewport({ x, y } as ElementPoint, box)\n  } else if (anchor.side === 'start' || anchor.side === 'end') {\n    const { side, align } = anchor\n\n    const x: number =\n      side === 'start' ? 0\n      : side === 'end' ? box.width\n      : side\n    const y: number =\n      align === 'top' ? 0\n      : align === 'center' ? box.height / 2\n      : align === 'bottom' ? box.height\n      : align\n\n    return elementToViewport({ x, y } as ElementPoint, box)\n  }\n\n  return elementToViewport({\n    x: box.width / 2,\n    y: box.height / 2,\n  } as ElementPoint, box)\n}\n"],"file":"point.mjs"}
+{"version":3,"file":"point.mjs","names":["elementToViewport","point","offset","x","y","viewportToElement","getOffset","a","b","anchorToPoint","anchor","box","side","align","width","height"],"sources":["../../../../src/components/VOverlay/util/point.ts"],"sourcesContent":["import type { ParsedAnchor } from '@/util'\nimport type { Box } from '@/util/box'\n\ntype Point = { x: number, y: number }\ndeclare class As<T extends string> {\n  private as: T\n}\ntype ElementPoint = Point & As<'element'>\ntype ViewportPoint = Point & As<'viewport'>\ntype Offset = Point & As<'offset'>\n\n/** Convert a point in local space to viewport space */\nexport function elementToViewport (point: ElementPoint, offset: Offset | Box) {\n  return {\n    x: point.x + offset.x,\n    y: point.y + offset.y,\n  } as ViewportPoint\n}\n\n/** Convert a point in viewport space to local space */\nexport function viewportToElement (point: ViewportPoint, offset: Offset | Box) {\n  return {\n    x: point.x - offset.x,\n    y: point.y - offset.y,\n  } as ElementPoint\n}\n\n/** Get the difference between two points */\nexport function getOffset<T extends Point> (a: T, b: T) {\n  return {\n    x: a.x - b.x,\n    y: a.y - b.y,\n  } as Offset\n}\n\n/** Convert an anchor object to a point in local space */\nexport function anchorToPoint (anchor: ParsedAnchor, box: Box): ViewportPoint {\n  if (anchor.side === 'top' || anchor.side === 'bottom') {\n    const { side, align } = anchor\n\n    const x: number =\n      align === 'left' ? 0\n      : align === 'center' ? box.width / 2\n      : align === 'right' ? box.width\n      : align\n    const y: number =\n      side === 'top' ? 0\n      : side === 'bottom' ? box.height\n      : side\n\n    return elementToViewport({ x, y } as ElementPoint, box)\n  } else if (anchor.side === 'left' || anchor.side === 'right') {\n    const { side, align } = anchor\n\n    const x: number =\n      side === 'left' ? 0\n      : side === 'right' ? box.width\n      : side\n    const y: number =\n      align === 'top' ? 0\n      : align === 'center' ? box.height / 2\n      : align === 'bottom' ? box.height\n      : align\n\n    return elementToViewport({ x, y } as ElementPoint, box)\n  }\n\n  return elementToViewport({\n    x: box.width / 2,\n    y: box.height / 2,\n  } as ElementPoint, box)\n}\n"],"mappings":"AAWA;AACA,OAAO,SAASA,iBAAT,CAA4BC,KAA5B,EAAiDC,MAAjD,EAAuE;EAC5E,OAAO;IACLC,CAAC,EAAEF,KAAK,CAACE,CAAN,GAAUD,MAAM,CAACC,CADf;IAELC,CAAC,EAAEH,KAAK,CAACG,CAAN,GAAUF,MAAM,CAACE;EAFf,CAAP;AAID;AAED;;AACA,OAAO,SAASC,iBAAT,CAA4BJ,KAA5B,EAAkDC,MAAlD,EAAwE;EAC7E,OAAO;IACLC,CAAC,EAAEF,KAAK,CAACE,CAAN,GAAUD,MAAM,CAACC,CADf;IAELC,CAAC,EAAEH,KAAK,CAACG,CAAN,GAAUF,MAAM,CAACE;EAFf,CAAP;AAID;AAED;;AACA,OAAO,SAASE,SAAT,CAAqCC,CAArC,EAA2CC,CAA3C,EAAiD;EACtD,OAAO;IACLL,CAAC,EAAEI,CAAC,CAACJ,CAAF,GAAMK,CAAC,CAACL,CADN;IAELC,CAAC,EAAEG,CAAC,CAACH,CAAF,GAAMI,CAAC,CAACJ;EAFN,CAAP;AAID;AAED;;AACA,OAAO,SAASK,aAAT,CAAwBC,MAAxB,EAA8CC,GAA9C,EAAuE;EAC5E,IAAID,MAAM,CAACE,IAAP,KAAgB,KAAhB,IAAyBF,MAAM,CAACE,IAAP,KAAgB,QAA7C,EAAuD;IACrD,MAAM;MAAEA,IAAF;MAAQC;IAAR,IAAkBH,MAAxB;IAEA,MAAMP,CAAS,GACbU,KAAK,KAAK,MAAV,GAAmB,CAAnB,GACEA,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACG,KAAJ,GAAY,CAAjC,GACAD,KAAK,KAAK,OAAV,GAAoBF,GAAG,CAACG,KAAxB,GACAD,KAJJ;IAKA,MAAMT,CAAS,GACbQ,IAAI,KAAK,KAAT,GAAiB,CAAjB,GACEA,IAAI,KAAK,QAAT,GAAoBD,GAAG,CAACI,MAAxB,GACAH,IAHJ;IAKA,OAAOZ,iBAAiB,CAAC;MAAEG,CAAF;MAAKC;IAAL,CAAD,EAA2BO,GAA3B,CAAxB;EACD,CAdD,MAcO,IAAID,MAAM,CAACE,IAAP,KAAgB,MAAhB,IAA0BF,MAAM,CAACE,IAAP,KAAgB,OAA9C,EAAuD;IAC5D,MAAM;MAAEA,IAAF;MAAQC;IAAR,IAAkBH,MAAxB;IAEA,MAAMP,CAAS,GACbS,IAAI,KAAK,MAAT,GAAkB,CAAlB,GACEA,IAAI,KAAK,OAAT,GAAmBD,GAAG,CAACG,KAAvB,GACAF,IAHJ;IAIA,MAAMR,CAAS,GACbS,KAAK,KAAK,KAAV,GAAkB,CAAlB,GACEA,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACI,MAAJ,GAAa,CAAlC,GACAF,KAAK,KAAK,QAAV,GAAqBF,GAAG,CAACI,MAAzB,GACAF,KAJJ;IAMA,OAAOb,iBAAiB,CAAC;MAAEG,CAAF;MAAKC;IAAL,CAAD,EAA2BO,GAA3B,CAAxB;EACD;;EAED,OAAOX,iBAAiB,CAAC;IACvBG,CAAC,EAAEQ,GAAG,CAACG,KAAJ,GAAY,CADQ;IAEvBV,CAAC,EAAEO,GAAG,CAACI,MAAJ,GAAa;EAFO,CAAD,EAGLJ,GAHK,CAAxB;AAID"}

package/lib/components/VPagination/VPagination.mjs

@@ -1,29 +1,32 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+// Styles
 import "./VPagination.css"; // Components
 
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 
-import { makeTagProps } from "../../composables/tag.mjs";
-import { useLocale } from "../../composables/locale.mjs";
-import { useRtl } from "../../composables/rtl.mjs";
-import { makeElevationProps } from "../../composables/elevation.mjs";
+import { IconValue } from "../../composables/icons.mjs";
+import { makeBorderProps } from "../../composables/border.mjs";
 import { makeDensityProps } from "../../composables/density.mjs";
+import { makeElevationProps } from "../../composables/elevation.mjs";
+import { makeRoundedProps } from "../../composables/rounded.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeVariantProps } from "../../composables/variant.mjs";
-import { useResizeObserver } from "../../composables/resizeObserver.mjs";
-import { makeBorderProps } from "../../composables/border.mjs";
-import { useRefs } from "../../composables/refs.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
+import { useRefs } from "../../composables/refs.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs";
+import { useRtl } from "../../composables/rtl.mjs"; // Utilities
 
 import { computed, nextTick, ref, toRef } from 'vue';
-import { createRange, defineComponent, keyValues } from "../../util/index.mjs"; // Types
+import { createRange, defineComponent, keyValues, useRender } from "../../util/index.mjs"; // Types
 
-import { makeRoundedProps } from "../../composables/rounded.mjs";
 export const VPagination = defineComponent({
   name: 'VPagination',
   props: {
+    activeColor: String,
     start: {
       type: [Number, String],
       default: 1
@@ -40,19 +43,19 @@ export const VPagination = defineComponent({
     },
     totalVisible: [Number, String],
     firstIcon: {
-      type: String,
+      type: IconValue,
       default: '$first'
     },
     prevIcon: {
-      type: String,
+      type: IconValue,
       default: '$prev'
     },
     nextIcon: {
-      type: String,
+      type: IconValue,
       default: '$next'
     },
     lastIcon: {
-      type: String,
+      type: IconValue,
       default: '$last'
     },
     ariaLabel: {
@@ -88,10 +91,10 @@ export const VPagination = defineComponent({
       default: '...'
     },
     showFirstLastPage: Boolean,
-    ...makeRoundedProps(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
+    ...makeRoundedProps(),
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'nav'
@@ -140,40 +143,38 @@ export const VPagination = defineComponent({
       const firstItem = target.querySelector('.v-pagination__list > *');
       if (!firstItem) return;
       const totalWidth = contentRect.width;
-      const itemWidth = firstItem.getBoundingClientRect().width + 10;
-      maxButtons.value = Math.max(0, Math.floor((totalWidth - 96) / itemWidth));
+      const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
+      const minButtons = props.showFirstLastPage ? 5 : 3;
+      maxButtons.value = Math.max(0, Math.floor( // Round to two decimal places to avoid floating point errors
+      +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
     });
     const length = computed(() => parseInt(props.length, 10));
     const start = computed(() => parseInt(props.start, 10));
     const totalVisible = computed(() => {
-      var _props$totalVisible;
-
-      if (props.totalVisible) return Math.min(parseInt((_props$totalVisible = props.totalVisible) != null ? _props$totalVisible : '', 10), length.value);else if (maxButtons.value >= 0) return maxButtons.value;
+      if (props.totalVisible) return parseInt(props.totalVisible, 10);else if (maxButtons.value >= 0) return maxButtons.value;
       return length.value;
     });
     const range = computed(() => {
-      if (length.value <= 0) return [];
+      if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
+      if (totalVisible.value <= 1) return [page.value];
 
-      if (totalVisible.value <= 3) {
-        return [Math.min(Math.max(start.value, page.value), start.value + length.value)];
-      }
-
-      if (props.length <= totalVisible.value) {
+      if (length.value <= totalVisible.value) {
         return createRange(length.value, start.value);
       }
 
-      const middle = Math.ceil(totalVisible.value / 2);
-      const left = middle;
+      const even = totalVisible.value % 2 === 0;
+      const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
+      const left = even ? middle : middle + 1;
       const right = length.value - middle;
 
-      if (page.value < left) {
-        return [...createRange(Math.max(1, totalVisible.value - 2), start.value), props.ellipsis, length.value];
-      } else if (page.value > right) {
-        const rangeLength = totalVisible.value - 2;
+      if (left - page.value >= 0) {
+        return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
+      } else if (page.value - right >= (even ? 1 : 0)) {
+        const rangeLength = totalVisible.value - 1;
         const rangeStart = length.value - rangeLength + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
       } else {
-        const rangeLength = Math.max(1, totalVisible.value - 4);
+        const rangeLength = Math.max(1, totalVisible.value - 3);
         const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
       }
@@ -190,7 +191,8 @@ export const VPagination = defineComponent({
       updateRef
     } = useRefs();
     provideDefaults({
-      VBtn: {
+      VPaginationBtn: {
+        color: toRef(props, 'color'),
         border: toRef(props, 'border'),
         density: toRef(props, 'density'),
         size: toRef(props, 'size'),
@@ -204,6 +206,7 @@ export const VPagination = defineComponent({
         if (typeof item === 'string') {
           return {
             isActive: false,
+            key: `ellipsis-${index}`,
             page: item,
             props: {
               ref,
@@ -216,6 +219,7 @@ export const VPagination = defineComponent({
           const isActive = item === page.value;
           return {
             isActive,
+            key: item,
             page: n(item),
             props: {
               ref,
@@ -224,7 +228,7 @@ export const VPagination = defineComponent({
               disabled: !!props.disabled || props.length < 2,
               elevation: props.elevation,
               rounded: props.rounded,
-              color: isActive ? props.color : undefined,
+              color: isActive ? props.activeColor : props.color,
               ariaCurrent: isActive,
               ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
               onClick: e => setValue(e, item)
@@ -285,7 +289,7 @@ export const VPagination = defineComponent({
       }
     }
 
-    return () => _createVNode(props.tag, {
+    useRender(() => _createVNode(props.tag, {
       "ref": resizeRef,
       "class": ['v-pagination', themeClasses.value],
       "role": "navigation",
@@ -296,27 +300,42 @@ export const VPagination = defineComponent({
       default: () => [_createVNode("ul", {
         "class": "v-pagination__list"
       }, [props.showFirstLastPage && _createVNode("li", {
+        "key": "first",
         "class": "v-pagination__first",
         "data-test": "v-pagination-first"
-      }, [slots.first ? slots.first(controls.value.first) : _createVNode(VBtn, controls.value.first, null)]), _createVNode("li", {
+      }, [slots.first ? slots.first(controls.value.first) : _createVNode(VBtn, _mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.first), null)]), _createVNode("li", {
+        "key": "prev",
         "class": "v-pagination__prev",
         "data-test": "v-pagination-prev"
-      }, [slots.prev ? slots.prev(controls.value.prev) : _createVNode(VBtn, controls.value.prev, null)]), items.value.map((item, index) => _createVNode("li", {
-        "key": `${index}_${item.page}`,
+      }, [slots.prev ? slots.prev(controls.value.prev) : _createVNode(VBtn, _mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.prev), null)]), items.value.map((item, index) => _createVNode("li", {
+        "key": item.key,
         "class": ['v-pagination__item', {
           'v-pagination__item--is-active': item.isActive
         }],
         "data-test": "v-pagination-item"
-      }, [slots.item ? slots.item(item) : _createVNode(VBtn, item.props, {
+      }, [slots.item ? slots.item(item) : _createVNode(VBtn, _mergeProps({
+        "_as": "VPaginationBtn"
+      }, item.props), {
         default: () => [item.page]
       })])), _createVNode("li", {
+        "key": "next",
         "class": "v-pagination__next",
         "data-test": "v-pagination-next"
-      }, [slots.next ? slots.next(controls.value.next) : _createVNode(VBtn, controls.value.next, null)]), props.showFirstLastPage && _createVNode("li", {
+      }, [slots.next ? slots.next(controls.value.next) : _createVNode(VBtn, _mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.next), null)]), props.showFirstLastPage && _createVNode("li", {
+        "key": "last",
         "class": "v-pagination__last",
         "data-test": "v-pagination-last"
-      }, [slots.last ? slots.last(controls.value.last) : _createVNode(VBtn, controls.value.last, null)])])]
-    });
+      }, [slots.last ? slots.last(controls.value.last) : _createVNode(VBtn, _mergeProps({
+        "_as": "VPaginationBtn"
+      }, controls.value.last), null)])])]
+    }));
+    return {};
   }
 
 });