reka-ui/dist/Select/SelectScrollDownButton.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"SelectScrollDownButton.cjs","sources":["../../src/Select/SelectScrollDownButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollDownButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\ndefineProps<SelectScrollDownButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollDown = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight\n      // we use Math.ceil here because if the UI is zoomed-in\n      // `scrollTop` is not always reported as an integer\n      canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollDown\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"\n      () => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport?.value && selectedItem?.value) {\n          viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;\n        }\n      }\n    \"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":["injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","ref","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiBA,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAM,MAAA,aAAA,GAAgBC,QAAI,KAAK,CAAA;AAE/B,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAM,MAAA,SAAA,GAAY,QAAS,CAAA,YAAA,GAAe,QAAS,CAAA,YAAA;AAGnD,UAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,GAAA,SAAA;AAAA,SACxD;AAPA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAQzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}