@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.78 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const SvgIcon = require("../SvgIcon.vue.js");
const ArrowStrokeSelectDownIcon = require("../../icons/ArrowStrokeSelectDownIcon.vue.js");
const useZIndex = require("../../../../hooks/useZIndex.js");
const vClickOutside = require("../../../../directives/vClickOutside.js");
require("../../../../services/main.js");
const roomService = require("../../../../services/roomService.js");
require("../../../../locales/index.js");
require("@tencentcloud/tuiroom-engine-electron");
require("../../../../utils/environment.js");
require("mitt");
require("../../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const _sfc_main = /* @__PURE__ */ Vue.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.default();
const props = __props;
const emits = __emit;
const showSelectDropdown = Vue.ref(false);
const optionObj = Vue.ref(/* @__PURE__ */ new Map());
const optionDataList = Vue.computed(() => Array.from(optionObj.value.values()));
const selectedLabel = Vue.ref("");
const selectContainerRef = Vue.ref();
const selectDropDownRef = Vue.ref();
const dropDirection = Vue.ref("down");
Vue.watch(
() => props.modelValue,
(val) => {
if (optionObj.value.get(val)) {
selectedLabel.value = optionObj.value.get(props.modelValue).label;
}
},
{ immediate: true }
);
Vue.watch(optionDataList, () => {
if (optionObj.value.get(props.modelValue)) {
selectedLabel.value = optionObj.value.get(props.modelValue).label;
}
});
const dropDownStyle = Vue.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 = Vue.computed(() => props.modelValue);
Vue.provide(
"select",
Vue.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.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 Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
ref_key: "selectContainerRef",
ref: selectContainerRef,
class: "select-container"
}, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["select-content", { disabled: _ctx.disabled }]),
onClick: handleClickSelect
}, [
_ctx.$slots.customSelectContent ? Vue.renderSlot(_ctx.$slots, "customSelectContent", { key: 0 }, void 0, true) : (Vue.openBlock(), Vue.createElementBlock("span", {
key: 1,
class: "select-text",
style: Vue.normalizeStyle(props.customSelectContentStyle)
}, Vue.toDisplayString(selectedLabel.value || selectedValue.value), 5)),
Vue.createVNode(SvgIcon.default, {
class: Vue.normalizeClass(["arrow-icon", { reverse: showSelectDropdown.value }]),
icon: ArrowStrokeSelectDownIcon.default
}, null, 8, ["class"])
], 2),
Vue.createVNode(Vue.Transition, { name: "select-fade" }, {
default: Vue.withCtx(() => [
Vue.withDirectives(Vue.createElementVNode("div", {
ref_key: "selectDropDownRef",
ref: selectDropDownRef,
style: Vue.normalizeStyle(dropDownStyle.value),
class: Vue.normalizeClass(["select-dropdown-container", dropDirection.value])
}, [
Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 6), [
[Vue.vShow, showSelectDropdown.value]
])
]),
_: 3
})
])), [
[Vue.unref(vClickOutside.default), handleClickOutside]
]);
};
}
});
exports.default = _sfc_main;