reka-ui/dist/ScrollArea/ScrollAreaRoot.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"ScrollAreaRoot.cjs","sources":["../../src/ScrollArea/ScrollAreaRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, ScrollType } from './types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaRootContext {\n  type: Ref<ScrollType>\n  dir: Ref<Direction>\n  scrollHideDelay: Ref<number>\n  scrollArea: Ref<HTMLElement | undefined>\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | null) => void\n  content: Ref<HTMLElement | undefined>\n  onContentChange: (content: HTMLElement) => void\n  scrollbarX: Ref<HTMLElement | undefined>\n  onScrollbarXChange: (scrollbar: HTMLElement | null) => void\n  scrollbarXEnabled: Ref<boolean>\n  onScrollbarXEnabledChange: (rendered: boolean) => void\n  scrollbarY: Ref<HTMLElement | undefined>\n  onScrollbarYChange: (scrollbar: HTMLElement | null) => void\n  scrollbarYEnabled: Ref<boolean>\n  onScrollbarYEnabledChange: (rendered: boolean) => void\n  onCornerWidthChange: (width: number) => void\n  onCornerHeightChange: (height: number) => void\n}\n\nexport const [injectScrollAreaRootContext, provideScrollAreaRootContext]\n  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')\n\nexport interface ScrollAreaRootProps extends PrimitiveProps {\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.\n   *\n   * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>\n   * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>\n   * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>\n   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.\n   */\n  type?: ScrollType\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars. */\n  scrollHideDelay?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ScrollAreaRootProps>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n})\n\nconst cornerWidth = ref(0)\nconst cornerHeight = ref(0)\nconst viewport = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nconst scrollbarX = ref<HTMLElement>()\nconst scrollbarY = ref<HTMLElement>()\nconst scrollbarXEnabled = ref(false)\nconst scrollbarYEnabled = ref(false)\n\nconst { type, dir: propDir, scrollHideDelay } = toRefs(props)\nconst dir = useDirection(propDir)\n\nfunction scrollTop() {\n  viewport.value?.scrollTo({\n    top: 0,\n  })\n}\nfunction scrollTopLeft() {\n  viewport.value?.scrollTo({\n    top: 0,\n    left: 0,\n  })\n}\n\ndefineExpose({\n  /** Viewport element within ScrollArea */\n  viewport,\n  /** Scroll viewport to top */\n  scrollTop,\n  /** Scroll viewport to top-left */\n  scrollTopLeft,\n})\n\nconst { forwardRef, currentElement: scrollArea } = useForwardExpose()\n\nprovideScrollAreaRootContext({\n  type,\n  dir,\n  scrollHideDelay,\n  scrollArea,\n  viewport,\n  onViewportChange: (el) => {\n    viewport.value = el || undefined\n  },\n  content,\n  onContentChange: (el) => {\n    content.value = el\n  },\n  scrollbarX,\n  scrollbarXEnabled,\n  scrollbarY,\n  scrollbarYEnabled,\n  onScrollbarXChange: (scrollbar) => {\n    scrollbarX.value = scrollbar || undefined\n  },\n  onScrollbarYChange: (scrollbar) => {\n    scrollbarY.value = scrollbar || undefined\n  },\n  onScrollbarXEnabledChange: (rendered) => {\n    scrollbarXEnabled.value = rendered\n  },\n  onScrollbarYEnabledChange: (rendered) => {\n    scrollbarYEnabled.value = rendered\n  },\n  onCornerWidthChange: (width) => {\n    cornerWidth.value = width\n  },\n  onCornerHeightChange: (height) => {\n    cornerHeight.value = height\n  },\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :dir=\"dir\"\n    :style=\"{\n      position: 'relative',\n      // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n      ['--reka-scroll-area-corner-width' as any]: `${cornerWidth}px`,\n      ['--reka-scroll-area-corner-height' as any]: `${cornerHeight}px`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["createContext","ref","toRefs","useDirection","useForwardExpose"],"mappings":";;;;;;;;AA2BO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnEA,mCAAqC,gBAAgB;;;;;;;;;;;AAuBzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,WAAA,GAAcC,QAAI,CAAC,CAAA;AACzB,IAAM,MAAA,YAAA,GAAeA,QAAI,CAAC,CAAA;AAC1B,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,UAAUA,OAAiB,EAAA;AACjC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AACnC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AAEnC,IAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAK,SAAS,eAAgB,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA;AAGH,IAAa,QAAA,CAAA;AAAA;AAAA,MAEX,QAAA;AAAA;AAAA,MAEA,SAAA;AAAA;AAAA,MAEA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,UAAA,KAAeC,wCAAiB,EAAA;AAEpE,IAA6B,4BAAA,CAAA;AAAA,MAC3B,IAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,EAAO,KAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,EAAM,IAAA,MAAA;AAAA,OACzB;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAO,KAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OAClB;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,mBAAA,EAAqB,CAAC,KAAU,KAAA;AAC9B,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AAAA,OACtB;AAAA,MACA,oBAAA,EAAsB,CAAC,MAAW,KAAA;AAChC,QAAA,YAAA,CAAa,KAAQ,GAAA,MAAA;AAAA;AACvB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}