init

.svn/pristine/ef/ef340101aee256882d8235bf486160438fd0b82a.svn-base

@@ -0,0 +1,2 @@
+x
<01><>K<0E>0DY<44><14>}<7D><>Y<EFBFBD><1B><><EFBFBD>.X
+q<EFBFBD>* <20>N<EFBFBD>J!l,k<~ck<63><1A><>vu<76><75>caS<61><53>Հ<>!;<3B>Ta<>UUm<55>-<2D>ȕS<C895>G0<1A>$l<><6C>\<5C><>Y+B<>	<09>	*E.<2E><>I<04><>=<3D><><EFBFBD>!<21><>U<EFBFBD>/<2F><><EFBFBD><EFBFBD><EFBFBD>+<2B>Ny<>#<23><>гI<17>c<EFBFBD><63><EFBFBD><EFBFBD><EFBFBD>8<EFBFBD><38>U:dwDX/<2F>)<1B>!<21>)a׶.<2E>Dv<12>DO<44><4F><EFBFBD><EFBFBD><EFBFBD>:S>x/9-r0

.svn/pristine/ef/ef80bb0d2887ea805d301f35a92eeb8cb2c17fee.svn-base

@@ -0,0 +1 @@
+x
<01>Q<EFBFBD>N<EFBFBD> <14>ٯ <20><>iڭ[6<><14><05><><EFBFBD><1A><>l<EFBFBD><6C>b<EFBFBD><62>ZCH.<2E><><EFBFBD><EFBFBD>9<EFBFBD>B[<5B><><EFBFBD><EFBFBD><EFBFBD>P<EFBFBD>{<7B>N<04><><EFBFBD><EFBFBD>aP<61><50><EFBFBD>d`<10><>Zy<5A>/<2F><05><02>@hkA)ԗdq<64><71>R`V<><56><1B><>;9<><39>	<09>ûfy:OL<> <20><19>s<EFBFBD><73><EFBFBD><EFBFBD>E<EFBFBD><45>]]W<><<3C><>p

.svn/pristine/ef/efd28cd40cd3721394625bf50a2d4306c808ac1b.svn-base

@@ -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>