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

package/dist/chunks/NcAvatar-A1YnlIoN.mjs

@@ -0,0 +1,654 @@
+import '../assets/NcAvatar-Bg20-FW4.css';
+import { N as NcActions } from "./NcActions-DxTtucKk.mjs";
+import { N as NcActionLink } from "./NcActionLink-CG3cKif-.mjs";
+import { N as NcActionRouter } from "./NcActionRouter-C7VSuJLq.mjs";
+import { N as NcActionText } from "./NcActionText-ByD1mFXe.mjs";
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BYTrkA66.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
+import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-vtnkNASH.mjs";
+import { u as usernameToColor } from "./usernameToColor-B_Q_sS3j.mjs";
+import { g as getAvatarUrl } from "./NcMentionBubble.vue_vue_type_style_index_0_scoped_6c8d0da9_lang-DYJMHclV.mjs";
+import { resolveComponent, resolveDirective, withDirectives, createElementBlock, openBlock, mergeProps, toHandlers, renderSlot, createBlock, createCommentVNode, normalizeClass, withCtx, createSlots, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, normalizeStyle, createElementVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import "escape-html";
+import "striptags";
+import { getCurrentUser } from "@nextcloud/auth";
+import axios from "@nextcloud/axios";
+import { getCapabilities } from "@nextcloud/capabilities";
+import { generateOcsUrl, generateUrl } from "@nextcloud/router";
+import { r as register, n as t9, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { g as getRoute } from "./autolink-CKPk5rzg.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-AMVAlTNH.mjs";
+import { unsubscribe, subscribe } from "@nextcloud/event-bus";
+import { getBuilder } from "@nextcloud/browser-storage";
+import { vOnClickOutside } from "@vueuse/components";
+const userStatus = {
+  data() {
+    return {
+      hasStatus: false,
+      userStatus: {
+        status: null,
+        message: null,
+        icon: null
+      }
+    };
+  },
+  methods: {
+    /**
+     * Fetches the user-status from the server
+     *
+     * @param {string} userId UserId of the user to fetch the status for
+     *
+     * @return {Promise<void>}
+     */
+    async fetchUserStatus(userId) {
+      if (!userId) {
+        return;
+      }
+      const capabilities = getCapabilities();
+      if (!Object.prototype.hasOwnProperty.call(capabilities, "user_status") || !capabilities.user_status.enabled) {
+        return;
+      }
+      if (!getCurrentUser()) {
+        return;
+      }
+      try {
+        const { data } = await axios.get(generateOcsUrl("apps/user_status/api/v1/statuses/{userId}", { userId }));
+        const {
+          status,
+          message,
+          icon
+        } = data.ocs.data;
+        this.userStatus.status = status;
+        this.userStatus.message = message || "";
+        this.userStatus.icon = icon || "";
+        this.hasStatus = true;
+      } catch (e) {
+        if (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {
+          return;
+        }
+        console.error(e);
+      }
+    }
+  }
+};
+register(t9);
+const browserStorage = getBuilder("nextcloud").persist().build();
+function getUserHasAvatar(userId) {
+  const flag = browserStorage.getItem("user-has-avatar." + userId);
+  if (typeof flag === "string") {
+    return Boolean(flag);
+  }
+  return null;
+}
+function setUserHasAvatar(userId, flag) {
+  if (userId) {
+    browserStorage.setItem("user-has-avatar." + userId, flag);
+  }
+}
+const _sfc_main = {
+  name: "NcAvatar",
+  directives: {
+    ClickOutside: vOnClickOutside
+  },
+  components: {
+    DotsHorizontal,
+    NcActions,
+    NcButton,
+    NcIconSvgWrapper,
+    NcLoadingIcon,
+    NcUserStatusIcon
+  },
+  mixins: [userStatus],
+  props: {
+    /**
+     * Set a custom url to the avatar image
+     * either the url, user or displayName property must be defined
+     */
+    url: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set a css icon-class for an icon to be used instead of the avatar.
+     */
+    iconClass: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the user id to fetch the avatar
+     * either the url, user or displayName property must be defined
+     */
+    user: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether or not to display the user-status
+     */
+    showUserStatus: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether or not to the status-icon should be used instead of online/away
+     */
+    showUserStatusCompact: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * When the user status was preloaded via another source it can be handed in with this property to save the request.
+     * If this property is not set the status will be fetched automatically.
+     * If a preloaded no-status is available provide this object with properties "status", "icon" and "message" set to null.
+     */
+    preloadedUserStatus: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Is the user a guest user (then we have to user a different endpoint)
+     */
+    isGuest: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Set a display name that will be rendered as a tooltip
+     * either the url, user or displayName property must be defined
+     * specify just the displayname to generate a placeholder avatar without
+     * trying to fetch the avatar based on the user id
+     */
+    displayName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set a size in px for the rendered avatar
+     */
+    size: {
+      type: Number,
+      default: 32
+    },
+    /**
+     * Placeholder avatars will be automatically generated when this is set to true
+     */
+    allowPlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Disable the tooltip
+     */
+    disableTooltip: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable the menu
+     */
+    disableMenu: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declares a custom tooltip when not null
+     * Fallback will be the displayName
+     *
+     * requires disableTooltip not to be set to true
+     */
+    tooltipMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Declares username is not a user's name, when true.
+     * Prevents loading user's avatar from server and forces generating colored initials,
+     * i.e. if the user is a group
+     */
+    isNoUser: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Selector for the popover menu container
+     */
+    menuContainer: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    }
+  },
+  data() {
+    return {
+      avatarUrlLoaded: null,
+      avatarSrcSetLoaded: null,
+      userDoesNotExist: false,
+      isAvatarLoaded: false,
+      isMenuLoaded: false,
+      contactsMenuLoading: false,
+      contactsMenuActions: [],
+      contactsMenuOpenState: false
+    };
+  },
+  computed: {
+    avatarAriaLabel() {
+      if (!this.hasMenu) {
+        return;
+      }
+      if (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {
+        return t("Avatar of {displayName}, {status}", { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) });
+      }
+      return t("Avatar of {displayName}", { displayName: this.displayName ?? this.user });
+    },
+    canDisplayUserStatus() {
+      return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
+    },
+    showUserStatusIconOnAvatar() {
+      return this.showUserStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
+    },
+    /**
+     * The user identifier, either the display name if set or the user property
+     * If both properties are not set an empty string is returned
+     */
+    userIdentifier() {
+      if (this.isDisplayNameDefined) {
+        return this.displayName;
+      }
+      if (this.isUserDefined) {
+        return this.user;
+      }
+      return "";
+    },
+    isUserDefined() {
+      return typeof this.user !== "undefined";
+    },
+    isDisplayNameDefined() {
+      return typeof this.displayName !== "undefined";
+    },
+    isUrlDefined() {
+      return typeof this.url !== "undefined";
+    },
+    hasMenu() {
+      if (this.disableMenu) {
+        return false;
+      }
+      if (this.isMenuLoaded) {
+        return this.menu.length > 0;
+      }
+      return !(this.user === getCurrentUser()?.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?.());
+    },
+    avatarStyle() {
+      const style = {
+        "--size": this.size + "px",
+        lineHeight: this.size + "px",
+        fontSize: Math.round(this.size * 0.45) + "px"
+      };
+      return style;
+    },
+    initialsWrapperStyle() {
+      const { r, g, b } = usernameToColor(this.userIdentifier);
+      return {
+        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`
+      };
+    },
+    initialsStyle() {
+      const { r, g, b } = usernameToColor(this.userIdentifier);
+      return {
+        color: `rgb(${r}, ${g}, ${b})`
+      };
+    },
+    tooltip() {
+      if (this.disableTooltip) {
+        return null;
+      }
+      if (this.tooltipMessage) {
+        return this.tooltipMessage;
+      }
+      return this.displayName;
+    },
+    /**
+     * Get the (max. two) initials of the user as uppcase string
+     */
+    initials() {
+      let initials = "?";
+      if (this.showInitials) {
+        const user = this.userIdentifier.trim();
+        if (user === "") {
+          return initials;
+        }
+        const filteredChars = user.match(/[\p{L}\p{N}\s]/gu);
+        if (filteredChars == null) {
+          return initials;
+        }
+        const filtered = filteredChars.join("");
+        const idx = filtered.lastIndexOf(" ");
+        initials = String.fromCodePoint(filtered.codePointAt(0));
+        if (idx !== -1) {
+          initials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)));
+        }
+      }
+      return initials.toLocaleUpperCase();
+    },
+    menu() {
+      const actions = this.contactsMenuActions.map((item) => {
+        const route = getRoute(this.$router, item.hyperlink);
+        return {
+          ncActionComponent: route ? NcActionRouter : NcActionLink,
+          ncActionComponentProps: route ? {
+            to: route,
+            icon: item.icon
+          } : {
+            href: item.hyperlink,
+            icon: item.icon
+          },
+          text: item.title
+        };
+      });
+      function escape(html) {
+        const text = document.createTextNode(html);
+        const p = document.createElement("p");
+        p.appendChild(text);
+        return p.innerHTML;
+      }
+      if (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {
+        const emojiIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+					<text x="50%" y="50%" text-anchor="middle" style="dominant-baseline: central; font-size: 85%">${escape(this.userStatus.icon)}</text>
+				</svg>`;
+        return [{
+          ncActionComponent: NcActionText,
+          ncActionComponentProps: {},
+          iconSvg: this.userStatus.icon ? emojiIcon : void 0,
+          text: `${this.userStatus.message}`
+        }].concat(actions);
+      }
+      return actions;
+    }
+  },
+  watch: {
+    url() {
+      this.userDoesNotExist = false;
+      this.loadAvatarUrl();
+    },
+    user() {
+      this.userDoesNotExist = false;
+      this.isMenuLoaded = false;
+      this.loadAvatarUrl();
+    }
+  },
+  mounted() {
+    this.loadAvatarUrl();
+    subscribe("settings:avatar:updated", this.loadAvatarUrl);
+    subscribe("settings:display-name:updated", this.loadAvatarUrl);
+    if (this.showUserStatus && this.user && !this.isNoUser) {
+      if (!this.preloadedUserStatus) {
+        this.fetchUserStatus(this.user);
+      } else {
+        this.userStatus.status = this.preloadedUserStatus.status || "";
+        this.userStatus.message = this.preloadedUserStatus.message || "";
+        this.userStatus.icon = this.preloadedUserStatus.icon || "";
+        this.hasStatus = this.preloadedUserStatus.status !== null;
+      }
+      subscribe("user_status:status.updated", this.handleUserStatusUpdated);
+    }
+  },
+  beforeUnmount() {
+    unsubscribe("settings:avatar:updated", this.loadAvatarUrl);
+    unsubscribe("settings:display-name:updated", this.loadAvatarUrl);
+    if (this.showUserStatus && this.user && !this.isNoUser) {
+      unsubscribe("user_status:status.updated", this.handleUserStatusUpdated);
+    }
+  },
+  methods: {
+    t,
+    handleUserStatusUpdated(state) {
+      if (this.user === state.userId) {
+        this.userStatus = {
+          status: state.status,
+          icon: state.icon,
+          message: state.message
+        };
+      }
+    },
+    /**
+     * Toggle the popover menu on click or enter
+     * @param {KeyboardEvent|MouseEvent} event the UI event
+     */
+    async toggleMenu(event) {
+      if (event.type === "keydown" && event.key !== "Enter") {
+        return;
+      }
+      if (!this.contactsMenuOpenState) {
+        await this.fetchContactsMenu();
+      }
+      this.contactsMenuOpenState = !this.contactsMenuOpenState;
+    },
+    closeMenu() {
+      this.contactsMenuOpenState = false;
+    },
+    async fetchContactsMenu() {
+      this.contactsMenuLoading = true;
+      try {
+        const user = encodeURIComponent(this.user);
+        const { data } = await axios.post(generateUrl("contactsmenu/findOne"), `shareType=0&shareWith=${user}`);
+        this.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions;
+      } catch (e) {
+        this.contactsMenuOpenState = false;
+      }
+      this.contactsMenuLoading = false;
+      this.isMenuLoaded = true;
+    },
+    /**
+     * Handle avatar loading if user or url defined
+     */
+    loadAvatarUrl() {
+      this.isAvatarLoaded = false;
+      if (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {
+        this.isAvatarLoaded = true;
+        this.userDoesNotExist = true;
+        return;
+      }
+      if (this.isUrlDefined) {
+        this.updateImageIfValid(this.url);
+        return;
+      }
+      if (this.size <= 64) {
+        const avatarUrl = this.avatarUrlGenerator(this.user, 64);
+        const srcset = [
+          avatarUrl + " 1x",
+          this.avatarUrlGenerator(this.user, 512) + " 8x"
+        ].join(", ");
+        this.updateImageIfValid(avatarUrl, srcset);
+      } else {
+        const avatarUrl = this.avatarUrlGenerator(this.user, 512);
+        this.updateImageIfValid(avatarUrl);
+      }
+    },
+    /**
+     * Generate an avatar url from the server's avatar endpoint
+     *
+     * @param {string} user the user id
+     * @param {number} size the desired size
+     * @return {string}
+     */
+    avatarUrlGenerator(user, size) {
+      let avatarUrl = getAvatarUrl(user, size, this.isGuest);
+      if (user === getCurrentUser()?.uid && typeof oc_userconfig !== "undefined") {
+        avatarUrl += "?v=" + oc_userconfig.avatar.version;
+      }
+      return avatarUrl;
+    },
+    /**
+     * Check if the provided url is valid and update Avatar if so
+     *
+     * @param {string} url the avatar url
+     * @param {Array} srcset the avatar srcset
+     */
+    updateImageIfValid(url, srcset = null) {
+      const userHasAvatar = getUserHasAvatar(this.user);
+      if (this.isUserDefined && typeof userHasAvatar === "boolean") {
+        this.isAvatarLoaded = true;
+        this.avatarUrlLoaded = url;
+        if (srcset) {
+          this.avatarSrcSetLoaded = srcset;
+        }
+        if (userHasAvatar === false) {
+          this.userDoesNotExist = true;
+        }
+        return;
+      }
+      const img = new Image();
+      img.onload = () => {
+        this.avatarUrlLoaded = url;
+        if (srcset) {
+          this.avatarSrcSetLoaded = srcset;
+        }
+        this.isAvatarLoaded = true;
+        setUserHasAvatar(this.user, true);
+      };
+      img.onerror = () => {
+        console.debug("Invalid avatar url", url);
+        this.avatarUrlLoaded = null;
+        this.avatarSrcSetLoaded = null;
+        this.userDoesNotExist = true;
+        this.isAvatarLoaded = false;
+        setUserHasAvatar(this.user, false);
+      };
+      if (srcset) {
+        img.srcset = srcset;
+      }
+      img.src = url;
+    }
+  }
+};
+const _hoisted_1 = ["title", "tabindex", "aria-label", "role"];
+const _hoisted_2 = ["src", "srcset"];
+const _hoisted_3 = {
+  key: 2,
+  class: "avatardiv__user-status avatardiv__user-status--icon"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  const _component_DotsHorizontal = resolveComponent("DotsHorizontal");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
+  const _component_NcActions = resolveComponent("NcActions");
+  const _component_NcUserStatusIcon = resolveComponent("NcUserStatusIcon");
+  const _directive_click_outside = resolveDirective("click-outside");
+  return withDirectives((openBlock(), createElementBlock("span", mergeProps({
+    ref: "main",
+    title: $options.tooltip,
+    class: [{
+      "avatardiv--unknown": $data.userDoesNotExist,
+      "avatardiv--with-menu": $options.hasMenu,
+      "avatardiv--with-menu-loading": $data.contactsMenuLoading
+    }, "avatardiv popovermenu-wrapper"],
+    style: $options.avatarStyle,
+    tabindex: $options.hasMenu ? "0" : void 0,
+    "aria-label": $options.avatarAriaLabel,
+    role: $options.hasMenu ? "button" : void 0
+  }, toHandlers($options.hasMenu ? {
+    click: $options.toggleMenu,
+    keydown: $options.toggleMenu
+  } : {}, true)), [
+    renderSlot(_ctx.$slots, "icon", {}, () => [
+      $props.iconClass ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass([$props.iconClass, "avatar-class-icon"])
+      }, null, 2)) : $data.isAvatarLoaded && !$data.userDoesNotExist ? (openBlock(), createElementBlock("img", {
+        key: 1,
+        src: $data.avatarUrlLoaded,
+        srcset: $data.avatarSrcSetLoaded,
+        alt: ""
+      }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+    ], true),
+    $options.hasMenu && $options.menu.length === 0 ? (openBlock(), createBlock(_component_NcButton, {
+      key: 0,
+      type: "tertiary-no-background",
+      class: "action-item action-item__menutoggle",
+      "aria-label": $options.avatarAriaLabel,
+      onClick: $options.toggleMenu
+    }, {
+      icon: withCtx(() => [
+        $data.contactsMenuLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : (openBlock(), createBlock(_component_DotsHorizontal, {
+          key: 1,
+          size: 20
+        }))
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"])) : $options.hasMenu ? (openBlock(), createBlock(_component_NcActions, {
+      key: 1,
+      open: $data.contactsMenuOpenState,
+      "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.contactsMenuOpenState = $event),
+      "force-menu": "",
+      "manual-open": "",
+      type: "tertiary-no-background",
+      container: $props.menuContainer,
+      "aria-label": $options.avatarAriaLabel,
+      onClick: $options.toggleMenu
+    }, createSlots({
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.menu, (item, key) => {
+          return openBlock(), createBlock(resolveDynamicComponent(item.ncActionComponent), mergeProps({
+            key,
+            ref_for: true
+          }, item.ncActionComponentProps), createSlots({
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(item.text), 1)
+            ]),
+            _: 2
+          }, [
+            item.iconSvg ? {
+              name: "icon",
+              fn: withCtx(() => [
+                createVNode(_component_NcIconSvgWrapper, {
+                  svg: item.iconSvg
+                }, null, 8, ["svg"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040);
+        }), 128))
+      ]),
+      _: 2
+    }, [
+      $data.contactsMenuLoading ? {
+        name: "icon",
+        fn: withCtx(() => [
+          createVNode(_component_NcLoadingIcon)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["open", "container", "aria-label", "onClick"])) : createCommentVNode("", true),
+    $options.showUserStatusIconOnAvatar ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.userStatus.icon), 1)) : $options.canDisplayUserStatus ? (openBlock(), createBlock(_component_NcUserStatusIcon, {
+      key: 3,
+      class: "avatardiv__user-status",
+      status: _ctx.userStatus.status,
+      "aria-hidden": String($options.hasMenu)
+    }, null, 8, ["status", "aria-hidden"])) : createCommentVNode("", true),
+    $options.showInitials ? (openBlock(), createElementBlock("span", {
+      key: 4,
+      style: normalizeStyle($options.initialsWrapperStyle),
+      class: "avatardiv__initials-wrapper"
+    }, [
+      createElementVNode("span", {
+        style: normalizeStyle($options.initialsStyle),
+        class: "avatardiv__initials"
+      }, toDisplayString($options.initials), 5)
+    ], 4)) : createCommentVNode("", true)
+  ], 16, _hoisted_1)), [
+    [_directive_click_outside, $options.closeMenu]
+  ]);
+}
+const NcAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d636d9c8"]]);
+export {
+  NcAvatar as N,
+  userStatus as u
+};