sh-view 2.0.8 → 2.2.0

package/packages/components/other-components/sh-cron-modal/tabs/cron-year-box.vue

@@ -1,46 +1,59 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每年</vxe-radio>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
-				<span> 年 至 </span>
-				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
-				<span> 年 </span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 年 </span>
-				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
-				<span> 分开始，间隔 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-				<span> 年 </span>
-			</div>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import cronMixin from '../mixin/cron-box'
-
-const nowYear = new Date().getFullYear()
-export default {
-	name: 'CronYearBox',
-	mixins: [cronMixin],
-	data() {
-		return {
-			defaultValue: '*',
-			minValue: 0,
-			valueRange: { start: nowYear, end: nowYear + 100 },
-			valueLoop: { start: nowYear, interval: 1 }
-		}
-	},
-	methods: {}
-}
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-config-list">
+		<vxe-radio-group v-model="type">
+			<div class="item">
+				<vxe-radio :label="TypeEnum.every" v-bind="beforeRadioAttrs">每年</vxe-radio>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-input v-model="valueRange.start" v-bind="typeRangeAttrs" />
+				<span> 年 至 </span>
+				<vxe-input v-model="valueRange.end" v-bind="typeRangeAttrs" />
+				<span> 年 </span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 年 </span>
+				<vxe-input v-model="valueLoop.start" v-bind="typeLoopAttrs" />
+				<span> 分开始，间隔 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+				<span> 年 </span>
+			</div>
+		</vxe-radio-group>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
+import cronProps from '../mixin/cron-props'
+import cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+export default defineComponent({
+	name: 'CronYearBox',
+	props: {
+		...cronProps
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const nowYear = new Date().getFullYear()
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 0,
+			valueRange: { start: nowYear, end: nowYear + 100 },
+			valueLoop: { start: nowYear, interval: 1 }
+		})
+
+		return {
+			...useCron
+		}
+	}
+})
+</script>
+
+<style scoped></style>

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

@@ -9,17 +9,13 @@
 </template>
 
 <script>
+import { defineComponent, computed, provide, ref, getCurrentInstance, watch, onMounted } from 'vue'
 import menuGroupContent from './menu-group-content.vue'
