sh-view 2.7.8 → 2.8.0

package/packages/components/{global-components/sh-tabs → sh-tabs}/index.vue

@@ -1,9 +1,11 @@
 <template>
-	<div class="sh-tabs" :class="{ 'sh-tabs-card': type === 'card' }">
+	<div class="sh-tabs" :class="tabClass">
 		<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="navWrapRef" 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>
+				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-up' : 'ios-arrow-back'"></sh-icon>
+				</span>
 				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
 					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
 						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
@@ -20,17 +22,21 @@
 						</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>
+				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-down' : '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[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
-					</div>
-				</template>
+				<slot name="tabContent" v-bind="tabList">
+					<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+						<div class="sh-tabs-content-item">
+							<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
+						</div>
+					</template>
+				</slot>
 			</div>
 		</div>
 	</div>
@@ -81,6 +87,10 @@ export default defineComponent({
 		gutter: {
 			type: Number,
 			default: 5
+		},
+		placement: {
+			type: String,
+			default: 'top' // 'left', 'right', 'top', 'bottom'
 		}
 	},
 	emits: ['update:modelValue', 'close', 'change'],
@@ -98,7 +108,15 @@ export default defineComponent({
 		const closedList = ref([])
 		const navStyle = ref({ transform: '' })
 
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
 		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
+		const tabClass = computed(() => {
+			return {
+				'sh-tabs-card': props.type === 'card',
+				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
+				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
+			}
+		})
 		const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab[props.labelKey])) || [])
 		const contentStyle = computed(() => {
 			const x = tabList.value.findIndex(tab => tab[props.labelKey] === activeKey.value)
@@ -111,42 +129,55 @@ export default defineComponent({
 		})
 
 		const scrollPrev = () => {
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navScrollOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
 			if (!currentOffset) return
-			let newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0
+			let newOffset = 0
+			if (currentOffset > navScrollOffset) {
+				newOffset = currentOffset - navScrollOffset
+			}
 			setOffset(newOffset)
 		}
 		const scrollNext = () => {
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
-			if (navWidth - currentOffset <= containerWidth) return
-			let newOffset = navWidth - currentOffset > containerWidth * 2 ? currentOffset + containerWidth : navWidth - containerWidth
+			if (navOffset - currentOffset <= containerOffset) return
+			let newOffset = navOffset - currentOffset > containerOffset * 2 ? currentOffset + containerOffset : navOffset - containerOffset
 			setOffset(newOffset)
 		}
 		const setOffset = value => {
-			navStyle.value.transform = `translateX(-${value}px)`
+			const direction = isHorizontal.value ? 'Y' : 'X'
+			navStyle.value.transform = `translate${direction}(-${value}px)`
 		}
 		const getCurrentScrollOffset = () => {
-			return navStyle.value.transform ? Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0
+			if (navStyle.value.transform && isHorizontal.value) {
+				return Number(navStyle.value.transform.match(/translateY\(-(\d+(\.\d+)*)px\)/)[1])
+			} else if (navStyle.value.transform) {
+				return Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
+			}
+			return 0
 		}
 		const getTabIsClosable = tab => {
 			return props.closable && !tab.disabled && !tab.unClosed
 		}
 		const getTabItemStyle = (tab, tabIndex) => {
-			return {
-				marginLeft: tabIndex ? `${props.gutter}px` : 0
+			let itemStyle = {}
+			if (isHorizontal.value) {
+				itemStyle.marginTop = tabIndex ? `${props.gutter}px` : 0
+			} else {
+				itemStyle.marginLeft = tabIndex ? `${props.gutter}px` : 0
 			}
+			return itemStyle
 		}
 		const handleResize = e => {
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
-			if (containerWidth < navWidth) {
+			if (containerOffset < navOffset) {
 				scrollable.value = true
-				if (navWidth - currentOffset < containerWidth) {
-					setOffset(navWidth - containerWidth)
+				if (navOffset - currentOffset < containerOffset) {
+					setOffset(navOffset - containerOffset)
 				}
 			} else {
 				scrollable.value = false
@@ -173,20 +204,21 @@ export default defineComponent({
 			activeKey.value = tab[props.labelKey]
 			emit('change', tab)
 			if (!scrollable.value) return
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
 			const tabIndex = tabList.value.findIndex(tb => tb[props.labelKey] === tab[props.labelKey])
+			const offsetName = isHorizontal.value ? 'offsetHeight' : 'offsetWidth'
 			let barOffset = 0
 			if (tabIndex > 0) {
 				let offset = 0
 				for (let i = 0; i < tabIndex; i++) {
-					offset += parseFloat(prevTabs[i].offsetWidth) + props.gutter
+					offset += parseFloat(prevTabs[i][offsetName]) + props.gutter
 				}
 				barOffset = offset
 			}
-			let navOffset = navWidth - barOffset < containerWidth ? navWidth - containerWidth : barOffset
-			setOffset(navOffset)
+			let newOffset = navOffset - barOffset < containerOffset ? navOffset - containerOffset : barOffset
+			setOffset(newOffset)
 		}
 		const handleClose = tab => {
 			closedList.value.push(tab[props.labelKey])
@@ -222,8 +254,10 @@ export default defineComponent({
 			navScrollRef,
 			contentWrapRef,
 			slots,
+			isHorizontal,
 			scrollable,
 			navStyle,
+			tabClass,
 			tabList,
 			activeKey,
 			hasContent,
@@ -244,8 +278,8 @@ export default defineComponent({
 <style scoped lang="scss">
 .sh-tabs {
 	width: 100%;
-	display: block;
 	position: relative;
+	display: flex;
 	.sh-tab-close {
 		display: inline-flex;
 		align-items: center;
@@ -254,6 +288,37 @@ export default defineComponent({
 			background-color: rgba(0, 0, 0, 0.1);
 		}
 	}
+	&-vertical {
+		width: 100%;
+		flex-wrap: wrap;
+		flex-direction: column;
+		&.sh-tabs-reverse {
+			flex-direction: column-reverse;
+		}
+		.sh-tabs-nav {
+			width: 100%;
+		}
+	}
+	&-horizontal {
+		flex-wrap: nowrap;
+		flex-direction: row;
+		.sh-tabs-nav {
+			width: auto;
+		}
+		.sh-tabs-nav,
+		.sh-tabs-nav-wrap,
+		.sh-tabs-nav-inner {
+			flex-direction: column;
+		}
+		.sh-tabs-nav-prev,
+		.sh-tabs-nav-next {
+			width: 100%;
+			height: 26px;
+		}
+		&.sh-tabs-reverse {
+			flex-direction: row-reverse;
+		}
+	}
 	&-nav {
 		display: flex;
 		&-slot {
@@ -273,7 +338,7 @@ export default defineComponent({
 			display: inline-flex;
 			align-items: center;
 			justify-content: center;
-			box-shadow: 0 1px 8px #999;
+			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
 			position: relative;
 			z-index: 10;
 			&:hover {
@@ -301,9 +366,6 @@ export default defineComponent({
 				&: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;
@@ -346,8 +408,9 @@ export default defineComponent({
 		width: 100%;
 		&-wrap {
 			flex: 1;
-			width: fit-content;
+			display: flex;
 			white-space: nowrap;
+			width: 100%;
 			&.sh-tabs-content-animated {
 				transition: transform 0.2s ease-in-out;
 			}

package/packages/components/{global-components/sh-tree → sh-tree}/components/table-tree.vue

@@ -23,7 +23,6 @@ import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted }
 // 树组件表格默认配置
 const tableConfigDefault = {
 	autoResize: true,
-	syncResize: true,
 	stripe: false,
 	size: 'small', //  medium / small / mini
 	border: 'inner',
@@ -77,7 +76,7 @@ export default defineComponent({
 		})
 		const tableProps = computed(() => {
 			return {
-				height: props.isSelect ? '230px' : props.height,
+				height: props.isSelect ? '100%' : props.height,
 				size: props.size,
 				loading: props.loading || treeLoading.value,
 				data: filterData.value || treeData.value,

package/packages/components/{global-components/sh-tree → sh-tree}/css/index.scss

@@ -34,6 +34,7 @@
 }
 
 .sh-tree-select-dropdown {
+    height: 230px
 }
 
 .sh-vxe-tree-table{