reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 5.04 kB
Source Map (JSON)
{"version":3,"file":"ListboxItem.cjs","sources":["../../src/Listbox/ListboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { createContext, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\n\nexport interface ListboxItemProps<T = AcceptableValue> extends PrimitiveProps {\n /** The value given as data when submitted with a `name`. */\n value: T\n /** When `true`, prevents the user from interacting with the item. */\n disabled?: boolean\n}\nexport type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent, value?: T }>\n\nexport type ListboxItemEmits<T = AcceptableValue> = {\n /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */\n select: [event: SelectEvent<T>]\n}\n\nconst LISTBOX_SELECT = 'listbox.select'\n\ninterface ListboxItemContext {\n isSelected: Ref<boolean>\n}\n\nexport const [injectListboxItemContext, provideListboxItemContext]\n = createContext<ListboxItemContext>('ListboxItem')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { injectListboxRootContext } from './ListboxRoot.vue'\nimport { type Ref, computed } from 'vue'\nimport { Primitive, type PrimitiveProps } from '..'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\nimport type { AcceptableValue } from '@/shared/types'\n\nconst props = withDefaults(defineProps<ListboxItemProps<T>>(), {\n as: 'div',\n})\nconst emits = defineEmits<ListboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-listbox-item')\nconst { CollectionItem } = useCollection()\nconst { forwardRef, currentElement } = useForwardExpose()\nconst rootContext = injectListboxRootContext()\n\nconst isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value)\nconst isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by))\n\nconst disabled = computed(() => rootContext.disabled.value || props.disabled)\n\nasync function handleSelect(ev: SelectEvent<T>) {\n emits('select', ev)\n if (ev?.defaultPrevented)\n return\n\n if (!disabled.value && ev) {\n rootContext.onValueChange(props.value)\n rootContext.changeHighlight(currentElement.value)\n }\n}\n\nfunction handleSelectCustomEvent(ev: PointerEvent) {\n const eventDetail = { originalEvent: ev, value: props.value as T }\n handleAndDispatchCustomEvent(LISTBOX_SELECT, handleSelect, eventDetail)\n}\n\nprovideListboxItemContext({\n isSelected,\n})\n</script>\n\n<template>\n <CollectionItem :value=\"value\">\n <Primitive\n :id=\"id\"\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n v-memo=\"[isHighlighted, isSelected]\"\n role=\"option\"\n :tabindex=\"rootContext.focusable.value ? isHighlighted ? '0' : '-1' : -1\"\n :aria-selected=\"isSelected\"\n :as=\"as\"\n :as-child=\"asChild\"\n :disabled=\"disabled ? '' : undefined\"\n :data-disabled=\"disabled ? '' : undefined\"\n :data-highlighted=\"isHighlighted ? '' : undefined\"\n :data-state=\"isSelected ? 'checked' : 'unchecked'\"\n @click=\"handleSelectCustomEvent\"\n @keydown.space.prevent=\"handleSelectCustomEvent\"\n @pointermove=\"(event) => {\n if (rootContext.highlightedElement.value === currentElement)\n return\n\n if (rootContext.highlightOnHover.value)\n rootContext.changeHighlight(currentElement, false)\n else\n rootContext.focusable.value ? undefined : rootContext.changeHighlight(currentElement, false)\n }\"\n >\n <slot />\n </Primitive>\n </CollectionItem>\n</template>\n"],"names":["createContext","useId","useCollection","useForwardExpose","injectListboxRootContext","computed","valueComparator","handleAndDispatchCustomEvent"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,cAAiB,GAAA,gBAAA;AAMhB,MAAM,CAAC,wBAAA,EAA0B,yBAAyB,CAAA,GAC7DA,mCAAkC,aAAa;;;;;;;;;;;AAWnD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAKC,kBAAM,CAAA,MAAA,EAAW,mBAAmB,CAAA;AAC/C,IAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,mCAAc,EAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AACxD,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAA,MAAM,gBAAgBC,YAAS,CAAA,MAAM,eAAe,KAAU,KAAA,WAAA,CAAY,mBAAmB,KAAK,CAAA;AAClG,IAAM,MAAA,UAAA,GAAaA,YAAS,CAAA,MAAMC,6BAAgB,CAAA,WAAA,CAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAE5G,IAAA,MAAM,WAAWD,YAAS,CAAA,MAAM,YAAY,QAAS,CAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE5E,IAAA,eAAe,aAAa,EAAoB,EAAA;AAC9C,MAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,MAAA,IAAI,EAAI,EAAA,gBAAA;AACN,QAAA;AAEF,MAAI,IAAA,CAAC,QAAS,CAAA,KAAA,IAAS,EAAI,EAAA;AACzB,QAAY,WAAA,CAAA,aAAA,CAAc,MAAM,KAAK,CAAA;AACrC,QAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA;AAClD;AAGF,IAAA,SAAS,wBAAwB,EAAkB,EAAA;AACjD,MAAA,MAAM,cAAc,EAAE,aAAA,EAAe,EAAI,EAAA,KAAA,EAAO,MAAM,KAAW,EAAA;AACjE,MAA6BE,gEAAA,CAAA,cAAA,EAAgB,cAAc,WAAW,CAAA;AAAA;AAGxE,IAA0B,yBAAA,CAAA;AAAA,MACxB;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}