@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,
162 lines (161 loc) • 5.42 kB
JavaScript
import { defineComponent, useSlots, ref, onMounted, onUnmounted, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, withKeys, normalizeStyle, withModifiers, renderSlot, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
const _hoisted_1 = ["value", "placeholder", "disabled", "maxlength", "type", "enterkeyhint", "readonly"];
const _hoisted_2 = {
key: 1,
class: "results"
};
const _hoisted_3 = ["onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "InputH5",
props: {
modelValue: { default: "" },
placeholder: { default: "" },
disabled: { type: Boolean, default: false },
type: { default: "text" },
readonly: { type: Boolean },
enterkeyhint: { default: "" },
search: {},
select: {},
maxlength: { default: "80" },
border: { type: Boolean, default: true },
align: { default: "left" }
},
emits: [
"update:modelValue",
"input",
"focus",
"blur",
"done"
],
setup(__props, { emit: __emit }) {
const slots = useSlots();
const props = __props;
const emit = __emit;
const tuiInputRef = ref(null);
const inputRef = ref(null);
const show = ref(false);
const blur = (event) => {
const { value } = event.target;
show.value = false;
const trimmedValue = value.trimStart().trimEnd();
if (value !== trimmedValue) {
event.target.value = trimmedValue;
}
emit("blur", tuiInputRef.value);
};
const done = () => {
emit("done", tuiInputRef.value);
};
const focus = () => {
show.value = true;
emit("focus", tuiInputRef.value);
};
const handleSuffixIconClick = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.blur();
};
const closeOnOutsideClick = (event) => {
var _a;
if (!((_a = tuiInputRef.value) == null ? void 0 : _a.contains(event.target))) {
show.value = false;
}
};
function handleResultItemClick(item) {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.blur();
if (props.select) {
props.select(item);
}
}
onMounted(() => {
window.addEventListener("click", closeOnOutsideClick);
});
onUnmounted(() => {
window.removeEventListener("click", closeOnOutsideClick);
});
const searchResult = ref([]);
function handleInput(event) {
const { value } = event.target;
const trimmedValue = value.trimStart();
if (value !== trimmedValue) {
event.target.value = trimmedValue;
}
emit("update:modelValue", trimmedValue);
emit("input", trimmedValue);
if (props.search) {
searchResult.value = props.search(event.target.value);
}
}
const showResults = computed(
() => {
var _a;
return searchResult.value && ((_a = searchResult.value) == null ? void 0 : _a.length) !== 0 && show.value;
}
);
const hasSuffixIcon = computed(() => !!slots.suffixIcon);
const inputStyle = computed(() => {
let paddingRight = "16px";
if (hasSuffixIcon.value) {
paddingRight = "40px";
} else if (props.align === "right") {
paddingRight = "0";
}
return {
paddingRight,
textAlign: props.align
};
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "tuiInputRef",
ref: tuiInputRef,
class: normalizeClass(["tui-input", !_ctx.border && "no-border"])
}, [
createElementVNode("input", {
ref_key: "inputRef",
ref: inputRef,
value: _ctx.modelValue,
placeholder: _ctx.placeholder,
disabled: _ctx.disabled,
maxlength: props.maxlength,
type: props.type,
enterkeyhint: _ctx.enterkeyhint,
readonly: _ctx.readonly,
style: normalizeStyle(inputStyle.value),
onFocus: focus,
onBlur: blur,
onKeyup: withKeys(done, ["enter"]),
onInput: handleInput,
onChange: handleInput,
autocomplete: "off"
}, null, 44, _hoisted_1),
hasSuffixIcon.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "suffix-icon",
onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["prevent"])),
onClick: handleSuffixIconClick
}, [
renderSlot(_ctx.$slots, "suffixIcon", {}, void 0, true)
], 32)) : createCommentVNode("", true),
showResults.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(searchResult.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "results-item",
onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
}, ["prevent"])),
onClick: ($event) => handleResultItemClick(item)
}, [
createTextVNode(toDisplayString(item.label || item.value) + " ", 1),
renderSlot(_ctx.$slots, "searchResultItem", { data: item }, void 0, true)
], 40, _hoisted_3);
}), 128))
])) : createCommentVNode("", true)
], 2);
};
}
});
export {
_sfc_main as default
};