1
This commit is contained in:
1
package/component/es/line/index.css
Normal file
1
package/component/es/line/index.css
Normal file
@@ -0,0 +1 @@
|
||||
.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)}
|
||||
72
package/component/es/line/index.js
Normal file
72
package/component/es/line/index.js
Normal file
@@ -0,0 +1,72 @@
|
||||
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 };
|
||||
Reference in New Issue
Block a user