@studiometa/ui 0.2.2 → 0.2.5

package/molecules/Accordion/AccordionItem.cjs

@@ -2,74 +2,34 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // packages/ui/molecules/Accordion/AccordionItem.js
 var AccordionItem_exports = {};
 __export(AccordionItem_exports, {
   default: () => AccordionItem
 });
+module.exports = __toCommonJS(AccordionItem_exports);
 var import_deepmerge = __toESM(require("deepmerge"), 1);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
@@ -94,7 +54,7 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     this.$refs.content.setAttribute("id", this.contentId);
     const { isOpen } = this.$options;
     this.updateAttributes(isOpen);
-    const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+    const { container, ...otherStyles } = this.$options.styles;
     const refs = this.$refs;
     Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
       (0, import_utils.transition)(refs[refName], { to: isOpen ? open : closed }, "keep");
@@ -120,69 +80,65 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
     this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
   }
-  open() {
-    return __async(this, null, function* () {
-      if (this.$options.isOpen) {
-        return;
-      }
-      this.$log("open");
-      this.$emit("open");
-      this.$options.isOpen = true;
-      this.updateAttributes(this.$options.isOpen);
-      this.$refs.container.style.visibility = "";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        (0, import_utils.transition)(refs.container, {
-          from: { height: "0" },
-          active: container.active,
-          to: { height: `${refs.content.offsetHeight}px` }
-        }).then(() => {
-          if (this.$options.isOpen) {
-            refs.content.style.position = "";
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-          from: closed,
-          active,
-          to: open
-        }, "keep"))
-      ]);
-    });
+  async open() {
+    if (this.$options.isOpen) {
+      return;
+    }
+    this.$log("open");
+    this.$emit("open");
+    this.$options.isOpen = true;
+    this.updateAttributes(this.$options.isOpen);
+    this.$refs.container.style.visibility = "";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      (0, import_utils.transition)(refs.container, {
+        from: { height: "0" },
+        active: container.active,
+        to: { height: `${refs.content.offsetHeight}px` }
+      }).then(() => {
+        if (this.$options.isOpen) {
+          refs.content.style.position = "";
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: closed,
+        active,
+        to: open
+      }, "keep"))
+    ]);
   }
-  close() {
-    return __async(this, null, function* () {
-      if (!this.$options.isOpen) {
-        return;
-      }
-      this.$log("close");
-      this.$emit("close");
-      this.$options.isOpen = false;
-      const height = this.$refs.container.offsetHeight;
-      this.$refs.content.style.position = "absolute";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        (0, import_utils.transition)(refs.container, {
-          from: { height: `${height}px` },
-          active: container.active,
-          to: { height: "0" }
-        }).then(() => {
-          if (!this.$options.isOpen) {
-            refs.container.style.height = "0";
-            refs.container.style.visibility = "invisible";
-            this.updateAttributes(this.$options.isOpen);
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-          from: open,
-          active,
-          to: closed
-        }, "keep"))
-      ]);
-    });
+  async close() {
+    if (!this.$options.isOpen) {
+      return;
+    }
+    this.$log("close");
+    this.$emit("close");
+    this.$options.isOpen = false;
+    const height = this.$refs.container.offsetHeight;
+    this.$refs.content.style.position = "absolute";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      (0, import_utils.transition)(refs.container, {
+        from: { height: `${height}px` },
+        active: container.active,
+        to: { height: "0" }
+      }).then(() => {
+        if (!this.$options.isOpen) {
+          refs.container.style.height = "0";
+          refs.container.style.visibility = "invisible";
+          this.updateAttributes(this.$options.isOpen);
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: open,
+        active,
+        to: closed
+      }, "keep"))
+    ]);
   }
 };
 var AccordionItem = _AccordionItem;
@@ -200,9 +156,9 @@ __publicField(AccordionItem, "config", {
           active: "",
           closed: ""
         }
-      })
+      }),
+      merge: true
     }
   }
 });
-module.exports = __toCommonJS(AccordionItem_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/AccordionItem.d.ts

@@ -52,6 +52,7 @@ export default class AccordionItem extends Base {
                  * @return {AccordionItemStylesOption}
                  */
                 default: () => AccordionItemStylesOption;
+                merge: boolean;
             };
         };
     };
@@ -59,17 +60,17 @@ export default class AccordionItem extends Base {
      * Add aria-attributes on mounted.
      * @this {AccordionItemInterface}
      */
-    mounted(): void;
+    mounted(this: AccordionItemInterface): void;
     /**
      * Remove styles on destroy.
      * @this {AccordionItemInterface}
      */
-    destroyed(): void;
+    destroyed(this: AccordionItemInterface): void;
     /**
      * Handler for the click event on the `btn` ref.
      * @this {AccordionItemInterface}
      */
-    onBtnClick(): void;
+    onBtnClick(this: AccordionItemInterface): void;
     /**
      * Get the content ID.
      * @return {String}
@@ -81,17 +82,17 @@ export default class AccordionItem extends Base {
      * @this {AccordionItemInterface}
      * @param  {Boolean} isOpen The state of the item.
      */
-    updateAttributes(isOpen: boolean): void;
+    updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
     /**
      * Open an item.
      * @this {AccordionItemInterface}
      */
-    open(): Promise<void>;
+    open(this: AccordionItemInterface): Promise<void>;
     /**
      * Close an item.
      * @this {AccordionItemInterface}
      */
-    close(): Promise<void>;
+    close(this: AccordionItemInterface): Promise<void>;
 }
 export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;

