roomkit-web-vue3/lib/components/common/base/Input/InputH5.vue2.js

<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,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("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__ */ Vue.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 = Vue.useSlots();
    const props = __props;
    const emit = __emit;
    const tuiInputRef = Vue.ref(null);
    const inputRef = Vue.ref(null);
    const show = Vue.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);
      }
    }
    Vue.onMounted(() => {
      window.addEventListener("click", closeOnOutsideClick);
    });
    Vue.onUnmounted(() => {
      window.removeEventListener("click", closeOnOutsideClick);
    });
    const searchResult = Vue.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 = Vue.computed(
      () => {
        var _a;
        return searchResult.value && ((_a = searchResult.value) == null ? void 0 : _a.length) !== 0 && show.value;
      }
    );
    const hasSuffixIcon = Vue.computed(() => !!slots.suffixIcon);
    const inputStyle = Vue.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 Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "tuiInputRef",
        ref: tuiInputRef,
        class: Vue.normalizeClass(["tui-input", !_ctx.border && "no-border"])
      }, [
        Vue.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: Vue.normalizeStyle(inputStyle.value),
          onFocus: focus,
          onBlur: blur,
          onKeyup: Vue.withKeys(done, ["enter"]),
          onInput: handleInput,
          onChange: handleInput,
          autocomplete: "off"
        }, null, 44, _hoisted_1),
        hasSuffixIcon.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: "suffix-icon",
          onMousedown: _cache[0] || (_cache[0] = Vue.withModifiers(() => {
          }, ["prevent"])),
          onClick: handleSuffixIconClick
        }, [
          Vue.renderSlot(_ctx.$slots, "suffixIcon", {}, void 0, true)
        ], 32)) : Vue.createCommentVNode("", true),
        showResults.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(searchResult.value, (item, index) => {
            return Vue.openBlock(), Vue.createElementBlock("div", {
              key: index,
              class: "results-item",
              onMousedown: _cache[1] || (_cache[1] = Vue.withModifiers(() => {
              }, ["prevent"])),
              onClick: ($event) => handleResultItemClick(item)
            }, [
              Vue.createTextVNode(Vue.toDisplayString(item.label || item.value) + " ", 1),
              Vue.renderSlot(_ctx.$slots, "searchResultItem", { data: item }, void 0, true)
            ], 40, _hoisted_3);
          }), 128))
        ])) : Vue.createCommentVNode("", true)
      ], 2);
    };
  }
});
exports.default = _sfc_main;