@tencentcloud/roomkit-electron-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,
151 lines (150 loc) • 5.68 kB
JavaScript
import { defineComponent, ref, computed, watch, provide, reactive, withDirectives, createElementBlock, openBlock, createElementVNode, createVNode, normalizeClass, renderSlot, normalizeStyle, toDisplayString, Transition, withCtx, vShow, unref } from "vue";
import SvgIcon from "../SvgIcon.vue.mjs";
import ArrowStrokeSelectDownIcon from "../../icons/ArrowStrokeSelectDownIcon.vue.mjs";
import useZIndex from "../../../../hooks/useZIndex.mjs";
import vClickOutside from "../../../../directives/vClickOutside.mjs";
import "../../../../services/main.mjs";
import { roomService } from "../../../../services/roomService.mjs";
import "../../../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-electron";
import "../../../../utils/environment.mjs";
import "mitt";
import "../../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
modelValue: { type: [String, Number, Boolean, Object] },
disabled: { type: Boolean },
theme: {},
customSelectContentStyle: {}
},
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const { nextZIndex } = useZIndex();
const props = __props;
const emits = __emit;
const showSelectDropdown = ref(false);
const optionObj = ref(/* @__PURE__ */ new Map());
const optionDataList = computed(() => Array.from(optionObj.value.values()));
const selectedLabel = ref("");
const selectContainerRef = ref();
const selectDropDownRef = ref();
const dropDirection = ref("down");
watch(
() => props.modelValue,
(val) => {
if (optionObj.value.get(val)) {
selectedLabel.value = optionObj.value.get(props.modelValue).label;
}
},
{ immediate: true }
);
watch(optionDataList, () => {
if (optionObj.value.get(props.modelValue)) {
selectedLabel.value = optionObj.value.get(props.modelValue).label;
}
});
const dropDownStyle = ref({});
function onOptionCreated(option) {
optionObj.value.set(option.value, option);
}
function onOptionDestroyed(value) {
optionObj.value.delete(value);
}
function onOptionSelected(option) {
showSelectDropdown.value = false;
emits("update:modelValue", option.value);
emits("change", option.value);
}
const selectedValue = computed(() => props.modelValue);
provide(
"select",
reactive({
selectedValue,
optionObj,
optionDataList,
onOptionCreated,
onOptionDestroyed,
onOptionSelected
})
);
function handleClickSelect() {
if (props.disabled) {
return;
}
if (showSelectDropdown.value) {
showSelectDropdown.value = false;
} else {
handleDropDownPosition();
dropDownStyle.value = { zIndex: nextZIndex() };
showSelectDropdown.value = true;
optionObj.value.get(props.modelValue).ref.scrollIntoView({ block: "center" });
}
}
function handleDropDownPosition() {
var _a;
const { top, bottom } = selectContainerRef.value.getBoundingClientRect() || {};
const container = roomService.getRoomContainer();
const bottomSize = container instanceof HTMLElement ? container.offsetHeight - bottom : -1;
let dropDownContainerHeight = 0;
if (!showSelectDropdown.value) {
selectDropDownRef.value.style = "display:block;position:absolute;z-index:-1000";
dropDownContainerHeight = selectDropDownRef.value.offsetHeight;
selectDropDownRef.value.style = "";
} else {
dropDownContainerHeight = (_a = selectDropDownRef.value) == null ? void 0 : _a.offsetHeight;
}
if (bottomSize < top && bottomSize < dropDownContainerHeight) {
dropDirection.value = "up";
}
}
function handleClickOutside() {
if (showSelectDropdown.value) {
showSelectDropdown.value = false;
}
}
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", {
ref_key: "selectContainerRef",
ref: selectContainerRef,
class: "select-container"
}, [
createElementVNode("div", {
class: normalizeClass(["select-content", { disabled: _ctx.disabled }]),
onClick: handleClickSelect
}, [
_ctx.$slots.customSelectContent ? renderSlot(_ctx.$slots, "customSelectContent", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("span", {
key: 1,
class: "select-text",
style: normalizeStyle(props.customSelectContentStyle)
}, toDisplayString(selectedLabel.value || selectedValue.value), 5)),
createVNode(SvgIcon, {
class: normalizeClass(["arrow-icon", { reverse: showSelectDropdown.value }]),
icon: ArrowStrokeSelectDownIcon
}, null, 8, ["class"])
], 2),
createVNode(Transition, { name: "select-fade" }, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
ref_key: "selectDropDownRef",
ref: selectDropDownRef,
style: normalizeStyle(dropDownStyle.value),
class: normalizeClass(["select-dropdown-container", dropDirection.value])
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 6), [
[vShow, showSelectDropdown.value]
])
]),
_: 3
})
])), [
[unref(vClickOutside), handleClickOutside]
]);
};
}
});
export {
_sfc_main as default
};