vben
5 years ago
43 changed files with 1793 additions and 213 deletions
@ -1 +0,0 @@ |
|||
export { default as Menu } from './src/index.vue'; |
|||
@ -1,64 +0,0 @@ |
|||
<template> |
|||
<ul :class="getClass" :style="getStyle"> |
|||
<slot></slot> |
|||
</ul> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, ref, computed, CSSProperties, unref } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
export default defineComponent({ |
|||
props: { |
|||
mode: propTypes.oneOf(['horizontal', 'vertical']).def('vertical'), |
|||
theme: propTypes.oneOf(['light', 'dark', 'primary']).def('light'), |
|||
activeName: propTypes.oneOfType([propTypes.string, propTypes.number]), |
|||
openNames: propTypes.array.def([]), |
|||
accordion: propTypes.bool, |
|||
width: propTypes.string.def('210px'), |
|||
}, |
|||
setup(props) { |
|||
const currentActiveName = ref(props.activeName); |
|||
const openedNames = ref<string[]>(); |
|||
|
|||
const { prefixCls } = useDesign('menu'); |
|||
|
|||
const getClass = computed(() => { |
|||
const { theme, mode } = props; |
|||
let curTheme = theme; |
|||
if (mode === 'vertical' && theme === 'primary') { |
|||
curTheme = 'light'; |
|||
} |
|||
return [ |
|||
prefixCls, |
|||
`${prefixCls}-${curTheme}`, |
|||
{ |
|||
[`${prefixCls}-${mode}`]: mode, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
const getStyle = computed( |
|||
(): CSSProperties => { |
|||
const { mode, width } = props; |
|||
if (mode === 'vertical') { |
|||
return { |
|||
width: width, |
|||
}; |
|||
} |
|||
return {}; |
|||
} |
|||
); |
|||
|
|||
function updateActiveName() { |
|||
if (unref(currentActiveName) === undefined) { |
|||
currentActiveName.value = -1; |
|||
} |
|||
} |
|||
|
|||
function updateOpened() {} |
|||
|
|||
return { getClass, getStyle }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1 @@ |
|||
export { default as SimpleMenu } from './src/SimpleMenu.vue'; |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<Menu |
|||
v-bind="getBindValues" |
|||
@select="handleSelect" |
|||
:activeName="activeName" |
|||
:openNames="openNames" |
|||
:class="prefixCls" |
|||
:activeSubMenuNames="activeSubMenuNames" |
|||
> |
|||
<template v-for="item in items" :key="item.path"> |
|||
<SimpleSubMenu |
|||
:item="item" |
|||
:parent="true" |
|||
:collapsedShowTitle="collapsedShowTitle" |
|||
:collapse="collapse" |
|||
/> |
|||
</template> |
|||
</Menu> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import type { MenuState } from './types'; |
|||
import type { Menu as MenuType } from '/@/router/types'; |
|||
|
|||
import { defineComponent, computed, ref, unref, reactive, toRefs, watch } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
|
|||
import Menu from './components/Menu.vue'; |
|||
import SimpleSubMenu from './SimpleSubMenu.vue'; |
|||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { REDIRECT_NAME } from '/@/router/constant'; |
|||
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'; |
|||
import { isFunction } from '/@/utils/is'; |
|||
|
|||
import { useOpenKeys } from './useOpenKeys'; |
|||
export default defineComponent({ |
|||
name: 'SimpleMenu', |
|||
inheritAttrs: false, |
|||
components: { |
|||
Menu, |
|||
SimpleSubMenu, |
|||
}, |
|||
props: { |
|||
items: { |
|||
type: Array as PropType<MenuType[]>, |
|||
default: () => [], |
|||
}, |
|||
collapse: propTypes.bool, |
|||
mixSider: propTypes.bool, |
|||
theme: propTypes.string, |
|||
accordion: propTypes.bool.def(true), |
|||
collapsedShowTitle: propTypes.bool, |
|||
beforeClickFn: { |
|||
type: Function as PropType<(key: string) => Promise<boolean>>, |
|||
}, |
|||
}, |
|||
setup(props, { attrs, emit }) { |
|||
const currentActiveMenu = ref(''); |
|||
const isClickGo = ref(false); |
|||
|
|||
const menuState = reactive<MenuState>({ |
|||
activeName: '', |
|||
openNames: [], |
|||
activeSubMenuNames: [], |
|||
}); |
|||
|
|||
const { currentRoute } = useRouter(); |
|||
const { prefixCls } = useDesign('simple-menu'); |
|||
const { items, accordion, mixSider } = toRefs(props); |
|||
const { setOpenKeys } = useOpenKeys(menuState, items, accordion, mixSider); |
|||
|
|||
const getBindValues = computed(() => ({ ...attrs, ...props })); |
|||
|
|||
watch( |
|||
() => props.collapse, |
|||
(collapse) => { |
|||
if (collapse) { |
|||
menuState.openNames = []; |
|||
} else { |
|||
setOpenKeys(currentRoute.value.path); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
listenerLastChangeTab((route) => { |
|||
if (route.name === REDIRECT_NAME) return; |
|||
|
|||
currentActiveMenu.value = route.meta?.currentActiveMenu; |
|||
handleMenuChange(route); |
|||
|
|||
if (unref(currentActiveMenu)) { |
|||
menuState.activeName = unref(currentActiveMenu); |
|||
setOpenKeys(unref(currentActiveMenu)); |
|||
} |
|||
}); |
|||
|
|||
async function handleMenuChange(route?: RouteLocationNormalizedLoaded) { |
|||
if (unref(isClickGo)) { |
|||
isClickGo.value = false; |
|||
return; |
|||
} |
|||
const path = (route || unref(currentRoute)).path; |
|||
menuState.activeName = path; |
|||
|
|||
setOpenKeys(path); |
|||
// if (unref(currentActiveMenu)) return; |
|||
} |
|||
|
|||
async function handleSelect(key: string) { |
|||
const { beforeClickFn } = props; |
|||
if (beforeClickFn && isFunction(beforeClickFn)) { |
|||
const flag = await beforeClickFn(key); |
|||
if (!flag) return; |
|||
} |
|||
emit('menuClick', key); |
|||
|
|||
isClickGo.value = true; |
|||
setOpenKeys(key); |
|||
menuState.activeName = key; |
|||
} |
|||
|
|||
return { |
|||
prefixCls, |
|||
getBindValues, |
|||
handleSelect, |
|||
...toRefs(menuState), |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less"> |
|||
@import './index.less'; |
|||
</style> |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { Menu } from '/@/router/types'; |
|||
import type { PropType } from 'vue'; |
|||
|
|||
import { defineComponent, computed } from 'vue'; |
|||
|
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'SimpleMenuTag', |
|||
props: { |
|||
item: { |
|||
type: Object as PropType<Menu>, |
|||
default: {}, |
|||
}, |
|||
collapseParent: { |
|||
type: Boolean as PropType<boolean>, |
|||
default: false, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const { prefixCls } = useDesign('simple-menu'); |
|||
|
|||
const getShowTag = computed(() => { |
|||
const { item } = props; |
|||
|
|||
if (!item) return false; |
|||
|
|||
const { tag } = item; |
|||
if (!tag) return false; |
|||
|
|||
const { dot, content } = tag; |
|||
if (!dot && !content) return false; |
|||
return true; |
|||
}); |
|||
|
|||
const getContent = computed(() => { |
|||
if (!getShowTag.value) return ''; |
|||
const { item, collapseParent } = props; |
|||
const { tag } = item; |
|||
const { dot, content } = tag!; |
|||
return dot || collapseParent ? '' : content; |
|||
}); |
|||
|
|||
const getTagClass = computed(() => { |
|||
const { item, collapseParent } = props; |
|||
const { tag = {} } = item || {}; |
|||
const { dot, type = 'error' } = tag; |
|||
const tagCls = `${prefixCls}-tag`; |
|||
return [ |
|||
tagCls, |
|||
|
|||
[`${tagCls}--${type}`], |
|||
{ |
|||
[`${tagCls}--collapse`]: collapseParent, |
|||
[`${tagCls}--dot`]: dot, |
|||
}, |
|||
]; |
|||
}); |
|||
return { |
|||
getTagClass, |
|||
getShowTag, |
|||
getContent, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<MenuItem |
|||
:name="item.path" |
|||
v-if="!menuHasChildren(item) && getShowMenu" |
|||
v-bind="$props" |
|||
:class="getLevelClass" |
|||
> |
|||
<Icon v-if="getIcon" :icon="getIcon" :size="16" /> |
|||
<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title"> |
|||
{{ getI18nName }} |
|||
</div> |
|||
<template #title> |
|||
<span :class="['ml-2']"> |
|||
{{ getI18nName }} |
|||
</span> |
|||
<SimpleMenuTag :item="item" :collapseParent="getIsCollapseParent" /> |
|||
</template> |
|||
</MenuItem> |
|||
<SubMenu |
|||
:name="item.path" |
|||
v-if="menuHasChildren(item) && getShowMenu" |
|||
:class="[getLevelClass, theme]" |
|||
:collapsedShowTitle="collapsedShowTitle" |
|||
> |
|||
<template #title> |
|||
<Icon v-if="getIcon" :icon="getIcon" :size="16" /> |
|||
|
|||
<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title"> |
|||
{{ getI18nName }} |
|||
</div> |
|||
|
|||
<span v-show="getShowSubTitle" :class="['ml-2', `${prefixCls}-sub-title`]"> |
|||
{{ getI18nName }} |
|||
</span> |
|||
<SimpleMenuTag :item="item" :collapseParent="!!collapse && !!parent" /> |
|||
</template> |
|||
<template v-for="childrenItem in item.children || []" :key="childrenItem.path"> |
|||
<SimpleSubMenu v-bind="$props" :item="childrenItem" :parent="false" /> |
|||
</template> |
|||
</SubMenu> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import type { Menu } from '/@/router/types'; |
|||
|
|||
import { defineComponent, computed } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import Icon from '/@/components/Icon/index'; |
|||
|
|||
import MenuItem from './components/MenuItem.vue'; |
|||
import SubMenu from './components/SubMenuItem.vue'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
|||
const { t } = useI18n(); |
|||
|
|||
export default defineComponent({ |
|||
name: 'SimpleSubMenu', |
|||
components: { |
|||
SubMenu, |
|||
MenuItem, |
|||
SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')), |
|||
Icon, |
|||
}, |
|||
props: { |
|||
item: { |
|||
type: Object as PropType<Menu>, |
|||
default: {}, |
|||
}, |
|||
parent: propTypes.bool, |
|||
collapsedShowTitle: propTypes.bool, |
|||
collapse: propTypes.bool, |
|||
theme: propTypes.oneOf(['dark', 'light']), |
|||
}, |
|||
setup(props) { |
|||
const { prefixCls } = useDesign('simple-menu'); |
|||
|
|||
const getShowMenu = computed(() => { |
|||
return !props.item.meta?.hideMenu; |
|||
}); |
|||
|
|||
const getIcon = computed(() => props.item?.icon); |
|||
const getI18nName = computed(() => t(props.item?.name)); |
|||
const getShowSubTitle = computed(() => !props.collapse || !props.parent); |
|||
const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent); |
|||
const getLevelClass = computed(() => { |
|||
return [ |
|||
{ |
|||
[`${prefixCls}__parent`]: props.parent, |
|||
[`${prefixCls}__children`]: !props.parent, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
function menuHasChildren(menuTreeItem: Menu): boolean { |
|||
return ( |
|||
Reflect.has(menuTreeItem, 'children') && |
|||
!!menuTreeItem.children && |
|||
menuTreeItem.children.length > 0 |
|||
); |
|||
} |
|||
|
|||
return { |
|||
prefixCls, |
|||
menuHasChildren, |
|||
getShowMenu, |
|||
getIcon, |
|||
getI18nName, |
|||
getShowSubTitle, |
|||
getLevelClass, |
|||
getIsCollapseParent, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<ul :class="getClass"> |
|||
<slot></slot> |
|||
</ul> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import type { SubMenuProvider } from './types'; |
|||
import { |
|||
defineComponent, |
|||
ref, |
|||
computed, |
|||
onMounted, |
|||
watchEffect, |
|||
watch, |
|||
nextTick, |
|||
getCurrentInstance, |
|||
provide, |
|||
} from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { createSimpleRootMenuContext } from './useSimpleMenuContext'; |
|||
import Mitt from '/@/utils/mitt'; |
|||
import { isString } from '/@/utils/is'; |
|||
export default defineComponent({ |
|||
name: 'Menu', |
|||
props: { |
|||
theme: propTypes.oneOf(['light', 'dark']).def('light'), |
|||
activeName: propTypes.oneOfType([propTypes.string, propTypes.number]), |
|||
openNames: { |
|||
type: Array as PropType<string[]>, |
|||
default: [], |
|||
}, |
|||
accordion: propTypes.bool.def(true), |
|||
width: propTypes.string.def('100%'), |
|||
collapsedWidth: propTypes.string.def('48px'), |
|||
indentSize: propTypes.number.def(16), |
|||
collapse: propTypes.bool.def(true), |
|||
activeSubMenuNames: { |
|||
type: Array as PropType<(string | number)[]>, |
|||
default: [], |
|||
}, |
|||
}, |
|||
emits: ['select', 'open-change'], |
|||
setup(props, { emit }) { |
|||
const rootMenuEmitter = new Mitt(); |
|||
const instance = getCurrentInstance(); |
|||
|
|||
const currentActiveName = ref<string | number>(''); |
|||
const openedNames = ref<string[]>([]); |
|||
|
|||
const { prefixCls } = useDesign('menu'); |
|||
|
|||
const isRemoveAllPopup = ref(false); |
|||
|
|||
createSimpleRootMenuContext({ |
|||
rootMenuEmitter: rootMenuEmitter, |
|||
activeName: currentActiveName, |
|||
}); |
|||
|
|||
const getClass = computed(() => { |
|||
const { theme } = props; |
|||
return [ |
|||
prefixCls, |
|||
`${prefixCls}-${theme}`, |
|||
`${prefixCls}-vertical`, |
|||
{ |
|||
[`${prefixCls}-collapse`]: props.collapse, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
openedNames.value = props.openNames; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
if (props.activeName) { |
|||
currentActiveName.value = props.activeName; |
|||
} |
|||
}); |
|||
|
|||
watch( |
|||
() => props.openNames, |
|||
() => { |
|||
nextTick(() => { |
|||
updateOpened(); |
|||
}); |
|||
} |
|||
); |
|||
|
|||
function updateOpened() { |
|||
rootMenuEmitter.emit('on-update-opened', openedNames.value); |
|||
} |
|||
|
|||
function addSubMenu(name: string) { |
|||
if (openedNames.value.includes(name)) return; |
|||
openedNames.value.push(name); |
|||
updateOpened(); |
|||
} |
|||
|
|||
function removeSubMenu(name: string) { |
|||
openedNames.value = openedNames.value.filter((item) => item !== name); |
|||
updateOpened(); |
|||
} |
|||
|
|||
function removeAll() { |
|||
openedNames.value = []; |
|||
updateOpened(); |
|||
} |
|||
|
|||
function sliceIndex(index: number) { |
|||
if (index === -1) return; |
|||
openedNames.value = openedNames.value.slice(0, index + 1); |
|||
updateOpened(); |
|||
} |
|||
|
|||
provide<SubMenuProvider>(`subMenu:${instance?.uid}`, { |
|||
addSubMenu, |
|||
removeSubMenu, |
|||
getOpenNames: () => openedNames.value, |
|||
removeAll, |
|||
isRemoveAllPopup, |
|||
sliceIndex, |
|||
level: 0, |
|||
props, |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
openedNames.value = !props.collapse ? [...props.openNames] : []; |
|||
updateOpened(); |
|||
rootMenuEmitter.on('on-menu-item-select', (name: string) => { |
|||
currentActiveName.value = name; |
|||
|
|||
nextTick(() => { |
|||
props.collapse && removeAll(); |
|||
}); |
|||
emit('select', name); |
|||
}); |
|||
}); |
|||
|
|||
return { getClass, openedNames }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less"> |
|||
@import './menu.less'; |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<transition mode="out-in" v-on="on"> |
|||
<slot></slot> |
|||
</transition> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { addClass, removeClass } from '/@/utils/domUtils'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'MenuCollapseTransition', |
|||
setup() { |
|||
return { |
|||
on: { |
|||
beforeEnter(el: any) { |
|||
addClass(el, 'collapse-transition'); |
|||
if (!el.dataset) el.dataset = {}; |
|||
|
|||
el.dataset.oldPaddingTop = el.style.paddingTop; |
|||
el.dataset.oldPaddingBottom = el.style.paddingBottom; |
|||
|
|||
el.style.height = '0'; |
|||
el.style.paddingTop = 0; |
|||
el.style.paddingBottom = 0; |
|||
}, |
|||
|
|||
enter(el: any) { |
|||
el.dataset.oldOverflow = el.style.overflow; |
|||
if (el.scrollHeight !== 0) { |
|||
el.style.height = el.scrollHeight + 'px'; |
|||
el.style.paddingTop = el.dataset.oldPaddingTop; |
|||
el.style.paddingBottom = el.dataset.oldPaddingBottom; |
|||
} else { |
|||
el.style.height = ''; |
|||
el.style.paddingTop = el.dataset.oldPaddingTop; |
|||
el.style.paddingBottom = el.dataset.oldPaddingBottom; |
|||
} |
|||
|
|||
el.style.overflow = 'hidden'; |
|||
}, |
|||
|
|||
afterEnter(el: any) { |
|||
removeClass(el, 'collapse-transition'); |
|||
el.style.height = ''; |
|||
el.style.overflow = el.dataset.oldOverflow; |
|||
}, |
|||
|
|||
beforeLeave(el: any) { |
|||
if (!el.dataset) el.dataset = {}; |
|||
el.dataset.oldPaddingTop = el.style.paddingTop; |
|||
el.dataset.oldPaddingBottom = el.style.paddingBottom; |
|||
el.dataset.oldOverflow = el.style.overflow; |
|||
|
|||
el.style.height = el.scrollHeight + 'px'; |
|||
el.style.overflow = 'hidden'; |
|||
}, |
|||
|
|||
leave(el: any) { |
|||
if (el.scrollHeight !== 0) { |
|||
addClass(el, 'collapse-transition'); |
|||
el.style.height = 0; |
|||
el.style.paddingTop = 0; |
|||
el.style.paddingBottom = 0; |
|||
} |
|||
}, |
|||
|
|||
afterLeave(el: any) { |
|||
removeClass(el, 'collapse-transition'); |
|||
el.style.height = ''; |
|||
el.style.overflow = el.dataset.oldOverflow; |
|||
el.style.paddingTop = el.dataset.oldPaddingTop; |
|||
el.style.paddingBottom = el.dataset.oldPaddingBottom; |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<li :class="getClass" @click.stop="handleClickItem" :style="getCollapse ? {} : getItemStyle"> |
|||
<Tooltip placement="right" v-if="showTooptip"> |
|||
<template #title> |
|||
<slot name="title"></slot> |
|||
</template> |
|||
<div :class="`${prefixCls}-tooltip`"> |
|||
<slot /> |
|||
</div> |
|||
</Tooltip> |
|||
|
|||
<template v-else> |
|||
<slot></slot> |
|||
<slot name="title"></slot> |
|||
</template> |
|||
</li> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { PropType } from 'vue'; |
|||
import { defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { useMenuItem } from './useMenu'; |
|||
import { Tooltip } from 'ant-design-vue'; |
|||
import { useSimpleRootMenuContext } from './useSimpleMenuContext'; |
|||
export default defineComponent({ |
|||
name: 'MenuItem', |
|||
components: { Tooltip }, |
|||
props: { |
|||
name: { |
|||
type: [String, Number] as PropType<string | number>, |
|||
required: true, |
|||
}, |
|||
disabled: propTypes.bool, |
|||
}, |
|||
setup(props, { slots }) { |
|||
const instance = getCurrentInstance(); |
|||
|
|||
const active = ref(false); |
|||
|
|||
const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem( |
|||
instance |
|||
); |
|||
|
|||
const { prefixCls } = useDesign('menu'); |
|||
|
|||
const { rootMenuEmitter, activeName } = useSimpleRootMenuContext(); |
|||
|
|||
const getClass = computed(() => { |
|||
return [ |
|||
`${prefixCls}-item`, |
|||
{ |
|||
[`${prefixCls}-item-active`]: unref(active), |
|||
[`${prefixCls}-item-selected`]: unref(active), |
|||
[`${prefixCls}-item-disabled`]: !!props.disabled, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse); |
|||
|
|||
const showTooptip = computed(() => { |
|||
return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title; |
|||
}); |
|||
|
|||
function handleClickItem() { |
|||
const { disabled } = props; |
|||
if (disabled) return; |
|||
|
|||
rootMenuEmitter.emit('on-menu-item-select', props.name); |
|||
if (unref(getCollapse)) return; |
|||
const { uidList } = getParentList(); |
|||
rootMenuEmitter.emit('on-update-opened', { |
|||
opend: false, |
|||
parent: instance?.parent, |
|||
uidList: uidList, |
|||
}); |
|||
} |
|||
watch( |
|||
() => activeName.value, |
|||
(name: string) => { |
|||
if (name === props.name) { |
|||
const { list, uidList } = getParentList(); |
|||
active.value = true; |
|||
list.forEach((item) => { |
|||
if (item.proxy) { |
|||
(item.proxy as any).active = true; |
|||
} |
|||
}); |
|||
|
|||
rootMenuEmitter.emit('on-update-active-name:submenu', uidList); |
|||
} else { |
|||
active.value = false; |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
return { getClass, prefixCls, getItemStyle, getCollapse, handleClickItem, showTooptip }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,329 @@ |
|||
<template> |
|||
<li :class="getClass"> |
|||
<template v-if="!getCollapse"> |
|||
<div :class="`${prefixCls}-submenu-title`" @click.stop="handleClick" :style="getItemStyle"> |
|||
<slot name="title"></slot> |
|||
<Icon |
|||
icon="eva:arrow-ios-downward-outline" |
|||
:size="14" |
|||
:class="`${prefixCls}-submenu-title-icon`" |
|||
/> |
|||
</div> |
|||
<MenuCollapseTransition> |
|||
<ul :class="prefixCls" v-show="opened"> |
|||
<slot></slot> |
|||
</ul> |
|||
</MenuCollapseTransition> |
|||
</template> |
|||
|
|||
<Popover |
|||
placement="right" |
|||
:overlayClassName="`${prefixCls}-menu-popover`" |
|||
v-else |
|||
:visible="getIsOpend" |
|||
@visibleChange="handleVisibleChange" |
|||
:overlayStyle="getOverlayStyle" |
|||
:align="{ offset: [0, 0] }" |
|||
> |
|||
<div :class="getSubClass" v-bind="getEvents(false)"> |
|||
<div |
|||
:class="[ |
|||
{ |
|||
[`${prefixCls}-submenu-popup`]: !getParentSubMenu, |
|||
[`${prefixCls}-submenu-collapsed-show-tit`]: collapsedShowTitle, |
|||
}, |
|||
]" |
|||
> |
|||
<slot name="title"></slot> |
|||
</div> |
|||
<Icon |
|||
v-if="getParentSubMenu" |
|||
icon="eva:arrow-ios-downward-outline" |
|||
:size="14" |
|||
:class="`${prefixCls}-submenu-title-icon`" |
|||
/> |
|||
</div> |
|||
<template #content v-show="opened"> |
|||
<div v-bind="getEvents(true)"> |
|||
<ul :class="[prefixCls, `${prefixCls}-${getTheme}`, `${prefixCls}-popup`]"> |
|||
<slot></slot> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
</Popover> |
|||
</li> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import type { CSSProperties, PropType } from 'vue'; |
|||
import type { SubMenuProvider } from './types'; |
|||
import { |
|||
defineComponent, |
|||
computed, |
|||
unref, |
|||
getCurrentInstance, |
|||
toRefs, |
|||
reactive, |
|||
provide, |
|||
onBeforeMount, |
|||
inject, |
|||
} from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { useMenuItem } from './useMenu'; |
|||
import { useSimpleRootMenuContext } from './useSimpleMenuContext'; |
|||
import MenuCollapseTransition from './MenuCollapseTransition.vue'; |
|||
import Icon from '/@/components/Icon'; |
|||
import { Popover } from 'ant-design-vue'; |
|||
import { isBoolean, isObject } from '/@/utils/is'; |
|||
import Mitt from '/@/utils/mitt'; |
|||
|
|||
const DELAY = 200; |
|||
export default defineComponent({ |
|||
name: 'SubMenu', |
|||
components: { |
|||
Icon, |
|||
MenuCollapseTransition, |
|||
Popover, |
|||
}, |
|||
props: { |
|||
name: { |
|||
type: [String, Number] as PropType<string | number>, |
|||
required: true, |
|||
}, |
|||
disabled: propTypes.bool, |
|||
collapsedShowTitle: propTypes.bool, |
|||
}, |
|||
setup(props) { |
|||
const instance = getCurrentInstance(); |
|||
|
|||
const state = reactive({ |
|||
active: false, |
|||
opened: false, |
|||
}); |
|||
|
|||
const data = reactive({ |
|||
timeout: null as TimeoutHandle | null, |
|||
mouseInChild: false, |
|||
isChild: false, |
|||
}); |
|||
|
|||
const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem( |
|||
instance |
|||
); |
|||
|
|||
const { prefixCls } = useDesign('menu'); |
|||
|
|||
const subMenuEmitter = new Mitt(); |
|||
|
|||
const { rootMenuEmitter } = useSimpleRootMenuContext(); |
|||
|
|||
const { |
|||
addSubMenu: parentAddSubmenu, |
|||
removeSubMenu: parentRemoveSubmenu, |
|||
removeAll: parentRemoveAll, |
|||
getOpenNames: parentGetOpenNames, |
|||
isRemoveAllPopup, |
|||
sliceIndex, |
|||
level, |
|||
props: rootProps, |
|||
handleMouseleave: parentHandleMouseleave, |
|||
} = inject<SubMenuProvider>(`subMenu:${getParentMenu.value?.uid}`)!; |
|||
|
|||
const getClass = computed(() => { |
|||
return [ |
|||
`${prefixCls}-submenu`, |
|||
{ |
|||
[`${prefixCls}-item-active`]: state.active, |
|||
[`${prefixCls}-opened`]: state.opened, |
|||
[`${prefixCls}-submenu-disabled`]: props.disabled, |
|||
[`${prefixCls}-submenu-has-parent-submenu`]: unref(getParentSubMenu), |
|||
[`${prefixCls}-child-item-active`]: state.active, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
const getAccordion = computed(() => rootProps.accordion); |
|||
const getCollapse = computed(() => rootProps.collapse); |
|||
const getTheme = computed(() => rootProps.theme); |
|||
|
|||
const getOverlayStyle = computed( |
|||
(): CSSProperties => { |
|||
return { |
|||
minWidth: '200px', |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const getIsOpend = computed(() => { |
|||
const name = props.name; |
|||
if (unref(getCollapse)) { |
|||
return parentGetOpenNames().includes(name); |
|||
} |
|||
return state.opened; |
|||
}); |
|||
|
|||
const getSubClass = computed(() => { |
|||
const isActive = rootProps.activeSubMenuNames.includes(props.name); |
|||
return [ |
|||
`${prefixCls}-submenu-title`, |
|||
{ |
|||
[`${prefixCls}-submenu-active`]: isActive, |
|||
[`${prefixCls}-submenu-active-border`]: isActive && level === 0, |
|||
[`${prefixCls}-submenu-collapse`]: unref(getCollapse) && level === 0, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
function getEvents(deep: boolean) { |
|||
if (!unref(getCollapse)) { |
|||
return {}; |
|||
} |
|||
return { |
|||
onMouseenter: handleMouseenter, |
|||
onMouseleave: () => handleMouseleave(deep), |
|||
}; |
|||
} |
|||
|
|||
function handleClick() { |
|||
const { disabled } = props; |
|||
if (disabled || unref(getCollapse)) return; |
|||
const opened = state.opened; |
|||
if (unref(getAccordion)) { |
|||
const { uidList } = getParentList(); |
|||
rootMenuEmitter.emit('on-update-opened', { |
|||
opend: false, |
|||
parent: instance?.parent, |
|||
uidList: uidList, |
|||
}); |
|||
} |
|||
state.opened = !opened; |
|||
} |
|||
|
|||
function handleMouseenter() { |
|||
const disabled = props.disabled; |
|||
if (disabled) return; |
|||
|
|||
subMenuEmitter.emit('submenu:mouse-enter-child'); |
|||
|
|||
const index = parentGetOpenNames().findIndex((item) => item === props.name); |
|||
|
|||
sliceIndex(index); |
|||
|
|||
const isRoot = level === 0 && parentGetOpenNames().length === 2; |
|||
if (isRoot) { |
|||
parentRemoveAll(); |
|||
} |
|||
data.isChild = parentGetOpenNames().includes(props.name); |
|||
clearTimeout(data.timeout!); |
|||
data.timeout = setTimeout(() => { |
|||
parentAddSubmenu(props.name); |
|||
}, DELAY); |
|||
} |
|||
|
|||
function handleMouseleave(deepDispatch = false) { |
|||
const parentName = getParentMenu.value?.props.name; |
|||
if (!parentName) { |
|||
isRemoveAllPopup.value = true; |
|||
} |
|||
|
|||
if (parentGetOpenNames().slice(-1)[0] === props.name) { |
|||
data.isChild = false; |
|||
} |
|||
|
|||
subMenuEmitter.emit('submenu:mouse-leave-child'); |
|||
if (data.timeout) { |
|||
clearTimeout(data.timeout!); |
|||
data.timeout = setTimeout(() => { |
|||
if (isRemoveAllPopup.value) { |
|||
parentRemoveAll(); |
|||
} else if (!data.mouseInChild) { |
|||
parentRemoveSubmenu(props.name); |
|||
} |
|||
}, DELAY); |
|||
} |
|||
if (deepDispatch) { |
|||
if (getParentSubMenu.value) { |
|||
parentHandleMouseleave?.(true); |
|||
} |
|||
} |
|||
} |
|||
|
|||
onBeforeMount(() => { |
|||
subMenuEmitter.on('submenu:mouse-enter-child', () => { |
|||
data.mouseInChild = true; |
|||
isRemoveAllPopup.value = false; |
|||
clearTimeout(data.timeout!); |
|||
}); |
|||
subMenuEmitter.on('submenu:mouse-leave-child', () => { |
|||
if (data.isChild) return; |
|||
data.mouseInChild = false; |
|||
clearTimeout(data.timeout!); |
|||
}); |
|||
|
|||
rootMenuEmitter.on( |
|||
'on-update-opened', |
|||
(data: boolean | (string | number)[] | Recordable) => { |
|||
if (unref(getCollapse)) return; |
|||
if (isBoolean(data)) { |
|||
state.opened = data; |
|||
return; |
|||
} |
|||
|
|||
if (isObject(data)) { |
|||
const { opend, parent, uidList } = data as Recordable; |
|||
if (parent === instance?.parent) { |
|||
state.opened = opend; |
|||
} else if (!uidList.includes(instance?.uid)) { |
|||
state.opened = false; |
|||
} |
|||
return; |
|||
} |
|||
|
|||
if (props.name && Array.isArray(data)) { |
|||
state.opened = (data as (string | number)[]).includes(props.name); |
|||
} |
|||
} |
|||
); |
|||
|
|||
rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => { |
|||
state.active = data.includes(instance?.uid!); |
|||
}); |
|||
}); |
|||
|
|||
function handleVisibleChange(visible: boolean) { |
|||
state.opened = visible; |
|||
} |
|||
|
|||
// provide |
|||
provide<SubMenuProvider>(`subMenu:${instance?.uid}`, { |
|||
addSubMenu: parentAddSubmenu, |
|||
removeSubMenu: parentRemoveSubmenu, |
|||
getOpenNames: parentGetOpenNames, |
|||
removeAll: parentRemoveAll, |
|||
isRemoveAllPopup, |
|||
sliceIndex, |
|||
level: level + 1, |
|||
handleMouseleave, |
|||
props: rootProps, |
|||
}); |
|||
|
|||
return { |
|||
getClass, |
|||
prefixCls, |
|||
getCollapse, |
|||
getItemStyle, |
|||
handleClick, |
|||
handleVisibleChange, |
|||
getParentSubMenu, |
|||
getOverlayStyle, |
|||
getTheme, |
|||
getIsOpend, |
|||
getEvents, |
|||
getSubClass, |
|||
...toRefs(state), |
|||
...toRefs(data), |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,332 @@ |
|||
@menu-prefix-cls: ~'@{namespace}-menu'; |
|||
@menu-popup-prefix-cls: ~'@{namespace}-menu-popup'; |
|||
@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup'; |
|||
|
|||
// @menu-dark: #191a23; |
|||
// @menu-dark-active-bg: #101117; |
|||
@transition-time: 0.2s; |
|||
@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7); |
|||
|
|||
.light-border { |
|||
&::after { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
display: block; |
|||
width: 2px; |
|||
background: @primary-color; |
|||
content: ''; |
|||
} |
|||
} |
|||
|
|||
.@{menu-prefix-cls}-menu-popover { |
|||
.ant-popover-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
.ant-popover-inner-content { |
|||
padding: 0; |
|||
} |
|||
|
|||
.@{menu-prefix-cls} { |
|||
&-opened > * > &-submenu-title-icon { |
|||
transform: translateY(-50%) rotate(90deg) !important; |
|||
} |
|||
|
|||
&-item, |
|||
&-submenu-title { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 12px 20px; |
|||
color: @menu-dark-subsidiary-color; |
|||
cursor: pointer; |
|||
transition: all @transition-time @ease-in-out; |
|||
|
|||
// &:hover { |
|||
// color: @primary-color; |
|||
// } |
|||
|
|||
&-icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 18px; |
|||
transform: translateY(-50%) rotate(-90deg); |
|||
transition: transform @transition-time @ease-in-out; |
|||
} |
|||
} |
|||
|
|||
&-dark { |
|||
.@{menu-prefix-cls}-item, |
|||
.@{menu-prefix-cls}-submenu-title { |
|||
color: @menu-dark-subsidiary-color; |
|||
// background: @menu-dark-active-bg; |
|||
|
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
|
|||
&-selected { |
|||
color: #fff; |
|||
background: @primary-color !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-light { |
|||
.@{menu-prefix-cls}-item, |
|||
.@{menu-prefix-cls}-submenu-title { |
|||
color: @text-color-base; |
|||
|
|||
&:hover { |
|||
color: @primary-color; |
|||
} |
|||
|
|||
&-selected { |
|||
z-index: 2; |
|||
color: @primary-color; |
|||
background: fade(@primary-color, 8); |
|||
|
|||
.light-border(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content(); |
|||
.content() { |
|||
.@{menu-prefix-cls} { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
font-size: @font-size-base; |
|||
color: @text-color-base; |
|||
list-style: none; |
|||
outline: none; |
|||
|
|||
.collapse-transition { |
|||
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, |
|||
@transition-time padding-bottom ease-in-out; |
|||
} |
|||
|
|||
&-light { |
|||
background: #fff; |
|||
|
|||
.@{menu-prefix-cls}-submenu-active { |
|||
color: @primary-color !important; |
|||
// background: fade(@primary-color, 8); |
|||
|
|||
&-border { |
|||
.light-border(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-dark { |
|||
// background: @menu-dark; |
|||
|
|||
.@{menu-prefix-cls}-submenu-active { |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
|
|||
&-item { |
|||
position: relative; |
|||
z-index: 1; |
|||
display: flex; |
|||
font-size: @font-size-base; |
|||
color: inherit; |
|||
list-style: none; |
|||
cursor: pointer; |
|||
outline: none; |
|||
align-items: center; |
|||
// transition: all @transition-time @ease-in-out; |
|||
|
|||
&:hover, |
|||
&:active { |
|||
color: inherit; |
|||
} |
|||
} |
|||
|
|||
&-item > i { |
|||
margin-right: 6px; |
|||
} |
|||
|
|||
&-submenu-title > i, |
|||
&-submenu-title span > i { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
// vertical |
|||
&-vertical &-item, |
|||
&-vertical &-submenu-title { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 12px 24px; |
|||
cursor: pointer; |
|||
// transition: all @transition-time @ease-in-out; |
|||
|
|||
&:hover { |
|||
color: @primary-color; |
|||
} |
|||
|
|||
.@{menu-prefix-cls}-tooltip { |
|||
width: calc(100% - 0px); |
|||
padding: 12px 0; |
|||
text-align: center; |
|||
} |
|||
.@{menu-prefix-cls}-submenu-popup { |
|||
padding: 12px 0; |
|||
} |
|||
} |
|||
|
|||
&-vertical &-submenu-collapse { |
|||
.@{submenu-popup-prefix-cls} { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.@{menu-prefix-cls}-submenu-collapsed-show-tit { |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
|
|||
&-vertical&-collapse &-item, |
|||
&-vertical&-collapse &-submenu-title { |
|||
padding: 0 0; |
|||
} |
|||
|
|||
&-vertical &-submenu-title-icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 18px; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
&-submenu-title-icon { |
|||
transition: transform @transition-time @ease-in-out; |
|||
} |
|||
|
|||
&-vertical &-opened > * > &-submenu-title-icon { |
|||
transform: translateY(-50%) rotate(180deg); |
|||
} |
|||
|
|||
&-vertical &-submenu { |
|||
&-nested { |
|||
padding-left: 20px; |
|||
} |
|||
.@{menu-prefix-cls}-item { |
|||
padding-left: 43px; |
|||
} |
|||
} |
|||
|
|||
&-light&-vertical &-item { |
|||
&-active:not(.@{menu-prefix-cls}-submenu) { |
|||
z-index: 2; |
|||
color: @primary-color; |
|||
background: fade(@primary-color, 8); |
|||
|
|||
.light-border(); |
|||
} |
|||
&-active.@{menu-prefix-cls}-submenu { |
|||
color: @primary-color; |
|||
} |
|||
} |
|||
|
|||
&-light&-vertical&-collapse { |
|||
> li.@{menu-prefix-cls}-item-active, |
|||
.@{menu-prefix-cls}-submenu-active { |
|||
position: relative; |
|||
background: fade(@primary-color, 3); |
|||
|
|||
&::after { |
|||
display: none; |
|||
} |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 3px; |
|||
height: 100%; |
|||
background: @primary-color; |
|||
content: ''; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-dark&-vertical &-item, |
|||
&-dark&-vertical &-submenu-title { |
|||
color: @menu-dark-subsidiary-color; |
|||
&-active:not(.@{menu-prefix-cls}-submenu) { |
|||
color: #fff !important; |
|||
background: @primary-color !important; |
|||
} |
|||
|
|||
&:hover { |
|||
color: #fff; |
|||
// background: @menu-dark; |
|||
} |
|||
|
|||
// &-active:not(.@{menu-prefix-cls}-submenu) { |
|||
// color: @primary-color; |
|||
// } |
|||
} |
|||
|
|||
&-dark&-vertical&-collapse { |
|||
> li.@{menu-prefix-cls}-item-active, |
|||
.@{menu-prefix-cls}-submenu-active { |
|||
position: relative; |
|||
color: #fff !important; |
|||
background-color: @sider-dark-darken-bg-color !important; |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 3px; |
|||
height: 100%; |
|||
background: @primary-color; |
|||
content: ''; |
|||
} |
|||
|
|||
.@{menu-prefix-cls}-submenu-collapse { |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-dark&-vertical &-submenu &-item { |
|||
// &:hover { |
|||
// color: #fff; |
|||
// background: transparent; |
|||
// } |
|||
|
|||
&-active, |
|||
&-active:hover { |
|||
color: #fff; |
|||
border-right: none; |
|||
} |
|||
} |
|||
|
|||
&-dark&-vertical &-child-item-active > &-submenu-title { |
|||
color: #fff; |
|||
} |
|||
|
|||
&-dark&-vertical &-opened { |
|||
// background: @menu-dark-active-bg; |
|||
// .@{menu-prefix-cls}-submenu-title { |
|||
// background: @menu-dark; |
|||
// } |
|||
|
|||
.@{menu-prefix-cls}-submenu-has-parent-submenu { |
|||
.@{menu-prefix-cls}-submenu-title { |
|||
background: transparent; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
import { Ref } from 'vue'; |
|||
|
|||
export interface Props { |
|||
theme: string; |
|||
activeName?: string | number | undefined; |
|||
openNames: string[]; |
|||
accordion: boolean; |
|||
width: string; |
|||
collapsedWidth: string; |
|||
indentSize: number; |
|||
collapse: boolean; |
|||
activeSubMenuNames: (string | number)[]; |
|||
} |
|||
|
|||
export interface SubMenuProvider { |
|||
addSubMenu: (name: string | number, update?: boolean) => void; |
|||
removeSubMenu: (name: string | number, update?: boolean) => void; |
|||
removeAll: () => void; |
|||
sliceIndex: (index: number) => void; |
|||
isRemoveAllPopup: Ref<boolean>; |
|||
getOpenNames: () => (string | number)[]; |
|||
handleMouseleave?: Fn; |
|||
level: number; |
|||
props: Props; |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
import { computed, ComponentInternalInstance, unref } from 'vue'; |
|||
import type { CSSProperties } from 'vue'; |
|||
|
|||
export function useMenuItem(instance: ComponentInternalInstance | null) { |
|||
const getParentMenu = computed(() => { |
|||
return findParentMenu(['Menu', 'SubMenu']); |
|||
}); |
|||
|
|||
const getParentRootMenu = computed(() => { |
|||
return findParentMenu(['Menu']); |
|||
}); |
|||
|
|||
const getParentSubMenu = computed(() => { |
|||
return findParentMenu(['SubMenu']); |
|||
}); |
|||
|
|||
const getItemStyle = computed( |
|||
(): CSSProperties => { |
|||
let parent = instance?.parent; |
|||
if (!parent) return {}; |
|||
const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20; |
|||
let padding = indentSize; |
|||
|
|||
if (unref(getParentRootMenu)?.props.collapse) { |
|||
padding = indentSize; |
|||
} else { |
|||
while (parent && parent.type.name !== 'Menu') { |
|||
if (parent.type.name === 'SubMenu') { |
|||
padding += indentSize; |
|||
} |
|||
parent = parent.parent; |
|||
} |
|||
} |
|||
return { paddingLeft: padding + 'px' }; |
|||
} |
|||
); |
|||
|
|||
function findParentMenu(name: string[]) { |
|||
let parent = instance?.parent; |
|||
if (!parent) return null; |
|||
while (parent && name.indexOf(parent.type.name!) === -1) { |
|||
parent = parent.parent; |
|||
} |
|||
return parent; |
|||
} |
|||
|
|||
function getParentList() { |
|||
let parent = instance; |
|||
if (!parent) |
|||
return { |
|||
uidList: [], |
|||
list: [], |
|||
}; |
|||
const ret = []; |
|||
while (parent && parent.type.name !== 'Menu') { |
|||
if (parent.type.name === 'SubMenu') { |
|||
ret.push(parent); |
|||
} |
|||
parent = parent.parent; |
|||
} |
|||
return { |
|||
uidList: ret.map((item) => item.uid), |
|||
list: ret, |
|||
}; |
|||
} |
|||
|
|||
function getParentInstance(instance: ComponentInternalInstance, name = 'SubMenu') { |
|||
let parent = instance.parent; |
|||
while (parent) { |
|||
if (parent.type.name !== name) { |
|||
return parent; |
|||
} |
|||
parent = parent.parent; |
|||
} |
|||
return parent; |
|||
} |
|||
|
|||
return { |
|||
getParentMenu, |
|||
getParentInstance, |
|||
getParentRootMenu, |
|||
getParentList, |
|||
getParentSubMenu, |
|||
getItemStyle, |
|||
}; |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
import type { InjectionKey, Ref } from 'vue'; |
|||
import { createContext, useContext } from '/@/hooks/core/useContext'; |
|||
import Mitt from '/@/utils/mitt'; |
|||
|
|||
export interface SimpleRootMenuContextProps { |
|||
rootMenuEmitter: Mitt; |
|||
activeName: Ref<string | number>; |
|||
} |
|||
|
|||
const key: InjectionKey<SimpleRootMenuContextProps> = Symbol(); |
|||
|
|||
export function createSimpleRootMenuContext(context: SimpleRootMenuContextProps) { |
|||
return createContext<SimpleRootMenuContextProps>(context, key, { readonly: false, native: true }); |
|||
} |
|||
|
|||
export function useSimpleRootMenuContext() { |
|||
return useContext<SimpleRootMenuContextProps>(key); |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
@simple-prefix-cls: ~'@{namespace}-simple-menu'; |
|||
@prefix-cls: ~'@{namespace}-menu'; |
|||
|
|||
.@{prefix-cls} { |
|||
&-dark&-vertical .@{simple-prefix-cls}__parent { |
|||
background-color: @sider-dark-bg-color; |
|||
> .@{prefix-cls}-submenu-title { |
|||
background-color: @sider-dark-bg-color; |
|||
} |
|||
} |
|||
|
|||
&-dark&-vertical .@{simple-prefix-cls}__children, |
|||
&-dark&-popup .@{simple-prefix-cls}__children { |
|||
background-color: @sider-dark-lighten-1-bg-color; |
|||
> .@{prefix-cls}-submenu-title { |
|||
background-color: @sider-dark-lighten-1-bg-color; |
|||
} |
|||
} |
|||
|
|||
.collapse-title { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
|
|||
.@{simple-prefix-cls} { |
|||
&-tag { |
|||
position: absolute; |
|||
top: calc(50% - 10px); |
|||
right: 30px; |
|||
display: inline-block; |
|||
padding: 2px 3px; |
|||
margin-right: 4px; |
|||
font-size: 10px; |
|||
line-height: 14px; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
|
|||
&--collapse { |
|||
top: 6px !important; |
|||
right: 2px; |
|||
} |
|||
|
|||
&--dot { |
|||
top: calc(50% - 4px); |
|||
width: 6px; |
|||
height: 6px; |
|||
padding: 0; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&--primary { |
|||
background: @primary-color; |
|||
} |
|||
|
|||
&--error { |
|||
background: @error-color; |
|||
} |
|||
|
|||
&--success { |
|||
background: @success-color; |
|||
} |
|||
|
|||
&--warn { |
|||
background: @warning-color; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
export interface MenuState { |
|||
activeName: string; |
|||
openNames: string[]; |
|||
activeSubMenuNames: string[]; |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
import type { Menu as MenuType } from '/@/router/types'; |
|||
import type { MenuState } from './types'; |
|||
|
|||
import { Ref, toRaw } from 'vue'; |
|||
|
|||
import { unref } from 'vue'; |
|||
import { es6Unique } from '/@/utils'; |
|||
import { getAllParentPath } from '/@/router/helper/menuHelper'; |
|||
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; |
|||
|
|||
export function useOpenKeys( |
|||
menuState: MenuState, |
|||
menus: Ref<MenuType[]>, |
|||
accordion: Ref<boolean>, |
|||
mixSider: Ref<boolean> |
|||
// mode: Ref<MenuModeEnum>,
|
|||
) { |
|||
async function setOpenKeys(path: string) { |
|||
// if (mode.value === MenuModeEnum.HORIZONTAL) {
|
|||
// return;
|
|||
// }
|
|||
const native = !mixSider.value; |
|||
useTimeoutFn( |
|||
() => { |
|||
const menuList = toRaw(menus.value); |
|||
if (menuList?.length === 0) { |
|||
menuState.activeSubMenuNames = []; |
|||
menuState.openNames = []; |
|||
return; |
|||
} |
|||
const keys = getAllParentPath(menuList, path); |
|||
if (!unref(accordion)) { |
|||
menuState.openNames = es6Unique([...menuState.openNames, ...keys]); |
|||
} else { |
|||
menuState.openNames = keys; |
|||
} |
|||
menuState.activeSubMenuNames = menuState.openNames; |
|||
}, |
|||
16, |
|||
native |
|||
); |
|||
} |
|||
|
|||
return { setOpenKeys }; |
|||
} |
|||
@ -1,16 +0,0 @@ |
|||
import type { Ref } from 'vue'; |
|||
import type { TableActionType } from '../types/table'; |
|||
|
|||
import { provide, inject } from 'vue'; |
|||
|
|||
const key = Symbol('table'); |
|||
|
|||
type Instance = TableActionType & { wrapRef: Ref<Nullable<HTMLElement>> }; |
|||
|
|||
export function provideTable(instance: Instance) { |
|||
provide(key, instance); |
|||
} |
|||
|
|||
export function injectTable(): Instance { |
|||
return inject(key) as Instance; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
export default { |
|||
loadingText: 'Loading...', |
|||
cancelText: 'Close', |
|||
okText: 'Confirm', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
search: 'Menu search', |
|||
}; |
|||
@ -0,0 +1,4 @@ |
|||
export default { |
|||
cancelText: 'Close', |
|||
okText: 'Confirm', |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
export default { |
|||
loadingText: '加载中...', |
|||
cancelText: '关闭', |
|||
okText: '确认', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
search: '菜单搜索', |
|||
}; |
|||
@ -0,0 +1,4 @@ |
|||
export default { |
|||
cancelText: '关闭', |
|||
okText: '确认', |
|||
}; |
|||
Loading…
Reference in new issue