@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/{NcBreadcrumbs-N7-Jj_ry.mjs → NcBreadcrumbs-ozezYXlM.mjs}

@@ -1,15 +1,15 @@
-import "../assets/NcBreadcrumbs-liWjT068.css";
-import { N as D } from "./NcActions-6Yv0De7D.mjs";
-import { N as v } from "./NcActionButton-TAhaLmwa.mjs";
-import { N as $ } from "./NcActionRouter-vBYCxyc1.mjs";
-import { N as _ } from "./NcActionLink-YllmwOrF.mjs";
-import { N as y } from "./NcBreadcrumb-gB_hnDG_.mjs";
-import { i as I } from "./NcButton-nCkJxwsi.mjs";
-import { subscribe as z, unsubscribe as R } from "@nextcloud/event-bus";
-import { openBlock as b, createElementBlock as p, mergeProps as E, createElementVNode as C, toDisplayString as k, createCommentVNode as A, Fragment as S, cloneVNode as L, h as c } from "vue";
-import { _ as B } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-import x from "debounce";
-const P = {
+import "../assets/NcBreadcrumbs-VKFJ9HrE.css";
+import { N as C } from "./NcActions-76CtOBCq.mjs";
+import { N as w } from "./NcActionButton-VnbqrtOY.mjs";
+import { N as B } from "./NcActionRouter-BsOXVKlY.mjs";
+import { N as R } from "./NcActionLink-pscYsQ_3.mjs";
+import { N as W } from "./NcBreadcrumb-Fr7J33Qv.mjs";
+import { i as k } from "./NcButton-YOXv3gFY.mjs";
+import { subscribe as A, unsubscribe as S } from "@nextcloud/event-bus";
+import { openBlock as y, createElementBlock as L, mergeProps as x, createElementVNode as P, toDisplayString as T, createCommentVNode as M, Fragment as V, cloneVNode as N, h } from "vue";
+import { _ as I } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import q from "debounce";
+const F = {
   name: "FolderIcon",
   emits: ["click"],
   props: {
@@ -25,37 +25,37 @@ const P = {
       default: 24
     }
   }
-}, T = ["aria-hidden", "aria-label"], M = ["fill", "width", "height"], V = { d: "M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" }, q = { key: 0 };
-function F(e, r, t, o, s, n) {
-  return b(), p("span", E(e.$attrs, {
-    "aria-hidden": !t.title,
+}, H = ["aria-hidden", "aria-label"], O = ["fill", "width", "height"], U = { d: "M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" }, Z = { key: 0 };
+function j(e, r, t, n, a, o) {
+  return y(), L("span", x(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon folder-icon",
     role: "img",
-    onClick: r[0] || (r[0] = (a) => e.$emit("click", a))
+    onClick: r[0] || (r[0] = (u) => e.$emit("click", u))
   }), [
-    (b(), p("svg", {
+    (y(), L("svg", {
       fill: t.fillColor,
       class: "material-design-icon__svg",
       width: t.size,
       height: t.size,
       viewBox: "0 0 24 24"
     }, [
-      C("path", V, [
-        t.title ? (b(), p("title", q, k(t.title), 1)) : A("", !0)
+      P("path", U, [
+        t.title ? (y(), L("title", Z, T(t.title), 1)) : M("", !0)
       ])
-    ], 8, M))
-  ], 16, T);
+    ], 8, O))
+  ], 16, H);
 }
-const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
+const D = /* @__PURE__ */ I(F, [["render", j]]), s = "vue-crumb", G = {
   name: "NcBreadcrumbs",
   components: {
-    NcActions: D,
-    NcActionButton: v,
-    NcActionRouter: $,
-    NcActionLink: _,
-    NcBreadcrumb: y,
-    IconFolder: w
+    NcActions: C,
+    NcActionButton: w,
+    NcActionRouter: B,
+    NcActionLink: R,
+    NcBreadcrumb: W,
+    IconFolder: D
   },
   props: {
     /**
@@ -94,13 +94,13 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
         // Is the menu open or not
         open: !1
       },
-      breadcrumbsRefs: {}
+      breadcrumbsRefs: []
     };
   },
   created() {
-    window.addEventListener("resize", x(() => {
+    window.addEventListener("resize", q(() => {
       this.handleWindowResize();
-    }, 100)), z("navigation-toggled", this.delayedResize);
+    }, 100)), A("navigation-toggled", this.delayedResize);
   },
   mounted() {
     this.handleWindowResize();
@@ -111,7 +111,7 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
     });
   },
   beforeUnmount() {
-    window.removeEventListener("resize", this.handleWindowResize), R("navigation-toggled", this.delayedResize);
+    window.removeEventListener("resize", this.handleWindowResize), S("navigation-toggled", this.delayedResize);
   },
   methods: {
     /**
@@ -133,20 +133,21 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      * if we overflow otherwise.
      */
     handleWindowResize() {
+      var m;
       if (!this.$refs.container)
         return;
-      const e = Object.values(this.breadcrumbsRefs), r = e.length, t = [], o = this.$refs.container.offsetWidth;
-      let s = this.getTotalWidth(e);
-      this.$refs.breadcrumb__actions && (s += this.$refs.breadcrumb__actions.offsetWidth);
-      let n = s - o;
-      n += n > 0 ? 64 : 0;
-      let a = 0;
-      const l = Math.floor(r / 2);
-      for (; n > 0 && a < r - 2; ) {
-        const d = l + (a % 2 ? a + 1 : a) / 2 * Math.pow(-1, a + r % 2);
-        n -= this.getWidth(e[d]?.$el, d === e.length - 1), t.push(d), a++;
+      const e = this.breadcrumbsRefs.length, r = [], t = this.$refs.container.offsetWidth;
+      let n = this.getTotalWidth();
+      this.$refs.breadcrumb__actions && (n += this.$refs.breadcrumb__actions.offsetWidth);
+      let a = n - t;
+      a += a > 0 ? 64 : 0;
+      let o = 0;
+      const u = Math.floor(e / 2);
+      for (; a > 0 && o < e - 2; ) {
+        const d = u + (o % 2 ? o + 1 : o) / 2 * Math.pow(-1, o + e % 2);
+        a -= this.getWidth((m = this.breadcrumbsRefs[d]) == null ? void 0 : m.$el, d === this.breadcrumbsRefs.length - 1), r.push(d), o++;
       }
-      this.arraysEqual(this.hiddenIndices, t.sort((d, h) => d - h)) || (this.hiddenIndices = t);
+      this.arraysEqual(this.hiddenIndices, r.sort((d, p) => d - p)) || (this.hiddenIndices = r);
     },
     /**
      * Checks if two arrays are equal.
@@ -171,11 +172,10 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
     /**
      * Calculates the total width of all breadcrumbs
      *
-     * @param {Array} breadcrumbs All breadcrumbs
      * @return {number} The total width
      */
-    getTotalWidth(e) {
-      return e.reduce((r, t, o) => r + this.getWidth(t?.$el, o === e.length - 1), 0);
+    getTotalWidth() {
+      return this.breadcrumbsRefs.reduce((e, r, t) => e + this.getWidth(r.$el, t === this.breadcrumbsRefs.length - 1), 0);
     },
     /**
      * Calculates the width of the provided element
@@ -185,12 +185,12 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      * @return {number} The width
      */
     getWidth(e, r) {
-      if (!e?.classList)
+      if (!(e != null && e.classList))
         return 0;
-      const t = e.classList.contains(`${i}--hidden`);
-      e.style.minWidth = "auto", r && (e.style.maxWidth = "210px"), e.classList.remove(`${i}--hidden`);
-      const o = e.offsetWidth;
-      return t && e.classList.add(`${i}--hidden`), e.style.minWidth = "", e.style.maxWidth = "", o;
+      const t = e.classList.contains("".concat(s, "--hidden"));
+      e.style.minWidth = "auto", r && (e.style.maxWidth = "210px"), e.classList.remove("".concat(s, "--hidden"));
+      const n = e.offsetWidth;
+      return t && e.classList.add("".concat(s, "--hidden")), e.style.minWidth = "", e.style.maxWidth = "", n;
     },
     /**
      * Prevents the default of a provided event
@@ -220,8 +220,8 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      * @return {boolean}
      */
     dropped(e, r, t) {
-      return t || this.$emit("dropped", e, r), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(`.${i}`).forEach((s) => {
-        s.classList.remove(`${i}--hovered`);
+      return t || this.$emit("dropped", e, r), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(".".concat(s)).forEach((a) => {
+        a.classList.remove("".concat(s, "--hovered"));
       }), this.preventDefault(e);
     },
     /**
@@ -241,10 +241,10 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      */
     dragEnter(e, r) {
       if (!r && e.target.closest) {
-        const t = e.target.closest(`.${i}`);
-        t.classList && t.classList.contains(i) && (document.querySelectorAll(`.${i}`).forEach((s) => {
-          s.classList.remove(`${i}--hovered`);
-        }), t.classList.add(`${i}--hovered`));
+        const t = e.target.closest(".".concat(s));
+        t.classList && t.classList.contains(s) && (document.querySelectorAll(".".concat(s)).forEach((a) => {
+          a.classList.remove("".concat(s, "--hovered"));
+        }), t.classList.add("".concat(s, "--hovered")));
       }
     },
     /**
@@ -255,10 +255,10 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      */
     dragLeave(e, r) {
       if (!r && !e.target.contains(e.relatedTarget) && e.target.closest) {
-        const t = e.target.closest(`.${i}`);
+        const t = e.target.closest(".".concat(s));
         if (t.contains(e.relatedTarget))
           return;
-        t.classList && t.classList.contains(i) && t.classList.remove(`${i}--hovered`);
+        t.classList && t.classList.contains(s) && t.classList.remove("".concat(s, "--hovered"));
       }
     },
     /**
@@ -266,12 +266,14 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
      * add it to the array of all crumbs.
      */
     hideCrumbs() {
-      Object.values(this.breadcrumbsRefs).forEach((r, t) => {
-        r?.$el?.classList && (this.hiddenIndices.includes(t) ? r.$el.classList.add(`${i}--hidden`) : r.$el.classList.remove(`${i}--hidden`));
+      this.breadcrumbsRefs.forEach((e, r) => {
+        var t;
+        (t = e == null ? void 0 : e.$el) != null && t.classList && (this.hiddenIndices.includes(r) ? e.$el.classList.add("".concat(s, "--hidden")) : e.$el.classList.remove("".concat(s, "--hidden")));
       });
     },
     isBreadcrumb(e) {
-      return e?.type?.name === "NcBreadcrumb";
+      var r;
+      return ((r = e == null ? void 0 : e.type) == null ? void 0 : r.name) === "NcBreadcrumb";
     }
   },
   /**
@@ -280,32 +282,36 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
    * @return {object|undefined} The created VNode
    */
   render() {
+    var a, o, u, m, d, p;
     let e = [];
-    if (this.$slots.default?.().forEach((s) => {
-      if (this.isBreadcrumb(s)) {
-        e.push(s);
+    if ((o = (a = this.$slots).default) == null || o.call(a).forEach((i) => {
+      var c, l;
+      if (this.isBreadcrumb(i)) {
+        e.push(i);
         return;
       }
-      s?.type === S && s?.children?.forEach?.((n) => {
-        this.isBreadcrumb(n) && e.push(n);
-      });
+      (i == null ? void 0 : i.type) === V && ((l = (c = i == null ? void 0 : i.children) == null ? void 0 : c.forEach) == null || l.call(c, (f) => {
+        this.isBreadcrumb(f) && e.push(f);
+      }));
     }), e.length === 0)
       return;
-    e[0] = L(e[0], {
+    e[0] = N(e[0], {
       icon: this.rootIcon,
       ref: "breadcrumbs"
     });
-    const r = {};
-    e = e.map((s, n) => L(s, {
-      ref: (a) => {
-        r[n] = a;
+    const r = [];
+    e = e.map((i, c) => N(i, {
+      ref: (l) => {
+        r[c] = l;
       }
     }));
-    let t = [];
-    if (!this.hiddenIndices.length)
-      t = e;
-    else {
-      t = e.slice(0, Math.round(e.length / 2)), t.push(c(y, {
+    const t = [...e];
+    this.hiddenIndices.length && t.splice(
+      Math.round(e.length / 2),
+      0,
+      // The Actions menu
+      // Use a breadcrumb component for the hidden breadcrumbs
+      h(W, {
         class: "dropdown",
         ...this.menuBreadcrumbProps,
         // Hide the dropdown menu from screen-readers,
@@ -321,57 +327,55 @@ const w = /* @__PURE__ */ B(P, [["render", F]]), i = "vue-crumb", O = {
         onDragleave: this.closeActions,
         // Make sure we keep the same open state
         // as the Actions component
-        "onUpdate:open": (n) => {
-          this.menuBreadcrumbProps.open = n;
+        "onUpdate:open": (i) => {
+          this.menuBreadcrumbProps.open = i;
         }
         // Add all hidden breadcrumbs as ActionRouter or ActionLink
       }, {
-        default: () => this.hiddenIndices.map((n) => {
-          const a = e[n], {
+        default: () => this.hiddenIndices.map((i) => {
+          const c = e[i], {
             // Get the parameters from the breadcrumb component props
             to: l,
-            href: d,
-            disableDrop: h,
-            name: W,
+            href: f,
+            disableDrop: g,
+            name: z,
             // Props to forward
-            ...g
-          } = a.props;
-          delete g.ref;
-          let m = v, f = "";
-          d && (m = _, f = d), l && (m = $, f = l);
-          const N = c(w, {
+            ...v
+          } = c.props;
+          delete v.ref;
+          let $ = w, _ = "";
+          f && ($ = R, _ = f), l && ($ = B, _ = l);
+          const E = h(D, {
             size: 20
           });
-          return c(
-            m,
+          return h(
+            $,
             {
-              ...g,
-              class: i,
-              href: d || null,
+              ...v,
+              class: s,
+              href: f || null,
               to: l || null,
               // Prevent the breadcrumbs from being draggable
               draggable: !1,
               // Add the drag and drop handlers
               onDragstart: this.dragStart,
-              onDrop: (u) => this.dropped(u, f, h),
+              onDrop: (b) => this.dropped(b, _, g),
               onDragover: this.dragOver,
-              onDragenter: (u) => this.dragEnter(u, h),
-              onDragleave: (u) => this.dragLeave(u, h)
+              onDragenter: (b) => this.dragEnter(b, g),
+              onDragleave: (b) => this.dragLeave(b, g)
             },
             {
-              default: () => W,
-              icon: () => N
+              default: () => z,
+              icon: () => E
             }
           );
         })
-      }));
-      const s = e.slice(Math.round(e.length / 2));
-      t = t.concat(s);
-    }
-    const o = [c("nav", { "aria-label": this.ariaLabel }, [c("ul", { class: "breadcrumb__crumbs" }, [t])])];
-    return I(this.$slots.actions?.()) && o.push(c("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, this.$slots.actions?.())), this.breadcrumbsRefs = r, c("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === e.length - 2 }], ref: "container" }, o);
+      })
+    );
+    const n = [h("nav", { "aria-label": this.ariaLabel }, [h("ul", { class: "breadcrumb__crumbs" }, [t])])];
+    return k((m = (u = this.$slots).actions) == null ? void 0 : m.call(u)) && n.push(h("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, (p = (d = this.$slots).actions) == null ? void 0 : p.call(d))), this.breadcrumbsRefs = r, h("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === e.length - 2 }], ref: "container" }, n);
   }
-}, te = /* @__PURE__ */ B(O, [["__scopeId", "data-v-bc079cef"]]);
+}, ne = /* @__PURE__ */ I(G, [["__scopeId", "data-v-b6bfda76"]]);
 export {
-  te as N
+  ne as N
 };

package/dist/chunks/NcBreadcrumbs-ozezYXlM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBreadcrumbs-ozezYXlM.mjs","sources":["../../node_modules/vue-material-design-icons/Folder.vue","../../src/components/NcBreadcrumbs/NcBreadcrumbs.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component renders a breadcrumb bar. It adjusts to the available width\nby hiding breadcrumbs in a dropdown menu and emits an event when something\nis dropped on a creadcrumb.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"container\">\n\t\t\t<NcBreadcrumbs @dropped=\"dropped\">\n\t\t\t\t<NcBreadcrumb name=\"Home\"\n\t\t\t\t\ttitle=\"Title of the Home folder\"\n\t\t\t\t\thref=\"/\"\n\t\t\t\t\t@dropped=\"droppedOnCrumb\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<NcBreadcrumb name=\"Folder 1\"\n\t\t\t\t\ttitle=\"Folder 1\"\n\t\t\t\t\thref=\"/Folder 1\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 2\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2\"\n\t\t\t\t\t:disable-drop=\"true\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 3\"\n\t\t\t\t\ttitle=\"Folder 3\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 4\"\n\t\t\t\t\ttitle=\"Folder 4\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 5 with an overflowing long name\"\n\t\t\t\t\ttitle=\"Folder 5\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5\"\n\t\t\t\t\t:disable-drop=\"true\">\n\t\t\t\t\t<template #menu-icon>\n\t\t\t\t\t\t<MenuDown :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<NcActionButton @click=\"alert('Share')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tShare\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Download')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tNew\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t</NcBreadcrumbs>\n\t\t</div>\n\t\t<br />\n\t\t<div class=\"dragme\" draggable=\"true\" @dragstart=\"dragStart\">\n\t\t\t<span>Drag me onto the breadcrumbs.</span>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport Download from 'vue-material-design-icons/Download'\nimport Folder from 'vue-material-design-icons/Folder'\nimport MenuDown from 'vue-material-design-icons/MenuDown'\nimport Plus from 'vue-material-design-icons/Plus'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tDownload,\n\t\tFolder,\n\t\tMenuDown,\n\t\tPlus,\n\t\tShareVariant,\n\t},\n\tmethods: {\n\t\tdropped(e, path) {\n\t\t\talert('Global drop on ' + path)\n\t\t},\n\t\tdroppedOnCrumb(e, path) {\n\t\t\talert('Drop on crumb ' + path)\n\t\t},\n\t\tdragStart(e) {\n\t\t\te.dataTransfer.setData('text/plain', 'dragging')\n\t\t},\n\t}\n}\n</script>\n<style>\n.container {\n\tdisplay: inline-flex;\n\twidth: 100%;\n}\n\n.dragme {\n\tdisplay: block;\n\twidth: 100px;\n\theight: 44px;\n\tbackground-color: var(--color-background-dark);\n}\n</style>\n```\n</docs>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcBreadcrumb from '../NcBreadcrumb/index.js'\nimport isSlotPopulated from '../../utils/isSlotPopulated.ts'\n\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\n\nimport IconFolder from 'vue-material-design-icons/Folder.vue'\n\nimport debounce from 'debounce'\nimport { cloneVNode, h, Fragment } from 'vue'\n\nconst crumbClass = 'vue-crumb'\n\nexport default {\n\tname: 'NcBreadcrumbs',\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcActionRouter,\n\t\tNcActionLink,\n\t\tNcBreadcrumb,\n\t\tIconFolder,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Set a css icon-class for the icon of the root breadcrumb to be used.\n\t\t */\n\t\trootIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'icon-home',\n\t\t},\n\n\t\t/**\n\t\t * Set the aria-label of the nav element.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\temits: ['dropped'],\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Array to track the hidden breadcrumbs by their index.\n\t\t\t * Comparing two crumbs somehow does not work, so we use the indices.\n\t\t\t */\n\t\t\thiddenIndices: [],\n\n\t\t\t/**\n\t\t\t * This is the props of the middle Action menu\n\t\t\t * that show the ellipsised breadcrumbs\n\t\t\t */\n\t\t\tmenuBreadcrumbProps: {\n\t\t\t\t// Don't show a name for this breadcrumb, only the Actions menu\n\t\t\t\tname: '',\n\t\t\t\tforceMenu: true,\n\t\t\t\t// Don't allow dropping directly on the actions breadcrumb\n\t\t\t\tdisableDrop: true,\n\t\t\t\t// Is the menu open or not\n\t\t\t\topen: false,\n\t\t\t},\n\t\t\tbreadcrumbsRefs: [],\n\t\t}\n\t},\n\tcreated() {\n\t\t/**\n\t\t * Add a listener so the component reacts on resize\n\t\t */\n\t\twindow.addEventListener('resize', debounce(() => {\n\t\t\tthis.handleWindowResize()\n\t\t}, 100))\n\t\tsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\tmounted() {\n\t\tthis.handleWindowResize()\n\t},\n\tupdated() {\n\t\t/**\n\t\t * Check the size on update\n\t\t */\n\t\tthis.delayedResize()\n\t\t/**\n\t\t * Check that crumbs to hide are hidden\n\t\t */\n\t\tthis.$nextTick(() => {\n\t\t\tthis.hideCrumbs()\n\t\t})\n\t},\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('resize', this.handleWindowResize)\n\t\tunsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Close the actions menu\n\t\t *\n\t\t * @param {object} e The event\n\t\t */\n\t\tcloseActions(e) {\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.menuBreadcrumbProps.open = false\n\t\t},\n\t\t/**\n\t\t * Call the resize function after a delay\n\t\t */\n\t\t async delayedResize() {\n\t\t\tawait this.$nextTick()\n\t\t\tthis.handleWindowResize()\n\t\t},\n\t\t/**\n\t\t * Check the width of the breadcrumb and hide breadcrumbs\n\t\t * if we overflow otherwise.\n\t\t */\n\t\thandleWindowResize() {\n\t\t\t// If there is no container yet, we cannot determine its size\n\t\t\tif (!this.$refs.container) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst nrCrumbs = this.breadcrumbsRefs.length\n\t\t\tconst hiddenIndices = []\n\t\t\tconst availableWidth = this.$refs.container.offsetWidth\n\t\t\tlet totalWidth = this.getTotalWidth()\n\t\t\t// If we have breadcrumbs actions, we have to take their width into account too.\n\t\t\tif (this.$refs.breadcrumb__actions) {\n\t\t\t\ttotalWidth += this.$refs.breadcrumb__actions.offsetWidth\n\t\t\t}\n\t\t\tlet overflow = totalWidth - availableWidth\n\t\t\t// If we overflow, we have to take the action-item width into account as well.\n\t\t\toverflow += (overflow > 0) ? 64 : 0\n\t\t\tlet i = 0\n\t\t\t// We start hiding the breadcrumb in the center\n\t\t\tconst startIndex = Math.floor(nrCrumbs / 2)\n\t\t\t// Don't hide the first and last breadcrumb\n\t\t\twhile (overflow > 0 && i < nrCrumbs - 2) {\n\t\t\t\t// We hide elements alternating to the left and right\n\t\t\t\tconst currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2))\n\t\t\t\t// Calculate the remaining overflow width after hiding this breadcrumb\n\t\t\t\toverflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el, currentIndex === (this.breadcrumbsRefs.length - 1))\n\t\t\t\thiddenIndices.push(currentIndex)\n\t\t\t\ti++\n\t\t\t}\n\t\t\t// We only update the hidden crumbs if they have changed,\n\t\t\t// otherwise we will run into an infinite update loop.\n\t\t\tif (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {\n\t\t\t\tthis.hiddenIndices = hiddenIndices\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Checks if two arrays are equal.\n\t\t * Only works for primitive arrays, but that's enough here.\n\t\t *\n\t\t * @param {Array} a The first array\n\t\t * @param {Array} b The second array\n\t\t * @return {boolean} Wether the arrays are equal\n\t\t */\n\t\tarraysEqual(a, b) {\n\t\t\tif (a.length !== b.length) return false\n\t\t\tif (a === b) return true\n\t\t\tif (a === null || b === null) return false\n\n\t\t\tfor (let i = 0; i < a.length; ++i) {\n\t\t\t\tif (a[i] !== b[i]) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t/**\n\t\t * Calculates the total width of all breadcrumbs\n\t\t *\n\t\t * @return {number} The total width\n\t\t */\n\t\tgetTotalWidth() {\n\t\t\treturn this.breadcrumbsRefs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el, index === (this.breadcrumbsRefs.length - 1)), 0)\n\t\t},\n\t\t/**\n\t\t * Calculates the width of the provided element\n\t\t *\n\t\t * @param {object} el The element\n\t\t * @param {boolean} isLast Is this the last crumb\n\t\t * @return {number} The width\n\t\t */\n\t\tgetWidth(el, isLast) {\n\t\t\tif (!el?.classList) return 0\n\t\t\tconst hide = el.classList.contains(`${crumbClass}--hidden`)\n\t\t\tel.style.minWidth = 'auto'\n\t\t\t// For the last crumb, we calculate with a max-width of 210px,\n\t\t\t// but don't set it in CSS to allow it to grow.\n\t\t\tif (isLast) {\n\t\t\t\tel.style.maxWidth = '210px'\n\t\t\t}\n\t\t\tel.classList.remove(`${crumbClass}--hidden`)\n\t\t\tconst w = el.offsetWidth\n\t\t\tif (hide) {\n\t\t\t\tel.classList.add(`${crumbClass}--hidden`)\n\t\t\t}\n\t\t\tel.style.minWidth = ''\n\t\t\tel.style.maxWidth = ''\n\t\t\treturn w\n\t\t},\n\t\t/**\n\t\t * Prevents the default of a provided event\n\t\t *\n\t\t * @param {object} e The event\n\t\t * @return {boolean}\n\t\t */\n\t\tpreventDefault(e) {\n\t\t\tif (e.preventDefault) {\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Handles the drag start.\n\t\t * Prevents a breadcrumb from being draggable.\n\t\t *\n\t\t * @param {object} e The event\n\t\t * @return {boolean}\n\t\t */\n\t\tdragStart(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles when something is dropped on the breadcrumb.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @param {string} path The path of the breadcrumb\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e, path, disabled) {\n\t\t\t/**\n\t\t\t * Don't emit if dropping is disabled.\n\t\t\t */\n\t\t\tif (!disabled) {\n\t\t\t\t/**\n\t\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t\t *\n\t\t\t\t * @param {Event} e the drop DOM event\n\t\t\t\t * @param {string} path The path of the breadcrumb\n\t\t\t\t */\n\t\t\t\tthis.$emit('dropped', e, path)\n\t\t\t}\n\t\t\t// Close the actions menu after the drop\n\t\t\tthis.menuBreadcrumbProps.open = false\n\n\t\t\t// Remove all hovering classes\n\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\tcrumbs.forEach((f) => { f.classList.remove(`${crumbClass}--hovered`) })\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles the drag over event\n\t\t *\n\t\t * @param {object} e The drag over event\n\t\t * @return {boolean}\n\t\t */\n\t\tdragOver(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles the drag enter event\n\t\t *\n\t\t * @param {object} e The drag over event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t */\n\t\tdragEnter(e, disabled) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we hover a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\t\t\tcrumbs.forEach((f) => { f.classList.remove(`${crumbClass}--hovered`) })\n\t\t\t\t\ttarget.classList.add(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Handles the drag leave event\n\t\t *\n\t\t * @param {object} e The drag leave event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t */\n\t\tdragLeave(e, disabled) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (e.target.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we leave directly from a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.contains(e.relatedTarget)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\ttarget.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Check for each crumb if we have to hide it and\n\t\t * add it to the array of all crumbs.\n\t\t */\n\t\thideCrumbs() {\n\t\t\tthis.breadcrumbsRefs.forEach((crumb, i) => {\n\t\t\t\tif (crumb?.$el?.classList) {\n\t\t\t\t\tif (this.hiddenIndices.includes(i)) {\n\t\t\t\t\t\tcrumb.$el.classList.add(`${crumbClass}--hidden`)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcrumb.$el.classList.remove(`${crumbClass}--hidden`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tisBreadcrumb(vnode) {\n\t\t\treturn vnode?.type?.name === 'NcBreadcrumb'\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\t// Get the breadcrumbs\n\t\tlet breadcrumbs = []\n\t\t// We have to iterate over all slot elements\n\t\tthis.$slots.default?.().forEach(vnode => {\n\t\t\tif (this.isBreadcrumb(vnode)) {\n\t\t\t\tbreadcrumbs.push(vnode)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\tif (vnode?.type === Fragment) {\n\t\t\t\tvnode?.children?.forEach?.(child => {\n\t\t\t\t\tif (this.isBreadcrumb(child)) {\n\t\t\t\t\t\tbreadcrumbs.push(child)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Check that we have at least one breadcrumb\n\t\tif (breadcrumbs.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t// Add the root icon to the first breadcrumb\n\t\tbreadcrumbs[0] = cloneVNode(breadcrumbs[0], {\n\t\t\ticon: this.rootIcon,\n\t\t\tref: 'breadcrumbs',\n\t\t})\n\n\t\t/**\n\t\t * Use a proxy object to store breadcrumbs refs\n\t\t * and don't write to this.breadcrumbsRefs directly\n\t\t * to not trigger a myriad of re-renders.\n\t\t */\n\t\tconst breadcrumbsRefs = []\n\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\tbreadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {\n\t\t\tref: (crumb) => {\n\t\t\t\tbreadcrumbsRefs[index] = crumb\n\t\t\t},\n\t\t}))\n\n\t\t// The array of all created VNodes\n\t\tconst crumbs = [...breadcrumbs]\n\t\tif (this.hiddenIndices.length) {\n\t\t\t/**\n\t\t\t * We show the first half of the breadcrumbs before the Actions dropdown menu\n\t\t\t * which shows the hidden breadcrumbs.\n\t\t\t */\n\t\t\t crumbs.splice(Math.round(breadcrumbs.length / 2), 0,\n\n\t\t\t\t// The Actions menu\n\t\t\t\t// Use a breadcrumb component for the hidden breadcrumbs\n\t\t\t\th(NcBreadcrumb, {\n\t\t\t\t\tclass: 'dropdown',\n\t\t\t\t\t...this.menuBreadcrumbProps,\n\t\t\t\t\t// Hide the dropdown menu from screen-readers,\n\t\t\t\t\t// since the crumbs in the menu are still in the list.\n\t\t\t\t\t'aria-hidden': true,\n\t\t\t\t\t// Add a ref to the Actions menu\n\t\t\t\t\tref: 'actionsBreadcrumb',\n\t\t\t\t\tkey: 'actions-breadcrumb-1',\n\t\t\t\t\t// Add handlers so the Actions menu opens on hover\n\t\t\t\t\tonDragenter: () => { this.menuBreadcrumbProps.open = true },\n\t\t\t\t\tonDragleave: this.closeActions,\n\t\t\t\t\t// Make sure we keep the same open state\n\t\t\t\t\t// as the Actions component\n\t\t\t\t\t'onUpdate:open': (open) => {\n\t\t\t\t\t\tthis.menuBreadcrumbProps.open = open\n\t\t\t\t\t},\n\t\t\t\t// Add all hidden breadcrumbs as ActionRouter or ActionLink\n\t\t\t\t}, {\n\t\t\t\t\tdefault: () => this.hiddenIndices.map(index => {\n\t\t\t\t\t\tconst crumb = breadcrumbs[index]\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t// Get the parameters from the breadcrumb component props\n\t\t\t\t\t\t\tto,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tdisableDrop,\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t// Props to forward\n\t\t\t\t\t\t\t...propsToForward\n\t\t\t\t\t\t} = crumb.props\n\t\t\t\t\t\t// Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed\n\t\t\t\t\t\tdelete propsToForward.ref\n\n\t\t\t\t\t\t// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink\n\t\t\t\t\t\tlet element = NcActionButton\n\t\t\t\t\t\tlet path = ''\n\t\t\t\t\t\tif (href) {\n\t\t\t\t\t\t\telement = NcActionLink\n\t\t\t\t\t\t\tpath = href\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (to) {\n\t\t\t\t\t\t\telement = NcActionRouter\n\t\t\t\t\t\t\tpath = to\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst folderIcon = h(IconFolder, {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t})\n\t\t\t\t\t\treturn h(element, {\n\t\t\t\t\t\t\t...propsToForward,\n\t\t\t\t\t\t\tclass: crumbClass,\n\t\t\t\t\t\t\thref: href || null,\n\t\t\t\t\t\t\tto: to || null,\n\t\t\t\t\t\t\t// Prevent the breadcrumbs from being draggable\n\t\t\t\t\t\t\tdraggable: false,\n\t\t\t\t\t\t\t// Add the drag and drop handlers\n\t\t\t\t\t\t\tonDragstart: this.dragStart,\n\t\t\t\t\t\t\tonDrop: ($event) => this.dropped($event, path, disableDrop),\n\t\t\t\t\t\t\tonDragover: this.dragOver,\n\t\t\t\t\t\t\tonDragenter: ($event) => this.dragEnter($event, disableDrop),\n\t\t\t\t\t\t\tonDragleave: ($event) => this.dragLeave($event, disableDrop),\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdefault: () => name,\n\t\t\t\t\t\t\ticon: () => folderIcon,\n\t\t\t\t\t\t})\n\t\t\t\t\t}),\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\tconst wrapper = [h('nav', { 'aria-label': this.ariaLabel }, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]\n\t\t// Append the actions slot if it is populated\n\t\tif (isSlotPopulated(this.$slots.actions?.())) {\n\t\t\twrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions?.()))\n\t\t}\n\n\t\tthis.breadcrumbsRefs = breadcrumbsRefs\n\n\t\treturn h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.breadcrumb {\n\twidth: 100%;\n\tflex-grow: 1;\n\tdisplay: inline-flex;\n\talign-items: center;\n\n\t&--collapsed :deep(.vue-crumb:last-child) {\n\t\tmin-width: 100px;\n\t}\n\n\tnav {\n\t\tflex-shrink: 1;\n\t\tmin-width: 0;\n\t}\n\n\t& #{&}__crumbs {\n\t\tmax-width: 100%;\n\t}\n\n\t& #{&}__crumbs,\n\t& #{&}__actions {\n\t\tdisplay: inline-flex;\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","_hoisted_1","_hoisted_2","_hoisted_3","$props","createElementVNode","createCommentVNode","crumbClass","_sfc_main","NcActions","NcActionButton","NcActionRouter","nrCrumbs","hiddenIndices","totalWidth","overflow","availableWidth","startIndex","i","currentIndex","a","b","width","crumb","index","el","isLast","w","hide","f","disabled","target","vnode","_a","breadcrumbs","_b","child","cloneVNode","NcBreadcrumb","open","to","propsToForward","path","href","element","NcActionLink","name","folderIcon","isSlotPopulated","_d","_c","breadcrumbsRefs","wrapper"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcButton-Uxh-oARg.cjs → NcButton-7UKtzkX5.cjs}

@@ -1,5 +1,5 @@
-var g = require("../assets/NcButton-fqTN6SJK.css");
-const r = require("vue"), p = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
+var L = require("../assets/NcButton-rKJYdkZn.css");
+const e = require("vue"), A = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
@@ -21,23 +21,23 @@ const r = require("vue"), p = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const s = function(t) {
+const o = function(t) {
   return Array.isArray(t) && t.some((n) => {
     if (n === null)
       return !1;
     if (typeof n == "object") {
-      const e = n;
-      if (e.type === r.Comment || e.type === r.Fragment && !s(e.children) || e.type === r.Text && !e.children.trim())
+      const r = n;
+      if (r.type === e.Comment || r.type === e.Fragment && !o(r.children) || r.type === e.Text && !r.children.trim())
         return !1;
     }
     return !0;
   });
-}, c = ["start", "start-reverse", "center", "center-reverse", "end", "end-reverse"], h = ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"], f = ["submit", "reset", "button"], y = r.defineComponent({
+}, S = ["start", "start-reverse", "center", "center-reverse", "end", "end-reverse"], w = ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"], N = ["submit", "reset", "button"], B = e.defineComponent({
   name: "NcButton",
   inject: {
-    ncPopoverTriggerAttrs: {
+    getNcPopoverTriggerAttrs: {
       from: "NcPopover:trigger:attrs",
-      default: () => ({})
+      default: () => () => ({})
     }
   },
   props: {
@@ -51,7 +51,7 @@ const s = function(t) {
       type: String,
       default: "center",
       validator(t) {
-        return typeof t == "string" && c.includes(t);
+        return typeof t == "string" && S.includes(t);
       }
     },
     /**
@@ -71,7 +71,7 @@ const s = function(t) {
     type: {
       type: String,
       validator(t) {
-        return typeof t == "string" && h.indexOf(t) !== -1;
+        return typeof t == "string" && w.indexOf(t) !== -1;
       },
       default: "secondary"
     },
@@ -84,7 +84,7 @@ const s = function(t) {
     nativeType: {
       type: String,
       validator(t) {
-        return typeof t == "string" && f.includes(t);
+        return typeof t == "string" && N.includes(t);
       },
       default: "button"
     },
@@ -169,6 +169,9 @@ const s = function(t) {
      */
     isReverseAligned() {
       return this.alignment.includes("-");
+    },
+    ncPopoverTriggerAttrs() {
+      return this.getNcPopoverTriggerAttrs();
     }
   },
   /**
@@ -177,69 +180,73 @@ const s = function(t) {
    * @return {object|undefined} The created VNode
    */
   render() {
-    const t = s(this.$slots.default?.()), n = s(this.$slots.icon?.());
-    !t && !this.ariaLabel && console.warn(
+    var t, n, r, a, u, d, c, p;
+    const i = o((n = (t = this.$slots).default) == null ? void 0 : n.call(t)), l = o((a = (r = this.$slots).icon) == null ? void 0 : a.call(r));
+    !i && !this.ariaLabel && console.warn(
       "You need to fill either the text or the ariaLabel props in the button component.",
       {
-        text: this.$slots.default?.()?.[0]?.children,
+        text: (p = (c = (d = (u = this.$slots).default) == null ? void 0 : d.call(u)) == null ? void 0 : c[0]) == null ? void 0 : p.children,
         ariaLabel: this.ariaLabel
       },
       this
     );
-    const e = this.to || this.href, i = !e && typeof this.pressed == "boolean", o = ({ href: a, navigate: u, isActive: d } = {}) => r.h(
-      e ? "a" : "button",
-      {
-        class: [
-          "button-vue",
-          {
-            "button-vue--icon-only": n && !t,
-            "button-vue--text-only": t && !n,
-            "button-vue--icon-and-text": n && t,
-            [`button-vue--vue-${this.realType}`]: this.realType,
-            "button-vue--wide": this.wide,
-            [`button-vue--${this.flexAlignment}`]: this.flexAlignment !== "center",
-            "button-vue--reverse": this.isReverseAligned,
-            active: d
-          }
-        ],
-        "aria-label": this.ariaLabel,
-        "aria-pressed": i ? this.pressed.toString() : void 0,
-        disabled: this.disabled,
-        type: e ? null : this.nativeType,
-        role: e ? "button" : null,
-        href: this.to ? a : this.href || null,
-        target: e ? "_self" : null,
-        rel: e ? "nofollow noreferrer noopener" : null,
-        download: !this.to && this.href && this.download ? this.download : null,
-        // If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes
-        ...this.ncPopoverTriggerAttrs,
-        onClick: (l) => {
-          i && this.$emit("update:pressed", !this.pressed), this.$emit("click", l), u?.(l);
-        }
-      },
-      [
-        r.h("span", { class: "button-vue__wrapper" }, [
-          n ? r.h(
-            "span",
+    const s = this.to || this.href, h = !s && typeof this.pressed == "boolean", f = ({ href: T, navigate: y, isActive: x } = {}) => {
+      var v, g, b, _;
+      return e.h(
+        s ? "a" : "button",
+        {
+          class: [
+            "button-vue",
             {
-              class: "button-vue__icon",
-              attrs: {
-                "aria-hidden": "true"
-              }
-            },
-            [this.$slots.icon?.()]
-          ) : null,
-          t ? r.h("span", { class: "button-vue__text" }, [this.$slots.default?.()]) : null
-        ])
-      ]
-    );
-    return this.to ? r.h(r.resolveComponent("router-link"), {
+              "button-vue--icon-only": l && !i,
+              "button-vue--text-only": i && !l,
+              "button-vue--icon-and-text": l && i,
+              ["button-vue--vue-".concat(this.realType)]: this.realType,
+              "button-vue--wide": this.wide,
+              ["button-vue--".concat(this.flexAlignment)]: this.flexAlignment !== "center",
+              "button-vue--reverse": this.isReverseAligned,
+              active: x
+            }
+          ],
+          "aria-label": this.ariaLabel,
+          "aria-pressed": h ? this.pressed.toString() : void 0,
+          disabled: this.disabled,
+          type: s ? null : this.nativeType,
+          role: s ? "button" : null,
+          href: this.to ? T : this.href || null,
+          target: s ? "_self" : null,
+          rel: s ? "nofollow noreferrer noopener" : null,
+          download: !this.to && this.href && this.download ? this.download : null,
+          // If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes
+          ...this.ncPopoverTriggerAttrs,
+          onClick: (m) => {
+            h && this.$emit("update:pressed", !this.pressed), this.$emit("click", m), y == null || y(m);
+          }
+        },
+        [
+          e.h("span", { class: "button-vue__wrapper" }, [
+            l ? e.h(
+              "span",
+              {
+                class: "button-vue__icon",
+                attrs: {
+                  "aria-hidden": "true"
+                }
+              },
+              [(g = (v = this.$slots).icon) == null ? void 0 : g.call(v)]
+            ) : null,
+            i ? e.h("span", { class: "button-vue__text" }, [(_ = (b = this.$slots).default) == null ? void 0 : _.call(b)]) : null
+          ])
+        ]
+      );
+    };
+    return this.to ? e.h(e.resolveComponent("router-link"), {
       custom: !0,
       to: this.to
     }, {
-      default: o
-    }) : o();
+      default: f
+    }) : f();
   }
-}), b = /* @__PURE__ */ p._export_sfc(y, [["__scopeId", "data-v-a8683752"]]);
-exports.NcButton = b;
-exports.isSlotPopulated = s;
+}), P = /* @__PURE__ */ A._export_sfc(B, [["__scopeId", "data-v-4d186141"]]);
+exports.NcButton = P;
+exports.isSlotPopulated = o;