layui-vue/es/line/index.js

73 lines
3.4 KiB
JavaScript
Raw Normal View History

2022-11-14 11:59:26 +08:00
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 };