@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/{NcAvatar-1MXwkOA2.cjs → NcAvatar-uPVG9WWg.cjs}

@@ -1,11 +1,11 @@
-var W = require("../assets/NcAvatar-qgACiUer.css");
-const M = require("./NcActions-VJy75Dj8.cjs"), w = require("./NcActionLink-QLFtD_iF.cjs"), L = require("./NcButton-Uxh-oARg.cjs"), C = require("./NcLoadingIcon-Fwid-wWE.cjs"), f = require("./NcUserStatusIcon-swCHU0tl.cjs"), p = require("./usernameToColor--FE9Dq8h.cjs"), l = require("@nextcloud/router"), t = require("vue");
+var W = require("../assets/NcAvatar-DCUiVghV.css");
+const M = require("./NcActions-YpbmJ7hS.cjs"), C = require("./NcActionLink-eBaRU5qY.cjs"), L = require("./NcButton-7UKtzkX5.cjs"), w = require("./NcLoadingIcon-Fwid-wWE.cjs"), p = require("./NcUserStatusIcon-b0xt-g7X.cjs"), m = require("./usernameToColor-r5M5P032.cjs"), h = require("@nextcloud/router"), e = require("vue");
 ;/* empty css                                                                           */
 const B = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
 require("linkify-string");
 require("escape-html");
 require("striptags");
-const d = require("@nextcloud/auth"), x = require("@nextcloud/axios"), D = require("@nextcloud/capabilities"), u = require("./_l10n-wK0o0jNS.cjs"), I = require("./DotsHorizontal-Ehuu1q0g.cjs"), o = require("@nextcloud/event-bus"), q = require("@nextcloud/browser-storage"), O = require("@vueuse/components"), E = (e) => e && e.__esModule ? e : { default: e }, g = /* @__PURE__ */ E(x);
+const f = require("@nextcloud/auth"), x = require("@nextcloud/axios"), D = require("@nextcloud/capabilities"), l = require("./_l10n-Fl7RzbcZ.cjs"), I = require("./DotsHorizontal-z8LXg-4B.cjs"), o = require("@nextcloud/event-bus"), q = require("@nextcloud/browser-storage"), O = require("@vueuse/components"), E = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ E(x);
 /**
  * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>
  *
@@ -27,7 +27,7 @@ const d = require("@nextcloud/auth"), x = require("@nextcloud/axios"), D = requi
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const v = {
+const S = {
   data() {
     return {
       hasStatus: !1,
@@ -46,34 +46,35 @@ const v = {
      *
      * @return {Promise<void>}
      */
-    async fetchUserStatus(e) {
-      if (!e)
+    async fetchUserStatus(t) {
+      var r, i;
+      if (!t)
         return;
       const s = D.getCapabilities();
-      if (!(!Object.prototype.hasOwnProperty.call(s, "user_status") || !s.user_status.enabled) && d.getCurrentUser())
+      if (!(!Object.prototype.hasOwnProperty.call(s, "user_status") || !s.user_status.enabled) && f.getCurrentUser())
         try {
-          const { data: a } = await g.default.get(l.generateOcsUrl("apps/user_status/api/v1/statuses/{userId}", { userId: e })), {
-            status: i,
-            message: n,
-            icon: r
-          } = a.ocs.data;
-          this.userStatus.status = i, this.userStatus.message = n || "", this.userStatus.icon = r || "", this.hasStatus = !0;
-        } catch (a) {
-          if (a.response.status === 404 && a.response.data.ocs?.data?.length === 0)
+          const { data: n } = await v.default.get(h.generateOcsUrl("apps/user_status/api/v1/statuses/{userId}", { userId: t })), {
+            status: a,
+            message: c,
+            icon: d
+          } = n.ocs.data;
+          this.userStatus.status = a, this.userStatus.message = c || "", this.userStatus.icon = d || "", this.hasStatus = !0;
+        } catch (n) {
+          if (n.response.status === 404 && ((i = (r = n.response.data.ocs) == null ? void 0 : r.data) == null ? void 0 : i.length) === 0)
             return;
-          console.error(a);
+          console.error(n);
         }
     }
   }
 };
