@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/common/SelectUser/components/Transfer/TTransfer.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="transfer" :class="[props.isH5 ? 'transfer-h5' : '']">
+    <header
+      class="transfer-header transfer-h5-header"
+      v-if="props.isH5"
+      @click="cancel"
+    >
+      <TIcon
+        class="icon"
+        :file="backIcon"
+        :width="'18px'"
+        :height="'18px'"
+      ></TIcon>
+      <span class="title">{{ transferTitle }}</span>
+      <span class="space"></span>
+    </header>
+    <main class="main">
+      <div class="left">
+        <header class="transfer-header">
+          <!-- PC 端触发 @keyup.enter -->
+          <input
+            v-if="!props.isH5 && isTransferSearch"
+            type="text"
+            :value="searchValue"
+            @keyup.enter="handleInput"
+            :placeholder="t('Please enter userID')"
+            enterkeyhint="search"
+            :class="[props.isH5 ? 'left-uniapp-input' : '']"
+          />
+          <!-- 非 PC 端触发 blur -->
+          <input
+            v-if="props.isH5 && isTransferSearch"
+            type="text"
+            @blur="handleInput"
+            @confirm="handleInput"
+            :placeholder="t('Please enter userID')"
+            enterkeyhint="search"
+            :value="searchValue"
+            :class="[props.isH5 ? 'left-uniapp-input' : '']"
+          />
+        </header>
+        <main class="transfer-left-main">
+          <ul class="transfer-list">
+            <li
+              class="transfer-list-item"
+              @click="selectedAll"
+              v-if="optional.length > 1 && !isRadio"
+            >
+              <TIcon
+                v-if="transferSelectedList.length === optional.length"
+                :file="selectedIcon"
+                :width="'18px'"
+                :height="'18px'"
+              ></TIcon>
+              <i v-else class="icon-unselected"></i>
+              <span class="select-all">{{ t('Select all') }}</span>
+            </li>
+            <li
+              class="transfer-list-item"
+              v-for="item in transferList"
+              :key="item.userID"
+              @click="selected(item)"
+            >
+              <TIcon
+                v-if="transferSelectedList.indexOf(item) > -1"
+                :file="selectedIcon"
+                :class="[item.isDisabled && 'disabled']"
+                :width="'18px'"
+                :height="'18px'"
+              ></TIcon>
+              <i
+                v-else
+                :class="[item.isDisabled && 'disabled', 'icon-unselected']"
+              ></i>
+              <template v-if="!isTransferCustomItem">
+                <img
+                  class="avatar"
+                  :src="
+                    item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                />
+                <span class="name">{{ item.nick || item.userID }}</span>
+                <span v-if="item.isDisabled"></span>
+              </template>
+              <template v-else>
+                <slot name="left" :data="item" />
+              </template>
+            </li>
+            <li
+              class="transfer-list-item more"
+              @click="getMore"
+              v-if="transferTotal > transferList.length"
+            >
+              {{ t('View more') }}
+            </li>
+          </ul>
+        </main>
+      </div>
+      <div class="right">
+        <header class="transfer-header" v-if="!props.isH5">
+          {{ transferTitle }}
+        </header>
+        <ul class="transfer-list" v-if="resultShow">
+          <p
+            class="transfer-text"
+            v-if="transferSelectedList.length > 0 && !props.isH5"
+          >
+            {{ transferSelectedList.length }} {{ t('people selected') }}
+          </p>
+          <li
+            class="transfer-list-item space-between"
+            v-for="(item, index) in transferSelectedList"
+            :key="index"
+          >
+            <aside class="transfer-list-item-content">
+              <template v-if="!isTransferCustomItem">
+                <img
+                  class="avatar"
+                  :src="
+                    item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                />
+                <span v-if="!props.isH5" class="name">{{
+                  item.nick || item.userID
+                }}</span>
+              </template>
+              <template v-else>
+                <slot name="right" :data="item" />
+              </template>
+            </aside>
+            <span @click="selected(item)" v-if="!props.isH5">
+              <TIcon
+                :file="cancelIcon"
+                :width="'18px'"
+                :height="'18px'"
+              ></TIcon>
+            </span>
+          </li>
+        </ul>
+        <footer class="transfer-right-footer">
+          <button class="btn btn-cancel" @click="cancel">{{ t('Cancel') }}</button>
+          <button
+            v-if="transferSelectedList.length > 0"
+            class="btn"
+            @click="submit"
+          >
+            {{ t('Done') }}
+          </button>
+          <button v-else class="btn btn-no" @click="submit">{{ t('Done') }}</button>
+        </footer>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect, computed, defineProps, defineEmits } from "../../../../../../adapter-vue";
+import { useTranslate } from '../../../../../hooks';
+import TIcon from "../Icon/TIcon.vue";
+import selectedIcon from "./icon/selected.svg";
+import backIcon from "./icon/back.svg";
+import cancelIcon from "./icon/cancel.svg";
+
+interface ITransferListItem {
+  isDisabled?: boolean;
+  avatar?: string;
+  nick?: string;
+  userID?: string;
+  [propName: string]: any;
+}
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  selectedList: {
+    type: Array,
+    default: () => [],
+  },
+  isSearch: {
+    type: Boolean,
+    default: true,
+  },
+  isRadio: {
+    type: Boolean,
+    default: false,
+  },
+  isCustomItem: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "",
+  },
+  resultShow: {
+    type: Boolean,
+    default: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  isH5: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["search", "submit", "cancel", "getMore"]);
+
+const type = ref("");
+const transferList = ref<Array<ITransferListItem>>([]);
+const transferTotal = ref<number>(0);
+const transferSelectedList = ref<Array<ITransferListItem> | any[]>([]);
+const isTransferSearch = ref(true);
+const isTransferCustomItem = ref(false);
+const transferTitle = ref("");
+const searchValue = ref("");
+const t = useTranslate();
+
+watchEffect(() => {
+  const { list, isCustomItem, isSearch, title, total, selectedList } = props;
+  if (isCustomItem) {
+    for (let index = 0; index < list.length; index++) {
+      if ((list[index] as any).conversationID.indexOf("@TIM#SYSTEM") > -1) {
+        list.splice(index, 1);
+      }
+      transferList.value = list as Array<ITransferListItem>;
+    }
+  } else {
+    transferList.value = list as Array<ITransferListItem>;
+  }
+  transferTotal.value = total ? total : list.length;
+  transferSelectedList.value =
+    selectedList && selectedList.length > 0
+      ? selectedList
+      : transferSelectedList.value;
+  isTransferSearch.value = isSearch;
+  isTransferCustomItem.value = isCustomItem;
+  transferTitle.value = title;
+  type.value = props.type;
+});
+
+// 可选项
+const optional = computed(() =>
+  transferList.value.filter((item: any) => !item.isDisabled)
+);
+
+const handleInput = (e: any) => {
+  searchValue.value = e.target.value;
+  emit("search", e.target.value);
+};
+const selected = (item: any) => {
+  if (item.isDisabled) {
+    return;
+  }
+  let list: Array<ITransferListItem> = transferSelectedList.value;
+  const index: number = list.indexOf(item);
+  if (index > -1) {
+    return transferSelectedList.value.splice(index, 1);
+  }
+  if (props.isRadio) {
+    list = [];
+  }
+  list.push(item);
+  transferSelectedList.value = list;
+};
+
+const selectedAll = () => {
+  if (transferSelectedList.value.length === optional.value.length) {
+    transferSelectedList.value = [];
+  } else {
+    transferSelectedList.value = [...optional.value];
+  }
+};
+
+const submit = () => {
+  emit("submit", transferSelectedList.value);
+  searchValue.value = "";
+  transferSelectedList.value = [];
+};
+
+const cancel = () => {
+  emit("cancel");
+  searchValue.value = "";
+  transferSelectedList.value = [];
+};
+
+const getMore = () => {
+  emit("getMore");
+};
+</script>
+
+<style scoped src="./style/transfer.css"></style>

