t-fighting-design/es/checkbox-group/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as p, reactive as _, toRefs as d, provide as h, computed as c, openBlock as b, createElementBlock as g, normalizeClass as k, unref as s, normalizeStyle as x, renderSlot as G } from "vue";
import { Props as v, Emits as y, checkboxGroupPropsKey as z } from "./index3.js";
import { sizeChange as n } from "../../_utils/index3.js";
const C = p({
  name: "FCheckboxGroup"
}), B = /* @__PURE__ */ p({
  ...C,
  props: v,
  emits: y,
  setup(a, { emit: l }) {
    const o = a, u = (e) => {
      l("update:modelValue", e), o.change && o.change(e);
    }, i = _({
      ...d(o),
      changeEvent: u
    });
    h(z, i);
    const m = c(() => {
      const { columnGap: e, rowGap: r } = o;
      return {
        columnGap: n(e),
        rowGap: n(r)
      };
    }), f = c(() => {
      const { border: e, vertical: r, size: t } = o;
      return [
        "f-checkbox-group",
        {
          "f-checkbox-group__border": e,
          "f-checkbox-group__vertical": r,
          [`f-checkbox-group__${t}`]: t && e
        }
      ];
    });
    return (e, r) => (b(), g("div", {
      role: "group",
      class: k(s(f)),
      style: x(s(m))
    }, [
      G(e.$slots, "default")
    ], 6));
  }
});
export {
  B as default
};