❤
npm
Sign UpSign In

@vchatcloud/vue-ui-kit
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Vue Component UI Kit

NPM Version

Vue Component UI Kit은 다양한 UI 컴포넌트를 제공하여 Vue 애플리케이션 개발을 더욱 쉽게 만듭니다.

목차

설치

npm install @vchatcloud/vue-ui-kit
# or
# yarn add @vchatcloud/vue-ui-kit
# or
# pnpm add @vchatcloud/vue-ui-kit

사용법

우선 사용하려는 프로젝트의 index.html에 해당 내용을 작성합니다.

<head>
  <!-- ... -->
  <!-- 아래 내용을 추가합니다. -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

프로젝트에서 UI Kit을 사용하려면, 필요한 컴포넌트를 import하여 사용합니다.

VChatCloudApp 컴포넌트를 사용하여 VChatCloud를 설정하고 실행할 수 있습니다.

코드 예시

const vChatCloudAppProps: VChatCloudAppProps = {
  nickName: "YOUR_NICK_NAME",
  roomId: "YOUR_ROOM_ID",
  clientKey: "YOUR_CLIENT_KEY",
  email: "example@example.com", // CMS의 계정 이메일 설정
  grade: "user", // 유저의 등급 설정
  privateContainer: "PRIVATE_CONTAINER", // 비밀채팅방이 위치될 태그 설정
  sessionType: "parameter", // 접속 방식 설정
  userInfo: { profile: 8 }, // `userInfo`설정
  ...
};
<VChatCloudApp
  :nick-name="vChatCloudAppProps.nickName"
  :room-id="vChatCloudAppProps.roomId"
  :client-key="vChatCloudAppProps.clientKey"
  :email="vChatCloudAppProps.email"
  :grade="vChatCloudAppProps.grade"
  :private-container="vChatCloudAppProps.privateContainer"
  :session-type="vChatCloudAppProps.sessionType"
  :user-info="vChatCloudAppProps.userInfo"
  ...
/>

컴포넌트 설명

  • nickName: 사용자 닉네임을 설정합니다.
  • roomId: VChatCloud 방의 ID를 설정합니다.
  • clientKey: 클라이언트 키를 로컬 저장소에서 가져오거나, 없을 경우 랜덤으로 생성합니다.
  • email: 사용자의 CMS 계정의 이메일로 설정합니다.
  • grade: 사용자 등급을 설정합니다. 예를 들어, "user"와 같은 값을 사용할 수 있습니다.
  • privateContainer: 비밀채팅방 생성 시 위치시킬 태그를 설정합니다. 예를 들어, 태그의 id가 example이면 "#example"을, class가 example이면 ".example"으로 사용할 수 있습니다.
  • sessionType: 접속 방식에 대해 설정합니다. 예를 들어, 값이 "login"이면 로그인 페이지를 사용하고, "parameter"면 로그인 페이지 없이 바로 접속하게 됩니다. "private"는 비밀채팅방 입장 시 사용합니다.
  • userInfo: 사용자 정보를 객체 형태로 설정합니다. 예시에서는 { profile: 8 }로 설정되어 있습니다.

VChatCloudApp

VChatCloudApp 컴포넌트에 필요한 props를 전달하여 VChatCloud를 초기화합니다. 주요 props는 다음과 같습니다.

  • clientKey: 클라이언트 키
  • email: 사용자 이메일
  • grade: 사용자 등급
  • nickName: 사용자 닉네임
  • roomId: 방 ID
  • sessionType: 세션 타입 ("parameter", "private", "login" 중 선택)
  • url: 이벤트 버스 URL
  • userInfo: 사용자 정보 객체

주의사항

  • 중복된 clientKey : 같은 clientKey로 로그인 시 기존에 로그인된 사용자가 접속이 종료됩니다.
  • 비밀채팅방은 최대 1개까지만 생성됩니다.
  • 비밀채팅방에서 새로운 비밀채팅방 생성하는 기능은 제한됩니다.

커스터마이징

컴포넌트 변경

만약, VChatCloudApp 컴포넌트가 마음에 들지 않는 경우 VChatCloudApp안에 Custom Component를 사용하여 기존 컴포넌트를 대체할 수 있습니다.

