sh-view 2.8.0 → 2.8.2

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

@@ -1,326 +1,326 @@
-<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 { defineComponent, computed, provide, ref, reactive, getCurrentInstance, watch, onMounted } from 'vue'
-import menuGroupContent from './menu-group-content.vue'
-export default defineComponent({
-	name: 'ShMenu',
-	components: {
-		menuGroupContent
-	},
-	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
-		},
-		defaultIcon: {
-			type: Boolean
-		},
-		options: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		labelField: {
-			type: String,
-			default: 'label'
-		},
-		labelFormat: {
-			type: Function
-		}
-	},
-	emits: ['update:modelValue', 'change', 'expand'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const activeName = ref(props.modelValue)
-		const activeNames = ref([])
-		const openedNames = ref([])
-
-		const classes = computed(() => {
-			return {
-				theme: props.theme,
-				fix: props.fix,
-				collapsed: props.collapsed,
-				[`${props.mode}`]: props.mode
-			}
-		})
-
-		// 重新渲染菜单
-		const resetMenu = () => {
-			activeName.value = props.modelValue
-			resetExpand(activeName.value, true)
-		}
-		const resetExpand = (menuName, mount) => {
-			let setActiveNames = []
-			let parentTree = $vUtils.searchTree(props.options, item => item.name === menuName)
-			$vUtils.eachTree(parentTree, item => {
-				setActiveNames.push(item.name)
-			})
-			if (mount) {
-				activeNames.value = setActiveNames
-				if (props.collapsed || props.mode !== 'vertical') return
-			}
-			// 过滤掉所有子节点
-			let menuIndex = setActiveNames.findIndex(item => item === menuName)
-			let parentNames = setActiveNames.filter((item, itemIndex) => menuIndex >= itemIndex)
-			if (!props.accordion) parentNames = Array.from(new Set(openedNames.value.concat(parentNames)))
-			openedNames.value = parentNames
-		}
-		const onMenuSelect = menu => {
-			emit('update:modelValue', menu.name)
-			emit('change', menu)
-			handleOut()
-		}
-		const onMenuExpand = (expand, menu) => {
-			emit('expand', expand, menu)
-			if (!expand) {
-				openedNames.value = openedNames.value.filter(name => name !== menu.name)
-				return
-			}
-			resetExpand(menu.name)
-		}
-		const handleOut = () => {
-			if (!props.collapsed && props.mode === 'vertical') return
-			openedNames.value = []
-		}
-
-		provide(
-			'MenuInstance',
-			reactive({
-				props,
-				activeName,
-				activeNames,
-				openedNames,
-				onMenuSelect,
-				onMenuExpand
-			})
-		)
-
-		watch(
-			() => props.modelValue,
-			() => {
-				resetMenu()
-			}
-		)
-
-		onMounted(() => {
-			resetMenu()
-		})
-
-		return {
-			classes,
-			handleOut
-		}
-	}
-})
-</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;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.sh-menu-item-arrow {
-			margin-left: 5px;
-			transition: 0.1s all ease-in-out;
-		}
-	}
-}
-</style>
+<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 { defineComponent, computed, provide, ref, reactive, getCurrentInstance, watch, onMounted } from 'vue'
+import menuGroupContent from './menu-group-content.vue'
+export default defineComponent({
+	name: 'ShMenu',
+	components: {
+		menuGroupContent
+	},
+	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
+		},
+		defaultIcon: {
+			type: Boolean
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: Function
+		}
+	},
+	emits: ['update:modelValue', 'change', 'expand'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const activeName = ref(props.modelValue)
+		const activeNames = ref([])
+		const openedNames = ref([])
+
+		const classes = computed(() => {
+			return {
+				theme: props.theme,
+				fix: props.fix,
+				collapsed: props.collapsed,
+				[`${props.mode}`]: props.mode
+			}
+		})
+
+		// 重新渲染菜单
+		const resetMenu = () => {
+			activeName.value = props.modelValue
+			resetExpand(activeName.value, true)
+		}
+		const resetExpand = (menuName, mount) => {
+			let setActiveNames = []
+			let parentTree = $vUtils.searchTree(props.options, item => item.name === menuName)
+			$vUtils.eachTree(parentTree, item => {
+				setActiveNames.push(item.name)
+			})
+			if (mount) {
+				activeNames.value = setActiveNames
+				if (props.collapsed || props.mode !== 'vertical') return
+			}
+			// 过滤掉所有子节点
+			let menuIndex = setActiveNames.findIndex(item => item === menuName)
+			let parentNames = setActiveNames.filter((item, itemIndex) => menuIndex >= itemIndex)
+			if (!props.accordion) parentNames = Array.from(new Set(openedNames.value.concat(parentNames)))
+			openedNames.value = parentNames
+		}
+		const onMenuSelect = menu => {
+			emit('update:modelValue', menu.name)
+			emit('change', menu)
+			handleOut()
+		}
+		const onMenuExpand = (expand, menu) => {
+			emit('expand', expand, menu)
+			if (!expand) {
+				openedNames.value = openedNames.value.filter(name => name !== menu.name)
+				return
+			}
+			resetExpand(menu.name)
+		}
+		const handleOut = () => {
+			if (!props.collapsed && props.mode === 'vertical') return
+			openedNames.value = []
+		}
+
+		provide(
+			'MenuInstance',
+			reactive({
+				props,
+				activeName,
+				activeNames,
+				openedNames,
+				onMenuSelect,
+				onMenuExpand
+			})
+		)
+
+		watch(
+			() => props.modelValue,
+			() => {
+				resetMenu()
+			}
+		)
+
+		onMounted(() => {
+			resetMenu()
+		})
+
+		return {
+			classes,
+			handleOut
+		}
+	}
+})
+</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;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.sh-menu-item-arrow {
+			margin-left: 5px;
+			transition: 0.1s all ease-in-out;
+		}
+	}
+}
+</style>