package/molecules/Accordion/AccordionItem.js

@@ -1,178 +1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import deepmerge from "deepmerge";
-import { Base } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
-import Accordion from "./AccordionCore.js";
-const _AccordionItem = class extends Base {
-  mounted() {
-    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
-      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
-        if (key in this.$options) {
-          const type = _AccordionItem.config.options[key].type || _AccordionItem.config.options[key];
-          if (type === Array || type === Object) {
-            this.$options[key] = deepmerge(this.$options[key], value);
-          } else {
-            this.$options[key] = value;
-          }
-        }
-      });
-    }
-    this.$refs.btn.setAttribute("id", this.$id);
-    this.$refs.btn.setAttribute("aria-controls", this.contentId);
-    this.$refs.content.setAttribute("aria-labelledby", this.$id);
-    this.$refs.content.setAttribute("id", this.contentId);
-    const { isOpen } = this.$options;
-    this.updateAttributes(isOpen);
-    const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-    const refs = this.$refs;
-    Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
-      transition(refs[refName], { to: isOpen ? open : closed }, "keep");
-    });
-  }
-  destroyed() {
-    this.$refs.container.style.visibility = "";
-    this.$refs.container.style.height = "";
-  }
-  onBtnClick() {
-    if (this.$options.isOpen) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-  get contentId() {
-    return `content-${this.$id}`;
-  }
-  updateAttributes(isOpen) {
-    this.$refs.container.style.visibility = isOpen ? "" : "invisible";
-    this.$refs.container.style.height = isOpen ? "" : "0";
-    this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
-    this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
-  }
-  open() {
-    return __async(this, null, function* () {
-      if (this.$options.isOpen) {
-        return;
-      }
-      this.$log("open");
-      this.$emit("open");
-      this.$options.isOpen = true;
-      this.updateAttributes(this.$options.isOpen);
-      this.$refs.container.style.visibility = "";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        transition(refs.container, {
-          from: { height: "0" },
-          active: container.active,
-          to: { height: `${refs.content.offsetHeight}px` }
-        }).then(() => {
-          if (this.$options.isOpen) {
-            refs.content.style.position = "";
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
-          from: closed,
-          active,
-          to: open
-        }, "keep"))
-      ]);
-    });
-  }
-  close() {
-    return __async(this, null, function* () {
-      if (!this.$options.isOpen) {
-        return;
-      }
-      this.$log("close");
-      this.$emit("close");
-      this.$options.isOpen = false;
-      const height = this.$refs.container.offsetHeight;
-      this.$refs.content.style.position = "absolute";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        transition(refs.container, {
-          from: { height: `${height}px` },
-          active: container.active,
-          to: { height: "0" }
-        }).then(() => {
-          if (!this.$options.isOpen) {
-            refs.container.style.height = "0";
-            refs.container.style.visibility = "invisible";
-            this.updateAttributes(this.$options.isOpen);
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
-          from: open,
-          active,
-          to: closed
-        }, "keep"))
-      ]);
-    });
-  }
-};
-let AccordionItem = _AccordionItem;
-__publicField(AccordionItem, "config", {
-  name: "AccordionItem",
-  refs: ["btn", "content", "container"],
-  emits: ["open", "close"],
-  options: {
-    isOpen: Boolean,
-    styles: {
-      type: Object,
-      default: () => ({
-        container: {
-          open: "",
-          active: "",
-          closed: ""
-        }
-      })
-    }
-  }
-});
-export {
-  AccordionItem as default
-};
+import a from"deepmerge";import{Base as l}from"@studiometa/js-toolkit";import{transition as r}from"@studiometa/js-toolkit/utils";import f from"./AccordionCore.js";class c extends l{static config={name:"AccordionItem",refs:["btn","content","container"],emits:["open","close"],options:{isOpen:Boolean,styles:{type:Object,default:()=>({container:{open:"",active:"",closed:""}}),merge:!0}}};mounted(){this.$parent&&this.$parent instanceof f&&this.$parent.$options.item&&Object.entries(this.$parent.$options.item).forEach(([t,o])=>{if(t in this.$options){const n=c.config.options[t].type||c.config.options[t];n===Array||n===Object?this.$options[t]=a(this.$options[t],o):this.$options[t]=o}}),this.$refs.btn.setAttribute("id",this.$id),this.$refs.btn.setAttribute("aria-controls",this.contentId),this.$refs.content.setAttribute("aria-labelledby",this.$id),this.$refs.content.setAttribute("id",this.contentId);const{isOpen:i}=this.$options;this.updateAttributes(i);const{container:h,...s}=this.$options.styles,e=this.$refs;Object.entries(s).filter(([t])=>e[t]).forEach(([t,{open:o,closed:n}={open:"",closed:""}])=>{r(e[t],{to:i?o:n},"keep")})}destroyed(){this.$refs.container.style.visibility="",this.$refs.container.style.height=""}onBtnClick(){this.$options.isOpen?this.close():this.open()}get contentId(){return`content-${this.$id}`}updateAttributes(i){this.$refs.container.style.visibility=i?"":"invisible",this.$refs.container.style.height=i?"":"0",this.$refs.content.setAttribute("aria-hidden",i?"false":"true"),this.$refs.btn.setAttribute("aria-expanded",i?"true":"false")}async open(){if(this.$options.isOpen)return;this.$log("open"),this.$emit("open"),this.$options.isOpen=!0,this.updateAttributes(this.$options.isOpen),this.$refs.container.style.visibility="";const{container:i,...h}=this.$options.styles,s=this.$refs;await Promise.all([r(s.container,{from:{height:"0"},active:i.active,to:{height:`${s.content.offsetHeight}px`}}).then(()=>(this.$options.isOpen&&(s.content.style.position=""),Promise.resolve())),...Object.entries(h).filter(([e])=>s[e]).map(([e,{open:t,active:o,closed:n}={open:"",active:"",closed:""}])=>r(s[e],{from:n,active:o,to:t},"keep"))])}async close(){if(!this.$options.isOpen)return;this.$log("close"),this.$emit("close"),this.$options.isOpen=!1;const i=this.$refs.container.offsetHeight;this.$refs.content.style.position="absolute";const{container:h,...s}=this.$options.styles,e=this.$refs;await Promise.all([r(e.container,{from:{height:`${i}px`},active:h.active,to:{height:"0"}}).then(()=>(this.$options.isOpen||(e.container.style.height="0",e.container.style.visibility="invisible",this.updateAttributes(this.$options.isOpen)),Promise.resolve())),...Object.entries(s).filter(([t])=>e[t]).map(([t,{open:o,active:n,closed:p}={open:"",active:"",closed:""}])=>r(e[t],{from:o,active:n,to:p},"keep"))])}}export{c as default};

