vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
42 lines (41 loc) • 1.89 kB
JavaScript
import { defineComponent as v, computed as r, createElementBlock as n, openBlock as o, normalizeStyle as h, normalizeClass as c, createCommentVNode as f, renderSlot as s } from "vue";
import { useSlotsExist as g } from "../utils/index.js";
const m = {
key: 0,
class: "divider-text"
}, $ = /* @__PURE__ */ v({
__name: "Divider",
props: {
orientation: { default: "center" },
orientationMargin: { default: void 0 },
borderWidth: { default: 1 },
borderStyle: { default: "solid" },
borderColor: { default: "rgba(5, 5, 5, 0.06)" },
vertical: { type: Boolean, default: !1 },
height: { default: "0.9em" }
},
setup(e) {
const i = e, a = g(["default"]), d = r(() => typeof i.orientationMargin == "number" ? `${i.orientationMargin}px` : i.orientationMargin), l = r(() => typeof i.height == "number" ? `${i.height}px` : i.height), t = r(() => a.default);
return (u, b) => (o(), n("div", {
class: c(["divider-wrap", [
e.vertical ? "divider-vertical" : "divider-horizontal",
{
"divider-with-text": t.value,
"divider-with-text-center": t.value && e.orientation === "center",
"divider-with-text-left": t.value && e.orientation === "left",
"divider-with-text-right": t.value && e.orientation === "right",
"divider-orientation-margin-left": t.value && e.orientation === "left" && e.orientationMargin !== void 0,
"divider-orientation-margin-right": t.value && e.orientation === "right" && e.orientationMargin !== void 0
}
]]),
style: h(`--border-width: ${e.borderWidth}px; --border-style: ${e.borderStyle}; --border-color: ${e.borderColor}; --margin: ${d.value}; --line-height: ${l.value};`)
}, [
t.value ? (o(), n("span", m, [
s(u.$slots, "default", {}, void 0, !0)
])) : f("", !0)
], 6));
}
});
export {
$ as default
};