package/src/Components/components/common/SelectUser/components/Transfer/icon/back.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <title>ic_back_white</title>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="02.-查看信息-示例好友" transform="translate(-32.000000, -200.000000)">
+      <g id="编组-6" transform="translate(0.000000, 176.000000)">
+        <g id="ic_back_white" transform="translate(32.000000, 24.000000)">
+          <g id="ic_back_black" fill="#444444" fill-rule="nonzero">
+            <path d="M9.51231071,24 L23.5198286,38.7290411 C23.785378,39.0082689 23.7753168,39.4496082 23.4973187,39.7164448 L21.6255915,41.5130226 C21.3466827,41.7807332 20.9035602,41.7716553 20.6358496,41.4927466 C20.6351032,41.491969 20.6343586,41.4911896 20.6336157,41.4904085 L4.45876399,24.4823948 C4.2017544,24.2121467 4.2017544,23.7878533 4.45876399,23.5176052 L20.6336157,6.50959152 C20.900035,6.22944906 21.3431109,6.21832422 21.6232533,6.48474351 C21.6240344,6.48548634 21.6248138,6.48623097 21.6255915,6.48697741 L23.4973187,8.28355524 C23.7753168,8.55039175 23.785378,8.99173114 23.5198286,9.27095893 L9.51231071,24 L9.51231071,24 Z" id="Path-2"></path>
+          </g>
+          <rect id="矩形" x="0" y="0" width="48" height="48"></rect>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/Components/components/common/SelectUser/components/Transfer/icon/cancel.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <title>清除</title>
+  <g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="创建群聊" transform="translate(-1243.000000, -413.000000)">
+      <g id="Group-1364" transform="translate(650.000000, 343.000000)">
+        <g id="Group-1363" transform="translate(290.000000, 46.000000)">
+          <g id="Group-1358" transform="translate(0.000000, 24.000000)">
+            <g id="清除" transform="translate(303.000000, 0.000000)">
+              <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="矩形"></path>
+              <path d="M1,8 C1,11.8659999 4.13400006,15 8,15 C11.8659999,15 15,11.8659999 15,8 C15,4.13400006 11.8659999,1 8,1 L8,1 C4.13400006,1 1,4.13400006 1,8 Z" fill="#999999"></path>
+              <g id="编组" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" fill="#FFFFFF">
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " x="1.8189894e-12" y="3.5" width="8" height="1" rx="0.5"></rect>
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-360.000000) translate(-4.000000, -4.000000) " x="0" y="3.5" width="8" height="1" rx="0.5"></rect>
+              </g>
+              <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/Components/components/common/SelectUser/components/Transfer/icon/selected.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <title>编组 14</title>
+  <defs>
+    <filter x="-10.6%" y="-5.4%" width="121.2%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
+      <feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+  <g id="new" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="自定义消息" transform="translate(-458.000000, -318.000000)">
+      <g id="编组-32" filter="url(#filter-1)" transform="translate(44.000000, 60.000000)">
+        <g id="编组-24" transform="translate(30.000000, 250.000000)">
+          <g id="编组-14" transform="translate(384.000000, 8.000000)">
+            <circle id="椭圆形" fill="#006EFF" fill-rule="nonzero" cx="8" cy="8" r="8"></circle>
+            <polyline id="路径-4" stroke="#FFFFFF" stroke-width="2" transform="translate(8.042641, 6.242641) rotate(-315.000000) translate(-8.042641, -6.242641) " points="6.04264069 10.2426407 10.0426407 10.2426407 10.0426407 2.24264069"></polyline>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/Components/components/common/SelectUser/components/Transfer/style/color.css

