sh-view 1.7.6 → 2.0.1

package/packages/components/global-components/{sh-vxe-table → sh-table}/mixin/defaultData.js

@@ -1,116 +1,94 @@
-export default {
-	data() {
-		return {
-			// 全局配置
-			globalConfigDefault: {
-				tableName: '',
-				title: false, // 是否显示 tableName
-				checkbox: true, // 是否展示复选框
-				radio: false, // 是否展示单选框
-				seq: true, // 是否展示序号列
-				ghost: false, // 是否开启透明
-				search: false, // 表格是否开启查询，默认不开启，根据columns配置字段 search 为 true
-				globalFilter: false, // 表格是否开启全局过滤
-				zoom: false, // 表格是否开启缩放
-				import: false, // 表格是否支持导入
-				export: false, // 表格是否支持导出
-				print: false, // 表格是否支持导引
-				addRow: false, // 表格是否支持新增行
-				deleteRow: false, // 表格是否支持删除行
-				formToggleNum: 4,
-				formToggle: true
-			},
-			// 分页配置
-			pagerConfigDefault: {
-				enabled: true,
-				currentPage: 1,
-				pageSize: 50,
-				total: 0,
-				className: 'sh-table-footer',
-				slots: {
-					left: 'pagerLeftSlot',
-					right: 'pagerRightSlot'
-				}
-			},
-			// 表头默认值
-			columnObjDefault: {
-				minWidth: 120,
-				sortable: true,
-				filter: true
-			},
-			// 表头默认列
-			columnsConfigDefault: [
-				{
-					title: '',
-					type: 'checkbox',
-					width: 60,
-					align: 'center',
-					fixed: 'left',
-					sortable: false,
-					resizable: false,
-					className: 'table-row-checkbox'
-				},
-				{
-					title: '单选',
-					type: 'radio',
-					width: 60,
-					align: 'center',
-					fixed: 'left',
-					sortable: false,
-					resizable: false,
-					className: 'table-row-radio'
-				},
-				{
-					title: '序号',
-					type: 'seq',
-					width: 70,
-					align: 'center',
-					fixed: 'left',
-					sortable: false,
-					resizable: false,
-					className: 'table-row-seq'
-				}
-			],
-			columnConfigDefault: {
-				isCurrent: false,
-				isHover: true,
-				resizable: true
-			},
-			exportConfigDefault: {
-				type: 'xlsx',
-				types: ['xlsx', 'csv', 'pdf', 'html', 'xml', 'txt'],
-				mode: 'current',
-				original: false,
-				message: true,
-				isHeader: true,
-				isColgroup: true,
-				isFooter: false,
-				isMerge: false,
-				isAllExpand: true,
-				download: true,
-				useStyle: false,
-				columnFilterMethod: this.columnDefaultFilterMethod,
-				sheetMethod: this.exportSheetMethod,
-				beforeExportMethod: obj => this.getExportPrintDataByOption(obj, 'export')
-			},
-			printConfigDefault: {
-				mode: 'current',
-				original: false,
-				message: true,
-				isHeader: true,
-				isColgroup: true,
-				isFooter: false,
-				isMerge: false,
-				isAllExpand: true,
-				download: true,
-				useStyle: false,
-				columnFilterMethod: this.columnDefaultFilterMethod,
-				beforePrintMethod: obj => this.getExportPrintDataByOption(obj, 'print')
-			}
-		}
-	},
-	computed: {},
-	methods: {},
-	created() {},
-	activated() {}
-}
+export default {
+	data() {
+		return {
+			// 全局配置
+			globalConfigDefault: {
+				tableName: '',
+				title: false, // 是否显示 tableName
+				checkbox: true, // 是否展示复选框
+				radio: false, // 是否展示单选框
+				seq: true, // 是否展示序号列
+				ghost: false, // 是否开启透明
+				search: false, // 表格是否开启查询，默认不开启，根据columns配置字段 search 为 true
+				globalFilter: false, // 表格是否开启全局过滤
+				zoom: false, // 表格是否开启缩放
+				formToggleNum: 4,
+				formToggle: true
+			},
+			// 表头默认值
+			columnObjDefault: {
+				minWidth: 120,
+				sortable: true,
+				filter: true
+			},
+			// 表头默认列
+			columnsConfigDefault: [
+				{
+					title: '',
+					type: 'checkbox',
+					width: 60,
+					align: 'center',
+					fixed: 'left',
+					sortable: false,
+					resizable: false,
+					className: 'table-row-checkbox'
+				},
+				{
+					title: '单选',
+					type: 'radio',
+					width: 60,
+					align: 'center',
+					fixed: 'left',
+					sortable: false,
+					resizable: false,
+					className: 'table-row-radio'
+				},
+				{
+					title: '序号',
+					type: 'seq',
+					width: 70,
+					align: 'center',
+					fixed: 'left',
+					sortable: false,
+					resizable: false,
+					className: 'table-row-seq'
+				}
+			],
+			exportConfigDefault: {
+				type: 'xlsx',
+				types: ['xlsx', 'csv', 'pdf', 'html', 'xml', 'txt'],
+				mode: 'current',
+				original: false,
+				message: true,
+				isHeader: true,
+				isColgroup: true,
+				isFooter: false,
+				isMerge: false,
+				isAllExpand: true,
+				download: true,
+				useStyle: false,
+				columnFilterMethod: this.columnDefaultFilterMethod,
+				sheetMethod: this.exportSheetMethod,
+				beforeExportMethod: obj => this.getExportPrintDataByOption(obj, 'export')
+			},
+			printConfigDefault: {
+				mode: 'current',
+				original: false,
+				message: true,
+				isHeader: true,
+				isColgroup: true,
+				isFooter: false,
+				isMerge: false,
+				isAllExpand: true,
+				download: true,
+				useStyle: false,
+				columnFilterMethod: this.columnDefaultFilterMethod,
+				beforePrintMethod: obj => this.getExportPrintDataByOption(obj, 'print')
+			}
+		}
+	},
+	computed: {},
+	methods: {},
+	created() {},
+	activated() {}
+}

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

