@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
281 lines (280 loc) • 11.3 kB
JavaScript
import { defineComponent, ref, computed, watch, createBlock, openBlock, unref, createSlots, withCtx, createElementVNode, withModifiers, normalizeClass, createElementBlock, createCommentVNode, createVNode, toDisplayString, Fragment, renderList, createTextVNode } from "vue";
import { IconSearch, IconClose, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
import Input from "../common/base/Input/index.mjs";
import Checkbox from "../common/base/Checkbox/index.mjs";
import TuiAvatar from "../common/Avatar.vue2.mjs";
import PanelContainer from "./PanelContainer.vue.mjs";
import { useI18n } from "../../locales/index.mjs";
const _hoisted_1 = { class: "contact" };
const _hoisted_2 = { class: "contact-search" };
const _hoisted_3 = { class: "contact-list" };
const _hoisted_4 = {
key: 0,
class: "no-result"
};
const _hoisted_5 = { class: "contact-list-item-checkbox-container" };
const _hoisted_6 = ["title"];
const _hoisted_7 = {
key: 0,
class: "chosen"
};
const _hoisted_8 = { class: "chosen-title" };
const _hoisted_9 = { class: "chosen-list" };
const _hoisted_10 = ["title"];
const _hoisted_11 = { class: "chosen-footer" };
const _hoisted_12 = { class: "contact-footer" };
const _hoisted_13 = { class: "chosen-member" };
const _hoisted_14 = { key: 0 };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Contacts",
props: {
visible: { type: Boolean },
contacts: {},
selectedList: {},
isMobile: { type: Boolean, default: false },
disabledList: {}
},
emits: ["input", "confirm"],
setup(__props, { emit: __emit }) {
const { t } = useI18n();
const props = __props;
const emit = __emit;
const isDialogVisible = ref(false);
const searchValue = ref("");
const updateContacts = () => {
contacts.value = props.contacts.map((user) => {
var _a, _b;
const index = (_a = props.selectedList) == null ? void 0 : _a.findIndex(
(selectedUser) => selectedUser.userId === user.userID
);
const disableUserIndex = (_b = props.disabledList) == null ? void 0 : _b.findIndex(
(disableUser) => disableUser.userId === user.userID
);
return {
selected: index !== void 0 && index !== -1,
disabled: disableUserIndex !== void 0 && disableUserIndex !== -1,
userInfo: user
};
});
};
const updateVisible = (val) => {
updateContacts();
emit("input", val);
};
const contacts = ref(
props.contacts.map((user) => {
var _a, _b;
const index = (_a = props.selectedList) == null ? void 0 : _a.findIndex(
(selectedUser) => selectedUser.userId === user.userID
);
const disableUserIndex = (_b = props.disabledList) == null ? void 0 : _b.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([]);
const showList = computed(
() => searchValue.value ? searchResult.value : contacts.value
);
const searchContact = (v) => {
if (!v) return [];
searchResult.value = contacts.value.filter(
(item) => item.userInfo.profile.nick.includes(v) || item.userInfo.userID.includes(v)
);
};
const removeSelectUser = (user) => {
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
};
})
);
updateVisible(false);
};
const cancel = () => {
updateVisible(false);
};
watch(
() => props.visible,
(val) => {
isDialogVisible.value = val;
},
{
immediate: true
}
);
watch(
isDialogVisible,
(val) => {
searchValue.value = "";
updateVisible(val);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createBlock(PanelContainer, {
visible: isDialogVisible.value,
title: unref(t)("Contacts"),
onInput: _cache[5] || (_cache[5] = ($event) => isDialogVisible.value = $event)
}, createSlots({
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["contacts-container", props.isMobile && "h5"]),
onClick: _cache[4] || (_cache[4] = withModifiers(() => {
}, ["stop"]))
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(unref(Input), {
modelValue: searchValue.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
class: "contact-search-input",
placeholder: unref(t)("Please enter the member name"),
search: searchContact,
onFocus: _cache[2] || (_cache[2] = (element) => {
element.classList.add("focus");
}),
onBlur: _cache[3] || (_cache[3] = (element) => {
element.classList.remove("focus");
})
}, {
suffixIcon: withCtx(() => [
createVNode(unref(IconSearch), {
class: "search-icon",
onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["prevent"]))
})
]),
_: 1
}, 8, ["modelValue", "placeholder"])
]),
createElementVNode("div", _hoisted_3, [
showList.value.length === 0 && searchValue.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(t)("No relevant members found")), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(showList.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item.userInfo.userID,
class: normalizeClass([
"contact-list-item",
item.disabled && "contact-list-item-disabled"
])
}, [
createVNode(unref(Checkbox), {
"model-value": item.selected,
disabled: item.disabled,
class: "contact-list-item-checkbox",
onInput: ($event) => item.selected = $event
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_5, [
createVNode(TuiAvatar, {
class: "contact-list-item-avatar",
"img-src": item.userInfo.profile.avatar
}, null, 8, ["img-src"]),
createElementVNode("p", {
class: "contact-list-item-name",
title: item.userInfo.profile.nick
}, toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_6)
])
]),
_: 2
}, 1032, ["model-value", "disabled", "onInput"])
], 2);
}), 128))
])
]),
!props.isMobile ? (openBlock(), createElementBlock("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, toDisplayString(unref(t)(`Selected Contact`) + `(${selectedContacts.value.length})`), 1),
createElementVNode("div", _hoisted_9, [
(openBlock(true), createElementBlock(Fragment, null, renderList(selectedContacts.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item.userInfo.userID,
class: "chosen-list-item"
}, [
createVNode(TuiAvatar, {
class: "chosen-list-item-avatar",
"img-src": item.userInfo.profile.avatar
}, null, 8, ["img-src"]),
createElementVNode("p", {
class: "chosen-list-item-name",
title: item.userInfo.profile.nick
}, toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_10),
createVNode(unref(IconClose), {
class: "chosen-list-item-remove",
onClick: ($event) => removeSelectUser(item)
}, null, 8, ["onClick"])
]);
}), 128))
]),
createElementVNode("div", _hoisted_11, [
createVNode(unref(TUIButton), {
onClick: cancel,
style: { "min-width": "88px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
]),
_: 1
}),
createVNode(unref(TUIButton), {
onClick: confirm,
type: "primary",
style: { "min-width": "88px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Confirm")), 1)
]),
_: 1
})
])
])) : createCommentVNode("", true)
], 2)
]),
_: 2
}, [
props.isMobile ? {
name: "footer",
fn: withCtx(() => [
createElementVNode("div", _hoisted_12, [
createElementVNode("div", _hoisted_13, [
selectedContacts.value.length ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(t)("x people selected", { number: selectedContacts.value.length })), 1)) : createCommentVNode("", true)
]),
createVNode(unref(TUIButton), {
disabled: !selectedContacts.value.length,
onClick: confirm,
type: "primary",
style: { "min-width": "88px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Confirm") + `(${selectedContacts.value.length})`), 1)
]),
_: 1
}, 8, ["disabled"])
])
]),
key: "0"
} : void 0
]), 1032, ["visible", "title"]);
};
}
});
export {
_sfc_main as default
};