@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/ScheduleConference/Contacts.vue

@@ -1,18 +1,27 @@
 <template>
-  <TuiDialog
-    v-model="isDialogVisible"
+  <PanelContainer
+    :visible="isDialogVisible"
     :title="t('Contacts')"
-    :modal="true"
-    :append-to-body="true"
-    :close-on-click-modal="false"
+    @input="isDialogVisible = $event"
   >
-    <div class="contacts-container">
+    <div :class="['contacts-container', props.isMobile && 'h5']" @click.stop>
       <div class="contact">
         <div class="contact-search">
           <TuiInput
-            v-model="searchValue" class="contact-search-input" :search="searchContact"
-            @focus="(element) => { element.classList.add('focus') }"
-            @blur="(element) => { element.classList.remove('focus') }"
+            v-model="searchValue"
+            class="contact-search-input"
+            :placeholder="t('Please enter the member name')"
+            :search="searchContact"
+            @focus="
+              element => {
+                element.classList.add('focus');
+              }
+            "
+            @blur="
+              element => {
+                element.classList.remove('focus');
+              }
+            "
           >
             <template #suffixIcon>
               <SearchIcon class="search-icon" @mousedown.prevent />
@@ -20,18 +29,36 @@
           </TuiInput>
         </div>
         <div class="contact-list">
-          <div v-if="showList.length === 0 && searchValue" class="no-result">{{ t('No relevant members found') }}</div>
+          <div v-if="showList.length === 0 && searchValue" class="no-result">
+            {{ t('No relevant members found') }}
+          </div>
           <template v-else>
-            <div v-for="item in showList" :key="item.userInfo.userID" class="contact-list-item">
+            <div
+              v-for="item in showList"
+              :key="item.userInfo.userID"
+              :class="[
+                'contact-list-item',
+                item.disabled && 'contact-list-item-disabled',
+              ]"
+            >
               <TuiCheckbox
                 :model-value="item.selected"
+                :disabled="item.disabled"
                 class="contact-list-item-checkbox"
                 @input="item.selected = $event"
               >
                 <span class="contact-list-item-checkbox-container">
-                  <TuiAvatar class="contact-list-item-avatar" :img-src="item.userInfo.profile.avatar"></TuiAvatar>
-                  <p class="contact-list-item-name" :title="item.userInfo.profile.nick">
-                    {{ item.userInfo.profile.nick || item.userInfo.profile.userID }}
+                  <TuiAvatar
+                    class="contact-list-item-avatar"
+                    :img-src="item.userInfo.profile.avatar"
+                  />
+                  <p
+                    class="contact-list-item-name"
+                    :title="item.userInfo.profile.nick"
+                  >
+                    {{
+                      item.userInfo.profile.nick || item.userInfo.profile.userID
+                    }}
                   </p>
                 </span>
               </TuiCheckbox>
@@ -39,53 +66,109 @@
           </template>
         </div>
       </div>
-      <div class="chosen">
-        <div class="chosen-title">{{ t(`Selected Contact`) + `(${selectedContacts.length})` }}</div>
+      <div class="chosen" v-if="!props.isMobile">
+        <div class="chosen-title">
+          {{ t(`Selected Contact`) + `(${selectedContacts.length})` }}
+        </div>
         <div class="chosen-list">
-          <div v-for="item in selectedContacts" :key="item.userInfo.userID" class="chosen-list-item">
-            <TuiAvatar class="chosen-list-item-avatar" :img-src="item.userInfo.profile.avatar"></TuiAvatar>
-            <p class="chosen-list-item-name" :title="item.userInfo.profile.nick">
+          <div
+            v-for="item in selectedContacts"
+            :key="item.userInfo.userID"
+            class="chosen-list-item"
+          >
+            <TuiAvatar
+              class="chosen-list-item-avatar"
+              :img-src="item.userInfo.profile.avatar"
+            />
+            <p
+              class="chosen-list-item-name"
+              :title="item.userInfo.profile.nick"
+            >
               {{ item.userInfo.profile.nick || item.userInfo.profile.userID }}
             </p>
-            <CloseIcon class="chosen-list-item-remove" @click="removeSelectUser(item)"></CloseIcon>
+            <CloseIcon
+              class="chosen-list-item-remove"
+              @click="removeSelectUser(item)"
+            />
           </div>
         </div>
         <div class="chosen-footer">
-          <TuiButton class="chosen-footer-button" type="primary" @click="cancel">{{ t('Cancel') }}</TuiButton>
-          <TuiButton class="chosen-footer-button" @click="confirm">{{ t('Confirm') }}</TuiButton>
+          <TuiButton
+            class="chosen-footer-button"
+            type="primary"
+            @click="cancel"
+          >
+            {{ t('Cancel') }}
+          </TuiButton>
+          <TuiButton class="chosen-footer-button" @click="confirm">{{
+            t('Confirm')
+          }}</TuiButton>
         </div>
       </div>
     </div>
