73 lines
3.4 KiB
JavaScript
73 lines
3.4 KiB
JavaScript
|
import { w as withInstall } from "../badge/index2.js";
|
||
|
|
import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode } from "vue";
|
||
|
|
var index = /* @__PURE__ */ (() => ".layui-line-horizontal{position:relative;clear:both;width:100%;min-width:100%;max-width:100%;margin:var(--layui-line-margin) 0;border-bottom:var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);border-top-style:none;border-left-style:none;border-right-style:none}.layui-line-horizontal.layui-line-with-text{margin:14px 0}.layui-line-vertical{display:inline-block;min-width:1px;max-width:1px;height:1em;margin:0 var(--layui-line-margin);vertical-align:middle;border-left:var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);border-top-style:none;border-bottom-style:none;border-right-style:none}.layui-line-text{position:absolute;top:50%;box-sizing:border-box;padding:0 10px;color:currentColor;line-height:2;background-color:#fff;transform:translateY(-50%)}.layui-line-text-center{left:var(--layui-line-text-offset);transform:translate(-50%,-50%)}.layui-line-text-left{left:var(--layui-line-text-offset)}.layui-line-text-right{right:var(--layui-line-text-offset)}\n")();
|
||
|
|
const __default__ = {
|
||
|
|
name: "LayLine"
|
||
|
|
};
|
||
|
|
const _sfc_main = defineComponent({
|
||
|
|
...__default__,
|
||
|
|
props: {
|
||
|
|
direction: { default: "horizontal" },
|
||
|
|
contentPosition: { default: "center" },
|
||
|
|
borderWidth: { default: "1px" },
|
||
|
|
borderStyle: { default: "solid" },
|
||
|
|
offset: { default: "25px" },
|
||
|
|
theme: null,
|
||
|
|
margin: { default: "8px" }
|
||
|
|
},
|
||
|
|
setup(__props) {
|
||
|
|
var _a;
|
||
|
|
const props = __props;
|
||
|
|
const slots = useSlots();
|
||
|
|
const lineTheme = [
|
||
|
|
"red",
|
||
|
|
"orange",
|
||
|
|
"green",
|
||
|
|
"cyan",
|
||
|
|
"blue",
|
||
|
|
"black",
|
||
|
|
"gray"
|
||
|
|
];
|
||
|
|
const isBuiltInColor = lineTheme.includes((_a = props.theme) != null ? _a : "");
|
||
|
|
const lineClass = computed(() => [
|
||
|
|
`layui-line-${props.direction}`,
|
||
|
|
{
|
||
|
|
[`layui-border-${props.theme}`]: isBuiltInColor,
|
||
|
|
[`layui-line-with-text`]: Boolean(slots.default)
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
const lineStyle = computed(() => ({
|
||
|
|
"border-color": !isBuiltInColor ? props.theme : void 0,
|
||
|
|
"--layui-line-border-width": props.borderWidth,
|
||
|
|
"--layui-line-border-style": props.borderStyle,
|
||
|
|
"--layui-line-margin": props.margin
|
||
|
|
}));
|
||
|
|
const lineTextStyle = computed(() => ({
|
||
|
|
"--layui-line-text-offset": props.contentPosition != "center" ? props.offset : "50%",
|
||
|
|
transform: calcTranslate()
|
||
|
|
}));
|
||
|
|
function calcTranslate() {
|
||
|
|
if (props.offset.includes("%")) {
|
||
|
|
return props.contentPosition === "right" ? "translate(50%, -50%)" : "translate(-50%, -50%)";
|
||
|
|
}
|
||
|
|
return void 0;
|
||
|
|
}
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", {
|
||
|
|
class: normalizeClass(unref(lineClass)),
|
||
|
|
style: normalizeStyle(unref(lineStyle))
|
||
|
|
}, [
|
||
|
|
_ctx.$slots.default && __props.direction === "horizontal" ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
class: normalizeClass([`layui-line-text layui-line-text-${__props.contentPosition}`]),
|
||
|
|
style: normalizeStyle(unref(lineTextStyle))
|
||
|
|
}, [
|
||
|
|
renderSlot(_ctx.$slots, "default")
|
||
|
|
], 6)) : createCommentVNode("", true)
|
||
|
|
], 6);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const component = withInstall(_sfc_main);
|
||
|
|
export { component as default };
|