build: 发布 1.0.4 版本

package/component/src/component/line/index.vue

@@ -5,68 +5,75 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { computed, useSlots } from "vue";
-import './index.less'
+import "./index.less";
 export interface LayLineProps {
-  direction?: 'horizontal' | 'vertical';
+  direction?: "horizontal" | "vertical";
-  contentPosition?: 'center' | 'left' | 'right';
+  contentPosition?: "center" | "left" | "right";
   borderWidth?: string;
   borderStyle?: string;
   offset?: string;
   theme?: string;
 }
 
-const props = withDefaults(defineProps<LayLineProps>(),{
+const props = withDefaults(defineProps<LayLineProps>(), {
-  direction: 'horizontal',
+  direction: "horizontal",
-  contentPosition: 'center',
+  contentPosition: "center",
-  borderWidth: '1px',
+  borderWidth: "1px",
-  borderStyle: 'solid',
+  borderStyle: "solid",
-  offset: '25px',
+  offset: "25px",
-})
+});
 
 const slots = useSlots();
-const lineTheme: string[] = ['red', 'orange', 'green', 'cyan', 'blue', 'black', 'gray'];
+const lineTheme: string[] = [
+  "red",
+  "orange",
+  "green",
+  "cyan",
+  "blue",
+  "black",
+  "gray",
+];
 const isSupportedTheme: boolean = lineTheme.includes(props.theme ?? "");
 
-const lineClass = computed(() => ([
+const lineClass = computed(() => [
   `layui-line-${props.direction}`,
   {
     [`layui-border-${props.theme}`]: isSupportedTheme,
-    [`layui-line-with-text`]: Boolean(slots.default)}
+    [`layui-line-with-text`]: Boolean(slots.default),
-  ])
+  },
-);
+]);
 
 const lineStyle = computed(() => ({
-  'border-color': !isSupportedTheme ? props.theme : undefined,
+  "border-color": !isSupportedTheme ? props.theme : undefined,
-  '--layui-line-border-width': props.borderWidth,
+  "--layui-line-border-width": props.borderWidth,
-  '--layui-line-border-style': props.borderStyle,
+  "--layui-line-border-style": props.borderStyle,
 }));
 
 const lineTextStyle = computed(() => ({
-  '--layui-line-text-offset': (props.contentPosition != 'center' ?  props.offset : '50%'),
+  "--layui-line-text-offset":
-  'transform': calcTranslate()
+    props.contentPosition != "center" ? props.offset : "50%",
+  transform: calcTranslate(),
 }));
 
-function calcTranslate(){
+function calcTranslate() {
-  if(props.offset.includes("%")){
+  if (props.offset.includes("%")) {
-    return props.contentPosition === 'right' 
+    return props.contentPosition === "right"
-    ? 'translate(50%, -50%)'
+      ? "translate(50%, -50%)"
-    : 'translate(-50%, -50%)'
+      : "translate(-50%, -50%)";
   }
-  return undefined
+  return undefined;
 }
 </script>
 
 <template>
-  <div 
+  <div :class="lineClass" :style="lineStyle">
-    :class="lineClass"
+    <span
-    :style="lineStyle"
+      v-if="$slots.default && direction === 'horizontal'"
-  >
-    <span v-if="$slots.default && direction === 'horizontal'"
       :class="[`layui-line-text layui-line-text-${contentPosition}`]"
       :style="lineTextStyle"
     >
-      <slot/>
+      <slot />
     </span>
   </div>
 </template>