sh-view 2.7.8 → 2.7.9

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

@@ -1,278 +0,0 @@
-<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>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShHeader',
-	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'],
-	setup(props, context) {
-		const { emit, slots } = context
-
-		const styles = computed(() => {
-			return {
-				backgroundColor: props.color
-			}
-		})
-		const classes = computed(() => {
-			return {
-				'sh-page-header-ghost': props.ghost,
-				'sh-page-header-full': props.full,
-				'sh-page-header-border': props.border,
-				'has-footer': slots.footer,
-				[`sh-page-header-${props.theme}`]: props.theme,
-				[`${props.type}`]: props.type,
-				[`${props.size}`]: props.size,
-				'sh-page-header-nowrap': props.nowrap
-			}
-		})
-
-		const handleBack = () => {
-			emit('back')
-		}
-		return {
-			styles,
-			classes,
-			slots,
-			handleBack
-		}
-	}
-})
-</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;
-	}
-}
-</style>