@@ -0,0 +1,64 @@
+.main {
+  background: #FFFFFF;
+  border: 1px solid #E0E0E0;
+  box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.06); 
+}
+
+.main .left {
+  border-right: 1px solid #E8E8E9; 
+}
+
+.main .transfer-header {
+  font-weight: 500;
+  color: #000000;
+  letter-spacing: 0;
+}
+
+.main .transfer-header input {
+  background: #FFFFFF;
+  border: 1px solid #DEE0E3;
+  font-weight: 500;
+  color: #8F959E;
+  letter-spacing: 0; 
+}
+
+.main .transfer-list .transfer-text {
+  font-weight: 500;
+  color: #8F959E;
+  letter-spacing: 0; 
+}
+
+.main .transfer-list-item .disabled {
+  background: #eeeeee; 
+}
+
+.btn {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  font-weight: 400;
+  color: #FFFFFF; 
+}
+
+.btn-cancel {
+  background: #FFFFFF;
+  border: 1px solid #DDDDDD;
+  color: #828282; 
+}
+
+.btn-no {
+  background: #e8e8e9;
+  border: 1px solid #DDDDDD;
+  font-weight: 400;
+  color: #FFFFFF; 
+}
+
+.transfer-h5-header {
+  background: #FFFFFF; 
+}
+
+.transfer-h5-header .title {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  color: #000000;
+  letter-spacing: 0; 
+}

package/src/Components/components/common/SelectUser/components/Transfer/style/h5.css

