@nextcloud/vue/dist/Components/NcActions.mjs

Nextcloud vue components

import "../assets/index31.css";
import _ from "./NcButton.mjs";
import T from "./NcPopover.mjs";
import { G as z } from "../chunks/GenRandomId-1e1b509a.mjs";
import { t as P } from "../chunks/l10n-9a5a6afc.mjs";
import K from "vue";
import R from "vue-material-design-icons/DotsHorizontal.vue";
import { n as V } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const y = ".focusable", j = { name: "NcActions", components: { NcButton: _, DotsHorizontal: R, NcPopover: T }, props: { open: { type: Boolean, default: !1 }, manualOpen: { type: Boolean, default: !1 }, forceMenu: { type: Boolean, default: !1 }, forceName: { type: Boolean, default: !1 }, menuName: { type: String, default: null }, primary: { type: Boolean, default: !1 }, type: { type: String, validator(e) {
  return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(e) !== -1;
}, default: null }, defaultIcon: { type: String, default: "" }, ariaLabel: { type: String, default: P("Actions") }, ariaHidden: { type: Boolean, default: null }, placement: { type: String, default: "bottom" }, boundariesElement: { type: Element, default: () => document.querySelector("body") }, container: { type: [String, Object, Element, Boolean], default: "body" }, disabled: { type: Boolean, default: !1 }, inline: { type: Number, default: 0 } }, emits: ["open", "update:open", "close", "focus", "blur"], data() {
  return { opened: this.open, focusIndex: 0, randomId: `menu-${z()}` };
}, computed: { triggerBtnType() {
  return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
} }, watch: { open(e) {
  e !== this.opened && (this.opened = e);
} }, methods: { isValidSingleAction(e) {
  var c, a, r, u, d;
  const n = (d = (r = (a = (c = e == null ? void 0 : e.componentOptions) == null ? void 0 : c.Ctor) == null ? void 0 : a.extendOptions) == null ? void 0 : r.name) != null ? d : (u = e == null ? void 0 : e.componentOptions) == null ? void 0 : u.tag;
  return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(n);
}, openMenu(e) {
  this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
}, closeMenu(e = !0) {
  this.opened && (this.opened = !1, this.$refs.popover.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, this.$refs.menuButton.$el.focus());
}, onOpen(e) {
  this.$nextTick(() => {
    this.focusFirstAction(e);
  });
}, onMouseFocusAction(e) {
  if (document.activeElement === e.target)
    return;
  const n = e.target.closest("li");
  if (n) {
    const c = n.querySelector(y);
    if (c) {
      const a = [...this.$refs.menu.querySelectorAll(y)].indexOf(c);
      a > -1 && (this.focusIndex = a, this.focusAction());
    }
  }
}, onKeydown(e) {
  (e.keyCode === 38 || e.keyCode === 9 && e.shiftKey) && this.focusPreviousAction(e), (e.keyCode === 40 || e.keyCode === 9 && !e.shiftKey) && this.focusNextAction(e), e.keyCode === 33 && this.focusFirstAction(e), e.keyCode === 34 && this.focusLastAction(e), e.keyCode === 27 && (this.closeMenu(), e.preventDefault());
}, removeCurrentActive() {
  const e = this.$refs.menu.querySelector("li.active");
  e && e.classList.remove("active");
}, focusAction() {
  const e = this.$refs.menu.querySelectorAll(y)[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.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
}, focusNextAction(e) {
  if (this.opened) {
    const n = this.$refs.menu.querySelectorAll(y).length - 1;
    this.focusIndex === n ? this.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
  }
}, focusFirstAction(e) {
  this.opened && (this.preventIfEvent(e), this.focusIndex = 0, this.focusAction());
}, focusLastAction(e) {
  this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(y).length - 1, this.focusAction());
}, preventIfEvent(e) {
  e && (e.preventDefault(), e.stopPropagation());
}, onFocus(e) {
  this.$emit("focus", e);
}, onBlur(e) {
  this.$emit("blur", e);
} }, render(e) {
  const n = (this.$slots.default || []).filter((t) => {
    var i, o, s, l;
    return ((i = t == null ? void 0 : t.componentOptions) == null ? void 0 : i.tag) || ((l = (s = (o = t == null ? void 0 : t.componentOptions) == null ? void 0 : o.Ctor) == null ? void 0 : s.extendOptions) == null ? void 0 : l.name);
  }), c = (t) => {
    var i, o, s, l, h, p, m, f;
    return ((h = (s = (o = (i = t == null ? void 0 : t.componentOptions) == null ? void 0 : i.Ctor) == null ? void 0 : o.extendOptions) == null ? void 0 : s.name) != null ? h : (l = t == null ? void 0 : t.componentOptions) == null ? void 0 : l.tag) === "NcActionLink" && ((f = (m = (p = t == null ? void 0 : t.componentOptions) == null ? void 0 : p.propsData) == null ? void 0 : m.href) == null ? void 0 : f.startsWith(window.location.origin));
  }, a = n.every(c);
  let r = n.filter(this.isValidSingleAction);
  if (this.forceMenu && r.length > 0 && this.inline > 0 && (K.util.warn("Specifying forceMenu will ignore any inline actions rendering."), r = []), n.length === 0)
    return;
  const u = (t) => {
    var m, f, v, A, b, x, B, O, I, $, g, N, S, C, k, w, M, F, D, E, L, q;
    const i = ((v = (f = (m = t == null ? void 0 : t.data) == null ? void 0 : m.scopedSlots) == null ? void 0 : f.icon()) == null ? void 0 : v[0]) || e("span", { class: ["icon", (b = (A = t == null ? void 0 : t.componentOptions) == null ? void 0 : A.propsData) == null ? void 0 : b.icon] }), o = (B = (x = t == null ? void 0 : t.componentOptions) == null ? void 0 : x.listeners) == null ? void 0 : B.click, s = (N = (g = ($ = (I = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.children) == null ? void 0 : I[0]) == null ? void 0 : $.text) == null ? void 0 : g.trim) == null ? void 0 : N.call(g), l = ((C = (S = t == null ? void 0 : t.componentOptions) == null ? void 0 : S.propsData) == null ? void 0 : C.ariaLabel) || s, h = this.forceName ? s : "";
    let p = (w = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.propsData) == null ? void 0 : w.title;
    return this.forceName || p || (p = s), e("NcButton", { class: ["action-item action-item--single", (M = t == null ? void 0 : t.data) == null ? void 0 : M.staticClass, (F = t == null ? void 0 : t.data) == null ? void 0 : F.class], attrs: { "aria-label": l, title: p }, ref: (D = t == null ? void 0 : t.data) == null ? void 0 : D.ref, props: { type: this.type || (h ? "secondary" : "tertiary"), disabled: this.disabled || ((L = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : L.disabled), ariaHidden: this.ariaHidden, ...(q = t == null ? void 0 : t.componentOptions) == null ? void 0 : q.propsData }, on: { focus: this.onFocus, blur: this.onBlur, ...!!o && { click: (H) => {
      o && o(H);
    } } } }, [e("template", { slot: "icon" }, [i]), h]);
  }, d = (t) => {
    var o, s;
    const i = ((o = this.$slots.icon) == null ? void 0 : o[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", setReturnFocus: (s = this.$refs.menuButton) == null ? void 0 : s.$el }, attrs: { delay: 0, handleResize: !0, shown: this.opened, placement: this.placement, boundary: this.boundariesElement, container: this.container, ...this.manualOpen && { triggers: [] }, popoverBaseClass: "action-item__popper" }, on: { show: this.openMenu, "after-show": this.onOpen, hide: this.closeMenu } }, [e("NcButton", { class: "action-item__menutoggle", props: { type: this.triggerBtnType, disabled: this.disabled, ariaHidden: this.ariaHidden }, slot: "trigger", ref: "menuButton", attrs: { "aria-haspopup": a ? null : "menu", "aria-label": this.menuName ? null : this.ariaLabel, "aria-controls": this.opened ? this.randomId : null, "aria-expanded": this.opened.toString() }, on: { focus: this.onFocus, blur: this.onBlur } }, [e("template", { slot: "icon" }, [i]), this.menuName]), e("div", { class: { open: this.opened }, attrs: { tabindex: "-1" }, on: { keydown: this.onKeydown, mousemove: this.onMouseFocusAction }, ref: "menu" }, [e("ul", { attrs: { id: this.randomId, tabindex: "-1", role: a ? null : "menu" } }, [t])])]);
  };
  if (n.length === 1 && r.length === 1 && !this.forceMenu)
    return u(r[0]);
  if (r.length > 0 && this.inline > 0) {
    const t = r.slice(0, this.inline), i = n.filter((o) => !t.includes(o));
    return e("div", { class: ["action-items", `action-item--${this.triggerBtnType}`] }, [...t.map(u), i.length > 0 ? e("div", { class: ["action-item", { "action-item--open": this.opened }] }, [d(i)]) : null]);
  }
  return e("div", { class: ["action-item action-item--default-popover", `action-item--${this.triggerBtnType}`, { "action-item--open": this.opened }] }, [d(n)]);
} }, G = null, W = null;
var J = V(j, G, W, !1, null, "b84866e9", null, null);
const oe = J.exports;
export {
  oe as default
};