@ebrains/vue 0.7.0-alpha.0 → 0.8.0-alpha.0

package/eds-dropdown.entry-CMK8E_J2.mjs

@@ -1,83 +0,0 @@
-import { r as s, c as i, h as o, g as n } from "./index-E1PpO1J3.mjs";
-import { s as d } from "./analytics-44b1416b-3vYuu4Xs.mjs";
-const r = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}", a = r, l = class {
-  constructor(e) {
-    s(this, e), this.dropdown = i(this, "dropdown", 7), this.focusableItems = [], this.handleClick = () => {
-      var t;
-      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown(), this.dropdown.emit({ expanded: this.isOpen }), d({
-        category: "ui-component",
-        parentContext: null,
-        tag: this.host.tagName.toLowerCase(),
-        name: ((t = this.label) === null || t === void 0 ? void 0 : t.toLowerCase()) || "",
-        action: this.isOpen ? "expanded" : "collapsed"
-      });
-    }, this.icon = "chevron-down", this.label = void 0, this.rounded = !1, this.ariaLabel = "Open dropdown", this.asNav = !0, this.dropdownPos = "left", this.dropdownOffset = !0, this.intent = "tertiary", this.isOpen = !1, this.focusIndex = -1;
-  }
-  /**
-   * Closes the dropdown when a click occurs outside of it.
-   * @param {Event} e - The click event.
-   */
-  handleWindowClick(e) {
-    this.host.contains(e.target) || (this.closeDropdown(), this.dropdown.emit({ expanded: !1 }));
-  }
-  /**
-   * Handles keyboard navigation and accessibility within the dropdown.
-   * @param {KeyboardEvent} event - The keyboard event.
-   */
-  handleKeyDown(e) {
-    if (this.isOpen)
-      switch (e.key) {
-        case "Tab":
-          this.closeDropdown(), this.dropdown.emit({ expanded: !1 });
-          break;
-        case "ArrowUp":
-          e.preventDefault(), this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length, this.focusItem();
-          break;
-        case "ArrowDown":
-          e.preventDefault(), this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length, this.focusItem();
-          break;
-      }
-  }
-  /**
-   * Closes the dropdown and resets focus.
-   */
-  closeDropdown() {
-    this.isOpen = !1, this.focusIndex = -1, this.dropdown.emit({ expanded: !1 });
-  }
-  /**
-   * Sets focus on the currently selected item in the dropdown.
-   */
-  focusItem() {
-    var e;
-    (e = this.focusableItems[this.focusIndex]) === null || e === void 0 || e.focus();
-  }
-  /**
-   * Lifecycle method that runs after the component has been added to the DOM.
-   * Initializes focusable items within the dropdown.
-   */
-  componentDidLoad() {
-    var e;
-    this.focusableItems = Array.from(((e = this.dropdownContent) === null || e === void 0 ? void 0 : e.querySelectorAll("a, button")) || []);
-  }
-  /**
-   * Renders the dropdown component and displays its content when open.
-   * @returns {JSX.Element} The rendered dropdown component.
-   */
-  render() {
-    return o("div", { key: "3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0", class: "z-focus relative", ref: (e) => this.dropdownContent = e }, o("eds-button", { key: "7c69acb6d6213af2cec8c1e00c68d83a5d23d676", label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), o("nav", { key: "5048b1c3cb42418736d471c2331330afef49cbc5", role: "menu", class: {
-      "shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8": !0,
-      "left-4": this.dropdownPos === "left" && this.dropdownOffset,
-      "left-0": this.dropdownPos === "left" && !this.dropdownOffset,
-      "right-4": this.dropdownPos === "right" && this.dropdownOffset,
-      "right-0": this.dropdownPos === "right" && !this.dropdownOffset,
-      "rounded-lg": this.rounded
-    }, style: { display: this.isOpen ? "block" : "none" }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, o("slot", { key: "842f316e9a7910aa8b34823e883c54c1979668d1" })));
-  }
-  get host() {
-    return n(this);
-  }
-};
-l.style = a;
-export {
-  l as eds_dropdown
-};

package/eds-dropdown.entry-FqX7fOIb.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-D4alMZtT.js"),i=require("./analytics-44b1416b-ol77SdQE.js"),n=".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}",d=n,s=class{constructor(e){t.registerInstance(this,e),this.dropdown=t.createEvent(this,"dropdown",7),this.focusableItems=[],this.handleClick=()=>{var o;this.isOpen=!this.isOpen,this.isOpen?(this.focusIndex=0,this.focusItem()):this.closeDropdown(),this.dropdown.emit({expanded:this.isOpen}),i.sendAnalytics({category:"ui-component",parentContext:null,tag:this.host.tagName.toLowerCase(),name:((o=this.label)===null||o===void 0?void 0:o.toLowerCase())||"",action:this.isOpen?"expanded":"collapsed"})},this.icon="chevron-down",this.label=void 0,this.rounded=!1,this.ariaLabel="Open dropdown",this.asNav=!0,this.dropdownPos="left",this.dropdownOffset=!0,this.intent="tertiary",this.isOpen=!1,this.focusIndex=-1}handleWindowClick(e){this.host.contains(e.target)||(this.closeDropdown(),this.dropdown.emit({expanded:!1}))}handleKeyDown(e){if(this.isOpen)switch(e.key){case"Tab":this.closeDropdown(),this.dropdown.emit({expanded:!1});break;case"ArrowUp":e.preventDefault(),this.focusIndex=(this.focusIndex-1+this.focusableItems.length)%this.focusableItems.length,this.focusItem();break;case"ArrowDown":e.preventDefault(),this.focusIndex=(this.focusIndex+1)%this.focusableItems.length,this.focusItem();break}}closeDropdown(){this.isOpen=!1,this.focusIndex=-1,this.dropdown.emit({expanded:!1})}focusItem(){var e;(e=this.focusableItems[this.focusIndex])===null||e===void 0||e.focus()}componentDidLoad(){var e;this.focusableItems=Array.from(((e=this.dropdownContent)===null||e===void 0?void 0:e.querySelectorAll("a, button"))||[])}render(){return t.h("div",{key:"3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0",class:"z-focus relative",ref:e=>this.dropdownContent=e},t.h("eds-button",{key:"7c69acb6d6213af2cec8c1e00c68d83a5d23d676",label:this.label,"aria-label":this.ariaLabel,icon:this.icon,intent:this.intent,onClick:this.handleClick,"aria-expanded":this.isOpen.toString(),"aria-haspopup":"menu"}),t.h("nav",{key:"5048b1c3cb42418736d471c2331330afef49cbc5",role:"menu",class:{"shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8":!0,"left-4":this.dropdownPos==="left"&&this.dropdownOffset,"left-0":this.dropdownPos==="left"&&!this.dropdownOffset,"right-4":this.dropdownPos==="right"&&this.dropdownOffset,"right-0":this.dropdownPos==="right"&&!this.dropdownOffset,"rounded-lg":this.rounded},style:{display:this.isOpen?"block":"none"},"aria-label":"Dropdown","aria-hidden":!this.isOpen},t.h("slot",{key:"842f316e9a7910aa8b34823e883c54c1979668d1"})))}get host(){return t.getElement(this)}};s.style=d;exports.eds_dropdown=s;