<VChatCloudApp
  ...
  >
  <MyComponent></MyComponent>
</VChatCloudApp>

커스텀 컴포넌트에 필요한 내용은 아래와 같이 hook을 통해서 제공됩니다.

const {
  add,
  apiFileList,
  channel,
  inviteMessageList,
  messageHistoryList,
  translateClientKeyMap,
  vChatCloud,
  vChatCloudAppProps,
} = useInject();

색상 변경

변경가능한 CSS 변수 목록은 아래와 같습니다.

CSS 변수 목록 
<style>
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #c9c9f2;
  --login-logo-notice-color: #0a0a6b;
  --login-footer-color: #0a0a6b4c;

  --profile-wrap-box-shadow-color: rgba(201, 201, 201, 0.3);
  --profile-wrap-border-color: #f2f2f2;
  --profile-wrap-background-color: #fff;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #aaa;
  --profile-profile-border-color: #eaeaea;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #dddddd;
  --profile-nick-name-input-color: #aaa;
  --profile-nick-name-input-bg-color: #fff;
  --profile-nick-name-input-focus-border-color: #0033ab;
  --profile-login-button-background-color: #0a0a6b;
  --profile-login-button-color: #fff;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #f2f2f2;
  --header-color-title: #000;
  --header-color-count: #999;
  --header-color-border: #ddd;

  --join-user-list-color-background: #fff;
  --join-user-list-color-border: #f2f2f2;
  --join-user-list-color-header-border: #ddd;
  --join-user-list-color-header-color: #000;
  --join-user-list-color-footer-background: #ddd;
  --join-user-list-color-footer: #000;
  --join-user-list-color-shadow: rgba(168, 168, 168, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #333;
  --join-user-translate-color: #999;

  --language-modal-color-background: #fff;
  --language-modal-color-border: #f2f2f2;
  --language-modal-color-header-border: #ddd;
  --language-modal-color-footer-background: #ddd;
  --language-modal-color-footer-text: #000;
  --language-modal-color-close-icon: rgba(168, 168, 168, 0.3);
  --language-modal-span-color: #000;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #000;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #ddd;
  --toggle-color-bar-background-on: #c9ddff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #2a61be;
  --toggle-color-label: #666;

  --invite-modal-color-background: #fff;
  --invite-modal-color-border: #f2f2f2;
  --invite-modal-color-input-border: #ddd;
  --invite-modal-color-input-text: #aaa;
  --invite-modal-color-input-background: #fff;
  --invite-modal-color-title: #333;
  --invite-modal-color-close-button-border: #0a0a6b;
  --invite-modal-color-close-button-text: #0a0a6b;
  --invite-modal-color-submit-button-border: #0a0a6b;
  --invite-modal-color-submit-button-background: #0a0a6b;
  --invite-modal-color-submit-button-text: #fff;
  --invite-modal-color-shadow: rgba(168, 168, 168, 0.3);

  --modal-color-background: #fff;
  --modal-color-border: #f2f2f2;
  --modal-color-title: #333;
  --modal-color-contents: #000;
  --modal-color-close-button-border: #0a0a6b;
  --modal-color-close-button-text: #0a0a6b;
  --modal-color-submit-button-border: #0a0a6b;
  --modal-color-submit-button-background: #0a0a6b;
  --modal-color-submit-button-text: #fff;
  --modal-color-shadow: rgba(168, 168, 168, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(168, 168, 168, 0.3);
  --file-drawer-wrap-border-color: #f2f2f2;
  --file-drawer-wrap-background-color: #fff;
  --file-drawer-header-border-bottom-color: #ddd;
  --file-drawer-title-color: #333;
  --file-drawer-tab-item-color: #666;
  --file-drawer-tab-item-focus-color: #000;
  --file-drawer-tab-item-focus-border-color: #000;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #ddd;
  --file-drawer-footer-select-count-color: #666;
  --file-drawer-footer-save-color: #000;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #4160b9;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #4160b9;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #4160b9;
  --video-preview-wrap-focus-background-color: #fff;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #000;
  --body-nickname-color: #000;
  --body-chat-bg-color: #fff;

  --chat-base-profile-border-color: #f2f2f2;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #666;
  --chat-base-time-color: #999;

  --whisper-modal-input-border-color: #ddd;
  --whisper-modal-input-background-color: #fff;
  --whisper-modal-input-color: #000;

  --whisper-and-report-popup-border-color: #f2f2f2;
  --whisper-and-report-popup-background-color: #fff;
  --whisper-and-report-popup-box-shadow-color: rgba(168, 168, 168, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #0a0a6b;
  --whisper-and-report-popup-item-text-color: #000;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #333;

  --open-graph-border-color: #ddd;
  --open-graph-shadow-color: rgba(157, 173, 184, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #ddd;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #0033ab;

  --leave-message-color: #ff5a5a;

  --message-notice-bg-color: #333;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(157, 173, 184, 0.3);

  --warn-message-color: #ff7800;

  --whisper-message-sub-wrap-bg-color: #f2f2f2;
  --whisper-message-sub-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --whisper-message-about-title-color: #0a0a6b;
  --whisper-message-about-for-me-title-color: #0a0a6b;
  --whisper-message-about-sub-title-color: #666;
  --whisper-message-content-color: #010000;
  --whisper-message-time-color: #999;
  --whisper-message-for-me-bg-color: #e1dffc;

  --move-end-line-popup-wrap-background-color: #fff;
  --move-end-line-popup-wrap-border-color: #ddd;
  --move-end-line-popup-wrap-shadow-color: rgba(105, 105, 105, 0.25);
  --move-end-line-popup-wrap-text-color: #333;

  --message-input-bg-color: #fff;
  --message-input-textarea-color: #000;
  --message-input-border-color: #ddd;
  --message-input-name-color: #0000ac;
  --message-input-text-size-color: #999;
  --message-input-emoticon-area-border-color: #ddd;
  --message-input-emoticon-list-hover-bg-color: rgba(0, 0, 0, 0.1);
  --message-input-emoticon-list-emoji-bg-color: #ddd;
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #f2f2f2;
  --message-input-category-focus-border-color: #ddd;
  --message-input-category-focus-box-shadow-color: rgba(207, 207, 207, 0.3);
  --message-input-category-focus-bg-color: #fff;
  --message-input-button-bg-color: #0a0a6b;
  --message-input-button-text-color: #fff;
  --message-input-category-opacity: 1;
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #292929;
  --login-logo-notice-color: #ddd;
  --login-footer-color: #aaa;

  --profile-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --profile-wrap-border-color: #444;
  --profile-wrap-background-color: #313131;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #fff;
  --profile-profile-border-color: #444;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #444;
  --profile-nick-name-input-color: #fff;
  --profile-nick-name-input-bg-color: #313131;
  --profile-nick-name-input-focus-border-color: #fff;
  --profile-login-button-background-color: #fff;
  --profile-login-button-color: #000;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #191919;
  --header-color-title: #fff;
  --header-color-count: #ddd;
  --header-color-border: #ddd;

  --join-user-list-color-background: #333;
  --join-user-list-color-border: #444;
  --join-user-list-color-header-border: #444;
  --join-user-list-color-header-color: #fff;
  --join-user-list-color-footer-background: #222;
  --join-user-list-color-footer: #fff;
  --join-user-list-color-shadow: rgba(0, 0, 0, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #fff;
  --join-user-translate-color: #aaa;

  --language-modal-color-background: #313131;
  --language-modal-color-border: #444;
  --language-modal-color-header-border: #444;
  --language-modal-color-footer-background: #222;
  --language-modal-color-footer-text: #fff;
  --language-modal-color-close-icon: rgba(0, 0, 0, 0.3);
  --language-modal-span-color: #fff;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #fff;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #666;
  --toggle-color-bar-background-on: #fff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #0ed893;
  --toggle-color-label: #ddd;

  --invite-modal-color-background: #313131;
  --invite-modal-color-border: #444;
  --invite-modal-color-input-border: #444;
  --invite-modal-color-input-text: #fff;
  --invite-modal-color-input-background: #191919;
  --invite-modal-color-title: #fff;
  --invite-modal-color-close-button-border: #fff;
  --invite-modal-color-close-button-text: #fff;
  --invite-modal-color-submit-button-border: #fff;
  --invite-modal-color-submit-button-background: #fff;
  --invite-modal-color-submit-button-text: #000;
  --invite-modal-color-shadow: rgba(0, 0, 0, 0.3);

  --modal-color-background: #313131;
  --modal-color-border: #444;
  --modal-color-title: #fff;
  --modal-color-contents: #fff;
  --modal-color-close-button-border: #fff;
  --modal-color-close-button-text: #fff;
  --modal-color-submit-button-border: #fff;
  --modal-color-submit-button-background: #fff;
  --modal-color-submit-button-text: #000;
  --modal-color-shadow: rgba(0, 0, 0, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --file-drawer-wrap-border-color: #444;
  --file-drawer-wrap-background-color: #333;
  --file-drawer-header-border-bottom-color: #444;
  --file-drawer-title-color: #fff;
  --file-drawer-tab-item-color: #fff;
  --file-drawer-tab-item-focus-color: #fff;
  --file-drawer-tab-item-focus-border-color: #fff;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #444;
  --file-drawer-footer-select-count-color: #fff;
  --file-drawer-footer-save-color: #fff;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #0ed893;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #0ed893;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #0ed893;
  --video-preview-wrap-focus-background-color: #292929;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #fff;
  --body-nickname-color: #fff;
  --body-chat-bg-color: #292929;

  --chat-base-profile-border-color: #444;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #aaa;
  --chat-base-time-color: #aaa;

  --whisper-modal-input-border-color: #444;
  --whisper-modal-input-background-color: #191919;
  --whisper-modal-input-color: #fff;

  --whisper-and-report-popup-border-color: #444;
  --whisper-and-report-popup-background-color: #313131;
  --whisper-and-report-popup-box-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #313131;
  --whisper-and-report-popup-item-text-color: #fff;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #fff;

  --open-graph-border-color: #444;
  --open-graph-shadow-color: rgba(0, 0, 0, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #444;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #00ffc0;

  --leave-message-color: #ff3a54;

  --message-notice-bg-color: #111;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(0, 0, 0, 0.3);

  --warn-message-color: #fff000;

  --whisper-message-sub-wrap-bg-color: #353535;
  --whisper-message-sub-wrap-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-message-about-title-color: #00ffc0;
  --whisper-message-about-for-me-title-color: #dfb84e;
  --whisper-message-about-sub-title-color: #aaa;
  --whisper-message-content-color: #fff;
  --whisper-message-time-color: #aaa;
  --whisper-message-for-me-bg-color: #384150;

  --move-end-line-popup-wrap-background-color: #353535;
  --move-end-line-popup-wrap-border-color: #353535;
  --move-end-line-popup-wrap-shadow-color: rgba(0, 0, 0, 0.25);
  --move-end-line-popup-wrap-text-color: #aaa;

  --message-input-bg-color: #292929;
  --message-input-textarea-color: #fff;
  --message-input-border-color: #444;
  --message-input-name-color: #aaa;
  --message-input-text-size-color: #ddd;
  --message-input-emoticon-area-border-color: #444;
  --message-input-emoticon-list-hover-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-list-emoji-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #353535;
  --message-input-category-focus-border-color: #353535;
  --message-input-category-focus-box-shadow-color: rgba(0, 0, 0, 0.3);
  --message-input-category-focus-bg-color: #292929;
  --message-input-button-bg-color: #fff;
  --message-input-button-text-color: #000;
  --message-input-category-opacity: 0.5;
}
</style>

색상을 변경하고 싶다면 아래와 같이 변수를 덮어쓸 수 있습니다.

변수 재지정 방법 
<style>
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}
</style>

추가 정보

더 많은 정보와 자세한 사용법은 공식 문서 링크를 참조하세요.

/@vchatcloud/vue-ui-kit/

    Package Sidebar

    Install

    npm i @vchatcloud/vue-ui-kit

    Homepage

    www.vchatcloud.com

    Weekly Downloads

    2

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    2.11 MB

    Total Files

    291

    Last publish

    Collaborators

    • vchatcloud
    Try on RunKit
    Report malware