t-fighting-design/es/toolbar/src/index2.js

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

import { defineComponent as a, computed as s, openBlock as m, createElementBlock as u, normalizeClass as _, unref as c, normalizeStyle as h, renderSlot as k } from "vue";
import { Props as b } from "./index3.js";
const y = a({
  name: "FToolbar"
}), z = /* @__PURE__ */ a({
  ...y,
  props: b,
  setup(l) {
    const r = l, i = s(() => {
      const { size: o, round: e, fixed: t } = r;
      return [
        "f-toolbar",
        {
          [`f-toolbar__${o}`]: o,
          "f-toolbar__round": e,
          "f-toolbar__fixed": t
        }
      ];
    }), d = s(() => {
      const { textColor: o, background: e, width: t, height: n } = r;
      return {
        color: o,
        background: e,
        width: t,
        height: n
      };
    }), p = (o) => {
      const t = (o.path || o.composedPath && o.composedPath() || []).find(
        (f) => f.className === "f-toolbar-item"
      ), n = t ? t.dataset.key : "";
      r.click && r.click({ evt: o, key: n });
    };
    return (o, e) => (m(), u("div", {
      class: _(c(i)),
      style: h(c(d)),
      onClick: p
    }, [
      k(o.$slots, "default")
    ], 6));
  }
});
export {
  z as default
};