@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,212 @@
+<template>
+  <transition name="tui-message-box-fade">
+    <div
+      v-show="visible"
+      :style="overlayContentStyle"
+      :class="['overlay']"
+      class="message-box-overlay"
+      @click="handleOverlayClick"
+    >
+      <div :class="isMobile ? 'tui-message-box-h5' : 'tui-message-box'">
+        <div class="tui-message-box-header">
+          <div class="tui-message-box-title">{{ title }}</div>
+          <div class="close">
+            <svg-icon :size="16" :icon="CloseIcon" @click="handleClose"></svg-icon>
+          </div>
+        </div>
+        <div class="tui-message-box-body">
+          <div>{{ message }}</div>
+        </div>
+        <div class="tui-message-box-footer">
+          <tui-button size="default" class="button" @click="handleClose">{{ confirmButtonText }}</tui-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue';
+import TuiButton from '../Button.vue';
+import SvgIcon from '../SvgIcon.vue';
+import CloseIcon from '../../icons/CloseIcon.vue';
+import { isMobile } from '../../../../utils/environment';
+import useZIndex from '../../../../hooks/useZIndex';
+
+const visible = ref(false);
+const overlayContentStyle = ref({});
+const { nextZIndex } = useZIndex();
+
+type BeforeCloseFn = () => void;
+
+interface Props {
+  title: string;
+  message: string;
+  callback?: BeforeCloseFn | null;
+  confirmButtonText: string;
+  remove: Function;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  message: '',
+  callback: null,
+  confirmButtonText: '',
+  remove: () => {},
+});
+
+watch(visible, (val) => {
+  if (val) {
+    overlayContentStyle.value = { zIndex: nextZIndex() };
+  }
+});
+
+const emit = defineEmits(['close']);
+
+function handleClose() {
+  props.callback && props.callback();
+  doClose();
+}
+
+function doClose() {
+  visible.value = false;
+  props.remove();
+  emit('close');
+}
+
+function handleOverlayClick(event: any) {
+  if (event.target !== event.currentTarget) {
+    return;
+  }
+  handleClose();
+}
+
+function onOpen() {
+  visible.value = true;
+}
+onMounted(async () => {
+  onOpen();
+});
+</script>
+
+<style lang="scss" scoped>
+.message-box-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  right: 0;
+
+  &.overlay {
+    background-color: rgba(15, 16, 20, 0.6);
+  }
+}
+
+.tui-message-box {
+  width: 480px;
+  background-color: var(--white-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  .tui-message-box-header {
+    height: 64px;
+    position: relative;
+    display: flex;
+    padding: 0 24px;
+    color: var(--title-color);
+    align-items: center;
+    box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
+    .tui-dialog-header-title {
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      color: #0f1014;
+    }
+    .close {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #4f586b;
+      cursor: pointer;
+    }
+  }
+}
+.tui-message-box-h5 {
+  min-width: 80vw;
+  max-width: 80vw;
+  position: fixed;
+  background-color: #ffffff;
+  border-radius: 8px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  font-style: normal;
+  color: var(--black-color);
+  .tui-message-box-header {
+    display: inline-block;
+    font-size: 16px;
+    text-align: center;
+    font-weight: 500;
+    padding-top: 14px;
+    padding: 24px 24px 12px 24px;
+    box-sizing: border-box;
+    .close {
+      display: none;
+    }
+  }
+  .tui-message-box-body {
+    font-weight: 400;
+    font-size: 14px;
+    text-align: center;
+    font-weight: 400;
+    color: var(--font-color-4);
+    padding: 0 24px 20px 24px;
+  }
+  .tui-message-box-footer {
+    width: 100%;
+    border-top: 1px solid #d5e0f2;
+    display: flex;
+    justify-content: center;
+    padding: 11px 0;
+    .button {
+      background-color: #fff;
+      color: var(--active-color-1);
+      border: none;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
+
+.tui-message-box-body {
+  flex: 1;
+  padding: 20px 24px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #4f586b;
+}
+
+.tui-message-box-footer {
+  padding: 20px 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

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

@@ -0,0 +1,62 @@
+import { createVNode, render, VNode } from 'vue';
+import TUINotification from './index.vue';
+
+export type NotificationProps = {
+  message: string,
+  confirm?: () => Promise<void>,
+  cancel?: () => Promise<void>,
+  confirmButtonText?: string,
+  cancelButtonText?: string,
+}
+
+let notificationInstance: VNode | null = null;
+let container: Element | null = null;
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const Notification = ({
+  message, confirm, cancel, confirmButtonText, cancelButtonText }: NotificationProps) => {
+  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+
+  if (!notificationInstance) {
+    container = document.createElement('div');
+    fullscreenElement.appendChild(container);
+  }
+
+  const close = () => {
+    if (container) {
+      render(null, container);
+      fullscreenElement.removeChild(container);
+      notificationInstance = null;
+      container = null;
+    }
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  const vnode = createVNode(TUINotification, {
+    message,
+    confirm,
+    cancel,
+    confirmButtonText,
+    cancelButtonText,
+    close,
+  });
+
+  if (container) {
+    render(vnode, container);
+    notificationInstance = vnode;
+  }
+
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(close, 3000);
+
+  return {
+    close,
+  };
+};
+
+export default Notification;

package/src/TUIRoom/components/common/base/Notification/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div
+    v-show="visible"
+    class="tui-notification"
+  >
+    <div v-if="isMobile" class="tui-notification-container-mobile" :style="overlayContainerStyle">
+      <svg-icon :icon="ApplyTipsIcon" class="tui-notification-mobile-icon"></svg-icon>
+      <span class="tui-notification-mobile-content">{{ message }}</span>
+      <div class="tui-notification-mobile-check" @click="handleAgree">{{ confirmButtonText }}</div>
+    </div>
+    <div v-else class="tui-notification-container" :style="overlayContainerStyle">
+      <div class="tui-notification-header">
+        <div class="tui-notification-title">{{ message }}</div>
+        <div class="close">
+          <svg-icon :size="16" :icon="CloseIcon" @click="handleClose"></svg-icon>
+        </div>
+      </div>
+      <div class="tui-notification-footer">
+        <tui-button size="default" @click="handleAgree">{{ confirmButtonText }}</tui-button>
+        <tui-button size="default" type="primary" class="button" @click="handleReject">
+          {{ cancelButtonText }}
+        </tui-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue';
+import TuiButton from '../Button.vue';
+import SvgIcon from '../SvgIcon.vue';
+import CloseIcon from '../../icons/CloseIcon.vue';
+import useZIndex from '../../../../hooks/useZIndex';
+import { isMobile } from '../../../../utils/environment';
+import ApplyTipsIcon from '../../icons/ApplyTipsIcon.vue';
+
+const visible = ref(false);
+const overlayContainerStyle = ref({});
+const { nextZIndex } = useZIndex();
+
+type BeforeCloseFn = () => void;
+
+interface Props {
+  message: string;
+  confirm?: BeforeCloseFn | null;
+  cancel?: BeforeCloseFn | null;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  message: '',
+  confirmButtonText: '',
+  cancelButtonText: '',
+  confirm: null,
+  cancel: null,
+});
+
+const emit = defineEmits(['close']);
+
+watch(visible, (val) => {
+  if (val) {
+    overlayContainerStyle.value = { zIndex: nextZIndex() };
+  }
+});
+
+function handleClose() {
+  visible.value = false;
+  emit('close');
+}
+
+function handleAgree() {
+  if (props.confirm) {
+    props.confirm();
+  }
+  handleClose();
+}
+
+function handleReject() {
+  if (props.cancel) {
+    props.cancel();
+  }
+  handleClose();
+}
+
+function onOpen() {
+  visible.value = true;
+}
+
+onMounted(async () => {
+  onOpen();
+});
+</script>
+
+<style lang="scss" scoped>
+.tui-notification {
+  .tui-notification-container-mobile {
+    position: fixed;
+    top: 8%;
+    width: 95%;
+    margin: 0 10px;
+    height: 44px;
+    background-color: #fff;
+    border-radius: 10px;
+    display: flex;
+    text-align: center;
+    .tui-notification-mobile-icon {
+      color: #000000;
+      padding: 0 10px;
+      margin-left: 4px;
+    }
+    .tui-notification-mobile-content {
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 44px;
+      color: #181820;
+      margin: 0 auto 0 4px;
+    }
+    .tui-notification-mobile-check {
+      background-color: #1C66E5;
+      color: #FFFFFF;
+      border-radius: 10px;
+      margin: 6px 10px 6px 0;
+      padding: 0 12px;
+      line-height: 34px;
+    }
+  }
+  .tui-notification-container {
+    width: 400px;
+    background-color: var(--white-color);
+    position: fixed;
+    top: 7%;
+    right: 1%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 20px;
+    filter: drop-shadow(0px 0px 1px rgba(5, 5, 5, 0.1)) drop-shadow(0px 3px 8px rgba(233, 240, 251, 0.5));
+    .tui-notification-header {
+      height: 64px;
+      position: relative;
+      display: flex;
+      padding: 0 24px;
+      color: var(--title-color);
+      font-weight: 500;
+      align-items: center;
+      .tui-notification-title {
+        max-width: 300px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .close {
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #4f586b;
+        cursor: pointer;
+      }
+    }
+  }
+  .tui-notification-footer {
+    padding: 20px 30px;
+    display: flex;
+    justify-content: flex-end;
+    .button {
+      margin-left: 12px;
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+  <div :class="['option-container', { 'active': isSelected }]" @click="handleChooseOption">
+    <span class="option-content">{{ label || value }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, computed, onBeforeUnmount } from 'vue';
+
+interface OptionData {
+  label: string,
+  value: string | number | boolean | object,
+}
+
+interface SelectData {
+  selectedValue: string | number | boolean | object,
+  optionObj: Record<any, any>,
+  optionDataList: OptionData[],
+  onOptionCreated: (optionData: OptionData) => void,
+  onOptionDestroyed: (value: string | number | boolean | object) => void,
+  onOptionSelected: (optionData: OptionData) => void,
+}
+
+const props = defineProps<OptionData>();
+
+const select: SelectData | undefined = inject('select');
+
+const isSelected = computed(() => select && select.selectedValue === props.value);
+
+const optionData = computed(() => ({
+  label: props.label,
+  value: props.value,
+}));
+
+select?.onOptionCreated(optionData.value);
+
+onBeforeUnmount(() => {
+  select?.onOptionDestroyed(props.value);
+});
+
+watch(() => [props.value, props.label], (val, oldVal) => {
+  if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+    select?.onOptionDestroyed(oldVal);
+    select?.onOptionCreated(optionData.value);
+  }
+});
+
+function handleChooseOption() {
+  select?.onOptionSelected(optionData.value);
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-white .option-container {
+  --hover-background-color: rgba(213, 224, 242, 0.5);
+}
+
+.tui-theme-black .option-container {
+  --hover-background-color: rgba(213, 224, 242, 0.5);
+}
+
+.option-container {
+  padding: 6px 15px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #000;
+  &.active {
+    color: var(--active-color-2);
+  }
+  &:hover {
+    background-color: var(--hover-background-color);
+  }
+  .option-content {
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: 500;
+  }
+}
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="popup-container">
+    <div class="popup-main-header">
+      <span v-tap="handleClose" class="icon-container">
+        <svg-icon class="close-icon" :icon="ArrowStrokeBackIcon"></svg-icon>
+      </span>
+      <span class="sidebar-title">{{ title }}</span>
+    </div>
+    <div class="popup-main-content">
+      <slot name="sidebarContent" />
+    </div>
+    <div class="popup-main-footer">
+      <slot name="sidebarFooter" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import SvgIcon from './SvgIcon.vue';
+import { useBasicStore } from '../../../stores/basic';
+import ArrowStrokeBackIcon from '../icons/ArrowStrokeBackIcon.vue';
+import vTap from '../../../directives/vTap';
+
+interface Props {
+  title: string,
+}
+defineProps<Props>();
+
+const basicStore = useBasicStore();
+
+function handleClose() {
+  basicStore.setSidebarOpenStatus(false);
+  basicStore.setSidebarName('');
+}
+
+</script>
+<style lang="scss" scoped>
+.popup-container {
+  width: 100vw;
+  height: 100%;
+  background: var(--room-detail-background);
+  position: static;
+  flex: 1;
+  .popup-main-header {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .icon-container{
+      padding: 20px 25px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 10px;
+      height: 18px;
+      background-size: cover;
+      box-sizing: content-box;
+    }
+    .sidebar-title {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 22px;
+      text-align: center;
+      color: var(--input-font-color);
+    }
+    .close-icon{
+      width: 10px;
+      height: 18px;
+      background-size: cover;
+      }
+  }
+  .popup-main-content {
+    width: 100%;
+    height: calc(100% - 130px);
+    overflow: hidden;
+  }
+  .popup-main-footer {
+    width: 100%;
+    height: auto;
+    position: sticky;
+    bottom: 0;
+    padding-top: 10px;
+  }
+}
+</style>