@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.7 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const index$1 = require("../common/base/Input/index.js");
const index$2 = require("../common/base/Checkbox/index.js");
const Avatar = require("../common/Avatar.vue2.js");
const PanelContainer = require("./PanelContainer.vue.js");
const index = require("../../locales/index.js");
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__ */ Vue.defineComponent({
__name: "Contacts",
props: {
visible: { type: Boolean },
contacts: {},
selectedList: {},
isMobile: { type: Boolean, default: false },
disabledList: {}
},
emits: ["input", "confirm"],
setup(__props, { emit: __emit }) {
const { t } = index.useI18n();
const props = __props;
const emit = __emit;
const isDialogVisible = Vue.ref(false);
const searchValue = Vue.ref("");
const updateContacts = () => {
contacts.value = props.contacts.map((user) => {
var _a, _b;
const index2 = (_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: index2 !== void 0 && index2 !== -1,
disabled: disableUserIndex !== void 0 && disableUserIndex !== -1,
userInfo: user
};
});
};
const updateVisible = (val) => {
updateContacts();
emit("input", val);
};
const contacts = Vue.ref(
props.contacts.map((user) => {
var _a, _b;
const index2 = (_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: !!index2 && index2 !== -1,
disabled: !!disableUserIndex && disableUserIndex !== -1,
userInfo: user
};
})
);
const selectedContacts = Vue.computed(
() => contacts.value.filter((user) => user.selected)
);
const searchResult = Vue.ref([]);
const showList = Vue.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 index2 = contacts.value.findIndex(
(item) => user.userInfo.userID === item.userInfo.userID
);
contacts.value[index2].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);
};
Vue.watch(
() => props.visible,
(val) => {
isDialogVisible.value = val;
},
{
immediate: true
}
);
Vue.watch(
isDialogVisible,
(val) => {
searchValue.value = "";
updateVisible(val);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createBlock(PanelContainer.default, {
visible: isDialogVisible.value,
title: Vue.unref(t)("Contacts"),
onInput: _cache[5] || (_cache[5] = ($event) => isDialogVisible.value = $event)
}, Vue.createSlots({
default: Vue.withCtx(() => [
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["contacts-container", props.isMobile && "h5"]),
onClick: _cache[4] || (_cache[4] = Vue.withModifiers(() => {
}, ["stop"]))
}, [
Vue.createElementVNode("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createVNode(Vue.unref(index$1.default), {
modelValue: searchValue.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
class: "contact-search-input",
placeholder: Vue.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: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconSearch), {
class: "search-icon",
onMousedown: _cache[0] || (_cache[0] = Vue.withModifiers(() => {
}, ["prevent"]))
})
]),
_: 1
}, 8, ["modelValue", "placeholder"])
]),
Vue.createElementVNode("div", _hoisted_3, [
showList.value.length === 0 && searchValue.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, Vue.toDisplayString(Vue.unref(t)("No relevant members found")), 1)) : (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, { key: 1 }, Vue.renderList(showList.value, (item) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: item.userInfo.userID,
class: Vue.normalizeClass([
"contact-list-item",
item.disabled && "contact-list-item-disabled"
])
}, [
Vue.createVNode(Vue.unref(index$2.default), {
"model-value": item.selected,
disabled: item.disabled,
class: "contact-list-item-checkbox",
onInput: ($event) => item.selected = $event
}, {
default: Vue.withCtx(() => [
Vue.createElementVNode("span", _hoisted_5, [
Vue.createVNode(Avatar.default, {
class: "contact-list-item-avatar",
"img-src": item.userInfo.profile.avatar
}, null, 8, ["img-src"]),
Vue.createElementVNode("p", {
class: "contact-list-item-name",
title: item.userInfo.profile.nick
}, Vue.toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_6)
])
]),
_: 2
}, 1032, ["model-value", "disabled", "onInput"])
], 2);
}), 128))
])
]),
!props.isMobile ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_7, [
Vue.createElementVNode("div", _hoisted_8, Vue.toDisplayString(Vue.unref(t)(`Selected Contact`) + `(${selectedContacts.value.length})`), 1),
Vue.createElementVNode("div", _hoisted_9, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(selectedContacts.value, (item) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: item.userInfo.userID,
class: "chosen-list-item"
}, [
Vue.createVNode(Avatar.default, {
class: "chosen-list-item-avatar",
"img-src": item.userInfo.profile.avatar
}, null, 8, ["img-src"]),
Vue.createElementVNode("p", {
class: "chosen-list-item-name",
title: item.userInfo.profile.nick
}, Vue.toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_10),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconClose), {
class: "chosen-list-item-remove",
onClick: ($event) => removeSelectUser(item)
}, null, 8, ["onClick"])
]);
}), 128))
]),
Vue.createElementVNode("div", _hoisted_11, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: cancel,
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
}),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: confirm,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Confirm")), 1)
]),
_: 1
})
])
])) : Vue.createCommentVNode("", true)
], 2)
]),
_: 2
}, [
props.isMobile ? {
name: "footer",
fn: Vue.withCtx(() => [
Vue.createElementVNode("div", _hoisted_12, [
Vue.createElementVNode("div", _hoisted_13, [
selectedContacts.value.length ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_14, Vue.toDisplayString(Vue.unref(t)("x people selected", { number: selectedContacts.value.length })), 1)) : Vue.createCommentVNode("", true)
]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
disabled: !selectedContacts.value.length,
onClick: confirm,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Confirm") + `(${selectedContacts.value.length})`), 1)
]),
_: 1
}, 8, ["disabled"])
])
]),
key: "0"
} : void 0
]), 1032, ["visible", "title"]);
};
}
});
exports.default = _sfc_main;