sh-chart 1.5.2

package/packages/components/global-components/sh-decoration/components/decoration12.vue

@@ -0,0 +1,171 @@
+<template>
+	<div :ref="ref" class="sh-decoration-12">
+		<svg :width="width" :height="height">
+			<defs>
+				<g :id="gId">
+					<path v-for="(d, i) in pathD" :key="d" :stroke="pathColor[i]" :stroke-width="width / 2" fill="transparent" :d="d" />
+				</g>
+				<radialGradient :id="gradientId" cx="50%" cy="50%" r="50%">
+					<stop offset="0%" stop-color="transparent" stop-opacity="1" />
+					<stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
+				</radialGradient>
+			</defs>
+
+			<circle v-for="r in circleR" :key="r" :r="r" :cx="x" :cy="y" :stroke="mergedColor[1]" :stroke-width="0.5" fill="transparent" />
+
+			<circle r="1" :cx="x" :cy="y" stroke="transparent" :fill="`url(#${gradientId})`">
+				<animate attributeName="r" :values="`1;${width / 2}`" :dur="`${haloDur}s`" repeatCount="indefinite" />
+				<animate attributeName="opacity" values="1;0" :dur="`${haloDur}s`" repeatCount="indefinite" />
+			</circle>
+
+			<circle r="2" :cx="x" :cy="y" :fill="mergedColor[1]" />
+
+			<g v-if="showSplitLine">
+				<polyline v-for="p in splitLinePoints" :key="p" :points="p" :stroke="mergedColor[1]" :stroke-width="0.5" opacity="0.5" />
+			</g>
+
+			<path v-for="d in arcD" :key="d" :d="d" :stroke="mergedColor[1]" stroke-width="2" fill="transparent" />
+
+			<use :xlink:href="`#${gId}`">
+				<animateTransform attributeName="transform" type="rotate" :values="`0, ${x} ${y};360, ${x} ${y}`" :dur="`${scanDur}s`" repeatCount="indefinite" />
+			</use>
+		</svg>
+
+		<div class="decoration-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration12',
+	mixins: [mixin],
+	props: {
+		/**
+		 * @description Scan animation dur
+		 */
+		scanDur: {
+			type: Number,
+			default: 3
+		},
+		/**
+		 * @description Halo animation dur
+		 */
+		haloDur: {
+			type: Number,
+			default: 2
+		}
+	},
+	data() {
+		return {
+			pathD: [],
+			pathColor: [],
+			circleR: [],
+			splitLinePoints: [],
+			arcD: [],
+			segment: 30,
+			sectorAngle: Math.PI / 3,
+			ringNum: 3,
+			ringWidth: 1,
+			showSplitLine: true
+		}
+	},
+	computed: {
+		gId() {
+			return `decoration-12-g-${this.decorationId}`
+		},
+		gradientId() {
+			return `decoration-12-gradient-${this.decorationId}`
+		},
+		x() {
+			const { width } = this
+			return width / 2
+		},
+		y() {
+			const { height } = this
+			return height / 2
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
+			calcPathD()
+			calcPathColor()
+			calcCircleR()
+			calcSplitLinePoints()
+			calcArcD()
+		},
+		calcPathD() {
+			const { x, y, width, segment, sectorAngle } = this
+			const startAngle = -Math.PI / 2
+			const angleGap = sectorAngle / segment
+			const r = width / 4
+			let lastEndPoints = this.getCircleRadianPoint(x, y, r, startAngle)
+			this.pathD = new Array(segment).fill('').map((_, i) => {
+				const endPoints = this.getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
+				const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
+				lastEndPoints = endPoints
+				return d
+			})
+		},
+		calcPathColor() {
+			const {
+				mergedColor: [color],
+				segment
+			} = this
+			const colorGap = 100 / (segment - 1)
+			this.pathColor = new Array(segment).fill(color).map((_, i) => this.fade(color, 100 - i * colorGap))
+		},
+		calcCircleR() {
+			const { segment, ringNum, width, ringWidth } = this
+			const radiusGap = (width / 2 - ringWidth / 2) / ringNum
+			this.circleR = new Array(ringNum).fill(0).map((_, i) => radiusGap * (i + 1))
+		},
+		calcSplitLinePoints() {
+			const { x, y, width } = this
+			const angleGap = Math.PI / 6
+			const r = width / 2
+			this.splitLinePoints = new Array(6).fill('').map((_, i) => {
+				const startAngle = angleGap * (i + 1)
+				const endAngle = startAngle + Math.PI
+				const startPoint = this.getCircleRadianPoint(x, y, r, startAngle)
+				const endPoint = this.getCircleRadianPoint(x, y, r, endAngle)
+				return `${startPoint.join(',')} ${endPoint.join(',')}`
+			})
+		},
+		calcArcD() {
+			const { x, y, width } = this
+			const angleGap = Math.PI / 6
+			const r = width / 2 - 1
+			this.arcD = new Array(4).fill('').map((_, i) => {
+				const startAngle = angleGap * (3 * i + 1)
+				const endAngle = startAngle + angleGap
+				const startPoint = this.getCircleRadianPoint(x, y, r, startAngle)
+				const endPoint = this.getCircleRadianPoint(x, y, r, endAngle)
+				return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
+			})
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-12 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	.decoration-content {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration2.vue

@@ -0,0 +1,78 @@
+<template>
+	<div :ref="ref" class="sh-decoration-2">
+		<svg :width="`${width}px`" :height="`${height}px`">
+			<rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
+				<animate
+					:attributeName="reverse ? 'height' : 'width'"
+					from="0"
+					:to="reverse ? height : width"
+					:dur="`${dur}s`"
+					calcMode="spline"
+					keyTimes="0;1"
+					keySplines=".42,0,.58,1"
+					repeatCount="indefinite" />
+			</rect>
+
+			<rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
+				<animate
+					:attributeName="reverse ? 'y' : 'x'"
+					from="0"
+					:to="reverse ? height : width"
+					:dur="`${dur}s`"
+					calcMode="spline"
+					keyTimes="0;1"
+					keySplines="0.42,0,0.58,1"
+					repeatCount="indefinite" />
+			</rect>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration2',
+	mixins: [mixin],
+	props: {
+		dur: {
+			type: Number,
+			default: 6
+		}
+	},
+	data() {
+		return {
+			x: 0,
+			y: 0,
+
+			w: 0,
+			h: 0
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { reverse, width, height } = this
+			if (reverse) {
+				this.w = 1
+				this.h = height
+				this.x = width / 2
+				this.y = 0
+			} else {
+				this.w = width
+				this.h = 1
+				this.x = 0
+				this.y = height / 2
+			}
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-2 {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration3.vue

@@ -0,0 +1,65 @@
+<template>
+	<div :ref="ref" class="sh-decoration-3">
+		<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+			<template v-for="(point, i) in points" :key="i">
+				<rect v-if="Math.random() > 0.6" :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength" :width="pointSideLength" :height="pointSideLength">
+					<animate attributeName="fill" :values="`${mergedColor.join(';')}`" :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
+				</rect>
+			</template>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration3',
+	mixins: [mixin],
+	data() {
+		const pointSideLength = 7
+		return {
+			svgWH: [300, 35],
+
+			svgScale: [1, 1],
+
+			rowNum: 2,
+			rowPoints: 25,
+
+			pointSideLength,
+			halfPointSideLength: pointSideLength / 2,
+
+			points: []
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { calcPointsPosition, calcScale } = this
+			calcPointsPosition()
+			calcScale()
+		},
+		calcPointsPosition() {
+			const { svgWH, rowNum, rowPoints } = this
+			const [w, h] = svgWH
+			const horizontalGap = w / (rowPoints + 1)
+			const verticalGap = h / (rowNum + 1)
+			let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]))
+			this.points = points.reduce((all, item) => [...all, ...item], [])
+		},
+		calcScale() {
+			const { width, height, svgWH } = this
+			const [w, h] = svgWH
+			this.svgScale = [width / w, height / h]
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-3 {
+	width: 100%;
+	height: 100%;
+	svg {
+		transform-origin: left top;
+	}
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration4.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :ref="ref" class="sh-decoration-4">
+		<div
+			:class="`container ${reverse ? 'reverse' : 'normal'}`"
+			:style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`">
+			<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
+				<polyline :stroke="mergedColor[0]" :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`" />
+				<polyline
+					class="bold-line"
+					:stroke="mergedColor[1]"
+					stroke-width="3"
+					stroke-dasharray="20, 80"
+					stroke-dashoffset="-30"
+					:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`" />
+			</svg>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration4',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-4 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.container {
+		display: flex;
+		overflow: hidden;
+		position: absolute;
+		flex: 1;
+	}
+	.normal {
+		animation: ani-height ease-in-out infinite;
+		left: 50%;
+		margin-left: -2px;
+	}
+	.reverse {
+		animation: ani-width ease-in-out infinite;
+		top: 50%;
+		margin-top: -2px;
+	}
+	@keyframes ani-height {
+		0% {
+			height: 0%;
+		}
+		70% {
+			height: 100%;
+		}
+		100% {
+			height: 100%;
+		}
+	}
+	@keyframes ani-width {
+		0% {
+			width: 0%;
+		}
+		70% {
+			width: 100%;
+		}
+		100% {
+			width: 100%;
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration5.vue

@@ -0,0 +1,96 @@
+<template>
+	<div :ref="ref" class="sh-decoration-5">
+		<svg :width="width" :height="height">
+			<polyline fill="transparent" :stroke="mergedColor[0]" stroke-width="3" :points="line1Points">
+				<animate
+					attributeName="stroke-dasharray"
+					attributeType="XML"
+					:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
+					:to="`0, 0, ${line1Length}, 0`"
+					:dur="`${dur}s`"
+					begin="0s"
+					calcMode="spline"
+					keyTimes="0;1"
+					keySplines="0.4,1,0.49,0.98"
+					repeatCount="indefinite" />
+			</polyline>
+			<polyline fill="transparent" :stroke="mergedColor[1]" stroke-width="2" :points="line2Points">
+				<animate
+					attributeName="stroke-dasharray"
+					attributeType="XML"
+					:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
+					:to="`0, 0, ${line2Length}, 0`"
+					:dur="`${dur}s`"
+					begin="0s"
+					calcMode="spline"
+					keyTimes="0;1"
+					keySplines=".4,1,.49,.98"
+					repeatCount="indefinite" />
+			</polyline>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration5',
+	mixins: [mixin],
+	props: {
+		dur: {
+			type: Number,
+			default: 1.2
+		}
+	},
+	data() {
+		return {
+			line1Points: '',
+			line2Points: '',
+			line1Length: 0,
+			line2Length: 0
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { width, height } = this
+
+			let line1Points = [
+				[0, height * 0.2],
+				[width * 0.18, height * 0.2],
+				[width * 0.2, height * 0.4],
+				[width * 0.25, height * 0.4],
+				[width * 0.27, height * 0.6],
+				[width * 0.72, height * 0.6],
+				[width * 0.75, height * 0.4],
+				[width * 0.8, height * 0.4],
+				[width * 0.82, height * 0.2],
+				[width, height * 0.2]
+			]
+
+			let line2Points = [
+				[width * 0.3, height * 0.8],
+				[width * 0.7, height * 0.8]
+			]
+
+			const line1Length = this.getPolylineLength(line1Points)
+			const line2Length = this.getPolylineLength(line2Points)
+
+			line1Points = line1Points.map(point => point.join(',')).join(' ')
+			line2Points = line2Points.map(point => point.join(',')).join(' ')
+
+			this.line1Points = line1Points
+			this.line2Points = line2Points
+
+			this.line1Length = line1Length
+			this.line2Length = line2Length
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-5 {
+	width: 100%;
+	height: 100%;
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration6.vue

@@ -0,0 +1,84 @@
+<template>
+	<div :ref="ref" class="sh-decoration-6">
+		<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+			<template v-for="(point, i) in points" :key="i">
+				<rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth" :y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
+					<animate
+						attributeName="y"
+						:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
+						:dur="`${randoms[i]}s`"
+						keyTimes="0;0.5;1"
+						calcMode="spline"
+						keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+						begin="0s"
+						repeatCount="indefinite" />
+					<animate
+						attributeName="height"
+						:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+						:dur="`${randoms[i]}s`"
+						keyTimes="0;0.5;1"
+						calcMode="spline"
+						keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+						begin="0s"
+						repeatCount="indefinite" />
+				</rect>
+			</template>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration6',
+	mixins: [mixin],
+	data() {
+		const rectWidth = 7
+		return {
+			svgWH: [300, 35],
+			svgScale: [1, 1],
+			rowNum: 1,
+			rowPoints: 40,
+			rectWidth,
+			halfRectWidth: rectWidth / 2,
+			points: [],
+			heights: [],
+			minHeights: [],
+			randoms: []
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { calcPointsPosition, calcScale } = this
+			calcPointsPosition()
+			calcScale()
+		},
+		calcPointsPosition() {
+			const { svgWH, rowNum, rowPoints, randomExtend } = this
+			const [w, h] = svgWH
+			const horizontalGap = w / (rowPoints + 1)
+			const verticalGap = h / (rowNum + 1)
+			let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]))
+			this.points = points.reduce((all, item) => [...all, ...item], [])
+			const heights = (this.heights = new Array(rowNum * rowPoints).fill(0).map(foo => (Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))))
+			this.minHeights = new Array(rowNum * rowPoints).fill(0).map((foo, i) => heights[i] * Math.random())
+			this.randoms = new Array(rowNum * rowPoints).fill(0).map(foo => Math.random() + 1.5)
+		},
+		calcScale() {
+			const { width, height, svgWH } = this
+			const [w, h] = svgWH
+			this.svgScale = [width / w, height / h]
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-6 {
+	width: 100%;
+	height: 100%;
+	svg {
+		transform-origin: left top;
+	}
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration7.vue

@@ -0,0 +1,31 @@
+<template>
+	<div :ref="ref" class="sh-decoration-7">
+		<svg width="21px" height="20px">
+			<polyline stroke-width="4" fill="transparent" :stroke="mergedColor[0]" points="10, 0 19, 10 10, 20" />
+			<polyline stroke-width="2" fill="transparent" :stroke="mergedColor[1]" points="2, 0 11, 10 2, 20" />
+		</svg>
+		<slot></slot>
+		<svg width="21px" height="20px">
+			<polyline stroke-width="4" fill="transparent" :stroke="mergedColor[0]" points="11, 0 2, 10 11, 20" />
+			<polyline stroke-width="2" fill="transparent" :stroke="mergedColor[1]" points="19, 0 10, 10 19, 20" />
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration7',
+	mixins: [mixin]
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-7 {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration8.vue

@@ -0,0 +1,32 @@
+<template>
+	<div :ref="ref" class="sh-decoration-8">
+		<svg :width="width" :height="height">
+			<polyline :stroke="mergedColor[0]" stroke-width="2" fill="transparent" :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`" />
+			<polyline :stroke="mergedColor[0]" stroke-width="2" fill="transparent" :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`" />
+			<polyline :stroke="mergedColor[1]" fill="transparent" stroke-width="3" :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`" />
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration8',
+	mixins: [mixin],
+	methods: {
+        xPos (pos) {
+			const { reverse, width } = this
+			if (!reverse) return pos
+			return width - pos
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-8 {
+	display: flex;
+	width: 100%;
+	height: 100%;
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration9.vue

@@ -0,0 +1,63 @@
+<template>
+	<div :ref="ref" class="sh-decoration-9">
+		<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+			<defs><polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" /></defs>
+			<circle cx="50" cy="50" r="45" fill="transparent" :stroke="mergedColor[1]" stroke-width="10" stroke-dasharray="80, 100, 30, 100">
+				<animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" :dur="`${dur}s`" repeatCount="indefinite" />
+			</circle>
+			<circle cx="50" cy="50" r="45" fill="transparent" :stroke="mergedColor[0]" stroke-width="6" stroke-dasharray="50, 66, 100, 66">
+				<animateTransform attributeName="transform" type="rotate" values="0 50 50;-360 50 50" :dur="`${dur}s`" repeatCount="indefinite" />
+			</circle>
+			<circle cx="50" cy="50" r="38" fill="transparent" :stroke="fade(mergedColor[1] || defaultColor[1], 30)" stroke-width="1" stroke-dasharray="5, 1" />
+			<use v-for="(foo, i) in new Array(20).fill(0)" :key="i" :xlink:href="`#${polygonId}`" :stroke="mergedColor[1]" :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]">
+				<animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" :dur="`${dur}s`" :begin="`${(i * dur) / 20}s`" repeatCount="indefinite" />
+			</use>
+			<circle cx="50" cy="50" r="26" fill="transparent" :stroke="fade(mergedColor[1] || defaultColor[1], 30)" stroke-width="1" stroke-dasharray="5, 1" />
+		</svg>
+
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration9',
+	mixins: [mixin],
+	data() {
+		return {
+			svgWH: [100, 100],
+			svgScale: [1, 1]
+		}
+	},
+	computed: {
+		polygonId() {
+			return `decoration-9-polygon-${this.decorationId}`
+		}
+	},
+	methods: {
+		calcScale() {
+			const { width, height, svgWH } = this
+			const [w, h] = svgWH
+			this.svgScale = [width / w, height / h]
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-9 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	svg {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		transform-origin: left top;
+	}
+}
+</style>