sh-view 1.7.6 → 2.0.0

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

@@ -1,269 +1,293 @@
-<template>
-	<div class="sh-page-header" :style="styles" :type="type" :size="size" :class="classes">
-		<sh-loading :loading="loading" />
-		<div class="sh-page-header-heading">
-			<div class="sh-page-header-heading-left">
-				<div v-if="showback" class="sh-page-header-back">
-					<div class="sh-page-header-back-button" @click="handleBack"><Icon :size="iconSize" type="ios-arrow-back" /></div>
-				</div>
-				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
-				<span v-if="title || $slots.title" class="sh-page-header-heading-title" :style="{ textAlign: align, flex: align ? '1' : 'auto' }">
-					<slot name="title">{{ title }}</slot>
-				</span>
-				<span v-if="subTitle || $slots.subTitle" class="sh-page-header-heading-sub-title">
-					<slot name="subTitle">{{ subTitle }}</slot>
-				</span>
-				<span v-if="$slots.tags" class="sh-page-header-heading-tags"><slot name="tags"></slot></span>
-			</div>
-			<div class="sh-page-header-heading-right">
-				<span v-if="$slots.extra" class="sh-page-header-heading-extra"><slot name="extra"></slot></span>
-			</div>
-		</div>
-		<div v-if="$slots.default" class="sh-page-header-content" :class="{ 'no-padding': !title && !$slots.title && !subTitle && !$slots.subTitle && !$slots.tags && !$slots.extra }">
-			<slot></slot>
-		</div>
-		<slot name="body"></slot>
-		<div v-if="$slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShHeader',
-	components: {},
-	props: {
-		size: {
-			type: String,
-			default: 'default'
-		},
-		color: {
-			type: String,
-			default: ''
-		},
-		theme: {
-			type: String,
-			default: ''
-		},
-		align: {
-			type: String,
-			default: 'left'
-		},
-		icon: {
-			type: String
-		},
-		iconSize: {
-			type: Number,
-			default: 20
-		},
-		iconColor: {
-			type: String
-		},
-		ghost: {
-			type: Boolean
-		},
-		full: {
-			type: Boolean
-		},
-		border: {
-			type: Boolean
-		},
-		type: {
-			type: String,
-			default: ''
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		subTitle: {
-			type: String,
-			default: ''
-		},
-		loading: {
-			type: Boolean
-		},
-		nowrap: {
-			type: Boolean
-		},
-		showback: {
-			type: Boolean
-		}
-	},
-	emits: ['back'],
-	data() {
-		return {}
-	},
-	computed: {
-		styles() {
-			return {
-				backgroundColor: this.color
-			}
-		},
-		classes() {
-			return [
-				{
-					'sh-page-header-ghost': this.ghost,
-					'sh-page-header-full': this.full,
-					'sh-page-header-border': this.border,
-					'has-footer': this.$slots.footer,
-					[`sh-page-header-${this.theme}`]: this.theme,
-					'sh-page-header-nowrap': this.nowrap
-				}
-			]
-		}
-	},
-	created() {},
-	methods: {
-		handleBack() {
-			this.$emit('back')
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-page-header {
-	display: block;
-	box-sizing: border-box;
-	border-radius: 2px;
-	line-height: 1.5;
-	position: relative;
-	padding: 0.5rem 1rem;
-	background-color: var(--body-background);
-	&.sh-page-header-full {
-		padding-left: 0;
-		padding-right: 0;
-	}
-	&.sh-page-header-dark {
-		color: #fff;
-		background: #333;
-	}
-	&.sh-page-header-primary {
-		background-color: var(--theme-color);
-		color: #fff;
-	}
-	&.sh-page-header-success {
-		background-color: var(--success-color);
-		color: #fff;
-	}
-	&.sh-page-header-warning {
-		background-color: var(--warning-color);
-		color: #fff;
-	}
-	&.sh-page-header-error {
-		background-color: var(--error-color);
-		color: #fff;
-	}
-	&.sh-page-header-info {
-		background-color: var(--info-color);
-		color: #fff;
-	}
-	&.sh-page-header-ghost {
-		background-color: transparent;
-	}
-	&.sh-page-header-border {
-		border: 1px solid var(--border-color);
-	}
-	&.sh-page-header-nowrap {
-		.sh-page-header-heading-title {
-			white-space: nowrap;
-		}
-	}
-	&[type='border'] {
-		& > .sh-page-header-heading {
-			padding: 1px 0 1px 10px;
-			border-left: 5px solid var(--theme-color) !important;
-		}
-	}
-	&[size='large'] {
-		.sh-page-header-heading-title {
-			font-size: 1.4285rem;
-		}
-	}
-	&[size='default'] {
-		.sh-page-header-heading-title {
-			font-size: 1.2857rem;
-		}
-	}
-	&[size='small'] {
-		.sh-page-header-heading-title {
-			font-size: 1rem;
-		}
-	}
-	&[size='mini'] {
-		.sh-page-header-heading-title {
-			font-size: 0.8571rem;
-		}
-	}
-	.sh-page-header-heading {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		.sh-page-header-heading-left {
-			flex: 1;
-			display: inline-flex;
-			justify-content: flex-start;
-			align-items: center;
-			.sh-page-header-back {
-				font-size: 1.2rem;
-				line-height: 1;
-				margin-right: 0.5rem;
-				.sh-page-header-back-button {
-					color: inherit;
-					text-decoration: none;
-					outline: none;
-					transition: color 0.3s;
-					cursor: pointer;
-					&:hover {
-						opacity: 0.85;
-					}
-				}
-			}
-			.sh-page-header-heading-title {
-				display: block;
-				margin-right: 0.5rem;
-				font-weight: 600;
-			}
-			i + .sh-page-header-heading-title {
-				margin-left: 0.5rem;
-			}
-			.sh-page-header-heading-sub-title {
-				margin-right: 0.5rem;
-				color: rgba(0, 0, 0, 0.45);
-			}
-			.sh-page-header-heading-tags {
-			}
-		}
-		.sh-page-header-heading-right {
-			.sh-page-header-heading-extra {
-			}
-		}
-	}
-	.sh-page-header-content {
-		margin-top: 10px;
-		&.no-padding {
-			padding-top: 0;
-		}
-	}
-	.sh-page-header-footer {
-		margin-top: 10px;
-	}
-}
-
-.mobile {
-	.sh-page-header {
-		&.sh-page-header-nowrap {
-			.sh-page-header-heading-title {
-				white-space: normal;
-			}
-		}
-	}
-}
-
-.theme--dark {
-	.sh-page-header {
-		background: transparent;
-	}
-}
-</style>
+<template>
+	<div class="sh-page-header" :style="styles" :class="classes">
+		<sh-loading :loading="loading" />
+		<div class="sh-page-header-heading">
+			<div class="sh-page-header-heading-left">
+				<div v-if="showback" class="sh-page-header-back">
+					<div class="sh-page-header-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
+				</div>
+				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
+				<span v-if="title || $slots.title" class="sh-page-header-heading-title" :style="{ textAlign: align, flex: align ? '1' : 'auto' }">
+					<slot name="title">{{ title }}</slot>
+				</span>
+				<span v-if="subTitle || $slots.subTitle" class="sh-page-header-heading-sub-title">
+					<slot name="subTitle">{{ subTitle }}</slot>
+				</span>
+				<span v-if="$slots.tags" class="sh-page-header-heading-tags"><slot name="tags"></slot></span>
+			</div>
+			<div class="sh-page-header-heading-right">
+				<span v-if="$slots.extra" class="sh-page-header-heading-extra"><slot name="extra"></slot></span>
+			</div>
+		</div>
+		<div v-if="$slots.default" class="sh-page-header-content" :class="{ 'no-padding': !title && !$slots.title && !subTitle && !$slots.subTitle && !$slots.tags && !$slots.extra }">
+			<slot></slot>
+		</div>
+		<slot name="body"></slot>
+		<div v-if="$slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShHeader',
+	components: {},
+	props: {
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		align: {
+			type: String,
+			default: 'left'
+		},
+		icon: {
+			type: String
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		iconColor: {
+			type: String
+		},
+		ghost: {
+			type: Boolean
+		},
+		full: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		type: {
+			type: String,
+			default: '' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		nowrap: {
+			type: Boolean
+		},
+		showback: {
+			type: Boolean
+		}
+	},
+	emits: ['back'],
+	data() {
+		return {}
+	},
+	computed: {
+		styles() {
+			return {
+				backgroundColor: this.color
+			}
+		},
+		classes() {
+			return [
+				{
+					'sh-page-header-ghost': this.ghost,
+					'sh-page-header-full': this.full,
+					'sh-page-header-border': this.border,
+					'has-footer': this.$slots.footer,
+					[`sh-page-header-${this.theme}`]: this.theme,
+					[`${this.type}`]: this.type,
+					[`${this.size}`]: this.size,
+					'sh-page-header-nowrap': this.nowrap
+				}
+			]
+		}
+	},
+	created() {},
+	methods: {
+		handleBack() {
+			this.$emit('back')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-page-header {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 2px;
+	line-height: 1.5;
+	position: relative;
+	padding: 0.5rem 1rem;
+	background-color: var(--vxe-table-body-background-color);
+	&.sh-page-header-full {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	&.sh-page-header-dark {
+		color: #fff;
+		background: #333;
+	}
+	&.sh-page-header-primary {
+		background-color: var(--vxe-primary-color);
+		color: #fff;
+	}
+	&.sh-page-header-success {
+		background-color: var(--vxe-success-color);
+		color: #fff;
+	}
+	&.sh-page-header-warning {
+		background-color: var(--vxe-warning-color);
+		color: #fff;
+	}
+	&.sh-page-header-error {
+		background-color: var(--vxe-danger-color);
+		color: #fff;
+	}
+	&.sh-page-header-info {
+		background-color: var(--vxe-info-color);
+		color: #fff;
+	}
+	&.sh-page-header-ghost {
+		background-color: transparent;
+	}
+	&.sh-page-header-border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&.sh-page-header-nowrap {
+		.sh-page-header-heading-title {
+			white-space: nowrap;
+		}
+	}
+	&.success {
+		border-left: 4px solid var(--vxe-success-color);
+		background-color: #edfff3;
+		.sh-page-header-heading-title {
+			color: var(--vxe-success-color);
+		}
+	}
+	&.info {
+		border-left: 4px solid var(--vxe-info-color);
+		background-color: #f0faff;
+		.sh-page-header-heading-title {
+			color: var(--vxe-info-color);
+		}
+	}
+	&.warning {
+		border-left: 4px solid var(--vxe-warning-color);
+		background-color: #fff9e6;
+		.sh-page-header-heading-title {
+			color: var(--vxe-warning-color);
+		}
+	}
+	&.error {
+		border-left: 4px solid var(--vxe-danger-color);
+		background-color: #ffefe6;
+		.sh-page-header-heading-title {
+			color: var(--vxe-danger-color);
+		}
+	}
+	&.large {
+		.sh-page-header-heading-title {
+			font-size: 1.4285rem;
+		}
+	}
+	&.default {
+		.sh-page-header-heading-title {
+			font-size: 1.2857rem;
+		}
+	}
+	&.small {
+		.sh-page-header-heading-title {
+			font-size: 1rem;
+		}
+	}
+	&.mini {
+		.sh-page-header-heading-title {
+			font-size: 0.8571rem;
+		}
+	}
+	.sh-page-header-heading {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.sh-page-header-heading-left {
+			flex: 1;
+			display: inline-flex;
+			justify-content: flex-start;
+			align-items: center;
+			.sh-page-header-back {
+				font-size: 1.2rem;
+				line-height: 1;
+				margin-right: 0.5rem;
+				.sh-page-header-back-button {
+					color: inherit;
+					text-decoration: none;
+					outline: none;
+					transition: color 0.3s;
+					cursor: pointer;
+					&:hover {
+						opacity: 0.85;
+					}
+				}
+			}
+			.sh-page-header-heading-title {
+				display: block;
+				margin-right: 0.5rem;
+				font-weight: 600;
+			}
+			i + .sh-page-header-heading-title {
+				margin-left: 0.5rem;
+			}
+			.sh-page-header-heading-sub-title {
+				margin-right: 0.5rem;
+				color: rgba(0, 0, 0, 0.45);
+			}
+			.sh-page-header-heading-tags {
+			}
+		}
+		.sh-page-header-heading-right {
+			.sh-page-header-heading-extra {
+			}
+		}
+	}
+	.sh-page-header-content {
+		margin-top: 10px;
+		&.no-padding {
+			padding-top: 0;
+		}
+	}
+	.sh-page-header-footer {
+		margin-top: 10px;
+	}
+}
+
+.mobile {
+	.sh-page-header {
+		&.sh-page-header-nowrap {
+			.sh-page-header-heading-title {
+				white-space: normal;
+			}
+		}
+	}
+}
+
+.theme--dark {
+	.sh-page-header {
+		background: transparent;
+	}
+}
+</style>