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

Vue port for Radix UI Primitives.

{"version":3,"file":"SelectTrigger.cjs","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { PopperAnchor, type PopperAnchorProps } from '@/Popper'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"\n        rootContext.modelValue?.value ? undefined : ''\n      \"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":["injectSelectRootContext","useForwardExpose","computed","useId","onMounted","useCollection","useTypeahead"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAA,MAAM,aAAaC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,mCAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmBC,gCAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}