67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
|
|
import Transition from '../../_util/transition';
|
|
import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
|
|
import SubMenuList from './SubMenuList';
|
|
|
|
export default defineComponent({
|
|
name: 'InlineSubMenuList',
|
|
inheritAttrs: false,
|
|
props: {
|
|
id: String,
|
|
open: Boolean,
|
|
keyPath: Array,
|
|
},
|
|
setup(props, { slots }) {
|
|
const fixedMode = computed(() => 'inline');
|
|
const { motion, mode, defaultMotions } = useInjectMenu();
|
|
const sameModeRef = computed(() => mode.value === fixedMode.value);
|
|
const destroy = ref(!sameModeRef.value);
|
|
|
|
const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
|
|
|
|
// ================================= Effect =================================
|
|
// Reset destroy state when mode change back
|
|
watch(
|
|
mode,
|
|
() => {
|
|
if (sameModeRef.value) {
|
|
destroy.value = false;
|
|
}
|
|
},
|
|
{ flush: 'post' },
|
|
);
|
|
const style = ref({});
|
|
const className = ref('');
|
|
const mergedMotion = computed(() => {
|
|
const m =
|
|
motion.value || defaultMotions.value?.[fixedMode.value] || defaultMotions.value?.other;
|
|
const res = typeof m === 'function' ? m(style, className) : m;
|
|
return { ...res, appear: props.keyPath.length <= 1 };
|
|
});
|
|
return () => {
|
|
if (destroy.value) {
|
|
return null;
|
|
}
|
|
return (
|
|
<MenuContextProvider
|
|
props={{
|
|
mode: fixedMode,
|
|
locked: !sameModeRef.value,
|
|
}}
|
|
>
|
|
<Transition {...mergedMotion.value}>
|
|
<SubMenuList
|
|
v-show={mergedOpen.value}
|
|
id={props.id}
|
|
style={style.value}
|
|
class={className.value}
|
|
>
|
|
{slots.default?.()}
|
|
</SubMenuList>
|
|
</Transition>
|
|
</MenuContextProvider>
|
|
);
|
|
};
|
|
},
|
|
});
|