sh-chart 1.2.0 → 2.1.0

package/packages/components/global-components/sh-border/components/border2.vue

@@ -0,0 +1,50 @@
+<template>
+	<div :ref="ref" class="sh-border-box-2">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}`" />
+
+			<polyline :stroke="mergedColor[0]" :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
+			<polyline :stroke="mergedColor[1]" :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
+			<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
+			<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
+			<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
+			<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder2',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-2 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		& > polyline {
+			fill: none;
+			stroke-width: 1;
+		}
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border3.vue

@@ -0,0 +1,53 @@
+<template>
+	<div :ref="ref" class="sh-border-box-3">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}`" />
+
+			<polyline class="bb3-line1" :stroke="mergedColor[0]" :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+			<polyline class="bb3-line2" :stroke="mergedColor[1]" :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
+			<polyline class="bb3-line2" :stroke="mergedColor[1]" :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
+			<polyline class="bb3-line2" :stroke="mergedColor[1]" :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder3',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-3 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		& > polyline {
+			fill: none;
+		}
+	}
+	.bb3-line1 {
+		stroke-width: 3;
+	}
+	.bb3-line2 {
+		stroke-width: 1;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border4.vue

@@ -0,0 +1,95 @@
+<template>
+	<div :ref="ref" class="sh-border-box-4">
+		<svg :class="`border-svg-container ${reverse && 'reverse'}`" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24 16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}`" />
+			<polyline class="bb4-line-1" :stroke="mergedColor[0]" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35} 10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`" />
+			<polyline :stroke="mergedColor[1]" class="bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23} 14, ${height - 100}`" />
+
+			<polyline class="bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
+			<polyline class="bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
+			<polyline class="bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
+			<polyline class="bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
+			<polyline class="bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
+			<polyline class="bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
+			<polyline class="bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
+			<polyline class="bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder4',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+@mixin sw1 {
+	stroke-width: 1;
+}
+@mixin sw3 {
+	stroke-width: 3px;
+	stroke-linecap: round;
+}
+.sh-border-box-4 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.reverse {
+		transform: rotate(180deg);
+	}
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		& > polyline {
+			fill: none;
+		}
+	}
+	.bb4-line-1 {
+		@include sw1;
+	}
+	.bb4-line-2 {
+		@include sw1;
+	}
+	.bb4-line-3 {
+		@include sw3;
+	}
+	.bb4-line-4 {
+		@include sw3;
+	}
+	.bb4-line-5 {
+		@include sw1;
+	}
+	.bb4-line-6 {
+		@include sw1;
+	}
+	.bb4-line-7 {
+		@include sw1;
+	}
+	.bb4-line-8 {
+		@include sw3;
+	}
+	.bb4-line-9 {
+		@include sw3;
+		stroke-dasharray: 100 250;
+	}
+	.bb4-line-10 {
+		@include sw1;
+		stroke-dasharray: 80 270;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border5.vue

@@ -0,0 +1,64 @@
+<template>
+	<div :ref="ref" class="sh-border-box-5">
+		<svg :class="`border-svg-container  ${reverse && 'reverse'}`" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}`" />
+
+			<polyline class="bb5-line-1" :stroke="mergedColor[0]" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100} ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
+			<polyline class="bb5-line-2" :stroke="mergedColor[1]" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60} ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
+			<polyline class="bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
+			<polyline class="bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
+			<polyline class="bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
+			<polyline class="bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder5',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-5 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.reverse {
+		transform: rotate(180deg);
+	}
+	.border-svg-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		& > polyline {
+			fill: none;
+		}
+	}
+	.bb5-line-1,
+	.bb5-line-2 {
+		stroke-width: 1;
+	}
+	.bb5-line-3,
+	.bb5-line-6 {
+		stroke-width: 5;
+	}
+	.bb5-line-4,
+	.bb5-line-5 {
+		stroke-width: 2;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border6.vue

@@ -0,0 +1,60 @@
+<template>
+	<div :ref="ref" class="sh-border-box-6">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}`" />
+
+			<circle :fill="mergedColor[1]" cx="5" cy="5" r="2" />
+			<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
+			<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
+			<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
+			<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
+			<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
+			<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
+			<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
+			<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
+			<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
+			<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
+			<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
+			<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
+			<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
+			<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
+			<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder6',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-6 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		& > polyline {
+			fill: none;
+			stroke-width: 1;
+		}
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border7.vue

