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

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

import { defineComponent as s, computed as t, useSlots as u, openBlock as n, createElementBlock as l, normalizeClass as i, normalizeStyle as d, unref as a, renderSlot as m, createCommentVNode as v } from "vue";
import { Props as _ } from "./index3.js";
const y = s({
  name: "FDivider"
}), S = /* @__PURE__ */ s({
  ...y,
  props: _,
  setup(c) {
    const o = c, p = t(() => !o.vertical && Boolean(u().default)), f = t(
      () => {
        const { color: e, margin: r } = o;
        return r ? {
          margin: `${r} 0`,
          borderColor: e
        } : { borderColor: e };
      }
    );
    return (e, r) => (n(), l("div", {
      role: "separator",
      class: i([
        "f-divider",
        { "f-divider__vertical": e.vertical, [`f-divider__${e.type}`]: e.type }
      ]),
      style: d(a(f))
    }, [
      a(p) ? (n(), l("span", {
        key: 0,
        class: i(["f-divider__text", `f-divider__text-${e.position}`]),
        style: d({
          background: e.background,
          color: e.fontColor
        })
      }, [
        m(e.$slots, "default")
      ], 6)) : v("", !0)
    ], 6));
  }
});
export {
  S as default
};