reka-ui 2.2.1 → 2.3.1

package/dist/NavigationMenu/NavigationMenuRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuRoot.js","sources":["../../src/NavigationMenu/NavigationMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nimport type { Ref } from 'vue'\nimport type { Direction, Orientation } from './utils'\nimport { useCollection } from '@/Collection'\nimport { createContext, useDirection, useForwardExpose, useId } from '@/shared'\n\nexport interface NavigationMenuRootProps extends PrimitiveProps {\n  /** The controlled value of the menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /**\n   * The reading direction of the combobox when applicable.\n   *\n   *  If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.\n   */\n  dir?: Direction\n  /** The orientation of the menu. */\n  orientation?: Orientation\n  /**\n   * The duration from when the pointer enters the trigger until the tooltip gets opened.\n   * @defaultValue 200\n   */\n  delayDuration?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @defaultValue 300\n   */\n  skipDelayDuration?: number\n\n  /**\n   * If `true`, menu cannot be open by click on trigger\n   * @defaultValue false\n   */\n  disableClickTrigger?: boolean\n  /**\n   * If `true`, menu cannot be open by hover on trigger\n   * @defaultValue false\n   */\n  disableHoverTrigger?: boolean\n  /**\n   * If `true`, menu will not close during pointer leave event\n   * @defaultValue false\n   */\n  disablePointerLeaveClose?: boolean\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\nexport type NavigationMenuRootEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuContext {\n  isRootMenu: boolean\n  modelValue: Ref<string>\n  previousValue: Ref<string>\n  baseId: string\n  dir: Ref<Direction>\n  orientation: Orientation\n  disableClickTrigger: Ref<boolean>\n  disableHoverTrigger: Ref<boolean>\n  unmountOnHide: Ref<boolean>\n  rootNavigationMenu: Ref<HTMLElement | undefined>\n  activeTrigger: Ref<HTMLElement | undefined>\n  indicatorTrack: Ref<HTMLElement | undefined>\n  onIndicatorTrackChange: (indicatorTrack: HTMLElement | undefined) => void\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | undefined) => void\n  onTriggerEnter: (itemValue: string) => void\n  onTriggerLeave: () => void\n  onContentEnter: (itemValue: string) => void\n  onContentLeave: () => void\n  onItemSelect: (itemValue: string) => void\n  onItemDismiss: () => void\n}\n\nexport const [injectNavigationMenuContext, provideNavigationMenuContext]\n  = createContext<NavigationMenuContext>(['NavigationMenuRoot', 'NavigationMenuSub'], 'NavigationMenuContext')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { refAutoReset, useDebounceFn, useVModel } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  toRefs,\n  watchEffect,\n} from 'vue'\n\nconst props = withDefaults(defineProps<NavigationMenuRootProps>(), {\n  modelValue: undefined,\n  delayDuration: 200,\n  skipDelayDuration: 300,\n  orientation: 'horizontal',\n  disableClickTrigger: false,\n  disableHoverTrigger: false,\n  unmountOnHide: true,\n  as: 'nav',\n})\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst { forwardRef, currentElement: rootNavigationMenu } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nconst { delayDuration, skipDelayDuration, dir: propDir, disableClickTrigger, disableHoverTrigger, unmountOnHide } = toRefs(props)\nconst dir = useDirection(propDir)\n\nconst isDelaySkipped = refAutoReset(false, skipDelayDuration)\nconst computedDelay = computed(() => {\n  const isOpen = modelValue.value !== ''\n  if (isOpen || isDelaySkipped.value)\n    return 150 // 150ms for user to switch trigger or move into content view\n  else return delayDuration.value\n})\n\nconst debouncedFn = useDebounceFn((val?: string) => {\n  // passing `undefined` meant to reset the debounce timer\n  if (typeof val === 'string') {\n    previousValue.value = modelValue.value\n    modelValue.value = val\n  }\n}, computedDelay)\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  isRootMenu: true,\n  modelValue,\n  previousValue,\n  baseId: useId(undefined, 'reka-navigation-menu'),\n  disableClickTrigger,\n  disableHoverTrigger,\n  dir,\n  unmountOnHide,\n  orientation: props.orientation,\n  rootNavigationMenu,\n  indicatorTrack,\n  activeTrigger,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n  onTriggerEnter: (val) => {\n    debouncedFn(val)\n  },\n  onTriggerLeave: () => {\n    isDelaySkipped.value = true\n    debouncedFn('')\n  },\n  onContentEnter: () => {\n    debouncedFn()\n  },\n  onContentLeave: () => {\n    if (!props.disablePointerLeaveClose)\n      debouncedFn('')\n  },\n  onItemSelect: (val) => {\n    // When selecting item we trigger update immediately\n    previousValue.value = modelValue.value\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    previousValue.value = modelValue.value\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      aria-label=\"Main\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-orientation=\"orientation\"\n      :dir=\"dir\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;AAwFa,MAAA,CAAC,6BAA6B,4BAA4B,CAAA,GACnE,cAAqC,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,EAAG,uBAAuB;;;;;;;;;;;;;;;;;;;AAe7G,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,IAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,kBAAA,KAAuB,gBAAiB,EAAA;AAE5E,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AACxC,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAA,aAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAM,MAAA,EAAE,aAAe,EAAA,iBAAA,EAAmB,GAAK,EAAA,OAAA,EAAS,qBAAqB,mBAAqB,EAAA,aAAA,EAAkB,GAAA,MAAA,CAAO,KAAK,CAAA;AAChI,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAM,MAAA,cAAA,GAAiB,YAAa,CAAA,KAAA,EAAO,iBAAiB,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAM,MAAA,MAAA,GAAS,WAAW,KAAU,KAAA,EAAA;AACpC,MAAA,IAAI,UAAU,cAAe,CAAA,KAAA;AAC3B,QAAO,OAAA,GAAA;AAAA,kBACG,aAAc,CAAA,KAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,aAAc,CAAA,CAAC,GAAiB,KAAA;AAElD,MAAI,IAAA,OAAO,QAAQ,QAAU,EAAA;AAC3B,QAAA,aAAA,CAAc,QAAQ,UAAW,CAAA,KAAA;AACjC,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA;AACrB,OACC,aAAa,CAAA;AAEhB,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MAC3B,UAAY,EAAA,IAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA,EAAQ,KAAM,CAAA,MAAA,EAAW,sBAAsB,CAAA;AAAA,MAC/C,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,GAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MACA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA,OACjB;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAA,cAAA,CAAe,KAAQ,GAAA,IAAA;AACvB,QAAA,WAAA,CAAY,EAAE,CAAA;AAAA,OAChB;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAY,WAAA,EAAA;AAAA,OACd;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAA,IAAI,CAAC,KAAM,CAAA,wBAAA;AACT,UAAA,WAAA,CAAY,EAAE,CAAA;AAAA,OAClB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AAErB,QAAA,aAAA,CAAc,QAAQ,UAAW,CAAA,KAAA;AACjC,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,aAAA,CAAc,QAAQ,UAAW,CAAA,KAAA;AACjC,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuRoot.js","sources":["../../src/NavigationMenu/NavigationMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\n\nimport type { Direction, Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { createContext, useDirection, useForwardExpose, useId } from '@/shared'\n\nexport interface NavigationMenuRootProps extends PrimitiveProps {\n  /** The controlled value of the menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /**\n   * The reading direction of the combobox when applicable.\n   *\n   *  If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.\n   */\n  dir?: Direction\n  /** The orientation of the menu. */\n  orientation?: Orientation\n  /**\n   * The duration from when the pointer enters the trigger until the tooltip gets opened.\n   * @defaultValue 200\n   */\n  delayDuration?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @defaultValue 300\n   */\n  skipDelayDuration?: number\n\n  /**\n   * If `true`, menu cannot be open by click on trigger\n   * @defaultValue false\n   */\n  disableClickTrigger?: boolean\n  /**\n   * If `true`, menu cannot be open by hover on trigger\n   * @defaultValue false\n   */\n  disableHoverTrigger?: boolean\n  /**\n   * If `true`, menu will not close during pointer leave event\n   * @defaultValue false\n   */\n  disablePointerLeaveClose?: boolean\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\nexport type NavigationMenuRootEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuContext {\n  isRootMenu: boolean\n  modelValue: Ref<string>\n  previousValue: Ref<string>\n  baseId: string\n  dir: Ref<Direction>\n  orientation: Orientation\n  disableClickTrigger: Ref<boolean>\n  disableHoverTrigger: Ref<boolean>\n  unmountOnHide: Ref<boolean>\n  rootNavigationMenu: Ref<HTMLElement | undefined>\n  activeTrigger: Ref<HTMLElement | undefined>\n  indicatorTrack: Ref<HTMLElement | undefined>\n  onIndicatorTrackChange: (indicatorTrack: HTMLElement | undefined) => void\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | undefined) => void\n  onTriggerEnter: (itemValue: string) => void\n  onTriggerLeave: () => void\n  onContentEnter: (itemValue: string) => void\n  onContentLeave: () => void\n  onItemSelect: (itemValue: string) => void\n  onItemDismiss: () => void\n}\n\nexport const [injectNavigationMenuContext, provideNavigationMenuContext]\n  = createContext<NavigationMenuContext>(['NavigationMenuRoot', 'NavigationMenuSub'], 'NavigationMenuContext')\n</script>\n\n<script setup lang=\"ts\">\nimport { refAutoReset, useDebounceFn, useVModel } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  toRefs,\n  watchEffect,\n} from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\n\nconst props = withDefaults(defineProps<NavigationMenuRootProps>(), {\n  modelValue: undefined,\n  delayDuration: 200,\n  skipDelayDuration: 300,\n  orientation: 'horizontal',\n  disableClickTrigger: false,\n  disableHoverTrigger: false,\n  unmountOnHide: true,\n  as: 'nav',\n})\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst { forwardRef, currentElement: rootNavigationMenu } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nconst { delayDuration, skipDelayDuration, dir: propDir, disableClickTrigger, disableHoverTrigger, unmountOnHide } = toRefs(props)\nconst dir = useDirection(propDir)\n\nconst isDelaySkipped = refAutoReset(false, skipDelayDuration)\nconst computedDelay = computed(() => {\n  const isOpen = modelValue.value !== ''\n  if (isOpen || isDelaySkipped.value)\n    return 150 // 150ms for user to switch trigger or move into content view\n  else return delayDuration.value\n})\n\nconst debouncedFn = useDebounceFn((val?: string) => {\n  // passing `undefined` meant to reset the debounce timer\n  if (typeof val === 'string') {\n    previousValue.value = modelValue.value\n    modelValue.value = val\n  }\n}, computedDelay)\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  isRootMenu: true,\n  modelValue,\n  previousValue,\n  baseId: useId(undefined, 'reka-navigation-menu'),\n  disableClickTrigger,\n  disableHoverTrigger,\n  dir,\n  unmountOnHide,\n  orientation: props.orientation,\n  rootNavigationMenu,\n  indicatorTrack,\n  activeTrigger,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n  onTriggerEnter: (val) => {\n    debouncedFn(val)\n  },\n  onTriggerLeave: () => {\n    isDelaySkipped.value = true\n    debouncedFn('')\n  },\n  onContentEnter: () => {\n    debouncedFn()\n  },\n  onContentLeave: () => {\n    if (!props.disablePointerLeaveClose)\n      debouncedFn('')\n  },\n  onItemSelect: (val) => {\n    // When selecting item we trigger update immediately\n    previousValue.value = modelValue.value\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    previousValue.value = modelValue.value\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      aria-label=\"Main\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-orientation=\"orientation\"\n      :dir=\"dir\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuSub.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuSub.cjs","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\nimport { ref, watchEffect } from 'vue'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["useVModel","ref","injectNavigationMenuContext","useForwardExpose","useCollection","watchEffect","provideNavigationMenuContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBC,QAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiBF,OAAiB,EAAA;AACxC,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAAG,mCAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6BC,8DAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuSub.cjs","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, watchEffect } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["useVModel","ref","injectNavigationMenuContext","useForwardExpose","useCollection","watchEffect","provideNavigationMenuContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBC,QAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiBF,OAAiB,EAAA;AACxC,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAAG,mCAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6BC,8DAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuSub.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuSub.js","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\nimport { ref, watchEffect } from 'vue'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,IAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AACxC,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAA,aAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuSub.js","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, watchEffect } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,IAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AACxC,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAA,aAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuTrigger.cjs","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { VNode } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuTriggerProps 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 {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { refAutoReset, unrefElement } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":["injectNavigationMenuContext","injectNavigationMenuItemContext","useCollection","useForwardExpose","ref","refAutoReset","computed","onMounted","makeTriggerId","makeContentId","unrefElement"],"mappings":"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"}
+{"version":3,"file":"NavigationMenuTrigger.cjs","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { VNode } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuTriggerProps 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 { refAutoReset, unrefElement } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":["injectNavigationMenuContext","injectNavigationMenuItemContext","useCollection","useForwardExpose","ref","refAutoReset","computed","onMounted","makeTriggerId","makeContentId","unrefElement"],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuTrigger.js","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { VNode } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuTriggerProps 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 {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { refAutoReset, unrefElement } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavigationMenuTrigger.js","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { VNode } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuTriggerProps 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 { refAutoReset, unrefElement } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/NumberField/NumberFieldInput.cjs

@@ -25,9 +25,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return;
       event.preventDefault();
       if (event.deltaY > 0)
-        rootContext.handleIncrease();
+        rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease();
       else if (event.deltaY < 0)
-        rootContext.handleDecrease();
+        rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease();
     }
     vue.onMounted(() => {
       rootContext.onInputElement(currentElement.value);

package/dist/NumberField/NumberFieldInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldInput.cjs","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { getActiveElement } from '@/shared'\nimport { onMounted, ref, watch } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["usePrimitiveElement","injectNumberFieldRootContext","getActiveElement","onMounted","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIA,iDAAoB,EAAA;AACjE,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAWC,wCAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA,WAAA,IACpB,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA;AAG/B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAAC,OAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAAC,SAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldInput.cjs","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { onMounted, ref, watch } from 'vue'\nimport { getActiveElement } from '@/shared'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["usePrimitiveElement","injectNumberFieldRootContext","getActiveElement","onMounted","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIA,iDAAoB,EAAA;AACjE,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAWC,wCAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,kBAAkB,KAAQ,GAAA,WAAA,CAAY,cAAe,EAAA,GAAI,YAAY,cAAe,EAAA;AAAA,WAAA,IACzF,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,kBAAkB,KAAQ,GAAA,WAAA,CAAY,cAAe,EAAA,GAAI,YAAY,cAAe,EAAA;AAAA;AAGpG,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAAC,OAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAAC,SAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldInput.js

@@ -23,9 +23,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       event.preventDefault();
       if (event.deltaY > 0)
-        rootContext.handleIncrease();
+        rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease();
       else if (event.deltaY < 0)
-        rootContext.handleDecrease();
+        rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease();
     }
     onMounted(() => {
       rootContext.onInputElement(currentElement.value);

package/dist/NumberField/NumberFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldInput.js","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { getActiveElement } from '@/shared'\nimport { onMounted, ref, watch } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAA,MAAM,cAAc,4BAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,gBAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA,WAAA,IACpB,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA;AAG/B,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAA,GAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAA,KAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldInput.js","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { onMounted, ref, watch } from 'vue'\nimport { getActiveElement } from '@/shared'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAA,MAAM,cAAc,4BAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,gBAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,kBAAkB,KAAQ,GAAA,WAAA,CAAY,cAAe,EAAA,GAAI,YAAY,cAAe,EAAA;AAAA,WAAA,IACzF,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,kBAAkB,KAAQ,GAAA,WAAA,CAAY,cAAe,EAAA,GAAI,YAAY,cAAe,EAAA;AAAA;AAGpG,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAA,GAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAA,KAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldRoot.cjs

@@ -10,6 +10,7 @@ const shared_useFormControl = require('../shared/useFormControl.cjs');
 const shared_clamp = require('../shared/clamp.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const VisuallyHidden_VisuallyHiddenInput = require('../VisuallyHidden/VisuallyHiddenInput.cjs');
+const shared_nullish = require('../shared/nullish.cjs');
 
 const [injectNumberFieldRootContext, provideNumberFieldRootContext] = shared_createContext.createContext("NumberFieldRoot");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -28,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     locale: {},
     disabled: { type: Boolean },
     disableWheelChange: { type: Boolean },
+    invertWheelChange: { type: Boolean },
     id: {},
     asChild: { type: Boolean },
     as: { default: "div" },
@@ -38,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { disabled, disableWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = vue.toRefs(props);
+    const { disabled, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = vue.toRefs(props);
     const modelValue = core.useVModel(props, "modelValue", emits, {
       defaultValue: props.defaultValue,
       passive: props.modelValue === void 0
@@ -48,10 +50,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const isFormControl = shared_useFormControl.useFormControl(currentElement);
     const inputEl = vue.ref();
     const isDecreaseDisabled = vue.computed(
-      () => clampInputValue(modelValue.value) === min.value || (min.value && !isNaN(modelValue.value) ? NumberField_utils.handleDecimalOperation("-", modelValue.value, step.value) < min.value : false)
+      () => !shared_nullish.isNullish(modelValue.value) && (clampInputValue(modelValue.value) === min.value || min.value && !isNaN(modelValue.value) ? NumberField_utils.handleDecimalOperation("-", modelValue.value, step.value) < min.value : false)
     );
     const isIncreaseDisabled = vue.computed(
-      () => clampInputValue(modelValue.value) === max.value || (max.value && !isNaN(modelValue.value) ? NumberField_utils.handleDecimalOperation("+", modelValue.value, step.value) > max.value : false)
+      () => !shared_nullish.isNullish(modelValue.value) && (clampInputValue(modelValue.value) === max.value || max.value && !isNaN(modelValue.value) ? NumberField_utils.handleDecimalOperation("+", modelValue.value, step.value) > max.value : false)
     );
     function handleChangingValue(type, multiplier = 1) {
       inputEl.value?.focus();
@@ -86,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return hasDecimals ? "decimal" : "numeric";
     });
     const textValueFormatter = NumberField_utils.useNumberFormatter(locale, formatOptions);
-    const textValue = vue.computed(() => isNaN(modelValue.value) ? "" : textValueFormatter.format(modelValue.value));
+    const textValue = vue.computed(() => shared_nullish.isNullish(modelValue.value) || isNaN(modelValue.value) ? "" : textValueFormatter.format(modelValue.value));
     function validate(val) {
       return numberParser.isValidPartialNumber(val, min.value, max.value);
     }
@@ -105,7 +107,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     }
     function applyInputValue(val) {
       const parsedValue = numberParser.parse(val);
-      modelValue.value = clampInputValue(parsedValue);
+      modelValue.value = isNaN(parsedValue) ? void 0 : clampInputValue(parsedValue);
       if (!val.length)
         return setInputValue(val);
       if (isNaN(parsedValue))
@@ -125,6 +127,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       applyInputValue,
       disabled,
       disableWheelChange,
+      invertWheelChange,
       max,
       min,
       isDecreaseDisabled,

package/dist/NumberField/NumberFieldRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldRoot.cjs","sources":["../../src/NumberField/NumberFieldRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { FormFieldProps } from '@/shared/types'\nimport type { HTMLAttributes, Ref } from 'vue'\nimport { clamp, createContext, snapValueToStep, useFormControl, useLocale } from '@/shared'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs } from 'vue'\n\nexport interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {\n  defaultValue?: number\n  modelValue?: number | null\n  /** The smallest value allowed for the input. */\n  min?: number\n  /** The largest value allowed for the input. */\n  max?: number\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number\n  /** When `false`, prevents the value from snapping to the nearest increment of the step value */\n  stepSnapping?: boolean\n  /** Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale to use for formatting dates */\n  locale?: string\n  /** When `true`, prevents the user from interacting with the Number Field. */\n  disabled?: boolean\n  /** When `true`, prevents the value from changing on wheel scroll. */\n  disableWheelChange?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport type NumberFieldRootEmits = {\n  'update:modelValue': [val: number]\n}\n\ninterface NumberFieldRootContext {\n  modelValue: Ref<number>\n  handleIncrease: (multiplier?: number) => void\n  handleDecrease: (multiplier?: number) => void\n  handleMinMaxValue: (type: 'min' | 'max') => void\n  inputEl: Ref<HTMLInputElement | undefined>\n  onInputElement: (el: HTMLInputElement) => void\n  inputMode: Ref<HTMLAttributes['inputmode']>\n  textValue: Ref<string>\n  validate: (val: string) => boolean\n  applyInputValue: (val: string) => void\n  disabled: Ref<boolean>\n  disableWheelChange: Ref<boolean>\n  max: Ref<number | undefined>\n  min: Ref<number | undefined>\n  isDecreaseDisabled: Ref<boolean>\n  isIncreaseDisabled: Ref<boolean>\n  id: Ref<string | undefined>\n}\n\nexport const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext<NumberFieldRootContext>('NumberFieldRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleDecimalOperation, useNumberFormatter, useNumberParser } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NumberFieldRootProps>(), {\n  as: 'div',\n  defaultValue: undefined,\n  step: 1,\n  stepSnapping: true,\n})\nconst emits = defineEmits<NumberFieldRootEmits>()\nconst { disabled, disableWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number>\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst locale = useLocale(propLocale)\nconst isFormControl = useFormControl(currentElement)\nconst inputEl = ref<HTMLInputElement>()\n\nconst isDecreaseDisabled = computed(() => (\n  clampInputValue(modelValue.value) === min.value\n  || (min.value && !isNaN(modelValue.value) ? (handleDecimalOperation('-', modelValue.value, step.value) < min.value) : false)),\n)\nconst isIncreaseDisabled = computed(() => (\n  clampInputValue(modelValue.value) === max.value\n  || (max.value && !isNaN(modelValue.value) ? (handleDecimalOperation('+', modelValue.value, step.value) > max.value) : false)),\n)\n\nfunction handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {\n  inputEl.value?.focus()\n  const currentInputValue = numberParser.parse(inputEl.value?.value ?? '')\n  if (props.disabled)\n    return\n  if (isNaN(currentInputValue)) {\n    modelValue.value = min.value ?? 0\n  }\n  else {\n    if (type === 'increase')\n      modelValue.value = clampInputValue(currentInputValue + ((step.value ?? 1) * multiplier))\n    else\n      modelValue.value = clampInputValue(currentInputValue - ((step.value ?? 1) * multiplier))\n  }\n}\n\nfunction handleIncrease(multiplier = 1) {\n  handleChangingValue('increase', multiplier)\n}\nfunction handleDecrease(multiplier = 1) {\n  handleChangingValue('decrease', multiplier)\n}\n\nfunction handleMinMaxValue(type: 'min' | 'max') {\n  if (type === 'min' && min.value !== undefined)\n    modelValue.value = clampInputValue(min.value)\n  else if (type === 'max' && max.value !== undefined)\n    modelValue.value = clampInputValue(max.value)\n}\n\n// Formatter\nconst numberFormatter = useNumberFormatter(locale, formatOptions)\nconst numberParser = useNumberParser(locale, formatOptions)\n\nconst inputMode = computed<HTMLAttributes['inputmode']>(() => {\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  const hasDecimals = numberFormatter.resolvedOptions().maximumFractionDigits! > 0\n\n  return hasDecimals ? 'decimal' : 'numeric'\n})\n// Replace negative textValue formatted using currencySign: 'accounting'\n// with a textValue that can be announced using a minus sign.\nconst textValueFormatter = useNumberFormatter(locale, formatOptions)\nconst textValue = computed(() => isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))\n\nfunction validate(val: string) {\n  return numberParser.isValidPartialNumber(val, min.value, max.value)\n}\n\nfunction setInputValue(val: string) {\n  if (inputEl.value)\n    inputEl.value.value = val\n}\n\nfunction clampInputValue(val: number) {\n  // Clamp to min and max, round to the nearest step, and round to specified number of digits\n  let clampedValue: number\n  if (step.value === undefined || isNaN(step.value) || !stepSnapping.value)\n    clampedValue = clamp(val, min.value, max.value)\n  else\n    clampedValue = snapValueToStep(val, min.value, max.value, step.value)\n\n  clampedValue = numberParser.parse(numberFormatter.format(clampedValue))\n  return clampedValue\n}\n\nfunction applyInputValue(val: string) {\n  const parsedValue = numberParser.parse(val)\n\n  modelValue.value = clampInputValue(parsedValue)\n  // Set to empty state if input value is empty\n  if (!val.length)\n    return setInputValue(val)\n\n  // if it failed to parse, then reset input to formatted version of current number\n  if (isNaN(parsedValue))\n    return setInputValue(textValue.value)\n\n  return setInputValue(textValue.value)\n}\n\nprovideNumberFieldRootContext({\n  modelValue,\n  handleDecrease,\n  handleIncrease,\n  handleMinMaxValue,\n  inputMode,\n  inputEl,\n  onInputElement: el => inputEl.value = el,\n  textValue,\n  validate,\n  applyInputValue,\n  disabled,\n  disableWheelChange,\n  max,\n  min,\n  isDecreaseDisabled,\n  isIncreaseDisabled,\n  id,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    role=\"group\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :text-value=\"textValue\"\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","useVModel","usePrimitiveElement","useLocale","useFormControl","ref","computed","handleDecimalOperation","useNumberFormatter","useNumberParser","clamp","snapValueToStep"],"mappings":"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"}
+{"version":3,"file":"NumberFieldRoot.cjs","sources":["../../src/NumberField/NumberFieldRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { HTMLAttributes, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { FormFieldProps } from '@/shared/types'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs } from 'vue'\nimport { clamp, createContext, isNullish, snapValueToStep, useFormControl, useLocale } from '@/shared'\n\nexport interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {\n  defaultValue?: number\n  modelValue?: number | null\n  /** The smallest value allowed for the input. */\n  min?: number\n  /** The largest value allowed for the input. */\n  max?: number\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number\n  /** When `false`, prevents the value from snapping to the nearest increment of the step value */\n  stepSnapping?: boolean\n  /** Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale to use for formatting dates */\n  locale?: string\n  /** When `true`, prevents the user from interacting with the Number Field. */\n  disabled?: boolean\n  /** When `true`, prevents the value from changing on wheel scroll. */\n  disableWheelChange?: boolean\n  /** When `true`, inverts the direction of the wheel change. */\n  invertWheelChange?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport type NumberFieldRootEmits = {\n  'update:modelValue': [val: number]\n}\n\ninterface NumberFieldRootContext {\n  modelValue: Ref<number | undefined>\n  handleIncrease: (multiplier?: number) => void\n  handleDecrease: (multiplier?: number) => void\n  handleMinMaxValue: (type: 'min' | 'max') => void\n  inputEl: Ref<HTMLInputElement | undefined>\n  onInputElement: (el: HTMLInputElement) => void\n  inputMode: Ref<HTMLAttributes['inputmode']>\n  textValue: Ref<string>\n  validate: (val: string) => boolean\n  applyInputValue: (val: string) => void\n  disabled: Ref<boolean>\n  disableWheelChange: Ref<boolean>\n  invertWheelChange: Ref<boolean>\n  max: Ref<number | undefined>\n  min: Ref<number | undefined>\n  isDecreaseDisabled: Ref<boolean>\n  isIncreaseDisabled: Ref<boolean>\n  id: Ref<string | undefined>\n}\n\nexport const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext<NumberFieldRootContext>('NumberFieldRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleDecimalOperation, useNumberFormatter, useNumberParser } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NumberFieldRootProps>(), {\n  as: 'div',\n  defaultValue: undefined,\n  step: 1,\n  stepSnapping: true,\n})\nconst emits = defineEmits<NumberFieldRootEmits>()\nconst { disabled, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number | undefined>\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst locale = useLocale(propLocale)\nconst isFormControl = useFormControl(currentElement)\nconst inputEl = ref<HTMLInputElement>()\n\nconst isDecreaseDisabled = computed(() => (\n  !isNullish(modelValue.value) && (\n    clampInputValue(modelValue.value) === min.value\n    || (min.value && !isNaN(modelValue.value)\n    )\n      ? (handleDecimalOperation('-', modelValue.value, step.value) < min.value)\n      : false)),\n)\nconst isIncreaseDisabled = computed(() => (\n  !isNullish(modelValue.value) && (\n    clampInputValue(modelValue.value) === max.value\n    || (max.value && !isNaN(modelValue.value)\n    )\n      ? (handleDecimalOperation('+', modelValue.value, step.value) > max.value)\n      : false)),\n)\n\nfunction handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {\n  inputEl.value?.focus()\n  const currentInputValue = numberParser.parse(inputEl.value?.value ?? '')\n  if (props.disabled)\n    return\n  if (isNaN(currentInputValue)) {\n    modelValue.value = min.value ?? 0\n  }\n  else {\n    if (type === 'increase')\n      modelValue.value = clampInputValue(currentInputValue + ((step.value ?? 1) * multiplier))\n    else\n      modelValue.value = clampInputValue(currentInputValue - ((step.value ?? 1) * multiplier))\n  }\n}\n\nfunction handleIncrease(multiplier = 1) {\n  handleChangingValue('increase', multiplier)\n}\nfunction handleDecrease(multiplier = 1) {\n  handleChangingValue('decrease', multiplier)\n}\n\nfunction handleMinMaxValue(type: 'min' | 'max') {\n  if (type === 'min' && min.value !== undefined)\n    modelValue.value = clampInputValue(min.value)\n  else if (type === 'max' && max.value !== undefined)\n    modelValue.value = clampInputValue(max.value)\n}\n\n// Formatter\nconst numberFormatter = useNumberFormatter(locale, formatOptions)\nconst numberParser = useNumberParser(locale, formatOptions)\n\nconst inputMode = computed<HTMLAttributes['inputmode']>(() => {\n  // The inputMode attribute influences the software keyboard that is shown on touch devices.\n  // Browsers and operating systems are quite inconsistent about what keys are available, however.\n  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n  // and based on testing on various devices to determine what keys are available in each inputMode.\n  const hasDecimals = numberFormatter.resolvedOptions().maximumFractionDigits! > 0\n\n  return hasDecimals ? 'decimal' : 'numeric'\n})\n// Replace negative textValue formatted using currencySign: 'accounting'\n// with a textValue that can be announced using a minus sign.\nconst textValueFormatter = useNumberFormatter(locale, formatOptions)\nconst textValue = computed(() => isNullish(modelValue.value) || isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))\n\nfunction validate(val: string) {\n  return numberParser.isValidPartialNumber(val, min.value, max.value)\n}\n\nfunction setInputValue(val: string) {\n  if (inputEl.value)\n    inputEl.value.value = val\n}\n\nfunction clampInputValue(val: number) {\n  // Clamp to min and max, round to the nearest step, and round to specified number of digits\n  let clampedValue: number\n  if (step.value === undefined || isNaN(step.value) || !stepSnapping.value)\n    clampedValue = clamp(val, min.value, max.value)\n  else\n    clampedValue = snapValueToStep(val, min.value, max.value, step.value)\n\n  clampedValue = numberParser.parse(numberFormatter.format(clampedValue))\n  return clampedValue\n}\n\nfunction applyInputValue(val: string) {\n  const parsedValue = numberParser.parse(val)\n  modelValue.value = isNaN(parsedValue) ? undefined : clampInputValue(parsedValue)\n  // Set to empty state if input value is empty\n  if (!val.length)\n    return setInputValue(val)\n\n  // if it failed to parse, then reset input to formatted version of current number\n  if (isNaN(parsedValue))\n    return setInputValue(textValue.value)\n\n  return setInputValue(textValue.value)\n}\n\nprovideNumberFieldRootContext({\n  modelValue,\n  handleDecrease,\n  handleIncrease,\n  handleMinMaxValue,\n  inputMode,\n  inputEl,\n  onInputElement: el => inputEl.value = el,\n  textValue,\n  validate,\n  applyInputValue,\n  disabled,\n  disableWheelChange,\n  invertWheelChange,\n  max,\n  min,\n  isDecreaseDisabled,\n  isIncreaseDisabled,\n  id,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    ref=\"primitiveElement\"\n    role=\"group\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :text-value=\"textValue\"\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","useVModel","usePrimitiveElement","useLocale","useFormControl","ref","computed","isNullish","handleDecimalOperation","useNumberFormatter","useNumberParser","clamp","snapValueToStep"],"mappings":"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"}

package/dist/NumberField/NumberFieldRoot.js

@@ -8,6 +8,7 @@ import { u as useFormControl } from '../shared/useFormControl.js';
 import { c as clamp, s as snapValueToStep } from '../shared/clamp.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { _ as _sfc_main$1 } from '../VisuallyHidden/VisuallyHiddenInput.js';
+import { i as isNullish } from '../shared/nullish.js';
 
 const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext("NumberFieldRoot");
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -26,6 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     locale: {},
     disabled: { type: Boolean },
     disableWheelChange: { type: Boolean },
+    invertWheelChange: { type: Boolean },
     id: {},
     asChild: { type: Boolean },
     as: { default: "div" },
@@ -36,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { disabled, disableWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props);
+    const { disabled, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props);
     const modelValue = useVModel(props, "modelValue", emits, {
       defaultValue: props.defaultValue,
       passive: props.modelValue === void 0
@@ -46,10 +48,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isFormControl = useFormControl(currentElement);
     const inputEl = ref();
     const isDecreaseDisabled = computed(
-      () => clampInputValue(modelValue.value) === min.value || (min.value && !isNaN(modelValue.value) ? handleDecimalOperation("-", modelValue.value, step.value) < min.value : false)
+      () => !isNullish(modelValue.value) && (clampInputValue(modelValue.value) === min.value || min.value && !isNaN(modelValue.value) ? handleDecimalOperation("-", modelValue.value, step.value) < min.value : false)
     );
     const isIncreaseDisabled = computed(
-      () => clampInputValue(modelValue.value) === max.value || (max.value && !isNaN(modelValue.value) ? handleDecimalOperation("+", modelValue.value, step.value) > max.value : false)
+      () => !isNullish(modelValue.value) && (clampInputValue(modelValue.value) === max.value || max.value && !isNaN(modelValue.value) ? handleDecimalOperation("+", modelValue.value, step.value) > max.value : false)
     );
     function handleChangingValue(type, multiplier = 1) {
       inputEl.value?.focus();
@@ -84,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return hasDecimals ? "decimal" : "numeric";
     });
     const textValueFormatter = useNumberFormatter(locale, formatOptions);
-    const textValue = computed(() => isNaN(modelValue.value) ? "" : textValueFormatter.format(modelValue.value));
+    const textValue = computed(() => isNullish(modelValue.value) || isNaN(modelValue.value) ? "" : textValueFormatter.format(modelValue.value));
     function validate(val) {
       return numberParser.isValidPartialNumber(val, min.value, max.value);
     }
@@ -103,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function applyInputValue(val) {
       const parsedValue = numberParser.parse(val);
-      modelValue.value = clampInputValue(parsedValue);
+      modelValue.value = isNaN(parsedValue) ? void 0 : clampInputValue(parsedValue);
       if (!val.length)
         return setInputValue(val);
       if (isNaN(parsedValue))
@@ -123,6 +125,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       applyInputValue,
       disabled,
       disableWheelChange,
+      invertWheelChange,
       max,
       min,
       isDecreaseDisabled,