-  </TuiDialog>
+
+    <template v-if="props.isMobile" #footer>
+      <div class="contact-footer">
+        <div class="chosen-member">
+          <span v-if="selectedContacts.length">
+            {{ t('x people selected', { number: selectedContacts.length }) }}
+          </span>
+        </div>
+        <TuiButton :disabled="!selectedContacts.length" @click="confirm">
+          {{ t('Confirm') + `(${selectedContacts.length})` }}
+        </TuiButton>
+      </div>
+    </template>
+  </PanelContainer>
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, watch, computed } from 'vue';
-import TuiDialog from '../common/base/Dialog/index.vue';
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  watch,
+  computed,
+  withDefaults,
+} from 'vue';
 import TuiInput from '../common/base/Input/index.vue';
-import TuiCheckbox from '../common/base/Checkbox.vue';
+import TuiCheckbox from '../common/base/Checkbox/index.vue';
 import TuiButton from '../common/base/Button.vue';
 import TuiAvatar from '../common/Avatar.vue';
 import SearchIcon from '../common/icons/SearchIcon.vue';
 import CloseIcon from '../common/icons/CloseIcon.vue';
+import PanelContainer from './PanelContainer.vue';
 
 import { useI18n } from '../../locales';
 
 const { t } = useI18n();
 
 interface Props {
-  visible: boolean,
-  contacts: any[],
-  selectedList?: any[],
+  visible: boolean;
+  contacts: any[];
+  selectedList?: any[];
+  isMobile?: boolean;
+  disabledList?: any[];
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  isMobile: false,
+});
 const emit = defineEmits(['input', 'confirm']);
 const isDialogVisible = ref(false);
 const searchValue = ref('');
 const updateContacts = () => {
-  contacts.value = props.contacts.map((user) => {
-    const index = props.selectedList?.findIndex(selectedUser => selectedUser.userId === user.userID);
-    return { selected: index !== undefined && index !== -1, userInfo: user };
+  contacts.value = props.contacts.map(user => {
+    const index = props.selectedList?.findIndex(
+      selectedUser => selectedUser.userId === user.userID
+    );
+    const disableUserIndex = props.disabledList?.findIndex(
+      disableUser => disableUser.userId === user.userID
+    );
+    return {
+      selected: index !== undefined && index !== -1,
+      disabled: disableUserIndex !== undefined && disableUserIndex !== -1,
+      userInfo: user,
+    };
   });
 };
 const updateVisible = (val: boolean) => {
@@ -93,31 +176,54 @@ const updateVisible = (val: boolean) => {
   emit('input', val);
 };
 
-const contacts = ref(props.contacts.map((user) => {
-  const index = props.selectedList?.findIndex(selectedUser => selectedUser.userId === user.userID);
-  return { selected: !!index && index !== -1, userInfo: user };
-}));
-const selectedContacts = computed(() => contacts.value.filter(user => user.selected));
+const contacts = ref(
+  props.contacts.map(user => {
+    const index = props.selectedList?.findIndex(
+      selectedUser => selectedUser.userId === user.userID
+    );
+    const disableUserIndex = props.disabledList?.findIndex(
+      disabledUser => disabledUser.userId === user.userID
+    );
+    return {
+      selected: !!index && index !== -1,
+      disabled: !!disableUserIndex && disableUserIndex !== -1,
+      userInfo: user,
+    };
+  })
+);
+const selectedContacts = computed(() =>
+  contacts.value.filter(user => user.selected)
+);
 const searchResult = ref<any>([]);
-const showList = computed(() => (searchValue.value ? searchResult.value : contacts.value));
+const showList = computed(() =>
+  searchValue.value ? searchResult.value : contacts.value
+);
 const searchContact = (v: any) => {
   if (!v) return [];
-  searchResult.value = contacts.value
-    .filter(item => item.userInfo.profile.nick.includes(v) || item.userInfo.userID.includes(v));
+  searchResult.value = contacts.value.filter(
+    item =>
+      item.userInfo.profile.nick.includes(v) || item.userInfo.userID.includes(v)
+  );
 };
+
 const removeSelectUser = (user: { selected: boolean; userInfo: any }) => {
-  const index = contacts.value.findIndex(item => user.userInfo.userID === item.userInfo.userID);
+  const index = contacts.value.findIndex(
+    item => user.userInfo.userID === item.userInfo.userID
+  );
   contacts.value[index].selected = false;
 };
 const confirm = () => {
-  emit('confirm', selectedContacts.value.map((item) => {
-    const { userID, profile } = item.userInfo;
-    return {
-      userId: userID,
-      userName: profile.nick,
-      avatarUrl: profile.avatar,
-    };
-  }));
+  emit(
+    'confirm',
+    selectedContacts.value.map(item => {
+      const { userID, profile } = item.userInfo;
+      return {
+        userId: userID,
+        userName: profile.nick,
+        avatarUrl: profile.avatar,
+      };
+    })
+  );
   updateVisible(false);
 };
 
@@ -127,18 +233,22 @@ const cancel = () => {
 
 watch(
   () => props.visible,
-  (val) => {
+  val => {
     isDialogVisible.value = val;
   },
   {
     immediate: true,
-  },
+  }
 );
 
-watch(isDialogVisible, (val) => {
-  searchValue.value = '';
-  updateVisible(val);
-}, { immediate: true });
+watch(
+  isDialogVisible,
+  val => {
+    searchValue.value = '';
+    updateVisible(val);
+  },
+  { immediate: true }
+);
 </script>
 <style lang="scss" scoped>
 .contacts-container {
@@ -150,10 +260,69 @@ watch(isDialogVisible, (val) => {
     height: 400px;
   }
 
+  .contact-list,
+  .chosen-list {
+    box-sizing: border-box;
+    height: 80%;
+    max-height: calc(100% - 68px);
+    margin: 10px 0;
+    overflow: auto;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      height: 34px;
+      line-height: 34px;
+      cursor: pointer;
+
+      &-checkbox {
+        display: flex;
+        width: 100%;
+        height: 100%;
+
+        &-container {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &-avatar {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        min-height: 20px;
+        margin-right: 6px;
+        margin-left: 8px;
+      }
+
+      &-name {
+        box-sizing: border-box;
+        max-width: 70%;
+        margin: initial;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &-remove {
+        width: 10px;
+        min-width: 10px;
+        margin-right: 10px;
+        margin-left: auto;
+        color: #6b758a;
+        cursor: pointer;
+      }
+    }
+
+    &-item:hover {
+      background-color: #ecf5ff;
+    }
+  }
+
   .contact {
     width: 50%;
-    border-right: 1px solid #e5e5e5;
     padding-right: 1rem;
+    border-right: 1px solid #e5e5e5;
 
     .contact-search {
       &-input.focus {
@@ -167,12 +336,12 @@ watch(isDialogVisible, (val) => {
       height: 80%;
 
       .no-result {
-        font-size: 12px;
-        text-align: center;
-        height: 100%;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+        height: 100%;
+        font-size: 12px;
+        text-align: center;
       }
     }
   }
@@ -187,79 +356,72 @@ watch(isDialogVisible, (val) => {
       font-weight: 600;
     }
 
-    .chosen-list {}
-
     .chosen-footer {
       display: flex;
-      justify-content: center;
       gap: 10px;
+      justify-content: center;
 
       .chosen-footer-button {
         width: 76px;
         height: 26px;
       }
     }
-
   }
+}
 
-  .contact-list,
-  .chosen-list {
-    margin: 10px 0;
-    height: 80%;
-    max-height: calc(100% - 68px);
-    overflow: auto;
-    box-sizing: border-box;
+.contact-list-item.contact-list-item-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 
-    &-item {
-      display: flex;
-      align-items: center;
-      height: 34px;
-      line-height: 34px;
-      cursor: pointer;
+.chosen-list-item.chosen-list-item-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 
-      &-checkbox {
-        display: flex;
-        width: 100%;
-        height: 100%;
+.contacts-container.h5 {
+  flex-direction: column;
+  height: 100%;
+  max-height: none;
 
-        &-container {
-          display: flex;
-          align-items: center;
-        }
-      }
+  .contact {
+    width: 100%;
+    height: 100%;
+    padding-right: 0;
+    overflow: auto;
+    border-right: none;
 
+    .contact-list {
+      height: 100%;
 
-      &-avatar {
-        min-width: 20px;
-        min-height: 20px;
-        width: 20px;
-        height: 20px;
-        margin-right: 6px;
-        margin-left: 8px;
+      &-item {
+        height: 46px;
+        line-height: 46px;
+        border-bottom: 1px solid rgba(221, 226, 235, 0.3);
       }
+    }
+  }
+}
 
-      &-name {
-        box-sizing: border-box;
-        margin: initial;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        max-width: 70%;
-      }
+.contact-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 20px;
+  text-align: right;
 
-      &-remove {
-        cursor: pointer;
-        margin-left: auto;
-        color: #6B758A;
-        min-width: 10px;
-        width: 10px;
-        margin-right: 10px;
-      }
-    }
+  .chosen-member {
+    font-size: 14px;
+    font-weight: 400;
+    color: #22262e;
+  }
 
-    &-item:hover {
-      background-color: #ecf5ff;
-    }
+  .form-attendees:hover {
+    overflow: auto;
+  }
+
+  button {
+    padding: 6px 30px;
   }
 }
 </style>

package/src/TUIRoom/components/ScheduleConference/DurationTimePicker.vue

@@ -1,21 +1,29 @@
 <template>
   <div class="container">
     <TuiSelect
-      v-model="selectedTime" theme="white" class="timepicker-select" :teleported="false"
+      v-model="selectedTime"
+      theme="white"
+      :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
+      :value="selectedTime"
+      @input="selectedTime = $event"
     >
       <TuiOption
-        v-for="time in timeOptions" :key="time.value" theme="white" :value="time.value" :label="time.label"
+        v-for="time in timeOptions"
+        :key="time.value"
+        theme="white"
+        :value="time.value"
+        :label="time.label"
         :custom-option-content-style="{ 'font-weight': 400 }"
-      ></TuiOption>
+      />
     </TuiSelect>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, defineProps, defineEmits, watch } from 'vue';
-import TuiSelect from '../common/base/Select.vue';
-import TuiOption from '../common/base/Option.vue';
+import TuiSelect from '../common/base/Select/index.vue';
+import TuiOption from '../common/base/Option/index.vue';
 import { useI18n } from '../../locales';
 
 const { t } = useI18n();
@@ -43,12 +51,20 @@ const updateTime = () => {
   emit('input', selectedTime.value);
 };
 
-watch(selectedTime, () => {
-  updateTime();
-}, {
-  immediate: true,
-});
-watch(() => props.modelValue, (newValue) => {
-  selectedTime.value = newValue;
-}, { immediate: true });
+watch(
+  selectedTime,
+  () => {
+    updateTime();
+  },
+  {
+    immediate: true,
+  }
+);
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedTime.value = newValue;
+  },
+  { immediate: true }
+);
 </script>

package/src/TUIRoom/components/ScheduleConference/InvitePanel.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="['invite-member', isMobile ? 'h5' : '']">
+    <template v-for="(item, index) in scheduleInviteList">
+      <div class="invite-member-container" v-if="item.isVisible" :key="index">
+        <span class="invite-member-title">{{ t(item.title) }}</span>
+        <span class="invite-member-content" :title="item.content">
+          {{ item.content }}
+        </span>
+        <svg-icon
+          class="copy"
+          :icon="copyIcon"
+          v-if="item.isShowCopyIcon"
+          @click="onCopy(item.content)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
+import useRoomInfo from '../../components/RoomHeader/RoomInfo/useRoomInfoHooks';
+import copyIcon from '../common/icons/CopyIcon.vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import { isMobile, isWeChat } from '../../utils/environment';
+import { useI18n } from '../../locales';
+import { getUrlWithRoomId } from '../../utils/utils';
+const { t } = useI18n();
+
+const props = defineProps<{
+  scheduleInviteList?: {
+    title: string;
+    content: string;
+    isShowCopyIcon: boolean;
+    isVisible: boolean;
+  }[];
+  shareLinkData?: {
+    roomId: string;
+    [key: string]: unknown;
+  };
+}>();
+const { onCopy } = useRoomInfo();
+
+const scheduleInviteList = computed(() => {
+  const roomId = props?.shareLinkData?.roomId;
+  if (!roomId) return props.scheduleInviteList;
+  return [
+    {
+      title: `${t('Room ID')}`,
+      content: roomId,
+      isShowCopyIcon: true,
+      isVisible: true,
+    },
+    {
+      title: `${t('Room Link')}`,
+      content: getUrlWithRoomId(roomId),
+      isShowCopyIcon: true,
+      isVisible: !isWeChat,
+    },
+  ];
+});
+</script>
+<style scoped lang="scss">
+.invite-member {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 10px;
+
+  .invite-member-container {
+    display: flex;
+    align-items: stretch;
+    min-width: 400px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #4f586b;
+
+    .invite-member-title {
+      min-width: 80px;
+      margin-right: 10px;
+    }
+
+    .invite-member-content {
+      max-width: 360px;
+      overflow: hidden;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .copy {
+      width: 20px;
+      height: 20px;
+      margin-left: 8px;
+      color: var(--active-color-1);
+      cursor: pointer;
+    }
+  }
+}
+
+.invite-member.h5 {
+  .invite-member-title {
+    font-size: 14px;
+    font-weight: 400;
+    color: #8f9ab2;
+  }
+
+  .invite-member-container {
+    min-width: auto;
+  }
+}
+</style>