reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 6.17 kB
Source Map (JSON)
{"version":3,"file":"ComboboxContentImpl.cjs","sources":["../../src/Combobox/ComboboxContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose, useForwardProps, useHideOthers } from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\n\nimport type { DismissableLayerEmits, DismissableLayerProps } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\n\nexport type ComboboxContentImplEmits = DismissableLayerEmits\n\nexport interface ComboboxContentImplProps extends PopperContentProps, DismissableLayerProps {\n /**\n * The positioning mode to use, <br>\n * `inline` is the default and you can control the position using CSS. <br>\n * `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n */\n position?: 'inline' | 'popper'\n /** The document.body will be lock, and scrolling will be disabled. */\n bodyLock?: boolean\n}\n\nexport const [injectComboboxContentContext, provideComboboxContentContext]\n = createContext<{\n position: Ref<'inline' | 'popper'>\n }>('ComboboxContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, toRefs } from 'vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { PopperContent } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { ListboxContent } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxContentImplProps>(), {\n position: 'inline',\n})\nconst emits = defineEmits<ComboboxContentImplEmits>()\n\nconst { position } = toRefs(props)\nconst rootContext = injectComboboxRootContext()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nuseBodyScrollLock(props.bodyLock)\nuseHideOthers(rootContext.parentElement)\n\nconst pickedProps = computed(() => {\n if (props.position === 'popper')\n return props\n else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nconst popperStyle = {\n // Ensure border-box for floating-ui calculations\n 'boxSizing': 'border-box',\n '--reka-combobox-content-transform-origin':\n 'var(--reka-popper-transform-origin)',\n '--reka-combobox-content-available-width':\n 'var(--reka-popper-available-width)',\n '--reka-combobox-content-available-height':\n 'var(--reka-popper-available-height)',\n '--reka-combobox-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-combobox-trigger-height': 'var(--reka-popper-anchor-height)',\n}\n\nprovideComboboxContentContext({ position })\n\n// Handle case where input position within the content\nconst isInputWithinContent = ref(false)\nonMounted(() => {\n if (rootContext.inputElement.value) {\n isInputWithinContent.value = currentElement.value.contains(rootContext.inputElement.value)\n if (isInputWithinContent.value) {\n rootContext.inputElement.value.focus()\n }\n }\n})\n\nonUnmounted(() => {\n if (isInputWithinContent.value) {\n rootContext.triggerElement.value?.focus()\n }\n})\n</script>\n\n<template>\n <ListboxContent as-child>\n <DismissableLayer\n as-child\n :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n @dismiss=\"rootContext.onOpenChange(false)\"\n @focus-outside=\"(ev) => {\n // if clicking inside the combobox, prevent dismiss\n if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()\n emits('focusOutside', ev)\n }\"\n @interact-outside=\"emits('interactOutside', $event)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"(ev) => {\n // if clicking inside the combobox, prevent dismiss\n if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()\n emits('pointerDownOutside', ev)\n }\"\n >\n <component\n :is=\"position === 'popper' ? PopperContent : Primitive\"\n v-bind=\"{ ...$attrs, ...forwardedProps }\"\n :id=\"rootContext.contentId\"\n :ref=\"forwardRef\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :style=\"{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n ...(position === 'popper' ? popperStyle : {}),\n }\"\n >\n <slot />\n </component>\n </DismissableLayer>\n </ListboxContent>\n</template>\n"],"names":["createContext","toRefs","injectComboboxRootContext","useForwardExpose","useBodyScrollLock","useHideOthers","computed","useForwardProps","ref","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;AAqBO,MAAM,CAAC,4BAAA,EAA8B,6BAA6B,CAAA,GACrEA,mCAEC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWtB,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,QAAA,EAAa,GAAAC,UAAA,CAAO,KAAK,CAAA;AACjC,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AACxD,IAAAC,0CAAA,CAAkB,MAAM,QAAQ,CAAA;AAChC,IAAAC,kCAAA,CAAc,YAAY,aAAa,CAAA;AAEvC,IAAM,MAAA,WAAA,GAAcC,aAAS,MAAM;AACjC,MAAA,IAAI,MAAM,QAAa,KAAA,QAAA;AACrB,QAAO,OAAA,KAAA;AAAA,kBACG,EAAC;AAAA,KACd,CAAA;AAED,IAAM,MAAA,cAAA,GAAiBC,sCAAgB,CAAA,WAAA,CAAY,KAAK,CAAA;AAExD,IAAA,MAAM,WAAc,GAAA;AAAA;AAAA,MAElB,WAAa,EAAA,YAAA;AAAA,MACb,0CACM,EAAA,qCAAA;AAAA,MACN,yCACM,EAAA,oCAAA;AAAA,MACN,0CACM,EAAA,qCAAA;AAAA,MACN,+BAAiC,EAAA,iCAAA;AAAA,MACjC,gCAAkC,EAAA;AAAA,KACpC;AAEA,IAA8B,6BAAA,CAAA,EAAE,UAAU,CAAA;AAG1C,IAAM,MAAA,oBAAA,GAAuBC,QAAI,KAAK,CAAA;AACtC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAA,oBAAA,CAAqB,QAAQ,cAAe,CAAA,KAAA,CAAM,QAAS,CAAA,WAAA,CAAY,aAAa,KAAK,CAAA;AACzF,QAAA,IAAI,qBAAqB,KAAO,EAAA;AAC9B,UAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;AACF,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,qBAAqB,KAAO,EAAA;AAC9B,QAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA;AAC1C,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}