init

src/component/line/index.less

@@ -0,0 +1,55 @@
+.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-with-text {
+      margin: 14px 0;
+    }
+  }
+
+  &-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;
+  }
+
+  &-text {
+    position: absolute;
+    top: 50%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    color: currentColor;
+    line-height: 2;
+    background-color: #FFF;
+    transform: translateY(-50%);
+
+    &-center {
+      left: var(--layui-line-text-offset);
+      transform: translate(-50%, -50%);
+    }
+
+    &-left {
+      left: var(--layui-line-text-offset);
+    }
+
+    &-right {
+      right: var(--layui-line-text-offset);
+    }
+  }
+}

src/component/line/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/line/index.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+export default {
+  name: "LayLine",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import "./index.less";
+export interface LineProps {
+  direction?: "horizontal" | "vertical";
+  contentPosition?: "center" | "left" | "right";
+  borderWidth?: string;
+  borderStyle?: string;
+  offset?: string;
+  theme?: string;
+  margin?: string;
+}
+
+const props = withDefaults(defineProps<LineProps>(), {
+  direction: "horizontal",
+  contentPosition: "center",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  offset: "25px",
+  margin: "8px",
+});
+
+const slots = useSlots();
+const lineTheme: string[] = [
+  "red",
+  "orange",
+  "green",
+  "cyan",
+  "blue",
+  "black",
+  "gray",
+];
+const isBuiltInColor: boolean = lineTheme.includes(props.theme ?? "");
+
+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 : undefined,
+  "--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 undefined;
+}
+</script>
+
+<template>
+  <div :class="lineClass" :style="lineStyle">
+    <span
+      v-if="$slots.default && direction === 'horizontal'"
+      :class="[`layui-line-text layui-line-text-${contentPosition}`]"
+      :style="lineTextStyle"
+    >
+      <slot />
+    </span>
+  </div>
+</template>