UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 3.42 kB
{"version":3,"file":"DateRangeFieldInput.cjs","sources":["../../src/DateRangeField/DateRangeFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from '@/Primitive'\nimport type { SegmentPart } from '@/shared/date'\nimport { useDateField } from '@/shared/date/useDateField'\nimport { type DateRangeType, injectDateRangeFieldRootContext } from './DateRangeFieldRoot.vue'\nimport { computed, ref } from 'vue'\n\nexport interface DateRangeFieldInputProps extends PrimitiveProps {\n /** The part of the date to render */\n part: SegmentPart\n /** The type of field to render (start or end) */\n type: DateRangeType\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = defineProps<DateRangeFieldInputProps>()\n\nconst rootContext = injectDateRangeFieldRootContext()\n\nconst hasLeftFocus = ref(true)\nconst lastKeyZero = ref(false)\n\nconst {\n handleSegmentClick,\n handleSegmentKeydown,\n attributes,\n} = useDateField({\n hasLeftFocus,\n lastKeyZero,\n placeholder: rootContext.placeholder,\n hourCycle: rootContext.hourCycle,\n segmentValues: rootContext.segmentValues[props.type],\n formatter: rootContext.formatter,\n part: props.part,\n disabled: rootContext.disabled,\n readonly: rootContext.readonly,\n focusNext: rootContext.focusNext,\n modelValue: props.type === 'start' ? rootContext.startValue : rootContext.endValue,\n})\n\nconst disabled = computed(() => rootContext.disabled.value)\nconst readonly = computed(() => rootContext.readonly.value)\nconst isInvalid = computed(() => rootContext.isInvalid.value)\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n v-bind=\"attributes\"\n :contenteditable=\"disabled || readonly ? false : part !== 'literal'\"\n :data-reka-date-field-segment=\"part\"\n :aria-disabled=\"disabled ? true : undefined\"\n :aria-readonly=\"readonly ? true : undefined\"\n :data-disabled=\"disabled ? '' : undefined\"\n :data-reka-date-range-field-segment-type=\"type\"\n :data-invalid=\"isInvalid ? '' : undefined\"\n :aria-invalid=\"isInvalid ? true : undefined\"\n v-on=\"part !== 'literal' ? {\n mousedown: handleSegmentClick,\n keydown: handleSegmentKeydown,\n focusout: () => { hasLeftFocus = true },\n focusin: (e: FocusEvent) => {\n rootContext.setFocusedElement(e.target as HTMLElement)\n },\n } : {}\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["injectDateRangeFieldRootContext","ref","useDateField","computed"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,iEAAgC,EAAA;AAEpD,IAAM,MAAA,YAAA,GAAeC,QAAI,IAAI,CAAA;AAC7B,IAAM,MAAA,WAAA,GAAcA,QAAI,KAAK,CAAA;AAE7B,IAAM,MAAA;AAAA,MACJ,kBAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,QACEC,8BAAa,CAAA;AAAA,MACf,YAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAa,WAAY,CAAA,WAAA;AAAA,MACzB,WAAW,WAAY,CAAA,SAAA;AAAA,MACvB,aAAe,EAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,MACnD,WAAW,WAAY,CAAA,SAAA;AAAA,MACvB,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,UAAU,WAAY,CAAA,QAAA;AAAA,MACtB,UAAU,WAAY,CAAA,QAAA;AAAA,MACtB,WAAW,WAAY,CAAA,SAAA;AAAA,MACvB,YAAY,KAAM,CAAA,IAAA,KAAS,OAAU,GAAA,WAAA,CAAY,aAAa,WAAY,CAAA;AAAA,KAC3E,CAAA;AAED,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAC1D,IAAA,MAAM,QAAW,GAAAA,YAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAC1D,IAAA,MAAM,SAAY,GAAAA,YAAA,CAAS,MAAM,WAAA,CAAY,UAAU,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}