reka-ui 2.2.0 → 2.3.0

package/dist/Popper/PopperContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopperContent.js","sources":["../../src/Popper/PopperContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type {\n  Middleware,\n  Placement,\n  ReferenceElement,\n} from '@floating-ui/vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useForwardExpose, useSize } from '@/shared'\nimport type {\n  Align,\n  Side,\n} from './utils'\n\nexport const PopperContentPropsDefaultValue = {\n  side: 'bottom' as Side,\n  sideOffset: 0,\n  align: 'center' as Align,\n  alignOffset: 0,\n  arrowPadding: 0,\n  avoidCollisions: true,\n  collisionBoundary: () => [],\n  collisionPadding: 0,\n  sticky: 'partial' as 'partial' | 'always',\n  hideWhenDetached: false,\n  positionStrategy: 'fixed' as 'absolute' | 'fixed',\n  updatePositionStrategy: 'optimized' as 'optimized' | 'always',\n  prioritizePosition: false,\n}\n\nexport interface PopperContentProps extends PrimitiveProps {\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions\n   * is enabled.\n   *\n   * @defaultValue \"top\"\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the trigger.\n   *\n   * @defaultValue 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred alignment against the trigger.\n   * May change when collisions occur.\n   *\n   * @defaultValue \"center\"\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the `start` or `end` alignment options.\n   *\n   * @defaultValue 0\n   */\n  alignOffset?: number\n\n  /**\n   * When `true`, overrides the side and align preferences\n   * to prevent collisions with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The element used as the collision boundary. By default\n   * this is the viewport, though you can provide additional\n   * element(s) to be included in this check.\n   *\n   * @defaultValue []\n   */\n  collisionBoundary?: Element | null | Array<Element | null>\n\n  /**\n   * The distance in pixels from the boundary edges where collision\n   * detection should occur. Accepts a number (same for all sides),\n   * or a partial padding object, for example: { top: 20, left: 20 }.\n   *\n   * @defaultValue 0\n   */\n  collisionPadding?: number | Partial<Record<Side, number>>\n\n  /**\n   * The padding between the arrow and the edges of the content.\n   * If your content has border-radius, this will prevent it from\n   * overflowing the corners.\n   *\n   * @defaultValue 0\n   */\n  arrowPadding?: number\n\n  /**\n   * The sticky behavior on the align axis. `partial` will keep the\n   * content in the boundary as long as the trigger is at least partially\n   * in the boundary whilst \"always\" will keep the content in the boundary\n   * regardless.\n   *\n   * @defaultValue \"partial\"\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   *\n   * @defaultValue false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   *  The type of CSS position property to use.\n   */\n  positionStrategy?: 'absolute' | 'fixed'\n\n  /**\n   * Strategy to update the position of the floating element on every animation frame.\n   *\n   * @defaultValue 'optimized'\n   */\n  updatePositionStrategy?: 'optimized' | 'always'\n\n  /**\n   * Whether to disable the update position for the content when the layout shifted.\n   *\n   * @defaultValue false\n   */\n  disableUpdateOnLayoutShift?: boolean\n\n  /**\n   * Force content to be position within the viewport.\n   *\n   * Might overlap the reference element, which may not be desired.\n   *\n   * @defaultValue false\n   */\n  prioritizePosition?: boolean\n\n  /**\n   *  The custom element or virtual element that will be set as the reference\n   *  to position the floating element.\n   *\n   *  If provided, it will replace the default anchor element.\n   */\n  reference?: ReferenceElement\n}\n\nexport interface PopperContentContext {\n  placedSide: Ref<Side>\n  onArrowChange: (arrow: HTMLElement | undefined) => void\n  arrowX?: Ref<number>\n  arrowY?: Ref<number>\n  shouldHideArrow: Ref<boolean>\n}\n\nexport const [injectPopperContentContext, providePopperContentContext]\n  = createContext<PopperContentContext>('PopperContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watchEffect, watchPostEffect } from 'vue'\nimport { computedEager } from '@vueuse/core'\nimport {\n  autoUpdate,\n  flip,\n  arrow as floatingUIarrow,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { injectPopperRootContext } from './PopperRoot.vue'\nimport {\n  getSideAndAlignFromPlacement,\n  isNotNull,\n  transformOrigin,\n} from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PopperContentProps>(), {\n  ...PopperContentPropsDefaultValue,\n})\nconst emits = defineEmits<{\n  placed: [void]\n}>()\n\nconst rootContext = injectPopperRootContext()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst floatingRef = ref<HTMLElement>()\n\nconst arrow = ref<HTMLElement>()\nconst { width: arrowWidth, height: arrowHeight } = useSize(arrow)\n\nconst desiredPlacement = computed(\n  () =>\n    (props.side\n      + (props.align !== 'center' ? `-${props.align}` : '')) as Placement,\n)\n\nconst collisionPadding = computed(() => {\n  return typeof props.collisionPadding === 'number'\n    ? props.collisionPadding\n    : { top: 0, right: 0, bottom: 0, left: 0, ...props.collisionPadding }\n})\n\nconst boundary = computed(() => {\n  return Array.isArray(props.collisionBoundary)\n    ? props.collisionBoundary\n    : [props.collisionBoundary]\n})\n\nconst detectOverflowOptions = computed(() => {\n  return {\n    padding: collisionPadding.value,\n    boundary: boundary.value.filter(isNotNull),\n    // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n    altBoundary: boundary.value.length > 0,\n  }\n})\n\nconst computedMiddleware = computedEager(() => {\n  return [\n    offset({\n      mainAxis: props.sideOffset + arrowHeight.value,\n      alignmentAxis: props.alignOffset,\n    }),\n    props.prioritizePosition\n    && props.avoidCollisions\n    && flip({\n      ...detectOverflowOptions.value,\n    }),\n    props.avoidCollisions\n    && shift({\n      mainAxis: true,\n      crossAxis: !!props.prioritizePosition,\n      limiter: props.sticky === 'partial' ? limitShift() : undefined,\n      ...detectOverflowOptions.value,\n    }),\n    !props.prioritizePosition\n    && props.avoidCollisions\n    && flip({\n      ...detectOverflowOptions.value,\n    }),\n    size({\n      ...detectOverflowOptions.value,\n      apply: ({ elements, rects, availableWidth, availableHeight }) => {\n        const { width: anchorWidth, height: anchorHeight } = rects.reference\n        const contentStyle = elements.floating.style\n        contentStyle.setProperty(\n          '--reka-popper-available-width',\n          `${availableWidth}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-available-height',\n          `${availableHeight}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-anchor-width',\n          `${anchorWidth}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-anchor-height',\n          `${anchorHeight}px`,\n        )\n      },\n    }),\n    arrow.value\n    && floatingUIarrow({ element: arrow.value, padding: props.arrowPadding }),\n    transformOrigin({\n      arrowWidth: arrowWidth.value,\n      arrowHeight: arrowHeight.value,\n    }),\n    props.hideWhenDetached\n    && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),\n  ] as Middleware[]\n})\n\n// If provided custom reference, it will overwrite the default anchor element\nconst reference = computed(() => props.reference ?? rootContext.anchor.value)\n\nconst { floatingStyles, placement, isPositioned, middlewareData, update } = useFloating(\n  reference,\n  floatingRef,\n  {\n    strategy: props.positionStrategy,\n    placement: desiredPlacement,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, {\n        layoutShift: !props.disableUpdateOnLayoutShift,\n        animationFrame: props.updatePositionStrategy === 'always',\n      })\n      return cleanup\n    },\n    middleware: computedMiddleware,\n  },\n)\n\nconst placedSide = computed(\n  () => getSideAndAlignFromPlacement(placement.value)[0],\n)\nconst placedAlign = computed(\n  () => getSideAndAlignFromPlacement(placement.value)[1],\n)\n\nwatchPostEffect(() => {\n  if (isPositioned.value)\n    emits('placed')\n})\n\nconst cannotCenterArrow = computed(\n  () => middlewareData.value.arrow?.centerOffset !== 0,\n)\n\nconst contentZIndex = ref('')\nwatchEffect(() => {\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\nconst arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)\nconst arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)\n\nprovidePopperContentContext({\n  placedSide,\n  onArrowChange: element => arrow.value = element,\n  arrowX,\n  arrowY,\n  shouldHideArrow: cannotCenterArrow,\n})\n</script>\n\n<template>\n  <div\n    ref=\"floatingRef\"\n    data-reka-popper-content-wrapper=\"\"\n    :style=\"{\n      ...floatingStyles,\n      transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring\n      minWidth: 'max-content',\n      zIndex: contentZIndex,\n      ['--reka-popper-transform-origin' as any]: [\n        middlewareData.transformOrigin?.x,\n        middlewareData.transformOrigin?.y,\n      ].join(' '),\n\n      // hide the content if using the hide middleware and should be hidden\n      // set visibility to hidden and disable pointer events so the UI behaves\n      // as if the PopperContent isn't there at all\n      ...(middlewareData.hide?.referenceHidden && {\n        visibility: 'hidden',\n        pointerEvents: 'none',\n      }),\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      v-bind=\"$attrs\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      :data-side=\"placedSide\"\n      :data-align=\"placedAlign\"\n      :style=\"{\n        // if the PopperContent hasn't been placed yet (not all measurements done)\n        // we prevent animations so that users's animation don't kick in too early referring wrong sides\n        animation: !isPositioned ? 'none' : undefined,\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":["arrow","floatingUIarrow"],"mappings":"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"}
+{"version":3,"file":"PopperContent.js","sources":["../../src/Popper/PopperContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  Middleware,\n  Placement,\n  ReferenceElement,\n} from '@floating-ui/vue'\nimport type { Ref } from 'vue'\nimport type {\n  Align,\n  Side,\n} from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useForwardExpose, useSize } from '@/shared'\n\nexport const PopperContentPropsDefaultValue = {\n  side: 'bottom' as Side,\n  sideOffset: 0,\n  align: 'center' as Align,\n  alignOffset: 0,\n  arrowPadding: 0,\n  avoidCollisions: true,\n  collisionBoundary: () => [],\n  collisionPadding: 0,\n  sticky: 'partial' as 'partial' | 'always',\n  hideWhenDetached: false,\n  positionStrategy: 'fixed' as 'absolute' | 'fixed',\n  updatePositionStrategy: 'optimized' as 'optimized' | 'always',\n  prioritizePosition: false,\n}\n\nexport interface PopperContentProps extends PrimitiveProps {\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions\n   * is enabled.\n   *\n   * @defaultValue \"top\"\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the trigger.\n   *\n   * @defaultValue 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred alignment against the trigger.\n   * May change when collisions occur.\n   *\n   * @defaultValue \"center\"\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the `start` or `end` alignment options.\n   *\n   * @defaultValue 0\n   */\n  alignOffset?: number\n\n  /**\n   * When `true`, overrides the side and align preferences\n   * to prevent collisions with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The element used as the collision boundary. By default\n   * this is the viewport, though you can provide additional\n   * element(s) to be included in this check.\n   *\n   * @defaultValue []\n   */\n  collisionBoundary?: Element | null | Array<Element | null>\n\n  /**\n   * The distance in pixels from the boundary edges where collision\n   * detection should occur. Accepts a number (same for all sides),\n   * or a partial padding object, for example: { top: 20, left: 20 }.\n   *\n   * @defaultValue 0\n   */\n  collisionPadding?: number | Partial<Record<Side, number>>\n\n  /**\n   * The padding between the arrow and the edges of the content.\n   * If your content has border-radius, this will prevent it from\n   * overflowing the corners.\n   *\n   * @defaultValue 0\n   */\n  arrowPadding?: number\n\n  /**\n   * The sticky behavior on the align axis. `partial` will keep the\n   * content in the boundary as long as the trigger is at least partially\n   * in the boundary whilst \"always\" will keep the content in the boundary\n   * regardless.\n   *\n   * @defaultValue \"partial\"\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   *\n   * @defaultValue false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   *  The type of CSS position property to use.\n   */\n  positionStrategy?: 'absolute' | 'fixed'\n\n  /**\n   * Strategy to update the position of the floating element on every animation frame.\n   *\n   * @defaultValue 'optimized'\n   */\n  updatePositionStrategy?: 'optimized' | 'always'\n\n  /**\n   * Whether to disable the update position for the content when the layout shifted.\n   *\n   * @defaultValue false\n   */\n  disableUpdateOnLayoutShift?: boolean\n\n  /**\n   * Force content to be position within the viewport.\n   *\n   * Might overlap the reference element, which may not be desired.\n   *\n   * @defaultValue false\n   */\n  prioritizePosition?: boolean\n\n  /**\n   *  The custom element or virtual element that will be set as the reference\n   *  to position the floating element.\n   *\n   *  If provided, it will replace the default anchor element.\n   */\n  reference?: ReferenceElement\n}\n\nexport interface PopperContentContext {\n  placedSide: Ref<Side>\n  onArrowChange: (arrow: HTMLElement | undefined) => void\n  arrowX?: Ref<number>\n  arrowY?: Ref<number>\n  shouldHideArrow: Ref<boolean>\n}\n\nexport const [injectPopperContentContext, providePopperContentContext]\n  = createContext<PopperContentContext>('PopperContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  autoUpdate,\n  flip,\n  arrow as floatingUIarrow,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { computedEager } from '@vueuse/core'\nimport { computed, ref, watchEffect, watchPostEffect } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectPopperRootContext } from './PopperRoot.vue'\nimport {\n  getSideAndAlignFromPlacement,\n  isNotNull,\n  transformOrigin,\n} from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PopperContentProps>(), {\n  ...PopperContentPropsDefaultValue,\n})\nconst emits = defineEmits<{\n  placed: [void]\n}>()\n\nconst rootContext = injectPopperRootContext()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst floatingRef = ref<HTMLElement>()\n\nconst arrow = ref<HTMLElement>()\nconst { width: arrowWidth, height: arrowHeight } = useSize(arrow)\n\nconst desiredPlacement = computed(\n  () =>\n    (props.side\n      + (props.align !== 'center' ? `-${props.align}` : '')) as Placement,\n)\n\nconst collisionPadding = computed(() => {\n  return typeof props.collisionPadding === 'number'\n    ? props.collisionPadding\n    : { top: 0, right: 0, bottom: 0, left: 0, ...props.collisionPadding }\n})\n\nconst boundary = computed(() => {\n  return Array.isArray(props.collisionBoundary)\n    ? props.collisionBoundary\n    : [props.collisionBoundary]\n})\n\nconst detectOverflowOptions = computed(() => {\n  return {\n    padding: collisionPadding.value,\n    boundary: boundary.value.filter(isNotNull),\n    // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n    altBoundary: boundary.value.length > 0,\n  }\n})\n\nconst computedMiddleware = computedEager(() => {\n  return [\n    offset({\n      mainAxis: props.sideOffset + arrowHeight.value,\n      alignmentAxis: props.alignOffset,\n    }),\n    props.prioritizePosition\n    && props.avoidCollisions\n    && flip({\n      ...detectOverflowOptions.value,\n    }),\n    props.avoidCollisions\n    && shift({\n      mainAxis: true,\n      crossAxis: !!props.prioritizePosition,\n      limiter: props.sticky === 'partial' ? limitShift() : undefined,\n      ...detectOverflowOptions.value,\n    }),\n    !props.prioritizePosition\n    && props.avoidCollisions\n    && flip({\n      ...detectOverflowOptions.value,\n    }),\n    size({\n      ...detectOverflowOptions.value,\n      apply: ({ elements, rects, availableWidth, availableHeight }) => {\n        const { width: anchorWidth, height: anchorHeight } = rects.reference\n        const contentStyle = elements.floating.style\n        contentStyle.setProperty(\n          '--reka-popper-available-width',\n          `${availableWidth}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-available-height',\n          `${availableHeight}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-anchor-width',\n          `${anchorWidth}px`,\n        )\n        contentStyle.setProperty(\n          '--reka-popper-anchor-height',\n          `${anchorHeight}px`,\n        )\n      },\n    }),\n    arrow.value\n    && floatingUIarrow({ element: arrow.value, padding: props.arrowPadding }),\n    transformOrigin({\n      arrowWidth: arrowWidth.value,\n      arrowHeight: arrowHeight.value,\n    }),\n    props.hideWhenDetached\n    && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),\n  ] as Middleware[]\n})\n\n// If provided custom reference, it will overwrite the default anchor element\nconst reference = computed(() => props.reference ?? rootContext.anchor.value)\n\nconst { floatingStyles, placement, isPositioned, middlewareData, update } = useFloating(\n  reference,\n  floatingRef,\n  {\n    strategy: props.positionStrategy,\n    placement: desiredPlacement,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, {\n        layoutShift: !props.disableUpdateOnLayoutShift,\n        animationFrame: props.updatePositionStrategy === 'always',\n      })\n      return cleanup\n    },\n    middleware: computedMiddleware,\n  },\n)\n\nconst placedSide = computed(\n  () => getSideAndAlignFromPlacement(placement.value)[0],\n)\nconst placedAlign = computed(\n  () => getSideAndAlignFromPlacement(placement.value)[1],\n)\n\nwatchPostEffect(() => {\n  if (isPositioned.value)\n    emits('placed')\n})\n\nconst cannotCenterArrow = computed(\n  () => middlewareData.value.arrow?.centerOffset !== 0,\n)\n\nconst contentZIndex = ref('')\nwatchEffect(() => {\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\nconst arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)\nconst arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)\n\nprovidePopperContentContext({\n  placedSide,\n  onArrowChange: element => arrow.value = element,\n  arrowX,\n  arrowY,\n  shouldHideArrow: cannotCenterArrow,\n})\n</script>\n\n<template>\n  <div\n    ref=\"floatingRef\"\n    data-reka-popper-content-wrapper=\"\"\n    :style=\"{\n      ...floatingStyles,\n      transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring\n      minWidth: 'max-content',\n      zIndex: contentZIndex,\n      ['--reka-popper-transform-origin' as any]: [\n        middlewareData.transformOrigin?.x,\n        middlewareData.transformOrigin?.y,\n      ].join(' '),\n\n      // hide the content if using the hide middleware and should be hidden\n      // set visibility to hidden and disable pointer events so the UI behaves\n      // as if the PopperContent isn't there at all\n      ...(middlewareData.hide?.referenceHidden && {\n        visibility: 'hidden',\n        pointerEvents: 'none',\n      }),\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      v-bind=\"$attrs\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      :data-side=\"placedSide\"\n      :data-align=\"placedAlign\"\n      :style=\"{\n        // if the PopperContent hasn't been placed yet (not all measurements done)\n        // we prevent animations so that users's animation don't kick in too early referring wrong sides\n        animation: !isPositioned ? 'none' : undefined,\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":["arrow","floatingUIarrow"],"mappings":"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"}

package/dist/Popper/PopperRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopperRoot.cjs","sources":["../../src/Popper/PopperRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext } from '@/shared'\nimport type { ReferenceElement } from '@floating-ui/vue'\n\nexport interface Measurable {\n  getBoundingClientRect: () => DOMRect\n}\n\ninterface PopperRootContext {\n  anchor: Ref<ReferenceElement | undefined >\n  onAnchorChange: (element: ReferenceElement | undefined) => void\n}\n\nexport const [injectPopperRootContext, providePopperRootContext]\n  = createContext<PopperRootContext>('PopperRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst anchor = ref<ReferenceElement>()\n\nprovidePopperRootContext({\n  anchor,\n  onAnchorChange: element => anchor.value = element,\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":["createContext","ref"],"mappings":";;;;;AAcO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3DA,mCAAiC,YAAY;;;;;;;AAUjD,IAAA,MAAM,SAASC,OAAsB,EAAA;AAErC,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAA;AAAA,MACA,cAAA,EAAgB,CAAW,OAAA,KAAA,MAAA,CAAO,KAAQ,GAAA;AAAA,KAC3C,CAAA;;;;;;;;;;"}
+{"version":3,"file":"PopperRoot.cjs","sources":["../../src/Popper/PopperRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ReferenceElement } from '@floating-ui/vue'\nimport type { Ref } from 'vue'\nimport { createContext } from '@/shared'\n\nexport interface Measurable {\n  getBoundingClientRect: () => DOMRect\n}\n\ninterface PopperRootContext {\n  anchor: Ref<ReferenceElement | undefined>\n  onAnchorChange: (element: ReferenceElement | undefined) => void\n}\n\nexport const [injectPopperRootContext, providePopperRootContext]\n  = createContext<PopperRootContext>('PopperRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst anchor = ref<ReferenceElement>()\n\nprovidePopperRootContext({\n  anchor,\n  onAnchorChange: element => anchor.value = element,\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":["createContext","ref"],"mappings":";;;;;AAcO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3DA,mCAAiC,YAAY;;;;;;;AAUjD,IAAA,MAAM,SAASC,OAAsB,EAAA;AAErC,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAA;AAAA,MACA,cAAA,EAAgB,CAAW,OAAA,KAAA,MAAA,CAAO,KAAQ,GAAA;AAAA,KAC3C,CAAA;;;;;;;;;;"}

package/dist/Popper/PopperRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopperRoot.js","sources":["../../src/Popper/PopperRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext } from '@/shared'\nimport type { ReferenceElement } from '@floating-ui/vue'\n\nexport interface Measurable {\n  getBoundingClientRect: () => DOMRect\n}\n\ninterface PopperRootContext {\n  anchor: Ref<ReferenceElement | undefined >\n  onAnchorChange: (element: ReferenceElement | undefined) => void\n}\n\nexport const [injectPopperRootContext, providePopperRootContext]\n  = createContext<PopperRootContext>('PopperRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst anchor = ref<ReferenceElement>()\n\nprovidePopperRootContext({\n  anchor,\n  onAnchorChange: element => anchor.value = element,\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":[],"mappings":";;;AAcO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3D,cAAiC,YAAY;;;;;;;AAUjD,IAAA,MAAM,SAAS,GAAsB,EAAA;AAErC,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAA;AAAA,MACA,cAAA,EAAgB,CAAW,OAAA,KAAA,MAAA,CAAO,KAAQ,GAAA;AAAA,KAC3C,CAAA;;;;;;;;;"}
+{"version":3,"file":"PopperRoot.js","sources":["../../src/Popper/PopperRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ReferenceElement } from '@floating-ui/vue'\nimport type { Ref } from 'vue'\nimport { createContext } from '@/shared'\n\nexport interface Measurable {\n  getBoundingClientRect: () => DOMRect\n}\n\ninterface PopperRootContext {\n  anchor: Ref<ReferenceElement | undefined>\n  onAnchorChange: (element: ReferenceElement | undefined) => void\n}\n\nexport const [injectPopperRootContext, providePopperRootContext]\n  = createContext<PopperRootContext>('PopperRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst anchor = ref<ReferenceElement>()\n\nprovidePopperRootContext({\n  anchor,\n  onAnchorChange: element => anchor.value = element,\n})\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":[],"mappings":";;;AAcO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3D,cAAiC,YAAY;;;;;;;AAUjD,IAAA,MAAM,SAAS,GAAsB,EAAA;AAErC,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAA;AAAA,MACA,cAAA,EAAgB,CAAW,OAAA,KAAA,MAAA,CAAO,KAAQ,GAAA;AAAA,KAC3C,CAAA;;;;;;;;;"}

package/dist/Presence/Presence.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
+const core = require('@vueuse/core');
 const vue = require('vue');
 const Presence_usePresence = require('./usePresence.cjs');
-const core = require('@vueuse/core');
 const shared_renderSlotFragments = require('../shared/renderSlotFragments.cjs');
 
 const Presence = vue.defineComponent({

package/dist/Presence/Presence.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Presence.cjs","sources":["../../src/Presence/Presence.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  ref,\n  toRefs,\n} from 'vue'\nimport type {\n  SlotsType,\n  VNode,\n} from 'vue'\nimport { usePresence } from './usePresence'\nimport { renderSlotFragments } from '@/shared'\nimport { unrefElement } from '@vueuse/core'\n\nexport interface PresenceProps {\n  /**\n   * Conditional to mount or unmount the child element. Similar to `v-if`\n   *\n   * @required true\n   */\n  present: boolean\n  /**\n   * Force the element to render all the time.\n   *\n   * Useful for programmatically render grandchild component with the exposed `present`\n   *\n   * @defaultValue false\n   */\n  forceMount?: boolean\n}\n\nexport default defineComponent({\n  name: 'Presence',\n  props: {\n    present: {\n      type: Boolean,\n      required: true,\n    },\n    forceMount: {\n      type: Boolean,\n    },\n  },\n  slots: {} as SlotsType<{\n    default: (opts: { present: boolean }) => any\n  }>,\n  setup(props, { slots, expose }) {\n    const { present, forceMount } = toRefs(props)\n\n    const node = ref<HTMLElement>()\n    // Mount composables once to prevent duplicated eventListener\n    const { isPresent } = usePresence(present, node)\n    expose({ present: isPresent })\n\n    let children = slots.default({ present: isPresent.value })\n    children = renderSlotFragments(children || [])\n    const instance = getCurrentInstance()\n\n    if (children && children?.length > 1) {\n      const componentName = instance?.parent?.type.name\n        ? `<${instance.parent.type.name} />`\n        : 'component'\n\n      throw new Error(\n        [\n          `Detected an invalid children for \\`${componentName}\\` for  \\`Presence\\` component.`,\n          '',\n          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',\n          'You can apply a few solutions:',\n          [\n            'Provide a single child element so that `presence` directive attach correctly.',\n            'Ensure the first child is an actual element instead of a raw text node or comment node.',\n          ]\n            .map(line => `  - ${line}`)\n            .join('\\n'),\n        ].join('\\n'),\n      )\n    }\n\n    return () => {\n      if (forceMount.value || present.value || isPresent.value) {\n        return h(slots.default({ present: isPresent.value })[0] as VNode, {\n          ref: (v) => {\n            const el = unrefElement(v as HTMLElement)\n            if (typeof el?.hasAttribute === 'undefined')\n              return el\n\n            // special case to handle animation for PopperContent\n            if (el?.hasAttribute('data-reka-popper-content-wrapper'))\n              node.value = el.firstElementChild as HTMLElement\n            else\n              node.value = el\n\n            return el\n          },\n        })\n      }\n      else { return null }\n    }\n  },\n})\n"],"names":["defineComponent","toRefs","ref","usePresence","renderSlotFragments","getCurrentInstance","h","unrefElement"],"mappings":";;;;;;;AAgCA,iBAAeA,mBAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,UAAA;AAAA,EACN,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,OAAO,EAAC;AAAA,EAGR,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAU,EAAA;AAC9B,IAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAIC,WAAO,KAAK,CAAA;AAE5C,IAAA,MAAM,OAAOC,OAAiB,EAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAc,GAAAC,gCAAA,CAAY,SAAS,IAAI,CAAA;AAC/C,IAAO,MAAA,CAAA,EAAE,OAAS,EAAA,SAAA,EAAW,CAAA;AAE7B,IAAA,IAAI,WAAW,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAS,EAAA,SAAA,CAAU,OAAO,CAAA;AACzD,IAAW,QAAA,GAAAC,8CAAA,CAAoB,QAAY,IAAA,EAAE,CAAA;AAC7C,IAAA,MAAM,WAAWC,sBAAmB,EAAA;AAEpC,IAAI,IAAA,QAAA,IAAY,QAAU,EAAA,MAAA,GAAS,CAAG,EAAA;AACpC,MAAM,MAAA,aAAA,GAAgB,QAAU,EAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,GACzC,IAAI,QAAS,CAAA,MAAA,CAAO,IAAK,CAAA,IAAI,CAC7B,GAAA,CAAA,GAAA,WAAA;AAEJ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,UACE,sCAAsC,aAAa,CAAA,+BAAA,CAAA;AAAA,UACnD,EAAA;AAAA,UACA,iLAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA,YACE,+EAAA;AAAA,YACA;AAAA,WACF,CACG,IAAI,CAAQ,IAAA,KAAA,CAAA,IAAA,EAAO,IAAI,CAAE,CAAA,CAAA,CACzB,KAAK,IAAI;AAAA,SACd,CAAE,KAAK,IAAI;AAAA,OACb;AAAA;AAGF,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAW,CAAA,KAAA,IAAS,OAAQ,CAAA,KAAA,IAAS,UAAU,KAAO,EAAA;AACxD,QAAO,OAAAC,KAAA,CAAE,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAA,EAAS,UAAU,KAAM,EAAC,CAAE,CAAA,CAAC,CAAY,EAAA;AAAA,UAChE,GAAA,EAAK,CAAC,CAAM,KAAA;AACV,YAAM,MAAA,EAAA,GAAKC,kBAAa,CAAgB,CAAA;AACxC,YAAI,IAAA,OAAO,IAAI,YAAiB,KAAA,WAAA;AAC9B,cAAO,OAAA,EAAA;AAGT,YAAI,IAAA,EAAA,EAAI,aAAa,kCAAkC,CAAA;AACrD,cAAA,IAAA,CAAK,QAAQ,EAAG,CAAA,iBAAA;AAAA;AAEhB,cAAA,IAAA,CAAK,KAAQ,GAAA,EAAA;AAEf,YAAO,OAAA,EAAA;AAAA;AACT,SACD,CAAA;AAAA,OAEE,MAAA;AAAE,QAAO,OAAA,IAAA;AAAA;AAAK,KACrB;AAAA;AAEJ,CAAC,CAAA;;;;"}
+{"version":3,"file":"Presence.cjs","sources":["../../src/Presence/Presence.ts"],"sourcesContent":["import type {\n  SlotsType,\n  VNode,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  ref,\n  toRefs,\n} from 'vue'\nimport { renderSlotFragments } from '@/shared'\nimport { usePresence } from './usePresence'\n\nexport interface PresenceProps {\n  /**\n   * Conditional to mount or unmount the child element. Similar to `v-if`\n   *\n   * @required true\n   */\n  present: boolean\n  /**\n   * Force the element to render all the time.\n   *\n   * Useful for programmatically render grandchild component with the exposed `present`\n   *\n   * @defaultValue false\n   */\n  forceMount?: boolean\n}\n\nexport default defineComponent({\n  name: 'Presence',\n  props: {\n    present: {\n      type: Boolean,\n      required: true,\n    },\n    forceMount: {\n      type: Boolean,\n    },\n  },\n  slots: {} as SlotsType<{\n    default: (opts: { present: boolean }) => any\n  }>,\n  setup(props, { slots, expose }) {\n    const { present, forceMount } = toRefs(props)\n\n    const node = ref<HTMLElement>()\n    // Mount composables once to prevent duplicated eventListener\n    const { isPresent } = usePresence(present, node)\n    expose({ present: isPresent })\n\n    let children = slots.default({ present: isPresent.value })\n    children = renderSlotFragments(children || [])\n    const instance = getCurrentInstance()\n\n    if (children && children?.length > 1) {\n      const componentName = instance?.parent?.type.name\n        ? `<${instance.parent.type.name} />`\n        : 'component'\n\n      throw new Error(\n        [\n          `Detected an invalid children for \\`${componentName}\\` for  \\`Presence\\` component.`,\n          '',\n          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',\n          'You can apply a few solutions:',\n          [\n            'Provide a single child element so that `presence` directive attach correctly.',\n            'Ensure the first child is an actual element instead of a raw text node or comment node.',\n          ]\n            .map(line => `  - ${line}`)\n            .join('\\n'),\n        ].join('\\n'),\n      )\n    }\n\n    return () => {\n      if (forceMount.value || present.value || isPresent.value) {\n        return h(slots.default({ present: isPresent.value })[0] as VNode, {\n          ref: (v) => {\n            const el = unrefElement(v as HTMLElement)\n            if (typeof el?.hasAttribute === 'undefined')\n              return el\n\n            // special case to handle animation for PopperContent\n            if (el?.hasAttribute('data-reka-popper-content-wrapper'))\n              node.value = el.firstElementChild as HTMLElement\n            else\n              node.value = el\n\n            return el\n          },\n        })\n      }\n      else { return null }\n    }\n  },\n})\n"],"names":["defineComponent","toRefs","ref","usePresence","renderSlotFragments","getCurrentInstance","h","unrefElement"],"mappings":";;;;;;;AAgCA,iBAAeA,mBAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,UAAA;AAAA,EACN,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,OAAO,EAAC;AAAA,EAGR,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAU,EAAA;AAC9B,IAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAIC,WAAO,KAAK,CAAA;AAE5C,IAAA,MAAM,OAAOC,OAAiB,EAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAc,GAAAC,gCAAA,CAAY,SAAS,IAAI,CAAA;AAC/C,IAAO,MAAA,CAAA,EAAE,OAAS,EAAA,SAAA,EAAW,CAAA;AAE7B,IAAA,IAAI,WAAW,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAS,EAAA,SAAA,CAAU,OAAO,CAAA;AACzD,IAAW,QAAA,GAAAC,8CAAA,CAAoB,QAAY,IAAA,EAAE,CAAA;AAC7C,IAAA,MAAM,WAAWC,sBAAmB,EAAA;AAEpC,IAAI,IAAA,QAAA,IAAY,QAAU,EAAA,MAAA,GAAS,CAAG,EAAA;AACpC,MAAM,MAAA,aAAA,GAAgB,QAAU,EAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,GACzC,IAAI,QAAS,CAAA,MAAA,CAAO,IAAK,CAAA,IAAI,CAC7B,GAAA,CAAA,GAAA,WAAA;AAEJ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,UACE,sCAAsC,aAAa,CAAA,+BAAA,CAAA;AAAA,UACnD,EAAA;AAAA,UACA,iLAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA,YACE,+EAAA;AAAA,YACA;AAAA,WACF,CACG,IAAI,CAAQ,IAAA,KAAA,CAAA,IAAA,EAAO,IAAI,CAAE,CAAA,CAAA,CACzB,KAAK,IAAI;AAAA,SACd,CAAE,KAAK,IAAI;AAAA,OACb;AAAA;AAGF,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAW,CAAA,KAAA,IAAS,OAAQ,CAAA,KAAA,IAAS,UAAU,KAAO,EAAA;AACxD,QAAO,OAAAC,KAAA,CAAE,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAA,EAAS,UAAU,KAAM,EAAC,CAAE,CAAA,CAAC,CAAY,EAAA;AAAA,UAChE,GAAA,EAAK,CAAC,CAAM,KAAA;AACV,YAAM,MAAA,EAAA,GAAKC,kBAAa,CAAgB,CAAA;AACxC,YAAI,IAAA,OAAO,IAAI,YAAiB,KAAA,WAAA;AAC9B,cAAO,OAAA,EAAA;AAGT,YAAI,IAAA,EAAA,EAAI,aAAa,kCAAkC,CAAA;AACrD,cAAA,IAAA,CAAK,QAAQ,EAAG,CAAA,iBAAA;AAAA;AAEhB,cAAA,IAAA,CAAK,KAAQ,GAAA,EAAA;AAEf,YAAO,OAAA,EAAA;AAAA;AACT,SACD,CAAA;AAAA,OAEE,MAAA;AAAE,QAAO,OAAA,IAAA;AAAA;AAAK,KACrB;AAAA;AAEJ,CAAC,CAAA;;;;"}

package/dist/Presence/Presence.js

@@ -1,6 +1,6 @@
+import { unrefElement } from '@vueuse/core';
 import { defineComponent, toRefs, ref, getCurrentInstance, h } from 'vue';
 import { u as usePresence } from './usePresence.js';
-import { unrefElement } from '@vueuse/core';
 import { r as renderSlotFragments } from '../shared/renderSlotFragments.js';
 
 const Presence = defineComponent({

package/dist/Presence/Presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"Presence.js","sources":["../../src/Presence/Presence.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  ref,\n  toRefs,\n} from 'vue'\nimport type {\n  SlotsType,\n  VNode,\n} from 'vue'\nimport { usePresence } from './usePresence'\nimport { renderSlotFragments } from '@/shared'\nimport { unrefElement } from '@vueuse/core'\n\nexport interface PresenceProps {\n  /**\n   * Conditional to mount or unmount the child element. Similar to `v-if`\n   *\n   * @required true\n   */\n  present: boolean\n  /**\n   * Force the element to render all the time.\n   *\n   * Useful for programmatically render grandchild component with the exposed `present`\n   *\n   * @defaultValue false\n   */\n  forceMount?: boolean\n}\n\nexport default defineComponent({\n  name: 'Presence',\n  props: {\n    present: {\n      type: Boolean,\n      required: true,\n    },\n    forceMount: {\n      type: Boolean,\n    },\n  },\n  slots: {} as SlotsType<{\n    default: (opts: { present: boolean }) => any\n  }>,\n  setup(props, { slots, expose }) {\n    const { present, forceMount } = toRefs(props)\n\n    const node = ref<HTMLElement>()\n    // Mount composables once to prevent duplicated eventListener\n    const { isPresent } = usePresence(present, node)\n    expose({ present: isPresent })\n\n    let children = slots.default({ present: isPresent.value })\n    children = renderSlotFragments(children || [])\n    const instance = getCurrentInstance()\n\n    if (children && children?.length > 1) {\n      const componentName = instance?.parent?.type.name\n        ? `<${instance.parent.type.name} />`\n        : 'component'\n\n      throw new Error(\n        [\n          `Detected an invalid children for \\`${componentName}\\` for  \\`Presence\\` component.`,\n          '',\n          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',\n          'You can apply a few solutions:',\n          [\n            'Provide a single child element so that `presence` directive attach correctly.',\n            'Ensure the first child is an actual element instead of a raw text node or comment node.',\n          ]\n            .map(line => `  - ${line}`)\n            .join('\\n'),\n        ].join('\\n'),\n      )\n    }\n\n    return () => {\n      if (forceMount.value || present.value || isPresent.value) {\n        return h(slots.default({ present: isPresent.value })[0] as VNode, {\n          ref: (v) => {\n            const el = unrefElement(v as HTMLElement)\n            if (typeof el?.hasAttribute === 'undefined')\n              return el\n\n            // special case to handle animation for PopperContent\n            if (el?.hasAttribute('data-reka-popper-content-wrapper'))\n              node.value = el.firstElementChild as HTMLElement\n            else\n              node.value = el\n\n            return el\n          },\n        })\n      }\n      else { return null }\n    }\n  },\n})\n"],"names":[],"mappings":";;;;;AAgCA,iBAAe,eAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,UAAA;AAAA,EACN,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,OAAO,EAAC;AAAA,EAGR,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAU,EAAA;AAC9B,IAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,OAAO,KAAK,CAAA;AAE5C,IAAA,MAAM,OAAO,GAAiB,EAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAc,GAAA,WAAA,CAAY,SAAS,IAAI,CAAA;AAC/C,IAAO,MAAA,CAAA,EAAE,OAAS,EAAA,SAAA,EAAW,CAAA;AAE7B,IAAA,IAAI,WAAW,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAS,EAAA,SAAA,CAAU,OAAO,CAAA;AACzD,IAAW,QAAA,GAAA,mBAAA,CAAoB,QAAY,IAAA,EAAE,CAAA;AAC7C,IAAA,MAAM,WAAW,kBAAmB,EAAA;AAEpC,IAAI,IAAA,QAAA,IAAY,QAAU,EAAA,MAAA,GAAS,CAAG,EAAA;AACpC,MAAM,MAAA,aAAA,GAAgB,QAAU,EAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,GACzC,IAAI,QAAS,CAAA,MAAA,CAAO,IAAK,CAAA,IAAI,CAC7B,GAAA,CAAA,GAAA,WAAA;AAEJ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,UACE,sCAAsC,aAAa,CAAA,+BAAA,CAAA;AAAA,UACnD,EAAA;AAAA,UACA,iLAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA,YACE,+EAAA;AAAA,YACA;AAAA,WACF,CACG,IAAI,CAAQ,IAAA,KAAA,CAAA,IAAA,EAAO,IAAI,CAAE,CAAA,CAAA,CACzB,KAAK,IAAI;AAAA,SACd,CAAE,KAAK,IAAI;AAAA,OACb;AAAA;AAGF,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAW,CAAA,KAAA,IAAS,OAAQ,CAAA,KAAA,IAAS,UAAU,KAAO,EAAA;AACxD,QAAO,OAAA,CAAA,CAAE,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAA,EAAS,UAAU,KAAM,EAAC,CAAE,CAAA,CAAC,CAAY,EAAA;AAAA,UAChE,GAAA,EAAK,CAAC,CAAM,KAAA;AACV,YAAM,MAAA,EAAA,GAAK,aAAa,CAAgB,CAAA;AACxC,YAAI,IAAA,OAAO,IAAI,YAAiB,KAAA,WAAA;AAC9B,cAAO,OAAA,EAAA;AAGT,YAAI,IAAA,EAAA,EAAI,aAAa,kCAAkC,CAAA;AACrD,cAAA,IAAA,CAAK,QAAQ,EAAG,CAAA,iBAAA;AAAA;AAEhB,cAAA,IAAA,CAAK,KAAQ,GAAA,EAAA;AAEf,YAAO,OAAA,EAAA;AAAA;AACT,SACD,CAAA;AAAA,OAEE,MAAA;AAAE,QAAO,OAAA,IAAA;AAAA;AAAK,KACrB;AAAA;AAEJ,CAAC,CAAA;;;;"}
+{"version":3,"file":"Presence.js","sources":["../../src/Presence/Presence.ts"],"sourcesContent":["import type {\n  SlotsType,\n  VNode,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  ref,\n  toRefs,\n} from 'vue'\nimport { renderSlotFragments } from '@/shared'\nimport { usePresence } from './usePresence'\n\nexport interface PresenceProps {\n  /**\n   * Conditional to mount or unmount the child element. Similar to `v-if`\n   *\n   * @required true\n   */\n  present: boolean\n  /**\n   * Force the element to render all the time.\n   *\n   * Useful for programmatically render grandchild component with the exposed `present`\n   *\n   * @defaultValue false\n   */\n  forceMount?: boolean\n}\n\nexport default defineComponent({\n  name: 'Presence',\n  props: {\n    present: {\n      type: Boolean,\n      required: true,\n    },\n    forceMount: {\n      type: Boolean,\n    },\n  },\n  slots: {} as SlotsType<{\n    default: (opts: { present: boolean }) => any\n  }>,\n  setup(props, { slots, expose }) {\n    const { present, forceMount } = toRefs(props)\n\n    const node = ref<HTMLElement>()\n    // Mount composables once to prevent duplicated eventListener\n    const { isPresent } = usePresence(present, node)\n    expose({ present: isPresent })\n\n    let children = slots.default({ present: isPresent.value })\n    children = renderSlotFragments(children || [])\n    const instance = getCurrentInstance()\n\n    if (children && children?.length > 1) {\n      const componentName = instance?.parent?.type.name\n        ? `<${instance.parent.type.name} />`\n        : 'component'\n\n      throw new Error(\n        [\n          `Detected an invalid children for \\`${componentName}\\` for  \\`Presence\\` component.`,\n          '',\n          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',\n          'You can apply a few solutions:',\n          [\n            'Provide a single child element so that `presence` directive attach correctly.',\n            'Ensure the first child is an actual element instead of a raw text node or comment node.',\n          ]\n            .map(line => `  - ${line}`)\n            .join('\\n'),\n        ].join('\\n'),\n      )\n    }\n\n    return () => {\n      if (forceMount.value || present.value || isPresent.value) {\n        return h(slots.default({ present: isPresent.value })[0] as VNode, {\n          ref: (v) => {\n            const el = unrefElement(v as HTMLElement)\n            if (typeof el?.hasAttribute === 'undefined')\n              return el\n\n            // special case to handle animation for PopperContent\n            if (el?.hasAttribute('data-reka-popper-content-wrapper'))\n              node.value = el.firstElementChild as HTMLElement\n            else\n              node.value = el\n\n            return el\n          },\n        })\n      }\n      else { return null }\n    }\n  },\n})\n"],"names":[],"mappings":";;;;;AAgCA,iBAAe,eAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,UAAA;AAAA,EACN,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,OAAO,EAAC;AAAA,EAGR,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAU,EAAA;AAC9B,IAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,OAAO,KAAK,CAAA;AAE5C,IAAA,MAAM,OAAO,GAAiB,EAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAc,GAAA,WAAA,CAAY,SAAS,IAAI,CAAA;AAC/C,IAAO,MAAA,CAAA,EAAE,OAAS,EAAA,SAAA,EAAW,CAAA;AAE7B,IAAA,IAAI,WAAW,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAS,EAAA,SAAA,CAAU,OAAO,CAAA;AACzD,IAAW,QAAA,GAAA,mBAAA,CAAoB,QAAY,IAAA,EAAE,CAAA;AAC7C,IAAA,MAAM,WAAW,kBAAmB,EAAA;AAEpC,IAAI,IAAA,QAAA,IAAY,QAAU,EAAA,MAAA,GAAS,CAAG,EAAA;AACpC,MAAM,MAAA,aAAA,GAAgB,QAAU,EAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,GACzC,IAAI,QAAS,CAAA,MAAA,CAAO,IAAK,CAAA,IAAI,CAC7B,GAAA,CAAA,GAAA,WAAA;AAEJ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,UACE,sCAAsC,aAAa,CAAA,+BAAA,CAAA;AAAA,UACnD,EAAA;AAAA,UACA,iLAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA,YACE,+EAAA;AAAA,YACA;AAAA,WACF,CACG,IAAI,CAAQ,IAAA,KAAA,CAAA,IAAA,EAAO,IAAI,CAAE,CAAA,CAAA,CACzB,KAAK,IAAI;AAAA,SACd,CAAE,KAAK,IAAI;AAAA,OACb;AAAA;AAGF,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAW,CAAA,KAAA,IAAS,OAAQ,CAAA,KAAA,IAAS,UAAU,KAAO,EAAA;AACxD,QAAO,OAAA,CAAA,CAAE,KAAM,CAAA,OAAA,CAAQ,EAAE,OAAA,EAAS,UAAU,KAAM,EAAC,CAAE,CAAA,CAAC,CAAY,EAAA;AAAA,UAChE,GAAA,EAAK,CAAC,CAAM,KAAA;AACV,YAAM,MAAA,EAAA,GAAK,aAAa,CAAgB,CAAA;AACxC,YAAI,IAAA,OAAO,IAAI,YAAiB,KAAA,WAAA;AAC9B,cAAO,OAAA,EAAA;AAGT,YAAI,IAAA,EAAA,EAAI,aAAa,kCAAkC,CAAA;AACrD,cAAA,IAAA,CAAK,QAAQ,EAAG,CAAA,iBAAA;AAAA;AAEhB,cAAA,IAAA,CAAK,KAAQ,GAAA,EAAA;AAEf,YAAO,OAAA,EAAA;AAAA;AACT,SACD,CAAA;AAAA,OAEE,MAAA;AAAE,QAAO,OAAA,IAAA;AAAA;AAAK,KACrB;AAAA;AAEJ,CAAC,CAAA;;;;"}

package/dist/Presence/usePresence.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const vue = require('vue');
-const shared = require('@vueuse/shared');
 const core = require('@vueuse/core');
+const shared = require('@vueuse/shared');
+const vue = require('vue');
 const shared_useStateMachine = require('../shared/useStateMachine.cjs');
 
 function usePresence(present, node) {

package/dist/Presence/usePresence.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePresence.cjs","sources":["../../src/Presence/usePresence.ts"],"sourcesContent":["import { type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { useStateMachine } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { defaultWindow } from '@vueuse/core'\n\nexport function usePresence(\n  present: Ref<boolean>,\n  node: Ref<HTMLElement | undefined>,\n) {\n  const stylesRef = ref<CSSStyleDeclaration>({} as any)\n  const prevAnimationNameRef = ref<string>('none')\n  const prevPresentRef = ref(present)\n  const initialState = present.value ? 'mounted' : 'unmounted'\n  let timeoutId: number | undefined\n  const ownerWindow = node.value?.ownerDocument.defaultView ?? defaultWindow\n\n  const { state, dispatch } = useStateMachine(initialState, {\n    mounted: {\n      UNMOUNT: 'unmounted',\n      ANIMATION_OUT: 'unmountSuspended',\n    },\n    unmountSuspended: {\n      MOUNT: 'mounted',\n      ANIMATION_END: 'unmounted',\n    },\n    unmounted: {\n      MOUNT: 'mounted',\n    },\n  })\n\n  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {\n    // We only dispatch this event because CustomEvent is not available in Node18\n    // https://github.com/unovue/reka-ui/issues/930\n    if (isClient) {\n      const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })\n      node.value?.dispatchEvent(customEvent)\n    }\n  }\n\n  watch(\n    present,\n    async (currentPresent, prevPresent) => {\n      const hasPresentChanged = prevPresent !== currentPresent\n      await nextTick()\n      if (hasPresentChanged) {\n        const prevAnimationName = prevAnimationNameRef.value\n        const currentAnimationName = getAnimationName(node.value)\n\n        if (currentPresent) {\n          dispatch('MOUNT')\n          dispatchCustomEvent('enter')\n          if (currentAnimationName === 'none')\n            dispatchCustomEvent('after-enter')\n        }\n        else if (\n          currentAnimationName === 'none' || currentAnimationName === 'undefined'\n          || stylesRef.value?.display === 'none'\n        ) {\n          // If there is no exit animation or the element is hidden, animations won't run\n          // so we unmount instantly rv\n          dispatch('UNMOUNT')\n          dispatchCustomEvent('leave')\n          dispatchCustomEvent('after-leave')\n        }\n        else {\n          /**\n           * When `present` changes to `false`, we check changes to animation-name to\n           * determine whether an animation has started. We chose this approach (reading\n           * computed styles) because there is no `animationrun` event and `animationstart`\n           * fires after `animation-delay` has expired which would be too late.\n           */\n          const isAnimating = prevAnimationName !== currentAnimationName\n          if (prevPresent && isAnimating) {\n            dispatch('ANIMATION_OUT')\n            dispatchCustomEvent('leave')\n          }\n          else {\n            dispatch('UNMOUNT')\n            dispatchCustomEvent('after-leave')\n          }\n        }\n      }\n    },\n    { immediate: true },\n  )\n\n  /**\n   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n   * make sure we only trigger ANIMATION_END for the currently active animation.\n   */\n  const handleAnimationEnd = (event: AnimationEvent) => {\n    const currentAnimationName = getAnimationName(node.value)\n    const isCurrentAnimation = currentAnimationName.includes(\n      event.animationName,\n    )\n    const directionName = state.value === 'mounted' ? 'enter' : 'leave'\n    if (event.target === node.value && isCurrentAnimation) {\n      dispatchCustomEvent(`after-${directionName}`)\n      dispatch('ANIMATION_END')\n\n      if (!prevPresentRef.value) {\n        const currentFillMode = node.value.style.animationFillMode\n        node.value.style.animationFillMode = 'forwards'\n        // Reset the style after the node had time to unmount (for cases\n        // where the component chooses not to unmount). Doing this any\n        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n        // still causes a flash.\n        timeoutId = ownerWindow?.setTimeout(() => {\n          if (node.value?.style.animationFillMode === 'forwards') {\n            node.value.style.animationFillMode = currentFillMode\n          }\n        })\n      }\n    }\n    // if no animation, immediately trigger 'ANIMATION_END'\n    if (event.target === node.value && currentAnimationName === 'none')\n      dispatch('ANIMATION_END')\n  }\n  const handleAnimationStart = (event: AnimationEvent) => {\n    if (event.target === node.value) {\n      // if animation occurred, store its name as the previous animation.\n      prevAnimationNameRef.value = getAnimationName(node.value)\n    }\n  }\n\n  const watcher = watch(\n    node,\n    (newNode, oldNode) => {\n      if (newNode) {\n        stylesRef.value = getComputedStyle(newNode)\n        newNode.addEventListener('animationstart', handleAnimationStart)\n        newNode.addEventListener('animationcancel', handleAnimationEnd)\n        newNode.addEventListener('animationend', handleAnimationEnd)\n      }\n      else {\n        // Transition to the unmounted state if the node is removed prematurely.\n        // We avoid doing so during cleanup as the node may change but still exist.\n        dispatch('ANIMATION_END')\n\n        if (timeoutId !== undefined)\n          ownerWindow?.clearTimeout(timeoutId)\n        oldNode?.removeEventListener('animationstart', handleAnimationStart)\n        oldNode?.removeEventListener('animationcancel', handleAnimationEnd)\n        oldNode?.removeEventListener('animationend', handleAnimationEnd)\n      }\n    },\n    { immediate: true },\n  )\n\n  const stateWatcher = watch(state, () => {\n    const currentAnimationName = getAnimationName(node.value)\n    prevAnimationNameRef.value\n      = state.value === 'mounted' ? currentAnimationName : 'none'\n  })\n\n  onUnmounted(() => {\n    watcher()\n    stateWatcher()\n  })\n\n  const isPresent = computed(() =>\n    ['mounted', 'unmountSuspended'].includes(state.value),\n  )\n\n  return {\n    isPresent,\n  }\n}\n\nfunction getAnimationName(node?: HTMLElement) {\n  return node ? getComputedStyle(node).animationName || 'none' : 'none'\n}\n"],"names":["ref","defaultWindow","useStateMachine","isClient","watch","nextTick","onUnmounted","computed"],"mappings":"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"}
+{"version":3,"file":"usePresence.cjs","sources":["../../src/Presence/usePresence.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { defaultWindow } from '@vueuse/core'\nimport { isClient } from '@vueuse/shared'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { useStateMachine } from '@/shared'\n\nexport function usePresence(\n  present: Ref<boolean>,\n  node: Ref<HTMLElement | undefined>,\n) {\n  const stylesRef = ref<CSSStyleDeclaration>({} as any)\n  const prevAnimationNameRef = ref<string>('none')\n  const prevPresentRef = ref(present)\n  const initialState = present.value ? 'mounted' : 'unmounted'\n  let timeoutId: number | undefined\n  const ownerWindow = node.value?.ownerDocument.defaultView ?? defaultWindow\n\n  const { state, dispatch } = useStateMachine(initialState, {\n    mounted: {\n      UNMOUNT: 'unmounted',\n      ANIMATION_OUT: 'unmountSuspended',\n    },\n    unmountSuspended: {\n      MOUNT: 'mounted',\n      ANIMATION_END: 'unmounted',\n    },\n    unmounted: {\n      MOUNT: 'mounted',\n    },\n  })\n\n  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {\n    // We only dispatch this event because CustomEvent is not available in Node18\n    // https://github.com/unovue/reka-ui/issues/930\n    if (isClient) {\n      const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })\n      node.value?.dispatchEvent(customEvent)\n    }\n  }\n\n  watch(\n    present,\n    async (currentPresent, prevPresent) => {\n      const hasPresentChanged = prevPresent !== currentPresent\n      await nextTick()\n      if (hasPresentChanged) {\n        const prevAnimationName = prevAnimationNameRef.value\n        const currentAnimationName = getAnimationName(node.value)\n\n        if (currentPresent) {\n          dispatch('MOUNT')\n          dispatchCustomEvent('enter')\n          if (currentAnimationName === 'none')\n            dispatchCustomEvent('after-enter')\n        }\n        else if (\n          currentAnimationName === 'none' || currentAnimationName === 'undefined'\n          || stylesRef.value?.display === 'none'\n        ) {\n          // If there is no exit animation or the element is hidden, animations won't run\n          // so we unmount instantly rv\n          dispatch('UNMOUNT')\n          dispatchCustomEvent('leave')\n          dispatchCustomEvent('after-leave')\n        }\n        else {\n          /**\n           * When `present` changes to `false`, we check changes to animation-name to\n           * determine whether an animation has started. We chose this approach (reading\n           * computed styles) because there is no `animationrun` event and `animationstart`\n           * fires after `animation-delay` has expired which would be too late.\n           */\n          const isAnimating = prevAnimationName !== currentAnimationName\n          if (prevPresent && isAnimating) {\n            dispatch('ANIMATION_OUT')\n            dispatchCustomEvent('leave')\n          }\n          else {\n            dispatch('UNMOUNT')\n            dispatchCustomEvent('after-leave')\n          }\n        }\n      }\n    },\n    { immediate: true },\n  )\n\n  /**\n   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n   * make sure we only trigger ANIMATION_END for the currently active animation.\n   */\n  const handleAnimationEnd = (event: AnimationEvent) => {\n    const currentAnimationName = getAnimationName(node.value)\n    const isCurrentAnimation = currentAnimationName.includes(\n      event.animationName,\n    )\n    const directionName = state.value === 'mounted' ? 'enter' : 'leave'\n    if (event.target === node.value && isCurrentAnimation) {\n      dispatchCustomEvent(`after-${directionName}`)\n      dispatch('ANIMATION_END')\n\n      if (!prevPresentRef.value) {\n        const currentFillMode = node.value.style.animationFillMode\n        node.value.style.animationFillMode = 'forwards'\n        // Reset the style after the node had time to unmount (for cases\n        // where the component chooses not to unmount). Doing this any\n        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n        // still causes a flash.\n        timeoutId = ownerWindow?.setTimeout(() => {\n          if (node.value?.style.animationFillMode === 'forwards') {\n            node.value.style.animationFillMode = currentFillMode\n          }\n        })\n      }\n    }\n    // if no animation, immediately trigger 'ANIMATION_END'\n    if (event.target === node.value && currentAnimationName === 'none')\n      dispatch('ANIMATION_END')\n  }\n  const handleAnimationStart = (event: AnimationEvent) => {\n    if (event.target === node.value) {\n      // if animation occurred, store its name as the previous animation.\n      prevAnimationNameRef.value = getAnimationName(node.value)\n    }\n  }\n\n  const watcher = watch(\n    node,\n    (newNode, oldNode) => {\n      if (newNode) {\n        stylesRef.value = getComputedStyle(newNode)\n        newNode.addEventListener('animationstart', handleAnimationStart)\n        newNode.addEventListener('animationcancel', handleAnimationEnd)\n        newNode.addEventListener('animationend', handleAnimationEnd)\n      }\n      else {\n        // Transition to the unmounted state if the node is removed prematurely.\n        // We avoid doing so during cleanup as the node may change but still exist.\n        dispatch('ANIMATION_END')\n\n        if (timeoutId !== undefined)\n          ownerWindow?.clearTimeout(timeoutId)\n        oldNode?.removeEventListener('animationstart', handleAnimationStart)\n        oldNode?.removeEventListener('animationcancel', handleAnimationEnd)\n        oldNode?.removeEventListener('animationend', handleAnimationEnd)\n      }\n    },\n    { immediate: true },\n  )\n\n  const stateWatcher = watch(state, () => {\n    const currentAnimationName = getAnimationName(node.value)\n    prevAnimationNameRef.value\n      = state.value === 'mounted' ? currentAnimationName : 'none'\n  })\n\n  onUnmounted(() => {\n    watcher()\n    stateWatcher()\n  })\n\n  const isPresent = computed(() =>\n    ['mounted', 'unmountSuspended'].includes(state.value),\n  )\n\n  return {\n    isPresent,\n  }\n}\n\nfunction getAnimationName(node?: HTMLElement) {\n  return node ? getComputedStyle(node).animationName || 'none' : 'none'\n}\n"],"names":["ref","defaultWindow","useStateMachine","isClient","watch","nextTick","onUnmounted","computed"],"mappings":"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"}

package/dist/Presence/usePresence.js

@@ -1,6 +1,6 @@
-import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
-import { isClient } from '@vueuse/shared';
 import { defaultWindow } from '@vueuse/core';
+import { isClient } from '@vueuse/shared';
+import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
 import { u as useStateMachine } from '../shared/useStateMachine.js';
 
 function usePresence(present, node) {

package/dist/Presence/usePresence.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePresence.js","sources":["../../src/Presence/usePresence.ts"],"sourcesContent":["import { type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { useStateMachine } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { defaultWindow } from '@vueuse/core'\n\nexport function usePresence(\n  present: Ref<boolean>,\n  node: Ref<HTMLElement | undefined>,\n) {\n  const stylesRef = ref<CSSStyleDeclaration>({} as any)\n  const prevAnimationNameRef = ref<string>('none')\n  const prevPresentRef = ref(present)\n  const initialState = present.value ? 'mounted' : 'unmounted'\n  let timeoutId: number | undefined\n  const ownerWindow = node.value?.ownerDocument.defaultView ?? defaultWindow\n\n  const { state, dispatch } = useStateMachine(initialState, {\n    mounted: {\n      UNMOUNT: 'unmounted',\n      ANIMATION_OUT: 'unmountSuspended',\n    },\n    unmountSuspended: {\n      MOUNT: 'mounted',\n      ANIMATION_END: 'unmounted',\n    },\n    unmounted: {\n      MOUNT: 'mounted',\n    },\n  })\n\n  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {\n    // We only dispatch this event because CustomEvent is not available in Node18\n    // https://github.com/unovue/reka-ui/issues/930\n    if (isClient) {\n      const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })\n      node.value?.dispatchEvent(customEvent)\n    }\n  }\n\n  watch(\n    present,\n    async (currentPresent, prevPresent) => {\n      const hasPresentChanged = prevPresent !== currentPresent\n      await nextTick()\n      if (hasPresentChanged) {\n        const prevAnimationName = prevAnimationNameRef.value\n        const currentAnimationName = getAnimationName(node.value)\n\n        if (currentPresent) {\n          dispatch('MOUNT')\n          dispatchCustomEvent('enter')\n          if (currentAnimationName === 'none')\n            dispatchCustomEvent('after-enter')\n        }\n        else if (\n          currentAnimationName === 'none' || currentAnimationName === 'undefined'\n          || stylesRef.value?.display === 'none'\n        ) {\n          // If there is no exit animation or the element is hidden, animations won't run\n          // so we unmount instantly rv\n          dispatch('UNMOUNT')\n          dispatchCustomEvent('leave')\n          dispatchCustomEvent('after-leave')\n        }\n        else {\n          /**\n           * When `present` changes to `false`, we check changes to animation-name to\n           * determine whether an animation has started. We chose this approach (reading\n           * computed styles) because there is no `animationrun` event and `animationstart`\n           * fires after `animation-delay` has expired which would be too late.\n           */\n          const isAnimating = prevAnimationName !== currentAnimationName\n          if (prevPresent && isAnimating) {\n            dispatch('ANIMATION_OUT')\n            dispatchCustomEvent('leave')\n          }\n          else {\n            dispatch('UNMOUNT')\n            dispatchCustomEvent('after-leave')\n          }\n        }\n      }\n    },\n    { immediate: true },\n  )\n\n  /**\n   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n   * make sure we only trigger ANIMATION_END for the currently active animation.\n   */\n  const handleAnimationEnd = (event: AnimationEvent) => {\n    const currentAnimationName = getAnimationName(node.value)\n    const isCurrentAnimation = currentAnimationName.includes(\n      event.animationName,\n    )\n    const directionName = state.value === 'mounted' ? 'enter' : 'leave'\n    if (event.target === node.value && isCurrentAnimation) {\n      dispatchCustomEvent(`after-${directionName}`)\n      dispatch('ANIMATION_END')\n\n      if (!prevPresentRef.value) {\n        const currentFillMode = node.value.style.animationFillMode\n        node.value.style.animationFillMode = 'forwards'\n        // Reset the style after the node had time to unmount (for cases\n        // where the component chooses not to unmount). Doing this any\n        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n        // still causes a flash.\n        timeoutId = ownerWindow?.setTimeout(() => {\n          if (node.value?.style.animationFillMode === 'forwards') {\n            node.value.style.animationFillMode = currentFillMode\n          }\n        })\n      }\n    }\n    // if no animation, immediately trigger 'ANIMATION_END'\n    if (event.target === node.value && currentAnimationName === 'none')\n      dispatch('ANIMATION_END')\n  }\n  const handleAnimationStart = (event: AnimationEvent) => {\n    if (event.target === node.value) {\n      // if animation occurred, store its name as the previous animation.\n      prevAnimationNameRef.value = getAnimationName(node.value)\n    }\n  }\n\n  const watcher = watch(\n    node,\n    (newNode, oldNode) => {\n      if (newNode) {\n        stylesRef.value = getComputedStyle(newNode)\n        newNode.addEventListener('animationstart', handleAnimationStart)\n        newNode.addEventListener('animationcancel', handleAnimationEnd)\n        newNode.addEventListener('animationend', handleAnimationEnd)\n      }\n      else {\n        // Transition to the unmounted state if the node is removed prematurely.\n        // We avoid doing so during cleanup as the node may change but still exist.\n        dispatch('ANIMATION_END')\n\n        if (timeoutId !== undefined)\n          ownerWindow?.clearTimeout(timeoutId)\n        oldNode?.removeEventListener('animationstart', handleAnimationStart)\n        oldNode?.removeEventListener('animationcancel', handleAnimationEnd)\n        oldNode?.removeEventListener('animationend', handleAnimationEnd)\n      }\n    },\n    { immediate: true },\n  )\n\n  const stateWatcher = watch(state, () => {\n    const currentAnimationName = getAnimationName(node.value)\n    prevAnimationNameRef.value\n      = state.value === 'mounted' ? currentAnimationName : 'none'\n  })\n\n  onUnmounted(() => {\n    watcher()\n    stateWatcher()\n  })\n\n  const isPresent = computed(() =>\n    ['mounted', 'unmountSuspended'].includes(state.value),\n  )\n\n  return {\n    isPresent,\n  }\n}\n\nfunction getAnimationName(node?: HTMLElement) {\n  return node ? getComputedStyle(node).animationName || 'none' : 'none'\n}\n"],"names":[],"mappings":";;;;;AAKgB,SAAA,WAAA,CACd,SACA,IACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,GAAyB,CAAA,EAAS,CAAA;AACpD,EAAM,MAAA,oBAAA,GAAuB,IAAY,MAAM,CAAA;AAC/C,EAAM,MAAA,cAAA,GAAiB,IAAI,OAAO,CAAA;AAClC,EAAM,MAAA,YAAA,GAAe,OAAQ,CAAA,KAAA,GAAQ,SAAY,GAAA,WAAA;AACjD,EAAI,IAAA,SAAA;AACJ,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,KAAO,EAAA,aAAA,CAAc,WAAe,IAAA,aAAA;AAE7D,EAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,gBAAgB,YAAc,EAAA;AAAA,IACxD,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,WAAA;AAAA,MACT,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,KAAO,EAAA,SAAA;AAAA,MACP,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,SAAW,EAAA;AAAA,MACT,KAAO,EAAA;AAAA;AACT,GACD,CAAA;AAED,EAAM,MAAA,mBAAA,GAAsB,CAAC,IAA4D,KAAA;AAGvF,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,WAAA,GAAc,IAAI,WAAY,CAAA,IAAA,EAAM,EAAE,OAAS,EAAA,KAAA,EAAO,UAAY,EAAA,KAAA,EAAO,CAAA;AAC/E,MAAK,IAAA,CAAA,KAAA,EAAO,cAAc,WAAW,CAAA;AAAA;AACvC,GACF;AAEA,EAAA,KAAA;AAAA,IACE,OAAA;AAAA,IACA,OAAO,gBAAgB,WAAgB,KAAA;AACrC,MAAA,MAAM,oBAAoB,WAAgB,KAAA,cAAA;AAC1C,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,oBAAoB,oBAAqB,CAAA,KAAA;AAC/C,QAAM,MAAA,oBAAA,GAAuB,gBAAiB,CAAA,IAAA,CAAK,KAAK,CAAA;AAExD,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,QAAA,CAAS,OAAO,CAAA;AAChB,UAAA,mBAAA,CAAoB,OAAO,CAAA;AAC3B,UAAA,IAAI,oBAAyB,KAAA,MAAA;AAC3B,YAAA,mBAAA,CAAoB,aAAa,CAAA;AAAA,SACrC,MAAA,IAEE,yBAAyB,MAAU,IAAA,oBAAA,KAAyB,eACzD,SAAU,CAAA,KAAA,EAAO,YAAY,MAChC,EAAA;AAGA,UAAA,QAAA,CAAS,SAAS,CAAA;AAClB,UAAA,mBAAA,CAAoB,OAAO,CAAA;AAC3B,UAAA,mBAAA,CAAoB,aAAa,CAAA;AAAA,SAE9B,MAAA;AAOH,UAAA,MAAM,cAAc,iBAAsB,KAAA,oBAAA;AAC1C,UAAA,IAAI,eAAe,WAAa,EAAA;AAC9B,YAAA,QAAA,CAAS,eAAe,CAAA;AACxB,YAAA,mBAAA,CAAoB,OAAO,CAAA;AAAA,WAExB,MAAA;AACH,YAAA,QAAA,CAAS,SAAS,CAAA;AAClB,YAAA,mBAAA,CAAoB,aAAa,CAAA;AAAA;AACnC;AACF;AACF,KACF;AAAA,IACA,EAAE,WAAW,IAAK;AAAA,GACpB;AAOA,EAAM,MAAA,kBAAA,GAAqB,CAAC,KAA0B,KAAA;AACpD,IAAM,MAAA,oBAAA,GAAuB,gBAAiB,CAAA,IAAA,CAAK,KAAK,CAAA;AACxD,IAAA,MAAM,qBAAqB,oBAAqB,CAAA,QAAA;AAAA,MAC9C,KAAM,CAAA;AAAA,KACR;AACA,IAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,KAAU,KAAA,SAAA,GAAY,OAAU,GAAA,OAAA;AAC5D,IAAA,IAAI,KAAM,CAAA,MAAA,KAAW,IAAK,CAAA,KAAA,IAAS,kBAAoB,EAAA;AACrD,MAAoB,mBAAA,CAAA,CAAA,MAAA,EAAS,aAAa,CAAE,CAAA,CAAA;AAC5C,MAAA,QAAA,CAAS,eAAe,CAAA;AAExB,MAAI,IAAA,CAAC,eAAe,KAAO,EAAA;AACzB,QAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,KAAM,CAAA,iBAAA;AACzC,QAAK,IAAA,CAAA,KAAA,CAAM,MAAM,iBAAoB,GAAA,UAAA;AAKrC,QAAY,SAAA,GAAA,WAAA,EAAa,WAAW,MAAM;AACxC,UAAA,IAAI,IAAK,CAAA,KAAA,EAAO,KAAM,CAAA,iBAAA,KAAsB,UAAY,EAAA;AACtD,YAAK,IAAA,CAAA,KAAA,CAAM,MAAM,iBAAoB,GAAA,eAAA;AAAA;AACvC,SACD,CAAA;AAAA;AACH;AAGF,IAAA,IAAI,KAAM,CAAA,MAAA,KAAW,IAAK,CAAA,KAAA,IAAS,oBAAyB,KAAA,MAAA;AAC1D,MAAA,QAAA,CAAS,eAAe,CAAA;AAAA,GAC5B;AACA,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAA0B,KAAA;AACtD,IAAI,IAAA,KAAA,CAAM,MAAW,KAAA,IAAA,CAAK,KAAO,EAAA;AAE/B,MAAqB,oBAAA,CAAA,KAAA,GAAQ,gBAAiB,CAAA,IAAA,CAAK,KAAK,CAAA;AAAA;AAC1D,GACF;AAEA,EAAA,MAAM,OAAU,GAAA,KAAA;AAAA,IACd,IAAA;AAAA,IACA,CAAC,SAAS,OAAY,KAAA;AACpB,MAAA,IAAI,OAAS,EAAA;AACX,QAAU,SAAA,CAAA,KAAA,GAAQ,iBAAiB,OAAO,CAAA;AAC1C,QAAQ,OAAA,CAAA,gBAAA,CAAiB,kBAAkB,oBAAoB,CAAA;AAC/D,QAAQ,OAAA,CAAA,gBAAA,CAAiB,mBAAmB,kBAAkB,CAAA;AAC9D,QAAQ,OAAA,CAAA,gBAAA,CAAiB,gBAAgB,kBAAkB,CAAA;AAAA,OAExD,MAAA;AAGH,QAAA,QAAA,CAAS,eAAe,CAAA;AAExB,QAAA,IAAI,SAAc,KAAA,MAAA;AAChB,UAAA,WAAA,EAAa,aAAa,SAAS,CAAA;AACrC,QAAS,OAAA,EAAA,mBAAA,CAAoB,kBAAkB,oBAAoB,CAAA;AACnE,QAAS,OAAA,EAAA,mBAAA,CAAoB,mBAAmB,kBAAkB,CAAA;AAClE,QAAS,OAAA,EAAA,mBAAA,CAAoB,gBAAgB,kBAAkB,CAAA;AAAA;AACjE,KACF;AAAA,IACA,EAAE,WAAW,IAAK;AAAA,GACpB;AAEA,EAAM,MAAA,YAAA,GAAe,KAAM,CAAA,KAAA,EAAO,MAAM;AACtC,IAAM,MAAA,oBAAA,GAAuB,gBAAiB,CAAA,IAAA,CAAK,KAAK,CAAA;AACxD,IAAA,oBAAA,CAAqB,KACjB,GAAA,KAAA,CAAM,KAAU,KAAA,SAAA,GAAY,oBAAuB,GAAA,MAAA;AAAA,GACxD,CAAA;AAED,EAAA,WAAA,CAAY,MAAM;AAChB,IAAQ,OAAA,EAAA;AACR,IAAa,YAAA,EAAA;AAAA,GACd,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,QAAA;AAAA,IAAS,MACzB,CAAC,SAAA,EAAW,kBAAkB,CAAE,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,GACtD;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;AAEA,SAAS,iBAAiB,IAAoB,EAAA;AAC5C,EAAA,OAAO,IAAO,GAAA,gBAAA,CAAiB,IAAI,CAAA,CAAE,iBAAiB,MAAS,GAAA,MAAA;AACjE;;;;"}
+{"version":3,"file":"usePresence.js","sources":["../../src/Presence/usePresence.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { defaultWindow } from '@vueuse/core'\nimport { isClient } from '@vueuse/shared'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { useStateMachine } from '@/shared'\n\nexport function usePresence(\n  present: Ref<boolean>,\n  node: Ref<HTMLElement | undefined>,\n) {\n  const stylesRef = ref<CSSStyleDeclaration>({} as any)\n  const prevAnimationNameRef = ref<string>('none')\n  const prevPresentRef = ref(present)\n  const initialState = present.value ? 'mounted' : 'unmounted'\n  let timeoutId: number | undefined\n  const ownerWindow = node.value?.ownerDocument.defaultView ?? defaultWindow\n\n  const { state, dispatch } = useStateMachine(initialState, {\n    mounted: {\n      UNMOUNT: 'unmounted',\n      ANIMATION_OUT: 'unmountSuspended',\n    },\n    unmountSuspended: {\n      MOUNT: 'mounted',\n      ANIMATION_END: 'unmounted',\n    },\n    unmounted: {\n      MOUNT: 'mounted',\n    },\n  })\n\n  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {\n    // We only dispatch this event because CustomEvent is not available in Node18\n    // https://github.com/unovue/reka-ui/issues/930\n    if (isClient) {\n      const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })\n      node.value?.dispatchEvent(customEvent)\n    }\n  }\n\n  watch(\n    present,\n    async (currentPresent, prevPresent) => {\n      const hasPresentChanged = prevPresent !== currentPresent\n      await nextTick()\n      if (hasPresentChanged) {\n        const prevAnimationName = prevAnimationNameRef.value\n        const currentAnimationName = getAnimationName(node.value)\n\n        if (currentPresent) {\n          dispatch('MOUNT')\n          dispatchCustomEvent('enter')\n          if (currentAnimationName === 'none')\n            dispatchCustomEvent('after-enter')\n        }\n        else if (\n          currentAnimationName === 'none' || currentAnimationName === 'undefined'\n          || stylesRef.value?.display === 'none'\n        ) {\n          // If there is no exit animation or the element is hidden, animations won't run\n          // so we unmount instantly rv\n          dispatch('UNMOUNT')\n          dispatchCustomEvent('leave')\n          dispatchCustomEvent('after-leave')\n        }\n        else {\n          /**\n           * When `present` changes to `false`, we check changes to animation-name to\n           * determine whether an animation has started. We chose this approach (reading\n           * computed styles) because there is no `animationrun` event and `animationstart`\n           * fires after `animation-delay` has expired which would be too late.\n           */\n          const isAnimating = prevAnimationName !== currentAnimationName\n          if (prevPresent && isAnimating) {\n            dispatch('ANIMATION_OUT')\n            dispatchCustomEvent('leave')\n          }\n          else {\n            dispatch('UNMOUNT')\n            dispatchCustomEvent('after-leave')\n          }\n        }\n      }\n    },\n    { immediate: true },\n  )\n\n  /**\n   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n   * make sure we only trigger ANIMATION_END for the currently active animation.\n   */\n  const handleAnimationEnd = (event: AnimationEvent) => {\n    const currentAnimationName = getAnimationName(node.value)\n    const isCurrentAnimation = currentAnimationName.includes(\n      event.animationName,\n    )\n    const directionName = state.value === 'mounted' ? 'enter' : 'leave'\n    if (event.target === node.value && isCurrentAnimation) {\n      dispatchCustomEvent(`after-${directionName}`)\n      dispatch('ANIMATION_END')\n\n      if (!prevPresentRef.value) {\n        const currentFillMode = node.value.style.animationFillMode\n        node.value.style.animationFillMode = 'forwards'\n        // Reset the style after the node had time to unmount (for cases\n        // where the component chooses not to unmount). Doing this any\n        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n        // still causes a flash.\n        timeoutId = ownerWindow?.setTimeout(() => {\n          if (node.value?.style.animationFillMode === 'forwards') {\n            node.value.style.animationFillMode = currentFillMode\n          }\n        })\n      }\n    }\n    // if no animation, immediately trigger 'ANIMATION_END'\n    if (event.target === node.value && currentAnimationName === 'none')\n      dispatch('ANIMATION_END')\n  }\n  const handleAnimationStart = (event: AnimationEvent) => {\n    if (event.target === node.value) {\n      // if animation occurred, store its name as the previous animation.\n      prevAnimationNameRef.value = getAnimationName(node.value)\n    }\n  }\n\n  const watcher = watch(\n    node,\n    (newNode, oldNode) => {\n      if (newNode) {\n        stylesRef.value = getComputedStyle(newNode)\n        newNode.addEventListener('animationstart', handleAnimationStart)\n        newNode.addEventListener('animationcancel', handleAnimationEnd)\n        newNode.addEventListener('animationend', handleAnimationEnd)\n      }\n      else {\n        // Transition to the unmounted state if the node is removed prematurely.\n        // We avoid doing so during cleanup as the node may change but still exist.\n        dispatch('ANIMATION_END')\n\n        if (timeoutId !== undefined)\n          ownerWindow?.clearTimeout(timeoutId)\n        oldNode?.removeEventListener('animationstart', handleAnimationStart)\n        oldNode?.removeEventListener('animationcancel', handleAnimationEnd)\n        oldNode?.removeEventListener('animationend', handleAnimationEnd)\n      }\n    },\n    { immediate: true },\n  )\n\n  const stateWatcher = watch(state, () => {\n    const currentAnimationName = getAnimationName(node.value)\n    prevAnimationNameRef.value\n      = state.value === 'mounted' ? currentAnimationName : 'none'\n  })\n\n  onUnmounted(() => {\n    watcher()\n    stateWatcher()\n  })\n\n  const isPresent = computed(() =>\n    ['mounted', 'unmountSuspended'].includes(state.value),\n  )\n\n  return {\n    isPresent,\n  }\n}\n\nfunction getAnimationName(node?: HTMLElement) {\n  return node ? getComputedStyle(node).animationName || 'none' : 'none'\n}\n"],"names":[],"mappings":"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"}

package/dist/Primitive/Primitive.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.cjs","sources":["../../src/Primitive/Primitive.ts"],"sourcesContent":["import { type Component, type PropType, defineComponent, h } from 'vue'\nimport { Slot } from './Slot'\n\nexport type AsTag =\n  | 'a'\n  | 'button'\n  | 'div'\n  | 'form'\n  | 'h2'\n  | 'h3'\n  | 'img'\n  | 'input'\n  | 'label'\n  | 'li'\n  | 'nav'\n  | 'ol'\n  | 'p'\n  | 'span'\n  | 'svg'\n  | 'ul'\n  | 'template'\n  | ({} & string) // any other string\n\nexport interface PrimitiveProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.\n   */\n  asChild?: boolean\n  /**\n   * The element or component this component should render as. Can be overwritten by `asChild`.\n   * @defaultValue \"div\"\n   */\n  as?: AsTag | Component\n}\n\n// For self closing tags, don't provide default slots because of hydration issue\nconst SELF_CLOSING_TAGS = ['area', 'img', 'input']\n\nexport const Primitive = defineComponent({\n  name: 'Primitive',\n  inheritAttrs: false,\n  props: {\n    asChild: {\n      type: Boolean,\n      default: false,\n    },\n    as: {\n      type: [String, Object] as PropType<AsTag | Component>,\n      default: 'div',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const asTag = props.asChild ? 'template' : props.as\n    \n    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))\n      return () => h(asTag, attrs)\n\n    if (asTag !== 'template')\n      return () => h(props.as, attrs, { default: slots.default })\n\n    return () => h(Slot, attrs, { default: slots.default })\n  },\n})\n"],"names":["defineComponent","h","Slot"],"mappings":";;;;;AAsCA,MAAM,iBAAoB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,OAAO,CAAA;AAE1C,MAAM,YAAYA,mBAAgB,CAAA;AAAA,EACvC,IAAM,EAAA,WAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACX;AAAA,IACA,EAAI,EAAA;AAAA,MACF,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,MACrB,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAS,EAAA;AAC7B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,UAAA,GAAa,KAAM,CAAA,EAAA;AAEjD,IAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,iBAAA,CAAkB,SAAS,KAAK,CAAA;AAC/D,MAAO,OAAA,MAAMC,KAAE,CAAA,KAAA,EAAO,KAAK,CAAA;AAE7B,IAAA,IAAI,KAAU,KAAA,UAAA;AACZ,MAAO,OAAA,MAAMA,MAAE,KAAM,CAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,KAAM,CAAA,OAAA,EAAS,CAAA;AAE5D,IAAO,OAAA,MAAMA,MAAEC,mBAAM,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA;AAE1D,CAAC;;;;"}
+{"version":3,"file":"Primitive.cjs","sources":["../../src/Primitive/Primitive.ts"],"sourcesContent":["import type { Component, PropType } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { Slot } from './Slot'\n\nexport type AsTag =\n  | 'a'\n  | 'button'\n  | 'div'\n  | 'form'\n  | 'h2'\n  | 'h3'\n  | 'img'\n  | 'input'\n  | 'label'\n  | 'li'\n  | 'nav'\n  | 'ol'\n  | 'p'\n  | 'span'\n  | 'svg'\n  | 'ul'\n  | 'template'\n  | ({} & string) // any other string\n\nexport interface PrimitiveProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.\n   */\n  asChild?: boolean\n  /**\n   * The element or component this component should render as. Can be overwritten by `asChild`.\n   * @defaultValue \"div\"\n   */\n  as?: AsTag | Component\n}\n\n// For self closing tags, don't provide default slots because of hydration issue\nconst SELF_CLOSING_TAGS = ['area', 'img', 'input']\n\nexport const Primitive = defineComponent({\n  name: 'Primitive',\n  inheritAttrs: false,\n  props: {\n    asChild: {\n      type: Boolean,\n      default: false,\n    },\n    as: {\n      type: [String, Object] as PropType<AsTag | Component>,\n      default: 'div',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const asTag = props.asChild ? 'template' : props.as\n\n    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))\n      return () => h(asTag, attrs)\n\n    if (asTag !== 'template')\n      return () => h(props.as, attrs, { default: slots.default })\n\n    return () => h(Slot, attrs, { default: slots.default })\n  },\n})\n"],"names":["defineComponent","h","Slot"],"mappings":";;;;;AAuCA,MAAM,iBAAoB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,OAAO,CAAA;AAE1C,MAAM,YAAYA,mBAAgB,CAAA;AAAA,EACvC,IAAM,EAAA,WAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACX;AAAA,IACA,EAAI,EAAA;AAAA,MACF,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,MACrB,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAS,EAAA;AAC7B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,UAAA,GAAa,KAAM,CAAA,EAAA;AAEjD,IAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,iBAAA,CAAkB,SAAS,KAAK,CAAA;AAC/D,MAAO,OAAA,MAAMC,KAAE,CAAA,KAAA,EAAO,KAAK,CAAA;AAE7B,IAAA,IAAI,KAAU,KAAA,UAAA;AACZ,MAAO,OAAA,MAAMA,MAAE,KAAM,CAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,KAAM,CAAA,OAAA,EAAS,CAAA;AAE5D,IAAO,OAAA,MAAMA,MAAEC,mBAAM,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA;AAE1D,CAAC;;;;"}

package/dist/Primitive/Primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.js","sources":["../../src/Primitive/Primitive.ts"],"sourcesContent":["import { type Component, type PropType, defineComponent, h } from 'vue'\nimport { Slot } from './Slot'\n\nexport type AsTag =\n  | 'a'\n  | 'button'\n  | 'div'\n  | 'form'\n  | 'h2'\n  | 'h3'\n  | 'img'\n  | 'input'\n  | 'label'\n  | 'li'\n  | 'nav'\n  | 'ol'\n  | 'p'\n  | 'span'\n  | 'svg'\n  | 'ul'\n  | 'template'\n  | ({} & string) // any other string\n\nexport interface PrimitiveProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.\n   */\n  asChild?: boolean\n  /**\n   * The element or component this component should render as. Can be overwritten by `asChild`.\n   * @defaultValue \"div\"\n   */\n  as?: AsTag | Component\n}\n\n// For self closing tags, don't provide default slots because of hydration issue\nconst SELF_CLOSING_TAGS = ['area', 'img', 'input']\n\nexport const Primitive = defineComponent({\n  name: 'Primitive',\n  inheritAttrs: false,\n  props: {\n    asChild: {\n      type: Boolean,\n      default: false,\n    },\n    as: {\n      type: [String, Object] as PropType<AsTag | Component>,\n      default: 'div',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const asTag = props.asChild ? 'template' : props.as\n    \n    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))\n      return () => h(asTag, attrs)\n\n    if (asTag !== 'template')\n      return () => h(props.as, attrs, { default: slots.default })\n\n    return () => h(Slot, attrs, { default: slots.default })\n  },\n})\n"],"names":[],"mappings":";;;AAsCA,MAAM,iBAAoB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,OAAO,CAAA;AAE1C,MAAM,YAAY,eAAgB,CAAA;AAAA,EACvC,IAAM,EAAA,WAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACX;AAAA,IACA,EAAI,EAAA;AAAA,MACF,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,MACrB,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAS,EAAA;AAC7B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,UAAA,GAAa,KAAM,CAAA,EAAA;AAEjD,IAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,iBAAA,CAAkB,SAAS,KAAK,CAAA;AAC/D,MAAO,OAAA,MAAM,CAAE,CAAA,KAAA,EAAO,KAAK,CAAA;AAE7B,IAAA,IAAI,KAAU,KAAA,UAAA;AACZ,MAAO,OAAA,MAAM,EAAE,KAAM,CAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,KAAM,CAAA,OAAA,EAAS,CAAA;AAE5D,IAAO,OAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA;AAE1D,CAAC;;;;"}
+{"version":3,"file":"Primitive.js","sources":["../../src/Primitive/Primitive.ts"],"sourcesContent":["import type { Component, PropType } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { Slot } from './Slot'\n\nexport type AsTag =\n  | 'a'\n  | 'button'\n  | 'div'\n  | 'form'\n  | 'h2'\n  | 'h3'\n  | 'img'\n  | 'input'\n  | 'label'\n  | 'li'\n  | 'nav'\n  | 'ol'\n  | 'p'\n  | 'span'\n  | 'svg'\n  | 'ul'\n  | 'template'\n  | ({} & string) // any other string\n\nexport interface PrimitiveProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.\n   */\n  asChild?: boolean\n  /**\n   * The element or component this component should render as. Can be overwritten by `asChild`.\n   * @defaultValue \"div\"\n   */\n  as?: AsTag | Component\n}\n\n// For self closing tags, don't provide default slots because of hydration issue\nconst SELF_CLOSING_TAGS = ['area', 'img', 'input']\n\nexport const Primitive = defineComponent({\n  name: 'Primitive',\n  inheritAttrs: false,\n  props: {\n    asChild: {\n      type: Boolean,\n      default: false,\n    },\n    as: {\n      type: [String, Object] as PropType<AsTag | Component>,\n      default: 'div',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const asTag = props.asChild ? 'template' : props.as\n\n    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))\n      return () => h(asTag, attrs)\n\n    if (asTag !== 'template')\n      return () => h(props.as, attrs, { default: slots.default })\n\n    return () => h(Slot, attrs, { default: slots.default })\n  },\n})\n"],"names":[],"mappings":";;;AAuCA,MAAM,iBAAoB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,OAAO,CAAA;AAE1C,MAAM,YAAY,eAAgB,CAAA;AAAA,EACvC,IAAM,EAAA,WAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA;AAAA,IACL,OAAS,EAAA;AAAA,MACP,IAAM,EAAA,OAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACX;AAAA,IACA,EAAI,EAAA;AAAA,MACF,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,MACrB,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,KAAM,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAS,EAAA;AAC7B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,UAAA,GAAa,KAAM,CAAA,EAAA;AAEjD,IAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,iBAAA,CAAkB,SAAS,KAAK,CAAA;AAC/D,MAAO,OAAA,MAAM,CAAE,CAAA,KAAA,EAAO,KAAK,CAAA;AAE7B,IAAA,IAAI,KAAU,KAAA,UAAA;AACZ,MAAO,OAAA,MAAM,EAAE,KAAM,CAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,KAAM,CAAA,OAAA,EAAS,CAAA;AAE5D,IAAO,OAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA;AAE1D,CAAC;;;;"}

package/dist/Primitive/Slot.cjs

@@ -17,15 +17,7 @@ const Slot = vue.defineComponent({
       const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
       delete firstNonCommentChildren.props?.ref;
       const mergedProps = firstNonCommentChildren.props ? vue.mergeProps(attrs, firstNonCommentChildren.props) : attrs;
-      if (attrs.class && firstNonCommentChildren.props?.class)
-        delete firstNonCommentChildren.props.class;
-      const cloned = vue.cloneVNode(firstNonCommentChildren, mergedProps);
-      for (const prop in mergedProps) {
-        if (prop.startsWith("on")) {
-          cloned.props ||= {};
-          cloned.props[prop] = mergedProps[prop];
-        }
-      }
+      const cloned = vue.cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps);
       if (childrens.length === 1)
         return cloned;
       childrens[firstNonCommentChildrenIndex] = cloned;

package/dist/Primitive/Slot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.cjs","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { Comment, cloneVNode, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      // Remove class to prevent duplicated\n      if (attrs.class && firstNonCommentChildren.props?.class)\n        delete firstNonCommentChildren.props.class\n      const cloned = cloneVNode(firstNonCommentChildren, mergedProps)\n\n      // Explicitly override props starting with `on`.\n      // It seems cloneVNode from Vue doesn't like overriding `onXXX` props.\n      // So we have to do it manually.\n      for (const prop in mergedProps) {\n        if (prop.startsWith('on')) {\n          cloned.props ||= {}\n          cloned.props[prop] = mergedProps[prop]\n        }\n      }\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":["defineComponent","renderSlotFragments","Comment","mergeProps","cloneVNode"],"mappings":";;;;;AAGO,MAAM,OAAOA,mBAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAAC,8CAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAASC,WAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAEtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxCC,eAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AAEJ,MAAI,IAAA,KAAA,CAAM,KAAS,IAAA,uBAAA,CAAwB,KAAO,EAAA,KAAA;AAChD,QAAA,OAAO,wBAAwB,KAAM,CAAA,KAAA;AACvC,MAAM,MAAA,MAAA,GAASC,cAAW,CAAA,uBAAA,EAAyB,WAAW,CAAA;AAK9D,MAAA,KAAA,MAAW,QAAQ,WAAa,EAAA;AAC9B,QAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,UAAA,MAAA,CAAO,UAAU,EAAC;AAClB,UAAA,MAAA,CAAO,KAAM,CAAA,IAAI,CAAI,GAAA,WAAA,CAAY,IAAI,CAAA;AAAA;AACvC;AAGF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Slot.cjs","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":["defineComponent","renderSlotFragments","Comment","mergeProps","cloneVNode"],"mappings":";;;;;AAGO,MAAM,OAAOA,mBAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAAC,8CAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAASC,WAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxCC,eAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAASC,eAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}

package/dist/Primitive/Slot.js

@@ -15,15 +15,7 @@ const Slot = defineComponent({
       const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
       delete firstNonCommentChildren.props?.ref;
       const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
-      if (attrs.class && firstNonCommentChildren.props?.class)
-        delete firstNonCommentChildren.props.class;
-      const cloned = cloneVNode(firstNonCommentChildren, mergedProps);
-      for (const prop in mergedProps) {
-        if (prop.startsWith("on")) {
-          cloned.props ||= {};
-          cloned.props[prop] = mergedProps[prop];
-        }
-      }
+      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps);
       if (childrens.length === 1)
         return cloned;
       childrens[firstNonCommentChildrenIndex] = cloned;

package/dist/Primitive/Slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.js","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { Comment, cloneVNode, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      // Remove class to prevent duplicated\n      if (attrs.class && firstNonCommentChildren.props?.class)\n        delete firstNonCommentChildren.props.class\n      const cloned = cloneVNode(firstNonCommentChildren, mergedProps)\n\n      // Explicitly override props starting with `on`.\n      // It seems cloneVNode from Vue doesn't like overriding `onXXX` props.\n      // So we have to do it manually.\n      for (const prop in mergedProps) {\n        if (prop.startsWith('on')) {\n          cloned.props ||= {}\n          cloned.props[prop] = mergedProps[prop]\n        }\n      }\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,eAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAA,mBAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAAS,OAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAEtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxC,WAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AAEJ,MAAI,IAAA,KAAA,CAAM,KAAS,IAAA,uBAAA,CAAwB,KAAO,EAAA,KAAA;AAChD,QAAA,OAAO,wBAAwB,KAAM,CAAA,KAAA;AACvC,MAAM,MAAA,MAAA,GAAS,UAAW,CAAA,uBAAA,EAAyB,WAAW,CAAA;AAK9D,MAAA,KAAA,MAAW,QAAQ,WAAa,EAAA;AAC9B,QAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,UAAA,MAAA,CAAO,UAAU,EAAC;AAClB,UAAA,MAAA,CAAO,KAAM,CAAA,IAAI,CAAI,GAAA,WAAA,CAAY,IAAI,CAAA;AAAA;AACvC;AAGF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Slot.js","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,eAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAA,mBAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAAS,OAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxC,WAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAAS,WAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}

package/dist/Primitive/usePrimitiveElement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePrimitiveElement.cjs","sources":["../../src/Primitive/usePrimitiveElement.ts"],"sourcesContent":["import { unrefElement } from '@vueuse/core'\nimport { type ComponentPublicInstance, computed, ref } from 'vue'\n\nexport function usePrimitiveElement<T extends ComponentPublicInstance>() {\n  const primitiveElement = ref<T>()\n  const currentElement = computed<HTMLElement>(() => ['#text', '#comment'].includes(primitiveElement.value?.$el.nodeName) ? primitiveElement.value?.$el.nextElementSibling : unrefElement(primitiveElement))\n\n  return {\n    primitiveElement,\n    currentElement,\n  }\n}\n"],"names":["ref","computed","unrefElement"],"mappings":";;;;;AAGO,SAAS,mBAAyD,GAAA;AACvE,EAAA,MAAM,mBAAmBA,OAAO,EAAA;AAChC,EAAA,MAAM,iBAAiBC,YAAsB,CAAA,MAAM,CAAC,OAAS,EAAA,UAAU,EAAE,QAAS,CAAA,gBAAA,CAAiB,OAAO,GAAI,CAAA,QAAQ,IAAI,gBAAiB,CAAA,KAAA,EAAO,IAAI,kBAAqB,GAAAC,iBAAA,CAAa,gBAAgB,CAAC,CAAA;AAEzM,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"usePrimitiveElement.cjs","sources":["../../src/Primitive/usePrimitiveElement.ts"],"sourcesContent":["import type { ComponentPublicInstance } from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nexport function usePrimitiveElement<T extends ComponentPublicInstance>() {\n  const primitiveElement = ref<T>()\n  const currentElement = computed<HTMLElement>(() => ['#text', '#comment'].includes(primitiveElement.value?.$el.nodeName) ? primitiveElement.value?.$el.nextElementSibling : unrefElement(primitiveElement))\n\n  return {\n    primitiveElement,\n    currentElement,\n  }\n}\n"],"names":["ref","computed","unrefElement"],"mappings":";;;;;AAIO,SAAS,mBAAyD,GAAA;AACvE,EAAA,MAAM,mBAAmBA,OAAO,EAAA;AAChC,EAAA,MAAM,iBAAiBC,YAAsB,CAAA,MAAM,CAAC,OAAS,EAAA,UAAU,EAAE,QAAS,CAAA,gBAAA,CAAiB,OAAO,GAAI,CAAA,QAAQ,IAAI,gBAAiB,CAAA,KAAA,EAAO,IAAI,kBAAqB,GAAAC,iBAAA,CAAa,gBAAgB,CAAC,CAAA;AAEzM,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/Primitive/usePrimitiveElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrimitiveElement.js","sources":["../../src/Primitive/usePrimitiveElement.ts"],"sourcesContent":["import { unrefElement } from '@vueuse/core'\nimport { type ComponentPublicInstance, computed, ref } from 'vue'\n\nexport function usePrimitiveElement<T extends ComponentPublicInstance>() {\n  const primitiveElement = ref<T>()\n  const currentElement = computed<HTMLElement>(() => ['#text', '#comment'].includes(primitiveElement.value?.$el.nodeName) ? primitiveElement.value?.$el.nextElementSibling : unrefElement(primitiveElement))\n\n  return {\n    primitiveElement,\n    currentElement,\n  }\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAyD,GAAA;AACvE,EAAA,MAAM,mBAAmB,GAAO,EAAA;AAChC,EAAA,MAAM,iBAAiB,QAAsB,CAAA,MAAM,CAAC,OAAS,EAAA,UAAU,EAAE,QAAS,CAAA,gBAAA,CAAiB,OAAO,GAAI,CAAA,QAAQ,IAAI,gBAAiB,CAAA,KAAA,EAAO,IAAI,kBAAqB,GAAA,YAAA,CAAa,gBAAgB,CAAC,CAAA;AAEzM,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"usePrimitiveElement.js","sources":["../../src/Primitive/usePrimitiveElement.ts"],"sourcesContent":["import type { ComponentPublicInstance } from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nexport function usePrimitiveElement<T extends ComponentPublicInstance>() {\n  const primitiveElement = ref<T>()\n  const currentElement = computed<HTMLElement>(() => ['#text', '#comment'].includes(primitiveElement.value?.$el.nodeName) ? primitiveElement.value?.$el.nextElementSibling : unrefElement(primitiveElement))\n\n  return {\n    primitiveElement,\n    currentElement,\n  }\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,mBAAyD,GAAA;AACvE,EAAA,MAAM,mBAAmB,GAAO,EAAA;AAChC,EAAA,MAAM,iBAAiB,QAAsB,CAAA,MAAM,CAAC,OAAS,EAAA,UAAU,EAAE,QAAS,CAAA,gBAAA,CAAiB,OAAO,GAAI,CAAA,QAAQ,IAAI,gBAAiB,CAAA,KAAA,EAAO,IAAI,kBAAqB,GAAA,YAAA,CAAa,gBAAgB,CAAC,CAAA;AAEzM,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/Progress/ProgressIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.cjs","sources":["../../src/Progress/ProgressIndicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ProgressIndicatorProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectProgressRootContext } from './ProgressRoot.vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = defineProps<ProgressIndicatorProps>()\n\nconst rootContext = injectProgressRootContext()\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :data-state=\"rootContext.progressState.value\"\n    :data-value=\"rootContext.modelValue?.value ?? undefined\"\n    :data-max=\"rootContext.max.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectProgressRootContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAC9C,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProgressIndicator.cjs","sources":["../../src/Progress/ProgressIndicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ProgressIndicatorProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectProgressRootContext } from './ProgressRoot.vue'\n\nconst props = defineProps<ProgressIndicatorProps>()\n\nconst rootContext = injectProgressRootContext()\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :data-state=\"rootContext.progressState.value\"\n    :data-value=\"rootContext.modelValue?.value ?? undefined\"\n    :data-max=\"rootContext.max.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectProgressRootContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAC9C,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/Progress/ProgressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.js","sources":["../../src/Progress/ProgressIndicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ProgressIndicatorProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectProgressRootContext } from './ProgressRoot.vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = defineProps<ProgressIndicatorProps>()\n\nconst rootContext = injectProgressRootContext()\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :data-state=\"rootContext.progressState.value\"\n    :data-value=\"rootContext.modelValue?.value ?? undefined\"\n    :data-max=\"rootContext.max.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProgressIndicator.js","sources":["../../src/Progress/ProgressIndicator.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ProgressIndicatorProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectProgressRootContext } from './ProgressRoot.vue'\n\nconst props = defineProps<ProgressIndicatorProps>()\n\nconst rootContext = injectProgressRootContext()\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :data-state=\"rootContext.progressState.value\"\n    :data-value=\"rootContext.modelValue?.value ?? undefined\"\n    :data-max=\"rootContext.max.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/Progress/ProgressRoot.cjs

@@ -36,7 +36,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: {
     modelValue: {},
     max: { default: DEFAULT_MAX },
-    getValueLabel: { type: Function, default: (value, max) => `${Math.round(value / max * DEFAULT_MAX)}%` },
+    getValueLabel: { type: Function, default: (value, max) => isNumber(value) ? `${Math.round(value / max * DEFAULT_MAX)}%` : void 0 },
+    getValueText: {},
     asChild: { type: Boolean },
     as: {}
   },
@@ -90,7 +91,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "aria-valuemax": vue.unref(max),
         "aria-valuemin": 0,
         "aria-valuenow": isNumber(vue.unref(modelValue)) ? vue.unref(modelValue) : void 0,
-        "aria-valuetext": _ctx.getValueLabel(vue.unref(modelValue), vue.unref(max)),
+        "aria-valuetext": _ctx.getValueText?.(vue.unref(modelValue), vue.unref(max)),
         "aria-label": _ctx.getValueLabel(vue.unref(modelValue), vue.unref(max)),
         role: "progressbar",
         "data-state": progressState.value,

package/dist/Progress/ProgressRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRoot.cjs","sources":["../../src/Progress/ProgressRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, isNullish, useForwardExpose } from '@/shared'\n\nexport type ProgressRootEmits = {\n  /** Event handler called when the progress value changes */\n  'update:modelValue': [value: string[] | undefined]\n  /** Event handler called when the max value changes */\n  'update:max': [value: number]\n}\n\nexport interface ProgressRootProps extends PrimitiveProps {\n  /** The progress value. Can be bind as `v-model`. */\n  modelValue?: number | null\n  /** The maximum progress value. */\n  max?: number\n  /**\n   * A function to get the accessible label text representing the current value in a human-readable format.\n   *\n   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.\n   */\n  getValueLabel?: (value: number, max: number) => string\n}\n\nconst DEFAULT_MAX = 100\n\ninterface ProgressRootContext {\n  modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>\n  max: Readonly<Ref<number>>\n  progressState: ComputedRef<ProgressState>\n}\n\nexport const [injectProgressRootContext, provideProgressRootContext]\n  = createContext<ProgressRootContext>('ProgressRoot')\n\nexport type ProgressState = 'indeterminate' | 'loading' | 'complete'\n\nconst isNumber = (v: any): v is number => typeof v === 'number'\n\nfunction validateValue(value: any, max: number): number | null {\n  const isValidValueError\n    = isNullish(value)\n    || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0)\n\n  if (isValidValueError)\n    return value as null\n\n  console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\`  or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`)\n  return null\n}\n\nfunction validateMax(max: number): number {\n  const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0\n\n  if (isValidMaxError)\n    return max\n\n  console.error(\n    `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`,\n  )\n  return DEFAULT_MAX\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, nextTick, watch } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ProgressRootProps>(), {\n  max: DEFAULT_MAX,\n  getValueLabel: (value: number, max: number) =>\n    `${Math.round((value / max) * DEFAULT_MAX)}%`,\n})\n\nconst emit = defineEmits<ProgressRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst modelValue = useVModel(props, 'modelValue', emit, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst max = useVModel(props, 'max', emit, {\n  passive: (props.max === undefined) as false,\n})\n\n// ------- Watch for correct values -------\nwatch(\n  () => modelValue.value,\n  async (value) => {\n    const correctedValue = validateValue(value, props.max)\n    if (correctedValue !== value) {\n      await nextTick()\n      modelValue.value = correctedValue\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.max,\n  (newMax) => {\n    const correctedMax = validateMax(props.max)\n    if (correctedMax !== newMax)\n      max.value = correctedMax\n  },\n  { immediate: true },\n)\n// ------- End of watch for correct values -------\n\nconst progressState = computed<ProgressState>(() => {\n  if (isNullish(modelValue.value))\n    return 'indeterminate'\n  if (modelValue.value === max.value)\n    return 'complete'\n  return 'loading'\n})\n\nprovideProgressRootContext({\n  modelValue,\n  max,\n  progressState,\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :aria-valuemax=\"max\"\n    :aria-valuemin=\"0\"\n    :aria-valuenow=\"isNumber(modelValue) ? modelValue : undefined\"\n    :aria-valuetext=\"getValueLabel(modelValue!, max)\"\n    :aria-label=\"getValueLabel(modelValue!, max)\"\n    role=\"progressbar\"\n    :data-state=\"progressState\"\n    :data-value=\"modelValue ?? undefined\"\n    :data-max=\"max\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["createContext","isNullish","useForwardExpose","useVModel","watch","nextTick","computed"],"mappings":";;;;;;;;;AAyBA,MAAM,WAAc,GAAA,GAAA;AAQb,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAmC,cAAc;AAIrD,MAAM,QAAW,GAAA,CAAC,CAAwB,KAAA,OAAO,CAAM,KAAA,QAAA;AAEvD,SAAS,aAAA,CAAc,OAAY,GAA4B,EAAA;AAC7D,EAAA,MAAM,iBACF,GAAAC,wBAAA,CAAU,KAAK,CAAA,IACb,SAAS,KAAK,CAAA,IAAK,CAAC,MAAA,CAAO,KAAM,CAAA,KAAK,CAAK,IAAA,KAAA,IAAS,OAAO,KAAS,IAAA,CAAA;AAE1E,EAAI,IAAA,iBAAA;AACF,IAAO,OAAA,KAAA;AAET,EAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AAAA;AAAA,8CAAA,EAEV,WAAW,CAAA;AAAA;;AAAA,uBAGnC,CAAA,CAAA;AACtB,EAAO,OAAA,IAAA;AACT;AAEA,SAAS,YAAY,GAAqB,EAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,SAAS,GAAG,CAAA,IAAK,CAAC,MAAO,CAAA,KAAA,CAAM,GAAG,CAAA,IAAK,GAAM,GAAA,CAAA;AAErE,EAAI,IAAA,eAAA;AACF,IAAO,OAAA,GAAA;AAET,EAAQ,OAAA,CAAA,KAAA;AAAA,IACN,CAAA,gCAAA,EAAmC,GAAG,CAAA,mGAAA,EAAsG,WAAW,CAAA,GAAA;AAAA,GACzJ;AACA,EAAO,OAAA,WAAA;AACT;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,IAAM,EAAA;AAAA,MACtD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,GAAM,GAAAA,cAAA,CAAU,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA;AAAA,MACxC,OAAA,EAAU,MAAM,GAAQ,KAAA;AAAA,KACzB,CAAA;AAGD,IAAAC,SAAA;AAAA,MACE,MAAM,UAAW,CAAA,KAAA;AAAA,MACjB,OAAO,KAAU,KAAA;AACf,QAAA,MAAM,cAAiB,GAAA,aAAA,CAAc,KAAO,EAAA,KAAA,CAAM,GAAG,CAAA;AACrD,QAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,UAAA,MAAMC,YAAS,EAAA;AACf,UAAA,UAAA,CAAW,KAAQ,GAAA,cAAA;AAAA;AACrB,OACF;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAEA,IAAAD,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,GAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAM,MAAA,YAAA,GAAe,WAAY,CAAA,KAAA,CAAM,GAAG,CAAA;AAC1C,QAAA,IAAI,YAAiB,KAAA,MAAA;AACnB,UAAA,GAAA,CAAI,KAAQ,GAAA,YAAA;AAAA,OAChB;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAGA,IAAM,MAAA,aAAA,GAAgBE,aAAwB,MAAM;AAClD,MAAI,IAAAL,wBAAA,CAAU,WAAW,KAAK,CAAA;AAC5B,QAAO,OAAA,eAAA;AACT,MAAI,IAAA,UAAA,CAAW,UAAU,GAAI,CAAA,KAAA;AAC3B,QAAO,OAAA,UAAA;AACT,MAAO,OAAA,SAAA;AAAA,KACR,CAAA;AAED,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProgressRoot.cjs","sources":["../../src/Progress/ProgressRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, isNullish, useForwardExpose } from '@/shared'\n\nexport type ProgressRootEmits = {\n  /** Event handler called when the progress value changes */\n  'update:modelValue': [value: string[] | undefined]\n  /** Event handler called when the max value changes */\n  'update:max': [value: number]\n}\n\nexport interface ProgressRootProps extends PrimitiveProps {\n  /** The progress value. Can be bind as `v-model`. */\n  modelValue?: number | null\n  /** The maximum progress value. */\n  max?: number\n  /**\n   * A function to get the accessible label text in a human-readable format.\n   *\n   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.\n   */\n  getValueLabel?: (value: number | null | undefined, max: number) => string | undefined\n  /**\n   * A function to get the accessible value text representing the current value in a human-readable format.\n   */\n  getValueText?: (value: number | null | undefined, max: number) => string | undefined\n}\n\nconst DEFAULT_MAX = 100\n\ninterface ProgressRootContext {\n  modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>\n  max: Readonly<Ref<number>>\n  progressState: ComputedRef<ProgressState>\n}\n\nexport const [injectProgressRootContext, provideProgressRootContext]\n  = createContext<ProgressRootContext>('ProgressRoot')\n\nexport type ProgressState = 'indeterminate' | 'loading' | 'complete'\n\nconst isNumber = (v: any): v is number => typeof v === 'number'\n\nfunction validateValue(value: any, max: number): number | null {\n  const isValidValueError\n    = isNullish(value)\n      || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0)\n\n  if (isValidValueError)\n    return value as null\n\n  console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\`  or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`)\n  return null\n}\n\nfunction validateMax(max: number): number {\n  const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0\n\n  if (isValidMaxError)\n    return max\n\n  console.error(\n    `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`,\n  )\n  return DEFAULT_MAX\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, nextTick, watch } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ProgressRootProps>(), {\n  max: DEFAULT_MAX,\n  getValueLabel: (value: number | null | undefined, max: number) =>\n    isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined,\n})\n\nconst emit = defineEmits<ProgressRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst modelValue = useVModel(props, 'modelValue', emit, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst max = useVModel(props, 'max', emit, {\n  passive: (props.max === undefined) as false,\n})\n\n// ------- Watch for correct values -------\nwatch(\n  () => modelValue.value,\n  async (value) => {\n    const correctedValue = validateValue(value, props.max)\n    if (correctedValue !== value) {\n      await nextTick()\n      modelValue.value = correctedValue\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.max,\n  (newMax) => {\n    const correctedMax = validateMax(props.max)\n    if (correctedMax !== newMax)\n      max.value = correctedMax\n  },\n  { immediate: true },\n)\n// ------- End of watch for correct values -------\n\nconst progressState = computed<ProgressState>(() => {\n  if (isNullish(modelValue.value))\n    return 'indeterminate'\n  if (modelValue.value === max.value)\n    return 'complete'\n  return 'loading'\n})\n\nprovideProgressRootContext({\n  modelValue,\n  max,\n  progressState,\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :aria-valuemax=\"max\"\n    :aria-valuemin=\"0\"\n    :aria-valuenow=\"isNumber(modelValue) ? modelValue : undefined\"\n    :aria-valuetext=\"getValueText?.(modelValue, max)\"\n    :aria-label=\"getValueLabel(modelValue, max)\"\n    role=\"progressbar\"\n    :data-state=\"progressState\"\n    :data-value=\"modelValue ?? undefined\"\n    :data-max=\"max\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["createContext","isNullish","useForwardExpose","useVModel","watch","nextTick","computed"],"mappings":";;;;;;;;;AA6BA,MAAM,WAAc,GAAA,GAAA;AAQb,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAmC,cAAc;AAIrD,MAAM,QAAW,GAAA,CAAC,CAAwB,KAAA,OAAO,CAAM,KAAA,QAAA;AAEvD,SAAS,aAAA,CAAc,OAAY,GAA4B,EAAA;AAC7D,EAAA,MAAM,iBACF,GAAAC,wBAAA,CAAU,KAAK,CAAA,IACX,SAAS,KAAK,CAAA,IAAK,CAAC,MAAA,CAAO,KAAM,CAAA,KAAK,CAAK,IAAA,KAAA,IAAS,OAAO,KAAS,IAAA,CAAA;AAE5E,EAAI,IAAA,iBAAA;AACF,IAAO,OAAA,KAAA;AAET,EAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AAAA;AAAA,8CAAA,EAEV,WAAW,CAAA;AAAA;;AAAA,uBAGnC,CAAA,CAAA;AACtB,EAAO,OAAA,IAAA;AACT;AAEA,SAAS,YAAY,GAAqB,EAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,SAAS,GAAG,CAAA,IAAK,CAAC,MAAO,CAAA,KAAA,CAAM,GAAG,CAAA,IAAK,GAAM,GAAA,CAAA;AAErE,EAAI,IAAA,eAAA;AACF,IAAO,OAAA,GAAA;AAET,EAAQ,OAAA,CAAA,KAAA;AAAA,IACN,CAAA,gCAAA,EAAmC,GAAG,CAAA,mGAAA,EAAsG,WAAW,CAAA,GAAA;AAAA,GACzJ;AACA,EAAO,OAAA,WAAA;AACT;;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,IAAM,EAAA;AAAA,MACtD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,GAAM,GAAAA,cAAA,CAAU,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA;AAAA,MACxC,OAAA,EAAU,MAAM,GAAQ,KAAA;AAAA,KACzB,CAAA;AAGD,IAAAC,SAAA;AAAA,MACE,MAAM,UAAW,CAAA,KAAA;AAAA,MACjB,OAAO,KAAU,KAAA;AACf,QAAA,MAAM,cAAiB,GAAA,aAAA,CAAc,KAAO,EAAA,KAAA,CAAM,GAAG,CAAA;AACrD,QAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,UAAA,MAAMC,YAAS,EAAA;AACf,UAAA,UAAA,CAAW,KAAQ,GAAA,cAAA;AAAA;AACrB,OACF;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAEA,IAAAD,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,GAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAM,MAAA,YAAA,GAAe,WAAY,CAAA,KAAA,CAAM,GAAG,CAAA;AAC1C,QAAA,IAAI,YAAiB,KAAA,MAAA;AACnB,UAAA,GAAA,CAAI,KAAQ,GAAA,YAAA;AAAA,OAChB;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAGA,IAAM,MAAA,aAAA,GAAgBE,aAAwB,MAAM;AAClD,MAAI,IAAAL,wBAAA,CAAU,WAAW,KAAK,CAAA;AAC5B,QAAO,OAAA,eAAA;AACT,MAAI,IAAA,UAAA,CAAW,UAAU,GAAI,CAAA,KAAA;AAC3B,QAAO,OAAA,UAAA;AACT,MAAO,OAAA,SAAA;AAAA,KACR,CAAA;AAED,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Progress/ProgressRoot.js

@@ -34,7 +34,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
     max: { default: DEFAULT_MAX },
-    getValueLabel: { type: Function, default: (value, max) => `${Math.round(value / max * DEFAULT_MAX)}%` },
+    getValueLabel: { type: Function, default: (value, max) => isNumber(value) ? `${Math.round(value / max * DEFAULT_MAX)}%` : void 0 },
+    getValueText: {},
     asChild: { type: Boolean },
     as: {}
   },
@@ -88,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "aria-valuemax": unref(max),
         "aria-valuemin": 0,
         "aria-valuenow": isNumber(unref(modelValue)) ? unref(modelValue) : void 0,
-        "aria-valuetext": _ctx.getValueLabel(unref(modelValue), unref(max)),
+        "aria-valuetext": _ctx.getValueText?.(unref(modelValue), unref(max)),
         "aria-label": _ctx.getValueLabel(unref(modelValue), unref(max)),
         role: "progressbar",
         "data-state": progressState.value,

package/dist/Progress/ProgressRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRoot.js","sources":["../../src/Progress/ProgressRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, isNullish, useForwardExpose } from '@/shared'\n\nexport type ProgressRootEmits = {\n  /** Event handler called when the progress value changes */\n  'update:modelValue': [value: string[] | undefined]\n  /** Event handler called when the max value changes */\n  'update:max': [value: number]\n}\n\nexport interface ProgressRootProps extends PrimitiveProps {\n  /** The progress value. Can be bind as `v-model`. */\n  modelValue?: number | null\n  /** The maximum progress value. */\n  max?: number\n  /**\n   * A function to get the accessible label text representing the current value in a human-readable format.\n   *\n   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.\n   */\n  getValueLabel?: (value: number, max: number) => string\n}\n\nconst DEFAULT_MAX = 100\n\ninterface ProgressRootContext {\n  modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>\n  max: Readonly<Ref<number>>\n  progressState: ComputedRef<ProgressState>\n}\n\nexport const [injectProgressRootContext, provideProgressRootContext]\n  = createContext<ProgressRootContext>('ProgressRoot')\n\nexport type ProgressState = 'indeterminate' | 'loading' | 'complete'\n\nconst isNumber = (v: any): v is number => typeof v === 'number'\n\nfunction validateValue(value: any, max: number): number | null {\n  const isValidValueError\n    = isNullish(value)\n    || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0)\n\n  if (isValidValueError)\n    return value as null\n\n  console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\`  or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`)\n  return null\n}\n\nfunction validateMax(max: number): number {\n  const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0\n\n  if (isValidMaxError)\n    return max\n\n  console.error(\n    `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`,\n  )\n  return DEFAULT_MAX\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, nextTick, watch } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ProgressRootProps>(), {\n  max: DEFAULT_MAX,\n  getValueLabel: (value: number, max: number) =>\n    `${Math.round((value / max) * DEFAULT_MAX)}%`,\n})\n\nconst emit = defineEmits<ProgressRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst modelValue = useVModel(props, 'modelValue', emit, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst max = useVModel(props, 'max', emit, {\n  passive: (props.max === undefined) as false,\n})\n\n// ------- Watch for correct values -------\nwatch(\n  () => modelValue.value,\n  async (value) => {\n    const correctedValue = validateValue(value, props.max)\n    if (correctedValue !== value) {\n      await nextTick()\n      modelValue.value = correctedValue\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.max,\n  (newMax) => {\n    const correctedMax = validateMax(props.max)\n    if (correctedMax !== newMax)\n      max.value = correctedMax\n  },\n  { immediate: true },\n)\n// ------- End of watch for correct values -------\n\nconst progressState = computed<ProgressState>(() => {\n  if (isNullish(modelValue.value))\n    return 'indeterminate'\n  if (modelValue.value === max.value)\n    return 'complete'\n  return 'loading'\n})\n\nprovideProgressRootContext({\n  modelValue,\n  max,\n  progressState,\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :aria-valuemax=\"max\"\n    :aria-valuemin=\"0\"\n    :aria-valuenow=\"isNumber(modelValue) ? modelValue : undefined\"\n    :aria-valuetext=\"getValueLabel(modelValue!, max)\"\n    :aria-label=\"getValueLabel(modelValue!, max)\"\n    role=\"progressbar\"\n    :data-state=\"progressState\"\n    :data-value=\"modelValue ?? undefined\"\n    :data-max=\"max\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,WAAc,GAAA,GAAA;AAQb,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAmC,cAAc;AAIrD,MAAM,QAAW,GAAA,CAAC,CAAwB,KAAA,OAAO,CAAM,KAAA,QAAA;AAEvD,SAAS,aAAA,CAAc,OAAY,GAA4B,EAAA;AAC7D,EAAA,MAAM,iBACF,GAAA,SAAA,CAAU,KAAK,CAAA,IACb,SAAS,KAAK,CAAA,IAAK,CAAC,MAAA,CAAO,KAAM,CAAA,KAAK,CAAK,IAAA,KAAA,IAAS,OAAO,KAAS,IAAA,CAAA;AAE1E,EAAI,IAAA,iBAAA;AACF,IAAO,OAAA,KAAA;AAET,EAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AAAA;AAAA,8CAAA,EAEV,WAAW,CAAA;AAAA;;AAAA,uBAGnC,CAAA,CAAA;AACtB,EAAO,OAAA,IAAA;AACT;AAEA,SAAS,YAAY,GAAqB,EAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,SAAS,GAAG,CAAA,IAAK,CAAC,MAAO,CAAA,KAAA,CAAM,GAAG,CAAA,IAAK,GAAM,GAAA,CAAA;AAErE,EAAI,IAAA,eAAA;AACF,IAAO,OAAA,GAAA;AAET,EAAQ,OAAA,CAAA,KAAA;AAAA,IACN,CAAA,gCAAA,EAAmC,GAAG,CAAA,mGAAA,EAAsG,WAAW,CAAA,GAAA;AAAA,GACzJ;AACA,EAAO,OAAA,WAAA;AACT;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,IAAM,EAAA;AAAA,MACtD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,GAAM,GAAA,SAAA,CAAU,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA;AAAA,MACxC,OAAA,EAAU,MAAM,GAAQ,KAAA;AAAA,KACzB,CAAA;AAGD,IAAA,KAAA;AAAA,MACE,MAAM,UAAW,CAAA,KAAA;AAAA,MACjB,OAAO,KAAU,KAAA;AACf,QAAA,MAAM,cAAiB,GAAA,aAAA,CAAc,KAAO,EAAA,KAAA,CAAM,GAAG,CAAA;AACrD,QAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,UAAA,MAAM,QAAS,EAAA;AACf,UAAA,UAAA,CAAW,KAAQ,GAAA,cAAA;AAAA;AACrB,OACF;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,GAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAM,MAAA,YAAA,GAAe,WAAY,CAAA,KAAA,CAAM,GAAG,CAAA;AAC1C,QAAA,IAAI,YAAiB,KAAA,MAAA;AACnB,UAAA,GAAA,CAAI,KAAQ,GAAA,YAAA;AAAA,OAChB;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAGA,IAAM,MAAA,aAAA,GAAgB,SAAwB,MAAM;AAClD,MAAI,IAAA,SAAA,CAAU,WAAW,KAAK,CAAA;AAC5B,QAAO,OAAA,eAAA;AACT,MAAI,IAAA,UAAA,CAAW,UAAU,GAAI,CAAA,KAAA;AAC3B,QAAO,OAAA,UAAA;AACT,MAAO,OAAA,SAAA;AAAA,KACR,CAAA;AAED,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProgressRoot.js","sources":["../../src/Progress/ProgressRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, isNullish, useForwardExpose } from '@/shared'\n\nexport type ProgressRootEmits = {\n  /** Event handler called when the progress value changes */\n  'update:modelValue': [value: string[] | undefined]\n  /** Event handler called when the max value changes */\n  'update:max': [value: number]\n}\n\nexport interface ProgressRootProps extends PrimitiveProps {\n  /** The progress value. Can be bind as `v-model`. */\n  modelValue?: number | null\n  /** The maximum progress value. */\n  max?: number\n  /**\n   * A function to get the accessible label text in a human-readable format.\n   *\n   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.\n   */\n  getValueLabel?: (value: number | null | undefined, max: number) => string | undefined\n  /**\n   * A function to get the accessible value text representing the current value in a human-readable format.\n   */\n  getValueText?: (value: number | null | undefined, max: number) => string | undefined\n}\n\nconst DEFAULT_MAX = 100\n\ninterface ProgressRootContext {\n  modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>\n  max: Readonly<Ref<number>>\n  progressState: ComputedRef<ProgressState>\n}\n\nexport const [injectProgressRootContext, provideProgressRootContext]\n  = createContext<ProgressRootContext>('ProgressRoot')\n\nexport type ProgressState = 'indeterminate' | 'loading' | 'complete'\n\nconst isNumber = (v: any): v is number => typeof v === 'number'\n\nfunction validateValue(value: any, max: number): number | null {\n  const isValidValueError\n    = isNullish(value)\n      || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0)\n\n  if (isValidValueError)\n    return value as null\n\n  console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\`  or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`)\n  return null\n}\n\nfunction validateMax(max: number): number {\n  const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0\n\n  if (isValidMaxError)\n    return max\n\n  console.error(\n    `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`,\n  )\n  return DEFAULT_MAX\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, nextTick, watch } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ProgressRootProps>(), {\n  max: DEFAULT_MAX,\n  getValueLabel: (value: number | null | undefined, max: number) =>\n    isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined,\n})\n\nconst emit = defineEmits<ProgressRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst modelValue = useVModel(props, 'modelValue', emit, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst max = useVModel(props, 'max', emit, {\n  passive: (props.max === undefined) as false,\n})\n\n// ------- Watch for correct values -------\nwatch(\n  () => modelValue.value,\n  async (value) => {\n    const correctedValue = validateValue(value, props.max)\n    if (correctedValue !== value) {\n      await nextTick()\n      modelValue.value = correctedValue\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.max,\n  (newMax) => {\n    const correctedMax = validateMax(props.max)\n    if (correctedMax !== newMax)\n      max.value = correctedMax\n  },\n  { immediate: true },\n)\n// ------- End of watch for correct values -------\n\nconst progressState = computed<ProgressState>(() => {\n  if (isNullish(modelValue.value))\n    return 'indeterminate'\n  if (modelValue.value === max.value)\n    return 'complete'\n  return 'loading'\n})\n\nprovideProgressRootContext({\n  modelValue,\n  max,\n  progressState,\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :aria-valuemax=\"max\"\n    :aria-valuemin=\"0\"\n    :aria-valuenow=\"isNumber(modelValue) ? modelValue : undefined\"\n    :aria-valuetext=\"getValueText?.(modelValue, max)\"\n    :aria-label=\"getValueLabel(modelValue, max)\"\n    role=\"progressbar\"\n    :data-state=\"progressState\"\n    :data-value=\"modelValue ?? undefined\"\n    :data-max=\"max\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;AA6BA,MAAM,WAAc,GAAA,GAAA;AAQb,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAmC,cAAc;AAIrD,MAAM,QAAW,GAAA,CAAC,CAAwB,KAAA,OAAO,CAAM,KAAA,QAAA;AAEvD,SAAS,aAAA,CAAc,OAAY,GAA4B,EAAA;AAC7D,EAAA,MAAM,iBACF,GAAA,SAAA,CAAU,KAAK,CAAA,IACX,SAAS,KAAK,CAAA,IAAK,CAAC,MAAA,CAAO,KAAM,CAAA,KAAK,CAAK,IAAA,KAAA,IAAS,OAAO,KAAS,IAAA,CAAA;AAE5E,EAAI,IAAA,iBAAA;AACF,IAAO,OAAA,KAAA;AAET,EAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AAAA;AAAA,8CAAA,EAEV,WAAW,CAAA;AAAA;;AAAA,uBAGnC,CAAA,CAAA;AACtB,EAAO,OAAA,IAAA;AACT;AAEA,SAAS,YAAY,GAAqB,EAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,SAAS,GAAG,CAAA,IAAK,CAAC,MAAO,CAAA,KAAA,CAAM,GAAG,CAAA,IAAK,GAAM,GAAA,CAAA;AAErE,EAAI,IAAA,eAAA;AACF,IAAO,OAAA,GAAA;AAET,EAAQ,OAAA,CAAA,KAAA;AAAA,IACN,CAAA,gCAAA,EAAmC,GAAG,CAAA,mGAAA,EAAsG,WAAW,CAAA,GAAA;AAAA,GACzJ;AACA,EAAO,OAAA,WAAA;AACT;;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,IAAM,EAAA;AAAA,MACtD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,GAAM,GAAA,SAAA,CAAU,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA;AAAA,MACxC,OAAA,EAAU,MAAM,GAAQ,KAAA;AAAA,KACzB,CAAA;AAGD,IAAA,KAAA;AAAA,MACE,MAAM,UAAW,CAAA,KAAA;AAAA,MACjB,OAAO,KAAU,KAAA;AACf,QAAA,MAAM,cAAiB,GAAA,aAAA,CAAc,KAAO,EAAA,KAAA,CAAM,GAAG,CAAA;AACrD,QAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,UAAA,MAAM,QAAS,EAAA;AACf,UAAA,UAAA,CAAW,KAAQ,GAAA,cAAA;AAAA;AACrB,OACF;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,GAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAM,MAAA,YAAA,GAAe,WAAY,CAAA,KAAA,CAAM,GAAG,CAAA;AAC1C,QAAA,IAAI,YAAiB,KAAA,MAAA;AACnB,UAAA,GAAA,CAAI,KAAQ,GAAA,YAAA;AAAA,OAChB;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAGA,IAAM,MAAA,aAAA,GAAgB,SAAwB,MAAM;AAClD,MAAI,IAAA,SAAA,CAAU,WAAW,KAAK,CAAA;AAC5B,QAAO,OAAA,eAAA;AACT,MAAI,IAAA,UAAA,CAAW,UAAU,GAAI,CAAA,KAAA;AAC3B,QAAO,OAAA,UAAA;AACT,MAAO,OAAA,SAAA;AAAA,KACR,CAAA;AAED,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}