-u.register(u.t9);
-const S = q.getBuilder("nextcloud").persist().build();
-function z(e) {
-  const s = S.getItem("user-has-avatar." + e);
+l.register(l.t9);
+const y = q.getBuilder("nextcloud").persist().build();
+function z(t) {
+  const s = y.getItem("user-has-avatar." + t);
   return typeof s == "string" ? !!s : null;
 }
-function m(e, s) {
-  e && S.setItem("user-has-avatar." + e, s);
+function g(t, s) {
+  t && y.setItem("user-has-avatar." + t, s);
 }
 const V = {
   name: "NcAvatar",
@@ -83,12 +84,12 @@ const V = {
   components: {
     DotsHorizontal: I.DotsHorizontal,
     NcActions: M.NcActions,
-    NcActionLink: w.NcActionLink,
+    NcActionLink: C.NcActionLink,
     NcButton: L.NcButton,
-    NcLoadingIcon: C.NcLoadingIcon,
-    NcUserStatusIcon: f.NcUserStatusIcon
+    NcLoadingIcon: w.NcLoadingIcon,
+    NcUserStatusIcon: p.NcUserStatusIcon
   },
-  mixins: [v],
+  mixins: [S],
   props: {
     /**
      * Set a custom url to the avatar image
@@ -222,8 +223,9 @@ const V = {
   },
   computed: {
     avatarAriaLabel() {
+      var t, s;
       if (this.hasMenu)
-        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? u.t("Avatar of {displayName}, {status}", { displayName: this.displayName ?? this.user, status: f.getUserStatusText(this.userStatus.status) }) : u.t("Avatar of {displayName}", { displayName: this.displayName ?? this.user });
+        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? l.t("Avatar of {displayName}, {status}", { displayName: (t = this.displayName) != null ? t : this.user, status: p.getUserStatusText(this.userStatus.status) }) : l.t("Avatar of {displayName}", { displayName: (s = this.displayName) != null ? s : this.user });
     },
     canDisplayUserStatus() {
       return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
@@ -248,13 +250,15 @@ const V = {
       return typeof this.url < "u";
     },
     hasMenu() {
-      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === d.getCurrentUser()?.uid || this.userDoesNotExist || this.url);
+      var t;
+      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((t = f.getCurrentUser()) == null ? void 0 : t.uid) || this.userDoesNotExist || this.url);
     },
     /**
      * True if initials should be shown as the user icon fallback
      */
     showInitials() {
-      return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon?.());
+      var t, s;
+      return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || (s = (t = this.$slots).icon) != null && s.call(t));
     },
     avatarStyle() {
       return {
@@ -264,15 +268,15 @@ const V = {
       };
     },
     initialsWrapperStyle() {
-      const { r: e, g: s, b: a } = p.usernameToColor(this.userIdentifier);
+      const { r: t, g: s, b: r } = m.usernameToColor(this.userIdentifier);
       return {
-        backgroundColor: `rgba(${e}, ${s}, ${a}, 0.1)`
+        backgroundColor: "rgba(".concat(t, ", ").concat(s, ", ").concat(r, ", 0.1)")
       };
     },
     initialsStyle() {
-      const { r: e, g: s, b: a } = p.usernameToColor(this.userIdentifier);
+      const { r: t, g: s, b: r } = m.usernameToColor(this.userIdentifier);
       return {
-        color: `rgb(${e}, ${s}, ${a})`
+        color: "rgb(".concat(t, ", ").concat(s, ", ").concat(r, ")")
       };
     },
     tooltip() {
@@ -282,31 +286,31 @@ const V = {
      * Get the (max. two) initials of the user as uppcase string
      */
     initials() {
-      let e = "?";
+      let t = "?";
       if (this.showInitials) {
         const s = this.userIdentifier.trim();
         if (s === "")
           return "?";
-        const a = s.match(/[\p{L}\p{N}\s]/gu).join(""), i = a.lastIndexOf(" ");
-        e = String.fromCodePoint(a.codePointAt(0)), i !== -1 && (e = e.concat(String.fromCodePoint(a.codePointAt(i + 1))));
+        const r = s.match(/[\p{L}\p{N}\s]/gu).join(""), i = r.lastIndexOf(" ");
+        t = String.fromCodePoint(r.codePointAt(0)), i !== -1 && (t = t.concat(String.fromCodePoint(r.codePointAt(i + 1))));
       }
-      return e.toLocaleUpperCase();
+      return t.toLocaleUpperCase();
     },
     menu() {
-      const e = this.contactsMenuActions.map((a) => ({
-        href: a.hyperlink,
-        icon: a.icon,
-        text: a.title
+      const t = this.contactsMenuActions.map((r) => ({
+        href: r.hyperlink,
+        icon: r.icon,
+        text: r.title
       }));
-      function s(a) {
-        const i = document.createTextNode(a), n = document.createElement("p");
+      function s(r) {
+        const i = document.createTextNode(r), n = document.createElement("p");
         return n.appendChild(i), n.innerHTML;
       }
       return this.showUserStatus && (this.userStatus.icon || this.userStatus.message) ? [{
         href: "#",
-        icon: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${s(this.userStatus.icon)}</text></svg>`,
-        text: `${this.userStatus.message}`
-      }].concat(e) : e;
+        icon: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>".concat(s(this.userStatus.icon), "</text></svg>"),
+        text: "".concat(this.userStatus.message)
+      }].concat(t) : t;
     }
   },
   watch: {
@@ -324,20 +328,20 @@ const V = {
     o.unsubscribe("settings:avatar:updated", this.loadAvatarUrl), o.unsubscribe("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && o.unsubscribe("user_status:status.updated", this.handleUserStatusUpdated);
   },
   methods: {
-    t: u.t,
-    handleUserStatusUpdated(e) {
-      this.user === e.userId && (this.userStatus = {
-        status: e.status,
-        icon: e.icon,
-        message: e.message
+    t: l.t,
+    handleUserStatusUpdated(t) {
+      this.user === t.userId && (this.userStatus = {
+        status: t.status,
+        icon: t.icon,
+        message: t.message
       });
     },
     /**
      * Toggle the popover menu on click or enter
      * @param {KeyboardEvent|MouseEvent} event the UI event
      */
-    async toggleMenu(e) {
-      e.type === "keydown" && e.key !== "Enter" || (this.contactsMenuOpenState || await this.fetchContactsMenu(), this.contactsMenuOpenState = !this.contactsMenuOpenState);
+    async toggleMenu(t) {
+      t.type === "keydown" && t.key !== "Enter" || (this.contactsMenuOpenState || await this.fetchContactsMenu(), this.contactsMenuOpenState = !this.contactsMenuOpenState);
     },
     closeMenu() {
       this.contactsMenuOpenState = !1;
@@ -345,7 +349,7 @@ const V = {
     async fetchContactsMenu() {
       this.contactsMenuLoading = !0;
       try {
-        const e = encodeURIComponent(this.user), { data: s } = await g.default.post(l.generateUrl("contactsmenu/findOne"), `shareType=0&shareWith=${e}`);
+        const t = encodeURIComponent(this.user), { data: s } = await v.default.post(h.generateUrl("contactsmenu/findOne"), "shareType=0&shareWith=".concat(t));
         this.contactsMenuActions = s.topAction ? [s.topAction].concat(s.actions) : s.actions;
       } catch {
         this.contactsMenuOpenState = !1;
@@ -365,14 +369,14 @@ const V = {
         return;
       }
       if (this.size <= 64) {
-        const e = this.avatarUrlGenerator(this.user, 64), s = [
-          e + " 1x",
+        const t = this.avatarUrlGenerator(this.user, 64), s = [
+          t + " 1x",
           this.avatarUrlGenerator(this.user, 512) + " 8x"
         ].join(", ");
-        this.updateImageIfValid(e, s);
+        this.updateImageIfValid(t, s);
       } else {
-        const e = this.avatarUrlGenerator(this.user, 512);
-        this.updateImageIfValid(e);
+        const t = this.avatarUrlGenerator(this.user, 512);
+        this.updateImageIfValid(t);
       }
     },
     /**
@@ -382,18 +386,19 @@ const V = {
      * @param {number} size the desired size
      * @return {string}
      */
-    avatarUrlGenerator(e, s) {
-      const a = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
-      let i = "/avatar/{user}/{size}" + (a ? "/dark" : "");
-      this.isGuest && (i = "/avatar/guest/{user}/{size}" + (a ? "/dark" : ""));
-      let n = l.generateUrl(
+    avatarUrlGenerator(t, s) {
+      var a;
+      const r = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
+      let i = "/avatar/{user}/{size}" + (r ? "/dark" : "");
+      this.isGuest && (i = "/avatar/guest/{user}/{size}" + (r ? "/dark" : ""));
+      let n = h.generateUrl(
         i,
         {
-          user: e,
+          user: t,
           size: s
         }
       );
-      return e === d.getCurrentUser()?.uid && typeof oc_userconfig < "u" && (n += "?v=" + oc_userconfig.avatar.version), n;
+      return t === ((a = f.getCurrentUser()) == null ? void 0 : a.uid) && typeof oc_userconfig < "u" && (n += "?v=" + oc_userconfig.avatar.version), n;
     },
     /**
      * Check if the provided url is valid and update Avatar if so
@@ -401,82 +406,87 @@ const V = {
      * @param {string} url the avatar url
      * @param {Array} srcset the avatar srcset
      */
-    updateImageIfValid(e, s = null) {
-      const a = z(this.user);
-      if (this.isUserDefined && typeof a == "boolean") {
-        this.isAvatarLoaded = !0, this.avatarUrlLoaded = e, s && (this.avatarSrcSetLoaded = s), a === !1 && (this.userDoesNotExist = !0);
+    updateImageIfValid(t, s = null) {
+      const r = z(this.user);
+      if (this.isUserDefined && typeof r == "boolean") {
+        this.isAvatarLoaded = !0, this.avatarUrlLoaded = t, s && (this.avatarSrcSetLoaded = s), r === !1 && (this.userDoesNotExist = !0);
         return;
       }
       const i = new Image();
       i.onload = () => {
-        this.avatarUrlLoaded = e, s && (this.avatarSrcSetLoaded = s), this.isAvatarLoaded = !0, m(this.user, !0);
+        this.avatarUrlLoaded = t, s && (this.avatarSrcSetLoaded = s), this.isAvatarLoaded = !0, g(this.user, !0);
       }, i.onerror = () => {
-        console.debug("Invalid avatar url", e), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, m(this.user, !1);
-      }, s && (i.srcset = s), i.src = e;
+        console.debug("Invalid avatar url", t), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, g(this.user, !1);
+      }, s && (i.srcset = s), i.src = t;
     }
   }
-}, H = ["title", "tabindex", "aria-label", "role"], T = ["src", "srcset"], P = {
+}, H = ["tabindex", "aria-label", "role"], T = ["src", "srcset"], P = {
   key: 2,
   class: "avatardiv__user-status avatardiv__user-status--icon"
 };
-function G(e, s, a, i, n, r) {
-  const h = t.resolveComponent("NcLoadingIcon"), y = t.resolveComponent("DotsHorizontal"), U = t.resolveComponent("NcButton"), N = t.resolveComponent("NcActionLink"), k = t.resolveComponent("NcActions"), _ = t.resolveComponent("NcUserStatusIcon"), b = t.resolveDirective("click-outside");
-  return t.withDirectives((t.openBlock(), t.createElementBlock("span", t.mergeProps({
+function G(t, s, r, i, n, a) {
+  const c = e.resolveComponent("NcLoadingIcon"), d = e.resolveComponent("DotsHorizontal"), U = e.resolveComponent("NcButton"), N = e.resolveComponent("NcActionLink"), k = e.resolveComponent("NcActions"), _ = e.resolveComponent("NcUserStatusIcon"), b = e.resolveDirective("click-outside");
+  return e.withDirectives((e.openBlock(), e.createElementBlock("span", e.mergeProps({
     ref: "main",
     class: [{
       "avatardiv--unknown": n.userDoesNotExist,
-      "avatardiv--with-menu": r.hasMenu,
+      "avatardiv--with-menu": a.hasMenu,
       "avatardiv--with-menu-loading": n.contactsMenuLoading
     }, "avatardiv popovermenu-wrapper"],
-    title: r.tooltip,
-    style: r.avatarStyle,
-    tabindex: r.hasMenu ? "0" : void 0,
-    "aria-label": r.avatarAriaLabel,
-    role: r.hasMenu ? "button" : void 0
-  }, t.toHandlers(r.hasMenu ? {
-    click: r.toggleMenu,
-    keydown: r.toggleMenu
+    style: a.avatarStyle,
+    tabindex: a.hasMenu ? "0" : void 0,
+    "aria-label": a.avatarAriaLabel,
+    role: a.hasMenu ? "button" : void 0
+  }, e.toHandlers(a.hasMenu ? {
+    click: a.toggleMenu,
+    keydown: a.toggleMenu
   } : {}, !0)), [
-    t.renderSlot(e.$slots, "icon", {}, () => [
-      a.iconClass ? (t.openBlock(), t.createElementBlock("span", {
+    e.renderSlot(t.$slots, "icon", {}, () => [
+      r.iconClass ? (e.openBlock(), e.createElementBlock("span", {
         key: 0,
-        class: t.normalizeClass([a.iconClass, "avatar-class-icon"])
-      }, null, 2)) : n.isAvatarLoaded && !n.userDoesNotExist ? (t.openBlock(), t.createElementBlock("img", {
+        class: e.normalizeClass([r.iconClass, "avatar-class-icon"])
+      }, null, 2)) : n.isAvatarLoaded && !n.userDoesNotExist ? (e.openBlock(), e.createElementBlock("img", {
         key: 1,
         src: n.avatarUrlLoaded,
         srcset: n.avatarSrcSetLoaded,
         alt: ""
-      }, null, 8, T)) : t.createCommentVNode("", !0)
+      }, null, 8, T)) : e.createCommentVNode("", !0)
     ], !0),
-    r.hasMenu && !r.menu.length ? (t.openBlock(), t.createBlock(U, {
+    a.hasMenu && a.menu.length === 0 ? (e.openBlock(), e.createBlock(U, {
       key: 0,
-      "aria-label": r.t("Open contact menu"),
       type: "tertiary-no-background",
-      class: "action-item action-item__menutoggle"
+      class: "action-item action-item__menutoggle",
+      "aria-label": a.avatarAriaLabel,
+      title: a.tooltip,
+      onClick: a.toggleMenu
     }, {
-      icon: t.withCtx(() => [
-        n.contactsMenuLoading ? (t.openBlock(), t.createBlock(h, { key: 0 })) : (t.openBlock(), t.createBlock(y, {
+      icon: e.withCtx(() => [
+        n.contactsMenuLoading ? (e.openBlock(), e.createBlock(c, { key: 0 })) : (e.openBlock(), e.createBlock(d, {
           key: 1,
           size: 20
         }))
       ]),
       _: 1
-    }, 8, ["aria-label"])) : r.hasMenu ? (t.openBlock(), t.createBlock(k, {
+    }, 8, ["aria-label", "title", "onClick"])) : a.hasMenu ? (e.openBlock(), e.createBlock(k, {
       key: 1,
+      open: n.contactsMenuOpenState,
+      "onUpdate:open": s[0] || (s[0] = (u) => n.contactsMenuOpenState = u),
       "force-menu": "",
       "manual-open": "",
       type: "tertiary-no-background",
-      container: a.menuContainer,
-      open: n.contactsMenuOpenState
-    }, t.createSlots({
-      default: t.withCtx(() => [
-        (t.openBlock(!0), t.createElementBlock(t.Fragment, null, t.renderList(r.menu, (c, A) => (t.openBlock(), t.createBlock(N, {
+      container: r.menuContainer,
+      "aria-label": a.avatarAriaLabel,
+      title: a.tooltip,
+      onClick: a.toggleMenu
+    }, e.createSlots({
+      default: e.withCtx(() => [
+        (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(a.menu, (u, A) => (e.openBlock(), e.createBlock(N, {
           key: A,
-          href: c.href,
-          icon: c.icon
+          href: u.href,
+          icon: u.icon
         }, {
-          default: t.withCtx(() => [
-            t.createTextVNode(t.toDisplayString(c.text), 1)
+          default: e.withCtx(() => [
+            e.createTextVNode(e.toDisplayString(u.text), 1)
           ]),
           _: 2
         }, 1032, ["href", "icon"]))), 128))
@@ -485,32 +495,32 @@ function G(e, s, a, i, n, r) {
     }, [
       n.contactsMenuLoading ? {
         name: "icon",
-        fn: t.withCtx(() => [
-          t.createVNode(h)
+        fn: e.withCtx(() => [
+          e.createVNode(c)
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["container", "open"])) : t.createCommentVNode("", !0),
-    r.showUserStatusIconOnAvatar ? (t.openBlock(), t.createElementBlock("span", P, t.toDisplayString(e.userStatus.icon), 1)) : r.canDisplayUserStatus ? (t.openBlock(), t.createBlock(_, {
+    ]), 1032, ["open", "container", "aria-label", "title", "onClick"])) : e.createCommentVNode("", !0),
+    a.showUserStatusIconOnAvatar ? (e.openBlock(), e.createElementBlock("span", P, e.toDisplayString(t.userStatus.icon), 1)) : a.canDisplayUserStatus ? (e.openBlock(), e.createBlock(_, {
       key: 3,
       class: "avatardiv__user-status",
-      status: e.userStatus.status,
-      "aria-hidden": String(r.hasMenu)
-    }, null, 8, ["status", "aria-hidden"])) : t.createCommentVNode("", !0),
-    r.showInitials ? (t.openBlock(), t.createElementBlock("span", {
+      status: t.userStatus.status,
+      "aria-hidden": String(a.hasMenu)
+    }, null, 8, ["status", "aria-hidden"])) : e.createCommentVNode("", !0),
+    a.showInitials ? (e.openBlock(), e.createElementBlock("span", {
       key: 4,
-      style: t.normalizeStyle(r.initialsWrapperStyle),
+      style: e.normalizeStyle(a.initialsWrapperStyle),
       class: "avatardiv__initials-wrapper"
     }, [
-      t.createElementVNode("span", {
-        style: t.normalizeStyle(r.initialsStyle),
+      e.createElementVNode("span", {
+        style: e.normalizeStyle(a.initialsStyle),
         class: "avatardiv__initials"
-      }, t.toDisplayString(r.initials), 5)
-    ], 4)) : t.createCommentVNode("", !0)
+      }, e.toDisplayString(a.initials), 5)
+    ], 4)) : e.createCommentVNode("", !0)
   ], 16, H)), [
-    [b, r.closeMenu]
+    [b, a.closeMenu]
   ]);
 }
-const j = /* @__PURE__ */ B._export_sfc(V, [["render", G], ["__scopeId", "data-v-ba9b4ca3"]]);
+const j = /* @__PURE__ */ B._export_sfc(V, [["render", G], ["__scopeId", "data-v-034f7041"]]);
 exports.NcAvatar = j;
-exports.userStatus = v;
+exports.userStatus = S;

package/dist/chunks/NcAvatar-uPVG9WWg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAvatar-uPVG9WWg.cjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>\n *\n * @author Georg Ehrke <georg-nextcloud@ehrke.email>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.prototype.hasOwnProperty.call(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\tconst {\n\t\t\t\t\tstatus,\n\t\t\t\t\tmessage,\n\t\t\t\t\ticon,\n\t\t\t\t} = data.ocs.data\n\t\t\t\tthis.userStatus.status = status\n\t\t\t\tthis.userStatus.message = message || ''\n\t\t\t\tthis.userStatus.icon = icon || ''\n\t\t\t\tthis.hasStatus = true\n\t\t\t} catch (e) {\n\t\t\t\tif (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconsole.error(e)\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"https://nextcloud.com/wp-content/themes/next/assets/img/common/nextcloud-square-logo.png\" />\n```\n\n### Avatar with material design icon\n\n```\n <template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n }\n </script>\n```\n\n### Avatar with preloaded status\n```\n <template>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status\">\n\t</NcAvatar>\n</template>\n<script>\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\ticon: '',\n\t\t\t\tstatus: 'dnd',\n\t\t\t\tmessage: 'Not busy',\n\t\t\t},\n\t\t}\n\t},\n }\n </script>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<span ref=\"main\"\n\t\tv-click-outside=\"closeMenu\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\"\n\t\t:tabindex=\"hasMenu ? '0' : undefined\"\n\t\t:aria-label=\"avatarAriaLabel\"\n\t\t:role=\"hasMenu ? 'button' : undefined\"\n\t\tv-on=\"hasMenu ? {\n\t\t\tclick: toggleMenu,\n\t\t\tkeydown: toggleMenu,\n\t\t} : {}\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img v-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton v-if=\"hasMenu && menu.length === 0\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:title=\"tooltip\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<DotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-else-if=\"hasMenu\"\n\t\t\tv-model:open=\"contactsMenuOpenState\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\t:container=\"menuContainer\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:title=\"tooltip\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<NcActionLink v-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\t:href=\"item.href\"\n\t\t\t\t:icon=\"item.icon\">\n\t\t\t\t{{ item.text }}\n\t\t\t</NcActionLink>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon v-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span v-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { t } from '../../l10n.js'\n\nimport axios from '@nextcloud/axios'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tDotsHorizontal,\n\t\tNcActions,\n\t\tNcActionLink,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Whether or not to the status-icon should be used instead of online/away\n\t\t */\n\t\tshowUserStatusCompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\t\t/**\n\t\t * Placeholder avatars will be automatically generated when this is set to true\n\t\t */\n\t\tallowPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\t\tcanDisplayUserStatus() {\n\t\t\treturn this.showUserStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn this.showUserStatus\n\t\t\t\t&& this.showUserStatusCompact\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon?.())\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\tconst style = {\n\t\t\t\t'--size': this.size + 'px',\n\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t\treturn style\n\t\t},\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn '?'\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filtered = user.match(/[\\p{L}\\p{N}\\s]/gu).join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\treturn {\n\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\ticon: item.icon,\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\treturn [{\n\t\t\t\t\thref: '#',\n\t\t\t\t\ticon: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${escape(this.userStatus.icon)}</text></svg>`,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeUnmount() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch (e) {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Directly use the url if defined\n\t\t\tif (this.isUrlDefined) {\n\t\t\t\tthis.updateImageIfValid(this.url)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.size <= 64) {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 64)\n\t\t\t\tconst srcset = [\n\t\t\t\t\tavatarUrl + ' 1x',\n\t\t\t\t\tthis.avatarUrlGenerator(this.user, 512) + ' 8x',\n\t\t\t\t].join(', ')\n\n\t\t\t\tthis.updateImageIfValid(avatarUrl, srcset)\n\t\t\t} else {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 512)\n\t\t\t\tthis.updateImageIfValid(avatarUrl)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Generate an avatar url from the server's avatar endpoint\n\t\t *\n\t\t * @param {string} user the user id\n\t\t * @param {number} size the desired size\n\t\t * @return {string}\n\t\t */\n\t\tavatarUrlGenerator(user, size) {\n\t\t\tconst darkTheme = window.getComputedStyle(document.body)\n\t\t\t\t.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'\n\t\t\tlet url = '/avatar/{user}/{size}' + (darkTheme ? '/dark' : '')\n\t\t\tif (this.isGuest) {\n\t\t\t\turl = '/avatar/guest/{user}/{size}' + (darkTheme ? '/dark' : '')\n\t\t\t}\n\n\t\t\tlet avatarUrl = generateUrl(\n\t\t\t\turl,\n\t\t\t\t{\n\t\t\t\t\tuser,\n\t\t\t\t\tsize,\n\t\t\t\t})\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = () => {\n\t\t\t\tconsole.debug('Invalid avatar url', url)\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--size);\n\theight: var(--size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--size);\n\t\t\t\tmin-height: var(--size);\n\t\t\t\twidth: var(--size) !important;\n\t\t\t\tmin-width: var(--size);\n\t\t\t}\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--size);\n\t\twidth: var(--size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: 50%;\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--size);\n\t\theight: var(--size);\n\t}\n\n\t.avatardiv__user-status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-height: 18px;\n\t\tmin-width: 18px;\n\t\tmax-height: 18px;\n\t\tmax-width: 18px;\n\t\theight: 40%;\n\t\twidth: 40%;\n\t\tline-height: 15px;\n\t\tfont-size: var(--default-font-size);\n\t\tborder: 2px solid var(--color-main-background);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: 50%;\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["userStatus","userId","capabilities$1","capabilities","auth","data","axios__default","router","status","message","icon","e","_b","_a","browserStorage","browserStorage$1","getUserHasAvatar","flag","setUserHasAvatar","_sfc_main","DotsHorizontal","NcActions","NcButton","NcUserStatusIcon","_l10n","r","g","b","initials","user","idx","filtered","item","escape","html","text","p","actions","eventBus","state","avatarUrl","srcset","url","userHasAvatar","img","_hoisted_1","_hoisted_2","vue","$options","_ctx","$props","$data","_component_NcLoadingIcon","_cache","$event","key","_hoisted_3"],"mappings":"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"}

package/dist/chunks/{NcBreadcrumb-X45pwcLq.cjs → NcBreadcrumb-7q3EEfcO.cjs}

@@ -1,5 +1,5 @@
 var y = require("../assets/NcBreadcrumb-ZsIS1jDx.css");
-const u = require("./NcActions-VJy75Dj8.cjs"), c = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./NcButton-Uxh-oARg.cjs"), f = require("./ChevronRight-iDcqZ2Ih.cjs"), e = require("vue"), h = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), p = {
+const u = require("./NcActions-YpbmJ7hS.cjs"), c = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./NcButton-7UKtzkX5.cjs"), f = require("./ChevronRight-7GGKl2bX.cjs"), e = require("vue"), h = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), p = {
   name: "NcBreadcrumb",
   components: {
     NcActions: u.NcActions,
@@ -90,7 +90,7 @@ const u = require("./NcActions-VJy75Dj8.cjs"), c = require("./GenRandomId-ULxaMk
        * The unique id of the breadcrumb. Necessary to append the
        * Actions menu to the correct crumb.
        */
-      crumbId: `crumb-id-${c.GenRandomId()}`
+      crumbId: "crumb-id-".concat(c.GenRandomId())
     };
   },
   computed: {
@@ -187,7 +187,7 @@ function g(t, n, r, b, a, o) {
       "menu-name": r.name,
       title: r.title,
       "force-name": !0,
-      container: `.vue-crumb[${a.crumbId}]`,
+      container: ".vue-crumb[".concat(a.crumbId, "]"),
       "onUpdate:open": o.onOpenChange
     }, {
       icon: e.withCtx(() => [

package/dist/chunks/{NcBreadcrumb-X45pwcLq.cjs.map → NcBreadcrumb-7q3EEfcO.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcBreadcrumb-X45pwcLq.cjs","sources":["../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\n\t\t:[crumbId]=\"''\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => {/** Prevent the breadcrumb from being draggable. */}\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<NcButton v-if=\"(name || icon) && !$slots.default\"\n\t\t\t:title=\"title\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\ttype=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-else #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\t:open=\"open\"\n\t\t\t:menu-name=\"name\"\n\t\t\t:title=\"title\"\n\t\t\t:force-name=\"true\"\n\t\t\t:container=\"`.vue-crumb[${crumbId}]`\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t<!-- @slot All action elements passed into the default slot will be used -->\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/NcButton.vue'\n\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t\tNcButton,\n\t},\n\tinheritAttrs: false,\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon instead of the name text.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t\t/**\n\t\t\t * The unique id of the breadcrumb. Necessary to append the\n\t\t\t * Actions menu to the correct crumb.\n\t\t\t */\n\t\t\tcrumbId: `crumb-id-${GenRandomId()}`,\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: $clickable-area;\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmin-width: 0;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\t\t\tmax-width: 100%;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcActions","NcButton","GenRandomId","open","e","vue","$data","_ctx","_cache","args","$options","$props","_component_NcButton"],"mappings":"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"}
+{"version":3,"file":"NcBreadcrumb-7q3EEfcO.cjs","sources":["../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\n\t\t:[crumbId]=\"''\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => {/** Prevent the breadcrumb from being draggable. */}\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<NcButton v-if=\"(name || icon) && !$slots.default\"\n\t\t\t:title=\"title\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\ttype=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-else #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\t:open=\"open\"\n\t\t\t:menu-name=\"name\"\n\t\t\t:title=\"title\"\n\t\t\t:force-name=\"true\"\n\t\t\t:container=\"`.vue-crumb[${crumbId}]`\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t<!-- @slot All action elements passed into the default slot will be used -->\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/NcButton.vue'\n\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t\tNcButton,\n\t},\n\tinheritAttrs: false,\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon instead of the name text.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t\t/**\n\t\t\t * The unique id of the breadcrumb. Necessary to append the\n\t\t\t * Actions menu to the correct crumb.\n\t\t\t */\n\t\t\tcrumbId: `crumb-id-${GenRandomId()}`,\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: $clickable-area;\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmin-width: 0;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\t\t\tmax-width: 100%;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcActions","NcButton","GenRandomId","open","e","vue","$data","_ctx","_cache","args","$options","$props","_component_NcButton"],"mappings":"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"}