UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 1.75 kB
{"version":3,"file":"menu-collapse-transition.mjs","names":[],"sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue"],"sourcesContent":["<template>\n <transition mode=\"out-in\" v-bind=\"listeners\">\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\nimport { addClass, hasClass, removeClass } from '@element-plus/utils'\n\nimport type { BaseTransitionProps, TransitionProps } from 'vue'\n\ndefineOptions({\n name: 'ElMenuCollapseTransition',\n})\n\nconst ns = useNamespace('menu')\nconst listeners = {\n onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n onEnter(el, done) {\n addClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = '1'\n done()\n },\n\n onAfterEnter(el) {\n removeClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = ''\n },\n\n onBeforeLeave(el) {\n if (!el.dataset) (el as any).dataset = {}\n\n if (hasClass(el, ns.m('collapse'))) {\n removeClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n addClass(el, ns.m('collapse'))\n } else {\n addClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n removeClass(el, ns.m('collapse'))\n }\n\n el.style.width = `${el.scrollWidth}px`\n el.style.overflow = 'hidden'\n },\n\n onLeave(el: HTMLElement) {\n addClass(el, 'horizontal-collapse-transition')\n el.style.width = `${el.dataset.scrollWidth}px`\n },\n} as BaseTransitionProps<HTMLElement> as TransitionProps\n</script>\n"],"mappings":""}