hongluan-ui
Version:
Hongluan Component Library for Vue 3
99 lines (96 loc) • 3.68 kB
JavaScript
import { defineComponent, ref, computed, inject, nextTick, onMounted, provide, reactive, toRefs, watch, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot } from 'vue';
import '../../../constants/index.mjs';
import '../../../tokens/index.mjs';
import '../../../hooks/index.mjs';
import { HlGroup } from '../../group/index.mjs';
import { radioGroupProps } from './radio-group2.mjs';
import '../../../utils/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { formItemContextKey, FormItemEvents } from '../../../tokens/form.mjs';
import { useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useConsistentProp } from '../../../hooks/use-consistent-prop/index.mjs';
import { radioGroupKey } from '../../../tokens/radio.mjs';
import { debugWarn } from '../../../utils/error.mjs';
const _sfc_main = defineComponent({
name: "RadioGroup",
components: { HlGroup },
props: radioGroupProps,
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props, ctx) {
const radioGroupRef = ref();
const radioId = useId();
const name = computed(() => {
return props.name || radioId.value;
});
const formItem = inject(formItemContextKey, {});
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: formItem
});
const { namespace } = useNamespace("radio-group");
const { size, disabled, fill } = useConsistentProp();
const changeEvent = (value) => {
ctx.emit(UPDATE_MODEL_EVENT, value);
nextTick(() => ctx.emit("change", value));
};
onMounted(() => {
const radios = radioGroupRef.value.$el.querySelectorAll("[type=radio]");
const firstLabel = radios[0];
if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
firstLabel.tabIndex = 0;
}
});
provide(radioGroupKey, reactive({
...toRefs(props),
changeEvent,
name
}));
watch(() => props.modelValue, () => {
var _a;
if (props.validateEvent) {
(_a = formItem.validate) == null ? void 0 : _a.call(formItem, FormItemEvents.change).catch((err) => debugWarn(err));
}
});
return {
namespace,
size,
disabled,
fill,
radioGroupRef,
formItem,
groupId,
isLabeledByFormItem
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_group = resolveComponent("hl-group");
return openBlock(), createBlock(_component_hl_group, {
id: _ctx.groupId,
ref: "radioGroupRef",
class: normalizeClass([_ctx.namespace]),
dir: _ctx.dir,
merge: _ctx.merge,
indent: _ctx.indent,
gap: _ctx.gap,
"gap-x": _ctx.gapX,
"gap-y": _ctx.gapY,
full: _ctx.full,
wrap: _ctx.wrap,
align: _ctx.align,
block: _ctx.block,
role: "radiogroup",
"aria-label": !_ctx.isLabeledByFormItem ? _ctx.ariaLabel || _ctx.label || "radio-group" : void 0,
"aria-labelledby": _ctx.isLabeledByFormItem ? _ctx.formItem.labelId : void 0
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "class", "dir", "merge", "indent", "gap", "gap-x", "gap-y", "full", "wrap", "align", "block", "aria-label", "aria-labelledby"]);
}
var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { RadioGroup as default };
//# sourceMappingURL=radio-group.mjs.map