reka-ui 2.2.1 → 2.3.0

package/dist/DismissableLayer/DismissableLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/DismissableLayer/DismissableLayerBranch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableLayerBranch.cjs","sources":["../../src/DismissableLayer/DismissableLayerBranch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerBranchProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { onMounted, onUnmounted } from 'vue'\nimport { context } from './DismissableLayer.vue'\n\nconst props = defineProps<DismissableLayerBranchProps>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nonMounted(() => {\n  context.branches.add(currentElement.value)\n})\nonUnmounted(() => {\n  context.branches.delete(currentElement.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","onMounted","context","onUnmounted"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQC,yCAAA,CAAA,QAAA,CAAS,GAAI,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC1C,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAQD,yCAAA,CAAA,QAAA,CAAS,MAAO,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"DismissableLayerBranch.cjs","sources":["../../src/DismissableLayer/DismissableLayerBranch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerBranchProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { context } from './DismissableLayer.vue'\n\nconst props = defineProps<DismissableLayerBranchProps>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nonMounted(() => {\n  context.branches.add(currentElement.value)\n})\nonUnmounted(() => {\n  context.branches.delete(currentElement.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","onMounted","context","onUnmounted"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQC,yCAAA,CAAA,QAAA,CAAS,GAAI,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC1C,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAQD,yCAAA,CAAA,QAAA,CAAS,MAAO,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;"}

package/dist/DismissableLayer/DismissableLayerBranch.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableLayerBranch.js","sources":["../../src/DismissableLayer/DismissableLayerBranch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerBranchProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { onMounted, onUnmounted } from 'vue'\nimport { context } from './DismissableLayer.vue'\n\nconst props = defineProps<DismissableLayerBranchProps>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nonMounted(() => {\n  context.branches.add(currentElement.value)\n})\nonUnmounted(() => {\n  context.branches.delete(currentElement.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,GAAI,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC1C,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAQ,OAAA,CAAA,QAAA,CAAS,MAAO,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"DismissableLayerBranch.js","sources":["../../src/DismissableLayer/DismissableLayerBranch.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerBranchProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { context } from './DismissableLayer.vue'\n\nconst props = defineProps<DismissableLayerBranchProps>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nonMounted(() => {\n  context.branches.add(currentElement.value)\n})\nonUnmounted(() => {\n  context.branches.delete(currentElement.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,GAAI,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC1C,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAQ,OAAA,CAAA,QAAA,CAAS,MAAO,CAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;"}

package/dist/DismissableLayer/utils.cjs

@@ -22,13 +22,13 @@ function isLayerExist(layerElement, targetElement) {
     return false;
   }
 }
-function usePointerDownOutside(onPointerDownOutside, element) {
+function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
   const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
   const isPointerInsideDOMTree = vue.ref(false);
   const handleClickRef = vue.ref(() => {
   });
   vue.watchEffect((cleanupFn) => {
-    if (!shared.isClient)
+    if (!shared.isClient || !vue.toValue(enabled))
       return;
     const handlePointerDown = async (event) => {
       const target = event.target;
@@ -71,7 +71,11 @@ function usePointerDownOutside(onPointerDownOutside, element) {
     });
   });
   return {
-    onPointerDownCapture: () => isPointerInsideDOMTree.value = true
+    onPointerDownCapture: () => {
+      if (!vue.toValue(enabled))
+        return;
+      isPointerInsideDOMTree.value = true;
+    }
   };
 }
 function useFocusOutside(onFocusOutside, element) {

package/dist/DismissableLayer/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, watchEffect } from 'vue'\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) {\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)\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: () => (isPointerInsideDOMTree.value = true),\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","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) {\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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"}

package/dist/DismissableLayer/utils.js

@@ -1,5 +1,5 @@
 import { isClient } from '@vueuse/shared';
-import { ref, watchEffect, nextTick } from 'vue';
+import { ref, watchEffect, toValue, nextTick } from 'vue';
 import { h as handleAndDispatchCustomEvent } from '../shared/handleAndDispatchCustomEvent.js';
 
 const POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -20,13 +20,13 @@ function isLayerExist(layerElement, targetElement) {
     return false;
   }
 }
-function usePointerDownOutside(onPointerDownOutside, element) {
+function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
   const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
   const isPointerInsideDOMTree = ref(false);
   const handleClickRef = ref(() => {
   });
   watchEffect((cleanupFn) => {
-    if (!isClient)
+    if (!isClient || !toValue(enabled))
       return;
     const handlePointerDown = async (event) => {
       const target = event.target;
@@ -69,7 +69,11 @@ function usePointerDownOutside(onPointerDownOutside, element) {
     });
   });
   return {
-    onPointerDownCapture: () => isPointerInsideDOMTree.value = true
+    onPointerDownCapture: () => {
+      if (!toValue(enabled))
+        return;
+      isPointerInsideDOMTree.value = true;
+    }
   };
 }
 function useFocusOutside(onFocusOutside, element) {

package/dist/DismissableLayer/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { nextTick, ref, watchEffect } from 'vue'\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) {\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)\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: () => (isPointerInsideDOMTree.value = true),\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":";;;;AAYO,MAAM,oBAAuB,GAAA,qCAAA;AAC7B,MAAM,aAAgB,GAAA,+BAAA;AAE7B,SAAS,YAAA,CAAa,cAA2B,aAA4B,EAAA;AAC3E,EAAA,MAAM,cAAc,aAAc,CAAA,OAAA;AAAA,IAChC;AAAA,GACF;AAEA,EAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAQ,gBAAqB,KAAA,EAAA,GACxD,eACA,YAAa,CAAA,aAAA;AAAA,IACb;AAAA,GACF;AAEF,EAAA,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,IACrB,YAAA,CAAa,aAAc,CAAA,gBAAA,CAAiB,0BAA0B;AAAA,GACxE;AAEA,EAAI,IAAA,WAAA,KAAgB,SAAc,KAAA,WAAA,IAAe,QAAS,CAAA,OAAA,CAAQ,SAAS,CAAI,GAAA,QAAA,CAAS,OAAQ,CAAA,WAAW,CACzG,CAAA,EAAA;AACA,IAAO,OAAA,IAAA;AAAA,GAEJ,MAAA;AACH,IAAO,OAAA,KAAA;AAAA;AAEX;AAOgB,SAAA,qBAAA,CACd,sBACA,OACA,EAAA;AACA,EAAA,MAAM,aACF,GAAA,OAAA,EAAS,KAAO,EAAA,aAAA,IAAiB,UAAY,EAAA,QAAA;AAEjD,EAAM,MAAA,sBAAA,GAAyB,IAAI,KAAK,CAAA;AACxC,EAAM,MAAA,cAAA,GAAiB,IAAI,MAAM;AAAA,GAAE,CAAA;AAEnC,EAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,IAAA,IAAI,CAAC,QAAA;AACH,MAAA;AACF,IAAM,MAAA,iBAAA,GAAoB,OAAO,KAAwB,KAAA;AACvD,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AAErB,MAAI,IAAA,CAAC,OAAS,EAAA,KAAA,IAAS,CAAC,MAAA;AACtB,QAAA;AAEF,MAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,KAAO,EAAA,MAAM,CAAG,EAAA;AACvC,QAAA,sBAAA,CAAuB,KAAQ,GAAA,KAAA;AAC/B,QAAA;AAAA;AAGF,MAAA,IAAI,KAAM,CAAA,MAAA,IAAU,CAAC,sBAAA,CAAuB,KAAO,EAAA;AAGjD,QAAA,IAAS,2CAAT,WAAoD;AAClD,UAAA,4BAAA;AAAA,YACE,oBAAA;AAAA,YACA,oBAAA;AAAA,YACA;AAAA,WACF;AAAA,SACF;AARA,QAAM,MAAA,WAAA,GAAc,EAAE,aAAA,EAAe,KAAM,EAAA;AAsB3C,QAAI,IAAA,KAAA,CAAM,gBAAgB,OAAS,EAAA;AACjC,UAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAC/D,UAAA,cAAA,CAAe,KAAQ,GAAA,wCAAA;AACvB,UAAc,aAAA,CAAA,gBAAA,CAAiB,OAAS,EAAA,cAAA,CAAe,KAAO,EAAA;AAAA,YAC5D,IAAM,EAAA;AAAA,WACP,CAAA;AAAA,SAEE,MAAA;AACH,UAAyC,wCAAA,EAAA;AAAA;AAC3C,OAEG,MAAA;AAGH,QAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AAEjE,MAAA,sBAAA,CAAuB,KAAQ,GAAA,KAAA;AAAA,KACjC;AAcA,IAAM,MAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AACtC,MAAc,aAAA,CAAA,gBAAA,CAAiB,eAAe,iBAAiB,CAAA;AAAA,OAC9D,CAAC,CAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAA,CAAO,aAAa,OAAO,CAAA;AAC3B,MAAc,aAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAClE,MAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAChE,CAAA;AAAA,GACF,CAAA;AAED,EAAO,OAAA;AAAA,IACL,oBAAA,EAAsB,MAAO,sBAAA,CAAuB,KAAQ,GAAA;AAAA,GAC9D;AACF;AAMgB,SAAA,eAAA,CACd,gBACA,OACA,EAAA;AACA,EAAA,MAAM,aACF,GAAA,OAAA,EAAS,KAAO,EAAA,aAAA,IAAiB,UAAY,EAAA,QAAA;AAEjD,EAAM,MAAA,oBAAA,GAAuB,IAAI,KAAK,CAAA;AACtC,EAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,IAAA,IAAI,CAAC,QAAA;AACH,MAAA;AACF,IAAM,MAAA,WAAA,GAAc,OAAO,KAAsB,KAAA;AAC/C,MAAA,IAAI,CAAC,OAAS,EAAA,KAAA;AACZ,QAAA;AAEF,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,QAAQ,KAAS,IAAA,CAAC,UAAU,YAAa,CAAA,OAAA,CAAQ,OAAO,MAAM,CAAA;AACjE,QAAA;AAEF,MAAA,IAAI,KAAM,CAAA,MAAA,IAAU,CAAC,oBAAA,CAAqB,KAAO,EAAA;AAC/C,QAAM,MAAA,WAAA,GAAc,EAAE,aAAA,EAAe,KAAM,EAAA;AAC3C,QAAA,4BAAA;AAAA,UACE,aAAA;AAAA,UACA,cAAA;AAAA,UACA;AAAA,SACF;AAAA;AACF,KACF;AAEA,IAAc,aAAA,CAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,SAAA,CAAU,MAAM,aAAA,CAAc,mBAAoB,CAAA,SAAA,EAAW,WAAW,CAAC,CAAA;AAAA,GAC1E,CAAA;AAED,EAAO,OAAA;AAAA,IACL,cAAA,EAAgB,MAAO,oBAAA,CAAqB,KAAQ,GAAA,IAAA;AAAA,IACpD,aAAA,EAAe,MAAO,oBAAA,CAAqB,KAAQ,GAAA;AAAA,GACrD;AACF;;;;"}
+{"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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"}

package/dist/DropdownMenu/DropdownMenuContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.cjs","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectDropdownMenuRootContext","ref","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,2DAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuContent.cjs","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectDropdownMenuRootContext","ref","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,2DAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.js","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0B,IAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuContent.js","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0B,IAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuRoot.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const Menu_MenuRoot = require('../Menu/MenuRoot.cjs');
 const core = require('@vueuse/core');
+const Menu_MenuRoot = require('../Menu/MenuRoot.cjs');
 const shared_createContext = require('../shared/createContext.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useDirection = require('../shared/useDirection.cjs');

package/dist/DropdownMenu/DropdownMenuRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRoot.cjs","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuRoot } from '@/Menu'\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":["createContext","useForwardExpose","useVModel","ref","toRefs","useDirection"],"mappings":";;;;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvEA,mCAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiBC,OAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuRoot.cjs","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\nimport { MenuRoot } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":["createContext","useForwardExpose","useVModel","ref","toRefs","useDirection"],"mappings":";;;;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvEA,mCAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiBC,OAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuRoot.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRefs, createBlock, openBlock, unref, isRef, withCtx, renderSlot } from 'vue';
-import { _ as _sfc_main$1 } from '../Menu/MenuRoot.js';
 import { useVModel } from '@vueuse/core';
+import { _ as _sfc_main$1 } from '../Menu/MenuRoot.js';
 import { c as createContext } from '../shared/createContext.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useDirection } from '../shared/useDirection.js';

package/dist/DropdownMenu/DropdownMenuRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRoot.js","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuRoot } from '@/Menu'\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvE,cAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuRoot.js","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\nimport { MenuRoot } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvE,cAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuSub.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const Menu_MenuSub = require('../Menu/MenuSub.cjs');
 const core = require('@vueuse/core');
+const Menu_MenuSub = require('../Menu/MenuSub.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({

package/dist/DropdownMenu/DropdownMenuSub.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSub.cjs","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":["useVModel","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAAA,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuSub.cjs","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":["useVModel","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAAA,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuSub.js

@@ -1,6 +1,6 @@
 import { defineComponent, createBlock, openBlock, unref, isRef, withCtx, renderSlot } from 'vue';
-import { _ as _sfc_main$1 } from '../Menu/MenuSub.js';
 import { useVModel } from '@vueuse/core';
+import { _ as _sfc_main$1 } from '../Menu/MenuSub.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/DropdownMenu/DropdownMenuSub.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSub.js","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuSub.js","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuTrigger.cjs","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":["injectDropdownMenuRootContext","useForwardExpose","onMounted","useId"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,2DAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuTrigger.cjs","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":["injectDropdownMenuRootContext","useForwardExpose","onMounted","useId"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,2DAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditableInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableInput.cjs","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useKbd } from '@/shared'\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useKbd","injectEditableRootContext","computed","usePrimitiveElement","onMounted","watch","nextTick"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAMA,oBAAO,EAAA;AAEnB,IAAA,MAAM,UAAUC,+CAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAcA,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAaC,iDAAoB,EAAA;AAE3E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAMC,SAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditableInput.cjs","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { useKbd } from '@/shared'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useKbd","injectEditableRootContext","computed","usePrimitiveElement","onMounted","watch","nextTick"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAMA,oBAAO,EAAA;AAEnB,IAAA,MAAM,UAAUC,+CAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAcA,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAaC,iDAAoB,EAAA;AAE3E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAMC,SAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableInput.js","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useKbd } from '@/shared'\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAa,mBAAoB,EAAA;AAE3E,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAM,KAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditableInput.js","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { useKbd } from '@/shared'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAa,mBAAoB,EAAA;AAE3E,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAM,KAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditableRoot.cjs

@@ -94,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           cancel();
       }
     }
-    const pointerDownOutside = DismissableLayer_utils.usePointerDownOutside(() => handleDismiss(), currentElement);
+    const pointerDownOutside = DismissableLayer_utils.usePointerDownOutside(() => handleDismiss(), currentElement, isEditing);
     const focusOutside = DismissableLayer_utils.useFocusOutside(() => handleDismiss(), currentElement);
     const isEmpty = vue.computed(() => modelValue.value === "");
     __expose({

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 { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs, watch } from 'vue'\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)\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)\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

@@ -92,7 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           cancel();
       }
     }
-    const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement);
+    const pointerDownOutside = usePointerDownOutside(() => handleDismiss(), currentElement, isEditing);
     const focusOutside = useFocusOutside(() => handleDismiss(), currentElement);
     const isEmpty = computed(() => modelValue.value === "");
     __expose({