sh-view 2.8.1 → 2.8.3

package/packages/components/sh-badge/index.vue

@@ -1,242 +1,242 @@
-<template>
-	<span v-if="dot" ref="badge" class="sh-badge">
-		<slot></slot>
-		<sup v-show="hasBadge" class="sh-badge-dot" :style="styles"></sup>
-	</span>
-	<span v-else-if="status || color" ref="badge" class="sh-badge sh-badge-status">
-		<span :class="statusClasses" :style="statusStyles"></span>
-		<span class="sh-badge-status-text">
-			<slot name="text">{{ text }}</slot>
-		</span>
-	</span>
-	<span v-else ref="badge" class="sh-badge">
-		<slot></slot>
-		<sup v-if="slots.count" :style="styles" class="sh-badge-count sh-badge-count-custom" :class="className"><slot name="count"></slot></sup>
-		<sup v-else-if="hasCount" v-show="hasBadge" class="sh-badge-count" :style="styles" :class="countClasses">
-			<slot name="text">{{ finalCount }}</slot>
-		</sup>
-	</span>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShBadge',
-	props: {
-		count: Number,
-		dot: Boolean,
-		overflowCount: {
-			type: [Number, String],
-			default: 99
-		},
-		className: String,
-		showZero: Boolean,
-		text: String,
-		status: String, // 'success', 'processing', 'default', 'error', 'warning'
-		type: String, //'success', 'primary', 'normal', 'error', 'warning', 'info'
-		offset: Array,
-		color: String
-	},
-	setup(props, context) {
-		const { slots } = context
-
-		const alone = computed(() => {
-			return slots.default === undefined
-		})
-		const countClasses = computed(() => {
-			return {
-				[`${props.className}`]: !!props.className,
-				[`sh-badge-count-alone`]: alone.value,
-				[`sh-badge-count-${props.type}`]: !!props.type
-			}
-		})
-		const statusClasses = computed(() => {
-			return {
-				[`sh-badge-status-dot`]: true,
-				[`sh-badge-status-${props.status}`]: !!props.status
-			}
-		})
-		const statusStyles = computed(() => {
-			return { backgroundColor: props.color }
-		})
-		const styles = computed(() => {
-			const style = {}
-			if (props.offset && props.offset.length === 2) {
-				style['margin-top'] = `${props.offset[0]}px`
-				style['margin-right'] = `${props.offset[1]}px`
-			}
-			return style
-		})
-		const finalCount = computed(() => {
-			if (props.text) return props.text
-			return parseInt(props.count) >= parseInt(props.overflowCount) ? `${props.overflowCount}+` : props.count
-		})
-		const hasBadge = computed(() => {
-			let hasStatus = false
-			if (props.count) {
-				hasStatus = !(parseInt(props.count) === 0)
-			}
-			if (props.dot) {
-				hasStatus = true
-				if (props.count !== null) {
-					if (parseInt(props.count) === 0) {
-						hasStatus = false
-					}
-				}
-			}
-			if (props.text !== '') hasStatus = true
-			return hasStatus || props.showZero
-		})
-		const hasCount = computed(() => {
-			if (props.count || props.text !== '') return true
-			if (props.showZero && parseInt(props.count) === 0) return true
-			return false
-		})
-
-		return {
-			alone,
-			countClasses,
-			statusClasses,
-			statusStyles,
-			styles,
-			finalCount,
-			hasBadge,
-			hasCount,
-			slots
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-badge {
-	position: relative;
-	display: inline-block;
-	&-count {
-		vertical-align: middle;
-		position: absolute;
-		transform: translateX(50%);
-		top: -10px;
-		right: 0;
-		height: 20px;
-		border-radius: 10px;
-		min-width: 20px;
-		background: var(--vxe-danger-color);
-		border: 1px solid transparent;
-		color: #fff;
-		line-height: 18px;
-		text-align: center;
-		padding: 0 6px;
-		font-size: 12px;
-		white-space: nowrap;
-		transform-origin: -10% center;
-		z-index: 10;
-		box-shadow: 0 0 0 1px #fff;
-		&-custom {
-			background: transparent;
-			color: inherit;
-			border-color: transparent;
-			box-shadow: none;
-		}
-		a,
-		a:hover {
-			color: #fff;
-		}
-		&-alone {
-			top: auto;
-			display: block;
-			position: relative;
-			transform: translateX(0);
-		}
-		&-primary {
-			background: var(--vxe-primary-color);
-		}
-		&-success {
-			background: var(--vxe-success-color);
-		}
-		&-error {
-			background: var(--vxe-danger-color);
-		}
-		&-warning {
-			background: var(--vxe-warning-color);
-		}
-		&-info {
-			background: var(--vxe-info-color);
-		}
-		&-normal {
-			background: #e6ebf1;
-			color: #808695;
-		}
-	}
-	&-dot {
-		position: absolute;
-		transform: translateX(-50%);
-		transform-origin: 0 center;
-		top: -4px;
-		right: -8px;
-		height: 8px;
-		width: 8px;
-		border-radius: 100%;
-		background: var(--vxe-danger-color);
-		z-index: 10;
-		box-shadow: 0 0 0 1px #fff;
-	}
-	&-status {
-		line-height: inherit;
-		vertical-align: baseline;
-		&-dot {
-			width: 6px;
-			height: 6px;
-			display: inline-block;
-			border-radius: 50%;
-			vertical-align: middle;
-			position: relative;
-			top: -1px;
-		}
-		&-success {
-			background-color: var(--vxe-success-color);
-		}
-		&-processing {
-			background-color: var(--vxe-primary-color);
-			position: relative;
-			&:after {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-				border: 1px solid var(--vxe-primary-color);
-				box-sizing: border-box;
-				content: '';
-				animation: aniStatusProcessing 1.2s infinite ease-in-out;
-			}
-		}
-		&-default {
-			background-color: #e6ebf1;
-		}
-		&-error {
-			background-color: var(--vxe-danger-color);
-		}
-		&-warning {
-			background-color: var(--vxe-warning-color);
-		}
-		&-text {
-			display: inline-block;
-			color: var(--vxe-font-color);
-			font-size: var(--vxe-font-size);
-			margin-left: 6px;
-		}
-	}
-}
-@keyframes aniStatusProcessing {
-	0% {
-		transform: scale(0.8);
-		opacity: 0.5;
-	}
-	100% {
-		transform: scale(2.4);
-		opacity: 0;
-	}
-}
-</style>
+<template>
+	<span v-if="dot" ref="badge" class="sh-badge">
+		<slot></slot>
+		<sup v-show="hasBadge" class="sh-badge-dot" :style="styles"></sup>
+	</span>
+	<span v-else-if="status || color" ref="badge" class="sh-badge sh-badge-status">
+		<span :class="statusClasses" :style="statusStyles"></span>
+		<span class="sh-badge-status-text">
+			<slot name="text">{{ text }}</slot>
+		</span>
+	</span>
+	<span v-else ref="badge" class="sh-badge">
+		<slot></slot>
+		<sup v-if="slots.count" :style="styles" class="sh-badge-count sh-badge-count-custom" :class="className"><slot name="count"></slot></sup>
+		<sup v-else-if="hasCount" v-show="hasBadge" class="sh-badge-count" :style="styles" :class="countClasses">
+			<slot name="text">{{ finalCount }}</slot>
+		</sup>
+	</span>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShBadge',
+	props: {
+		count: Number,
+		dot: Boolean,
+		overflowCount: {
+			type: [Number, String],
+			default: 99
+		},
+		className: String,
+		showZero: Boolean,
+		text: String,
+		status: String, // 'success', 'processing', 'default', 'error', 'warning'
+		type: String, //'success', 'primary', 'normal', 'error', 'warning', 'info'
+		offset: Array,
+		color: String
+	},
+	setup(props, context) {
+		const { slots } = context
+
+		const alone = computed(() => {
+			return slots.default === undefined
+		})
+		const countClasses = computed(() => {
+			return {
+				[`${props.className}`]: !!props.className,
+				[`sh-badge-count-alone`]: alone.value,
+				[`sh-badge-count-${props.type}`]: !!props.type
+			}
+		})
+		const statusClasses = computed(() => {
+			return {
+				[`sh-badge-status-dot`]: true,
+				[`sh-badge-status-${props.status}`]: !!props.status
+			}
+		})
+		const statusStyles = computed(() => {
+			return { backgroundColor: props.color }
+		})
+		const styles = computed(() => {
+			const style = {}
+			if (props.offset && props.offset.length === 2) {
+				style['margin-top'] = `${props.offset[0]}px`
+				style['margin-right'] = `${props.offset[1]}px`
+			}
+			return style
+		})
+		const finalCount = computed(() => {
+			if (props.text) return props.text
+			return parseInt(props.count) >= parseInt(props.overflowCount) ? `${props.overflowCount}+` : props.count
+		})
+		const hasBadge = computed(() => {
+			let hasStatus = false
+			if (props.count) {
+				hasStatus = !(parseInt(props.count) === 0)
+			}
+			if (props.dot) {
+				hasStatus = true
+				if (props.count !== null) {
+					if (parseInt(props.count) === 0) {
+						hasStatus = false
+					}
+				}
+			}
+			if (props.text !== '') hasStatus = true
+			return hasStatus || props.showZero
+		})
+		const hasCount = computed(() => {
+			if (props.count || props.text !== '') return true
+			if (props.showZero && parseInt(props.count) === 0) return true
+			return false
+		})
+
+		return {
+			alone,
+			countClasses,
+			statusClasses,
+			statusStyles,
+			styles,
+			finalCount,
+			hasBadge,
+			hasCount,
+			slots
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-badge {
+	position: relative;
+	display: inline-block;
+	&-count {
+		vertical-align: middle;
+		position: absolute;
+		transform: translateX(50%);
+		top: -10px;
+		right: 0;
+		height: 20px;
+		border-radius: 10px;
+		min-width: 20px;
+		background: var(--vxe-danger-color);
+		border: 1px solid transparent;
+		color: #fff;
+		line-height: 18px;
+		text-align: center;
+		padding: 0 6px;
+		font-size: 12px;
+		white-space: nowrap;
+		transform-origin: -10% center;
+		z-index: 10;
+		box-shadow: 0 0 0 1px #fff;
+		&-custom {
+			background: transparent;
+			color: inherit;
+			border-color: transparent;
+			box-shadow: none;
+		}
+		a,
+		a:hover {
+			color: #fff;
+		}
+		&-alone {
+			top: auto;
+			display: block;
+			position: relative;
+			transform: translateX(0);
+		}
+		&-primary {
+			background: var(--vxe-primary-color);
+		}
+		&-success {
+			background: var(--vxe-success-color);
+		}
+		&-error {
+			background: var(--vxe-danger-color);
+		}
+		&-warning {
+			background: var(--vxe-warning-color);
+		}
+		&-info {
+			background: var(--vxe-info-color);
+		}
+		&-normal {
+			background: #e6ebf1;
+			color: #808695;
+		}
+	}
+	&-dot {
+		position: absolute;
+		transform: translateX(-50%);
+		transform-origin: 0 center;
+		top: -4px;
+		right: -8px;
+		height: 8px;
+		width: 8px;
+		border-radius: 100%;
+		background: var(--vxe-danger-color);
+		z-index: 10;
+		box-shadow: 0 0 0 1px #fff;
+	}
+	&-status {
+		line-height: inherit;
+		vertical-align: baseline;
+		&-dot {
+			width: 6px;
+			height: 6px;
+			display: inline-block;
+			border-radius: 50%;
+			vertical-align: middle;
+			position: relative;
+			top: -1px;
+		}
+		&-success {
+			background-color: var(--vxe-success-color);
+		}
+		&-processing {
+			background-color: var(--vxe-primary-color);
+			position: relative;
+			&:after {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				border: 1px solid var(--vxe-primary-color);
+				box-sizing: border-box;
+				content: '';
+				animation: aniStatusProcessing 1.2s infinite ease-in-out;
+			}
+		}
+		&-default {
+			background-color: #e6ebf1;
+		}
+		&-error {
+			background-color: var(--vxe-danger-color);
+		}
+		&-warning {
+			background-color: var(--vxe-warning-color);
+		}
+		&-text {
+			display: inline-block;
+			color: var(--vxe-font-color);
+			font-size: var(--vxe-font-size);
+			margin-left: 6px;
+		}
+	}
+}
+@keyframes aniStatusProcessing {
+	0% {
+		transform: scale(0.8);
+		opacity: 0.5;
+	}
+	100% {
+		transform: scale(2.4);
+		opacity: 0;
+	}
+}
+</style>