sh-view 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {

package/packages/components/other-components/sh-menu/index.vue

@@ -0,0 +1,304 @@
+<template>
+	<div class="sh-menu" :class="classes">
+		<div v-clickout="handleOut" class="sh-menu-inner">
+			<template v-for="(item, index) in options" :key="index">
+				<menuGroupContent :menu-item="item" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import menuGroupContent from './menu-group-content.vue'
+export default {
+	name: 'ShMenu',
+	components: {
+		menuGroupContent
+	},
+	provide() {
+		return {
+			MenuInstance: this
+		}
+	},
+	props: {
+		modelValue: {
+			type: String
+		},
+		mode: {
+			type: String,
+			default: 'vertical' // horizontal
+		},
+		indent: {
+			type: Number,
+			default: 20
+		},
+		accordion: {
+			type: Boolean,
+			default: true
+		},
+		theme: {
+			type: Boolean
+		},
+		fix: {
+			type: Boolean
+		},
+		collapsed: {
+			type: Boolean
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: Function
+		}
+	},
+	emits: ['update:modelValue', 'change', 'expand'],
+	data() {
+		return {
+			activeName: this.modelValue,
+			activeNames: [],
+			openedNames: []
+		}
+	},
+	computed: {
+		classes() {
+			return {
+				theme: this.theme,
+				fix: this.fix,
+				collapsed: this.collapsed,
+				[`${this.mode}`]: this.mode
+			}
+		}
+	},
+	watch: {
+		modelValue(to, from) {
+			this.resetMenu()
+		}
+	},
+	mounted() {
+		this.resetMenu()
+	},
+	methods: {
+		// 重新渲染菜单
+		resetMenu() {
+			this.activeName = this.modelValue
+			this.resetExpand(this.activeName, true)
+		},
+		resetExpand(menuName, mount) {
+			let activeNames = []
+			let parentTree = this.$vUtils.searchTree(this.options, item => item.name === menuName)
+			this.$vUtils.eachTree(parentTree, item => {
+				activeNames.push(item.name)
+			})
+			if (mount) {
+				this.activeNames = activeNames
+				if (this.collapsed) return
+			}
+			// 过滤掉所有子节点
+			let menuIndex = activeNames.findIndex(item => item === menuName)
+			let parentNames = activeNames.filter((item, itemIndex) => menuIndex >= itemIndex)
+			if (!this.accordion) parentNames = Array.from(new Set(this.openedNames.concat(parentNames)))
+			this.openedNames = parentNames
+		},
+		onMenuSelect(menu) {
+			this.handleOut()
+			this.$emit('change', menu)
+		},
+		onMenuExpand(expand, menu) {
+			this.$emit('expand', expand, menu)
+			if (!expand) {
+				this.openedNames = this.openedNames.filter(name => name !== menu.name)
+				return
+			}
+			this.resetExpand(menu.name)
+		},
+		handleOut() {
+			if (!this.collapsed && this.mode === 'vertical') return
+			this.openedNames = []
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$textColor: var(--vxe-font-color);
+$textActive: var(--vxe-primary-color);
+$mainBgColor: var(--vxe-table-body-background-color);
+$expandBgColor: var(--vxe-table-header-background-color);
+
+$textDkColor: hsla(0, 0%, 100%, 0.6);
+$textDkActive: #fff;
+$mainDkBgColor: var(--vxe-primary-color);
+$expandDkBgColor: var(--vxe-primary-darken-color);
+.sh-menu {
+	position: relative;
+	background-color: $mainBgColor;
+	&.theme {
+		background-color: $mainDkBgColor;
+		.sh-menu-group {
+			&.is__expand {
+				background: $expandDkBgColor;
+				& > .sh-menu-item {
+					color: $textDkActive;
+				}
+			}
+			&.is__active {
+				& > .sh-menu-item {
+					color: $textDkActive;
+				}
+			}
+			& > .sh-menu-group-dropdown,
+			& > .sh-menu-group-dropright {
+				background-color: $mainDkBgColor;
+			}
+		}
+		.sh-menu-item {
+			color: $textDkColor;
+			&:hover {
+				color: $textDkActive;
+				background: var(--vxe-primary-lighten-color) !important;
+			}
+			&.sh-menu-item-active {
+				color: $textDkActive;
+				background: var(--vxe-primary-lighten-color);
+				&:after {
+					background: $textDkColor;
+				}
+			}
+		}
+	}
+	&.fix {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+	&.horizontal {
+		.sh-menu-inner {
+			display: flex;
+			align-items: center;
+			height: 100%;
+		}
+		.sh-menu-item {
+			height: 100%;
+			&.sh-menu-item-active {
+				&:after {
+					width: 100%;
+					height: 3px;
+					top: auto;
+					bottom: 0;
+				}
+			}
+			&.sh-menu-item-level {
+				.sh-menu-item-arrow {
+					transform: rotate(90deg);
+					transform-origin: center;
+				}
+			}
+		}
+		.sh-menu-group {
+			height: 100%;
+			&.is__expand {
+				& > .sh-menu-item-level {
+					.sh-menu-item-arrow {
+						transform: rotate(-90deg);
+						transform-origin: center;
+					}
+				}
+			}
+		}
+	}
+	&.collapsed {
+		.sh-menu-item.sh-menu-item-level {
+			flex-wrap: wrap;
+			text-align: center;
+			padding: 5px;
+			&.sh-menu-item-active {
+				&:after {
+					display: none;
+				}
+			}
+			.sh-menu-item-icon {
+				margin-right: 0;
+				margin-bottom: 3px;
+				flex: 1;
+			}
+			.sh-menu-item-title {
+				min-width: 100%;
+			}
+		}
+	}
+	.sh-menu-group {
+		position: relative;
+		&.is__expand {
+			background: $expandBgColor;
+			& > .sh-menu-item {
+				color: $textActive;
+				.sh-menu-item-arrow {
+					transform: rotate(90deg);
+					transform-origin: center;
+				}
+			}
+		}
+		&.is__active {
+			& > .sh-menu-item {
+				color: $textActive;
+			}
+		}
+		& > .sh-menu-group-dropdown,
+		& > .sh-menu-group-dropright {
+			position: fixed;
+			line-height: 1.5;
+			background-color: $mainBgColor;
+			box-shadow: var(--box-shadow);
+			overflow: auto;
+			z-index: 1000;
+		}
+	}
+	.sh-menu-item {
+		padding: 10px 12px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		cursor: pointer;
+		position: relative;
+		user-select: none;
+		color: $textColor;
+		text-align: left;
+		&:hover {
+			color: $textActive;
+		}
+		&.sh-menu-item-active {
+			color: $textActive;
+			background: var(--primary-weak-color);
+			&:after {
+				width: 3px;
+				content: '';
+				position: absolute;
+				top: 0;
+				right: 0;
+				height: 100%;
+				background: var(--vxe-primary-color);
+			}
+		}
+		.sh-menu-item-icon {
+			margin-right: 8px;
+		}
+		.sh-menu-item-title {
+			flex: 1;
+			white-space: nowrap;
+		}
+		.sh-menu-item-arrow {
+			margin-left: 5px;
+			transition: 0.1s all ease-in-out;
+		}
+	}
+}
+</style>

package/packages/components/other-components/sh-menu/menu-group-content.vue

@@ -0,0 +1,122 @@
+<template>
+	<div v-if="showChildren(menuItem)" class="sh-menu-group" :class="groupClass">
+		<menuItemContent ref="groupItem" :menu-item="menuItem" :menu-level="menuLevel" :arrow="isArrow" @click="onMenuExpand(!expand)" />
+		<div v-show="expand" ref="groupList" class="sh-menu-group-list" :class="groupListClass" :style="groupListStyle">
+			<template v-for="(item, index) in menuItem.children" :key="`sh-menu-${menuLevel}-${index}`">
+				<menuGroupContent :menu-item="item" :menu-level="menuNextLevel" />
+			</template>
+		</div>
+	</div>
+	<template v-else>
+		<menuItemContent :menu-item="menuItem" :menu-level="menuLevel" @click.stop="onMenuClick" />
+	</template>
+</template>
+
+<script>
+import menuItemContent from './menu-item-content.vue'
+export default {
+	name: 'MenuGroupContent',
+	components: {
+		menuItemContent
+	},
+	inject: {
+		MenuInstance: {
+			default: null
+		}
+	},
+	props: {
+		menuLevel: {
+			type: Number,
+			default: 0
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	data() {
+		return {
+			expand: false,
+			groupListStyle: {}
+		}
+	},
+	computed: {
+		menuNextLevel() {
+			return this.menuLevel + 1
+		},
+		isArrow() {
+			return this.MenuInstance.collapsed ? !!this.menuLevel : true
+		},
+		groupClass() {
+			return {
+				is__level: !this.menuLevel,
+				is__active: this.MenuInstance.activeNames.includes(this.menuItem.name),
+				is__expand: this.expand
+			}
+		},
+		groupListClass() {
+			const { mode, collapsed } = this.MenuInstance
+			return {
+				'sh-menu-group-dropdown': mode === 'horizontal',
+				'sh-menu-group-dropright': mode === 'vertical' && collapsed
+			}
+		}
+	},
+	watch: {
+		'MenuInstance.openedNames'(names) {
+			this.setMenuExpand()
+		}
+	},
+	mounted() {
+		this.setMenuExpand()
+	},
+	methods: {
+		setMenuExpand() {
+			let names = this.MenuInstance.openedNames
+			this.expand = names.includes(this.menuItem.name)
+			const { mode, collapsed } = this.MenuInstance
+			if (this.expand && this.$refs.groupItem && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
+				this.$nextTick(() => {
+					const { left, right, top, bottom } = this.$refs.groupItem.$refs?.shMenuItem.getBoundingClientRect()
+					const { offsetHeight, offsetWidth } = this.$refs.groupList
+					const winWidth = window.innerWidth
+					const winHeight = window.innerHeight
+					if (mode === 'vertical') {
+						let groupStyle = { left: `${right}px` }
+						if (offsetHeight >= winHeight) {
+							groupStyle.top = '10px'
+							groupStyle.bottom = '10px'
+						} else if (top + offsetHeight >= winHeight) {
+							groupStyle.bottom = '10px'
+						} else {
+							groupStyle.top = `${top}px`
+						}
+						this.groupListStyle = groupStyle
+					} else {
+						let groupStyle = { top: `${this.menuLevel ? top : bottom}px` }
+						if (right + offsetWidth >= winWidth) {
+							groupStyle.right = '10px'
+						} else {
+							groupStyle.left = `${this.menuLevel ? right : left}px`
+						}
+						this.groupListStyle = groupStyle
+					}
+				})
+			}
+		},
+		showChildren(item) {
+			return item.children && item.children.length > 0
+		},
+		onMenuClick() {
+			this.MenuInstance.onMenuSelect(this.menuItem)
+		},
+		onMenuExpand(value) {
+			this.MenuInstance.onMenuExpand(value, this.menuItem)
+		}
+	}
+}
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-menu/menu-item-content.vue

@@ -0,0 +1,61 @@
+<template>
+	<div ref="shMenuItem" class="sh-menu-item" :class="itemClass" :style="itemStyle">
+		<sh-icon v-if="iconType" class="sh-menu-item-icon" :type="iconType"></sh-icon>
+		<span class="sh-menu-item-title">{{ formatTitle(menuItem) }}</span>
+		<sh-icon v-if="arrow" class="sh-menu-item-arrow" type="ios-arrow-forward"></sh-icon>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'MenuItemBox',
+	inject: {
+		MenuInstance: {
+			default: null
+		}
+	},
+	props: {
+		arrow: Boolean,
+		menuLevel: {
+			type: Number
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	computed: {
+		defaultIcon() {
+			if (!this.menuLevel || this.menuLevel < 2) return 'md-folder'
+			else if (this.menuLevel === 2) return 'md-bookmark'
+			else return ''
+		},
+		iconType() {
+			return this.menuItem.meta?.icon || this.menuItem.icon || this.defaultIcon
+		},
+		itemClass() {
+			return {
+				'sh-menu-item-level': !this.menuLevel,
+				'sh-menu-item-active': this.MenuInstance.activeName === this.menuItem.name
+			}
+		},
+		itemStyle() {
+			let result = {}
+			const { mode, collapsed, indent } = this.MenuInstance
+			if (mode === 'vertical' && !collapsed && this.menuLevel) {
+				result.paddingLeft = `${indent * this.menuLevel}px`
+			}
+			return result
+		},
+		itemTitle() {
+			const { labelField, labelFormat } = this.MenuInstance
+			return labelFormat ? labelFormat(this.menuItem) : this.$vUtils.get(this.menuItem, labelField)
+		}
+	},
+	methods: {}
+}
+</script>
+
+<style scoped></style>