reka-ui 2.3.0 → 2.3.1

package/dist/Combobox/ComboboxContentImpl.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Popper_PopperContent = require('../Popper/PopperContent.cjs');
 const shared_useBodyScrollLock = require('../shared/useBodyScrollLock.cjs');
 const shared_createContext = require('../shared/createContext.cjs');
@@ -10,6 +9,7 @@ const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useHideOthers = require('../shared/useHideOthers.cjs');
 const shared_useForwardProps = require('../shared/useForwardProps.cjs');
 const Listbox_ListboxContent = require('../Listbox/ListboxContent.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 
 const [injectComboboxContentContext, provideComboboxContentContext] = shared_createContext.createContext("ComboboxContent");

package/dist/Combobox/ComboboxContentImpl.js

@@ -1,5 +1,4 @@
 import { defineComponent, toRefs, computed, ref, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, resolveDynamicComponent, mergeProps, renderSlot } from 'vue';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { _ as _sfc_main$3 } from '../Popper/PopperContent.js';
 import { u as useBodyScrollLock } from '../shared/useBodyScrollLock.js';
 import { c as createContext } from '../shared/createContext.js';
@@ -8,6 +7,7 @@ import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useHideOthers } from '../shared/useHideOthers.js';
 import { u as useForwardProps } from '../shared/useForwardProps.js';
 import { _ as _sfc_main$1 } from '../Listbox/ListboxContent.js';
+import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 
 const [injectComboboxContentContext, provideComboboxContentContext] = createContext("ComboboxContent");

package/dist/Dialog/DialogContentImpl.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Menu_utils = require('../Menu/utils.cjs');
 const Dialog_utils = require('./utils.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useId = require('../shared/useId.cjs');
 const shared_getActiveElement = require('../shared/getActiveElement.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Dialog_DialogRoot = require('./DialogRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({

package/dist/Dialog/DialogContentImpl.js

@@ -1,11 +1,11 @@
 import { defineComponent, onMounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { g as getOpenState } from '../Menu/utils.js';
 import { u as useWarning } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useId } from '../shared/useId.js';
 import { g as getActiveElement } from '../shared/getActiveElement.js';
 import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
+import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { i as injectDialogRootContext } from './DialogRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/DismissableLayer/utils.cjs

@@ -78,11 +78,11 @@ function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
     }
   };
 }
-function useFocusOutside(onFocusOutside, element) {
+function useFocusOutside(onFocusOutside, element, enabled = true) {
   const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
   const isFocusInsideDOMTree = vue.ref(false);
   vue.watchEffect((cleanupFn) => {
-    if (!shared.isClient)
+    if (!shared.isClient || !vue.toValue(enabled))
       return;
     const handleFocus = async (event) => {
       if (!element?.value)
@@ -105,8 +105,16 @@ function useFocusOutside(onFocusOutside, element) {
     cleanupFn(() => ownerDocument.removeEventListener("focusin", handleFocus));
   });
   return {
-    onFocusCapture: () => isFocusInsideDOMTree.value = true,
-    onBlurCapture: () => isFocusInsideDOMTree.value = false
+    onFocusCapture: () => {
+      if (!vue.toValue(enabled))
+        return;
+      isFocusInsideDOMTree.value = true;
+    },
+    onBlurCapture: () => {
+      if (!vue.toValue(enabled))
+        return;
+      isFocusInsideDOMTree.value = false;
+    }
   };
 }
 

package/dist/DismissableLayer/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, toValue, watchEffect } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  )\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n\n  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement | undefined\n\n      if (!element?.value || !target)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => {\n      if (!toValue(enabled))\n        return\n      isPointerInsideDOMTree.value = true\n    },\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":["ref","watchEffect","isClient","toValue","handleAndDispatchCustomEvent","nextTick"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, toValue, watchEffect } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  )\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n\n  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement | undefined\n\n      if (!element?.value || !target)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => {\n      if (!toValue(enabled))\n        return\n      isPointerInsideDOMTree.value = true\n    },\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => {\n      if (!toValue(enabled))\n        return\n\n      isFocusInsideDOMTree.value = true\n    },\n    onBlurCapture: () => {\n      if (!toValue(enabled))\n        return\n\n      isFocusInsideDOMTree.value = false\n    },\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":["ref","watchEffect","isClient","toValue","handleAndDispatchCustomEvent","nextTick"],"mappings":"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"}

package/dist/DismissableLayer/utils.js

@@ -76,11 +76,11 @@ function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
     }
   };
 }
-function useFocusOutside(onFocusOutside, element) {
+function useFocusOutside(onFocusOutside, element, enabled = true) {
   const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
   const isFocusInsideDOMTree = ref(false);
   watchEffect((cleanupFn) => {
-    if (!isClient)
+    if (!isClient || !toValue(enabled))
       return;
     const handleFocus = async (event) => {
       if (!element?.value)
@@ -103,8 +103,16 @@ function useFocusOutside(onFocusOutside, element) {
     cleanupFn(() => ownerDocument.removeEventListener("focusin", handleFocus));
   });
   return {
-    onFocusCapture: () => isFocusInsideDOMTree.value = true,
-    onBlurCapture: () => isFocusInsideDOMTree.value = false
+    onFocusCapture: () => {
+      if (!toValue(enabled))
+        return;
+      isFocusInsideDOMTree.value = true;
+    },
+    onBlurCapture: () => {
+      if (!toValue(enabled))
+        return;
+      isFocusInsideDOMTree.value = false;
+    }
   };
 }
 

package/dist/DismissableLayer/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, toValue, watchEffect } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  )\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n\n  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement | undefined\n\n      if (!element?.value || !target)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => {\n      if (!toValue(enabled))\n        return\n      isPointerInsideDOMTree.value = true\n    },\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, toValue, watchEffect } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  )\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n\n  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement | undefined\n\n      if (!element?.value || !target)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => {\n      if (!toValue(enabled))\n        return\n      isPointerInsideDOMTree.value = true\n    },\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled))\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => {\n      if (!toValue(enabled))\n        return\n\n      isFocusInsideDOMTree.value = true\n    },\n    onBlurCapture: () => {\n      if (!toValue(enabled))\n        return\n\n      isFocusInsideDOMTree.value = false\n    },\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":[],"mappings":"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"}

package/dist/Editable/EditableRoot.cjs

@@ -2,11 +2,11 @@
 
 const vue = require('vue');
 const core = require('@vueuse/core');
-const DismissableLayer_utils = require('../DismissableLayer/utils.cjs');
 const shared_createContext = require('../shared/createContext.cjs');
 const shared_useDirection = require('../shared/useDirection.cjs');
 const Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
 const shared_useFormControl = require('../shared/useFormControl.cjs');
+const DismissableLayer_utils = require('../DismissableLayer/utils.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const VisuallyHidden_VisuallyHiddenInput = require('../VisuallyHidden/VisuallyHiddenInput.cjs');
 
@@ -95,7 +95,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     }
     const pointerDownOutside = DismissableLayer_utils.usePointerDownOutside(() => handleDismiss(), currentElement, isEditing);
