hongluan-ui/lib/components/radio/src/radio-group.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../constants/index.js');
require('../../../tokens/index.js');
require('../../../hooks/index.js');
var index = require('../../group/index.js');
var radioGroup = require('./radio-group2.js');
require('../../../utils/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var event = require('../../../constants/event.js');
var index$1 = require('../../../hooks/use-id/index.js');
var form = require('../../../tokens/form.js');
var index$2 = require('../../../hooks/use-form-item/index.js');
var index$3 = require('../../../hooks/use-namespace/index.js');
var index$4 = require('../../../hooks/use-consistent-prop/index.js');
var radio = require('../../../tokens/radio.js');
var error = require('../../../utils/error.js');

const _sfc_main = vue.defineComponent({
  name: "RadioGroup",
  components: { HlGroup: index.HlGroup },
  props: radioGroup.radioGroupProps,
  emits: [event.UPDATE_MODEL_EVENT, "change"],
  setup(props, ctx) {
    const radioGroupRef = vue.ref();
    const radioId = index$1.useId();
    const name = vue.computed(() => {
      return props.name || radioId.value;
    });
    const formItem = vue.inject(form.formItemContextKey, {});
    const { inputId: groupId, isLabeledByFormItem } = index$2.useFormItemInputId(props, {
      formItemContext: formItem
    });
    const { namespace } = index$3.useNamespace("radio-group");
    const { size, disabled, fill } = index$4.useConsistentProp();
    const changeEvent = (value) => {
      ctx.emit(event.UPDATE_MODEL_EVENT, value);
      vue.nextTick(() => ctx.emit("change", value));
    };
    vue.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;
      }
    });
    vue.provide(radio.radioGroupKey, vue.reactive({
      ...vue.toRefs(props),
      changeEvent,
      name
    }));
    vue.watch(() => props.modelValue, () => {
      var _a;
      if (props.validateEvent) {
        (_a = formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.change).catch((err) => error.debugWarn(err));
      }
    });
    return {
      namespace,
      size,
      disabled,
      fill,
      radioGroupRef,
      formItem,
      groupId,
      isLabeledByFormItem
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_group = vue.resolveComponent("hl-group");
  return vue.openBlock(), vue.createBlock(_component_hl_group, {
    id: _ctx.groupId,
    ref: "radioGroupRef",
    class: vue.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: vue.withCtx(() => [
      vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = RadioGroup;
//# sourceMappingURL=radio-group.js.map