reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 5.17 kB
Source Map (JSON)
{"version":3,"file":"ComboboxInput.cjs","sources":["../../src/Combobox/ComboboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'\nimport { useVModel } from '@vueuse/core'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { nextTick, onMounted, watch } from 'vue'\n\nexport type ComboboxInputEmits = ListboxFilterEmits\nexport interface ComboboxInputProps extends ListboxFilterProps {\n /** The display value of input for selected item. Does not work with `multiple`. */\n displayValue?: (val: any) => string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'\nimport { ListboxFilter } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxInputProps>(), {\n as: 'input',\n})\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst rootContext = injectComboboxRootContext()\nconst listboxContext = injectListboxRootContext()\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: (props.modelValue === undefined) as false,\n})\n\nonMounted(() => {\n if (currentElement.value)\n rootContext.onInputElementChange(currentElement.value as HTMLInputElement)\n})\n\nfunction handleKeyDown(ev: KeyboardEvent) {\n if (!rootContext.open.value)\n rootContext.onOpenChange(true)\n}\n\nfunction handleInput(event: InputEvent) {\n const target = event.target as HTMLInputElement\n if (!rootContext.open.value) {\n rootContext.onOpenChange(true)\n nextTick(() => {\n if (target.value) {\n rootContext.filterState.search = target.value\n listboxContext.highlightFirstItem(event)\n }\n })\n }\n else {\n rootContext.filterState.search = target.value\n }\n}\n\nfunction resetSearchTerm() {\n const rootModelValue = rootContext.modelValue.value\n\n if (props.displayValue) {\n modelValue.value = props.displayValue(rootModelValue)\n }\n else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) {\n if (typeof rootModelValue !== 'object')\n modelValue.value = rootModelValue.toString()\n else modelValue.value = ''\n }\n else {\n modelValue.value = ''\n }\n\n nextTick(() => {\n // Temporary force reassign\n // eslint-disable-next-line no-self-assign\n modelValue.value = modelValue.value\n })\n}\n\nrootContext.onResetSearchTerm(() => {\n resetSearchTerm()\n})\n\nwatch(rootContext.modelValue, async () => {\n if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)\n resetSearchTerm()\n}, { immediate: true, deep: true })\n</script>\n\n<template>\n <ListboxFilter\n ref=\"primitiveElement\"\n v-model=\"modelValue\"\n :as=\"as\"\n :as-child=\"asChild\"\n :auto-focus=\"autoFocus\"\n :aria-expanded=\"rootContext.open.value\"\n :aria-controls=\"rootContext.contentId\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n autocomplete=\"false\"\n @input=\"handleInput\"\n @keydown.down.up.prevent=\"handleKeyDown\"\n >\n <slot />\n </ListboxFilter>\n</template>\n"],"names":["injectComboboxRootContext","injectListboxRootContext","usePrimitiveElement","useVModel","onMounted","nextTick","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAC9C,IAAA,MAAM,iBAAiBC,4CAAyB,EAAA;AAChD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KAC5E,CAAA;AAED,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAI,IAAA,CAAC,YAAY,IAAK,CAAA,KAAA;AACpB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAGjC,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,WAAY,CAAA,IAAA,CAAK,KAAO,EAAA;AAC3B,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAC7B,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,IAAI,OAAO,KAAO,EAAA;AAChB,YAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AACxC,YAAA,cAAA,CAAe,mBAAmB,KAAK,CAAA;AAAA;AACzC,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AAAA;AAC1C;AAGF,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAM,MAAA,cAAA,GAAiB,YAAY,UAAW,CAAA,KAAA;AAE9C,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAW,UAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,YAAA,CAAa,cAAc,CAAA;AAAA,OACtD,MAAA,IACS,CAAC,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,kBAAkB,CAAC,KAAA,CAAM,OAAQ,CAAA,cAAc,CAAG,EAAA;AACxF,QAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAC5B,UAAW,UAAA,CAAA,KAAA,GAAQ,eAAe,QAAS,EAAA;AAAA,wBAC7B,KAAQ,GAAA,EAAA;AAAA,OAErB,MAAA;AACH,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AAGrB,MAAAA,YAAA,CAAS,MAAM;AAGb,QAAA,UAAA,CAAW,QAAQ,UAAW,CAAA,KAAA;AAAA,OAC/B,CAAA;AAAA;AAGH,IAAA,WAAA,CAAY,kBAAkB,MAAM;AAClC,MAAgB,eAAA,EAAA;AAAA,KACjB,CAAA;AAED,IAAMC,SAAA,CAAA,WAAA,CAAY,YAAY,YAAY;AACxC,MAAA,IAAI,CAAC,WAAA,CAAY,cAAe,CAAA,KAAA,IAAS,YAAY,uBAAwB,CAAA,KAAA;AAC3E,QAAgB,eAAA,EAAA;AAAA,OACjB,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}