sh-chart 1.2.0 → 2.1.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "sh-chart",
-  "version": "1.2.0",
+  "version": "2.1.0",
   "description": "基于echart、data-view二次封装",
-  "main": "lib/sh-chart.common.js",
+  "main": "packages/index.js",
   "scripts": {
     "lib": "vue-cli-service build --target lib packages/index.js --name sh-chart --dest lib"
   },

package/packages/components/global-components/mixin/autoResize.js

@@ -0,0 +1,152 @@
+let _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
+let _toConsumableArray2 = _interopRequireDefault(require('@babel/runtime/helpers/toConsumableArray'))
+var _typeof2 = _interopRequireDefault(require('@babel/runtime/helpers/typeof'))
+
+function debounce(delay, callback) {
+	let lastTime
+	return function () {
+		clearTimeout(lastTime)
+		const [that, args] = [this, arguments]
+		lastTime = setTimeout(() => {
+			callback.apply(that, args)
+		}, delay)
+	}
+}
+
+function observerDomResize(dom, callback) {
+	const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+	const observer = new MutationObserver(callback)
+	observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+	return observer
+}
+
+export default {
+	data() {
+		return {
+			dom: '',
+
+			width: 0,
+			height: 0,
+
+			debounceInitWHFun: '',
+
+			domObserver: ''
+		}
+	},
+	methods: {
+		uuid(hasHyphen) {
+			return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+				const r = (Math.random() * 16) | 0
+				const v = c === 'x' ? r : (r & 0x3) | 0x8
+				return v.toString(16)
+			})
+		},
+		fade(color, percent) {
+			return this.$vUtils.fade(color, percent)
+		},
+		randomExtend(minNum, maxNum) {
+			if (arguments.length === 1) {
+				return parseInt(Math.random() * minNum + 1, 10)
+			} else {
+				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+			}
+		},
+		deepMerge(target, merged) {
+			for (var key in merged) {
+				if (target[key] && (0, _typeof2['default'])(target[key]) === 'object') {
+					this.deepMerge(target[key], merged[key])
+					continue
+				}
+				if ((0, _typeof2['default'])(merged[key]) === 'object') {
+					target[key] = (0, _util.deepClone)(merged[key], true)
+					continue
+				}
+				target[key] = merged[key]
+			}
+			return target
+		},
+		getCircleRadianPoint(x, y, radius, radian) {
+			return [x + cos(radian) * radius, y + sin(radian) * radius]
+		},
+		getTwoPointDistance(pointOne, pointTwo) {
+			let minusX = Math.abs(pointOne[0] - pointTwo[0])
+			let minusY = Math.abs(pointOne[1] - pointTwo[1])
+			return Math.sqrt(minusX * minusX + minusY * minusY)
+		},
+		getPolylineLength(points) {
+			let lineSegments = new Array(points.length - 1).fill(0).map(function (foo, i) {
+				return [points[i], points[i + 1]]
+			})
+			let lengths = lineSegments.map(function (item) {
+				return this.getTwoPointDistance.apply(void 0, (0, _toConsumableArray2['default'])(item))
+			})
+			return this.$vUtils.sum(lengths)
+		},
+		async autoResizeMixinInit() {
+			const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
+
+			await initWH(false)
+
+			getDebounceInitWHFun()
+
+			bindDomResizeCallback()
+
+			if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
+		},
+		initWH(resize = true) {
+			const { $nextTick, $refs, ref, onResize } = this
+
+			return new Promise(resolve => {
+				$nextTick(_ => {
+					const dom = (this.dom = $refs[ref])
+
+					this.width = dom ? dom.clientWidth : 0
+					this.height = dom ? dom.clientHeight : 0
+
+					if (!dom) {
+						console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+					} else if (!this.width || !this.height) {
+						console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+					}
+
+					if (typeof onResize === 'function' && resize) onResize()
+
+					resolve()
+				})
+			})
+		},
+		getDebounceInitWHFun() {
+			const { initWH } = this
+
+			this.debounceInitWHFun = debounce(100, initWH)
+		},
+		bindDomResizeCallback() {
+			const { dom, debounceInitWHFun } = this
+
+			this.domObserver = observerDomResize(dom, debounceInitWHFun)
+
+			window.addEventListener('resize', debounceInitWHFun)
+		},
+		unbindDomResizeCallback() {
+			let { domObserver, debounceInitWHFun } = this
+
+			if (!domObserver) return
+
+			domObserver.disconnect()
+			domObserver.takeRecords()
+			domObserver = null
+
+			window.removeEventListener('resize', debounceInitWHFun)
+		}
+	},
+	mounted() {
+		const { autoResizeMixinInit } = this
+
+		autoResizeMixinInit()
+	},
+	beforeDestroy() {
+		const { unbindDomResizeCallback } = this
+
+		unbindDomResizeCallback()
+	}
+}

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