-    const focusOutside = DismissableLayer_utils.useFocusOutside(() => handleDismiss(), currentElement);
+    const focusOutside = DismissableLayer_utils.useFocusOutside(() => handleDismiss(), currentElement, isEditing);
     const isEmpty = vue.computed(() => modelValue.value === "");
     __expose({
       /** Function to submit the value of the editable */

package/dist/Editable/EditableRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableRoot.cjs","sources":["../../src/Editable/EditableRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { useFocusOutside, usePointerDownOutside } from '@/DismissableLayer'\nimport { createContext, useDirection, useFormControl } from '@/shared'\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none'\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both'\n\ntype EditableRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  maxLength: Ref<number | undefined>\n  disabled: Ref<boolean>\n  modelValue: Ref<string | null | undefined>\n  inputValue: Ref<string | null | undefined>\n  placeholder: Ref<{ edit: string, preview: string }>\n  isEditing: Ref<boolean>\n  submitMode: Ref<SubmitMode>\n  activationMode: Ref<ActivationMode>\n  selectOnFocus: Ref<boolean>\n  edit: () => void\n  cancel: () => void\n  submit: () => void\n  inputRef: Ref<HTMLInputElement | undefined>\n  startWithEditMode: Ref<boolean>\n  isEmpty: Ref<boolean>\n  readonly: Ref<boolean>\n  autoResize: Ref<boolean>\n}\n\nexport interface EditableRootProps extends PrimitiveProps, FormFieldProps {\n  /** The default value of the editable field */\n  defaultValue?: string\n  /** The value of the editable field */\n  modelValue?: string | null\n  /** The placeholder for the editable field */\n  placeholder?: string | { edit: string, preview: string }\n  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the editable field is disabled */\n  disabled?: boolean\n  /** Whether the editable field is read-only */\n  readonly?: boolean\n  /** The activation event of the editable field */\n  activationMode?: ActivationMode\n  /** Whether to select the text in the input when it is focused. */\n  selectOnFocus?: boolean\n  /** The submit event of the editable field */\n  submitMode?: SubmitMode\n  /** Whether to start with the edit mode active */\n  startWithEditMode?: boolean\n  /** The maximum number of characters allowed */\n  maxLength?: number\n  /** Whether the editable field should auto resize */\n  autoResize?: boolean\n  /** The id of the field */\n  id?: string\n}\n\nexport type EditableRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [value: string]\n  /** Event handler called when a value is submitted */\n  'submit': [value: string | null | undefined]\n  /** Event handler called when the editable field changes state */\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}\n\nexport const [injectEditableRootContext, provideEditableRootContext]\n  = createContext<EditableRootContext>('EditableRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<EditableRootProps>(), {\n  as: 'div',\n  disabled: false,\n  submitMode: 'blur',\n  activationMode: 'focus',\n  selectOnFocus: false,\n  placeholder: 'Enter text...',\n  autoResize: false,\n  required: false,\n})\n\nconst emits = defineEmits<EditableRootEmits>()\ndefineSlots<{\n  default?: (props: {\n    /** Whether the editable field is in edit mode */\n    isEditing: boolean\n    /** The value of the editable field */\n    modelValue: typeof modelValue.value\n    /** Whether the editable field is empty */\n    isEmpty: boolean\n    /** Function to submit the value of the editable */\n    submit: () => void\n    /** Function to cancel the value of the editable */\n    cancel: () => void\n    /** Function to set the editable in edit mode */\n    edit: () => void\n  }) => any\n}>()\n\nconst {\n  id,\n  name,\n  defaultValue,\n  startWithEditMode,\n  placeholder: propPlaceholder,\n  maxLength,\n  disabled,\n  dir: propDir,\n  submitMode,\n  activationMode,\n  selectOnFocus,\n  readonly,\n  autoResize,\n  required,\n} = toRefs(props)\n\nconst inputRef = ref<HTMLInputElement | undefined>()\nconst dir = useDirection(propDir)\nconst isEditing = ref(startWithEditMode.value ?? false)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value ?? '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst isFormControl = useFormControl(currentElement)\n\nconst placeholder = computed(() => {\n  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value\n})\n\nconst inputValue = ref(modelValue.value)\n\nwatch(() => modelValue.value, () => {\n  inputValue.value = modelValue.value\n}, { immediate: true, deep: true })\n\nfunction cancel() {\n  isEditing.value = false\n  emits('update:state', 'cancel')\n}\n\nfunction edit() {\n  isEditing.value = true\n  inputValue.value = modelValue.value\n\n  emits('update:state', 'edit')\n}\n\nfunction submit() {\n  modelValue.value = inputValue.value\n  isEditing.value = false\n\n  emits('update:state', 'submit')\n  emits('submit', modelValue.value)\n}\n\nfunction handleDismiss() {\n  if (isEditing.value) {\n    if (submitMode.value === 'blur' || submitMode.value === 'both')\n      submit()\n    else\n      cancel()\n  }\n}\n\nconst pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)\nconst focusOutside = useFocusOutside(() => handleDismiss(), currentElement)\nconst isEmpty = computed(() => modelValue.value === '')\n\ndefineExpose({\n  /** Function to submit the value of the editable */\n  submit,\n  /** Function to cancel the value of the editable */\n  cancel,\n  /** Function to set the editable in edit mode */\n  edit,\n})\n\nprovideEditableRootContext({\n  id,\n  name,\n  disabled,\n  isEditing,\n  maxLength,\n  modelValue,\n  inputValue,\n  placeholder,\n  edit,\n  cancel,\n  submit,\n  activationMode,\n  submitMode,\n  selectOnFocus,\n  inputRef,\n  startWithEditMode,\n  isEmpty,\n  readonly,\n  autoResize,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :dir=\"dir\"\n    data-dismissable-layer\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :is-editing=\"isEditing\"\n      :is-empty=\"isEmpty\"\n      :submit=\"submit\"\n      :cancel=\"cancel\"\n      :edit=\"edit\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"text\"\n      :value=\"modelValue\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","ref","useDirection","useVModel","usePrimitiveElement","useFormControl","computed","watch","usePointerDownOutside","useFocusOutside"],"mappings":"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"}
+{"version":3,"file":"EditableRoot.cjs","sources":["../../src/Editable/EditableRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { useFocusOutside, usePointerDownOutside } from '@/DismissableLayer'\nimport { createContext, useDirection, useFormControl } from '@/shared'\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none'\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both'\n\ntype EditableRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  maxLength: Ref<number | undefined>\n  disabled: Ref<boolean>\n  modelValue: Ref<string | null | undefined>\n  inputValue: Ref<string | null | undefined>\n  placeholder: Ref<{ edit: string, preview: string }>\n  isEditing: Ref<boolean>\n  submitMode: Ref<SubmitMode>\n  activationMode: Ref<ActivationMode>\n  selectOnFocus: Ref<boolean>\n  edit: () => void\n  cancel: () => void\n  submit: () => void\n  inputRef: Ref<HTMLInputElement | undefined>\n  startWithEditMode: Ref<boolean>\n  isEmpty: Ref<boolean>\n  readonly: Ref<boolean>\n  autoResize: Ref<boolean>\n}\n\nexport interface EditableRootProps extends PrimitiveProps, FormFieldProps {\n  /** The default value of the editable field */\n  defaultValue?: string\n  /** The value of the editable field */\n  modelValue?: string | null\n  /** The placeholder for the editable field */\n  placeholder?: string | { edit: string, preview: string }\n  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the editable field is disabled */\n  disabled?: boolean\n  /** Whether the editable field is read-only */\n  readonly?: boolean\n  /** The activation event of the editable field */\n  activationMode?: ActivationMode\n  /** Whether to select the text in the input when it is focused. */\n  selectOnFocus?: boolean\n  /** The submit event of the editable field */\n  submitMode?: SubmitMode\n  /** Whether to start with the edit mode active */\n  startWithEditMode?: boolean\n  /** The maximum number of characters allowed */\n  maxLength?: number\n  /** Whether the editable field should auto resize */\n  autoResize?: boolean\n  /** The id of the field */\n  id?: string\n}\n\nexport type EditableRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [value: string]\n  /** Event handler called when a value is submitted */\n  'submit': [value: string | null | undefined]\n  /** Event handler called when the editable field changes state */\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}\n\nexport const [injectEditableRootContext, provideEditableRootContext]\n  = createContext<EditableRootContext>('EditableRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<EditableRootProps>(), {\n  as: 'div',\n  disabled: false,\n  submitMode: 'blur',\n  activationMode: 'focus',\n  selectOnFocus: false,\n  placeholder: 'Enter text...',\n  autoResize: false,\n  required: false,\n})\n\nconst emits = defineEmits<EditableRootEmits>()\ndefineSlots<{\n  default?: (props: {\n    /** Whether the editable field is in edit mode */\n    isEditing: boolean\n    /** The value of the editable field */\n    modelValue: typeof modelValue.value\n    /** Whether the editable field is empty */\n    isEmpty: boolean\n    /** Function to submit the value of the editable */\n    submit: () => void\n    /** Function to cancel the value of the editable */\n    cancel: () => void\n    /** Function to set the editable in edit mode */\n    edit: () => void\n  }) => any\n}>()\n\nconst {\n  id,\n  name,\n  defaultValue,\n  startWithEditMode,\n  placeholder: propPlaceholder,\n  maxLength,\n  disabled,\n  dir: propDir,\n  submitMode,\n  activationMode,\n  selectOnFocus,\n  readonly,\n  autoResize,\n  required,\n} = toRefs(props)\n\nconst inputRef = ref<HTMLInputElement | undefined>()\nconst dir = useDirection(propDir)\nconst isEditing = ref(startWithEditMode.value ?? false)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value ?? '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst isFormControl = useFormControl(currentElement)\n\nconst placeholder = computed(() => {\n  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value\n})\n\nconst inputValue = ref(modelValue.value)\n\nwatch(() => modelValue.value, () => {\n  inputValue.value = modelValue.value\n}, { immediate: true, deep: true })\n\nfunction cancel() {\n  isEditing.value = false\n  emits('update:state', 'cancel')\n}\n\nfunction edit() {\n  isEditing.value = true\n  inputValue.value = modelValue.value\n\n  emits('update:state', 'edit')\n}\n\nfunction submit() {\n  modelValue.value = inputValue.value\n  isEditing.value = false\n\n  emits('update:state', 'submit')\n  emits('submit', modelValue.value)\n}\n\nfunction handleDismiss() {\n  if (isEditing.value) {\n    if (submitMode.value === 'blur' || submitMode.value === 'both')\n      submit()\n    else\n      cancel()\n  }\n}\n\nconst pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)\nconst focusOutside = useFocusOutside(() => handleDismiss(), currentElement, isEditing)\n\nconst isEmpty = computed(() => modelValue.value === '')\n\ndefineExpose({\n  /** Function to submit the value of the editable */\n  submit,\n  /** Function to cancel the value of the editable */\n  cancel,\n  /** Function to set the editable in edit mode */\n  edit,\n})\n\nprovideEditableRootContext({\n  id,\n  name,\n  disabled,\n  isEditing,\n  maxLength,\n  modelValue,\n  inputValue,\n  placeholder,\n  edit,\n  cancel,\n  submit,\n  activationMode,\n  submitMode,\n  selectOnFocus,\n  inputRef,\n  startWithEditMode,\n  isEmpty,\n  readonly,\n  autoResize,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :dir=\"dir\"\n    data-dismissable-layer\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :is-editing=\"isEditing\"\n      :is-empty=\"isEmpty\"\n      :submit=\"submit\"\n      :cancel=\"cancel\"\n      :edit=\"edit\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"text\"\n      :value=\"modelValue\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","ref","useDirection","useVModel","usePrimitiveElement","useFormControl","computed","watch","usePointerDownOutside","useFocusOutside"],"mappings":"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"}

