sh-view 2.8.0 → 2.8.2

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

@@ -1,136 +1,136 @@
-<template>
-	<div v-if="showChildren(menuItem)" class="sh-menu-group" :class="groupClass">
-		<menuItemContent ref="groupItemRef" :menu-item="menuItem" :menu-level="menuLevel" :arrow="isArrow" @click="onMenuExpand(!expand)" />
-		<div v-show="expand" ref="groupListRef" 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 { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, inject, nextTick } from 'vue'
-import menuItemContent from './menu-item-content.vue'
-export default defineComponent({
-	name: 'MenuGroupContent',
-	components: {
-		menuItemContent
-	},
-	props: {
-		menuLevel: {
-			type: Number,
-			default: 0
-		},
-		menuItem: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-		const MenuInstance = inject('MenuInstance')
-
-		const groupItemRef = ref()
-		const groupListRef = ref()
-		const expand = ref(false)
-		const groupListStyle = ref({})
-
-		const menuNextLevel = computed(() => props.menuLevel + 1)
-		const isArrow = computed(() => {
-			return MenuInstance.props.collapsed ? !!props.menuLevel : true
-		})
-		const groupClass = computed(() => {
-			return {
-				is__level: !props.menuLevel,
-				is__active: MenuInstance.activeNames.includes(props.menuItem.name),
-				is__expand: expand.value
-			}
-		})
-		const groupListClass = computed(() => {
-			const { mode, collapsed } = MenuInstance.props
-			return {
-				'sh-menu-group-dropdown': mode === 'horizontal',
-				'sh-menu-group-dropright': mode === 'vertical' && collapsed
-			}
-		})
-
-		const setMenuExpand = () => {
-			const { mode, collapsed } = MenuInstance.props
-			expand.value = MenuInstance.openedNames.includes(props.menuItem.name)
-			if (expand.value && groupItemRef.value && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
-				nextTick(() => {
-					const { offsetHeight, offsetWidth } = groupListRef.value
-					const { itemRef } = groupItemRef.value
-					const { left, right, top, bottom } = itemRef.getBoundingClientRect()
-					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`
-						}
-						groupListStyle.value = groupStyle
-					} else {
-						let groupStyle = { top: `${props.menuLevel ? top : bottom}px` }
-						if (right + offsetWidth >= winWidth) {
-							groupStyle.right = '10px'
-						} else {
-							groupStyle.left = `${props.menuLevel ? right : left}px`
-						}
-						groupListStyle.value = groupStyle
-					}
-				})
-			}
-		}
-		const showChildren = item => {
-			return item.children && item.children.length > 0
-		}
-		const onMenuClick = () => {
-			MenuInstance.onMenuSelect(props.menuItem)
-		}
-		const onMenuExpand = value => {
-			MenuInstance.onMenuExpand(value, props.menuItem)
-		}
-
-		watch(
-			() => MenuInstance.openedNames,
-			() => {
-				setMenuExpand()
-			}
-		)
-
-		onMounted(() => {
-			setMenuExpand()
-		})
-
-		return {
-			groupItemRef,
-			groupListRef,
-			groupClass,
-			groupListClass,
-			groupListStyle,
-			isArrow,
-			expand,
-			menuNextLevel,
-			showChildren,
-			onMenuExpand,
-			onMenuClick
-		}
-	}
-})
-</script>
-
-<style scoped></style>
+<template>
+	<div v-if="showChildren(menuItem)" class="sh-menu-group" :class="groupClass">
+		<menuItemContent ref="groupItemRef" :menu-item="menuItem" :menu-level="menuLevel" :arrow="isArrow" @click="onMenuExpand(!expand)" />
+		<div v-show="expand" ref="groupListRef" 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 { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, inject, nextTick } from 'vue'
+import menuItemContent from './menu-item-content.vue'
+export default defineComponent({
+	name: 'MenuGroupContent',
+	components: {
+		menuItemContent
+	},
+	props: {
+		menuLevel: {
+			type: Number,
+			default: 0
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuInstance = inject('MenuInstance')
+
+		const groupItemRef = ref()
+		const groupListRef = ref()
+		const expand = ref(false)
+		const groupListStyle = ref({})
+
+		const menuNextLevel = computed(() => props.menuLevel + 1)
+		const isArrow = computed(() => {
+			return MenuInstance.props.collapsed ? !!props.menuLevel : true
+		})
+		const groupClass = computed(() => {
+			return {
+				is__level: !props.menuLevel,
+				is__active: MenuInstance.activeNames.includes(props.menuItem.name),
+				is__expand: expand.value
+			}
+		})
+		const groupListClass = computed(() => {
+			const { mode, collapsed } = MenuInstance.props
+			return {
+				'sh-menu-group-dropdown': mode === 'horizontal',
+				'sh-menu-group-dropright': mode === 'vertical' && collapsed
+			}
+		})
+
+		const setMenuExpand = () => {
+			const { mode, collapsed } = MenuInstance.props
+			expand.value = MenuInstance.openedNames.includes(props.menuItem.name)
+			if (expand.value && groupItemRef.value && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
+				nextTick(() => {
+					const { offsetHeight, offsetWidth } = groupListRef.value
+					const { itemRef } = groupItemRef.value
+					const { left, right, top, bottom } = itemRef.getBoundingClientRect()
+					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`
+						}
+						groupListStyle.value = groupStyle
+					} else {
+						let groupStyle = { top: `${props.menuLevel ? top : bottom}px` }
+						if (right + offsetWidth >= winWidth) {
+							groupStyle.right = '10px'
+						} else {
+							groupStyle.left = `${props.menuLevel ? right : left}px`
+						}
+						groupListStyle.value = groupStyle
+					}
+				})
+			}
+		}
+		const showChildren = item => {
+			return item.children && item.children.length > 0
+		}
+		const onMenuClick = () => {
+			MenuInstance.onMenuSelect(props.menuItem)
+		}
+		const onMenuExpand = value => {
+			MenuInstance.onMenuExpand(value, props.menuItem)
+		}
+
+		watch(
+			() => MenuInstance.openedNames,
+			() => {
+				setMenuExpand()
+			}
+		)
+
+		onMounted(() => {
+			setMenuExpand()
+		})
+
+		return {
+			groupItemRef,
+			groupListRef,
+			groupClass,
+			groupListClass,
+			groupListStyle,
+			isArrow,
+			expand,
+			menuNextLevel,
+			showChildren,
+			onMenuExpand,
+			onMenuClick
+		}
+	}
+})
+</script>
+
+<style scoped></style>

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

