vue-devui 1.0.0-beta.220801 → 1.0.0-beta.220808

package/menu/index.es.js

@@ -1,4 +1,4 @@
-import { ref, defineComponent, getCurrentInstance, inject, toRefs, computed, createVNode, watch, onMounted, Transition, withDirectives, vShow, watchEffect, provide } from "vue";
+import { ref, defineComponent, getCurrentInstance, inject, toRefs, computed, createVNode, watch, onMounted, Transition, withDirectives, vShow, watchEffect, provide, reactive } from "vue";
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -274,6 +274,7 @@ var MenuItem = defineComponent({
       e.stopPropagation();
       const ele = e.currentTarget;
       let changeRouteResult = void 0;
+      props.disabled && e.preventDefault();
       if (!props.disabled) {
         if (!multiple) {
           clearSelect(ele, e, mode.value === "horizontal");
@@ -328,7 +329,9 @@ var MenuItem = defineComponent({
     }, [(_b = (_a = ctx.slots).icon) == null ? void 0 : _b.call(_a)]);
     const menuItems = ref(null);
     watch(disabled, () => {
-      classObject.value[menuItemSelect] = false;
+      if (!multiple) {
+        classObject.value[menuItemSelect] = false;
+      }
     });
     watch(() => defaultSelectKey, (n) => {
       isSelect.value = initSelect(n, key, multiple, disabled);
@@ -414,61 +417,20 @@ var MenuItem = defineComponent({
     };
   }
 });
-const ns$1 = useNamespace("menu");
-const subNs$1 = useNamespace("submenu");
-const menuItemHorizontalWrapperHidden = `${ns$1.b()}-item-horizontal-wrapper-hidden`;
-const menuItemHorizontalWrapperShow = `${ns$1.b()}-item-horizontal-wrapper-show`;
-function useShowSubMenu(eventName, e, wrapper) {
-  const target = e.currentTarget;
-  const targetParent = target.parentElement;
-  const wrapperChildren = wrapper.children;
-  wrapper.style.padding = `0 20px !important`;
-  if (eventName === "mouseenter") {
-    if ((targetParent == null ? void 0 : targetParent.tagName) === "DIV") {
-      wrapper.classList.add(`${ns$1.b()}-item-horizontal-wrapper-level`);
-      const { width } = target.getClientRects()[0];
-      wrapper.style.top = `0px`;
-      wrapper.style.left = `${width}px`;
-    } else {
-      wrapper.style.top = `26px`;
-      wrapper.style.left = `0px`;
-    }
-    wrapper.classList.remove(menuItemHorizontalWrapperHidden);
-    wrapper.classList.add(menuItemHorizontalWrapperShow);
-    for (let i = 0; i < wrapperChildren.length; i++) {
-      const ul = wrapperChildren[i];
-      if (ul.tagName === "UL" && ul.classList.contains(subNs$1.b())) {
-        const levelUlWrapper = ul.getElementsByClassName(`${ns$1.b()}-item-horizontal-wrapper`)[0];
-        ul.addEventListener("mouseenter", (ev) => {
-          ev.stopPropagation();
-          useShowSubMenu("mouseenter", ev, levelUlWrapper);
-          levelUlWrapper.classList.remove(menuItemHorizontalWrapperHidden);
-          levelUlWrapper.classList.add(menuItemHorizontalWrapperShow);
-        });
-        ul.addEventListener("mouseleave", (ev) => {
-          ev.stopPropagation();
-          useShowSubMenu("mouseleave", ev, levelUlWrapper);
-          levelUlWrapper.classList.remove(menuItemHorizontalWrapperShow);
-          levelUlWrapper.classList.add(menuItemHorizontalWrapperHidden);
-        });
-      }
-    }
-  }
-  if (eventName === "mouseleave") {
-    wrapper.classList.remove(menuItemHorizontalWrapperShow);
-    wrapper.classList.add(menuItemHorizontalWrapperHidden);
+function randomId(n = 8) {
+  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < n; i++) {
+    result += str[parseInt((Math.random() * str.length).toString())];
   }
+  return result;
 }
-const subMenuProps = {
-  title: {
-    type: String,
-    default: ""
-  },
-  disabled: {
-    type: Boolean,
-    default: false
+function useNearestMenuElement(ele) {
+  while (ele && ele.tagName !== "LI" && ele.tagName !== "UL") {
+    ele = ele.parentElement;
   }
-};
+  return ele;
+}
 const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
 const TransitionObj = {
   "before-enter"(el) {
@@ -542,6 +504,61 @@ var MenuTransition = defineComponent({
     };
   }
 });
+const subMenuProps = {
+  title: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+const ns$1 = useNamespace("menu");
+const subNs$1 = useNamespace("submenu");
+const menuItemHorizontalWrapperHidden = `${ns$1.b()}-item-horizontal-wrapper-hidden`;
+const menuItemHorizontalWrapperShow = `${ns$1.b()}-item-horizontal-wrapper-show`;
+function useShowSubMenu(eventName, e, wrapper) {
+  const target = e.currentTarget;
+  const targetParent = target.parentElement;
+  const wrapperChildren = wrapper.children;
+  wrapper.style.padding = `0 20px !important`;
+  if (eventName === "mouseenter") {
+    if ((targetParent == null ? void 0 : targetParent.tagName) === "DIV") {
+      wrapper.classList.add(`${ns$1.b()}-item-horizontal-wrapper-level`);
+      const { width } = target.getClientRects()[0];
+      wrapper.style.top = `0px`;
+      wrapper.style.left = `${width}px`;
+    } else {
+      wrapper.style.top = `26px`;
+      wrapper.style.left = `0px`;
+    }
+    wrapper.classList.remove(menuItemHorizontalWrapperHidden);
+    wrapper.classList.add(menuItemHorizontalWrapperShow);
+    for (let i = 0; i < wrapperChildren.length; i++) {
+      const ul = wrapperChildren[i];
+      if (ul.tagName === "UL" && ul.classList.contains(subNs$1.b())) {
+        const levelUlWrapper = ul.getElementsByClassName(`${ns$1.b()}-item-horizontal-wrapper`)[0];
+        ul.addEventListener("mouseenter", (ev) => {
+          ev.stopPropagation();
+          useShowSubMenu("mouseenter", ev, levelUlWrapper);
+          levelUlWrapper.classList.remove(menuItemHorizontalWrapperHidden);
+          levelUlWrapper.classList.add(menuItemHorizontalWrapperShow);
+        });
+        ul.addEventListener("mouseleave", (ev) => {
+          ev.stopPropagation();
+          useShowSubMenu("mouseleave", ev, levelUlWrapper);
+          levelUlWrapper.classList.remove(menuItemHorizontalWrapperShow);
+          levelUlWrapper.classList.add(menuItemHorizontalWrapperHidden);
+        });
+      }
+    }
+  }
+  if (eventName === "mouseleave") {
+    wrapper.classList.remove(menuItemHorizontalWrapperShow);
+    wrapper.classList.add(menuItemHorizontalWrapperHidden);
+  }
+}
 const ns = useNamespace("menu");
 const subNs = useNamespace("submenu");
 const subMenuClass = subNs.b();
@@ -555,9 +572,9 @@ var SubMenu = defineComponent({
         key
       }
     } = getCurrentInstance();
-    const key_ = String(key);
-    const isOpen = ref(false);
+    let key_ = String(key);
     const defaultOpenKeys = inject("openKeys");
+    const isOpen = ref(defaultOpenKeys.value.includes(key_));
     const indent = inject("defaultIndent");
     const isCollapsed = inject("isCollapsed");
     const mode = inject("mode");
@@ -566,17 +583,11 @@ var SubMenu = defineComponent({
     const isHorizontal = mode.value === "horizontal";
     if (key_ === "null") {
       console.warn(`[devui][menu]: Key can not be null`);
-    } else {
-      if (defaultOpenKeys.value.includes(key_)) {
-        isOpen.value = true;
-      } else {
-        isOpen.value = false;
-      }
+      key_ = `randomKey-${randomId(16)}`;
     }
     const clickHandle = (e) => {
-      e.preventDefault();
       e.stopPropagation();
-      const ele = e.currentTarget;
+      const ele = useNearestMenuElement(e.target);
       if (ele.classList.contains(subMenuClass) && isHorizontal) {
         return;
       }
@@ -585,30 +596,21 @@ var SubMenu = defineComponent({
         useClick(e);
       }
       if (!props.disabled && mode.value !== "horizontal") {
-        const target = e.target;
-        let cur = e.target;
-        if (target.tagName === "UL") {
-          if (target.classList.contains(`${subMenuClass}-open`)) {
-            isOpen.value = !isOpen.value;
-          } else {
-            isOpen.value = isOpen.value;
-          }
+        const cur = useNearestMenuElement(e.target);
+        const idx = defaultOpenKeys.value.indexOf(key_);
+        if (idx >= 0 && cur.tagName === "UL") {
+          defaultOpenKeys.value.splice(idx, 1);
         } else {
-          while (cur && cur.tagName !== "UL") {
-            if (cur.tagName === "LI") {
-              break;
-            }
-            cur = cur.parentElement;
-          }
           if (cur.tagName === "UL") {
-            isOpen.value = !isOpen.value;
+            defaultOpenKeys.value.push(key_);
           }
         }
+        isOpen.value = defaultOpenKeys.value.indexOf(key_) >= 0;
         parentEmit("submenu-change", {
           type: "submenu-change",
           state: isOpen.value,
           key: key_,
-          el: cur
+          el: ele
         });
       }
     };
@@ -637,11 +639,11 @@ var SubMenu = defineComponent({
     });
     onMounted(() => {
       var _a;
-      const el = title.value;
-      const e = subMenu.value;
+      const subMenuTitle = title.value;
+      const subMenuWrapper = subMenu.value;
       addLayer();
-      class_layer.value = `layer_${(_a = Array.from(e.classList).at(-1)) == null ? void 0 : _a.replace("layer_", "")}`;
-      if (isHorizontal) {
+      class_layer.value = `layer_${(_a = Array.from(subMenuWrapper.classList).at(-1)) == null ? void 0 : _a.replace("layer_", "")}`;
+      if (isHorizontal && !props.disabled) {
         subMenu.value.addEventListener("mouseenter", (ev) => {
           ev.stopPropagation();
           useShowSubMenu("mouseenter", ev, wrapperDom);
@@ -652,22 +654,22 @@ var SubMenu = defineComponent({
         });
       }
       watch(isCollapsed, (newValue) => {
-        const layer = Number(getLayer(e));
+        const layer = Number(getLayer(subMenuWrapper));
         if (!Number.isNaN(layer)) {
           layer > 2 && (isShow.value = !isCollapsed.value);
         }
         if (newValue) {
-          el.style.padding !== "0" && (oldPadding = el.style.padding);
+          subMenuTitle.style.padding !== "0" && (oldPadding = subMenuTitle.style.padding);
           setTimeout(() => {
-            el.style.padding = "0";
-            el.style.width = "";
-            el.style.textAlign = `center`;
+            subMenuTitle.style.padding = "0";
+            subMenuTitle.style.width = "";
+            subMenuTitle.style.textAlign = `center`;
           }, 300);
-          el.style.display = `block`;
+          subMenuTitle.style.display = `block`;
         } else {
-          el.style.padding = `${oldPadding}`;
-          el.style.textAlign = ``;
-          el.style.display = `flex`;
+          subMenuTitle.style.padding = `${oldPadding}`;
+          subMenuTitle.style.textAlign = ``;
+          subMenuTitle.style.display = `flex`;
         }
       });
     });
@@ -675,10 +677,10 @@ var SubMenu = defineComponent({
       var _a, _b, _c, _d;
       return withDirectives(createVNode("ul", {
         "onClick": clickHandle,
-        "class": [subMenuClass, class_layer.value],
+        "class": [subMenuClass, class_layer.value, props["disabled"] && `${subMenuClass}-disabled`],
         "ref": subMenu
       }, [createVNode("div", {
-        "class": [`${subMenuClass}-title`, props["disabled"] && `${subMenuClass}-disabled`],
+        "class": [`${subMenuClass}-title`],
         "style": `padding: 0 ${indent}px`,
         "ref": title
       }, [createVNode("span", {
@@ -691,10 +693,10 @@ var SubMenu = defineComponent({
           "icon icon-chevron-right": class_layer.value === `layer_${subMenuClass}`,
           "is-opened": isOpen.value
         }
-      }, null), [[vShow, !isCollapsed.value && key !== "overflowContainer"]])]), isHorizontal ? createVNode("div", {
+      }, null), [[vShow, !isCollapsed.value && key !== "overflowContainer"]])]), isHorizontal ? withDirectives(createVNode("div", {
         "class": `${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`,
         "ref": wrapper
-      }, [(_d = (_c = ctx.slots).default) == null ? void 0 : _d.call(_c)]) : createVNode(MenuTransition, null, {
+      }, [(_d = (_c = ctx.slots).default) == null ? void 0 : _d.call(_c)]), [[vShow, !props.disabled]]) : createVNode(MenuTransition, null, {
         default: () => {
           var _a2, _b2;
           return [withDirectives(createVNode("div", {
@@ -767,51 +769,67 @@ var Menu = defineComponent({
     provide("useRouter", props.router);
     setDefaultIndent(props["indentSize"]);
     const menuRoot = ref(null);
-    const overflow_container = ref(null);
     const overflowItemLength = ref(0);
+    const overflowContainer = ref(null);
+    const selectClassName = `${ns2.b()}-item-select`;
     const rootClassName = computed(() => ({
       [`${ns2.b()}`]: true,
       [`${ns2.b()}-vertical`]: mode.value === "vertical",
       [`${ns2.b()}-horizontal`]: mode.value === "horizontal",
       [`${ns2.b()}-collapsed`]: collapsed.value
     }));
+    const overflowContainerClassName = reactive({
+      [selectClassName]: false,
+      [`${ns2.b()}-overflow-container`]: true
+    });
+    const resetOverflowContainerSelectState = (e) => {
+      const children = Array.from(e.children);
+      for (const item of children) {
+        if (item.classList.contains(selectClassName)) {
+          overflowContainerClassName[selectClassName] = true;
+          break;
+        } else {
+          overflowContainerClassName[selectClassName] = false;
+        }
+      }
+    };
     onMounted(() => {
       var _a;
       if (props["mode"] === "horizontal") {
         let flag = false;
-        const overflowContainer = (_a = overflow_container.value) == null ? void 0 : _a.$el;
+        const overflowContainerElement = (_a = overflowContainer.value) == null ? void 0 : _a.$el;
         const root = menuRoot.value;
         const children = root.children;
-        const container = overflowContainer.children[1];
+        const container = overflowContainerElement.children[1];
         const ob = new IntersectionObserver((entries) => {
-          entries.forEach((v) => {
-            if (!v.isIntersecting) {
-              const cloneNode = v.target.cloneNode(true);
-              if (v.target.classList.contains(`${ns2.b()}-overflow-container`)) {
-                if (flag && v.target.previousElementSibling && container.children.length) {
-                  root.appendChild(v.target.previousElementSibling);
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) {
+              const cloneNode = entry.target.cloneNode(true);
+              if (entry.target.classList.contains(`${ns2.b()}-overflow-container`)) {
+                if (flag && entry.target.previousElementSibling && container.children.length) {
+                  root.appendChild(entry.target.previousElementSibling);
                 } else {
                   flag = true;
                 }
               } else {
                 overflowItemLength.value += 1;
-                v.target.style.visibility = "hidden";
-                if (overflowContainer.nextSibling) {
-                  root.insertBefore(v.target, overflowContainer.nextSibling);
+                entry.target.style.visibility = "hidden";
+                if (overflowContainerElement.nextSibling) {
+                  root.insertBefore(entry.target, overflowContainerElement.nextSibling);
                 } else {
-                  root.appendChild(v.target);
+                  root.appendChild(entry.target);
                 }
                 container.appendChild(cloneNode);
+                resetOverflowContainerSelectState(container);
               }
             } else {
-              if (!v.target.classList.contains(`${ns2.b()}-overflow-container`) && v.target.style.visibility === "hidden") {
-                ob.unobserve(v.target);
-                const el = container.lastChild;
-                if (el) {
-                  root.insertBefore(el, overflowContainer);
-                }
-                const obItem = overflowContainer.previousElementSibling;
-                if (obItem) {
+              if (!entry.target.classList.contains(`${ns2.b()}-overflow-container`) && entry.target.style.visibility === "hidden") {
+                ob.unobserve(entry.target);
+                root.insertBefore(entry.target, overflowContainerElement);
+                entry.target.style.visibility = "";
+                const obItem = overflowContainerElement.previousElementSibling;
+                const canObAgin = obItem && entry.boundingClientRect.width % entry.target.getBoundingClientRect().width === 0;
+                if (canObAgin) {
                   ob.observe(obItem);
                 }
                 if (obItem == null ? void 0 : obItem.classList.contains("devui-submenu")) {
@@ -826,9 +844,12 @@ var Menu = defineComponent({
                     useShowSubMenu("mouseleave", ev, wrapper);
                   });
                 }
-                v.target.style.visibility = "";
-                v.target.remove();
                 overflowItemLength.value -= 1;
+                ob.observe(entry.target);
+                if (container.lastChild) {
+                  container.removeChild(container.lastChild);
+                }
+                resetOverflowContainerSelectState(container);
               }
             }
           });
@@ -847,12 +868,12 @@ var Menu = defineComponent({
       return createVNode("ul", {
         "ref": menuRoot,
         "class": rootClassName.value,
-        "style": [props["collapsed"] ? `width:${props["collapsedIndent"] * 2}px` : `width: ${props["width"]}`, "white-space: nowrap"]
+        "style": [props["collapsed"] ? `width:${props["collapsedIndent"] * 2}px` : `width: ${props["width"]}`]
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a), withDirectives(createVNode(SubMenu, {
-        "ref": overflow_container,
+        "ref": overflowContainer,
         "key": "overflowContainer",
         "title": "...",
-        "class": `${ns2.b()}-overflow-container`
+        "class": overflowContainerClassName
       }, null), [[vShow, overflowItemLength.value > 0 && mode.value === "horizontal"]])]);
     };
   }

package/menu/index.umd.js

@@ -1 +1 @@
-(function(L,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(L=typeof globalThis!="undefined"?globalThis:L||self,n(L.index={},L.Vue))})(this,function(L,n){"use strict";function k(e,l,t){let a=e;return l&&(a+=`__${l}`),t&&(a+=`--${t}`),a}function E(e,l=!1){const t=l?`.devui-${e}`:`devui-${e}`;return{b:()=>k(t),e:f=>f?k(t,f):"",m:f=>f?k(t,"",f):"",em:(f,m)=>f&&m?k(t,f,m):""}}const F=[];let K=[];const O=n.ref(24),T=E("menu"),ne=E("submenu"),j=T.b(),G=`${T.b()}-item-horizontal-wrapper`,J=`${T.b()}-item-select`,Q=`${T.b()}-active-parent`;function se(e){O.value=e}function ae(e){F.push(e)}function le(){K=[],F.forEach(t=>{K.push(t.el.parentElement)});const e=[...K],l=t=>{var a;return(a=/layer_(\d*)/gim.exec(t))==null?void 0:a[1]};for(;e.length;){const t=e.shift();if(t==null?void 0:t.classList.contains(j)){const a=t.children;e.unshift(...Array.from(a));continue}else{if(t.tagName==="DIV")if(t.classList.contains(`${T.b()}-item-vertical-wrapper`)||t.classList.contains(`${ne.b()}-menu-item-vertical-wrapper`)){const a=t.parentElement;if(e.unshift(...Array.from(t.children)),a==null?void 0:a.classList.contains(j))t.classList.add("layer_1");else{let s=l((a==null?void 0:a.classList.value)||"");s=Number(s),t.classList.add(`layer_${s}`)}}else{const a=t.parentElement;let s=l((a==null?void 0:a.classList.value)||"");s=Number(s),t.classList.add(`layer_${s}`),t.style.paddingLeft=`${(s===2?1:s-1)*O.value}px`}if(t.tagName==="UL"){const a=t.parentElement,s=t.children;for(let f=0;f<s.length;f++)e.unshift(s[f]);const i=(a==null?void 0:a.classList.value)||"";let r=l(i);(a==null?void 0:a.classList.contains(j))?(r=1,t.classList.add(`layer_${2}`)):(t.classList.add(`layer_${Number(r)+1}`),r=Number(r)+1)}if(t.tagName==="LI"){const a=t.parentElement,s=(a==null?void 0:a.classList.value)||"";let i=l(s);l(s),i=Number(i),t.style.padding=`0 ${i*O.value}px`}}}}function oe(e){var a;const l=e;let t=null;for(let s=0;s<l.length;s++){const i=l[s];((a=i==null?void 0:i.classList)==null?void 0:a.contains(`${T.b()}-horizontal`))&&(t=i)}return t}function ie(e,l){let t=l.target,a=[];const{path:s}=l,i=oe(s);for(a=[...Array.from(i.children)],t.tagName==="SPAN"&&(t=t.parentElement);a.length;){const r=a.shift();if((r==null?void 0:r.tagName)==="UL"||(r==null?void 0:r.classList.contains(G))){const f=r==null?void 0:r.children;a.unshift(...Array.from(f))}r!==t&&(r==null||r.classList.remove(J),r==null||r.classList.remove(Q))}}function re(e,l){const t=[],a=l.path||l.composedPath&&l.composedPath();for(let s=0;s<a.length;s++){const i=a[s];if(!i.classList.contains(j))t.push(...Array.from(i.children));else{t.push(...Array.from(i.children));break}}for(;t.length;){const s=t.shift();((s==null?void 0:s.tagName)==="UL"||(s==null?void 0:s.classList.contains(G)))&&t.push(...Array.from(s==null?void 0:s.children)),s!==e&&((s==null?void 0:s.tagName)==="DIV"&&t.unshift(...Array.from(s==null?void 0:s.children)),s==null||s.classList.remove(J),s==null||s.classList.remove(Q))}}function X(e,l,t=!1){t?ie(e,l):re(e,l)}function ce(e){var a;const l=/layer_(\d{1,})/gim,t=e.className;return(a=l.exec(t))==null?void 0:a[1]}const de={disabled:{type:Boolean,default:!1},href:{type:String,default:""},route:{type:[String,Object]}},Y=E("menu");function Z(e,l,t,a){const s=n.ref(!1);return t?e.includes(l)?s.value=!0:s.value=!1:e[0]===l&&!a.value?s.value=!0:s.value=!1,s.value}function ue(e){var t,a;let l=e.parentElement;for(;!l.classList.contains(Y.b());)((t=l.firstElementChild)==null?void 0:t.tagName)==="DIV"&&((a=l==null?void 0:l.firstElementChild)==null||a.classList.add(`${Y.b()}-active-parent`)),l=l.parentElement;return l}function fe(e,l,t,a){if(t&&l){const s=e.route||a,i=l.push(s).then(r=>r);return{route:s,routerResult:i}}}const I=E("menu");function ee(e){const l=e.path;for(let t=0;t<l.length;t++){const a=l[t];if(a.classList.contains(`${I.b()}-horizontal`))break;if(a.classList.contains(`${I.b()}-item-horizontal-wrapper`))continue;a.tagName!=="SPAN"&&a.classList.add(`${I.b()}-item-select`)}}const V=E("menu"),A=`${V.b()}-item-select`,me=`${V.b()}-item-disabled`;var U=n.defineComponent({name:"DMenuItem",props:de,setup(e,l){var v,d;const t=n.getCurrentInstance(),a=String(t==null?void 0:t.vnode.key),s=n.inject("mode"),i=n.inject("multiple"),r=n.inject("defaultIndent"),f=n.inject("isCollapsed"),m=n.inject("defaultSelectKey"),{disabled:g}=n.toRefs(e),$=n.ref(Z(m,a,i,g)),w=n.ref(!0),h=n.inject("rootMenuEmit"),C=n.inject("useRouter"),P=t==null?void 0:t.appContext.config.globalProperties.$router,y=n.computed(()=>({[`${V.b()}-item`]:!0,[`${V.b()}-item-isCollapsed`]:f.value,[A]:$.value,[me]:g.value})),b=c=>{var S;c.stopPropagation();const o=c.currentTarget;let u;if(!e.disabled){if(!i)X(o,c,s.value==="horizontal"),s.value==="horizontal"?ee(c):o.classList.add(A),u=fe(e,P,C,a);else if(o.classList.contains(A)){o.classList.remove(A),h("deselect",{type:"deselect",key:a,el:o,e:c});return}else o.classList.add(A);u===void 0?h("select",{type:"select",key:a,el:o,e:c}):h("select",{type:"select",key:a,el:o,e:c,route:u})}if(s.value==="vertical"){const M=c.currentTarget;ue(M)}if(s.value==="horizontal"){const M=(S=o.parentElement)==null?void 0:S.parentElement;M==null||M.classList.add(`${V.b()}-active-parent`)}},N=n.createVNode("span",{class:`${V.b()}-icon`},[(d=(v=l.slots).icon)==null?void 0:d.call(v)]),p=n.ref(null);return n.watch(g,()=>{y.value[A]=!1}),n.watch(()=>m,c=>{$.value=Z(c,a,i,g),y.value[A]=$.value}),n.onMounted(()=>{var u,S;let c="";const o=p.value;s.value==="vertical"&&(((S=(u=o.parentElement)==null?void 0:u.parentElement)==null?void 0:S.classList.contains(V.b()))?(w.value=!0,w.value&&(o.style.paddingRight="",o.style.paddingLeft=`${r}px`),n.watch(f,M=>{M?(o.style.padding!=="0"&&(c=o.style.padding),setTimeout(()=>{o.style.padding="0",o.style.width="",o.style.textAlign="center"},300),o.style.display="block"):(o.style.padding=`${c}`,o.style.textAlign="",o.style.display="flex")})):w.value=!1)}),()=>s.value==="vertical"?n.createVNode("div",{class:`${V.b()}-item-vertical-wrapper`},[n.createVNode("li",{class:y.value,onClick:b,ref:p},[l.slots.icon!==void 0&&N,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var c,o;return[n.withDirectives(n.createVNode("span",null,[(o=(c=l.slots).default)==null?void 0:o.call(c)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var c,o;return[(o=(c=l.slots).default)==null?void 0:o.call(c)]}})])])]):n.createVNode("li",{class:y.value,onClick:b,ref:p},[l.slots.icon!==void 0&&N,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var c,o;return[n.withDirectives(n.createVNode("span",null,[(o=(c=l.slots).default)==null?void 0:o.call(c)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var c,o;return[(o=(c=l.slots).default)==null?void 0:o.call(c)]}})])])}});const B=E("menu"),pe=E("submenu"),x=`${B.b()}-item-horizontal-wrapper-hidden`,R=`${B.b()}-item-horizontal-wrapper-show`;function D(e,l,t){const a=l.currentTarget,s=a.parentElement,i=t.children;if(t.style.padding="0 20px !important",e==="mouseenter"){if((s==null?void 0:s.tagName)==="DIV"){t.classList.add(`${B.b()}-item-horizontal-wrapper-level`);const{width:r}=a.getClientRects()[0];t.style.top="0px",t.style.left=`${r}px`}else t.style.top="26px",t.style.left="0px";t.classList.remove(x),t.classList.add(R);for(let r=0;r<i.length;r++){const f=i[r];if(f.tagName==="UL"&&f.classList.contains(pe.b())){const m=f.getElementsByClassName(`${B.b()}-item-horizontal-wrapper`)[0];f.addEventListener("mouseenter",g=>{g.stopPropagation(),D("mouseenter",g,m),m.classList.remove(x),m.classList.add(R)}),f.addEventListener("mouseleave",g=>{g.stopPropagation(),D("mouseleave",g,m),m.classList.remove(R),m.classList.add(x)})}}}e==="mouseleave"&&(t.classList.remove(R),t.classList.add(x))}const ge={title:{type:String,default:""},disabled:{type:Boolean,default:!1}},te="0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out",_={"before-enter"(e){e.style.transition=te,e.setAttribute("data-oldPadding",e.style.padding),e.setAttribute("data-oldMargin",e.style.margin),e.style.height="0",e.style.padding="0",e.style.margin="0"},enter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.padding=e.getAttribute("data-oldPadding"),e.style.margin=e.getAttribute("data-oldMargin"),e.style.overflow="hidden"},"after-enter"(e){e.style.transition="",e.style.transition="",e.style.height="",e.style.overflow=e.getAttribute("data-overflow")},"before-leave"(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave(e){e.scrollHeight!==0&&(e.style.transition=te,e.style.height="0",e.style.paddingTop="0",e.style.paddingBottom="0")},"after-leave"(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};var he=n.defineComponent({name:"DMenuTransition",setup(e,l){return()=>n.createVNode(n.Transition,{onBeforeEnter:t=>_["before-enter"](t),onBeforeLeave:t=>_["before-leave"](t),onEnter:t=>_.enter(t),onAfterEnter:t=>_["after-enter"](t),onLeave:t=>_.leave(t),onAfterLeave:t=>_["after-leave"](t)},{default:()=>{var t,a;return[(a=(t=l.slots).default)==null?void 0:a.call(t)]}})}});const W=E("menu"),z=E("submenu").b();var H=n.defineComponent({name:"DSubMenu",props:ge,setup(e,l){const t=n.ref(!0),{vnode:{key:a}}=n.getCurrentInstance(),s=String(a),i=n.ref(!1),r=n.inject("openKeys"),f=n.inject("defaultIndent"),m=n.inject("isCollapsed"),g=n.inject("mode"),$=n.ref(null),w=n.inject("rootMenuEmit"),h=g.value==="horizontal";s==="null"?console.warn("[devui][menu]: Key can not be null"):r.value.includes(s)?i.value=!0:i.value=!1;const C=d=>{d.preventDefault(),d.stopPropagation();const c=d.currentTarget;if(!(c.classList.contains(z)&&h)&&(h&&(X(c,d,!0),ee(d)),!e.disabled&&g.value!=="horizontal")){const o=d.target;let u=d.target;if(o.tagName==="UL")o.classList.contains(`${z}-open`)?i.value=!i.value:i.value=i.value;else{for(;u&&u.tagName!=="UL"&&u.tagName!=="LI";)u=u.parentElement;u.tagName==="UL"&&(i.value=!i.value)}w("submenu-change",{type:"submenu-change",state:i.value,key:s,el:u})}},P=n.ref(null);let y;const b=n.ref(null),N=n.ref(null);let p="";const v=n.ref("");return n.watchEffect(()=>{y=P.value,ae({el:b.value})},{flush:"post"}),n.watch(()=>r,d=>{d.value.includes(s)?i.value=!0:i.value=!1},{deep:!0}),n.onMounted(()=>{var o;const d=N.value,c=b.value;le(),v.value=`layer_${(o=Array.from(c.classList).at(-1))==null?void 0:o.replace("layer_","")}`,h&&(b.value.addEventListener("mouseenter",u=>{u.stopPropagation(),D("mouseenter",u,y)}),b.value.addEventListener("mouseleave",u=>{u.stopPropagation(),D("mouseleave",u,y)})),n.watch(m,u=>{const S=Number(ce(c));Number.isNaN(S)||S>2&&(t.value=!m.value),u?(d.style.padding!=="0"&&(p=d.style.padding),setTimeout(()=>{d.style.padding="0",d.style.width="",d.style.textAlign="center"},300),d.style.display="block"):(d.style.padding=`${p}`,d.style.textAlign="",d.style.display="flex")})}),()=>{var d,c,o,u;return n.withDirectives(n.createVNode("ul",{onClick:C,class:[z,v.value],ref:b},[n.createVNode("div",{class:[`${z}-title`,e.disabled&&`${z}-disabled`],style:`padding: 0 ${f}px`,ref:N},[n.createVNode("span",{class:`${W.b()}-icon`},[(c=(d=l.slots)==null?void 0:d.icon)==null?void 0:c.call(d)]),n.withDirectives(n.createVNode("span",{class:`${z}-title-content`},[e.title]),[[n.vShow,!m.value]]),n.withDirectives(n.createVNode("i",{class:{"icon icon-chevron-up":v.value!==`layer_${z}`,"icon icon-chevron-right":v.value===`layer_${z}`,"is-opened":i.value}},null),[[n.vShow,!m.value&&a!=="overflowContainer"]])]),h?n.createVNode("div",{class:`${W.b()}-item-horizontal-wrapper ${W.b()}-item-horizontal-wrapper-hidden`,ref:P},[(u=(o=l.slots).default)==null?void 0:u.call(o)]):n.createVNode(he,null,{default:()=>{var S,M;return[n.withDirectives(n.createVNode("div",{class:[`${z}-menu-item-vertical-wrapper`],ref:$},[(M=(S=l.slots).default)==null?void 0:M.call(S)]),[[n.vShow,i.value]])]}})]),[[n.vShow,t.value]])}}});const ye={width:{type:String,default:""},collapsed:{type:Boolean,default:!1},collapsedIndent:{type:Number,default:24},indentSize:{type:Number,default:24},multiple:{type:Boolean,default:!1},openKeys:{type:Array,default:[]},defaultSelectKeys:{type:Array,default:[]},mode:{type:String,default:"vertical"},router:{type:Boolean,default:!1}};var Le="",q=n.defineComponent({name:"DMenu",props:ye,emits:["select","deselect","submenu-change"],setup(e,l){const t=E("menu"),{openKeys:a,mode:s,collapsed:i}=n.toRefs(e);n.provide("isCollapsed",i),n.provide("defaultIndent",e.indentSize),n.provide("multiple",e.multiple),n.provide("openKeys",a),n.provide("defaultSelectKey",e.defaultSelectKeys),n.provide("mode",s),n.provide("collapsedIndent",e.collapsedIndent),n.provide("rootMenuEmit",l.emit),n.provide("useRouter",e.router),se(e.indentSize);const r=n.ref(null),f=n.ref(null),m=n.ref(0),g=n.computed(()=>({[`${t.b()}`]:!0,[`${t.b()}-vertical`]:s.value==="vertical",[`${t.b()}-horizontal`]:s.value==="horizontal",[`${t.b()}-collapsed`]:i.value}));return n.onMounted(()=>{var $;if(e.mode==="horizontal"){let w=!1;const h=($=f.value)==null?void 0:$.$el,C=r.value,P=C.children,y=h.children[1],b=new IntersectionObserver(N=>{N.forEach(p=>{if(p.isIntersecting){if(!p.target.classList.contains(`${t.b()}-overflow-container`)&&p.target.style.visibility==="hidden"){b.unobserve(p.target);const v=y.lastChild;v&&C.insertBefore(v,h);const d=h.previousElementSibling;if(d&&b.observe(d),d==null?void 0:d.classList.contains("devui-submenu")){const c=d,o=d.children[1];c.addEventListener("mouseenter",u=>{u.stopPropagation(),D("mouseenter",u,o)}),c.addEventListener("mouseleave",u=>{u.stopPropagation(),D("mouseleave",u,o)})}p.target.style.visibility="",p.target.remove(),m.value-=1}}else{const v=p.target.cloneNode(!0);p.target.classList.contains(`${t.b()}-overflow-container`)?w&&p.target.previousElementSibling&&y.children.length?C.appendChild(p.target.previousElementSibling):w=!0:(m.value+=1,p.target.style.visibility="hidden",h.nextSibling?C.insertBefore(p.target,h.nextSibling):C.appendChild(p.target),y.appendChild(v))}})},{root:C,threshold:1,rootMargin:"8px"});for(let N=0;N<P.length;N++)b.observe(P[N])}}),()=>{var $,w;return n.createVNode("ul",{ref:r,class:g.value,style:[e.collapsed?`width:${e.collapsedIndent*2}px`:`width: ${e.width}`,"white-space: nowrap"]},[(w=($=l.slots).default)==null?void 0:w.call($),n.withDirectives(n.createVNode(H,{ref:f,key:"overflowContainer",title:"...",class:`${t.b()}-overflow-container`},null),[[n.vShow,m.value>0&&s.value==="horizontal"]])])}}}),be={title:"Menu \u83DC\u5355",category:"\u5E03\u5C40",status:"100%",install(e){e.component(q.name,q),e.component(U.name,U),e.component(H.name,H)}};L.Menu=q,L.MenuItem=U,L.SubMenu=H,L.default=be,Object.defineProperty(L,"__esModule",{value:!0}),L[Symbol.toStringTag]="Module"});
+(function(S,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(S=typeof globalThis!="undefined"?globalThis:S||self,n(S.index={},S.Vue))})(this,function(S,n){"use strict";function _(e,l,t){let a=e;return l&&(a+=`__${l}`),t&&(a+=`--${t}`),a}function C(e,l=!1){const t=l?`.devui-${e}`:`devui-${e}`;return{b:()=>_(t),e:d=>d?_(t,d):"",m:d=>d?_(t,"",d):"",em:(d,m)=>d&&m?_(t,d,m):""}}const G=[];let K=[];const I=n.ref(24),T=C("menu"),ae=C("submenu"),j=T.b(),J=`${T.b()}-item-horizontal-wrapper`,Q=`${T.b()}-item-select`,X=`${T.b()}-active-parent`;function le(e){I.value=e}function oe(e){G.push(e)}function ie(){K=[],G.forEach(t=>{K.push(t.el.parentElement)});const e=[...K],l=t=>{var a;return(a=/layer_(\d*)/gim.exec(t))==null?void 0:a[1]};for(;e.length;){const t=e.shift();if(t!=null&&t.classList.contains(j)){const a=t.children;e.unshift(...Array.from(a));continue}else{if(t.tagName==="DIV")if(t.classList.contains(`${T.b()}-item-vertical-wrapper`)||t.classList.contains(`${ae.b()}-menu-item-vertical-wrapper`)){const a=t.parentElement;if(e.unshift(...Array.from(t.children)),a!=null&&a.classList.contains(j))t.classList.add("layer_1");else{let s=l((a==null?void 0:a.classList.value)||"");s=Number(s),t.classList.add(`layer_${s}`)}}else{const a=t.parentElement;let s=l((a==null?void 0:a.classList.value)||"");s=Number(s),t.classList.add(`layer_${s}`),t.style.paddingLeft=`${(s===2?1:s-1)*I.value}px`}if(t.tagName==="UL"){const a=t.parentElement,s=t.children;for(let d=0;d<s.length;d++)e.unshift(s[d]);const c=(a==null?void 0:a.classList.value)||"";let r=l(c);a!=null&&a.classList.contains(j)?(r=1,t.classList.add(`layer_${2}`)):(t.classList.add(`layer_${Number(r)+1}`),r=Number(r)+1)}if(t.tagName==="LI"){const a=t.parentElement,s=(a==null?void 0:a.classList.value)||"";let c=l(s);l(s),c=Number(c),t.style.padding=`0 ${c*I.value}px`}}}}function re(e){var a;const l=e;let t=null;for(let s=0;s<l.length;s++){const c=l[s];(a=c==null?void 0:c.classList)!=null&&a.contains(`${T.b()}-horizontal`)&&(t=c)}return t}function ce(e,l){let t=l.target,a=[];const{path:s}=l,c=re(s);for(a=[...Array.from(c.children)],t.tagName==="SPAN"&&(t=t.parentElement);a.length;){const r=a.shift();if((r==null?void 0:r.tagName)==="UL"||(r==null?void 0:r.classList.contains(J))){const d=r==null?void 0:r.children;a.unshift(...Array.from(d))}r!==t&&(r==null||r.classList.remove(Q),r==null||r.classList.remove(X))}}function de(e,l){const t=[],a=l.path||l.composedPath&&l.composedPath();for(let s=0;s<a.length;s++){const c=a[s];if(!c.classList.contains(j))t.push(...Array.from(c.children));else{t.push(...Array.from(c.children));break}}for(;t.length;){const s=t.shift();((s==null?void 0:s.tagName)==="UL"||(s==null?void 0:s.classList.contains(J)))&&t.push(...Array.from(s==null?void 0:s.children)),s!==e&&((s==null?void 0:s.tagName)==="DIV"&&t.unshift(...Array.from(s==null?void 0:s.children)),s==null||s.classList.remove(Q),s==null||s.classList.remove(X))}}function Y(e,l,t=!1){t?ce(e,l):de(e,l)}function ue(e){var a;const l=/layer_(\d{1,})/gim,t=e.className;return(a=l.exec(t))==null?void 0:a[1]}const fe={disabled:{type:Boolean,default:!1},href:{type:String,default:""},route:{type:[String,Object]}},Z=C("menu");function ee(e,l,t,a){const s=n.ref(!1);return t?e.includes(l)?s.value=!0:s.value=!1:e[0]===l&&!a.value?s.value=!0:s.value=!1,s.value}function me(e){var t,a;let l=e.parentElement;for(;!l.classList.contains(Z.b());)((t=l.firstElementChild)==null?void 0:t.tagName)==="DIV"&&((a=l==null?void 0:l.firstElementChild)==null||a.classList.add(`${Z.b()}-active-parent`)),l=l.parentElement;return l}function pe(e,l,t,a){if(t&&l){const s=e.route||a,c=l.push(s).then(r=>r);return{route:s,routerResult:c}}}const U=C("menu");function te(e){const l=e.path;for(let t=0;t<l.length;t++){const a=l[t];if(a.classList.contains(`${U.b()}-horizontal`))break;if(a.classList.contains(`${U.b()}-item-horizontal-wrapper`))continue;a.tagName!=="SPAN"&&a.classList.add(`${U.b()}-item-select`)}}const M=C("menu"),V=`${M.b()}-item-select`,ge=`${M.b()}-item-disabled`;var W=n.defineComponent({name:"DMenuItem",props:fe,setup(e,l){var w,u;const t=n.getCurrentInstance(),a=String(t==null?void 0:t.vnode.key),s=n.inject("mode"),c=n.inject("multiple"),r=n.inject("defaultIndent"),d=n.inject("isCollapsed"),m=n.inject("defaultSelectKey"),{disabled:p}=n.toRefs(e),P=n.ref(ee(m,a,c,p)),E=n.ref(!0),$=n.inject("rootMenuEmit"),N=n.inject("useRouter"),L=t==null?void 0:t.appContext.config.globalProperties.$router,g=n.computed(()=>({[`${M.b()}-item`]:!0,[`${M.b()}-item-isCollapsed`]:d.value,[V]:P.value,[ge]:p.value})),h=o=>{var b;o.stopPropagation();const i=o.currentTarget;let f;if(e.disabled&&o.preventDefault(),!e.disabled){if(!c)Y(i,o,s.value==="horizontal"),s.value==="horizontal"?te(o):i.classList.add(V),f=pe(e,L,N,a);else if(i.classList.contains(V)){i.classList.remove(V),$("deselect",{type:"deselect",key:a,el:i,e:o});return}else i.classList.add(V);f===void 0?$("select",{type:"select",key:a,el:i,e:o}):$("select",{type:"select",key:a,el:i,e:o,route:f})}if(s.value==="vertical"){const v=o.currentTarget;me(v)}if(s.value==="horizontal"){const v=(b=i.parentElement)==null?void 0:b.parentElement;v==null||v.classList.add(`${M.b()}-active-parent`)}},A=n.createVNode("span",{class:`${M.b()}-icon`},[(u=(w=l.slots).icon)==null?void 0:u.call(w)]),y=n.ref(null);return n.watch(p,()=>{c||(g.value[V]=!1)}),n.watch(()=>m,o=>{P.value=ee(o,a,c,p),g.value[V]=P.value}),n.onMounted(()=>{var f,b;let o="";const i=y.value;s.value==="vertical"&&((b=(f=i.parentElement)==null?void 0:f.parentElement)!=null&&b.classList.contains(M.b())?(E.value=!0,E.value&&(i.style.paddingRight="",i.style.paddingLeft=`${r}px`),n.watch(d,v=>{v?(i.style.padding!=="0"&&(o=i.style.padding),setTimeout(()=>{i.style.padding="0",i.style.width="",i.style.textAlign="center"},300),i.style.display="block"):(i.style.padding=`${o}`,i.style.textAlign="",i.style.display="flex")})):E.value=!1)}),()=>s.value==="vertical"?n.createVNode("div",{class:`${M.b()}-item-vertical-wrapper`},[n.createVNode("li",{class:g.value,onClick:h,ref:y},[l.slots.icon!==void 0&&A,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var o,i;return[n.withDirectives(n.createVNode("span",null,[(i=(o=l.slots).default)==null?void 0:i.call(o)]),[[n.vShow,!d.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var o,i;return[(i=(o=l.slots).default)==null?void 0:i.call(o)]}})])])]):n.createVNode("li",{class:g.value,onClick:h,ref:y},[l.slots.icon!==void 0&&A,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var o,i;return[n.withDirectives(n.createVNode("span",null,[(i=(o=l.slots).default)==null?void 0:i.call(o)]),[[n.vShow,!d.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var o,i;return[(i=(o=l.slots).default)==null?void 0:i.call(o)]}})])])}});function he(e=8){const l="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let a=0;a<e;a++)t+=l[parseInt((Math.random()*l.length).toString())];return t}function ne(e){for(;e&&e.tagName!=="LI"&&e.tagName!=="UL";)e=e.parentElement;return e}const se="0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out",D={"before-enter"(e){e.style.transition=se,e.setAttribute("data-oldPadding",e.style.padding),e.setAttribute("data-oldMargin",e.style.margin),e.style.height="0",e.style.padding="0",e.style.margin="0"},enter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.padding=e.getAttribute("data-oldPadding"),e.style.margin=e.getAttribute("data-oldMargin"),e.style.overflow="hidden"},"after-enter"(e){e.style.transition="",e.style.transition="",e.style.height="",e.style.overflow=e.getAttribute("data-overflow")},"before-leave"(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave(e){e.scrollHeight!==0&&(e.style.transition=se,e.style.height="0",e.style.paddingTop="0",e.style.paddingBottom="0")},"after-leave"(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};var ye=n.defineComponent({name:"DMenuTransition",setup(e,l){return()=>n.createVNode(n.Transition,{onBeforeEnter:t=>D["before-enter"](t),onBeforeLeave:t=>D["before-leave"](t),onEnter:t=>D.enter(t),onAfterEnter:t=>D["after-enter"](t),onLeave:t=>D.leave(t),onAfterLeave:t=>D["after-leave"](t)},{default:()=>{var t,a;return[(a=(t=l.slots).default)==null?void 0:a.call(t)]}})}});const be={title:{type:String,default:""},disabled:{type:Boolean,default:!1}},B=C("menu"),ve=C("submenu"),R=`${B.b()}-item-horizontal-wrapper-hidden`,O=`${B.b()}-item-horizontal-wrapper-show`;function x(e,l,t){const a=l.currentTarget,s=a.parentElement,c=t.children;if(t.style.padding="0 20px !important",e==="mouseenter"){if((s==null?void 0:s.tagName)==="DIV"){t.classList.add(`${B.b()}-item-horizontal-wrapper-level`);const{width:r}=a.getClientRects()[0];t.style.top="0px",t.style.left=`${r}px`}else t.style.top="26px",t.style.left="0px";t.classList.remove(R),t.classList.add(O);for(let r=0;r<c.length;r++){const d=c[r];if(d.tagName==="UL"&&d.classList.contains(ve.b())){const m=d.getElementsByClassName(`${B.b()}-item-horizontal-wrapper`)[0];d.addEventListener("mouseenter",p=>{p.stopPropagation(),x("mouseenter",p,m),m.classList.remove(R),m.classList.add(O)}),d.addEventListener("mouseleave",p=>{p.stopPropagation(),x("mouseleave",p,m),m.classList.remove(O),m.classList.add(R)})}}}e==="mouseleave"&&(t.classList.remove(O),t.classList.add(R))}const q=C("menu"),z=C("submenu").b();var H=n.defineComponent({name:"DSubMenu",props:be,setup(e,l){const t=n.ref(!0),{vnode:{key:a}}=n.getCurrentInstance();let s=String(a);const c=n.inject("openKeys"),r=n.ref(c.value.includes(s)),d=n.inject("defaultIndent"),m=n.inject("isCollapsed"),p=n.inject("mode"),P=n.ref(null),E=n.inject("rootMenuEmit"),$=p.value==="horizontal";s==="null"&&(console.warn("[devui][menu]: Key can not be null"),s=`randomKey-${he(16)}`);const N=u=>{u.stopPropagation();const o=ne(u.target);if(!(o.classList.contains(z)&&$)&&($&&(Y(o,u,!0),te(u)),!e.disabled&&p.value!=="horizontal")){const i=ne(u.target),f=c.value.indexOf(s);f>=0&&i.tagName==="UL"?c.value.splice(f,1):i.tagName==="UL"&&c.value.push(s),r.value=c.value.indexOf(s)>=0,E("submenu-change",{type:"submenu-change",state:r.value,key:s,el:o})}},L=n.ref(null);let g;const h=n.ref(null),A=n.ref(null);let y="";const w=n.ref("");return n.watchEffect(()=>{g=L.value,oe({el:h.value})},{flush:"post"}),n.watch(()=>c,u=>{u.value.includes(s)?r.value=!0:r.value=!1},{deep:!0}),n.onMounted(()=>{var i;const u=A.value,o=h.value;ie(),w.value=`layer_${(i=Array.from(o.classList).at(-1))==null?void 0:i.replace("layer_","")}`,$&&!e.disabled&&(h.value.addEventListener("mouseenter",f=>{f.stopPropagation(),x("mouseenter",f,g)}),h.value.addEventListener("mouseleave",f=>{f.stopPropagation(),x("mouseleave",f,g)})),n.watch(m,f=>{const b=Number(ue(o));Number.isNaN(b)||b>2&&(t.value=!m.value),f?(u.style.padding!=="0"&&(y=u.style.padding),setTimeout(()=>{u.style.padding="0",u.style.width="",u.style.textAlign="center"},300),u.style.display="block"):(u.style.padding=`${y}`,u.style.textAlign="",u.style.display="flex")})}),()=>{var u,o,i,f;return n.withDirectives(n.createVNode("ul",{onClick:N,class:[z,w.value,e.disabled&&`${z}-disabled`],ref:h},[n.createVNode("div",{class:[`${z}-title`],style:`padding: 0 ${d}px`,ref:A},[n.createVNode("span",{class:`${q.b()}-icon`},[(o=(u=l.slots)==null?void 0:u.icon)==null?void 0:o.call(u)]),n.withDirectives(n.createVNode("span",{class:`${z}-title-content`},[e.title]),[[n.vShow,!m.value]]),n.withDirectives(n.createVNode("i",{class:{"icon icon-chevron-up":w.value!==`layer_${z}`,"icon icon-chevron-right":w.value===`layer_${z}`,"is-opened":r.value}},null),[[n.vShow,!m.value&&a!=="overflowContainer"]])]),$?n.withDirectives(n.createVNode("div",{class:`${q.b()}-item-horizontal-wrapper ${q.b()}-item-horizontal-wrapper-hidden`,ref:L},[(f=(i=l.slots).default)==null?void 0:f.call(i)]),[[n.vShow,!e.disabled]]):n.createVNode(ye,null,{default:()=>{var b,v;return[n.withDirectives(n.createVNode("div",{class:[`${z}-menu-item-vertical-wrapper`],ref:P},[(v=(b=l.slots).default)==null?void 0:v.call(b)]),[[n.vShow,r.value]])]}})]),[[n.vShow,t.value]])}}});const Le={width:{type:String,default:""},collapsed:{type:Boolean,default:!1},collapsedIndent:{type:Number,default:24},indentSize:{type:Number,default:24},multiple:{type:Boolean,default:!1},openKeys:{type:Array,default:[]},defaultSelectKeys:{type:Array,default:[]},mode:{type:String,default:"vertical"},router:{type:Boolean,default:!1}};var Ne="",F=n.defineComponent({name:"DMenu",props:Le,emits:["select","deselect","submenu-change"],setup(e,l){const t=C("menu"),{openKeys:a,mode:s,collapsed:c}=n.toRefs(e);n.provide("isCollapsed",c),n.provide("defaultIndent",e.indentSize),n.provide("multiple",e.multiple),n.provide("openKeys",a),n.provide("defaultSelectKey",e.defaultSelectKeys),n.provide("mode",s),n.provide("collapsedIndent",e.collapsedIndent),n.provide("rootMenuEmit",l.emit),n.provide("useRouter",e.router),le(e.indentSize);const r=n.ref(null),d=n.ref(0),m=n.ref(null),p=`${t.b()}-item-select`,P=n.computed(()=>({[`${t.b()}`]:!0,[`${t.b()}-vertical`]:s.value==="vertical",[`${t.b()}-horizontal`]:s.value==="horizontal",[`${t.b()}-collapsed`]:c.value})),E=n.reactive({[p]:!1,[`${t.b()}-overflow-container`]:!0}),$=N=>{const L=Array.from(N.children);for(const g of L)if(g.classList.contains(p)){E[p]=!0;break}else E[p]=!1};return n.onMounted(()=>{var N;if(e.mode==="horizontal"){let L=!1;const g=(N=m.value)==null?void 0:N.$el,h=r.value,A=h.children,y=g.children[1],w=new IntersectionObserver(u=>{u.forEach(o=>{if(o.isIntersecting){if(!o.target.classList.contains(`${t.b()}-overflow-container`)&&o.target.style.visibility==="hidden"){w.unobserve(o.target),h.insertBefore(o.target,g),o.target.style.visibility="";const i=g.previousElementSibling;if(i&&o.boundingClientRect.width%o.target.getBoundingClientRect().width===0&&w.observe(i),i!=null&&i.classList.contains("devui-submenu")){const b=i,v=i.children[1];b.addEventListener("mouseenter",k=>{k.stopPropagation(),x("mouseenter",k,v)}),b.addEventListener("mouseleave",k=>{k.stopPropagation(),x("mouseleave",k,v)})}d.value-=1,w.observe(o.target),y.lastChild&&y.removeChild(y.lastChild),$(y)}}else{const i=o.target.cloneNode(!0);o.target.classList.contains(`${t.b()}-overflow-container`)?L&&o.target.previousElementSibling&&y.children.length?h.appendChild(o.target.previousElementSibling):L=!0:(d.value+=1,o.target.style.visibility="hidden",g.nextSibling?h.insertBefore(o.target,g.nextSibling):h.appendChild(o.target),y.appendChild(i),$(y))}})},{root:h,threshold:1,rootMargin:"8px"});for(let u=0;u<A.length;u++)w.observe(A[u])}}),()=>{var N,L;return n.createVNode("ul",{ref:r,class:P.value,style:[e.collapsed?`width:${e.collapsedIndent*2}px`:`width: ${e.width}`]},[(L=(N=l.slots).default)==null?void 0:L.call(N),n.withDirectives(n.createVNode(H,{ref:m,key:"overflowContainer",title:"...",class:E},null),[[n.vShow,d.value>0&&s.value==="horizontal"]])])}}}),we={title:"Menu \u83DC\u5355",category:"\u5E03\u5C40",status:"100%",install(e){e.component(F.name,F),e.component(W.name,W),e.component(H.name,H)}};S.Menu=F,S.MenuItem=W,S.SubMenu=H,S.default=we,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/menu/style.css

@@ -1 +1 @@
-.devui-menu-vertical a,.devui-menu-horizontal a{text-decoration:none}.devui-menu-vertical ul,.devui-menu-vertical li,.devui-menu-horizontal ul,.devui-menu-horizontal li{list-style:none;white-space:nowrap}.devui-menu-horizontal{display:flex;box-sizing:border-box;line-height:var(--devui-line-height-base, 1.5);background:var(--devui-global-bg-normal);padding:14px 20px}.devui-menu-horizontal .devui-menu-item{display:flex;position:relative;box-sizing:content-box;padding:0 20px!important;line-height:24px;cursor:pointer}.devui-menu-horizontal .devui-menu-item:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content,.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-horizontal .devui-menu-item-select:after,.devui-menu-horizontal .devui-menu-active-parent:after{display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item span,.devui-menu-horizontal .devui-menu-item a{color:var(--devui-text, #252b3a)}.devui-menu-horizontal .devui-menu-item:hover span,.devui-menu-horizontal .devui-menu-item:hover a{color:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu{margin:0;padding:0;position:relative}.devui-menu-horizontal .devui-submenu div.devui-submenu-title{padding:0 20px}.devui-menu-horizontal .devui-submenu div.devui-submenu-title span{margin:0}.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-horizontal .devui-submenu:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal .devui-submenu:hover{cursor:pointer}.devui-menu-horizontal .devui-submenu:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),left 0 linear;background:var(--devui-global-bg-normal);z-index:var(--devui-z-index-modal, 1050)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));opacity:1;visibility:visible;max-height:100vh;padding:10px 0!important;border-radius:8px;position:absolute}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu{padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));visibility:hidden;position:absolute;padding:0!important;max-height:0;overflow:hidden;opacity:0}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title{padding:0!important}.devui-submenu-menu-item-vertical-wrapper{overflow:hidden}.devui-menu-vertical{padding:0;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));border-right:var(--devui-line, #d7d8da) 1px solid;background:var(--devui-area, #f8f8f8)!important}.devui-menu-vertical :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-vertical .layer_1{margin:0!important}.devui-menu-vertical .layer_2>div.devui-submenu-title{margin:0!important;background:var(--devui-block, #ffffff)}.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon{margin:auto}.devui-menu-vertical.devui-menu-collapsed ul li{display:none!important}.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon{margin:auto}.devui-menu-vertical .devui-menu-item-vertical-wrapper{padding-left:0!important}.devui-menu-vertical .devui-menu-item{width:100%;height:40px;flex-grow:1;line-height:40px;cursor:pointer;color:var(--devui-menu-item);background:var(--devui-block, #ffffff);display:flex}.devui-menu-vertical .devui-menu-item span:nth-child(2){text-align:left}.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper){display:flex;flex:auto}.devui-menu-vertical .devui-menu-item:after{display:block;position:absolute;right:0;top:0;transform:scaleX(0);content:"";opacity:1;background:var(--devui-primary-hover, #5e7ce0)}.devui-menu-vertical .devui-menu-item-select{background:var(--devui-primary-bg, #f2f5fc)!important;position:relative}.devui-menu-vertical .devui-menu-item-select span,.devui-menu-vertical .devui-menu-item-select a{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item-select:after{display:block;position:absolute;right:0;top:0;height:100%;width:4px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0);transform:scaleX(1)}.devui-menu-vertical .devui-submenu>div:hover span.devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item:hover{color:var(--devui-menu-item-hover)}.devui-menu-vertical li.devui-menu-item,.devui-menu-vertical div.devui-submenu-title{white-space:nowrap;overflow:hidden}.devui-menu-vertical li.devui-menu-item span:nth-child(2),.devui-menu-vertical div.devui-submenu-title span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical li.devui-menu-item span:nth-child(2) span,.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span{overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical .devui-menu-item-isCollapsed{width:fit-content}.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon{margin:auto}.devui-menu-vertical ul.devui-submenu{margin:0;padding:0}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title{display:flex;cursor:pointer;width:100%;height:40px;margin:4px 0;line-height:40px;padding-left:18px;align-items:center;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:nth-child(1){font-size:var(--devui-font-size-lg, 14px)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content{font-size:var(--devui-font-size-lg, 14px);flex:auto}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon{text-align:center}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened{transform:rotate(180deg)}.devui-menu-vertical ul.devui-submenu .devui-menu-item{display:flex}.devui-menu-vertical ul.devui-submenu .devui-menu-item>span{flex:auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));color:var(--devui-menu-item-sub)}.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover>span{color:var(--devui-menu-item-hover)}.devui-menu-vertical ul.devui-submenu .devui-menu-item-select *{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical ul li~ul>div{margin-top:0!important}.devui-menu-vertical ul li{background:var(--devui-area, #f8f8f8)!important}.devui-menu-icon+span{margin-left:10px}.devui-menu-item-disabled,.devui-submenu-disabled,.devui-menu-item-disabled:hover,.devui-submenu-disabled:hover{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}.devui-submenu-disabled:hover span{color:var(--devui-menu-disabled)!important}.fade-enter-active,.fade-leave-active{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.fade-leave-to{display:none}.fade-enter-from,.fade-leave-to{opacity:0}
+.devui-menu-vertical a,.devui-menu-vertical a:hover,.devui-menu-vertical a:active,.devui-menu-vertical a:visited,.devui-menu-horizontal a,.devui-menu-horizontal a:hover,.devui-menu-horizontal a:active,.devui-menu-horizontal a:visited{text-decoration:none}.devui-menu-vertical ul,.devui-menu-vertical li,.devui-menu-horizontal ul,.devui-menu-horizontal li{list-style:none;white-space:nowrap}.devui-menu-horizontal{display:flex;box-sizing:border-box;line-height:var(--devui-line-height-base, 1.5);background:var(--devui-global-bg-normal);padding:14px 20px}.devui-menu-horizontal .devui-menu-item{display:flex;position:relative;box-sizing:content-box;padding:0 20px!important;line-height:24px;cursor:pointer}.devui-menu-horizontal .devui-menu-item:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content,.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-horizontal .devui-menu-item-select:after,.devui-menu-horizontal .devui-menu-active-parent:after{display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item span,.devui-menu-horizontal .devui-menu-item a{color:var(--devui-text, #252b3a)}.devui-menu-horizontal .devui-menu-item:hover span,.devui-menu-horizontal .devui-menu-item:hover a{color:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu{margin:0;padding:0;position:relative}.devui-menu-horizontal .devui-submenu div.devui-submenu-title{padding:0 20px}.devui-menu-horizontal .devui-submenu div.devui-submenu-title span{margin:0}.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-horizontal .devui-submenu:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal .devui-submenu:hover{cursor:pointer}.devui-menu-horizontal .devui-submenu:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),left 0 linear;background:var(--devui-global-bg-normal);z-index:var(--devui-z-index-modal, 1050)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));opacity:1;visibility:visible;max-height:100vh;padding:10px 0!important;border-radius:8px;position:absolute}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu{padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));visibility:hidden;position:absolute;padding:0!important;max-height:0;overflow:hidden;opacity:0}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-menu-item-disabled span,.devui-menu-horizontal .devui-menu-item-disabled a,.devui-menu-horizontal .devui-submenu-disabled span,.devui-menu-horizontal .devui-submenu-disabled a{color:var(--devui-menu-disabled)!important;cursor:not-allowed}.devui-menu-horizontal .devui-menu-item-disabled:after,.devui-menu-horizontal .devui-submenu-disabled:after{content:unset!important}.devui-menu-horizontal .devui-menu-item-disabled+.devui-menu-item-horizontal-wrapper,.devui-menu-horizontal .devui-submenu-disabled+.devui-menu-item-horizontal-wrapper{display:none}.devui-submenu-menu-item-vertical-wrapper{overflow:hidden}.devui-submenu-menu-item{color:var(--devui-menu-item)}.devui-menu-vertical{padding:0;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));border-right:var(--devui-line, #d7d8da) 1px solid;background:var(--devui-area, #f8f8f8)!important}.devui-menu-vertical :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-vertical .layer_1{margin:0!important}.devui-menu-vertical .layer_2>div.devui-submenu-title{margin:0!important;background:var(--devui-block, #ffffff)}.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon{margin:auto}.devui-menu-vertical.devui-menu-collapsed ul li{display:none!important}.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon{margin:auto}.devui-menu-vertical .devui-menu-item-vertical-wrapper{padding-left:0!important}.devui-menu-vertical .devui-menu-item{width:100%;height:40px;flex-grow:1;line-height:40px;cursor:pointer;color:var(--devui-menu-item);background:var(--devui-block, #ffffff);display:flex}.devui-menu-vertical .devui-menu-item span:nth-child(2){text-align:left}.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper){display:flex;flex:auto}.devui-menu-vertical .devui-menu-item:after{display:block;position:absolute;right:0;top:0;transform:scaleX(0);content:"";opacity:1;background:var(--devui-primary-hover, #5e7ce0)}.devui-menu-vertical ul.devui-submenu{margin:0;padding:0}.devui-menu-vertical ul.devui-submenu .devui-menu-item{display:flex;background:var(--devui-area, #f8f8f8)}.devui-menu-vertical ul.devui-submenu .devui-menu-item>span{flex:auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title{display:flex;cursor:pointer;width:100%;height:40px;margin:4px 0;line-height:40px;padding-left:18px;align-items:center;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:nth-child(1){font-size:var(--devui-font-size-lg, 14px)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content{font-size:var(--devui-font-size-lg, 14px);flex:auto;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon{text-align:center}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened{transform:rotate(180deg)}.devui-menu-vertical ul.devui-submenu .devui-submenu-title:hover span{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover span{color:var(--devui-menu-item-hover)}.devui-menu-vertical ul.devui-submenu .devui-menu-item-select *{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical .devui-menu-item-select{background:var(--devui-primary-bg, #f2f5fc)!important;position:relative}.devui-menu-vertical .devui-menu-item-select span,.devui-menu-vertical .devui-menu-item-select a{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item-select:after{display:block;position:absolute;right:0;top:0;height:100%;width:4px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0);transform:scaleX(1)}.devui-menu-vertical .devui-menu-item:hover{color:var(--devui-menu-item-hover)}.devui-menu-vertical li.devui-menu-item,.devui-menu-vertical div.devui-submenu-title{white-space:nowrap;overflow:hidden}.devui-menu-vertical li.devui-menu-item span:nth-child(2),.devui-menu-vertical div.devui-submenu-title span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical li.devui-menu-item span:nth-child(2) span,.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span{overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical .devui-menu-item-isCollapsed{width:fit-content}.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon{margin:auto}.devui-menu-vertical ul li~ul>div{margin-top:0!important}.devui-menu-vertical .devui-menu-item-disabled *,.devui-menu-vertical .devui-submenu-disabled *{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important;background:var(--devui-block, #ffffff)!important}.devui-menu-vertical .devui-menu-item-disabled:after,.devui-menu-vertical .devui-submenu-disabled:after{content:unset}.devui-menu-icon+span{margin-left:10px}.devui-menu-item-disabled:hover,.devui-submenu-disabled:hover{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}.devui-submenu-disabled:hover span{color:var(--devui-menu-disabled)!important}.fade-enter-active,.fade-leave-active{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.fade-leave-to{display:none}.fade-enter-from,.fade-leave-to{opacity:0}.devui-menu-item-disabled,.devui-menu-item-disabled.devui-menu-vertical .devui-menu-item-disabled.devui-menu-item-select .devui-submenu-disabled,.devui-submenu-disabled.devui-menu-vertical,.devui-submenu-disabled.devui-menu-item-select{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}