@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcActions-z-BOuDhM.cjs

@@ -1,532 +0,0 @@
-require('../assets/NcActions-mSL9fcPO.css');
-"use strict";
-const _ = require("../Components/NcButton.cjs"), B = require("./NcPopover-judBGW5r.cjs"), F = require("./GenRandomId-ULxaMkkr.cjs"), w = require("./focusTrap-n3H52LOw.cjs"), f = require("./_l10n-mEcF7TYU.cjs"), A = require("vue"), O = require("./DotsHorizontal-6hepLUSS.cjs"), q = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), L = (t) => t && t.__esModule ? t : { default: t }, E = /* @__PURE__ */ L(A);
-f.register(f.t4);
-const c = ".focusable", D = {
-  name: "NcActions",
-  components: {
-    NcButton: _,
-    DotsHorizontal: O.DotsHorizontal,
-    NcPopover: B.NcPopover
-  },
-  provide() {
-    return {
-      /**
-       * NcActions can be used as:
-       * - Application menu (has menu role)
-       * - Navigation (has no specific role, should be used an element with navigation 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": A.computed(() => 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
-    },
-    /**
-     * 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(t) {
-        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(t) !== -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: f.t("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"
-  ],
-  data() {
-    return {
-      opened: this.open,
-      focusIndex: 0,
-      randomId: `menu-${F.GenRandomId()}`,
-      /**
-       * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
-       */
-      actionsMenuSemanticType: "",
-      externalFocusTrapStack: []
-    };
-  },
-  computed: {
-    triggerBtnType() {
-      return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
-    },
-    withFocusTrap() {
-      return this.actionsMenuSemanticType === "dialog";
-    }
-  },
-  watch: {
-    // Watch parent prop
-    open(t) {
-      t !== this.opened && (this.opened = t);
-    },
-    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(t) {
-      return t?.componentOptions?.Ctor?.extendOptions?.name ?? t?.componentOptions?.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.withFocusTrap)
-        if (this.opened) {
-          this.externalFocusTrapStack = [...w.getTrapStack()];
-          for (const t of this.externalFocusTrapStack)
-            t.pause();
-        } else {
-          for (const t of this.externalFocusTrapStack)
-            t.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(t) {
-      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(this.getActionName(t));
-    },
-    /**
-     * Check whether a icon prop value is an URL or not
-     * @param {string} url The icon prop value
-     */
-    isIconUrl(t) {
-      try {
-        return !!new URL(t, t.startsWith("/") ? window.location.origin : void 0);
-      } catch {
-        return !1;
-      }
-    },
-    // MENU STATE MANAGEMENT
-    openMenu(t) {
-      this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
-    },
-    closeMenu(t = !0) {
-      this.opened && (this.opened = !1, this.$refs.popover.clearFocusTrap({ returnFocus: t }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, t && this.$refs.menuButton.$el.focus());
-    },
-    onOpen(t) {
-      this.$nextTick(() => {
-        this.focusFirstAction(t);
-      });
-    },
-    // MENU KEYS & FOCUS MANAGEMENT
-    // 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
-    onMouseFocusAction(t) {
-      if (document.activeElement === t.target)
-        return;
-      const n = t.target.closest("li");
-      if (n && this.$refs.menu.contains(n)) {
-        const i = n.querySelector(c);
-        if (i) {
-          const o = [...this.$refs.menu.querySelectorAll(c)].indexOf(i);
-          o > -1 && (this.focusIndex = o, this.focusAction());
-        }
-      }
-    },
-    /**
-     * Dispatches the keydown listener to different handlers
-     *
-     * @param {object} event The keydown event
-     */
-    onKeydown(t) {
-      t.key === "Tab" && !this.withFocusTrap && this.closeMenu(!0), t.key === "ArrowUp" && this.focusPreviousAction(t), t.key === "ArrowDown" && this.focusNextAction(t), t.key === "PageUp" && this.focusFirstAction(t), t.key === "PageDown" && this.focusLastAction(t), t.key === "Escape" && (this.closeMenu(), t.preventDefault());
-    },
-    removeCurrentActive() {
-      const t = this.$refs.menu.querySelector("li.active");
-      t && t.classList.remove("active");
-    },
-    focusAction() {
-      const t = this.$refs.menu.querySelectorAll(c)[this.focusIndex];
-      if (t) {
-        this.removeCurrentActive();
-        const n = t.closest("li.action");
-        t.focus(), n && n.classList.add("active");
-      }
-    },
-    focusPreviousAction(t) {
-      this.opened && (this.focusIndex === 0 ? this.focusLastAction(t) : (this.preventIfEvent(t), this.focusIndex = this.focusIndex - 1), this.focusAction());
-    },
-    focusNextAction(t) {
-      if (this.opened) {
-        const n = this.$refs.menu.querySelectorAll(c).length - 1;
-        this.focusIndex === n ? this.focusFirstAction(t) : (this.preventIfEvent(t), this.focusIndex = this.focusIndex + 1), this.focusAction();
-      }
-    },
-    focusFirstAction(t) {
-      if (this.opened) {
-        this.preventIfEvent(t);
-        const n = [...this.$refs.menu.querySelectorAll(c)].findIndex((i) => i.parentElement.getAttribute("aria-selected"));
-        this.focusIndex = n > -1 ? n : 0, this.focusAction();
-      }
-    },
-    focusLastAction(t) {
-      this.opened && (this.preventIfEvent(t), this.focusIndex = this.$refs.menu.querySelectorAll(c).length - 1, this.focusAction());
-    },
-    preventIfEvent(t) {
-      t && (t.preventDefault(), t.stopPropagation());
-    },
-    onFocus(t) {
-      this.$emit("focus", t);
-    },
-    onBlur(t) {
-      this.$emit("blur", t), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.$refs.menu.querySelectorAll(c).length === 0 && this.closeMenu(!1);
-    },
-    onClick(t) {
-      this.$emit("click", t);
-    }
-  },
-  /**
-   * The render function to display the component
-   *
-   * @param {Function} h The function to create VNodes
-   * @return {object|undefined} The created VNode
-   */
-  render(t) {
-    const n = (this.$slots.default || []).filter((e) => this.getActionName(e));
-    if (n.length === 0)
-      return;
-    let i = n.filter(this.isValidSingleAction);
-    this.forceMenu && i.length > 0 && this.inline > 0 && (E.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), i = []);
-    const a = i.slice(0, this.inline), o = n.filter((e) => !a.includes(e)), g = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], I = ["NcActionInput", "NcActionTextEditable"], N = ["NcActionLink", "NcActionRouter"], S = o.some((e) => I.includes(this.getActionName(e))), T = o.some((e) => g.includes(this.getActionName(e))), b = o.some((e) => N.includes(this.getActionName(e)));
-    S ? this.actionsMenuSemanticType = "dialog" : T ? this.actionsMenuSemanticType = "menu" : b ? this.actionsMenuSemanticType = "navigation" : n.filter((s) => this.getActionName(s).startsWith("NcAction")).length === n.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "dialog";
-    const l = {
-      dialog: "dialog",
-      menu: "menu",
-      navigation: "true",
-      tooltip: "true"
-    }[this.actionsMenuSemanticType], h = (e) => {
-      const s = e?.componentOptions?.propsData?.icon, x = e?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(s) ? t("img", { class: "action-item__menutoggle__icon", attrs: { src: s, alt: "" } }) : t("span", { class: ["icon", s] })), v = e?.data?.attrs || {}, u = e?.componentOptions?.listeners?.click, p = e?.componentOptions?.children?.[0]?.text?.trim?.(), k = e?.componentOptions?.propsData?.ariaLabel || p, y = this.forceName ? p : "";
-      let d = e?.componentOptions?.propsData?.title;
-      this.forceName || d || (d = p);
-      const r = { ...e?.componentOptions?.propsData ?? {} }, $ = ["submit", "reset"].includes(r.type) ? r.modelValue : "button";
-      return delete r.modelValue, delete r.type, t(
-        "NcButton",
-        {
-          class: [
-            "action-item action-item--single",
-            e?.data?.staticClass,
-            e?.data?.class
-          ],
-          attrs: {
-            ...v,
-            "aria-label": k,
-            title: d
-          },
-          ref: e?.data?.ref,
-          props: {
-            // If it has a menuName, we use a secondary button
-            type: this.type || (y ? "secondary" : "tertiary"),
-            disabled: this.disabled || e?.componentOptions?.propsData?.disabled,
-            pressed: e?.componentOptions?.propsData?.modelValue,
-            nativeType: $,
-            ...r
-          },
-          on: {
-            focus: this.onFocus,
-            blur: this.onBlur,
-            // forward any pressed state from NcButton just like NcActionButton does
-            "update:pressed": e?.componentOptions?.listeners?.["update:modelValue"] ?? (() => {
-            }),
-            // If we have a click listener,
-            // we bind it to execute on click and forward the click event
-            ...!!u && {
-              click: (M) => {
-                u && u(M);
-              }
-            }
-          }
-        },
-        [
-          t("template", { slot: "icon" }, [x]),
-          y
-        ]
-      );
-    }, m = (e) => {
-      const s = this.$slots.icon?.[0] || (this.defaultIcon ? t("span", { class: ["icon", this.defaultIcon] }) : t("DotsHorizontal", {
-        props: {
-          size: 20
-        }
-      }));
-      return t(
-        "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: l,
-            setReturnFocus: this.withFocusTrap ? this.$refs.menuButton?.$el : null,
-            focusTrap: this.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
-          }
-        },
-        [
-          t("NcButton", {
-            class: "action-item__menutoggle",
-            props: {
-              type: this.triggerBtnType,
-              disabled: this.disabled
-            },
-            slot: "trigger",
-            ref: "menuButton",
-            attrs: {
-              "aria-label": this.menuName ? null : this.ariaLabel,
-              "aria-controls": this.opened ? this.randomId : null
-            },
-            on: {
-              focus: this.onFocus,
-              blur: this.onBlur,
-              click: this.onClick
-            }
-          }, [
-            t("template", { slot: "icon" }, [s]),
-            this.menuName
-          ]),
-          t("div", {
-            class: {
-              open: this.opened
-            },
-            attrs: {
-              tabindex: "-1"
-            },
-            on: {
-              keydown: this.onKeydown,
-              mousemove: this.onMouseFocusAction
-            },
-            ref: "menu"
-          }, [
-            t("ul", {
-              attrs: {
-                id: this.randomId,
-                tabindex: "-1",
-                role: l !== "true" ? l : void 0
-                // TODO: allow to provide dialog aria-label
-              }
-            }, [
-              e
-            ])
-          ])
-        ]
-      );
-    };
-    return n.length === 1 && i.length === 1 && !this.forceMenu ? h(n[0]) : (this.$nextTick(() => {
-      this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), a.length > 0 && this.inline > 0 ? t(
-      "div",
-      {
-        class: [
-          "action-items",
-          `action-item--${this.triggerBtnType}`
-        ]
-      },
-      [
-        // Render inline actions
-        ...a.map(h),
-        // render the rest within the popover menu
-        o.length > 0 ? t(
-          "div",
-          {
-            class: [
-              "action-item",
-              {
-                "action-item--open": this.opened
-              }
-            ]
-          },
-          [
-            m(o)
-          ]
-        ) : null
-      ]
-    ) : t(
-      "div",
-      {
-        class: [
-          "action-item action-item--default-popover",
-          `action-item--${this.triggerBtnType}`,
-          {
-            "action-item--open": this.opened
-          }
-        ]
-      },
-      [
-        m(n)
-      ]
-    ));
-  }
-}, R = null, P = null;
-var C = /* @__PURE__ */ q.normalizeComponent(
-  D,
-  R,
-  P,
-  !1,
-  null,
-  "0d636de9",
-  null,
-  null
-);
-const z = C.exports;
-exports.NcActions = z;