@@ -1,71 +1,71 @@
-<template>
-	<div ref="itemRef" 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">{{ itemTitle }}</span>
-		<sh-icon v-if="arrow" class="sh-menu-item-arrow" type="ios-arrow-forward"></sh-icon>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, inject } from 'vue'
-export default defineComponent({
-	name: 'MenuItemBox',
-	props: {
-		arrow: Boolean,
-		menuLevel: {
-			type: Number
-		},
-		menuItem: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-		const MenuInstance = inject('MenuInstance')
-
-		const itemRef = ref()
-
-		const defaultIcon = computed(() => {
-			if (MenuInstance.props.defaultIcon && (!props.menuLevel || props.menuLevel < 1)) return 'md-folder'
-			else if (MenuInstance.props.defaultIcon && props.menuLevel === 1) return 'md-bookmark'
-			return ''
-		})
-		const iconType = computed(() => {
-			return props.menuItem.meta?.icon || props.menuItem.icon || defaultIcon.value
-		})
-		const itemClass = computed(() => {
-			return {
-				'sh-menu-item-level': !props.menuLevel,
-				'sh-menu-item-active': MenuInstance.activeName === props.menuItem.name
-			}
-		})
-		const itemStyle = computed(() => {
-			let result = {}
-			const { mode, collapsed, indent } = MenuInstance.props
-			if (mode === 'vertical' && !collapsed && props.menuLevel) {
-				result.paddingLeft = `${indent * props.menuLevel}px`
-			}
-			return result
-		})
-		const itemTitle = computed(() => {
-			const { labelField, labelFormat } = MenuInstance.props
-			return labelFormat ? labelFormat(props.menuItem) : $vUtils.get(props.menuItem, labelField)
-		})
-
-		return {
-			itemRef,
-			itemClass,
-			itemStyle,
-			itemTitle,
-			iconType
-		}
-	}
-})
-</script>
-
-<style scoped></style>
+<template>
+	<div ref="itemRef" 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">{{ itemTitle }}</span>
+		<sh-icon v-if="arrow" class="sh-menu-item-arrow" type="ios-arrow-forward"></sh-icon>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, inject } from 'vue'
+export default defineComponent({
+	name: 'MenuItemBox',
+	props: {
+		arrow: Boolean,
+		menuLevel: {
+			type: Number
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuInstance = inject('MenuInstance')
+
+		const itemRef = ref()
+
+		const defaultIcon = computed(() => {
+			if (MenuInstance.props.defaultIcon && (!props.menuLevel || props.menuLevel < 1)) return 'md-folder'
+			else if (MenuInstance.props.defaultIcon && props.menuLevel === 1) return 'md-bookmark'
+			return ''
+		})
+		const iconType = computed(() => {
+			return props.menuItem.meta?.icon || props.menuItem.icon || defaultIcon.value
+		})
+		const itemClass = computed(() => {
+			return {
+				'sh-menu-item-level': !props.menuLevel,
+				'sh-menu-item-active': MenuInstance.activeName === props.menuItem.name
+			}
+		})
+		const itemStyle = computed(() => {
+			let result = {}
+			const { mode, collapsed, indent } = MenuInstance.props
+			if (mode === 'vertical' && !collapsed && props.menuLevel) {
+				result.paddingLeft = `${indent * props.menuLevel}px`
+			}
+			return result
+		})
+		const itemTitle = computed(() => {
+			const { labelField, labelFormat } = MenuInstance.props
+			return labelFormat ? labelFormat(props.menuItem) : $vUtils.get(props.menuItem, labelField)
+		})
+
+		return {
+			itemRef,
+			itemClass,
+			itemStyle,
+			itemTitle,
+			iconType
+		}
+	}
+})
+</script>
+
+<style scoped></style>