reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.94 kB
Source Map (JSON)
{"version":3,"file":"NumberFieldInput.cjs","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { onMounted, ref, watch } from 'vue'\nimport { getActiveElement } from '@/shared'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n if (rootContext.disableWheelChange.value)\n return\n\n // only handle when in focus\n if (event.target !== getActiveElement())\n return\n\n // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n // especially if the user is scrolling near 45deg\n if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n return\n\n event.preventDefault()\n if (event.deltaY > 0)\n rootContext.handleIncrease()\n else if (event.deltaY < 0)\n rootContext.handleDecrease()\n}\n\nonMounted(() => {\n rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n requestAnimationFrame(() => {\n inputValue.value = rootContext.textValue.value\n })\n}\n</script>\n\n<template>\n <Primitive\n v-bind=\"props\"\n :id=\"rootContext.id.value\"\n ref=\"primitiveElement\"\n :value=\"inputValue\"\n role=\"spinbutton\"\n type=\"text\"\n tabindex=\"0\"\n :inputmode=\"rootContext.inputMode.value\"\n :disabled=\"rootContext.disabled.value ? '' : undefined\"\n :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n aria-roledescription=\"Number field\"\n :aria-valuenow=\"rootContext.modelValue.value\"\n :aria-valuemin=\"rootContext.min.value\"\n :aria-valuemax=\"rootContext.max.value\"\n @keydown.up.prevent=\"rootContext.handleIncrease()\"\n @keydown.down.prevent=\"rootContext.handleDecrease()\"\n @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n @wheel=\"handleWheelEvent\"\n @beforeinput=\"(event: InputEvent) => {\n const target = event.target as HTMLInputElement\n let nextValue\n = target.value.slice(0, target.selectionStart ?? undefined)\n + (event.data ?? '')\n + target.value.slice(target.selectionEnd ?? undefined);\n\n // validate\n if (!rootContext.validate(nextValue))\n event.preventDefault()\n }\"\n @input=\"(event: InputEvent) => {\n const target = event.target as HTMLInputElement\n inputValue = target.value\n }\"\n @change=\"handleChange\"\n @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n @blur=\"rootContext.applyInputValue($event.target?.value)\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["usePrimitiveElement","injectNumberFieldRootContext","getActiveElement","onMounted","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIA,iDAAoB,EAAA;AACjE,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAWC,wCAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA,WAAA,IACpB,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA;AAG/B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAAC,OAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAAC,SAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}