package/dist/Editable/EditableRoot.js

@@ -1,10 +1,10 @@
 import { defineComponent, toRefs, ref, computed, watch, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { useVModel } from '@vueuse/core';
-import { u as usePointerDownOutside, a as useFocusOutside } from '../DismissableLayer/utils.js';
 import { c as createContext } from '../shared/createContext.js';
 import { u as useDirection } from '../shared/useDirection.js';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
 import { u as useFormControl } from '../shared/useFormControl.js';
+import { u as usePointerDownOutside, a as useFocusOutside } from '../DismissableLayer/utils.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { _ as _sfc_main$1 } from '../VisuallyHidden/VisuallyHiddenInput.js';
 
@@ -93,7 +93,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing);
-    const focusOutside = useFocusOutside(() => handleDismiss(), currentElement);
+    const focusOutside = useFocusOutside(() => handleDismiss(), currentElement, isEditing);
     const isEmpty = computed(() => modelValue.value === "");
     __expose({
       /** Function to submit the value of the editable */

package/dist/Editable/EditableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableRoot.js","sources":["../../src/Editable/EditableRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { useFocusOutside, usePointerDownOutside } from '@/DismissableLayer'\nimport { createContext, useDirection, useFormControl } from '@/shared'\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none'\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both'\n\ntype EditableRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  maxLength: Ref<number | undefined>\n  disabled: Ref<boolean>\n  modelValue: Ref<string | null | undefined>\n  inputValue: Ref<string | null | undefined>\n  placeholder: Ref<{ edit: string, preview: string }>\n  isEditing: Ref<boolean>\n  submitMode: Ref<SubmitMode>\n  activationMode: Ref<ActivationMode>\n  selectOnFocus: Ref<boolean>\n  edit: () => void\n  cancel: () => void\n  submit: () => void\n  inputRef: Ref<HTMLInputElement | undefined>\n  startWithEditMode: Ref<boolean>\n  isEmpty: Ref<boolean>\n  readonly: Ref<boolean>\n  autoResize: Ref<boolean>\n}\n\nexport interface EditableRootProps extends PrimitiveProps, FormFieldProps {\n  /** The default value of the editable field */\n  defaultValue?: string\n  /** The value of the editable field */\n  modelValue?: string | null\n  /** The placeholder for the editable field */\n  placeholder?: string | { edit: string, preview: string }\n  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the editable field is disabled */\n  disabled?: boolean\n  /** Whether the editable field is read-only */\n  readonly?: boolean\n  /** The activation event of the editable field */\n  activationMode?: ActivationMode\n  /** Whether to select the text in the input when it is focused. */\n  selectOnFocus?: boolean\n  /** The submit event of the editable field */\n  submitMode?: SubmitMode\n  /** Whether to start with the edit mode active */\n  startWithEditMode?: boolean\n  /** The maximum number of characters allowed */\n  maxLength?: number\n  /** Whether the editable field should auto resize */\n  autoResize?: boolean\n  /** The id of the field */\n  id?: string\n}\n\nexport type EditableRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [value: string]\n  /** Event handler called when a value is submitted */\n  'submit': [value: string | null | undefined]\n  /** Event handler called when the editable field changes state */\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}\n\nexport const [injectEditableRootContext, provideEditableRootContext]\n  = createContext<EditableRootContext>('EditableRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<EditableRootProps>(), {\n  as: 'div',\n  disabled: false,\n  submitMode: 'blur',\n  activationMode: 'focus',\n  selectOnFocus: false,\n  placeholder: 'Enter text...',\n  autoResize: false,\n  required: false,\n})\n\nconst emits = defineEmits<EditableRootEmits>()\ndefineSlots<{\n  default?: (props: {\n    /** Whether the editable field is in edit mode */\n    isEditing: boolean\n    /** The value of the editable field */\n    modelValue: typeof modelValue.value\n    /** Whether the editable field is empty */\n    isEmpty: boolean\n    /** Function to submit the value of the editable */\n    submit: () => void\n    /** Function to cancel the value of the editable */\n    cancel: () => void\n    /** Function to set the editable in edit mode */\n    edit: () => void\n  }) => any\n}>()\n\nconst {\n  id,\n  name,\n  defaultValue,\n  startWithEditMode,\n  placeholder: propPlaceholder,\n  maxLength,\n  disabled,\n  dir: propDir,\n  submitMode,\n  activationMode,\n  selectOnFocus,\n  readonly,\n  autoResize,\n  required,\n} = toRefs(props)\n\nconst inputRef = ref<HTMLInputElement | undefined>()\nconst dir = useDirection(propDir)\nconst isEditing = ref(startWithEditMode.value ?? false)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value ?? '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst isFormControl = useFormControl(currentElement)\n\nconst placeholder = computed(() => {\n  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value\n})\n\nconst inputValue = ref(modelValue.value)\n\nwatch(() => modelValue.value, () => {\n  inputValue.value = modelValue.value\n}, { immediate: true, deep: true })\n\nfunction cancel() {\n  isEditing.value = false\n  emits('update:state', 'cancel')\n}\n\nfunction edit() {\n  isEditing.value = true\n  inputValue.value = modelValue.value\n\n  emits('update:state', 'edit')\n}\n\nfunction submit() {\n  modelValue.value = inputValue.value\n  isEditing.value = false\n\n  emits('update:state', 'submit')\n  emits('submit', modelValue.value)\n}\n\nfunction handleDismiss() {\n  if (isEditing.value) {\n    if (submitMode.value === 'blur' || submitMode.value === 'both')\n      submit()\n    else\n      cancel()\n  }\n}\n\nconst pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)\nconst focusOutside = useFocusOutside(() => handleDismiss(), currentElement)\nconst isEmpty = computed(() => modelValue.value === '')\n\ndefineExpose({\n  /** Function to submit the value of the editable */\n  submit,\n  /** Function to cancel the value of the editable */\n  cancel,\n  /** Function to set the editable in edit mode */\n  edit,\n})\n\nprovideEditableRootContext({\n  id,\n  name,\n  disabled,\n  isEditing,\n  maxLength,\n  modelValue,\n  inputValue,\n  placeholder,\n  edit,\n  cancel,\n  submit,\n  activationMode,\n  submitMode,\n  selectOnFocus,\n  inputRef,\n  startWithEditMode,\n  isEmpty,\n  readonly,\n  autoResize,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :dir=\"dir\"\n    data-dismissable-layer\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :is-editing=\"isEditing\"\n      :is-empty=\"isEmpty\"\n      :submit=\"submit\"\n      :cancel=\"cancel\"\n      :edit=\"edit\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"text\"\n      :value=\"modelValue\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EditableRoot.js","sources":["../../src/Editable/EditableRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { useFocusOutside, usePointerDownOutside } from '@/DismissableLayer'\nimport { createContext, useDirection, useFormControl } from '@/shared'\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none'\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both'\n\ntype EditableRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  maxLength: Ref<number | undefined>\n  disabled: Ref<boolean>\n  modelValue: Ref<string | null | undefined>\n  inputValue: Ref<string | null | undefined>\n  placeholder: Ref<{ edit: string, preview: string }>\n  isEditing: Ref<boolean>\n  submitMode: Ref<SubmitMode>\n  activationMode: Ref<ActivationMode>\n  selectOnFocus: Ref<boolean>\n  edit: () => void\n  cancel: () => void\n  submit: () => void\n  inputRef: Ref<HTMLInputElement | undefined>\n  startWithEditMode: Ref<boolean>\n  isEmpty: Ref<boolean>\n  readonly: Ref<boolean>\n  autoResize: Ref<boolean>\n}\n\nexport interface EditableRootProps extends PrimitiveProps, FormFieldProps {\n  /** The default value of the editable field */\n  defaultValue?: string\n  /** The value of the editable field */\n  modelValue?: string | null\n  /** The placeholder for the editable field */\n  placeholder?: string | { edit: string, preview: string }\n  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the editable field is disabled */\n  disabled?: boolean\n  /** Whether the editable field is read-only */\n  readonly?: boolean\n  /** The activation event of the editable field */\n  activationMode?: ActivationMode\n  /** Whether to select the text in the input when it is focused. */\n  selectOnFocus?: boolean\n  /** The submit event of the editable field */\n  submitMode?: SubmitMode\n  /** Whether to start with the edit mode active */\n  startWithEditMode?: boolean\n  /** The maximum number of characters allowed */\n  maxLength?: number\n  /** Whether the editable field should auto resize */\n  autoResize?: boolean\n  /** The id of the field */\n  id?: string\n}\n\nexport type EditableRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [value: string]\n  /** Event handler called when a value is submitted */\n  'submit': [value: string | null | undefined]\n  /** Event handler called when the editable field changes state */\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}\n\nexport const [injectEditableRootContext, provideEditableRootContext]\n  = createContext<EditableRootContext>('EditableRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<EditableRootProps>(), {\n  as: 'div',\n  disabled: false,\n  submitMode: 'blur',\n  activationMode: 'focus',\n  selectOnFocus: false,\n  placeholder: 'Enter text...',\n  autoResize: false,\n  required: false,\n})\n\nconst emits = defineEmits<EditableRootEmits>()\ndefineSlots<{\n  default?: (props: {\n    /** Whether the editable field is in edit mode */\n    isEditing: boolean\n    /** The value of the editable field */\n    modelValue: typeof modelValue.value\n    /** Whether the editable field is empty */\n    isEmpty: boolean\n    /** Function to submit the value of the editable */\n    submit: () => void\n    /** Function to cancel the value of the editable */\n    cancel: () => void\n    /** Function to set the editable in edit mode */\n    edit: () => void\n  }) => any\n}>()\n\nconst {\n  id,\n  name,\n  defaultValue,\n  startWithEditMode,\n  placeholder: propPlaceholder,\n  maxLength,\n  disabled,\n  dir: propDir,\n  submitMode,\n  activationMode,\n  selectOnFocus,\n  readonly,\n  autoResize,\n  required,\n} = toRefs(props)\n\nconst inputRef = ref<HTMLInputElement | undefined>()\nconst dir = useDirection(propDir)\nconst isEditing = ref(startWithEditMode.value ?? false)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value ?? '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst isFormControl = useFormControl(currentElement)\n\nconst placeholder = computed(() => {\n  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value\n})\n\nconst inputValue = ref(modelValue.value)\n\nwatch(() => modelValue.value, () => {\n  inputValue.value = modelValue.value\n}, { immediate: true, deep: true })\n\nfunction cancel() {\n  isEditing.value = false\n  emits('update:state', 'cancel')\n}\n\nfunction edit() {\n  isEditing.value = true\n  inputValue.value = modelValue.value\n\n  emits('update:state', 'edit')\n}\n\nfunction submit() {\n  modelValue.value = inputValue.value\n  isEditing.value = false\n\n  emits('update:state', 'submit')\n  emits('submit', modelValue.value)\n}\n\nfunction handleDismiss() {\n  if (isEditing.value) {\n    if (submitMode.value === 'blur' || submitMode.value === 'both')\n      submit()\n    else\n      cancel()\n  }\n}\n\nconst pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing)\nconst focusOutside = useFocusOutside(() => handleDismiss(), currentElement, isEditing)\n\nconst isEmpty = computed(() => modelValue.value === '')\n\ndefineExpose({\n  /** Function to submit the value of the editable */\n  submit,\n  /** Function to cancel the value of the editable */\n  cancel,\n  /** Function to set the editable in edit mode */\n  edit,\n})\n\nprovideEditableRootContext({\n  id,\n  name,\n  disabled,\n  isEditing,\n  maxLength,\n  modelValue,\n  inputValue,\n  placeholder,\n  edit,\n  cancel,\n  submit,\n  activationMode,\n  submitMode,\n  selectOnFocus,\n  inputRef,\n  startWithEditMode,\n  isEmpty,\n  readonly,\n  autoResize,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :dir=\"dir\"\n    data-dismissable-layer\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :is-editing=\"isEditing\"\n      :is-empty=\"isEmpty\"\n      :submit=\"submit\"\n      :cancel=\"cancel\"\n      :edit=\"edit\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"text\"\n      :value=\"modelValue\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/HoverCard/HoverCardContentImpl.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Popper_PopperContent = require('../Popper/PopperContent.cjs');
 require('@floating-ui/vue');
 const HoverCard_utils = require('./utils.cjs');
@@ -10,6 +9,7 @@ const shared_useForwardProps = require('../shared/useForwardProps.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const HoverCard_HoverCardRoot = require('./HoverCardRoot.cjs');
 const shared_useGraceArea = require('../shared/useGraceArea.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "HoverCardContentImpl",

package/dist/HoverCard/HoverCardContentImpl.js

@@ -1,5 +1,4 @@
 import { defineComponent, ref, watchEffect, onMounted, onUnmounted, createBlock, openBlock, unref, withModifiers, withCtx, createVNode, mergeProps, renderSlot, nextTick } from 'vue';
-import { _ as _sfc_main$1 } from '../DismissableLayer/DismissableLayer.js';
 import { _ as _sfc_main$2 } from '../Popper/PopperContent.js';
 import '@floating-ui/vue';
 import { g as getTabbableNodes } from './utils.js';
@@ -8,6 +7,7 @@ import { u as useForwardProps } from '../shared/useForwardProps.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectHoverCardRootContext } from './HoverCardRoot.js';
 import { u as useGraceArea } from '../shared/useGraceArea.js';
+import { _ as _sfc_main$1 } from '../DismissableLayer/DismissableLayer.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HoverCardContentImpl",

package/dist/Menu/MenuContentImpl.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Popper_PopperContent = require('../Popper/PopperContent.cjs');
 const Menu_utils = require('./utils.cjs');
 const shared_useBodyScrollLock = require('../shared/useBodyScrollLock.cjs');
@@ -11,6 +10,7 @@ const shared_useFocusGuards = require('../shared/useFocusGuards.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useTypeahead = require('../shared/useTypeahead.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const RovingFocus_RovingFocusGroup = require('../RovingFocus/RovingFocusGroup.cjs');
 const shared_useArrowNavigation = require('../shared/useArrowNavigation.cjs');
 const shared_getActiveElement = require('../shared/getActiveElement.cjs');

package/dist/Menu/MenuContentImpl.js

@@ -1,5 +1,4 @@
 import { defineComponent, mergeDefaults, toRefs, ref, watch, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { _ as _sfc_main$4, P as PopperContentPropsDefaultValue } from '../Popper/PopperContent.js';
 import { g as getOpenState, b as isPointerInGraceArea, F as FIRST_LAST_KEYS, L as LAST_KEYS, f as focusFirst, c as isMouseEvent } from './utils.js';
 import { u as useBodyScrollLock } from '../shared/useBodyScrollLock.js';
@@ -9,6 +8,7 @@ import { u as useFocusGuards } from '../shared/useFocusGuards.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useTypeahead } from '../shared/useTypeahead.js';
 import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
+import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { _ as _sfc_main$3 } from '../RovingFocus/RovingFocusGroup.js';
 import { u as useArrowNavigation } from '../shared/useArrowNavigation.js';
 import { g as getActiveElement } from '../shared/getActiveElement.js';

package/dist/NavigationMenu/NavigationMenuContentImpl.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const NavigationMenu_utils = require('./utils.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const NavigationMenu_NavigationMenuItem = require('./NavigationMenuItem.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const shared_getActiveElement = require('../shared/getActiveElement.cjs');
 const shared_useArrowNavigation = require('../shared/useArrowNavigation.cjs');
 const NavigationMenu_NavigationMenuRoot = require('./NavigationMenuRoot.cjs');

package/dist/NavigationMenu/NavigationMenuContentImpl.js

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
-import { _ as _sfc_main$1 } from '../DismissableLayer/DismissableLayer.js';
 import { m as makeTriggerId, a as makeContentId, E as EVENT_ROOT_CONTENT_DISMISS, g as getOpenState, b as getTabbableCandidates, f as focusFirst } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectNavigationMenuItemContext } from './NavigationMenuItem.js';
+import { _ as _sfc_main$1 } from '../DismissableLayer/DismissableLayer.js';
 import { g as getActiveElement } from '../shared/getActiveElement.js';
 import { u as useArrowNavigation } from '../shared/useArrowNavigation.js';
 import { i as injectNavigationMenuContext } from './NavigationMenuRoot.js';

package/dist/PinInput/PinInputInput.cjs

@@ -22,7 +22,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const currentValue = vue.computed(() => context.currentModelValue.value[props.index]);
     const disabled = vue.computed(() => props.disabled || context.disabled.value);
     const isOtpMode = vue.computed(() => context.otp.value);
-    const isNumericMode = vue.computed(() => context.type.value === "number");
     const isPasswordMode = vue.computed(() => context.mask.value);
     const { primitiveElement, currentElement } = Primitive_usePrimitiveElement.usePrimitiveElement();
     function handleInput(event) {
@@ -31,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         handleMultipleCharacter(target.value);
         return;
       }
-      if (isNumericMode.value && !/^\d*$/.test(target.value)) {
+      if (context.isNumericMode.value && !/^\d*$/.test(target.value)) {
         target.value = target.value.replace(/\D/g, "");
         return;
       }
@@ -101,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       for (let i = initialIndex; i < lastIndex; i++) {
         const input = inputElements.value[i];
         const value = values[i - initialIndex];
-        if (isNumericMode.value && !/^\d*$/.test(value))
+        if (context.isNumericMode.value && !/^\d*$/.test(value))
           continue;
         tempModelValue[i] = value;
         input.focus();
@@ -119,7 +118,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     }
     function updateModelValueAt(index, value) {
       const tempModelValue = [...context.currentModelValue.value];
-      tempModelValue[index] = isNumericMode.value ? +value : value;
+      if (context.isNumericMode.value) {
+        const num = +value;
+        if (value === "" || isNaN(num)) {
+          delete tempModelValue[index];
+        } else {
+          tempModelValue[index] = num;
+        }
+      } else {
+        tempModelValue[index] = value;
+      }
       context.modelValue.value = removeTrailingEmptyStrings(tempModelValue);
     }
     vue.watch(currentValue, () => {
@@ -142,8 +150,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "as-child": _ctx.asChild,
         autocomplete: isOtpMode.value ? "one-time-code" : "false",
         type: isPasswordMode.value ? "password" : "text",
-        inputmode: isNumericMode.value ? "numeric" : "text",
-        pattern: isNumericMode.value ? "[0-9]*" : void 0,
+        inputmode: vue.unref(context).isNumericMode.value ? "numeric" : "text",
+        pattern: vue.unref(context).isNumericMode.value ? "[0-9]*" : void 0,
         placeholder: vue.unref(context).placeholder.value,
         value: currentValue.value,
         disabled: disabled.value,

package/dist/PinInput/PinInputInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInputInput.cjs","sources":["../../src/PinInput/PinInputInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PinInputValue } from './PinInputRoot.vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { getActiveElement, useArrowNavigation } from '@/shared'\nimport { injectPinInputRootContext } from './PinInputRoot.vue'\n\nexport interface PinInputInputProps extends PrimitiveProps {\n  /** Position of the value this input binds to. */\n  index: number\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputInputProps>(), {\n  as: 'input',\n})\n\nconst context = injectPinInputRootContext()\nconst inputElements = computed(() => Array.from(context.inputElements!.value))\nconst currentValue = computed(() => context.currentModelValue.value[props.index])\n\nconst disabled = computed(() => props.disabled || context.disabled.value)\nconst isOtpMode = computed(() => context.otp.value)\nconst isNumericMode = computed(() => context.type.value === 'number')\nconst isPasswordMode = computed(() => context.mask.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n\n  if ((event.data?.length ?? 0) > 1) {\n    handleMultipleCharacter(target.value)\n    return\n  }\n\n  if (isNumericMode.value && !/^\\d*$/.test(target.value)) {\n    target.value = target.value.replace(/\\D/g, '')\n    return\n  }\n\n  target.value = target.value.slice(-1)\n  updateModelValueAt(props.index, target.value)\n\n  const nextEl = inputElements.value[props.index + 1]\n  if (nextEl)\n    nextEl.focus()\n}\n\nfunction resetPlaceholder() {\n  const target = currentElement.value as HTMLInputElement\n  nextTick(() => {\n    if (target && !target.value)\n      target.placeholder = context.placeholder.value\n  })\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  useArrowNavigation(event, getActiveElement() as HTMLElement, undefined, {\n    itemsArray: inputElements.value,\n    focus: true,\n    loop: false,\n    arrowKeyOptions: 'horizontal',\n    dir: context.dir.value,\n  })\n}\n\nfunction handleBackspace(event: KeyboardEvent) {\n  event.preventDefault()\n  const target = event.target as HTMLInputElement\n  const value = target.value\n\n  if (value) {\n    updateModelValueAt(props.index, '')\n  }\n  else {\n    const prevEl = inputElements.value[props.index - 1]\n    if (prevEl) {\n      prevEl.focus()\n      updateModelValueAt(props.index - 1, '')\n    }\n  }\n}\n\nfunction handleDelete(event: KeyboardEvent) {\n  if (event.key === 'Delete') {\n    event.preventDefault()\n    updateModelValueAt(props.index, '')\n  }\n}\n\nfunction handleFocus(event: FocusEvent) {\n  const target = event.target as HTMLInputElement\n  target.setSelectionRange(1, 1)\n\n  if (!target.value)\n    target.placeholder = ''\n}\n\nfunction handleBlur(event: FocusEvent) {\n  resetPlaceholder()\n}\n\nfunction handlePaste(event: ClipboardEvent) {\n  event.preventDefault()\n  const clipboardData = event.clipboardData\n  if (!clipboardData)\n    return\n\n  const values = clipboardData.getData('text')\n  handleMultipleCharacter(values)\n}\n\nfunction handleMultipleCharacter(values: string) {\n  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>\n  const initialIndex = values.length >= inputElements.value.length ? 0 : props.index\n  const lastIndex = Math.min(initialIndex + values.length, inputElements.value.length)\n  for (let i = initialIndex; i < lastIndex; i++) {\n    const input = inputElements.value[i]\n    const value = values[i - initialIndex]\n    if (isNumericMode.value && !/^\\d*$/.test(value))\n      continue\n\n    tempModelValue[i] = value\n    input.focus()\n  }\n  context.modelValue.value = tempModelValue\n  inputElements.value[lastIndex]?.focus()\n}\n\nfunction removeTrailingEmptyStrings(input: PinInputValue<typeof context.type.value>) {\n  let i = input.length - 1\n\n  while (i >= 0 && input[i] === '') {\n    input.pop()\n    i--\n  }\n\n  return input\n}\n\nfunction updateModelValueAt(index: number, value: string) {\n  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>\n  tempModelValue[index] = isNumericMode.value ? +value : value\n  context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)\n}\n\nwatch(currentValue, () => {\n  if (!currentValue.value) {\n    resetPlaceholder()\n  }\n})\n\nonMounted(() => {\n  context.onInputElementChange(currentElement.value as HTMLInputElement)\n})\nonUnmounted(() => {\n  context.inputElements?.value.delete(currentElement.value as HTMLInputElement)\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    autocapitalize=\"none\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :autocomplete=\"isOtpMode ? 'one-time-code' : 'false'\"\n    :type=\"isPasswordMode ? 'password' : 'text'\"\n    :inputmode=\"isNumericMode ? 'numeric' : 'text'\"\n    :pattern=\"isNumericMode ? '[0-9]*' : undefined\"\n    :placeholder=\"context.placeholder.value\"\n    :value=\"currentValue\"\n    :disabled=\"disabled\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-complete=\"context.isCompleted.value ? '' : undefined\"\n    :aria-label=\"`pin input ${index + 1} of ${inputElements.length}`\"\n    @input=\"handleInput($event as InputEvent)\"\n    @keydown.left.right.up.down.home.end=\"handleKeydown\"\n    @keydown.backspace=\"handleBackspace\"\n    @keydown.delete=\"handleDelete\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @paste=\"handlePaste\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectPinInputRootContext","computed","usePrimitiveElement","nextTick","useArrowNavigation","getActiveElement","watch","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,UAAUA,+CAA0B,EAAA;AAC1C,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM,KAAA,CAAM,KAAK,OAAQ,CAAA,aAAA,CAAe,KAAK,CAAC,CAAA;AAC7E,IAAM,MAAA,YAAA,GAAeA,aAAS,MAAM,OAAA,CAAQ,kBAAkB,KAAM,CAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAEhF,IAAA,MAAM,WAAWA,YAAS,CAAA,MAAM,MAAM,QAAY,IAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AACxE,IAAA,MAAM,SAAY,GAAAA,YAAA,CAAS,MAAM,OAAA,CAAQ,IAAI,KAAK,CAAA;AAClD,IAAA,MAAM,gBAAgBA,YAAS,CAAA,MAAM,OAAQ,CAAA,IAAA,CAAK,UAAU,QAAQ,CAAA;AACpE,IAAA,MAAM,cAAiB,GAAAA,YAAA,CAAS,MAAM,OAAA,CAAQ,KAAK,KAAK,CAAA;AAExD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AAErB,MAAA,IAAA,CAAK,KAAM,CAAA,IAAA,EAAM,MAAU,IAAA,CAAA,IAAK,CAAG,EAAA;AACjC,QAAA,uBAAA,CAAwB,OAAO,KAAK,CAAA;AACpC,QAAA;AAAA;AAGF,MAAA,IAAI,cAAc,KAAS,IAAA,CAAC,QAAQ,IAAK,CAAA,MAAA,CAAO,KAAK,CAAG,EAAA;AACtD,QAAA,MAAA,CAAO,KAAQ,GAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,OAAO,EAAE,CAAA;AAC7C,QAAA;AAAA;AAGF,MAAA,MAAA,CAAO,KAAQ,GAAA,MAAA,CAAO,KAAM,CAAA,KAAA,CAAM,EAAE,CAAA;AACpC,MAAmB,kBAAA,CAAA,KAAA,CAAM,KAAO,EAAA,MAAA,CAAO,KAAK,CAAA;AAE5C,MAAA,MAAM,MAAS,GAAA,aAAA,CAAc,KAAM,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAClD,MAAI,IAAA,MAAA;AACF,QAAA,MAAA,CAAO,KAAM,EAAA;AAAA;AAGjB,IAAA,SAAS,gBAAmB,GAAA;AAC1B,MAAA,MAAM,SAAS,cAAe,CAAA,KAAA;AAC9B,MAAAC,YAAA,CAAS,MAAM;AACb,QAAI,IAAA,MAAA,IAAU,CAAC,MAAO,CAAA,KAAA;AACpB,UAAO,MAAA,CAAA,WAAA,GAAc,QAAQ,WAAY,CAAA,KAAA;AAAA,OAC5C,CAAA;AAAA;AAGH,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAmBC,4CAAA,CAAA,KAAA,EAAOC,wCAAiB,EAAA,EAAkB,MAAW,EAAA;AAAA,QACtE,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B,KAAO,EAAA,IAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,eAAiB,EAAA,YAAA;AAAA,QACjB,GAAA,EAAK,QAAQ,GAAI,CAAA;AAAA,OAClB,CAAA;AAAA;AAGH,IAAA,SAAS,gBAAgB,KAAsB,EAAA;AAC7C,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAA,MAAM,QAAQ,MAAO,CAAA,KAAA;AAErB,MAAA,IAAI,KAAO,EAAA;AACT,QAAmB,kBAAA,CAAA,KAAA,CAAM,OAAO,EAAE,CAAA;AAAA,OAE/B,MAAA;AACH,QAAA,MAAM,MAAS,GAAA,aAAA,CAAc,KAAM,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAClD,QAAA,IAAI,MAAQ,EAAA;AACV,UAAA,MAAA,CAAO,KAAM,EAAA;AACb,UAAmB,kBAAA,CAAA,KAAA,CAAM,KAAQ,GAAA,CAAA,EAAG,EAAE,CAAA;AAAA;AACxC;AACF;AAGF,IAAA,SAAS,aAAa,KAAsB,EAAA;AAC1C,MAAI,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AAC1B,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAmB,kBAAA,CAAA,KAAA,CAAM,OAAO,EAAE,CAAA;AAAA;AACpC;AAGF,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAO,MAAA,CAAA,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAE7B,MAAA,IAAI,CAAC,MAAO,CAAA,KAAA;AACV,QAAA,MAAA,CAAO,WAAc,GAAA,EAAA;AAAA;AAGzB,IAAA,SAAS,WAAW,KAAmB,EAAA;AACrC,MAAiB,gBAAA,EAAA;AAAA;AAGnB,IAAA,SAAS,YAAY,KAAuB,EAAA;AAC1C,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,MAAM,gBAAgB,KAAM,CAAA,aAAA;AAC5B,MAAA,IAAI,CAAC,aAAA;AACH,QAAA;AAEF,MAAM,MAAA,MAAA,GAAS,aAAc,CAAA,OAAA,CAAQ,MAAM,CAAA;AAC3C,MAAA,uBAAA,CAAwB,MAAM,CAAA;AAAA;AAGhC,IAAA,SAAS,wBAAwB,MAAgB,EAAA;AAC/C,MAAA,MAAM,cAAiB,GAAA,CAAC,GAAG,OAAA,CAAQ,kBAAkB,KAAK,CAAA;AAC1D,MAAA,MAAM,eAAe,MAAO,CAAA,MAAA,IAAU,cAAc,KAAM,CAAA,MAAA,GAAS,IAAI,KAAM,CAAA,KAAA;AAC7E,MAAM,MAAA,SAAA,GAAY,KAAK,GAAI,CAAA,YAAA,GAAe,OAAO,MAAQ,EAAA,aAAA,CAAc,MAAM,MAAM,CAAA;AACnF,MAAA,KAAA,IAAS,CAAI,GAAA,YAAA,EAAc,CAAI,GAAA,SAAA,EAAW,CAAK,EAAA,EAAA;AAC7C,QAAM,MAAA,KAAA,GAAQ,aAAc,CAAA,KAAA,CAAM,CAAC,CAAA;AACnC,QAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,CAAA,GAAI,YAAY,CAAA;AACrC,QAAA,IAAI,aAAc,CAAA,KAAA,IAAS,CAAC,OAAA,CAAQ,KAAK,KAAK,CAAA;AAC5C,UAAA;AAEF,QAAA,cAAA,CAAe,CAAC,CAAI,GAAA,KAAA;AACpB,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AAEd,MAAA,OAAA,CAAQ,WAAW,KAAQ,GAAA,cAAA;AAC3B,MAAc,aAAA,CAAA,KAAA,CAAM,SAAS,CAAA,EAAG,KAAM,EAAA;AAAA;AAGxC,IAAA,SAAS,2BAA2B,KAAiD,EAAA;AACnF,MAAI,IAAA,CAAA,GAAI,MAAM,MAAS,GAAA,CAAA;AAEvB,MAAA,OAAO,CAAK,IAAA,CAAA,IAAK,KAAM,CAAA,CAAC,MAAM,EAAI,EAAA;AAChC,QAAA,KAAA,CAAM,GAAI,EAAA;AACV,QAAA,CAAA,EAAA;AAAA;AAGF,MAAO,OAAA,KAAA;AAAA;AAGT,IAAS,SAAA,kBAAA,CAAmB,OAAe,KAAe,EAAA;AACxD,MAAA,MAAM,cAAiB,GAAA,CAAC,GAAG,OAAA,CAAQ,kBAAkB,KAAK,CAAA;AAC1D,MAAA,cAAA,CAAe,KAAK,CAAA,GAAI,aAAc,CAAA,KAAA,GAAQ,CAAC,KAAQ,GAAA,KAAA;AACvD,MAAQ,OAAA,CAAA,UAAA,CAAW,KAAQ,GAAA,0BAAA,CAA2B,cAAc,CAAA;AAAA;AAGtE,IAAAC,SAAA,CAAM,cAAc,MAAM;AACxB,MAAI,IAAA,CAAC,aAAa,KAAO,EAAA;AACvB,QAAiB,gBAAA,EAAA;AAAA;AACnB,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KACtE,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,OAAA,CAAQ,aAAe,EAAA,KAAA,CAAM,MAAO,CAAA,cAAA,CAAe,KAAyB,CAAA;AAAA,KAC7E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PinInputInput.cjs","sources":["../../src/PinInput/PinInputInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PinInputValue } from './PinInputRoot.vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { getActiveElement, useArrowNavigation } from '@/shared'\nimport { injectPinInputRootContext } from './PinInputRoot.vue'\n\nexport interface PinInputInputProps extends PrimitiveProps {\n  /** Position of the value this input binds to. */\n  index: number\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputInputProps>(), {\n  as: 'input',\n})\n\nconst context = injectPinInputRootContext()\nconst inputElements = computed(() => Array.from(context.inputElements!.value))\nconst currentValue = computed(() => context.currentModelValue.value[props.index])\n\nconst disabled = computed(() => props.disabled || context.disabled.value)\nconst isOtpMode = computed(() => context.otp.value)\nconst isPasswordMode = computed(() => context.mask.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n\n  if ((event.data?.length ?? 0) > 1) {\n    handleMultipleCharacter(target.value)\n    return\n  }\n\n  if (context.isNumericMode.value && !/^\\d*$/.test(target.value)) {\n    target.value = target.value.replace(/\\D/g, '')\n    return\n  }\n\n  target.value = target.value.slice(-1)\n  updateModelValueAt(props.index, target.value)\n\n  const nextEl = inputElements.value[props.index + 1]\n  if (nextEl)\n    nextEl.focus()\n}\n\nfunction resetPlaceholder() {\n  const target = currentElement.value as HTMLInputElement\n  nextTick(() => {\n    if (target && !target.value)\n      target.placeholder = context.placeholder.value\n  })\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  useArrowNavigation(event, getActiveElement() as HTMLElement, undefined, {\n    itemsArray: inputElements.value,\n    focus: true,\n    loop: false,\n    arrowKeyOptions: 'horizontal',\n    dir: context.dir.value,\n  })\n}\n\nfunction handleBackspace(event: KeyboardEvent) {\n  event.preventDefault()\n  const target = event.target as HTMLInputElement\n  const value = target.value\n\n  if (value) {\n    updateModelValueAt(props.index, '')\n  }\n  else {\n    const prevEl = inputElements.value[props.index - 1]\n    if (prevEl) {\n      prevEl.focus()\n      updateModelValueAt(props.index - 1, '')\n    }\n  }\n}\n\nfunction handleDelete(event: KeyboardEvent) {\n  if (event.key === 'Delete') {\n    event.preventDefault()\n    updateModelValueAt(props.index, '')\n  }\n}\n\nfunction handleFocus(event: FocusEvent) {\n  const target = event.target as HTMLInputElement\n  target.setSelectionRange(1, 1)\n\n  if (!target.value)\n    target.placeholder = ''\n}\n\nfunction handleBlur(event: FocusEvent) {\n  resetPlaceholder()\n}\n\nfunction handlePaste(event: ClipboardEvent) {\n  event.preventDefault()\n  const clipboardData = event.clipboardData\n  if (!clipboardData)\n    return\n\n  const values = clipboardData.getData('text')\n  handleMultipleCharacter(values)\n}\n\nfunction handleMultipleCharacter(values: string) {\n  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>\n  const initialIndex = values.length >= inputElements.value.length ? 0 : props.index\n  const lastIndex = Math.min(initialIndex + values.length, inputElements.value.length)\n  for (let i = initialIndex; i < lastIndex; i++) {\n    const input = inputElements.value[i]\n    const value = values[i - initialIndex]\n    if (context.isNumericMode.value && !/^\\d*$/.test(value))\n      continue\n\n    tempModelValue[i] = value\n    input.focus()\n  }\n  context.modelValue.value = tempModelValue\n  inputElements.value[lastIndex]?.focus()\n}\n\nfunction removeTrailingEmptyStrings(input: PinInputValue<typeof context.type.value>) {\n  let i = input.length - 1\n\n  while (i >= 0 && input[i] === '') {\n    input.pop()\n    i--\n  }\n\n  return input\n}\n\nfunction updateModelValueAt(index: number, value: string) {\n  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>\n\n  if (context.isNumericMode.value) {\n    const num = +value\n\n    if (value === '' || isNaN(num)) {\n      delete tempModelValue[index]\n    }\n    else {\n      tempModelValue[index] = num\n    }\n  }\n  else {\n    tempModelValue[index] = value\n  }\n\n  context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)\n}\n\nwatch(currentValue, () => {\n  if (!currentValue.value) {\n    resetPlaceholder()\n  }\n})\n\nonMounted(() => {\n  context.onInputElementChange(currentElement.value as HTMLInputElement)\n})\nonUnmounted(() => {\n  context.inputElements?.value.delete(currentElement.value as HTMLInputElement)\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    autocapitalize=\"none\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :autocomplete=\"isOtpMode ? 'one-time-code' : 'false'\"\n    :type=\"isPasswordMode ? 'password' : 'text'\"\n    :inputmode=\"context.isNumericMode.value ? 'numeric' : 'text'\"\n    :pattern=\"context.isNumericMode.value ? '[0-9]*' : undefined\"\n    :placeholder=\"context.placeholder.value\"\n    :value=\"currentValue\"\n    :disabled=\"disabled\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-complete=\"context.isCompleted.value ? '' : undefined\"\n    :aria-label=\"`pin input ${index + 1} of ${inputElements.length}`\"\n    @input=\"handleInput($event as InputEvent)\"\n    @keydown.left.right.up.down.home.end=\"handleKeydown\"\n    @keydown.backspace=\"handleBackspace\"\n    @keydown.delete=\"handleDelete\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @paste=\"handlePaste\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectPinInputRootContext","computed","usePrimitiveElement","nextTick","useArrowNavigation","getActiveElement","watch","onMounted","onUnmounted"],"mappings":"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"}