@@ -0,0 +1,86 @@
+.transfer-h5 {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column; 
+}
+
+.transfer-h5-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  padding: 16px 18px; 
+}
+
+.transfer-h5-header .space, .transfer-h5-header .icon {
+  width: 18px;
+  height: 18px; 
+}
+
+.transfer-h5 .main {
+  flex-direction: column;
+  width: auto;
+  height: 550px;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  max-height: calc(100% - 50px);
+  padding: 0; 
+}
+
+.transfer-h5 .main .avatar {
+  border-radius: 5px; 
+}
+
+.transfer-h5 .main .left {
+  padding: 0;
+  flex: 1;
+  border: none;
+  display: flex;
+  flex-direction: column; 
+}
+
+.transfer-h5 .main .left .transfer-header {
+  position: sticky;
+  top: 0;
+  padding: 0 18px; 
+}
+
+.transfer-h5 .main .left .transfer-header input {
+  border-radius: 5px;
+  font-size: 14px; 
+}
+
+.transfer-h5 .main .left-uniapp-input {
+  height: 36px; 
+}
+
+.transfer-h5 .main .right {
+flex: 0;
+padding: 0;
+flex-direction: row;
+align-items: center;
+box-shadow: inset 0 1px 0 0 #EEEEEE;
+padding: 8px 18px; 
+}
+
+.transfer-h5 .main .right .transfer-list {
+  flex-direction: row;
+  width: 0; 
+}
+
+.transfer-h5 .main .right .transfer-list-item-content {
+  flex: none; 
+}
+
+.transfer-h5 .main .right .transfer-right-footer {
+  padding: 6px 0;
+  display: flex;
+  align-items: center; 
+}
+
+.transfer-h5 .main .right .transfer-right-footer .btn {
+  font-size: 14px; 
+}

package/src/Components/components/common/SelectUser/components/Transfer/style/transfer.css

@@ -0,0 +1,17 @@
+@import "./color.css";
+@import "./web.css";
+@import "./h5.css";
+
+ul,ol,li {
+  margin:0;
+  padding:0;
+}
+
+.icon-unselected {
+  width: 18px;
+  height: 18px;
+  background: #FFFFFF;
+  border: 1px solid #DDDDDD;
+  border-radius: 11px;
+  box-sizing: border-box;
+}

package/src/Components/components/common/SelectUser/components/Transfer/style/web.css

@@ -0,0 +1,146 @@
+.main {
+  box-sizing: border-box;
+  width: 541px;
+  height: 390px;
+  display: flex;
+  border-radius: 8px;
+  padding: 20px 0; 
+}
+
+.main .right {
+  padding: 0 20px;
+  flex: 1; 
+}
+
+.main .right .transfer-list {
+  padding-right: 20px; 
+}
+
+.main .left {
+  flex: 1;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column; 
+}
+
+.main .left .transfer-header {
+  padding: 0 20px; 
+}
+
+.main .left .transfer-left-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 13px; 
+}
+
+.main .right {
+  display: flex;
+  flex-direction: column;
+  text-align: left; 
+}
+
+.main .right .transfer-right-footer {
+  align-self: flex-end; 
+}
+
+.main .right .transfer-right-footer .btn-cancel {
+  margin-right: 12px; 
+}
+
+.main .right .transfer-list {
+  overflow-y: auto; 
+}
+
+.main .transfer-header {
+  font-size: 14px;
+  line-height: 14px;
+  padding-bottom: 20px; 
+}
+
+.main .transfer-header input {
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 30px;
+  font-size: 10px;
+  line-height: 14px;
+  padding: 9px 12px; 
+}
+
+.main .transfer-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column; 
+}
+
+.main .transfer-list .transfer-text {
+  font-size: 10px;
+  line-height: 14px; 
+}
+
+.main .transfer-list-item {
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  text-align: left; 
+}
+
+.main .transfer-list-item-content {
+  flex: 1;
+  display: flex;
+  align-items: center; 
+}
+
+.main .transfer-list-item .avatar {
+  margin: 0 5px 0 8px;
+  border-radius: 50%; 
+}
+
+.main .transfer-list-item .name {
+  width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1; 
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 5px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+}
+
+.btn {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px; 
+}
+
+.btn-no {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px; 
+}
+
+.space-between {
+  justify-content: space-between; 
+}
+
+.select-all {
+  padding-left: 8px;
+  font-size: 14px; 
+}
+
+.more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px; 
+}

package/src/Components/components/common/SelectUser/index.ts

@@ -0,0 +1,12 @@
+// @ts-ignore
+import TDialog from "./components/Dialog/TDialog.vue";
+// @ts-ignore
+import TTransfer from "./components/Transfer/TTransfer.vue";
+// @ts-ignore
+import TIcon from "./components/Icon/TIcon.vue";
+// @ts-ignore
+import SelectUser from "./SelectUser.vue";
+
+export { TDialog, TTransfer, TIcon };
+
+export default SelectUser;