@tencentcloud/roomkit-web-vue3/es/components/RoomHeader/UserInfo/UserInfoPC.vue2.mjs

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

import { defineComponent, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, createVNode, toDisplayString, normalizeClass, withDirectives, vShow, isRef, withCtx, createTextVNode } from "vue";
import TUIRoomEngine__default from "@tencentcloud/tuiroom-engine-js";
import Dialog from "../../common/base/Dialog/index.mjs";
import { IconArrowStrokeSelectDown, TUIButton, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
import Input from "../../common/base/Input/index.mjs";
import useUserInfo from "./useUserInfoHooks.mjs";
import TuiAvatar from "../../common/Avatar.vue2.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "../../../locales/index.mjs";
import "../../../utils/environment.mjs";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import { MESSAGE_DURATION } from "../../../constants/message.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
const _hoisted_1 = { class: "name" };
const _hoisted_2 = {
  key: 0,
  class: "user-control-container"
};
const _hoisted_3 = { class: "edit-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "UserInfoPC",
  props: {
    userId: {},
    userName: {},
    avatarUrl: {},
    isShowEditName: { type: Boolean }
  },
  emits: ["log-out", "update-user-name"],
  setup(__props, { emit: __emit }) {
    const emits = __emit;
    const userInfoConfig = roomService.getComponentConfig("UserInfo");
    const basicStore = useBasicStore();
    const roomStore = useRoomStore();
    const {
      t,
      showUserControl,
      isUserNameEditorVisible,
      userInfoRef,
      tempUserName,
      handleUserControl,
      showEditUserNameDialog,
      closeUserNameEditor
    } = useUserInfo();
    const props = __props;
    async function saveUserName(userName) {
      const { userId } = props;
      if (userName.length === 0) {
        TUIToast({
          type: TOAST_TYPE.WARNING,
          message: t("Username length should be greater than 0"),
          duration: MESSAGE_DURATION.NORMAL
        });
        return;
      }
      await TUIRoomEngine__default.setSelfInfo({
        userName,
        avatarUrl: roomStore.localUser.avatarUrl || ""
      });
      basicStore.setUserName(userName);
      roomStore.updateUserInfo({ userId, userName });
      emits("update-user-name", userName);
      closeUserNameEditor();
    }
    return (_ctx, _cache) => {
      return unref(userInfoConfig).visible ? (openBlock(), createElementBlock("div", {
        key: 0,
        ref_key: "userInfoRef",
        ref: userInfoRef,
        class: "user-info-container"
      }, [
        createElementVNode("div", {
          class: "user-info-content",
          onClick: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => unref(handleUserControl) && unref(handleUserControl)(...args))
        }, [
          createVNode(TuiAvatar, {
            class: "avatar",
            "img-src": _ctx.avatarUrl
          }, null, 8, ["img-src"]),
          createElementVNode("div", _hoisted_1, toDisplayString(props.userName || props.userId), 1),
          createVNode(unref(IconArrowStrokeSelectDown), {
            size: "12",
            class: normalizeClass([unref(showUserControl) ? "up-icon" : "down-icon"])
          }, null, 8, ["class"])
        ]),
        unref(showUserControl) ? (openBlock(), createElementBlock("div", _hoisted_2, [
          withDirectives(createElementVNode("div", null, [
            createElementVNode("div", {
              class: "user-control-item-head",
              onClick: _cache[1] || (_cache[1] = //@ts-ignore
              (...args) => unref(showEditUserNameDialog) && unref(showEditUserNameDialog)(...args))
            }, toDisplayString(unref(t)("Edit profile")), 1)
          ], 512), [
            [vShow, props.isShowEditName]
          ]),
          createElementVNode("div", {
            class: "user-control-item-foot",
            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("log-out"))
          }, toDisplayString(unref(t)("Log out")), 1)
        ])) : createCommentVNode("", true),
        createVNode(unref(Dialog), {
          modelValue: unref(isUserNameEditorVisible),
          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(isUserNameEditorVisible) ? isUserNameEditorVisible.value = $event : null),
          title: unref(t)("Edit profile"),
          modal: true,
          width: "480px",
          "close-on-click-modal": true,
          "append-to-body": true
        }, {
          footer: withCtx(() => [
            createVNode(unref(TUIButton), {
              onClick: unref(closeUserNameEditor),
              type: "primary",
              style: { "min-width": "88px" }
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
              ]),
              _: 1
            }, 8, ["onClick"]),
            createVNode(unref(TUIButton), {
              onClick: _cache[4] || (_cache[4] = ($event) => saveUserName(unref(tempUserName))),
              style: { "min-width": "88px" }
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(unref(t)("Save")), 1)
              ]),
              _: 1
            })
          ]),
          default: withCtx(() => [
            createElementVNode("div", _hoisted_3, [
              createElementVNode("span", null, toDisplayString(unref(t)("User Name")), 1),
              createVNode(unref(Input), {
                "model-value": unref(tempUserName),
                onInput: _cache[3] || (_cache[3] = ($event) => tempUserName.value = $event),
                class: "edit-name-input",
                maxlength: "16",
                placeholder: unref(t)("Please input user name")
              }, null, 8, ["model-value", "placeholder"])
            ])
          ]),
          _: 1
        }, 8, ["modelValue", "title"])
      ], 512)) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};