@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcActions-DqMOvrbN.mjs

@@ -1,733 +0,0 @@
-import '../assets/NcActions-pRTZ3RyK.css';
-import { N as NcButton, i as isSlotPopulated } from "./NcButton-Bhuckhtj.mjs";
-import { N as NcPopover } from "./NcPopover-BXfbq-Vs.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
-import { r as register, o as t4, a as t } from "./_l10n-6dsjYig_.mjs";
-import { D as DotsHorizontal } from "./DotsHorizontal-CCNSfNOk.mjs";
-import { computed, warn, h, Fragment, mergeProps } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t4);
-const focusableSelector = ".focusable";
-const _sfc_main = {
-  name: "NcActions",
-  components: {
-    NcButton,
-    DotsHorizontal,
-    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.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"
-  ],
-  data() {
-    return {
-      opened: this.open,
-      focusIndex: 0,
-      randomId: `menu-${GenRandomId()}`,
-      /**
-       * @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();
-    }
-  },
-  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.menuButton?.$el.focus();
-      }
-    },
-    /**
-     * Called when popover is shown after the show delay
-     */
-    onOpen() {
-      this.$nextTick(() => {
-        this.focusFirstAction(null);
-        this.resizePopover();
-      });
-    },
-    /**
-     * Hanle 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 maxHeight = Number.parseFloat(window.getComputedStyle(inner).maxHeight);
-      const height = this.$refs.menu.clientHeight;
-      if (height > maxHeight) {
-        let currentHeight = 0;
-        let actionHeight = 0;
-        for (const action of this.$refs.menuList.children) {
-          if (currentHeight + action.clientHeight / 2 > maxHeight) {
-            inner.style.height = `${currentHeight - actionHeight / 2}px`;
-            break;
-          }
-          actionHeight = action.clientHeight;
-          currentHeight += actionHeight;
-        }
-      }
-    },
-    // 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);
-        }
-      }
-      if (event.key === "Escape") {
-        this.closeMenu();
-        event.preventDefault();
-      }
-    },
-    onTriggerKeydown(event) {
-      if (event.key === "Escape") {
-        if (this.actionsMenuSemanticType === "tooltip") {
-          this.closeMenu();
-        }
-      }
-    },
-    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.menuButton?.$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: "menuButton",
-            "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,
-              // Dialog must have a label
-              "aria-labelledby": this.actionsMenuSemanticType === "dialog" ? triggerRandomId : void 0,
-              "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-dc54ebd1"]]);
-export {
-  NcActions as N
-};