package/molecules/Menu/Menu.cjs

@@ -0,0 +1,148 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Menu/Menu.js
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
+var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
+var _Menu = class extends import_js_toolkit.Base {
+  getDirectChildren(name) {
+    if (!this.$children[name]) {
+      return [];
+    }
+    if (!this.$children.Menu) {
+      return this.$children[name];
+    }
+    return this.$children[name].filter((child) => this.$children.Menu.every((menu) => menu.$children[name] ? !menu.$children[name].includes(child) : true));
+  }
+  get menuList() {
+    return this.getDirectChildren("MenuList")[0];
+  }
+  get menuBtn() {
+    return this.getDirectChildren("MenuBtn")[0];
+  }
+  get shouldReactOnClick() {
+    return this.$options.mode === "click";
+  }
+  get isHover() {
+    return this.menuBtn.isHover || this.menuList.isHover;
+  }
+  mounted() {
+    if (!this.menuBtn || !this.menuList) {
+      this.$destroy();
+      return;
+    }
+    this.menuBtn.$el.setAttribute("aria-controls", this.$id);
+    this.menuList.$el.setAttribute("id", this.$id);
+    this.menuList.close();
+  }
+  keyed({ ENTER, ESC, isUp }) {
+    if (!isUp) {
+      return;
+    }
+    if (ESC) {
+      this.close();
+      return;
+    }
+    if (!this.shouldReactOnClick) {
+      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;
+      if (ENTER && hasFocusElementWithin) {
+        this.toggle();
+      }
+    }
+  }
+  onMenuBtnBtnClick(event, index) {
+    if (this.$children.MenuBtn[index] === this.menuBtn && this.shouldReactOnClick) {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+  onMenuBtnBtnMouseenter(event, index) {
+    if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
+      this.open();
+    }
+  }
+  onMenuBtnBtnMouseleave() {
+    if (this.shouldReactOnClick) {
+      return;
+    }
+    (0, import_utils.nextTick)(() => {
+      if (!this.isHover) {
+        this.close();
+      }
+    });
+  }
+  onMenuListItemsMouseleave() {
+    if (this.shouldReactOnClick) {
+      return;
+    }
+    (0, import_utils.nextTick)(() => {
+      if (!this.isHover) {
+        this.close();
+      }
+    });
+  }
+  onMenuListItemsOpen(index) {
+    const targetMenu = this.$children.MenuList[index];
+    this.$children.MenuList.forEach((menuItem) => {
+      if (!menuItem.$el.contains(targetMenu.$el)) {
+        menuItem.close();
+      }
+    });
+  }
+  close() {
+    this.menuList.close();
+  }
+  open() {
+    this.menuList.open();
+  }
+  toggle() {
+    this.menuList.toggle();
+  }
+};
+var Menu = _Menu;
+__publicField(Menu, "config", {
+  name: "Menu",
+  debug: true,
+  components: {
+    MenuBtn: import_MenuBtn.default,
+    MenuList: import_MenuList.default,
+    Menu: _Menu
+  },
+  options: {
+    mode: {
+      type: String,
+      default: "click"
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;