@@ -0,0 +1,322 @@
+<template>
+	<div class="sh-tabs" :class="{ 'sh-tabs-card': type === 'card' }">
+		<div class="sh-tabs-nav">
+			<div v-if="$slots.left" class="sh-tabs-nav-slot sh-tabs-nav-left"><slot name="left"></slot></div>
+			<div ref="navWrap" v-resize="handleResize" class="sh-tabs-nav-wrap" :class="{ 'sh-tabs-nav-scrollable': scrollable }">
+				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev"><sh-icon type="ios-arrow-back"></sh-icon></span>
+				<div ref="navScroll" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
+					<div ref="nav" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
+						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+							<div class="sh-tab-item" :class="{ 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab.value === activeKey }" @click="handleChange(tab)">
+								<slot name="tabItem" v-bind="{ ...tab, isActive: tab.value === activeKey }">
+									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
+									<div class="sh-tab-label">{{ tab[labelField] }}</div>
+									<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
+								</slot>
+							</div>
+						</template>
+					</div>
+				</div>
+				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext"><sh-icon type="ios-arrow-forward"></sh-icon></span>
+			</div>
+			<div v-if="$slots.right" class="sh-tabs-nav-slot sh-tabs-nav-right"><slot name="right"></slot></div>
+		</div>
+		<div v-if="hasContent" class="sh-tabs-content">
+			<div ref="contentWrap" class="sh-tabs-content-wrap" :class="{ 'sh-tabs-content-animated': animated }" :style="contentStyle">
+				<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+					<div class="sh-tabs-content-item">
+						<slot :name="tab.value" v-bind="tab">{{ tab.label }}</slot>
+					</div>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShTabs',
+	props: {
+		modelValue: {
+			type: [String, Number]
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		type: {
+			type: String,
+			default: 'line' // 'line', 'card'
+		},
+		size: {
+			type: String,
+			default: 'default' // 'small', 'default'
+		},
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		isContent: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ['update:modelValue', 'close', 'change'],
+	data() {
+		return {
+			activeKey: this.modelValue,
+			scrollable: false,
+			closedList: [],
+			navStyle: { transform: '' }
+		}
+	},
+	computed: {
+		hasContent() {
+			return this.isContent && this.activeKey && this.options.map(item => item.value).includes(this.activeKey)
+		},
+		tabList() {
+			return this.options.filter(tab => !this.closedList.includes(tab.value)) || []
+		},
+		contentStyle() {
+			const x = this.tabList.findIndex(tab => tab.value === this.activeKey)
+			const p = x === 0 ? '0%' : `-${x}00%`
+			let style = {}
+			if (x > -1) {
+				style = {
+					transform: `translateX(${p}) translateZ(0px)`
+				}
+			}
+			return style
+		}
+	},
+	watch: {
+		modelValue(val) {
+			this.activeKey = val
+		},
+		activeKey(val) {
+			this.$emit('update:modelValue', val)
+		},
+		options() {
+			this.closedList = []
+		}
+	},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		scrollPrev() {
+			const containerWidth = this.$refs.navScroll.offsetWidth
+			const currentOffset = this.getCurrentScrollOffset()
+			if (!currentOffset) return
+			let newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0
+			this.setOffset(newOffset)
+		},
+		scrollNext() {
+			const navWidth = this.$refs.nav.offsetWidth
+			const containerWidth = this.$refs.navScroll.offsetWidth
+			const currentOffset = this.getCurrentScrollOffset()
+			if (navWidth - currentOffset <= containerWidth) return
+			let newOffset = navWidth - currentOffset > containerWidth * 2 ? currentOffset + containerWidth : navWidth - containerWidth
+			this.setOffset(newOffset)
+		},
+		setOffset(value) {
+			this.navStyle.transform = `translateX(-${value}px)`
+		},
+		getCurrentScrollOffset() {
+			const { navStyle } = this
+			return navStyle.transform ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0
+		},
+		getTabIsClosable(tab) {
+			return this.closable && !tab.disabled && !tab.unClosed
+		},
+		handleResize(e) {
+			const navWidth = this.$refs.nav.offsetWidth
+			const containerWidth = this.$refs.navScroll.offsetWidth
+			const currentOffset = this.getCurrentScrollOffset()
+			if (containerWidth < navWidth) {
+				this.scrollable = true
+				if (navWidth - currentOffset < containerWidth) {
+					this.setOffset(navWidth - containerWidth)
+				}
+			} else {
+				this.scrollable = false
+				if (currentOffset > 0) {
+					this.setOffset(0)
+				}
+			}
+		},
+		handleScroll(e) {
+			e.preventDefault()
+			e.stopPropagation()
+			let delta = 0
+			if (e.type === 'DOMMouseScroll' || e.type === 'mousewheel') {
+				delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40
+			}
+			if (delta > 0) {
+				this.scrollPrev()
+			} else {
+				this.scrollNext()
+			}
+		},
+		handleChange(tab) {
+			if (!tab || tab.disabled) return
+			this.activeKey = tab.value
+			this.$emit('change', tab)
+			if (!this.scrollable) return
+			const navWidth = this.$refs.nav.offsetWidth
+			const containerWidth = this.$refs.navScroll.offsetWidth
+			const prevTabs = this.$refs.nav.querySelectorAll('.sh-tab-item')
+			const tabIndex = this.tabList.findIndex(tb => tb.value === tab.value)
+			let barOffset = 0
+			if (tabIndex > 0) {
+				const gutter = 5
+				let offset = 0
+				for (let i = 0; i < tabIndex; i++) {
+					offset += parseFloat(prevTabs[i].offsetWidth) + gutter
+				}
+				barOffset = offset
+			}
+			let navOffset = navWidth - barOffset < containerWidth ? navWidth - containerWidth : barOffset
+			this.setOffset(navOffset)
+		},
+		handleClose(tab) {
+			this.closedList.push(tab.value)
+			if (tab.value === this.activeKey) {
+				let isNotDisabledList = this.tabList.filter(tab => !tab.disabled)
+				this.activeKey = isNotDisabledList.length ? isNotDisabledList[0].value : ''
+			}
+			this.$emit('close', tab)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-tabs {
+	width: 100%;
+	display: block;
+	position: relative;
+	.sh-tab-close {
+		display: inline-flex;
+		align-items: center;
+		padding: 0 1px;
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.1);
+		}
+	}
+	&-nav {
+		display: flex;
+		&-slot {
+			display: inline-flex;
+			align-items: center;
+		}
+		&-wrap {
+			flex: 1;
+			display: flex;
+			align-items: stretch;
+			overflow: hidden;
+		}
+		&-prev,
+		&-next {
+			width: 30px;
+			height: 100%;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 1px 8px #999;
+			position: relative;
+			z-index: 10;
+			&:hover {
+				color: var(--vxe-primary-color);
+			}
+			&.sh-tabs-nav-btn-disabled {
+			}
+		}
+		&-scroll {
+			flex: 1;
+			overflow: hidden;
+		}
+		&-inner {
+			display: block;
+			width: fit-content;
+			white-space: nowrap;
+			transition: transform 0.2s ease-in-out;
+			.sh-tab-item {
+				display: inline-flex;
+				align-items: stretch;
+				cursor: pointer;
+				line-height: 20px;
+				box-sizing: border-box;
+				border-bottom: 2px solid transparent;
+				&:hover {
+					color: var(--vxe-primary-color);
+				}
+				& + .sh-tab-item {
+					margin-left: 5px;
+				}
+				&.sh-tab-item-active {
+					border-bottom: 2px solid var(--vxe-primary-darken-color);
+					color: var(--vxe-primary-color) !important;
+				}
+				&.sh-tab-item-disabled {
+					cursor: not-allowed;
+					color: var(--vxe-input-disabled-color) !important;
+				}
+				.sh-tab-icon {
+					display: inline-flex;
+					align-items: center;
+					padding: 0 2px 0 5px;
+				}
+				.sh-tab-label {
+					flex: 1;
+					padding: 5px;
+				}
+			}
+		}
+	}
+	&.sh-tabs-card {
+		.sh-tabs-nav-prev,
+		.sh-tabs-nav-next {
+			border: 1px solid var(--vxe-table-border-color);
+		}
+		.sh-tabs-nav-inner {
+			.sh-tab-item {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+			.sh-tab-item-active {
+				background-color: var(--vxe-primary-color);
+				border-color: var(--vxe-primary-darken-color);
+				color: #fff !important;
+			}
+		}
+	}
+	&-content {
+		display: flex;
+		overflow-x: hidden;
+		width: 100%;
+		&-wrap {
+			flex: 1;
+			width: fit-content;
+			white-space: nowrap;
+			&.sh-tabs-content-animated {
+				transition: transform 0.2s ease-in-out;
+			}
+		}
+		&-item {
+			display: inline-block;
+			min-width: 100%;
+			vertical-align: top;
+			position: relative;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+	<div class="sh-tag" :class="classes" :style="[borderStyle, backgroundStyle]" @click.stop="check">
+		<span v-if="type === 'dot'" class="sh-tag-dot" :style="[backgroundStyle]"></span>
+		<span class="sh-tag-text" :class="textClasses" :style="[fontStyle]"><slot></slot></span>
+		<a v-if="closable" class="sh-tag-close" :style="[borderStyle]" @click="close">
+			<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
+		</a>
+	</div>
+</template>
+
+<script>
+const colorMap = {
+	default: 'var(-vxe-table-header-background-color)',
+	primary: 'var(--vxe-primary-color)',
+	success: 'var(--vxe-success-color)',
+	warning: 'var(--vxe-warning-color)',
+	error: 'var(--vxe-danger-color)'
+}
+const fontColorMap = {
+	default: 'var(--vxe-font-color)'
+}
+const borderColorMap = {
+	default: 'null'
+}
+export default {
+	name: 'ShTag',
+	props: {
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		checked: {
+			type: Boolean,
+			default: false
+		},
+		color: {
+			type: String
+		},
+		type: {
+			type: String,
+			default: '' // 'border', 'dot'
+		},
+		name: {
+			type: [String, Number]
+		},
+		size: {
+			type: String,
+			default: 'default' //  medium / small / mini
+		},
+		opacity: {
+			type: Number,
+			default: 75
+		}
+	},
+	emits: ['change', 'close'],
+	data() {
+		return {
+			isChecked: this.checked
+		}
+	},
+	computed: {
+		colorIn() {
+			return this.color || 'default'
+		},
+		colorRgb() {
+			return colorMap[this.colorIn] || this.$vUtils.lighten(this.colorIn)
+		},
+		isCustom() {
+			return !!colorMap[this.colorIn]
+		},
+		fontStyle() {
+			return { color: this.isCustom && !this.type ? fontColorMap[this.colorIn] || '#fff' : this.colorRgb }
+		},
+		borderStyle() {
+			return { borderWidth: '1px', borderStyle: 'solid', borderColor: borderColorMap[this.colorIn] || this.colorRgb }
+		},
+		backgroundStyle() {
+			if (this.isCustom) return { backgroundColor: this.colorRgb, color: '#fff' }
+			return { backgroundColor: this.$vUtils.lighten(this.colorIn, this.opacity) }
+		},
+		classes() {
+			return {
+				[`${this.size}`]: !!this.size,
+				[`${this.type}`]: !!this.type,
+				[`closable`]: this.closable,
+				[`checked`]: this.isChecked,
+				[`checkable`]: this.checkable
+			}
+		},
+		textClasses() {
+			return {}
+		}
+	},
+	watch: {
+		checked(val) {
+			this.isChecked = val
+		}
+	},
+	methods: {
+		close(event) {
+			this.$emit('close', event, this.name)
+		},
+		check() {
+			if (!this.checkable) return
+			const checked = !this.isChecked
+			this.isChecked = checked
+			this.$emit('change', checked, this.name)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+$default-color: #f7f7f7;
+.sh-tag {
+	display: inline-flex;
+	align-items: center;
+	margin: 2px 4px 2px 0;
+	border: 1px solid var(--vxe-table-border-color);
+	border-radius: var(--vxe-border-radius);
+	background-color: $default-color;
+	vertical-align: top;
+	overflow: hidden;
+	&.border,
+	&.dot {
+		background-color: transparent !important;
+		color: var(--vxe-font-color) !important;
+	}
+	&.dot {
+		border-color: var(--vxe-table-border-color) !important;
+		color: var(--vxe-font-color) !important;
+		.sh-tag-text {
+			color: inherit !important;
+			line-height: 30px;
+		}
+		.sh-tag-close {
+			border: none !important;
+		}
+	}
+	&-dot {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background-color: #ccc;
+		margin: 0 5px 0 12px;
+	}
+	&-text {
+		padding: 0 8px;
+		flex: 1;
+	}
+	&-close {
+		padding: 0 3px;
+		border-top: none !important;
+		border-right: none !important;
+		border-bottom: none !important;
+	}
+}
+</style>