roomkit-web-vue3/lib/components/common/base/Select/SelectH5.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 ActionSheep = require("../ActionSheep.vue2.js");
const SvgIcon = require("../SvgIcon.vue.js");
const ArrowStrokeSelectDownIcon = require("../../icons/ArrowStrokeSelectDownIcon.vue.js");
;/* empty css              */
const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
const _hoisted_1 = { class: "label" };
const _hoisted_2 = { class: "custom-option-container" };
const _sfc_main = {
  __name: "SelectH5",
  props: {
    value: {
      type: [String, Number, Date]
    }
  },
  emits: ["change", "input"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const selectedLabel = Vue.ref("");
    const selectedRef = Vue.ref();
    const options = Vue.ref([]);
    const drawerShow = Vue.ref(false);
    const toggleDrawer = async () => {
      drawerShow.value = !drawerShow.value;
      await Vue.nextTick();
      if (drawerShow.value) {
        await Vue.nextTick();
        await selectedRef.value.scrollIntoView({ block: "center" });
      }
    };
    const onChange = (value) => {
      emit("change", value);
      emit("input", value);
    };
    const updateSelectedLabel = (newValue) => {
      const index = options.value.findIndex((option) => option.value === newValue);
      const matchedOption = options.value[index];
      if (matchedOption && matchedOption.label !== selectedLabel.value) {
        selectedLabel.value = matchedOption.label;
        selectedRef.value = matchedOption.ref;
      }
    };
    const addOption = (option) => {
      const index = options.value.findIndex((item) => item.value === option.value);
      if (index >= 0) {
        options.value[index] = option;
        updateSelectedLabel(props.value);
        return;
      }
      options.value.push(option);
      updateSelectedLabel(props.value);
    };
    const handleOptionClick = (value) => {
      updateSelectedLabel(value);
      onChange(value);
      toggleDrawer();
    };
    Vue.provide("TSelect", {
      value: props.value,
      label: selectedLabel,
      addOption,
      handleOptionClick
    });
    Vue.watch(
      () => props.value,
      (newValue, oldValue) => {
        if (newValue === oldValue) return;
        updateSelectedLabel(newValue);
      },
      { immediate: true }
    );
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", null, [
        Vue.createElementVNode("div", Vue.mergeProps({
          class: "custom-select",
          onChange: _cache[0] || (_cache[0] = ($event) => onChange($event.target.value)),
          onClick: toggleDrawer
        }, _ctx.$attrs), [
          Vue.createElementVNode("span", _hoisted_1, Vue.toDisplayString(selectedLabel.value || props.value), 1),
          Vue.createVNode(SvgIcon.default, {
            class: "icon-arrow",
            icon: ArrowStrokeSelectDownIcon.default
          })
        ], 16),
        Vue.createVNode(ActionSheep.default, {
          visible: drawerShow.value,
          onInput: _cache[1] || (_cache[1] = ($event) => drawerShow.value = $event)
        }, {
          default: Vue.withCtx(() => [
            Vue.createElementVNode("div", _hoisted_2, [
              Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ])
          ]),
          _: 3
        }, 8, ["visible"])
      ]);
    };
  }
};
const SelectH5 = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-a1e2b3c9"]]);
exports.default = SelectH5;