@nextcloud/vue
Version:
Nextcloud vue components
172 lines (171 loc) • 11.8 kB
JavaScript
import "../assets/index48.css";
import S from "../Components/NcActions.mjs";
import g from "../Components/NcActionLink.mjs";
import y from "../Components/NcButton.mjs";
import U from "../Components/NcLoadingIcon.mjs";
import d from "../Functions/usernameToColor.mjs";
import "./IsMobileState-e1fe5f58.mjs";
import { generateOcsUrl as M, generateUrl as c } from "@nextcloud/router";
/* empty css */import { n as N } from "./_plugin-vue2_normalizer-5b4c43a4.mjs";
import "linkify-string";
import "escape-html";
import "striptags";
import "vue";
import { getCurrentUser as l } from "@nextcloud/auth";
import p from "@nextcloud/axios";
import { getCapabilities as w } from "@nextcloud/capabilities";
import { t as o } from "./l10n-9a5a6afc.mjs";
import _ from "vue-material-design-icons/DotsHorizontal.vue";
import { subscribe as n, unsubscribe as u } from "@nextcloud/event-bus";
import { getBuilder as x } from "@nextcloud/browser-storage";
import { vOnClickOutside as L } from "@vueuse/components";
const b = { data() {
return { hasStatus: !1, userStatus: { status: null, message: null, icon: null } };
}, methods: { async fetchUserStatus(t) {
var e, a;
if (!t)
return;
const s = w();
if (!(!Object.prototype.hasOwnProperty.call(s, "user_status") || !s.user_status.enabled) && l())
try {
const { data: i } = await p.get(M("apps/user_status/api/v1/statuses/{userId}", { userId: t })), { status: r, message: v, icon: f } = i.ocs.data;
this.userStatus.status = r, this.userStatus.message = v || "", this.userStatus.icon = f || "", this.hasStatus = !0;
} catch (i) {
if (i.response.status === 404 && ((a = (e = i.response.data.ocs) == null ? void 0 : e.data) == null ? void 0 : a.length) === 0)
return;
console.error(i);
}
} } };
const m = x("nextcloud").persist().build();
function A(t) {
const s = m.getItem("user-has-avatar." + t);
return typeof s == "string" ? !!s : null;
}
function h(t, s) {
t && m.setItem("user-has-avatar." + t, s);
}
const C = { name: "NcAvatar", directives: { ClickOutside: L }, components: { DotsHorizontal: _, NcActions: S, NcActionLink: g, NcButton: y, NcLoadingIcon: U }, mixins: [b], props: { url: { type: String, default: void 0 }, iconClass: { type: String, default: void 0 }, user: { type: String, default: void 0 }, showUserStatus: { type: Boolean, default: !0 }, showUserStatusCompact: { type: Boolean, default: !0 }, preloadedUserStatus: { type: Object, default: void 0 }, isGuest: { type: Boolean, default: !1 }, displayName: { type: String, default: void 0 }, size: { type: Number, default: 32 }, allowPlaceholder: { type: Boolean, default: !0 }, disableTooltip: { type: Boolean, default: !1 }, disableMenu: { type: Boolean, default: !1 }, tooltipMessage: { type: String, default: null }, isNoUser: { type: Boolean, default: !1 }, menuContainer: { type: [String, Object, Element, Boolean], default: "body" } }, data() {
return { avatarUrlLoaded: null, avatarSrcSetLoaded: null, userDoesNotExist: !1, isAvatarLoaded: !1, isMenuLoaded: !1, contactsMenuLoading: !1, contactsMenuActions: [], contactsMenuOpenState: !1 };
}, computed: { avatarAriaLabel() {
var t, s;
if (this.hasMenu)
return this.hasStatus && this.showUserStatus && this.showUserStatusCompact ? o("Avatar of {displayName}, {status}", { displayName: (t = this.displayName) != null ? t : this.user, status: this.userStatus.status }) : o("Avatar of {displayName}", { displayName: (s = this.displayName) != null ? s : this.user });
}, canDisplayUserStatus() {
return this.showUserStatus && this.hasStatus && ["online", "away", "dnd"].includes(this.userStatus.status);
}, showUserStatusIconOnAvatar() {
return this.showUserStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
}, getUserIdentifier() {
return this.isDisplayNameDefined ? this.displayName : this.isUserDefined ? this.user : "";
}, isUserDefined() {
return typeof this.user < "u";
}, isDisplayNameDefined() {
return typeof this.displayName < "u";
}, isUrlDefined() {
return typeof this.url < "u";
}, hasMenu() {
var t;
return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((t = l()) == null ? void 0 : t.uid) || this.userDoesNotExist || this.url);
}, shouldShowPlaceholder() {
return this.allowPlaceholder && this.userDoesNotExist;
}, avatarStyle() {
return { "--size": this.size + "px", lineHeight: this.size + "px", fontSize: Math.round(this.size * 0.45) + "px" };
}, initialsWrapperStyle() {
const { r: t, g: s, b: e } = d(this.getUserIdentifier);
return { backgroundColor: `rgba(${t}, ${s}, ${e}, 0.1)` };
}, initialsStyle() {
const { r: t, g: s, b: e } = d(this.getUserIdentifier);
return { color: `rgb(${t}, ${s}, ${e})` };
}, tooltip() {
return this.disableTooltip ? !1 : this.tooltipMessage ? this.tooltipMessage : this.displayName;
}, initials() {
let t;
if (this.shouldShowPlaceholder) {
const s = this.getUserIdentifier, e = s.indexOf(" ");
s === "" ? t = "?" : (t = String.fromCodePoint(s.codePointAt(0)), e !== -1 && (t = t.concat(String.fromCodePoint(s.codePointAt(e + 1)))));
}
return t.toUpperCase();
}, menu() {
const t = this.contactsMenuActions.map((e) => ({ href: e.hyperlink, icon: e.icon, text: e.title }));
function s(e) {
const a = document.createTextNode(e), i = document.createElement("p");
return i.appendChild(a), i.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(t) : t;
} }, watch: { url() {
this.userDoesNotExist = !1, this.loadAvatarUrl();
}, user() {
this.userDoesNotExist = !1, this.isMenuLoaded = !1, this.loadAvatarUrl();
} }, mounted() {
this.loadAvatarUrl(), n("settings:avatar:updated", this.loadAvatarUrl), n("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && (this.preloadedUserStatus ? (this.userStatus.status = this.preloadedUserStatus.status || "", this.userStatus.message = this.preloadedUserStatus.message || "", this.userStatus.icon = this.preloadedUserStatus.icon || "", this.hasStatus = this.preloadedUserStatus.status !== null) : this.fetchUserStatus(this.user), n("user_status:status.updated", this.handleUserStatusUpdated));
}, beforeDestroy() {
u("settings:avatar:updated", this.loadAvatarUrl), u("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && u("user_status:status.updated", this.handleUserStatusUpdated);
}, methods: { t: o, handleUserStatusUpdated(t) {
this.user === t.userId && (this.userStatus = { status: t.status, icon: t.icon, message: t.message });
}, async toggleMenu() {
this.hasMenu && (this.contactsMenuOpenState || await this.fetchContactsMenu(), this.contactsMenuOpenState = !this.contactsMenuOpenState);
}, closeMenu() {
this.contactsMenuOpenState = !1;
}, async fetchContactsMenu() {
this.contactsMenuLoading = !0;
try {
const t = encodeURIComponent(this.user), { data: s } = await p.post(c("contactsmenu/findOne"), `shareType=0&shareWith=${t}`);
this.contactsMenuActions = s.topAction ? [s.topAction].concat(s.actions) : s.actions;
} catch {
this.contactsMenuOpenState = !1;
}
this.contactsMenuLoading = !1, this.isMenuLoaded = !0;
}, loadAvatarUrl() {
if (this.isAvatarLoaded = !1, !this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {
this.isAvatarLoaded = !0, this.userDoesNotExist = !0;
return;
}
if (this.isUrlDefined) {
this.updateImageIfValid(this.url);
return;
}
if (this.size <= 64) {
const t = this.avatarUrlGenerator(this.user, 64), s = [t + " 1x", this.avatarUrlGenerator(this.user, 512) + " 8x"].join(", ");
this.updateImageIfValid(t, s);
} else {
const t = this.avatarUrlGenerator(this.user, 512);
this.updateImageIfValid(t);
}
}, avatarUrlGenerator(t, s) {
var r;
const e = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
let a = "/avatar/{user}/{size}" + (e ? "/dark" : "");
this.isGuest && (a = "/avatar/guest/{user}/{size}" + (e ? "/dark" : ""));
let i = c(a, { user: t, size: s });
return t === ((r = l()) == null ? void 0 : r.uid) && typeof oc_userconfig < "u" && (i += "?v=" + oc_userconfig.avatar.version), i;
}, updateImageIfValid(t, s = null) {
const e = A(this.user);
if (this.isUserDefined && typeof e == "boolean") {
this.isAvatarLoaded = !0, this.avatarUrlLoaded = t, s && (this.avatarSrcSetLoaded = s), e === !1 && (this.userDoesNotExist = !0);
return;
}
const a = new Image();
a.onload = () => {
this.avatarUrlLoaded = t, s && (this.avatarSrcSetLoaded = s), this.isAvatarLoaded = !0, h(this.user, !0);
}, a.onerror = () => {
console.debug("Invalid avatar url", t), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, h(this.user, !1);
}, s && (a.srcset = s), a.src = t;
} } };
var D = function() {
var t = this, s = t._self._c;
return s("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: t.closeMenu, expression: "closeMenu" }], ref: "main", staticClass: "avatardiv popovermenu-wrapper", class: { "avatardiv--unknown": t.userDoesNotExist, "avatardiv--with-menu": t.hasMenu, "avatardiv--with-menu-loading": t.contactsMenuLoading }, style: t.avatarStyle, attrs: { title: t.tooltip, tabindex: t.hasMenu ? "0" : void 0, "aria-label": t.avatarAriaLabel, role: t.hasMenu ? "button" : void 0 }, on: { click: t.toggleMenu, keydown: function(e) {
return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") ? null : t.toggleMenu.apply(null, arguments);
} } }, [t._t("icon", function() {
return [t.iconClass ? s("div", { staticClass: "avatar-class-icon", class: t.iconClass }) : t.isAvatarLoaded && !t.userDoesNotExist ? s("img", { attrs: { src: t.avatarUrlLoaded, srcset: t.avatarSrcSetLoaded, alt: "" } }) : t._e()];
}), t.hasMenu && !t.menu.length ? s("NcButton", { staticClass: "action-item action-item__menutoggle", attrs: { "aria-label": t.t("Open contact menu"), type: "tertiary-no-background" }, scopedSlots: t._u([{ key: "icon", fn: function() {
return [t.contactsMenuLoading ? s("NcLoadingIcon") : s("DotsHorizontal", { attrs: { size: 20 } })];
}, proxy: !0 }], null, !1, 2617833509) }) : t.hasMenu ? s("NcActions", { attrs: { "force-menu": "", "manual-open": "", type: "tertiary-no-background", container: t.menuContainer, open: t.contactsMenuOpenState }, scopedSlots: t._u([t.contactsMenuLoading ? { key: "icon", fn: function() {
return [s("NcLoadingIcon")];
}, proxy: !0 } : null], null, !0) }, t._l(t.menu, function(e, a) {
return s("NcActionLink", { key: a, attrs: { href: e.href, icon: e.icon } }, [t._v(" " + t._s(e.text) + " ")]);
}), 1) : t._e(), t.showUserStatusIconOnAvatar ? s("div", { staticClass: "avatardiv__user-status avatardiv__user-status--icon" }, [t._v(" " + t._s(t.userStatus.icon) + " ")]) : t.canDisplayUserStatus ? s("div", { staticClass: "avatardiv__user-status", class: "avatardiv__user-status--" + t.userStatus.status }) : t._e(), t.userDoesNotExist && !(t.iconClass || t.$slots.icon) ? s("div", { staticClass: "avatardiv__initials-wrapper", style: t.initialsWrapperStyle }, [s("div", { staticClass: "unknown", style: t.initialsStyle }, [t._v(" " + t._s(t.initials) + " ")])]) : t._e()], 2);
}, k = [], I = N(C, D, k, !1, null, "5a1a428c", null, null);
const st = I.exports;
export {
st as N,
b as u
};