@nextcloud/vue 8.11.1 → 8.11.3

package/dist/chunks/NcActions-B1Ue3gj8.mjs

@@ -1,676 +0,0 @@
-import '../assets/NcActions-DL7ZZIjx.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 { D as oe } from "./DotsHorizontal-DfVgEXgz.mjs";
-import { n as re } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
-ee(te);
-const W = ".focusable", ce = {
-  name: "NcActions",
-  components: {
-    NcButton: Q,
-    DotsHorizontal: oe,
-    NcPopover: X
-  },
-  provide() {
-    return {
-      /**
-       * NcActions can be used as:
-       * - Application menu (has menu role)
-       * - Expanded block (has no specific role, should be used an element with expanded role)
-       * - Popover with plain text or text inputs (has no specific role)
-       * Depending on the usage (used items), the menu and its items should have different roles for a11y.
-       * Provide the role for NcAction* components in the NcActions content.
-       * @type {import('vue').ComputedRef<boolean>}
-       */
-      "NcActions:isSemanticMenu": se(() => this.actionsMenuSemanticType === "menu")
-    };
-  },
-  props: {
-    /**
-     * Specify the open state of the popover menu
-     */
-    open: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * This disables the internal open management,
-     * so the actions menu only respects the `open` prop.
-     * This is e.g. necessary for the NcAvatar component
-     * to only open the actions menu after loading it's entries has finished.
-     */
-    manualOpen: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Force the actions to display in a three dot menu
-     */
-    forceMenu: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Force the name to show for single actions
-     */
-    forceName: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Specify the menu name
-     */
-    menuName: {
-      type: String,
-      default: null
-    },
-    /**
-     * NcActions can be used as:
-     *
-     * - Application menu (has menu role)
-     * - Navigation (has no specific role, should be used an element with expanded role)
-     * - Popover with plain text or text inputs (has no specific role)
-     *
-     * By default the used type is automatically detected by components used in the default slot.#
-     *
-     * With Vue this is limited to direct children of the NcActions component.
-     * So if you use a wrapper, you have to provide the semantic type yourself (see Example)
-     *
-     * Choose:
-     *
-     * - 'dialog' if you use any of these components: NcActionInput', 'NcActionTextEditable'
-     * - 'menu' if you use any of these components: 'NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio'
-     * - 'expanded' if using one of these: 'NcActionLink', 'NcActionRouter'. This represents an expanded block.
-     * - 'tooltip' only to be used when a text without any interactive elements is used.
-     * - Leave this property unset otherwise
-     */
-    forceSemanticType: {
-      type: String,
-      default: null,
-      validator(e) {
-        return ["dialog", "menu", "expanded", "tooltip"].includes(e);
-      }
-    },
-    /**
-     * Apply primary styling for this menu
-     */
-    primary: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Specifies the button type used for trigger and single actions buttons
-     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-     * the default button style will be applied.
-     */
-    type: {
-      type: String,
-      validator(e) {
-        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(e) !== -1;
-      },
-      default: null
-    },
-    /**
-     * Icon to show for the toggle menu button
-     * when more than one action is inside the actions component.
-     * Only replace the default three-dot icon if really necessary.
-     */
-    defaultIcon: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Aria label for the actions menu.
-     *
-     * If `menuName` is defined this will not be used to prevent
-     * any accessible name conflicts. This ensures that the
-     * element can be activated via voice input.
-     */
-    ariaLabel: {
-      type: String,
-      default: ne("Actions")
-    },
-    /**
-     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
-     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
-     * otherwise root element will inherit incorrect aria-hidden.
-     */
-    ariaHidden: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * Wanted direction of the menu
-     */
-    placement: {
-      type: String,
-      default: "bottom"
-    },
-    /**
-     * DOM element for the actions' popover boundaries
-     */
-    boundariesElement: {
-      type: Element,
-      default: () => document.querySelector("body")
-    },
-    /**
-     * Selector for the actions' popover container
-     */
-    container: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    },
-    /**
-     * Disabled state of the main button (single action or menu toggle)
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display x items inline out of the dropdown menu
-     * Will be ignored if `forceMenu` is set
-     */
-    inline: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: [
-    "open",
-    "update:open",
-    "close",
-    "focus",
-    "blur",
-    "click"
-  ],
-  setup() {
-    const e = "menu-".concat(Y());
-    return {
-      randomId: e,
-      triggerRandomId: "trigger-".concat(e)
-    };
-  },
-  data() {
-    return {
-      opened: this.open,
-      focusIndex: 0,
-      /**
-       * @type {'menu'|'expanded'|'dialog'|'tooltip'|'unknown'}
-       */
-      actionsMenuSemanticType: "unknown",
-      externalFocusTrapStack: []
-    };
-  },
-  computed: {
-    triggerBtnType() {
-      return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
-    },
-    /**
-     * A11y roles and keyboard navigation configuration depending on the semantic type
-     */
-    config() {
-      return {
-        menu: {
-          popupRole: "menu",
-          withArrowNavigation: !0,
-          withTabNavigation: !1,
-          withFocusTrap: !1,
-          triggerA11yAttr: {
-            "aria-controls": this.opened ? this.randomId : null
-          },
-          popoverContainerA11yAttrs: {},
-          popoverUlA11yAttrs: {
-            id: this.randomId,
-            role: "menu"
-          }
-        },
-        expanded: {
-          popupRole: void 0,
-          withArrowNavigation: !1,
-          withTabNavigation: !0,
-          withFocusTrap: !1,
-          triggerA11yAttr: {},
-          popoverContainerA11yAttrs: {},
-          popoverUlA11yAttrs: {}
-        },
-        dialog: {
-          popupRole: "dialog",
-          withArrowNavigation: !1,
-          withTabNavigation: !0,
-          withFocusTrap: !0,
-          triggerA11yAttr: {
-            "aria-controls": this.opened ? this.randomId : null
-          },
-          popoverContainerA11yAttrs: {
-            id: this.randomId,
-            role: "dialog",
-            // Dialog must have a label
-            "aria-labelledby": this.triggerRandomId,
-            "aria-modal": "true"
-          },
-          popoverUlA11yAttrs: {}
-        },
-        tooltip: {
-          popupRole: void 0,
-          withArrowNavigation: !1,
-          withTabNavigation: !1,
-          withFocusTrap: !1,
-          triggerA11yAttr: {},
-          popoverContainerA11yAttrs: {},
-          popoverUlA11yAttrs: {}
-        },
-        // Due to Vue limitations, we sometimes cannot determine the true type
-        // As a fallback use both arrow navigation and focus trap
-        unknown: {
-          popupRole: void 0,
-          role: void 0,
-          withArrowNavigation: !0,
-          withTabNavigation: !1,
-          withFocusTrap: !0,
-          triggerA11yAttr: {},
-          popoverContainerA11yAttrs: {},
-          popoverUlA11yAttrs: {}
-        }
-      }[this.actionsMenuSemanticType];
-    }
-  },
-  watch: {
-    // Watch parent prop
-    open(e) {
-      e !== this.opened && (this.opened = e);
-    },
-    opened() {
-      this.intersectIntoCurrentFocusTrapStack();
-    }
-  },
-  methods: {
-    /**
-     * Get the name of the action component
-     *
-     * @param {import('vue').VNode} action - a vnode with a NcAction* component instance
-     * @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;
-    },
-    /**
-     * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
-     *
-     * However if the component has no focus trap and is used inside another focus trap - there is an issue.
-     * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
-     * It results in broken behavior from focus-trap.
-     *
-     * We need to pause all the focus traps for opening popover and then unpause them back after closing.
-     */
-    intersectIntoCurrentFocusTrapStack() {
-      if (!this.config.withFocusTrap)
-        if (this.opened) {
-          this.externalFocusTrapStack = [...Z()];
-          for (const e of this.externalFocusTrapStack)
-            e.pause();
-        } else {
-          for (const e of this.externalFocusTrapStack)
-            e.unpause();
-          this.externalFocusTrapStack = [];
-        }
-    },
-    /**
-     * Do we have exactly one Action and
-     * is it allowed as a standalone element?
-     *
-     * @param {import('vue').VNode} action The action to check
-     * @return {boolean}
-     */
-    isValidSingleAction(e) {
-      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(this.getActionName(e));
-    },
-    /**
-     * Check whether a icon prop value is an URL or not
-     * @param {string} url The icon prop value
-     */
-    isIconUrl(e) {
-      try {
-        return !!new URL(e, e.startsWith("/") ? window.location.origin : void 0);
-      } catch {
-        return !1;
-      }
-    },
-    // MENU STATE MANAGEMENT
-    openMenu(e) {
-      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()));
-    },
-    onOpen(e) {
-      this.$nextTick(() => {
-        this.focusFirstAction(e);
-      });
-    },
-    // MENU KEYS & FOCUS MANAGEMENT
-    /**
-     * @return {HTMLElement|null}
-     */
-    getCurrentActiveMenuItemElement() {
-      return this.$refs.menu.querySelector("li.active");
-    },
-    /**
-     * @return {NodeListOf<HTMLElement>}
-     */
-    getFocusableMenuItemElements() {
-      return this.$refs.menu.querySelectorAll(W);
-    },
-    /**
-     * Focus nearest focusable item on mouse move.
-     * DO NOT change the focus if the target is already focused
-     * this will prevent issues with input being unfocused
-     * on mouse move
-     * @param {PointerEvent} event - The mouse move event
-     */
-    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);
-          o > -1 && (this.focusIndex = o, this.focusAction());
-        }
-      }
-    },
-    /**
-     * Dispatches the keydown listener to different handlers
-     *
-     * @param {object} event The keydown event
-     */
-    onKeydown(e) {
-      if (e.key === "Tab") {
-        if (this.config.withFocusTrap)
-          return;
-        if (!this.config.withTabNavigation) {
-          this.closeMenu(!0);
-          return;
-        }
-        e.preventDefault();
-        const n = this.getFocusableMenuItemElements(), i = [...n].indexOf(document.activeElement);
-        if (i === -1)
-          return;
-        const s = e.shiftKey ? i - 1 : i + 1;
-        (s < 0 || s === n.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());
-    },
-    onTriggerKeydown(e) {
-      e.key === "Escape" && this.actionsMenuSemanticType === "tooltip" && this.closeMenu();
-    },
-    removeCurrentActive() {
-      const e = this.$refs.menu.querySelector("li.active");
-      e && e.classList.remove("active");
-    },
-    focusAction() {
-      const e = this.getFocusableMenuItemElements()[this.focusIndex];
-      if (e) {
-        this.removeCurrentActive();
-        const n = e.closest("li.action");
-        e.focus(), n && n.classList.add("active");
-      }
-    },
-    focusPreviousAction(e) {
-      this.opened && (this.focusIndex === 0 ? this.focusLastAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
-    },
-    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();
-      }
-    },
-    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();
-      }
-    },
-    focusLastAction(e) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = this.getFocusableMenuItemElements().length - 1, this.focusAction());
-    },
-    preventIfEvent(e) {
-      e && (e.preventDefault(), e.stopPropagation());
-    },
-    onFocus(e) {
-      this.$emit("focus", e);
-    },
-    onBlur(e) {
-      this.$emit("blur", e), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.getFocusableMenuItemElements().length === 0 && this.closeMenu(!1);
-    },
-    onClick(e) {
-      this.$emit("click", e);
-    }
-  },
-  /**
-   * The render function to display the component
-   *
-   * @param {Function} h The function to create VNodes
-   * @return {object|undefined} The created VNode
-   */
-  render(e) {
-    const n = (this.$slots.default || []).filter((t) => this.getActionName(t));
-    if (n.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));
-    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 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(
-        "NcButton",
-        {
-          class: [
-            "action-item action-item--single",
-            (_ = t == null ? void 0 : t.data) == null ? void 0 : _.staticClass,
-            (D = t == null ? void 0 : t.data) == null ? void 0 : D.class
-          ],
-          attrs: {
-            ...u,
-            "aria-label": r,
-            title: g
-          },
-          ref: (U = t == null ? void 0 : t.data) == null ? void 0 : U.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,
-            nativeType: j,
-            ...d
-          },
-          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 : () => {
-            },
-            // If we have a click listener,
-            // we bind it to execute on click and forward the click event
-            ...!!p && {
-              click: (J) => {
-                p && p(J);
-              }
-            }
-          }
-        },
-        [
-          e("template", { slot: "icon" }, [a]),
-          h
-        ]
-      );
-    }, 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", {
-        props: {
-          size: 20
-        }
-      }));
-      return e(
-        "NcPopover",
-        {
-          ref: "popover",
-          props: {
-            delay: 0,
-            handleResize: !0,
-            shown: this.opened,
-            placement: this.placement,
-            boundary: this.boundariesElement,
-            container: this.container,
-            popoverBaseClass: "action-item__popper",
-            popupRole: this.config.popupRole,
-            setReturnFocus: this.config.withFocusTrap ? (u = this.$refs.menuButton) == null ? void 0 : u.$el : null,
-            focusTrap: this.config.withFocusTrap
-          },
-          // For some reason the popover component
-          // does not react to props given under the 'props' key,
-          // so we use both 'attrs' and 'props'
-          attrs: {
-            delay: 0,
-            handleResize: !0,
-            shown: this.opened,
-            placement: this.placement,
-            boundary: this.boundariesElement,
-            container: this.container,
-            ...this.manualOpen && { triggers: [] }
-          },
-          on: {
-            show: this.openMenu,
-            "after-show": this.onOpen,
-            hide: this.closeMenu
-          }
-        },
-        [
-          e("NcButton", {
-            class: "action-item__menutoggle",
-            props: {
-              type: this.triggerBtnType,
-              disabled: this.disabled
-            },
-            slot: "trigger",
-            ref: "menuButton",
-            attrs: {
-              id: this.triggerRandomId,
-              "aria-label": this.menuName ? null : this.ariaLabel,
-              ...this.config.triggerA11yAttr
-            },
-            on: {
-              focus: this.onFocus,
-              blur: this.onBlur,
-              click: this.onClick,
-              keydown: this.onTriggerKeydown
-            }
-          }, [
-            e("template", { slot: "icon" }, [c]),
-            this.menuName
-          ]),
-          e("div", {
-            class: {
-              open: this.opened
-            },
-            attrs: {
-              tabindex: "-1",
-              ...this.config.popoverContainerA11yAttrs
-            },
-            on: {
-              keydown: this.onKeydown,
-              mousemove: this.onMouseFocusAction
-            },
-            ref: "menu"
-          }, [
-            e("ul", {
-              attrs: {
-                tabindex: "-1",
-                ...this.config.popoverUlA11yAttrs
-              }
-            }, [
-              t
-            ])
-          ])
-        ]
-      );
-    };
-    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();
-    }), s.length > 0 && this.inline > 0 ? e(
-      "div",
-      {
-        class: [
-          "action-items",
-          "action-item--".concat(this.triggerBtnType)
-        ]
-      },
-      [
-        // Render inline actions
-        ...s.map(l),
-        // render the rest within the popover menu
-        o.length > 0 ? e(
-          "div",
-          {
-            class: [
-              "action-item",
-              {
-                "action-item--open": this.opened
-              }
-            ]
-          },
-          [
-            A(o)
-          ]
-        ) : null
-      ]
-    ) : e(
-      "div",
-      {
-        class: [
-          "action-item action-item--default-popover",
-          "action-item--".concat(this.triggerBtnType),
-          {
-            "action-item--open": this.opened
-          }
-        ]
-      },
-      [
-        A(n)
-      ]
-    ));
-  }
-}, ae = null, ue = null;
-var le = /* @__PURE__ */ re(
-  ce,
-  ae,
-  ue,
-  !1,
-  null,
-  "65ff86b8",
-  null,
-  null
-);
-const Ie = le.exports;
-export {
-  Ie as N
-};