reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.51 kB
Source Map (JSON)
{"version":3,"file":"RadioGroupItem.cjs","sources":["../../src/RadioGroup/RadioGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef } from 'vue'\nimport type { RadioProps } from './Radio.vue'\nimport { createContext, useForwardExpose } from '@/shared'\nimport type { SelectEvent } from './utils'\n\nexport interface RadioGroupItemProps extends Omit<RadioProps, 'checked'> {}\nexport type RadioGroupItemEmits = {\n select: [event: SelectEvent]\n}\n\ninterface RadioGroupItemContext {\n disabled: ComputedRef<boolean>\n checked: ComputedRef<boolean>\n}\n\nexport const [injectRadioGroupItemContext, provideRadiogroupItemContext]\n = createContext<RadioGroupItemContext>('RadioGroupItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Radio from './Radio.vue'\nimport { injectRadioGroupRootContext } from './RadioGroupRoot.vue'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { useEventListener } from '@vueuse/core'\nimport { isEqual } from 'ohash'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<RadioGroupItemProps>(), {\n disabled: false,\n as: 'button',\n})\n\nconst emits = defineEmits<RadioGroupItemEmits>()\n\ndefineSlots<{\n default: (props: {\n /** Current checked state */\n checked: typeof checked.value\n /** Required state */\n required: typeof required.value\n /** Disabled state */\n disabled: typeof disabled.value\n }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectRadioGroupRootContext()\n\nconst disabled = computed(() => rootContext.disabled.value || props.disabled)\nconst required = computed(() => rootContext.required.value || props.required)\nconst checked = computed(() => isEqual(rootContext.modelValue?.value, props.value))\n\nprovideRadiogroupItemContext({ disabled, checked })\n\nconst isArrowKeyPressed = ref(false)\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nuseEventListener('keydown', (event) => {\n if (ARROW_KEYS.includes(event.key))\n isArrowKeyPressed.value = true\n})\nuseEventListener('keyup', () => {\n isArrowKeyPressed.value = false\n})\n\nfunction handleFocus() {\n setTimeout(() => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to 'check' it in that case. We click it to 'check' it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressed.value)\n currentElement.value?.click()\n }, 0)\n}\n</script>\n\n<template>\n <RovingFocusItem\n :checked=\"checked\"\n :disabled=\"disabled\"\n as-child\n :focusable=\"!disabled\"\n :active=\"checked\"\n >\n <Radio\n v-bind=\"{ ...$attrs, ...props }\"\n :ref=\"forwardRef\"\n :checked=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n @update:checked=\"rootContext.changeModelValue(value)\"\n @select=\"emits('select', $event)\"\n @keydown.enter.prevent\n @focus=\"handleFocus\"\n >\n <slot\n :checked=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n </Radio>\n </RovingFocusItem>\n</template>\n"],"names":["createContext","useForwardExpose","injectRadioGroupRootContext","computed","isEqual","ref","useEventListener"],"mappings":";;;;;;;;;;;AAgBO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnEA,mCAAqC,gBAAgB;;;;;;;;;;;;;;;;;AAezD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAad,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,qDAA4B,EAAA;AAEhD,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,QAAS,CAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC5E,IAAA,MAAM,WAAWA,YAAS,CAAA,MAAM,YAAY,QAAS,CAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC5E,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAMC,aAAA,CAAQ,YAAY,UAAY,EAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAElF,IAA6B,4BAAA,CAAA,EAAE,QAAU,EAAA,OAAA,EAAS,CAAA;AAElD,IAAM,MAAA,iBAAA,GAAoBC,QAAI,KAAK,CAAA;AACnC,IAAA,MAAM,UAAa,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,aAAa,YAAY,CAAA;AAErE,IAAiBC,qBAAA,CAAA,SAAA,EAAW,CAAC,KAAU,KAAA;AACrC,MAAI,IAAA,UAAA,CAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AAC/B,QAAA,iBAAA,CAAkB,KAAQ,GAAA,IAAA;AAAA,KAC7B,CAAA;AACD,IAAAA,qBAAA,CAAiB,SAAS,MAAM;AAC9B,MAAA,iBAAA,CAAkB,KAAQ,GAAA,KAAA;AAAA,KAC3B,CAAA;AAED,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,UAAA,CAAW,MAAM;AAMf,QAAA,IAAI,iBAAkB,CAAA,KAAA;AACpB,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}