@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/components/common/base/IconButton.vue

@@ -0,0 +1,181 @@
+<!--
+  * Name: IconButton
+  * @param title String required
+  * @param hasMore Boolean
+  * @param hideHoverEffect Boolean
+  * @param layout IconButtonLayout.VERTICAl | IconButtonLayout.HORIZONTAL
+  * Usage:
+  * Use <icon-button :icon="chatIcon"><icon-button> in template
+-->
+<template>
+  <div :class="[themeClass]">
+    <div class="icon-button-container">
+      <div
+        v-if="isMobile"
+        v-tap="handleClickEvent"
+        :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
+      >
+        <slot></slot>
+        <svg-icon v-if="icon" :icon="icon"></svg-icon>
+        <span class="title">{{ title }}</span>
+      </div>
+      <div
+        v-else
+        :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
+        @click="handleClickEvent"
+      >
+        <slot></slot>
+        <svg-icon v-if="icon" :icon="icon"></svg-icon>
+        <svg-icon v-if="isNotSupport" class="unsupport-icon" :icon="UnSupportIcon"></svg-icon>
+        <span class="title">
+          {{ title }}
+          <slot name="title"></slot>
+        </span>
+      </div>
+      <div v-if="hasMore" ref="moreSpanRef" class="icon-arrow" @click="$emit('click-more')">
+        <svg-icon :icon="ArrowUp"></svg-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from './SvgIcon.vue';
+import ArrowUp from '../icons/ArrowUpIcon.vue';
+import { IconButtonLayout } from '../../../constants/room';
+import { computed } from 'vue';
+import { isMobile } from '../../../utils/environment';
+import UnSupportIcon from '../icons/UnSupportIcon.vue';
+import vTap from '../../../directives/vTap';
+import type { Component } from 'vue';
+
+interface Props {
+  title?: string,
+  hasMore?: boolean,
+  hideHoverEffect?: boolean,
+  disabled?: boolean,
+  isActive?: boolean,
+  layout?: IconButtonLayout,
+  icon?: Component | null,
+  isNotSupport?: boolean,
+  theme?: 'white' | 'black',
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  icon: null,
+  hasMore: false,
+  hideHoverEffect: false,
+  disabled: false,
+  isActive: false,
+  layout: IconButtonLayout.VERTICAl,
+  isNotSupport: false,
+  theme: undefined,
+});
+const emit = defineEmits(['click-icon', 'click-more']);
+
+const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+
+const iconContentClass = computed(() => {
+  if (props.layout === IconButtonLayout.HORIZONTAL) {
+    return 'icon-content-horizontal';
+  };
+  return 'icon-content-vertical';
+});
+
+
+const handleClickEvent = () => {
+  emit('click-icon');
+};
+
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-black .icon-button-container {
+  --icon-button-hover: rgba(46, 50, 61, 0.70);
+}
+
+.tui-theme-white .icon-button-container {
+  --icon-button-hover: rgba(79, 88, 107, 0.05);
+}
+
+.icon-button-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--font-color-1);
+  cursor: pointer;
+  .icon-content {
+    &.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    &:hover {
+      background: var(--icon-button-hover);
+    }
+  }
+  .icon-content-horizontal {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 6px;
+    height: 32px;
+    flex-direction: row;
+    padding: 0 5px;
+    .title {
+      font-size: 14px;
+      line-height: 26px;
+      font-weight: 500;
+      margin-left: 4px;
+    }
+  }
+  .icon-content-vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    height: 56px;
+    min-width: 56px;
+    padding: 5px;
+    .title {
+      font-size: 12px;
+      line-height: 20px;
+      font-weight: 400;
+      margin-top: 4px;
+    }
+  }
+  .icon-arrow {
+    position: relative;
+    width: 12px;
+    height: 56px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    &:hover {
+      background: var(--icon-button-hover);
+    }
+  }
+}
+.unsupport-icon{
+  position: absolute;
+  top: 13px;
+  left: 26px;
+}
+
+@media screen and (max-width: 600px) {
+  .icon-box {
+    width: 72px;
+    &.hover-effect:hover {
+      &:before{
+        width: 72px;
+      }
+      &:after{
+       width: 72px;
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/common/base/Input.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="tui-input">
+    <input
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      maxlength="80"
+      :type="type"
+      @input="updateValue"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: string;
+  placeholder: string;
+  disabled?: boolean;
+  type?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  type: 'text',
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function updateValue(event: any) {
+  emit('update:modelValue', event.target.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.tui-input {
+  position: relative;
+  display: inline-block;
+}
+
+input {
+  width: 100%;
+  padding: 10px 0px 10px 16px;
+  font-size: 14px;
+  color: var(--title-color);
+  background-color: #f9fafc;
+  border: 1px solid var(--stroke-color);
+  border-radius: 4px;
+}
+
+input:focus {
+  border-color: var(--active-color-1);
+  outline: 0;
+}
+
+input:disabled {
+  background-color: var(--background-color-9);
+}
+</style>

package/src/TUIRoom/components/common/base/Message/Instance.ts

@@ -0,0 +1,61 @@
+import { h, render, ref } from 'vue';
+import Message from './Message.vue';
+import indexManager from '../../../../hooks/useZIndex';
+
+export type MessageProps = {
+    type: 'success' | 'error' | 'warning' | 'info'
+    message: string
+    duration?: number
+    zIndex?: number
+}
+const activeMessages = [] as any;
+
+const createInstance = ({ type, message, duration = 3000 }: MessageProps) => {
+  const container = document.createElement('div');
+  container.setAttribute('class', 't-message-container');
+  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+  fullscreenElement.appendChild(container);
+  const uniqueKey = `message-${Date.now()}-${Math.random()}`;
+
+
+  const updateTopValues = () => {
+    activeMessages.forEach((msg: any, index: number) => {
+      msg.updateTop(`calc(6% + ${index * 50}px)`);
+    });
+  };
+
+  const removeMessage = (msg: any) => {
+    const index = activeMessages.indexOf(msg);
+    if (index !== -1) {
+      activeMessages.splice(index, 1);
+      updateTopValues();
+    }
+  };
+  const onRemove = () => {
+    render(null, container);
+    fullscreenElement.removeChild(container);
+    removeMessage(messageInstance);
+  };
+  const topValue = ref(`calc(6% + ${activeMessages.length * 50}px)`);
+
+  const messageInstance = {
+    key: uniqueKey,
+    updateTop: (newTop: string) => {
+      topValue.value = newTop;
+    },
+  };
+  activeMessages.push(messageInstance);
+
+  const vNode = h(Message, {
+    key: uniqueKey,
+    type,
+    message,
+    duration,
+    remove: onRemove,
+    top: topValue,
+    zIndex: indexManager().nextZIndex(),
+  });
+  render(vNode, container);
+};
+
+export default createInstance;

package/src/TUIRoom/components/common/base/Message/Message.scss

@@ -0,0 +1,60 @@
+@import './mixins';
+.message {
+  &-enter {
+    &-from {
+      transform: translate3d(0, -75px, 0);
+      opacity: 0;
+    }
+
+    &-active {
+      transition: all 0.3s;
+    }
+
+    &-to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+}
+
+.t-message {
+  display: inline-block;
+  max-height: 50px;
+  border-radius: 8px;
+  padding: 10px;
+  position: absolute;
+  z-index: 9999;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 6%;
+  background: #f5f5f5;
+  color: #999;
+  white-space: nowrap;
+  
+  .t-message-text {
+    vertical-align: middle;
+    font-size: .875rem;
+  }
+
+  .t-message-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-size: cover;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+
+.t-message.t-message-error {
+  @include err_color();
+}
+.t-message.t-message-success {
+  @include success_color();
+}
+.t-message.t-message-warning {
+  @include warning_color();
+}
+.t-message.t-message-info {
+  @include info_color();
+}

package/src/TUIRoom/components/common/base/Message/Message.ts

@@ -0,0 +1,5 @@
+import createInstance, { MessageProps } from './Instance';
+
+const renderMsg = (config: MessageProps) => createInstance(config);
+
+export default renderMsg;

package/src/TUIRoom/components/common/base/Message/Message.vue

@@ -0,0 +1,78 @@
+<template>
+  <Transition name="message">
+    <div
+      v-show="isShow" ref="messageRef" :class="['t-message', `t-message-${props.type}`]"
+      :style="{
+        top: props.top.value,
+        zIndex: props.zIndex
+      }"
+    >
+      <svg-icon :icon="svgName" class="t-message-icon"></svg-icon>
+      <span class="t-message-text">{{ props.message }}</span>
+    </div>
+  </Transition>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, PropType, defineProps, computed } from 'vue';
+import SvgIcon from '../SvgIcon.vue';
+import success from './images/success.vue';
+import error from './images/error.vue';
+import warning from './images/warning.vue';
+import info from './images/info.vue';
+
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'success' | 'error' | 'warning' | 'info'>,
+    default: 'success',
+  },
+  message: {
+    type: [String, Number],
+    default: '',
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  remove: {
+    type: Function,
+    default: () => {},
+  },
+  top: {
+    type: Object,
+    default: () => {},
+  },
+  zIndex: {
+    type: Number,
+    default: 1000,
+  },
+});
+
+const svgName = computed(() => {
+  const svgMap = { success, error, warning, info };
+  return svgMap[props.type] || info;
+});
+
+const messageRef = ref();
+const isShow = ref(false);
+onMounted(async () => {
+  onOpen();
+});
+
+const timer = ref();
+const onOpen = () => {
+  isShow.value = true;
+  timer.value && clearTimeout(timer.value);
+  timer.value = setTimeout(() => {
+    onClose();
+  }, props.duration);
+};
+const onClose = () => {
+  isShow.value = false;
+  props.remove();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./Message.scss";
+</style>

package/src/TUIRoom/components/common/base/Message/_mixins.scss

@@ -0,0 +1,42 @@
+@mixin success_color() {
+  .tui-theme-white & {
+    color: #00B89C;
+    background-color: #EBFFFA;
+  }
+  .tui-theme-black & {
+    color: #1CEACB;
+    background-color: #19423C;
+  }
+}
+@mixin err_color() {
+  .tui-theme-white & {
+    color: #E04343;
+    background-color: #FFEBEE;
+  }
+  .tui-theme-black & {
+    color: #F46262;
+    background-color: #421414;
+  }
+}
+
+@mixin warning_color() {
+  .tui-theme-white & {
+    color: #E59753;
+    background-color: #FFF4EB;
+  }
+  .tui-theme-black & {
+    color: #FFAD66;
+    background-color: #3F2712;
+  }
+}
+
+@mixin info_color() {
+  .tui-theme-white & {
+    color: #494F6A;
+    background-color: #EBF2FF;
+  }
+  .tui-theme-black & {
+    color: #DCE7FA;
+    background-color: #4A506B;
+  }
+}

package/src/TUIRoom/components/common/base/Message/images/error.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#229;&#133;&#179;&#233;&#151;&#173; &#233;&#148;&#153;&#232;&#175;&#175;">
+      <path
+        id="Vector"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0007 17.5002C14.1428 17.5002 17.5006 14.1423 17.5006 10.0002C17.5006 5.85803 14.1428 2.50016 10.0007 2.50016C5.85852 2.50016 2.50065 5.85803 2.50065 10.0002C2.50065 14.1423 5.85852 17.5002 10.0007 17.5002ZM19.1673 10.0002C19.1673 15.0627 15.0632 19.1668 10.0007 19.1668C4.93804 19.1668 0.833984 15.0627 0.833984 10.0002C0.833984 4.93756 4.93804 0.833496 10.0007 0.833496C15.0632 0.833497 19.1673 4.93756 19.1673 10.0002ZM6.17021 12.6521L8.82215 10.0002L6.17021 7.34823L7.34872 6.16972L10.0007 8.82166L12.652 6.17029L13.8306 7.3488L11.1791 10.0002L13.8306 12.6515L12.652 13.8301L10.0007 11.1787L7.34872 13.8306L6.17021 12.6521Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/base/Message/images/info.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#230;&#143;&#144;&#231;&#164;&#186;">
+      <path
+        id="Vector"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0007 17.4992C14.1428 17.4992 17.5006 14.1414 17.5006 9.99919C17.5006 5.85705 14.1428 2.49919 10.0007 2.49919C5.85852 2.49919 2.50065 5.85705 2.50065 9.99919C2.50065 14.1414 5.85852 17.4992 10.0007 17.4992ZM19.1673 9.99919C19.1673 15.0618 15.0632 19.1659 10.0007 19.1659C4.93804 19.1659 0.833984 15.0618 0.833984 9.99919C0.833984 4.93658 4.93804 0.83252 10.0007 0.83252C15.0632 0.83252 19.1673 4.93658 19.1673 9.99919ZM9.16732 14.5825V8.33252H10.834V14.5825H9.16732ZM10.834 7.08252H9.16407V5.4126H10.834V7.08252Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/base/Message/images/success.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#229;&#174;&#140;&#230;&#136;&#144;">
+      <g id="Union">
+        <path
+          d="M5.58415 10.0766L9.18049 13.7057L14.6341 7.55313L13.5742 6.66683L8.97862 10.9393L6.42575 9.16797L5.58415 10.0766Z"
+          fill="currentColor"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M19.1673 10.0002C19.1673 15.0628 15.0633 19.1668 10.0007 19.1668C4.93804 19.1668 0.833984 15.0628 0.833984 10.0002C0.833984 4.93755 4.93804 0.833496 10.0007 0.833496C15.0633 0.833496 19.1673 4.93755 19.1673 10.0002ZM17.5006 10.0002C17.5006 14.1423 14.1428 17.5002 10.0007 17.5002C5.85851 17.5002 2.50065 14.1423 2.50065 10.0002C2.50065 5.85803 5.85851 2.50016 10.0007 2.50016C14.1428 2.50016 17.5006 5.85803 17.5006 10.0002Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/base/Message/images/warning.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#230;&#179;&#168;&#230;&#132;&#143;">
+      <path
+        id="Vector"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0007 2.49919C14.1428 2.49919 17.5006 5.85702 17.5006 9.99919C17.5006 14.1413 14.1428 17.4992 10.0007 17.4992C5.85852 17.4992 2.50065 14.1413 2.50065 9.99919C2.50065 5.85702 5.85852 2.49919 10.0007 2.49919ZM19.1673 9.99919C19.1673 4.9366 15.0632 0.83252 10.0007 0.83252C4.93804 0.83252 0.833984 4.9366 0.833984 9.99919C0.833984 15.0618 4.93804 19.1659 10.0007 19.1659C15.0632 19.1659 19.1673 15.0618 19.1673 9.99919ZM9.16732 5.41585V11.6659H10.834V5.41585H9.16732ZM10.834 12.9159H9.16407V14.5858H10.834V12.9159Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/base/Message/index.ts

@@ -0,0 +1,3 @@
+import Message from './Message';
+
+export default Message;

package/src/TUIRoom/components/common/base/MessageBox/index.ts

@@ -0,0 +1,31 @@
+import { createVNode, render } from 'vue';
+
+import TUIMessageBox from './index.vue';
+
+export type MessageProps = {
+    title: string,
+    message: string,
+    callback?: () => Promise<void>,
+    confirmButtonText?: string,
+}
+const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => {
+  const container = document.createElement('div');
+  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+  fullscreenElement.appendChild(container);
+
+  const onRemove = () => {
+    render(null, container);
+    fullscreenElement.removeChild(container);
+  };
+
+  const vnode = createVNode(TUIMessageBox, {
+    title,
+    message,
+    callback,
+    confirmButtonText,
+    remove: onRemove,
+  });
+  render(vnode, container);
+};
+
+export default MessageBox;