hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 4.21 kB
Source Map (JSON)
{"version":3,"file":"radio-group.mjs","sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n <hl-group\n :id=\"groupId\"\n ref=\"radioGroupRef\"\n :class=\"[namespace]\"\n :dir=\"dir\"\n :merge=\"merge\"\n :indent=\"indent\"\n :gap=\"gap\"\n :gap-x=\"gapX\"\n :gap-y=\"gapY\"\n :full=\"full\"\n :wrap=\"wrap\"\n :align=\"align\"\n :block=\"block\"\n role=\"radiogroup\"\n :aria-label=\"!isLabeledByFormItem ? ariaLabel || label || 'radio-group' : undefined\"\n :aria-labelledby=\"isLabeledByFormItem ? formItem.labelId : undefined\"\n >\n <slot></slot>\n </hl-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, nextTick, provide, onMounted, ref, reactive, toRefs, watch, inject, computed } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@hongluan-ui/constants'\nimport { radioGroupKey, formItemContextKey, FormItemEvents } from '@hongluan-ui/tokens'\nimport { useConsistentProp, useId, useNamespace, useFormItemInputId } from '@hongluan-ui/hooks'\nimport { HlGroup } from '@hongluan-ui/components/group'\nimport { radioGroupProps } from './radio-group'\n\nimport type { RadioGroupProps } from '..'\nimport type { FormItemContext } from '@hongluan-ui/tokens'\nimport { debugWarn } from '@hongluan-ui/utils'\n\nexport default defineComponent({\n name: 'RadioGroup',\n components: { HlGroup },\n props: radioGroupProps,\n emits: [UPDATE_MODEL_EVENT, 'change'],\n\n setup(props, ctx) {\n const radioGroupRef = ref<{ $el: HTMLDivElement; }>()\n const radioId = useId()\n\n const name = computed(() => {\n return props.name || radioId.value\n })\n\n const formItem = inject(formItemContextKey, {} as FormItemContext)\n const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(\n props,\n {\n formItemContext: formItem,\n },\n )\n\n const { namespace } = useNamespace('radio-group')\n const { size, disabled, fill } = useConsistentProp()\n\n const changeEvent = (value: RadioGroupProps['modelValue']) => {\n ctx.emit(UPDATE_MODEL_EVENT, value)\n nextTick(() => ctx.emit('change', value))\n }\n\n onMounted(() => {\n const radios =\n radioGroupRef.value.$el.querySelectorAll<HTMLInputElement>('[type=radio]')\n const firstLabel = radios[0]\n if (!Array.from(radios).some(radio => radio.checked) && firstLabel) {\n firstLabel.tabIndex = 0\n }\n })\n\n provide(\n radioGroupKey,\n reactive({\n ...toRefs(props),\n changeEvent,\n name,\n }),\n )\n\n watch(\n () => props.modelValue,\n () => {\n if (props.validateEvent) {\n formItem.validate?.(FormItemEvents.change).catch(err => debugWarn(err))\n }\n },\n )\n\n return {\n namespace,\n size,\n disabled,\n fill,\n radioGroupRef,\n formItem,\n groupId,\n isLabeledByFormItem,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE;AAAQ,EACtB,OAAO;AAAA,EACP,OAAO,CAAC,oBAAoB,QAAQ;AAAA,EAEpC,MAAM,OAAO,KAAK;AAChB,UAAM,gBAAgB;AACtB,UAAM,UAAU;AAEhB,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM,QAAQ,QAAQ;AAAA,KAC9B;AAED,UAAM,WAAW,OAAO,oBAAoB,EAAqB;AACjE,UAAM,EAAE,SAAS,SAAS,wBAAwB,mBAChD,OACA;AAAA,MACE,iBAAiB;AAAA,KAErB;AAEA,UAAM,EAAE,cAAc,aAAa,aAAa;AAChD,UAAM,EAAE,MAAM,UAAU,SAAS;AAEjC,UAAM,cAAc,CAAC,UAAyC;AAC5D,UAAI,KAAK,oBAAoB,KAAK;AAClC,eAAS,MAAM,IAAI,KAAK,UAAU,KAAK,CAAC;AAAA;AAG1C,cAAU,MAAM;AACd,YAAM,SACJ,cAAc,MAAM,IAAI,iBAAmC,cAAc;AAC3E,YAAM,aAAa,OAAO;AAC1B,UAAI,CAAC,MAAM,KAAK,MAAM,EAAE,KAAK,WAAS,MAAM,OAAO,KAAK,YAAY;AAClE,mBAAW,WAAW;AAAA;AACxB,KACD;AAED,YACE,eACA,SAAS;AAAA,SACJ,OAAO,KAAK;AAAA,MACf;AAAA,MACA;AAAA,KACD,CACH;AAEA,UACE,MAAM,MAAM,YACZ,MAAM;AACJ,UAAI;AACF;AAAsE;AACxE;AAIJ;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;;;AAnFa;AAlBJ,IACL;AAAI,IACH;AAAiB,IACjB,KAAK;AAAA,IACL;AAAO,IACP;AAAQ,IACR;AAAK,IACL,SAAO;AAAA,IACP,SAAO;AAAA,IACP;AAAM,IACN,MAAM;AAAA,IACN;AAAO,IACP,OAAO;AAAA,IACR;AAAK,IACJ;AAAyE,IACzE,mBAAiB,2BAAsB,cAAS,UAAU;AAAA;;AAE9C;AAAA;;;;;;;;;"}