birdpaper-ui/es/buttonGroup/src/buttonGroup.js

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

import { defineComponent, computed, Comment, createVNode, mergeProps, Fragment } from "vue";
import { getAllElements } from "../../utils/dom.js";
const _buttonGroup = /* @__PURE__ */ defineComponent({
  name: "ButtonGroup",
  props: {
    /** 按钮类型 Type of the button */
    type: {
      type: String,
      default: "normal"
    },
    /** 按钮尺寸 Size of the button */
    size: {
      type: String,
      default: "normal"
    },
    /** 按钮形状 Shape of the button */
    shape: {
      type: String,
      default: "square"
    },
    /** 按钮状态 Status of the button */
    status: {
      type: String,
      default: "normal"
    },
    /** 是否撑满父级 Block or not */
    block: {
      type: Boolean,
      default: false
    }
  },
  setup(props, {
    slots
  }) {
    const name = "bp-button-group";
    const cls = computed(() => {
      let clsName = [name];
      !["plain", "dashed"].includes(props.type) && clsName.push(`${name}-type-${props.type}-status-${props.status}`);
      props.block && clsName.push(`${name}-block`);
      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 btn = Object.assign({}, child);
        btn.props = mergeProps(child.props, {
          ...props
        });
        return createVNode(Fragment, {
          "key": child.key ?? `item-${index}`
        }, [btn]);
      })]);
    };
    return render;
  }
});
export {
  _buttonGroup as default
};