@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,129 @@
+<template>
+  <button
+    :class="buttonClassList"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <span v-if="$slots.icon" class="button-icon">
+      <slot name="icon"></slot>
+    </span>
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, StyleValue } from 'vue';
+
+interface Props {
+  size?: 'large' | 'default';
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
+  customStyle?: StyleValue;
+  loading?: boolean;
+  disabled?: boolean;
+  round?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: undefined,
+  type: undefined,
+  customStyle: () => ({}),
+  loading: false,
+  disabled: false,
+  round: true,
+});
+
+const emit = defineEmits(['click']);
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', event);
+  }
+}
+
+const buttonClassList = computed(() => [
+  'tui-button',
+  `tui-button-${props.type}`,
+  `tui-button-${props.size}`,
+  { 'tui-button-round': props.round },
+  { 'tui-button-loading': props.loading },
+  { 'tui-button-disabled': props.disabled },
+]);
+</script>
+
+<style lang="scss" scoped>
+.tui-theme-white .button-primary{
+  --shadow-color: rgba(213, 224, 242, 0.60);
+}
+
+.tui-theme-black .button-primary {
+  --shadow-color: rgba(28, 102, 229, 0.20);
+}
+.tui-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  border: 1px solid var(--active-color-1);
+  font-weight: 400;
+  line-height: 22px;
+  white-space: nowrap;
+  background-color: var(--active-color-1);
+  outline: none;
+  color: var(--font-color-7);
+  &:hover {
+    background: #144FB6;
+    border: 1px solid #144FB6;
+    outline: none;
+  }
+}
+.tui-button-primary {
+  background-color: transparent;
+  border: 1px solid var(--active-color-2);
+  color: var(--active-color-2);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  &:hover {
+    background-color: var(--shadow-color);
+  }
+}
+
+.tui-button-large {
+  padding: 19px 48px;
+  font-size: 20px;
+}
+.tui-button-default {
+  padding: 5px 30px;
+  font-size: 14px;
+}
+.tui-button-round {
+  border-radius: 999999px;
+}
+
+.tui-button-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.tui-button-icon {
+  margin-right: 5px;
+  display: flex;
+}
+
+.tui-button-text {
+  border: 0 solid transparent;
+  background-color: transparent;
+  color: var(--font-color-4);
+  &:hover {
+    border: 0 solid transparent;
+    background-color: transparent;
+    color: var(--font-color-4);
+  }
+  &::after {
+    border: none;
+  }
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="tui-checkbox">
+    <input
+      v-model="checked"
+      type="checkbox"
+      @change="handleValueChange"
+    />
+    <span @click="handleCheckBoxClick">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+interface Props {
+  modelValue: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+});
+
+const checked: Ref<boolean> = ref(props.modelValue);
+
+function handleCheckBoxClick() {
+  checked.value = !checked.value;
+}
+
+const emit = defineEmits(['update:modelValue']);
+
+function handleValueChange(event: any) {
+  checked.value = event.target.checked;
+  emit('update:modelValue', event.target.checked);
+}
+</script>
+
+<style lang="scss" scoped>
+.tui-checkbox {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+input {
+  color: var(--title-color);
+  border: 1px solid var(--stroke-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+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/Dialog/index.vue

@@ -0,0 +1,223 @@
+<!--
+  * Name: Dialog
+  * @param title String required [title of dialog]
+  * @param modelValue Boolean [Controls whether a dialog is displayed]
+  * @param modal Boolean [dialog Whether there is a mask layer]
+  * @param width number | string [Width of the dialog]
+  * @param beforeClose (done: DoneFn) => void; [dialog Callback function before closing]
+  * @param closeOnClickModal Boolean [Whether or not clicking on the mask layer to close the dialog is supported]
+  * @param showClose Boolean [Whether to show the close button]
+  * @param appendToBody Boolean [Whether to append into body element]
+  * @param appendToRoomContainer Boolean [Whether to append into roomContainer element]
+  * Usage:
+  * Use <Dialog title="there is title" v-model="showDialog"></Dialog> in template
+-->
+<template>
+  <div v-if="visible">
+    <teleport :to="targetName" :disabled="teleportDisable">
+      <div
+        ref="dialogRef"
+        class="overlay-container"
+        :class="[modal && 'overlay']"
+        :style="overlayContainerStyle"
+        @click="handleOverlayClick"
+      >
+        <div class="tui-dialog-container" :style="drawerContainerStyle">
+          <div class="tui-dialog-header">
+            <div class="tui-dialog-header-title">
+              {{ title }}
+            </div>
+            <template v-if="$slots.title">
+              <slot name="title"></slot>
+            </template>
+            <div v-if="showClose" class="close">
+              <svg-icon :size="16" @click="handleClose">
+                <close-icon></close-icon>
+              </svg-icon>
+            </div>
+          </div>
+          <div class="tui-dialog-content">
+            <slot></slot>
+          </div>
+          <template v-if="$slots.footer">
+            <div class="tui-dialog-footer">
+              <slot name="footer"></slot>
+            </div>
+          </template>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import SvgIcon from '../SvgIcon.vue';
+import CloseIcon from '../../icons/CloseIcon.vue';
+import { addSuffix } from '../../../../utils/utils';
+import useZIndex from '../../../../hooks/useZIndex';
+
+type DoneFn = () => void;
+type BeforeCloseFn = (done: DoneFn) => void;
+
+interface Props {
+  title?: string;
+  modelValue: boolean;
+  modal?: boolean;
+  width?: string | number;
+  beforeClose?: BeforeCloseFn | null;
+  closeOnClickModal?: boolean;
+  showClose?: boolean;
+  appendToBody?: boolean;
+  appendToRoomContainer?: boolean;
+  confirmButton?: string;
+  cancelButton?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  modelValue: false,
+  modal: false,
+  beforeClose: null,
+  closeOnClickModal: true,
+  width: undefined,
+  showClose: true,
+  appendToBody: false,
+  appendToRoomContainer: false,
+  confirmButton: '',
+  cancelButton: '',
+});
+
+const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel']);
+
+const { nextZIndex } = useZIndex();
+
+const teleportDisable = computed(() => !props.appendToBody && !props.appendToRoomContainer);
+
+const targetName = computed(() => {
+  if (props.appendToRoomContainer) {
+    return '#roomContainer';
+  }
+  return 'body';
+});
+
+const overlayContainerStyle = ref({});
+
+const visible = ref(false);
+
+const dialogRef = ref();
+
+const drawerContainerStyle = computed(() => {
+  let style = '';
+  if (props.width) {
+    style += `--tui-dialog-width: ${addSuffix(props.width)}`;
+  }
+  return style;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+  },
+);
+
+watch(visible, (val) => {
+  if (val) {
+    overlayContainerStyle.value = { zIndex: nextZIndex() };
+  }
+});
+
+function doClose() {
+  visible.value = false;
+  emit('close');
+  emit('update:modelValue', false);
+}
+
+function handleClose() {
+  if (props.beforeClose) {
+    props.beforeClose(doClose);
+  } else {
+    doClose();
+  }
+}
+
+function handleOverlayClick(event: any) {
+  if (!props.closeOnClickModal) {
+    return;
+  }
+  if (event.target !== event.currentTarget) {
+    return;
+  }
+  handleClose();
+}
+</script>
+
+<style lang="scss" scoped>
+.overlay-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.overlay {
+    background-color: rgba(15, 16, 20, 0.6);
+  }
+}
+
+.tui-dialog-container {
+  --tui-dialog-width: 480px;
+  background-color: #ffffff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  width: var(--tui-dialog-width, 50%);
+  box-shadow: 0px 3px 1px #e9f0fb;
+  .tui-dialog-header {
+    height: 64px;
+    position: relative;
+    display: flex;
+    padding: 0 24px;
+    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-dialog-content {
+    flex: 1;
+    padding: 20px 24px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: #4f586b;
+  }
+  .tui-dialog-footer {
+    padding: 20px 30px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+<!--
+  * Name: Drawer
+  * @param title String required [title of dialog]
+  * @param modelValue Boolean [Controls whether a drawer is displayed]
+  * @param modal Boolean [drawer Whether there is a mask layer]
+  * @param size number | string [Width of the drawer]
+  * @param beforeClose (done: DoneFn) => void; [drawer Callback function before closing]
+  * @param closeOnClickModal Boolean [Whether or not clicking on the mask layer to close the drawer is supported]
+  * @param appendToBody Boolean [Whether to append into body element]
+  * Usage:
+  * Use <Drawer title="there is title" v-model="showDrawer"></Drawer> in template
+  *
+-->
+<template>
+  <div
+    v-if="visible"
+    ref="drawerRef"
+    class="overlay-container"
+    :class="[modal && 'overlay']"
+    @mouseup="handleOverlayMouseUp"
+    @mousedown="handleOverlayMouseDown"
+    @click="handleOverlayClick"
+  >
+    <div class="drawer-container" :style="drawerContainerStyle">
+      <div class="drawer-header">
+        <div class="drawer-header-title">
+          {{ title }}
+        </div>
+        <template v-if="$slots.title">
+          <slot name="title"></slot>
+        </template>
+        <div class="close" @click="handleClose">
+          <svg-icon :size="16" :icon="CloseIcon" />
+        </div>
+      </div>
+      <div class="drawer-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import SvgIcon from './SvgIcon.vue';
+import CloseIcon from '../icons/CloseIcon.vue';
+import { addSuffix } from '../../../utils/utils';
+
+type DoneFn = () => void;
+type BeforeCloseFn = (done: DoneFn) => void;
+
+interface Props {
+  title?: string,
+  modelValue: boolean,
+  modal?: boolean,
+  size?: string | number,
+  beforeClose?: BeforeCloseFn | undefined;
+  appendToBody?: boolean,
+  appendToRoomContainer?: false;
+  closeOnClickModal?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  modelValue: false,
+  modal: false,
+  size: '400',
+  beforeClose: undefined,
+  appendToBody: false,
+  appendToRoomContainer: false,
+  closeOnClickModal: true,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const drawerRef = ref();
+const visible = ref(false);
+const drawerContainerStyle = computed(() => `width: ${addSuffix(props.size)}`);
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val;
+});
+
+watch(visible, (val) => {
+  if (val) {
+    if (props.appendToBody) {
+      document.body.appendChild(drawerRef.value);
+    } else if (props.appendToRoomContainer) {
+      document.getElementById('roomContainer')?.appendChild(drawerRef.value);
+    }
+  }
+});
+
+function doClose() {
+  visible.value = false;
+  emit('update:modelValue', false);
+}
+
+function handleClose() {
+  if (props.beforeClose) {
+    props.beforeClose(doClose);
+  } else {
+    doClose();
+  };
+};
+
+let mouseDownInCurrentTarget = false;
+let mouseUpInCurrentTarget = false;
+
+function handleOverlayMouseUp(event: any) {
+  mouseUpInCurrentTarget = event.target === event.currentTarget;
+}
+
+function handleOverlayMouseDown(event: any) {
+  mouseDownInCurrentTarget = event.target === event.currentTarget;
+}
+
+function handleOverlayClick() {
+  if (!props.closeOnClickModal) {
+    return;
+  }
+  if (mouseDownInCurrentTarget && mouseUpInCurrentTarget) {
+    handleClose();
+    mouseDownInCurrentTarget = false;
+    mouseUpInCurrentTarget = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.overlay-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2007;
+  &.overlay {
+    background-color: rgba(15, 16, 20, 0.60);
+  }
+}
+
+.tui-theme-white .drawer-container {
+  --background-color: var(--background-color-1);
+  --box-shadow: 0px 2px 4px rgba(32, 77, 141, 0.03),
+    0px 6px 10px rgba(32, 77, 141, 0.06),
+    0px 3px 14px rgba(32, 77, 141, 0.05);
+}
+
+.tui-theme-black .drawer-container {
+  --background-color: var(--background-color-2);
+  --box-shadow: 0px -8px 30px rgba(15, 16, 20, 0.5);
+}
+
+.drawer-container {
+  background-color: var(--background-color);
+  position: absolute;
+  right: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--box-shadow);
+  border-radius: 8px 0px 0px 8px;
+  .drawer-header {
+    height: 64px;
+    box-shadow: 0px 1px 0px var(--stroke-color);
+    position: relative;
+    display: flex;
+    padding: 0 20px;
+    align-items: center;
+    .drawer-header-title {
+      color: var(--font-color-1);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+    .close {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--font-color-1);
+      cursor: pointer;
+    }
+  }
+  .drawer-content {
+    flex: 1;
+    overflow: auto;
+  }
+}
+</style>