sh-view 1.7.6 → 2.0.1

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

@@ -0,0 +1,173 @@
+<template>
+	<transition :name="fade ? 'fade' : ''">
+		<div v-if="!closed" class="sh-alert" :class="classes">
+			<div v-if="showIcon" class="sh-alert-icon">
+				<slot name="icon">
+					<sh-icon :type="iconType"></sh-icon>
+				</slot>
+			</div>
+			<div class="sh-alert-content">
+				<slot>{{ title }}</slot>
+				<div class="sh-alert-desc">
+					<slot name="content">{{ content }}</slot>
+				</div>
+			</div>
+			<a v-if="closable" class="sh-alert-close" @click="close">
+				<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
+			</a>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'ShAlert',
+	props: {
+		type: {
+			type: String,
+			default: 'info' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String
+		},
+		content: {
+			type: String
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		block: {
+			type: Boolean
+		}
+	},
+	emits: ['close'],
+	data() {
+		return {
+			closed: false
+		}
+	},
+	computed: {
+		isDesc() {
+			return this.$slots.content
+		},
+		iconType() {
+			let type = ''
+			switch (this.type) {
+				case 'success':
+					type = 'ios-checkmark-circle'
+					break
+				case 'info':
+					type = 'ios-information-circle'
+					break
+				case 'warning':
+					type = 'ios-alert'
+					break
+				case 'error':
+					type = 'ios-close-circle'
+					break
+			}
+			if (this.isDesc) type += '-outline'
+			return type
+		},
+		classes() {
+			return {
+				[`${this.type}`]: true,
+				block: this.block,
+				desc: this.isDesc
+			}
+		}
+	},
+	methods: {
+		close(e) {
+			this.closed = true
+			this.$emit('close', e)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+$base-font-size: 14px;
+$medium-font-size: 16px;
+$large-font-size: 18px;
+
+@mixin iconBase {
+	padding: 0 5px;
+	font-size: $medium-font-size;
+	line-height: 1;
+}
+
+.sh-alert {
+	position: relative;
+	border-radius: var(--vxe-border-radius);
+	color: var(--vxe-font-color);
+	display: inline-flex;
+	align-items: center;
+	padding: 5px;
+	margin-bottom: 10px;
+	&.block {
+		display: flex;
+	}
+	&.desc {
+		font-size: $large-font-size;
+		.sh-alert-icon,
+		.sh-alert-close {
+			font-size: 24px;
+			padding: 0 10px;
+		}
+		.sh-alert-content {
+			padding: 0 10px;
+		}
+	}
+	&-icon {
+		@include iconBase;
+	}
+	&-content {
+		flex: 1;
+		.sh-alert-desc {
+			font-size: $base-font-size;
+		}
+	}
+	&-close {
+		@include iconBase;
+		cursor: pointer;
+	}
+	&.success {
+		border: 1px solid var(--vxe-success-color);
+		background-color: #edfff3;
+		.sh-alert-icon {
+			color: var(--vxe-success-color);
+		}
+	}
+	&.info {
+		border: 1px solid var(--vxe-info-color);
+		background-color: #f0faff;
+		.sh-alert-icon {
+			color: var(--vxe-info-color);
+		}
+	}
+	&.warning {
+		border: 1px solid var(--vxe-warning-color);
+		background-color: #fff9e6;
+		.sh-alert-icon {
+			color: var(--vxe-warning-color);
+		}
+	}
+	&.error {
+		border: 1px solid var(--vxe-danger-color);
+		background-color: #ffefe6;
+		.sh-alert-icon {
+			color: var(--vxe-danger-color);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,227 @@
+<template>
+	<span v-if="dot" ref="badge" class="sh-badge">
+		<slot></slot>
+		<sup v-show="badge" 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="badge" class="sh-badge-count" :style="styles" :class="countClasses">
+			<slot name="text">{{ finalCount }}</slot>
+		</sup>
+	</span>
+</template>
+
+<script>
+export default {
+	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
+	},
+	computed: {
+		countClasses() {
+			return {
+				[`${this.className}`]: !!this.className,
+				[`sh-badge-count-alone`]: this.alone,
+				[`sh-badge-count-${this.type}`]: !!this.type
+			}
+		},
+		statusClasses() {
+			return {
+				[`sh-badge-status-dot`]: true,
+				[`sh-badge-status-${this.status}`]: !!this.status
+			}
+		},
+		statusStyles() {
+			return { backgroundColor: this.color }
+		},
+		styles() {
+			const style = {}
+			if (this.offset && this.offset.length === 2) {
+				style['margin-top'] = `${this.offset[0]}px`
+				style['margin-right'] = `${this.offset[1]}px`
+			}
+			return style
+		},
+		finalCount() {
+			if (this.text) return this.text
+			return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count
+		},
+		badge() {
+			let status = false
+			if (this.count) {
+				status = !(parseInt(this.count) === 0)
+			}
+			if (this.dot) {
+				status = true
+				if (this.count !== null) {
+					if (parseInt(this.count) === 0) {
+						status = false
+					}
+				}
+			}
+			if (this.text !== '') status = true
+			return status || this.showZero
+		},
+		hasCount() {
+			if (this.count || this.text !== '') return true
+			if (this.showZero && parseInt(this.count) === 0) return true
+			else return false
+		},
+		alone() {
+			return this.$slots.default === undefined
+		}
+	}
+}
+</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>

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

@@ -1,122 +1,140 @@
-<template>
-	<Card class="sh-card" :size="size" :bordered="border" :dis-hover="disHover" :shadow="shadow" :padding="padding" :to="to" :replace="replace" :target="target" :append="append">
-		<template #title>
-			<div v-if="title || $slots.title" class="sh-card-head-title">
-				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="color" class="mr-2"></sh-icon>
-				<slot name="title">{{ title }}</slot>
-			</div>
-		</template>
-		<template #extra>
-			<div v-if="$slots.extra" class="sh-card-head-extra"><slot name="extra"></slot></div>
-		</template>
-		<slot></slot>
-	</Card>
-</template>
-
-<script>
-export default {
-	name: 'ShCard',
-	components: {},
-	props: {
-		border: {
-			type: Boolean,
-			default: true
-		},
-		disHover: {
-			type: Boolean,
-			default: true
-		},
-		shadow: {
-			type: Boolean,
-			default: false
-		},
-		padding: {
-			type: Number,
-			default: 10
-		},
-		title: {
-			type: String
-		},
-		color: {
-			type: String,
-			default: '#2d8cf0'
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconSize: {
-			type: Number,
-			default: 20
-		},
-		to: {
-			type: [String, Object]
-		},
-		replace: {
-			type: Boolean
-		},
-		target: {
-			type: String
-		},
-		append: {
-			type: Boolean
-		},
-		size: {
-			type: String,
-			default: 'default'
-		}
-	},
-	computed: {}
-}
-</script>
-
-<style lang="scss">
-.sh-card {
-	&[size='default'] {
-	}
-	&[size='large'] {
-		.sh-card-head-title {
-			font-size: 20px;
-			line-height: 1.5;
-		}
-		.ivu-card-head {
-			padding: 14px 16px;
-		}
-		.ivu-card-body {
-			font-size: 1.1em;
-		}
-	}
-	&[size='small'] {
-		.sh-card-head-title {
-			font-size: 15px;
-			line-height: 1.2;
-		}
-		.ivu-card-head {
-			padding: 10px 12px;
-		}
-		.ivu-card-body {
-			font-size: 0.9em;
-		}
-	}
-	&[size='mini'] {
-		.sh-card-head-title {
-			font-size: 13px;
-			line-height: 1.1;
-		}
-		.ivu-card-head {
-			padding: 8px 10px;
-		}
-		.ivu-card-body {
-			font-size: 0.9em;
-		}
-	}
-	.sh-card-head-title {
-		font-size: 17px;
-		line-height: 1.3;
-	}
-	.sh-card-head-extra {
-		cursor: pointer;
-		display: inline-block;
-	}
-}
-</style>
+<template>
+	<div class="sh-card" :class="classes">
+		<div v-if="title || $slots.title || $slots.extra" class="sh-card-head" :style="styles">
+			<slot name="head">
+				<div v-if="title || $slots.title" class="sh-card-head-title">
+					<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="color" class="sh-card-head-icon"></sh-icon>
+					<slot name="title">{{ title }}</slot>
+				</div>
+				<div v-if="$slots.extra" class="sh-card-head-extra"><slot name="extra"></slot></div>
+			</slot>
+		</div>
+		<div v-if="$slots.default" class="sh-card-body" :style="styles">
+			<slot></slot>
+		</div>
+		<div v-if="$slots.foot" class="sh-card-foot" :style="styles">
+			<slot name="foot"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShCard',
+	components: {},
+	props: {
+		border: {
+			type: Boolean,
+			default: true
+		},
+		shadow: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: Number,
+			default: 10
+		},
+		title: {
+			type: String
+		},
+		color: {
+			type: String
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		size: {
+			type: String,
+			default: 'default' //  large / medium / small / mini
+		}
+	},
+	computed: {
+		classes() {
+			return {
+				border: this.border,
+				shadow: this.shadow,
+				[this.size]: this.size
+			}
+		},
+		styles() {
+			return {
+				padding: `${this.padding}px`
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin layoutFlex {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.sh-card {
+	display: block;
+	border-radius: var(--vxe-border-radius);
+	background-color: var(--vxe-table-body-background-color);
+	.sh-card-head {
+		@include layoutFlex;
+		.sh-card-head-title {
+			flex: 1;
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			.sh-card-head-icon {
+				margin-right: 10px;
+				color: var(--vxe-primary-color);
+			}
+		}
+		.sh-card-head-extra {
+			@include layoutFlex;
+			flex: 0;
+			display: inline-flex;
+			white-space: nowrap;
+		}
+	}
+	.sh-card-body {
+		border-top: 1px solid var(--vxe-table-border-color);
+		@include layoutFlex;
+	}
+	.sh-card-foot {
+		border-top: 1px solid var(--vxe-table-border-color);
+		@include layoutFlex;
+	}
+	&.large {
+		.sh-card-head .sh-card-head-title {
+			font-size: 1.2rem;
+		}
+	}
+	&.medium {
+		.sh-card-head .sh-card-head-title {
+			font-size: 1rem;
+		}
+	}
+	&.small {
+		.sh-card-head .sh-card-head-title {
+			font-size: 0.9285rem;
+		}
+	}
+	&.mini {
+		.sh-card-head .sh-card-head-title {
+			font-size: 0.8571rem;
+		}
+	}
+	&.border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&.shadow {
+		box-shadow: var(--box-shadow);
+	}
+}
+</style>