@@ -0,0 +1,57 @@
+<template>
+	<div :ref="ref" class="sh-border-box-7" :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polyline class="bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
+			<polyline class="bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+			<polyline class="bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+			<polyline class="bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
+
+			<polyline class="bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
+			<polyline class="bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
+			<polyline class="bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
+			<polyline class="bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder7',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-7 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		& > polyline {
+			fill: none;
+			stroke-linecap: round;
+		}
+	}
+	.bb7-line-width-2 {
+		stroke-width: 2;
+	}
+	.bb7-line-width-5 {
+		stroke-width: 5;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border8.vue

@@ -0,0 +1,75 @@
+<template>
+	<div :ref="ref" class="sh-border-box-8">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<path :id="path" :d="pathD" fill="transparent" />
+				<radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
+					<stop offset="0%" stop-color="#fff" stop-opacity="1" />
+					<stop offset="100%" stop-color="#fff" stop-opacity="0" />
+				</radialGradient>
+				<mask :id="mask">
+					<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+						<animateMotion :dur="`${dur}s`" :path="pathD" rotate="auto" repeatCount="indefinite" />
+					</circle>
+				</mask>
+			</defs>
+			<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+			<use :stroke="mergedColor[0]" stroke-width="1" :xlink:href="`#${path}`" />
+			<use :stroke="mergedColor[1]" stroke-width="3" :xlink:href="`#${path}`" :mask="`url(#${mask})`">
+				<animate attributeName="stroke-dasharray" :from="`0, ${length}`" :to="`${length}, 0`" :dur="`${dur}s`" repeatCount="indefinite" />
+			</use>
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder8',
+	mixins: [mixin],
+	computed: {
+		path() {
+			return `border-box-8-path-${this.borderId}`
+		},
+		gradient() {
+			return `border-box-8-gradient-${this.borderId}`
+		},
+		mask() {
+			return `border-box-8-mask-${this.borderId}`
+		},
+		length() {
+			const { width, height } = this
+			return (width + height - 5) * 2
+		},
+		pathD() {
+			const { reverse, width, height } = this
+			if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+			return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-8 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/components/border9.vue

@@ -0,0 +1,92 @@
+<template>
+	<div :ref="ref" class="sh-border-box-9">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+					<animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite" />
+
+					<animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite" />
+
+					<stop offset="0%" :stop-color="mergedColor[0]">
+						<animate attributeName="stop-color" :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`" dur="10s" begin="0s" repeatCount="indefinite" />
+					</stop>
+					<stop offset="100%" :stop-color="mergedColor[1]">
+						<animate attributeName="stop-color" :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`" dur="10s" begin="0s" repeatCount="indefinite" />
+					</stop>
+				</linearGradient>
+
+				<mask :id="maskId">
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`" />
+					<polyline fill="#fff" :points="`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3 ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`" />
+					<polyline fill="#fff" :points="`${width * 0.52}, 3 ${width * 0.58}, 3 ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9`" />
+					<polyline fill="#fff" :points="`${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1} ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`" />
+					<polyline fill="#fff" :points="`8, ${height * 0.55} 8, ${height * 0.7} 2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`" />
+					<polyline
+						fill="#fff"
+						:points="`${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8} ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${
+							width * 0.92 + 7
+						}, ${height - 9}`" />
+				</mask>
+			</defs>
+
+			<polygon
+				:fill="backgroundColor"
+				:points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
+			<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder9',
+	mixins: [mixin],
+	computed: {
+		gradientId() {
+			return `border-box-9-gradient-${this.borderId}`
+		},
+		maskId() {
+			return `border-box-9-mask-${this.borderId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-9 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

package/packages/components/global-components/sh-border/index.vue

@@ -0,0 +1,73 @@
+<template>
+	<component :is="borderName" class="sh-border-box" v-bind="$props">
+		<slot></slot>
+	</component>
+</template>
+
+<script>
+import border1 from './components/border1'
+import border2 from './components/border2'
+import border3 from './components/border3'
+import border4 from './components/border4'
+import border5 from './components/border5'
+import border6 from './components/border6'
+import border7 from './components/border7'
+import border8 from './components/border8'
+import border9 from './components/border9'
+import border10 from './components/border10'
+import border11 from './components/border11'
+import border12 from './components/border12'
+import border13 from './components/border13'
+export default {
+	name: 'ShBorder',
+	components: {
+		border1,
+		border2,
+		border3,
+		border4,
+		border5,
+		border6,
+		border7,
+		border8,
+		border9,
+		border10,
+		border11,
+		border12,
+		border13
+	},
+	props: {
+		type: {
+			type: [String, Number],
+			default: '1'
+		},
+		color: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		backgroundColor: {
+			type: String,
+			default: 'transparent'
+		},
+		dur: {
+			type: Number,
+			default: 3
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		borderType() {
+			return +this.type > 0 && +this.type < 14 ? this.type : 1
+		},
+		borderName() {
+			return `border${this.borderType}`
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/global-components/sh-border/mixin/border.js

@@ -0,0 +1,62 @@
+import autoResize from '../../mixin/autoResize'
+export default {
+	mixins: [autoResize],
+	props: {
+		type: {
+			type: [String, Number],
+			default: '1'
+		},
+		color: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		backgroundColor: {
+			type: String,
+			default: 'transparent'
+		},
+		dur: {
+			type: Number,
+			default: 3
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+			defaultColors: [
+				['#4fd2dd', '#235fa7'],
+				['#fff', 'rgba(255, 255, 255, 0.6)'],
+				['#2862b7', '#2862b7'],
+				['red', 'rgba(0,0,255,0.8)'],
+				['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
+				['rgba(255, 255, 255, 0.35)', 'gray'],
+				['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
+				['#235fa7', '#4fd2dd'],
+				['#11eefd', '#0078d2'],
+				['#1d48c4', '#d3e1f8'],
+				['#8aaafb', '#1f33a2'],
+				['#2e6099', '#7ce7fd'],
+				['#6586ec', '#2cf7fe']
+			]
+		}
+	},
+	computed: {
+		ref() {
+			return `sh-border-box-${this.type}`
+		},
+		borderId() {
+			return this.uuid()
+		},
+		mergedColor() {
+			let defaultColor = this.defaultColors[this.type - 1]
+			return this.deepMerge(defaultColor, this.color)
+		}
+	},
+	methods: {},
+	mounted() {}
+}