-export default {
+export default defineComponent({
 	name: 'ShMenu',
 	components: {
 		menuGroupContent
 	},
-	provide() {
-		return {
-			MenuInstance: this
-		}
-	},
 	props: {
 		modelValue: {
 			type: String
@@ -60,72 +56,89 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'change', 'expand'],
-	data() {
-		return {
-			activeName: this.modelValue,
-			activeNames: [],
-			openedNames: []
-		}
-	},
-	computed: {
-		classes() {
+	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: this.theme,
-				fix: this.fix,
-				collapsed: this.collapsed,
-				[`${this.mode}`]: this.mode
+				theme: props.theme,
+				fix: props.fix,
+				collapsed: props.collapsed,
+				[`${props.mode}`]: props.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)
+		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) {
-				this.activeNames = activeNames
-				if (this.collapsed || this.mode !== 'vertical') return
+				activeNames.value = setActiveNames
+				if (props.collapsed || props.mode !== 'vertical') 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.$emit('update:modelValue', menu.name)
-			this.$emit('change', menu)
-			this.handleOut()
-		},
-		onMenuExpand(expand, menu) {
-			this.$emit('expand', expand, menu)
+			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) {
-				this.openedNames = this.openedNames.filter(name => name !== menu.name)
+				openedNames.value = openedNames.value.filter(name => name !== menu.name)
 				return
 			}
-			this.resetExpand(menu.name)
-		},
-		handleOut() {
-			if (!this.collapsed && this.mode === 'vertical') return
-			this.openedNames = []
+			resetExpand(menu.name)
+		}
+		const handleOut = () => {
+			if (!props.collapsed && props.mode === 'vertical') return
+			openedNames.value = []
+		}
+
+		provide('MenuInstance', {
+			...props,
+			activeName,
+			activeNames,
+			openedNames,
+			onMenuSelect,
+			onMenuExpand
+		})
+
+		watch(
+			() => props.modelValue,
+			() => {
+				resetMenu()
+			}
+		)
+
+		onMounted(() => {
+			resetMenu()
+		})
+
+		return {
+			classes,
+			handleOut
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">
@@ -295,6 +308,8 @@ $expandDkBgColor: var(--vxe-primary-darken-color);
 		.sh-menu-item-title {
 			flex: 1;
 			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		.sh-menu-item-arrow {
 			margin-left: 5px;

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

@@ -1,6 +1,6 @@
 <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)" />
+		<menuItemContent ref="groupItemRef" :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" />
@@ -13,17 +13,13 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, inject } from 'vue'
 import menuItemContent from './menu-item-content.vue'
-export default {
+export default defineComponent({
 	name: 'MenuGroupContent',
 	components: {
 		menuItemContent
 	},
-	inject: {
-		MenuInstance: {
-			default: null
-		}
-	},
 	props: {
 		menuLevel: {
 			type: Number,
@@ -36,51 +32,43 @@ export default {
 			}
 		}
 	},
-	data() {
-		return {
-			expand: false,
-			groupListStyle: {}
-		}
-	},
-	computed: {
-		menuNextLevel() {
-			return this.menuLevel + 1
-		},
-		isArrow() {
-			return this.MenuInstance.collapsed ? !!this.menuLevel : true
-		},
-		groupClass() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuInstance = inject('MenuInstance')
+
+		const groupItemRef = ref()
+		const expand = ref(false)
+		const groupListStyle = ref({})
+
+		const menuNextLevel = computed(() => props.menuLevel + 1)
+		const isArrow = computed(() => {
+			return MenuInstance.collapsed ? !!props.menuLevel : true
+		})
+		const groupClass = computed(() => {
 			return {
-				is__level: !this.menuLevel,
-				is__active: this.MenuInstance.activeNames.includes(this.menuItem.name),
-				is__expand: this.expand
+				is__level: !props.menuLevel,
+				is__active: MenuInstance.activeNames.value.includes(props.menuItem.name),
+				is__expand: expand.value
 			}
-		},
-		groupListClass() {
-			const { mode, collapsed } = this.MenuInstance
+		})
+		const groupListClass = computed(() => {
+			const { mode, collapsed } = 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 setMenuExpand = () => {
+			const { mode, collapsed, openedNames } = MenuInstance
+			let names = openedNames.value
+			expand.value = names.includes(props.menuItem.name)
+			if (expand.value && groupItemRef.value && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
+				nextTick(() => {
+					const { offsetHeight, offsetWidth, itemRef } = groupItemRef.value
+					const { left, right, top, bottom } = itemRef.value.getBoundingClientRect()
 					const winWidth = window.innerWidth
 					const winHeight = window.innerHeight
 					if (mode === 'vertical') {
@@ -93,30 +81,54 @@ export default {
 						} else {
 							groupStyle.top = `${top}px`
 						}
-						this.groupListStyle = groupStyle
+						groupListStyle.value = groupStyle
 					} else {
-						let groupStyle = { top: `${this.menuLevel ? top : bottom}px` }
+						let groupStyle = { top: `${props.menuLevel ? top : bottom}px` }
 						if (right + offsetWidth >= winWidth) {
 							groupStyle.right = '10px'
 						} else {
-							groupStyle.left = `${this.menuLevel ? right : left}px`
+							groupStyle.left = `${props.menuLevel ? right : left}px`
 						}
-						this.groupListStyle = groupStyle
+						groupListStyle.value = groupStyle
 					}
 				})
 			}
-		},
-		showChildren(item) {
+		}
+		const showChildren = item => {
 			return item.children && item.children.length > 0
-		},
-		onMenuClick() {
-			this.MenuInstance.onMenuSelect(this.menuItem)
-		},
-		onMenuExpand(value) {
-			this.MenuInstance.onMenuExpand(value, this.menuItem)
+		}
+		const onMenuClick = () => {
+			MenuInstance.onMenuSelect(props.menuItem)
+		}
+		const onMenuExpand = value => {
+			MenuInstance.onMenuExpand(value, props.menuItem)
+		}
+
+		watch(
+			() => MenuInstance.openedNames.value,
+			() => {
+				setMenuExpand()
+			}
+		)
+
+		onMounted(() => {
+			setMenuExpand()
+		})
+
+		return {
+			groupItemRef,
+			groupClass,
+			groupListClass,
+			groupListStyle,
+			isArrow,
+			expand,
+			menuNextLevel,
+			showChildren,
+			onMenuExpand,
+			onMenuClick
 		}
 	}
-}
+})
 </script>
 
 <style scoped></style>

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

@@ -1,61 +1,71 @@
-<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>
+<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 (!props.menuLevel || props.menuLevel < 1) return 'md-folder'
+			else if (props.menuLevel === 1) return 'md-bookmark'
+			else 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.value === props.menuItem.name
+			}
+		})
+		const itemStyle = computed(() => {
+			let result = {}
+			const { mode, collapsed, indent } = MenuInstance
+			if (mode === 'vertical' && !collapsed && props.menuLevel) {
+				result.paddingLeft = `${indent * props.menuLevel}px`
+			}
+			return result
+		})
+		const itemTitle = computed(() => {
+			const { labelField, labelFormat } = MenuInstance
+			return labelFormat ? labelFormat(props.menuItem) : $vUtils.get(props.menuItem, labelField)
+		})
+
+		return {
+			itemRef,
+			itemClass,
+			itemStyle,
+			itemTitle,
+			iconType
+		}
+	}
+})
+</script>
+
+<style scoped></style>