sh-view 2.8.1 → 2.8.3

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

@@ -1,260 +1,261 @@
-<template>
-	<div class="sh-pageheader" :style="styles" :class="classes">
-		<sh-loading :loading="loading" fix />
-		<div class="sh-pageheader-heading">
-			<div v-if="showback" class="sh-pageheader-back">
-				<div class="sh-pageheader-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
-			</div>
-			<sh-icon v-if="icon" style="margin-right: 0.5rem" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
-			<span v-if="title || slots.title" class="sh-pageheader-title" :style="titleStyle">
-				<slot name="title">{{ title }}</slot>
-			</span>
-			<span v-if="subTitle || slots.subTitle" class="sh-pageheader-subtitle">
-				<slot name="subTitle">{{ subTitle }}</slot>
-			</span>
-			<div v-if="slots.tags" class="sh-pageheader-tags"><slot name="tags"></slot></div>
-			<div v-if="slots.extra" class="sh-pageheader-extra"><slot name="extra"></slot></div>
-		</div>
-		<div v-if="slots.default" :class="contentClass">
-			<slot></slot>
-		</div>
-		<slot name="body"></slot>
-		<div v-if="slots.footer" class="sh-pageheader-footer"><slot name="footer"></slot></div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShHeader',
-	props: {
-		size: {
-			type: String,
-			default: 'default'
-		},
-		color: {
-			type: String,
-			default: ''
-		},
-		theme: {
-			type: String,
-			default: ''
-		},
-		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'],
-	setup(props, context) {
-		const { emit, slots } = context
-
-		let sizeMap = {
-			large: '19px',
-			default: '17px',
-			medium: 'var(--vxe-font-size)',
-			small: 'var(--vxe-font-size-small)',
-			mini: 'var(--vxe-font-size-smini)'
-		}
-
-		const styles = computed(() => {
-			return {
-				backgroundColor: props.color
-			}
-		})
-		const classes = computed(() => {
-			return {
-				'sh-pageheader-ghost': props.ghost,
-				'sh-pageheader-full': props.full,
-				'sh-pageheader-border': props.border,
-				[`sh-pageheader-theme-${props.theme}`]: props.theme,
-				'has-footer': slots.footer,
-				[`sh-pageheader-type-${props.type}`]: props.type,
-				[`${props.size}`]: props.size
-			}
-		})
-		const titleStyle = computed(() => {
-			return {
-				fontSize: sizeMap[props.size] || sizeMap.default,
-				whiteSpace: props.nowrap ? 'nowrap' : ''
-			}
-		})
-		const contentClass = computed(() => {
-			return {
-				'sh-pageheader-content': true,
-				'no-padding': !props.title && !slots.title && !props.subTitle && !slots.subTitle && !slots.tags && !slots.extra
-			}
-		})
-
-		const handleBack = () => {
-			emit('back')
-		}
-		return {
-			styles,
-			classes,
-			titleStyle,
-			contentClass,
-			slots,
-			handleBack
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped>
-.sh-pageheader {
-	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);
-	&-theme {
-		color: #fff;
-		&-primary {
-			background-color: var(--vxe-primary-color);
-		}
-		&-success {
-			background-color: var(--vxe-success-color);
-		}
-		&-warning {
-			background-color: var(--vxe-warning-color);
-		}
-		&-error {
-			background-color: var(--vxe-danger-color);
-		}
-		&-info {
-			background-color: var(--vxe-info-color);
-		}
-	}
-	&-type {
-		color: #fff;
-		&-primary {
-			border-left: 4px solid var(--vxe-primary-color);
-			background-color: var(--primary-weak-color);
-			.sh-pageheader-heading-title {
-				color: var(--vxe-primary-color);
-			}
-		}
-		&-success {
-			border-left: 4px solid var(--vxe-success-color);
-			background-color: #edfff3;
-			.sh-pageheader-heading-title {
-				color: var(--vxe-success-color);
-			}
-		}
-		&-warning {
-			border-left: 4px solid var(--vxe-warning-color);
-			background-color: #fff9e6;
-			.sh-pageheader-heading-title {
-				color: var(--vxe-warning-color);
-			}
-		}
-		&-error {
-			border-left: 4px solid var(--vxe-danger-color);
-			background-color: #ffefe6;
-			.sh-pageheader-heading-title {
-				color: var(--vxe-danger-color);
-			}
-		}
-		&-info {
-			border-left: 4px solid var(--vxe-info-color);
-			background-color: #f0faff;
-			.sh-pageheader-heading-title {
-				color: var(--vxe-info-color);
-			}
-		}
-	}
-	&-full {
-		padding-left: 0;
-		padding-right: 0;
-	}
-	&-ghost {
-		background-color: transparent;
-	}
-	&-border {
-		border: 1px solid var(--vxe-table-border-color);
-	}
-	&-heading {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	&-content {
-		margin-top: 10px;
-		&.no-padding {
-			padding-top: 0;
-		}
-	}
-	&-footer {
-		margin-top: 10px;
-	}
-	&-back {
-		font-size: 1.2rem;
-		line-height: 1;
-		margin-right: 0.5rem;
-		&-button {
-			color: inherit;
-			text-decoration: none;
-			outline: none;
-			transition: color 0.3s;
-			cursor: pointer;
-			&:hover {
-				opacity: 0.85;
-			}
-		}
-	}
-	&-title {
-		display: block;
-		margin-right: 0.5rem;
-		font-weight: 600;
-	}
-	&-subtitle {
-		margin-right: 0.5rem;
-		color: rgba(0, 0, 0, 0.45);
-	}
-	&-tags {
-	}
-	&-extra {
-		margin-left: auto;
-	}
-}
-</style>
+<template>
+	<div class="sh-pageheader" :style="styles" :class="classes">
+		<sh-loading :loading="loading" fix />
+		<div class="sh-pageheader-heading">
+			<div v-if="showback" class="sh-pageheader-back">
+				<div class="sh-pageheader-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
+			</div>
+			<sh-icon v-if="icon" style="margin-right: 0.5rem" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
+			<span v-if="title || slots.title" class="sh-pageheader-title" :style="titleStyle">
+				<slot name="title">{{ title }}</slot>
+			</span>
+			<span v-if="subTitle || slots.subTitle" class="sh-pageheader-subtitle">
+				<slot name="subTitle">{{ subTitle }}</slot>
+			</span>
+			<div v-if="slots.tags" class="sh-pageheader-tags"><slot name="tags"></slot></div>
+			<div v-if="slots.extra" class="sh-pageheader-extra"><slot name="extra"></slot></div>
+		</div>
+		<div v-if="slots.default" :class="contentClass">
+			<slot></slot>
+		</div>
+		<slot name="body"></slot>
+		<div v-if="slots.footer" class="sh-pageheader-footer"><slot name="footer"></slot></div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShHeader',
+	props: {
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		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'],
+	setup(props, context) {
+		const { emit, slots } = context
+
+		let sizeMap = {
+			large: '19px',
+			default: '17px',
+			medium: 'var(--vxe-font-size)',
+			small: 'var(--vxe-font-size-small)',
+			mini: 'var(--vxe-font-size-smini)'
+		}
+
+		const styles = computed(() => {
+			return {
+				backgroundColor: props.color
+			}
+		})
+		const classes = computed(() => {
+			return {
+				'sh-pageheader-ghost': props.ghost,
+				'sh-pageheader-full': props.full,
+				'sh-pageheader-border': props.border,
+				[`sh-pageheader-theme-${props.theme}`]: props.theme,
+				'has-footer': slots.footer,
+				[`sh-pageheader-type-${props.type}`]: props.type,
+				[`${props.size}`]: props.size
+			}
+		})
+		const titleStyle = computed(() => {
+			return {
+				fontSize: sizeMap[props.size] || sizeMap.default,
+				whiteSpace: props.nowrap ? 'nowrap' : ''
+			}
+		})
+		const contentClass = computed(() => {
+			return {
+				'sh-pageheader-content': true,
+				'no-padding': !props.title && !slots.title && !props.subTitle && !slots.subTitle && !slots.tags && !slots.extra
+			}
+		})
+
+		const handleBack = () => {
+			emit('back')
+		}
+		return {
+			styles,
+			classes,
+			titleStyle,
+			contentClass,
+			slots,
+			handleBack
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-pageheader {
+	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);
+	&-theme {
+		color: #fff;
+		&-primary {
+			background-color: var(--vxe-primary-color);
+		}
+		&-success {
+			background-color: var(--vxe-success-color);
+		}
+		&-warning {
+			background-color: var(--vxe-warning-color);
+		}
+		&-error {
+			background-color: var(--vxe-danger-color);
+		}
+		&-info {
+			background-color: var(--vxe-info-color);
+		}
+	}
+	&-type {
+		color: #fff;
+		&-primary {
+			border-left: 4px solid var(--vxe-primary-color);
+			background-color: var(--primary-weak-color);
+			.sh-pageheader-heading-title {
+				color: var(--vxe-primary-color);
+			}
+		}
+		&-success {
+			border-left: 4px solid var(--vxe-success-color);
+			background-color: #edfff3;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-success-color);
+			}
+		}
+		&-warning {
+			border-left: 4px solid var(--vxe-warning-color);
+			background-color: #fff9e6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-warning-color);
+			}
+		}
+		&-error {
+			border-left: 4px solid var(--vxe-danger-color);
+			background-color: #ffefe6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-danger-color);
+			}
+		}
+		&-info {
+			border-left: 4px solid var(--vxe-info-color);
+			background-color: #f0faff;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-info-color);
+			}
+		}
+	}
+	&-full {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	&-ghost {
+		background-color: transparent;
+	}
+	&-border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&-heading {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&-content {
+		margin-top: 10px;
+		&.no-padding {
+			margin-top: 0;
+			padding-top: 0;
+		}
+	}
+	&-footer {
+		margin-top: 10px;
+	}
+	&-back {
+		font-size: 1.2rem;
+		line-height: 1;
+		margin-right: 0.5rem;
+		&-button {
+			color: inherit;
+			text-decoration: none;
+			outline: none;
+			transition: color 0.3s;
+			cursor: pointer;
+			&:hover {
+				opacity: 0.85;
+			}
+		}
+	}
+	&-title {
+		display: block;
+		margin-right: 0.5rem;
+		font-weight: 600;
+	}
+	&-subtitle {
+		margin-right: 0.5rem;
+		color: rgba(0, 0, 0, 0.45);
+	}
+	&-tags {
+	}
+	&-extra {
+		margin-left: auto;
+	}
+}
+</style>