reka-ui/dist/Listbox/ListboxFilter.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"ListboxFilter.cjs","sources":["../../src/Listbox/ListboxFilter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive, type PrimitiveProps } from '..'\nimport { injectListboxRootContext } from './ListboxRoot.vue'\nimport { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport interface ListboxFilterProps extends PrimitiveProps {\n  /** The controlled value of the filter. Can be binded with with v-model. */\n  modelValue?: string\n  /** Focus on element when mounted. */\n  autoFocus?: boolean\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n\nexport type ListboxFilterEmits = {\n  'update:modelValue': [string]\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(defineProps<ListboxFilterProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ListboxFilterEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst rootContext = injectListboxRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst disabled = computed(() => props.disabled || rootContext.disabled.value || false)\n\nconst activedescendant = ref<string | undefined>()\nwatchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id)\n\nonMounted(() => {\n  rootContext.focusable.value = false\n\n  setTimeout(() => {\n    // make sure all DOM was flush then only capture the focus\n    if (props.autoFocus)\n      currentElement.value?.focus()\n  }, 1)\n})\n\nonUnmounted(() => {\n  rootContext.focusable.value = true\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :value=\"modelValue\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-disabled=\"disabled ?? undefined\"\n    :aria-activedescendant=\"activedescendant\"\n    type=\"text\"\n    @keydown.down.up.home.end.prevent=\"rootContext.onKeydownNavigation\"\n    @keydown.enter=\"rootContext.onKeydownEnter\"\n    @input=\"(event: InputEvent) => {\n      modelValue = (event.target as HTMLInputElement).value\n      rootContext.highlightFirstItem(event)\n    }\"\n    @compositionstart=\"rootContext.onCompositionStart\"\n    @compositionend=\"rootContext.onCompositionEnd\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["useVModel","injectListboxRootContext","usePrimitiveElement","computed","ref","watchSyncEffect","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAc,EAAA,EAAA;AAAA,MACd,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM,KAAA,CAAM,YAAY,WAAY,CAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAErF,IAAA,MAAM,mBAAmBC,OAAwB,EAAA;AACjD,IAAAC,mBAAA,CAAgB,MAAM,gBAAiB,CAAA,KAAA,GAAQ,WAAY,CAAA,kBAAA,CAAmB,OAAO,EAAE,CAAA;AAEvF,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,KAAA;AAE9B,MAAA,UAAA,CAAW,MAAM;AAEf,QAAA,IAAI,KAAM,CAAA,SAAA;AACR,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA,KACL,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,IAAA;AAAA,KAC/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}