sh-view 1.7.5 → 2.0.0

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>