birdpaper-ui/es/radio/src/radioGroup.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, computed, Comment, createVNode, mergeProps, Fragment, h } from "vue";
import { getAllElements } from "../../utils/dom.js";
const _radioGroup = /* @__PURE__ */ defineComponent({
  name: "RadioGroup",
  props: {
    /** 单选框绑定值 */
    modelValue: {
      type: [String, Number]
    },
    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    },
    /** 单选框组类型 */
    type: {
      type: String,
      default: "radio"
    },
    /** 排列方向 */
    direction: {
      type: String,
      default: "horizontal"
    }
  },
  emits: ["update:modelValue", "change"],
  setup(props, {
    emit,
    slots
  }) {
    const name = "bp-radio-group";
    const updateValue = (v) => {
      emit("update:modelValue", v);
    };
    const cls = computed(() => {
      let clsName = [name];
      clsName.push(`${name}-${props.direction}`);
      props.type === "button" && clsName.push(`${name}-button`);
      return clsName;
    });
    const render = () => {
      var _a;
      const children = getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type !== Comment);
      return createVNode("div", {
        "class": cls.value
      }, [children.map((child, index) => {
        const radio = Object.assign({}, child);
        radio.props = mergeProps(child.props, {
          ...props
        });
        return createVNode(Fragment, {
          "key": child.key ?? `item-${index}`
        }, [h(radio, {
          modelValue: props.modelValue,
          onChange(e) {
            emit("change", e);
          },
          "onUpdate:modelValue"(e) {
            updateValue(e);
          }
        })]);
      })]);
    };
    return render;
  }
});
export {
  _radioGroup as default
};