@nextcloud/vue 8.11.1 → 8.11.2

package/dist/chunks/{NcActions-B1Ue3gj8.mjs → NcActions-DiFslXqv.mjs}

@@ -1,10 +1,10 @@
-import '../assets/NcActions-DL7ZZIjx.css';
+import '../assets/NcActions-CiiQkX9v.css';
 import Q from "../Components/NcButton.mjs";
 import { N as X } from "./NcPopover--V3R3EKV.mjs";
 import { G as Y } from "./GenRandomId-BW3iYFf9.mjs";
 import { g as Z } from "./focusTrap-Be9GEB5C.mjs";
-import { r as ee, o as te, a as ne } from "./_l10n-BZu8wI2q.mjs";
-import ie, { computed as se } from "vue";
+import { r as ee, o as te, a as ie } from "./_l10n-BaNxGGXy.mjs";
+import ne, { computed as se } from "vue";
 import { D as oe } from "./DotsHorizontal-DfVgEXgz.mjs";
 import { n as re } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 ee(te);
@@ -132,7 +132,7 @@ const W = ".focusable", ce = {
      */
     ariaLabel: {
       type: String,
-      default: ne("Actions")
+      default: ie("Actions")
     },
     /**
      * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
@@ -296,8 +296,8 @@ const W = ".focusable", ce = {
      * @return {string} the name of the action component
      */
     getActionName(e) {
-      var n, i, s, o, l;
-      return (l = (s = (i = (n = e == null ? void 0 : e.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : s.name) != null ? l : (o = e == null ? void 0 : e.componentOptions) == null ? void 0 : o.tag;
+      var i, n, s, o, r;
+      return (r = (s = (n = (i = e == null ? void 0 : e.componentOptions) == null ? void 0 : i.Ctor) == null ? void 0 : n.extendOptions) == null ? void 0 : s.name) != null ? r : (o = e == null ? void 0 : e.componentOptions) == null ? void 0 : o.tag;
     },
     /**
      * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
@@ -346,14 +346,33 @@ const W = ".focusable", ce = {
       this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
     },
     async closeMenu(e = !0) {
-      var n, i;
-      this.opened && (await this.$nextTick(), this.opened = !1, (n = this.$refs.popover) == null || n.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, e && ((i = this.$refs.menuButton) == null || i.$el.focus()));
+      var i, n;
+      this.opened && (await this.$nextTick(), this.opened = !1, (i = this.$refs.popover) == null || i.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, e && ((n = this.$refs.menuButton) == null || n.$el.focus()));
     },
-    onOpen(e) {
+    /**
+     * Called when popover is shown after the show delay
+     */
+    onOpen() {
       this.$nextTick(() => {
-        this.focusFirstAction(e);
+        this.focusFirstAction(null), this.resizePopover();
       });
     },
+    /**
+     * Hanle resizing the popover to make sure users can discover there is more to scroll
+     */
+    resizePopover() {
+      const e = this.$refs.menu.closest(".v-popper__inner"), i = Number.parseFloat(window.getComputedStyle(e).maxHeight);
+      if (this.$refs.menu.clientHeight > i) {
+        let s = 0, o = 0;
+        for (const r of this.$refs.menuList.children) {
+          if (s + r.clientHeight / 2 > i) {
+            e.style.height = "".concat(s - o / 2, "px");
+            break;
+          }
+          o = r.clientHeight, s += o;
+        }
+      }
+    },
     // MENU KEYS & FOCUS MANAGEMENT
     /**
      * @return {HTMLElement|null}
@@ -377,11 +396,11 @@ const W = ".focusable", ce = {
     onMouseFocusAction(e) {
       if (document.activeElement === e.target)
         return;
-      const n = e.target.closest("li");
-      if (n && this.$refs.menu.contains(n)) {
-        const i = n.querySelector(W);
-        if (i) {
-          const o = [...this.getFocusableMenuItemElements()].indexOf(i);
+      const i = e.target.closest("li");
+      if (i && this.$refs.menu.contains(i)) {
+        const n = i.querySelector(W);
+        if (n) {
+          const o = [...this.getFocusableMenuItemElements()].indexOf(n);
           o > -1 && (this.focusIndex = o, this.focusAction());
         }
       }
@@ -400,11 +419,11 @@ const W = ".focusable", ce = {
           return;
         }
         e.preventDefault();
-        const n = this.getFocusableMenuItemElements(), i = [...n].indexOf(document.activeElement);
-        if (i === -1)
+        const i = this.getFocusableMenuItemElements(), n = [...i].indexOf(document.activeElement);
+        if (n === -1)
           return;
-        const s = e.shiftKey ? i - 1 : i + 1;
-        (s < 0 || s === n.length) && this.closeMenu(!0), this.focusIndex = s, this.focusAction();
+        const s = e.shiftKey ? n - 1 : n + 1;
+        (s < 0 || s === i.length) && this.closeMenu(!0), this.focusIndex = s, this.focusAction();
         return;
       }
       this.config.withArrowNavigation && (e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e)), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
@@ -420,8 +439,8 @@ const W = ".focusable", ce = {
       const e = this.getFocusableMenuItemElements()[this.focusIndex];
       if (e) {
         this.removeCurrentActive();
-        const n = e.closest("li.action");
-        e.focus(), n && n.classList.add("active");
+        const i = e.closest("li.action");
+        e.focus(), i && i.classList.add("active");
       }
     },
     focusPreviousAction(e) {
@@ -429,15 +448,15 @@ const W = ".focusable", ce = {
     },
     focusNextAction(e) {
       if (this.opened) {
-        const n = this.getFocusableMenuItemElements().length - 1;
-        this.focusIndex === n ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
+        const i = this.getFocusableMenuItemElements().length - 1;
+        this.focusIndex === i ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
       }
     },
     focusFirstAction(e) {
       if (this.opened) {
         this.preventIfEvent(e);
-        const n = [...this.getFocusableMenuItemElements()].findIndex((i) => i.getAttribute("aria-checked") === "true" && i.getAttribute("role") === "menuitemradio");
-        this.focusIndex = n > -1 ? n : 0, this.focusAction();
+        const i = [...this.getFocusableMenuItemElements()].findIndex((n) => n.getAttribute("aria-checked") === "true" && n.getAttribute("role") === "menuitemradio");
+        this.focusIndex = i > -1 ? i : 0, this.focusAction();
       }
     },
     focusLastAction(e) {
@@ -463,51 +482,51 @@ const W = ".focusable", ce = {
    * @return {object|undefined} The created VNode
    */
   render(e) {
-    const n = (this.$slots.default || []).filter((t) => this.getActionName(t));
-    if (n.length === 0)
+    const i = (this.$slots.default || []).filter((t) => this.getActionName(t));
+    if (i.length === 0)
       return;
-    let i = n.filter(this.isValidSingleAction);
-    this.forceMenu && i.length > 0 && this.inline > 0 && (ie.util.warn("Specifying forceMenu will ignore any inline actions rendering."), i = []);
-    const s = i.slice(0, this.inline), o = n.filter((t) => !s.includes(t));
+    let n = i.filter(this.isValidSingleAction);
+    this.forceMenu && n.length > 0 && this.inline > 0 && (ne.util.warn("Specifying forceMenu will ignore any inline actions rendering."), n = []);
+    const s = n.slice(0, this.inline), o = i.filter((t) => !s.includes(t));
     if (this.forceSemanticType)
       this.actionsMenuSemanticType = this.forceSemanticType;
     else {
-      const t = ["NcActionInput", "NcActionTextEditable"], c = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], a = ["NcActionLink", "NcActionRouter"], u = o.some((r) => t.includes(this.getActionName(r))), p = o.some((r) => c.includes(this.getActionName(r))), f = o.some((r) => a.includes(this.getActionName(r)));
-      u ? this.actionsMenuSemanticType = "dialog" : p ? this.actionsMenuSemanticType = "menu" : f ? this.actionsMenuSemanticType = "expanded" : n.filter((h) => this.getActionName(h).startsWith("NcAction")).length === n.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "unknown";
+      const t = ["NcActionInput", "NcActionTextEditable"], a = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], l = ["NcActionLink", "NcActionRouter"], u = o.some((c) => t.includes(this.getActionName(c))), p = o.some((c) => a.includes(this.getActionName(c))), h = o.some((c) => l.includes(this.getActionName(c)));
+      u ? this.actionsMenuSemanticType = "dialog" : p ? this.actionsMenuSemanticType = "menu" : h ? this.actionsMenuSemanticType = "expanded" : i.filter((d) => this.getActionName(d).startsWith("NcAction")).length === i.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "unknown";
     }
-    const l = (t) => {
-      var y, I, b, v, w, T, N, x, S, k, F, M, m, $, E, B, O, C, R, L, _, D, U, P, V, q, z, K, G, H;
-      const c = (I = (y = t == null ? void 0 : t.componentOptions) == null ? void 0 : y.propsData) == null ? void 0 : I.icon, a = (T = (w = (v = (b = t == null ? void 0 : t.data) == null ? void 0 : b.scopedSlots) == null ? void 0 : v.icon()) == null ? void 0 : w[0]) != null ? T : this.isIconUrl(c) ? e("img", { class: "action-item__menutoggle__icon", attrs: { src: c, alt: "" } }) : e("span", { class: ["icon", c] }), u = ((N = t == null ? void 0 : t.data) == null ? void 0 : N.attrs) || {}, p = (S = (x = t == null ? void 0 : t.componentOptions) == null ? void 0 : x.listeners) == null ? void 0 : S.click, f = ($ = (m = (M = (F = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.children) == null ? void 0 : F[0]) == null ? void 0 : M.text) == null ? void 0 : m.trim) == null ? void 0 : $.call(m), r = ((B = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : B.ariaLabel) || f, h = this.forceName ? f : "";
-      let g = (C = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.propsData) == null ? void 0 : C.title;
-      this.forceName || g || (g = f);
-      const d = { ...(L = (R = t == null ? void 0 : t.componentOptions) == null ? void 0 : R.propsData) != null ? L : {} }, j = ["submit", "reset"].includes(d.type) ? d.modelValue : "button";
-      return delete d.modelValue, delete d.type, e(
+    const r = (t) => {
+      var y, v, b, I, w, T, N, x, S, k, F, M, m, $, E, B, C, L, O, _, R, D, P, U, H, z, V, q, K, G;
+      const a = (v = (y = t == null ? void 0 : t.componentOptions) == null ? void 0 : y.propsData) == null ? void 0 : v.icon, l = (T = (w = (I = (b = t == null ? void 0 : t.data) == null ? void 0 : b.scopedSlots) == null ? void 0 : I.icon()) == null ? void 0 : w[0]) != null ? T : this.isIconUrl(a) ? e("img", { class: "action-item__menutoggle__icon", attrs: { src: a, alt: "" } }) : e("span", { class: ["icon", a] }), u = ((N = t == null ? void 0 : t.data) == null ? void 0 : N.attrs) || {}, p = (S = (x = t == null ? void 0 : t.componentOptions) == null ? void 0 : x.listeners) == null ? void 0 : S.click, h = ($ = (m = (M = (F = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.children) == null ? void 0 : F[0]) == null ? void 0 : M.text) == null ? void 0 : m.trim) == null ? void 0 : $.call(m), c = ((B = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : B.ariaLabel) || h, d = this.forceName ? h : "";
+      let g = (L = (C = t == null ? void 0 : t.componentOptions) == null ? void 0 : C.propsData) == null ? void 0 : L.title;
+      this.forceName || g || (g = h);
+      const f = { ...(_ = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.propsData) != null ? _ : {} }, j = ["submit", "reset"].includes(f.type) ? f.modelValue : "button";
+      return delete f.modelValue, delete f.type, e(
         "NcButton",
         {
           class: [
             "action-item action-item--single",
-            (_ = t == null ? void 0 : t.data) == null ? void 0 : _.staticClass,
+            (R = t == null ? void 0 : t.data) == null ? void 0 : R.staticClass,
             (D = t == null ? void 0 : t.data) == null ? void 0 : D.class
           ],
           attrs: {
             ...u,
-            "aria-label": r,
+            "aria-label": c,
             title: g
           },
-          ref: (U = t == null ? void 0 : t.data) == null ? void 0 : U.ref,
+          ref: (P = t == null ? void 0 : t.data) == null ? void 0 : P.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (h ? "secondary" : "tertiary"),
-            disabled: this.disabled || ((V = (P = t == null ? void 0 : t.componentOptions) == null ? void 0 : P.propsData) == null ? void 0 : V.disabled),
-            pressed: (z = (q = t == null ? void 0 : t.componentOptions) == null ? void 0 : q.propsData) == null ? void 0 : z.modelValue,
+            type: this.type || (d ? "secondary" : "tertiary"),
+            disabled: this.disabled || ((H = (U = t == null ? void 0 : t.componentOptions) == null ? void 0 : U.propsData) == null ? void 0 : H.disabled),
+            pressed: (V = (z = t == null ? void 0 : t.componentOptions) == null ? void 0 : z.propsData) == null ? void 0 : V.modelValue,
             nativeType: j,
-            ...d
+            ...f
           },
           on: {
             focus: this.onFocus,
             blur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
-            "update:pressed": (H = (G = (K = t == null ? void 0 : t.componentOptions) == null ? void 0 : K.listeners) == null ? void 0 : G["update:modelValue"]) != null ? H : () => {
+            "update:pressed": (G = (K = (q = t == null ? void 0 : t.componentOptions) == null ? void 0 : q.listeners) == null ? void 0 : K["update:modelValue"]) != null ? G : () => {
             },
             // If we have a click listener,
             // we bind it to execute on click and forward the click event
@@ -519,13 +538,13 @@ const W = ".focusable", ce = {
           }
         },
         [
-          e("template", { slot: "icon" }, [a]),
-          h
+          e("template", { slot: "icon" }, [l]),
+          d
         ]
       );
     }, A = (t) => {
-      var a, u;
-      const c = ((a = this.$slots.icon) == null ? void 0 : a[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
+      var l, u;
+      const a = ((l = this.$slots.icon) == null ? void 0 : l[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
         props: {
           size: 20
         }
@@ -560,7 +579,7 @@ const W = ".focusable", ce = {
           },
           on: {
             show: this.openMenu,
-            "after-show": this.onOpen,
+            "apply-show": this.onOpen,
             hide: this.closeMenu
           }
         },
@@ -585,7 +604,7 @@ const W = ".focusable", ce = {
               keydown: this.onTriggerKeydown
             }
           }, [
-            e("template", { slot: "icon" }, [c]),
+            e("template", { slot: "icon" }, [a]),
             this.menuName
           ]),
           e("div", {
@@ -606,7 +625,8 @@ const W = ".focusable", ce = {
               attrs: {
                 tabindex: "-1",
                 ...this.config.popoverUlA11yAttrs
-              }
+              },
+              ref: "menuList"
             }, [
               t
             ])
@@ -614,8 +634,8 @@ const W = ".focusable", ce = {
         ]
       );
     };
-    return n.length === 1 && i.length === 1 && !this.forceMenu ? l(n[0]) : (this.$nextTick(() => {
-      this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
+    return i.length === 1 && n.length === 1 && !this.forceMenu ? r(i[0]) : (this.$nextTick(() => {
+      this.opened && this.$refs.menu && (this.resizePopover(), (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction());
     }), s.length > 0 && this.inline > 0 ? e(
       "div",
       {
@@ -626,7 +646,7 @@ const W = ".focusable", ce = {
       },
       [
         // Render inline actions
-        ...s.map(l),
+        ...s.map(r),
         // render the rest within the popover menu
         o.length > 0 ? e(
           "div",
@@ -655,22 +675,22 @@ const W = ".focusable", ce = {
         ]
       },
       [
-        A(n)
+        A(i)
       ]
     ));
   }
-}, ae = null, ue = null;
-var le = /* @__PURE__ */ re(
+}, ae = null, le = null;
+var ue = /* @__PURE__ */ re(
   ce,
   ae,
-  ue,
+  le,
   !1,
   null,
-  "65ff86b8",
+  "7f6b7570",
   null,
   null
 );
-const Ie = le.exports;
+const ve = ue.exports;
 export {
-  Ie as N
+  ve as N
 };