@@ -0,0 +1,70 @@
+<template>
+	<div :ref="ref" class="sh-border-box-1">
+		<svg class="border" :width="width" :height="height">
+			<polygon
+				:fill="backgroundColor"
+				:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+        38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+        85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+        ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+        ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+        ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+        ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+        ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+		</svg>
+
+		<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
+			<polygon :fill="mergedColor[0]" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+				<animate attributeName="fill" :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`" dur="0.5s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+			<polygon :fill="mergedColor[1]" points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+				<animate attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`" dur="0.5s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+			<polygon :fill="mergedColor[0]" points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+				<animate attributeName="fill" :values="`${mergedColor[0]};${mergedColor[1]};transparent`" dur="1s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder1',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-1 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border {
+		position: absolute;
+		display: block;
+		&.right-top {
+			right: 0;
+			transform: rotateY(180deg);
+		}
+		&.left-bottom {
+			bottom: 0;
+			transform: rotateX(180deg);
+		}
+		&.right-bottom {
+			right: 0;
+			bottom: 0;
+			transform: rotateX(180deg) rotateY(180deg);
+		}
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+	<div :ref="ref" class="sh-border-box-10">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<polygon :fill="backgroundColor" :points="`4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height} 4, ${height} 0, ${height - 4} 0, 4`" />
+		</svg>
+
+		<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border-svg-container`">
+			<polygon :fill="mergedColor[1]" points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder10',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-10 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border-radius: 6px;
+	.border-svg-container {
+		position: absolute;
+		display: block;
+	}
+	.right-top {
+		right: 0;
+		transform: rotateY(180deg);
+	}
+	.left-bottom {
+		bottom: 0;
+		transform: rotateX(180deg);
+	}
+	.right-bottom {
+		right: 0;
+		bottom: 0;
+		transform: rotateX(180deg) rotateY(180deg);
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

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

@@ -0,0 +1,207 @@
+<template>
+	<div :ref="ref" class="sh-border-box-11">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+					<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+					<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+					<feFlood :flood-color="mergedColor[1]" result="glowColor" />
+					<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+					<feMerge>
+						<feMergeNode in="softGlowColored" />
+						<feMergeNode in="SourceGraphic" />
+					</feMerge>
+				</filter>
+			</defs>
+
+			<polygon
+				:fill="backgroundColor"
+				:points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+			<polyline
+				:stroke="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				fill="transparent"
+				:points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				fill="transparent"
+				:points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `" />
+
+			<polygon
+				:stroke="mergedColor[0]"
+				:fill="fade(mergedColor[1] || defaultColor[1], 30)"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `" />
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="1"
+				:points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `">
+				<animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.7"
+				:points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `">
+				<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.5"
+				:points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `">
+				<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="1"
+				:points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `">
+				<animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.7"
+				:points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `">
+				<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<polygon
+				:filter="`url(#${filterId})`"
+				:fill="mergedColor[0]"
+				opacity="0.5"
+				:points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `">
+				<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite" />
+			</polygon>
+
+			<text class="border-box-11-title" :x="`${width / 2}`" y="32" fill="#fff" font-size="18" text-anchor="middle" dominant-baseline="middle">
+				{{ title }}
+			</text>
+
+			<polygon
+				:fill="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `" />
+
+			<polygon
+				:fill="mergedColor[0]"
+				:filter="`url(#${filterId})`"
+				:points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder11',
+	mixins: [mixin],
+	props: {
+		titleWidth: {
+			type: Number,
+			default: 250
+		},
+		title: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: {
+		filterId() {
+			return `border-box-11-filterId-${this.borderId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-11 {
+	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/border12.vue

@@ -0,0 +1,112 @@
+<template>
+	<div :ref="ref" class="sh-border-box-12">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+					<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
+					<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
+					<feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
+						<animate
+							attributeName="flood-color"
+							:values="`
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+                ${fade(mergedColor[1] || defaultColor[1], 30)};
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+              `"
+							dur="3s"
+							begin="0s"
+							repeatCount="indefinite" />
+					</feFlood>
+					<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+					<feMerge>
+						<feMergeNode in="softGlowColored" />
+						<feMergeNode in="SourceGraphic" />
+					</feMerge>
+				</filter>
+			</defs>
+
+			<path
+				v-if="width && height"
+				:fill="backgroundColor"
+				stroke-width="2"
+				:stroke="mergedColor[0]"
+				:d="`
+          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
+          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
+          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
+          Q 5 5 15 5
+        `" />
+
+			<path stroke-width="2" fill="transparent" stroke-linecap="round" :filter="`url(#${filterId})`" :stroke="mergedColor[1]" :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`" />
+
+			<path
+				stroke-width="2"
+				fill="transparent"
+				stroke-linecap="round"
+				:filter="`url(#${filterId})`"
+				:stroke="mergedColor[1]"
+				:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`" />
+
+			<path
+				stroke-width="2"
+				fill="transparent"
+				stroke-linecap="round"
+				:filter="`url(#${filterId})`"
+				:stroke="mergedColor[1]"
+				:d="`
+          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
+          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
+          L ${width - 5} ${height - 20}
+        `" />
+
+			<path
+				stroke-width="2"
+				fill="transparent"
+				stroke-linecap="round"
+				:filter="`url(#${filterId})`"
+				:stroke="mergedColor[1]"
+				:d="`
+          M 20 ${height - 5} L 15 ${height - 5}
+          Q 5 ${height - 5} 5 ${height - 15}
+          L 5 ${height - 20}
+        `" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder12',
+	mixins: [mixin],
+	computed: {
+		filterId() {
+			return `border-box-11-filterId-${this.borderId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-12 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+	<div :ref="ref" class="sh-border-box-13">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<path
+				:fill="backgroundColor"
+				:stroke="mergedColor[0]"
+				:d="`
+          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+          L ${width - 20} 10 L ${width - 5} 25
+          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L 5 ${height - 20} L 5 20
+        `" />
+			<path fill="transparent" stroke-width="3" stroke-linecap="round" stroke-dasharray="10, 5" :stroke="mergedColor[0]" :d="`M 16 9 L 61 9`" />
+			<path fill="transparent" :stroke="mergedColor[1]" :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`" />
+			<path fill="transparent" :stroke="mergedColor[1]" :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder13',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-13 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>