@nextcloud/vue 9.0.0-alpha.4 → 9.0.0-alpha.6

package/dist/chunks/NcActions-BJ703bdY.mjs

@@ -0,0 +1,772 @@
+import '../assets/NcActions-P5DOkDHr.css';
+import { useElementBounding, useWindowSize } from "@vueuse/core";
+import { computed, ref, toRef, warn, h, Fragment, mergeProps } from "vue";
+import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
+import { r as register, m as t4, a as t } from "./_l10n-D7WwrqS-.mjs";
+import { N as NcButton, i as isSlotPopulated } from "./NcButton-C3eisBbK.mjs";
+import { N as NcPopover } from "./NcPopover-Cmspgso4.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-bCAjz9wZ.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t4);
+const focusableSelector = ".focusable";
+const _sfc_main = {
+  name: "NcActions",
+  components: {
+    NcButton,
+    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": computed(() => this.actionsMenuSemanticType === "menu")
+    };
+  },
+  props: {
+    /**
+     * Specify the open state of the popover menu
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Force the name to show for single actions
+     */
+    forceName: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Specify the menu name
+     */
+    menuName: {
+      type: String,
+      default: null
+    },
+    /**
+     * Apply primary styling for this menu
+     */
+    primary: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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(value) {
+        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(value) !== -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: 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.getElementById("content-vue") ?? 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: false
+    },
+    /**
+     * 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(props) {
+    const randomId = `menu-${GenRandomId()}`;
+    const triggerRandomId = `trigger-${randomId}`;
+    const triggerButton = ref();
+    const { top, bottom } = useElementBounding(triggerButton);
+    const { top: boundaryTop, bottom: boundaryBottom } = useElementBounding(toRef(() => props.boundariesElement));
+    const { height: windowHeight } = useWindowSize();
+    const maxMenuHeight = computed(() => Math.max(
+      // Either expand to the top
+      Math.min(
+        // max height is the top position of the trigger minus the header height minus the wedge and the padding
+        top.value - 84,
+        // and also limited to the space in the boundary
+        top.value - boundaryTop.value
+      ),
+      // or expand to the bottom
+      Math.min(
+        // the max height is the window height minus current position of the trigger minus the wedge and padding
+        windowHeight.value - bottom.value - 34,
+        // and limit to the available space in the boundary
+        boundaryBottom.value - bottom.value
+      )
+    ));
+    return {
+      triggerButton,
+      maxMenuHeight,
+      randomId,
+      triggerRandomId
+    };
+  },
+  data() {
+    return {
+      opened: this.open,
+      focusIndex: 0,
+      /**
+       * @type {'menu'|'navigation'|'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() {
+      const configs = {
+        menu: {
+          popupRole: "menu",
+          withArrowNavigation: true,
+          withTabNavigation: false,
+          withFocusTrap: false
+        },
+        navigation: {
+          popupRole: void 0,
+          withArrowNavigation: false,
+          withTabNavigation: true,
+          withFocusTrap: false
+        },
+        dialog: {
+          popupRole: "dialog",
+          withArrowNavigation: false,
+          withTabNavigation: true,
+          withFocusTrap: true
+        },
+        tooltip: {
+          popupRole: void 0,
+          withArrowNavigation: false,
+          withTabNavigation: false,
+          withFocusTrap: false
+        },
+        // 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: true,
+          withTabNavigation: false,
+          withFocusTrap: true
+        }
+      };
+      return configs[this.actionsMenuSemanticType];
+    },
+    withFocusTrap() {
+      return this.config.withFocusTrap;
+    }
+  },
+  watch: {
+    // Watch parent prop
+    open(state) {
+      if (state === this.opened) {
+        return;
+      }
+      this.opened = state;
+    },
+    opened() {
+      this.intersectIntoCurrentFocusTrapStack();
+      if (this.opened) {
+        document.body.addEventListener("keydown", this.handleEscapePressed);
+      } else {
+        document.body.removeEventListener("keydown", this.handleEscapePressed);
+      }
+    }
+  },
+  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(action) {
+      return action?.type?.name;
+    },
+    /**
+     * 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) {
+        return;
+      }
+      if (this.opened) {
+        this.externalFocusTrapStack = [...getTrapStack()];
+        for (const trap of this.externalFocusTrapStack) {
+          trap.pause();
+        }
+      } else {
+        for (const trap of this.externalFocusTrapStack) {
+          trap.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(action) {
+      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(this.getActionName(action));
+    },
+    isAction(action) {
+      return this.getActionName(action)?.startsWith?.("NcAction");
+    },
+    /**
+     * Check whether a icon prop value is an URL or not
+     * @param {string} url The icon prop value
+     */
+    isIconUrl(url) {
+      try {
+        return !!new URL(url, url.startsWith("/") ? window.location.origin : void 0);
+      } catch (error) {
+        return false;
+      }
+    },
+    // MENU STATE MANAGEMENT
+    openMenu() {
+      if (this.opened) {
+        return;
+      }
+      this.opened = true;
+      this.$emit("update:open", true);
+      this.$emit("open");
+    },
+    async closeMenu(returnFocus = true) {
+      if (!this.opened) {
+        return;
+      }
+      await this.$nextTick();
+      this.opened = false;
+      this.$refs.popover?.clearFocusTrap({ returnFocus });
+      this.$emit("update:open", false);
+      this.$emit("close");
+      this.focusIndex = 0;
+      if (returnFocus) {
+        this.$refs.triggerButton?.$el.focus();
+      }
+    },
+    /**
+     * Called when popover is shown after the show delay
+     */
+    onOpen() {
+      this.$nextTick(() => {
+        this.focusFirstAction(null);
+        this.resizePopover();
+      });
+    },
+    /**
+     * Handle resizing the popover to make sure users can discover there is more to scroll
+     */
+    resizePopover() {
+      const inner = this.$refs.menu.closest(".v-popper__inner");
+      const height = this.$refs.menu.clientHeight;
+      if (height > this.maxMenuHeight) {
+        let currentHeight = 0;
+        let actionHeight = 0;
+        for (const action of this.$refs.menuList.children) {
+          if (currentHeight + action.clientHeight / 2 > this.maxMenuHeight) {
+            inner.style.height = `${currentHeight - actionHeight / 2}px`;
+            break;
+          }
+          actionHeight = action.clientHeight;
+          currentHeight += actionHeight;
+        }
+      } else {
+        inner.style.height = "fit-content";
+      }
+    },
+    // MENU KEYS & FOCUS MANAGEMENT
+    /**
+     * @return {HTMLElement|null}
+     */
+    getCurrentActiveMenuItemElement() {
+      return this.$refs.menu.querySelector("li.active");
+    },
+    /**
+     * @return {NodeListOf<HTMLElement>}
+     */
+    getFocusableMenuItemElements() {
+      return this.$refs.menu.querySelectorAll(focusableSelector);
+    },
+    /**
+     * 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(event) {
+      if (document?.activeElement === event.target) {
+        return;
+      }
+      const menuItem = event.target.closest("li");
+      if (menuItem && this.$refs.menu.contains(menuItem)) {
+        const focusableItem = menuItem.querySelector(focusableSelector);
+        if (focusableItem) {
+          const focusList = this.getFocusableMenuItemElements();
+          const focusIndex = [...focusList].indexOf(focusableItem);
+          if (focusIndex > -1) {
+            this.focusIndex = focusIndex;
+            this.focusAction();
+          }
+        }
+      }
+    },
+    /**
+     * Dispatches the keydown listener to different handlers
+     *
+     * @param {object} event The keydown event
+     */
+    onKeydown(event) {
+      if (event.key === "Tab") {
+        if (this.config.withFocusTrap) {
+          return;
+        }
+        if (!this.config.withTabNavigation) {
+          this.closeMenu(true);
+          return;
+        }
+        event.preventDefault();
+        const focusList = this.getFocusableMenuItemElements();
+        const focusIndex = [...focusList].indexOf(document.activeElement);
+        if (focusIndex === -1) {
+          return;
+        }
+        const newFocusIndex = event.shiftKey ? focusIndex - 1 : focusIndex + 1;
+        if (newFocusIndex < 0 || newFocusIndex === focusList.length) {
+          this.closeMenu(true);
+        }
+        this.focusIndex = newFocusIndex;
+        this.focusAction();
+        return;
+      }
+      if (this.config.withArrowNavigation) {
+        if (event.key === "ArrowUp") {
+          this.focusPreviousAction(event);
+        }
+        if (event.key === "ArrowDown") {
+          this.focusNextAction(event);
+        }
+        if (event.key === "PageUp") {
+          this.focusFirstAction(event);
+        }
+        if (event.key === "PageDown") {
+          this.focusLastAction(event);
+        }
+      }
+      this.handleEscapePressed(event);
+    },
+    onTriggerKeydown(event) {
+      if (event.key === "Escape") {
+        if (this.actionsMenuSemanticType === "tooltip") {
+          this.closeMenu();
+        }
+      }
+    },
+    handleEscapePressed(event) {
+      if (event.key === "Escape") {
+        this.closeMenu();
+        event.preventDefault();
+      }
+    },
+    removeCurrentActive() {
+      const currentActiveElement = this.$refs.menu.querySelector("li.active");
+      if (currentActiveElement) {
+        currentActiveElement.classList.remove("active");
+      }
+    },
+    focusAction() {
+      const focusElement = this.getFocusableMenuItemElements()[this.focusIndex];
+      if (focusElement) {
+        this.removeCurrentActive();
+        const liMenuParent = focusElement.closest("li.action");
+        focusElement.focus();
+        if (liMenuParent) {
+          liMenuParent.classList.add("active");
+        }
+      }
+    },
+    focusPreviousAction(event) {
+      if (this.opened) {
+        if (this.focusIndex === 0) {
+          this.focusLastAction(event);
+        } else {
+          this.preventIfEvent(event);
+          this.focusIndex = this.focusIndex - 1;
+        }
+        this.focusAction();
+      }
+    },
+    focusNextAction(event) {
+      if (this.opened) {
+        const indexLength = this.getFocusableMenuItemElements().length - 1;
+        if (this.focusIndex === indexLength) {
+          this.focusFirstAction(event);
+        } else {
+          this.preventIfEvent(event);
+          this.focusIndex = this.focusIndex + 1;
+        }
+        this.focusAction();
+      }
+    },
+    focusFirstAction(event) {
+      if (this.opened) {
+        this.preventIfEvent(event);
+        const firstCheckedIndex = [...this.getFocusableMenuItemElements()].findIndex((button) => {
+          return button.getAttribute("aria-checked") === "true" && button.getAttribute("role") === "menuitemradio";
+        });
+        this.focusIndex = firstCheckedIndex > -1 ? firstCheckedIndex : 0;
+        this.focusAction();
+      }
+    },
+    focusLastAction(event) {
+      if (this.opened) {
+        this.preventIfEvent(event);
+        this.focusIndex = this.getFocusableMenuItemElements().length - 1;
+        this.focusAction();
+      }
+    },
+    preventIfEvent(event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    onFocus(event) {
+      this.$emit("focus", event);
+    },
+    onBlur(event) {
+      this.$emit("blur", event);
+      if (this.actionsMenuSemanticType === "tooltip") {
+        if (this.$refs.menu && this.getFocusableMenuItemElements().length === 0) {
+          this.closeMenu(false);
+        }
+      }
+    },
+    onClick(event) {
+      this.$emit("click", event);
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @return {object|undefined} The created VNode
+   */
+  render() {
+    const actions = [];
+    const findActions = (vnodes, actions2) => {
+      vnodes.forEach((vnode) => {
+        if (this.isAction(vnode)) {
+          actions2.push(vnode);
+          return;
+        }
+        if (vnode.type === Fragment) {
+          findActions(vnode.children, actions2);
+        }
+      });
+    };
+    findActions(this.$slots.default?.(), actions);
+    if (actions.length === 0) {
+      return;
+    }
+    let validInlineActions = actions.filter(this.isValidSingleAction);
+    if (this.forceMenu && validInlineActions.length > 0 && this.inline > 0) {
+      warn("Specifying forceMenu will ignore any inline actions rendering.");
+      validInlineActions = [];
+    }
+    const inlineActions = validInlineActions.slice(0, this.inline);
+    const menuActions = actions.filter((action) => !inlineActions.includes(action));
+    const menuItemsActions = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"];
+    const textInputActions = ["NcActionInput", "NcActionTextEditable"];
+    const linkActions = ["NcActionLink", "NcActionRouter"];
+    const hasTextInputAction = menuActions.some((action) => textInputActions.includes(this.getActionName(action)));
+    const hasMenuItemAction = menuActions.some((action) => menuItemsActions.includes(this.getActionName(action)));
+    const hasLinkAction = menuActions.some((action) => linkActions.includes(this.getActionName(action)));
+    if (hasTextInputAction) {
+      this.actionsMenuSemanticType = "dialog";
+    } else if (hasMenuItemAction) {
+      this.actionsMenuSemanticType = "menu";
+    } else if (hasLinkAction) {
+      this.actionsMenuSemanticType = "navigation";
+    } else {
+      const ncActions = actions.filter((action) => this.getActionName(action).startsWith("NcAction"));
+      if (ncActions.length === actions.length) {
+        this.actionsMenuSemanticType = "tooltip";
+      } else {
+        this.actionsMenuSemanticType = "unknown";
+      }
+    }
+    const renderInlineAction = (action) => {
+      const iconProp = action?.props?.icon;
+      const icon = action?.children?.icon?.()?.[0] ?? (this.isIconUrl(iconProp) ? h("img", { class: "action-item__menutoggle__icon", src: iconProp, alt: "" }) : h("span", { class: ["icon", iconProp] }));
+      const text = action?.children?.default?.()?.[0]?.children?.trim();
+      const buttonText = this.forceName ? text : "";
+      let title = action?.props?.title;
+      if (!(this.forceName || title)) {
+        title = text;
+      }
+      const propsToForward = { ...action?.props ?? {} };
+      const nativeType = ["submit", "reset"].includes(propsToForward.type) ? propsToForward.modelValue : "button";
+      delete propsToForward.modelValue;
+      delete propsToForward.type;
+      return h(
+        NcButton,
+        mergeProps(
+          propsToForward,
+          {
+            class: "action-item action-item--single",
+            "aria-label": action?.props?.["aria-label"] || text,
+            title,
+            // If it has a menuName, we use a secondary button
+            type: this.type || (buttonText ? "secondary" : "tertiary"),
+            disabled: this.disabled || action?.props?.disabled,
+            pressed: action?.props?.modelValue,
+            nativeType,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            // forward any pressed state from NcButton just like NcActionButton does
+            "onUpdate:pressed": action?.props?.["onUpdate:modelValue"] ?? (() => {
+            })
+          }
+        ),
+        {
+          default: () => buttonText,
+          icon: () => icon
+        }
+      );
+    };
+    const renderActionsPopover = (actions2) => {
+      const triggerIcon = isSlotPopulated(this.$slots.icon?.()) ? this.$slots.icon?.() : this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontal, { size: 20 });
+      const triggerRandomId = `${this.randomId}-trigger`;
+      return h(
+        NcPopover,
+        {
+          ref: "popover",
+          delay: 0,
+          handleResize: true,
+          shown: this.opened,
+          placement: this.placement,
+          boundary: this.boundariesElement,
+          container: this.container,
+          ...this.manualOpen && { triggers: [] },
+          popoverBaseClass: "action-item__popper",
+          popupRole: this.config.popupRole,
+          setReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : null,
+          focusTrap: this.config.withFocusTrap,
+          onShow: this.openMenu,
+          onApplyShow: this.onOpen,
+          onHide: this.closeMenu
+        },
+        {
+          trigger: () => h(NcButton, {
+            id: triggerRandomId,
+            class: "action-item__menutoggle",
+            type: this.triggerBtnType,
+            disabled: this.disabled,
+            ariaHidden: this.ariaHidden,
+            ref: "triggerButton",
+            "aria-label": this.menuName ? null : this.ariaLabel,
+            // 'aria-controls' should only present together with a valid aria-haspopup
+            "aria-controls": this.opened && this.config.popupRole ? this.randomId : null,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onClick: this.onClick,
+            onKeydown: this.onTriggerKeydown
+          }, {
+            icon: () => triggerIcon,
+            default: () => this.menuName
+          }),
+          default: () => h("div", {
+            class: {
+              open: this.opened
+            },
+            tabindex: "-1",
+            onKeydown: this.onKeydown,
+            onMousemove: this.onMouseFocusAction,
+            ref: "menu"
+          }, [
+            h("ul", {
+              id: this.randomId,
+              tabindex: "-1",
+              ref: "menuList",
+              role: this.config.popupRole,
+              // For most roles a label is required (dialog, menu), but also in general nothing speaks against labelling a list.
+              // It is even recommended to do so.
+              "aria-labelledby": triggerRandomId,
+              "aria-modal": this.actionsMenuSemanticType === "dialog" ? "true" : void 0
+            }, [
+              actions2
+            ])
+          ])
+        }
+      );
+    };
+    if (actions.length === 1 && validInlineActions.length === 1 && !this.forceMenu) {
+      return renderInlineAction(actions[0]);
+    }
+    this.$nextTick(() => {
+      if (this.opened && this.$refs.menu) {
+        this.resizePopover();
+        const isAnyActive = this.$refs.menu.querySelector("li.active") || [];
+        if (isAnyActive.length === 0) {
+          this.focusFirstAction();
+        }
+      }
+    });
+    if (inlineActions.length > 0 && this.inline > 0) {
+      return h(
+        "div",
+        {
+          class: [
+            "action-items",
+            `action-item--${this.triggerBtnType}`
+          ]
+        },
+        [
+          // Render inline actions
+          ...inlineActions.map(renderInlineAction),
+          // render the rest within the popover menu
+          menuActions.length > 0 ? h(
+            "div",
+            {
+              class: [
+                "action-item",
+                {
+                  "action-item--open": this.opened
+                }
+              ]
+            },
+            [
+              renderActionsPopover(menuActions)
+            ]
+          ) : null
+        ]
+      );
+    }
+    return h(
+      "div",
+      {
+        class: [
+          "action-item action-item--default-popover",
+          `action-item--${this.triggerBtnType}`,
+          {
+            "action-item--open": this.opened
+          }
+        ]
+      },
+      [
+        renderActionsPopover(actions)
+      ]
+    );
+  }
+};
+const NcActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-89500edf"]]);
+export {
+  NcActions as N
+};