layui/package/component/es/select/index.js

import { b as isArrayChildren, w as withInstall } from "../badge/index2.js";
import { defineComponent, useSlots, ref, onMounted, watch, onUnmounted, computed, provide, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, Fragment, renderList, createBlock, mergeProps, createCommentVNode, renderSlot, unref, normalizeClass, withKeys, withModifiers } from "vue";
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
import { _ as _sfc_main$4 } from "../input/index2.js";
import { _ as _sfc_main$3 } from "../tagInput/index2.js";
import { _ as _sfc_main$1 } from "../dropdown/index2.js";
import { _ as _sfc_main$2 } from "../selectOption/index2.js";
import "../dropdownMenu/index2.js";
import "../tag/index2.js";
import "../_chunks/@ctrl/index.js";
import "../tooltip/index2.js";
import "../_chunks/@vueuse/index.js";
var index = /* @__PURE__ */ (() => '.layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}:root{--input-border-radius: var(--global-border-radius);--in
const _hoisted_1 = { class: "layui-select" };
const _hoisted_2 = { class: "layui-select-content" };
const __default__ = {
  name: "LaySelect"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    name: null,
    disabled: { type: Boolean, default: false },
    placeholder: null,
    searchPlaceholder: null,
    searchMethod: null,
    modelValue: { default: null },
    multiple: { type: Boolean, default: false },
    items: null,
    size: { default: "md" },
    collapseTagsTooltip: { type: Boolean, default: true },
    minCollapsedNum: { default: 3 },
    allowClear: { type: Boolean, default: false },
    showSearch: { type: Boolean, default: false },
    contentClass: null,
    contentStyle: null,
    position: { default: "top" }
  },
  emits: ["update:modelValue", "change", "search"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const slots = useSlots();
    const selectRef = ref();
    const searchValue = ref("");
    const singleValue = ref("");
    const multipleValue = ref([]);
    const openState = ref(false);
    const options = ref([]);
    const composing = ref(false);
    var timer;
    const getOption = (nodes, newOptions) => {
      nodes == null ? void 0 : nodes.map((item) => {
        if (isArrayChildren(item, item.children)) {
          getOption(item.children, newOptions);
        } else {
          if (item.type.name == _sfc_main$2.name) {
            if (item.children) {
              const label = item.children.default()[0].children;
              if (typeof label == "string") {
                item.props.label = label;
              }
            }
            newOptions.push(item.props);
          }
        }
      });
    };
    const intOption = () => {
      const newOptions = [];
      if (slots.default) {
        getOption(slots.default(), newOptions);
      }
      Object.assign(newOptions, props.items);
      if (JSON.stringify(newOptions) != JSON.stringify(options.value)) {
        options.value = newOptions;
      }
    };
    const handleRemove = (value) => {
      if (Array.isArray(selectedValue.value)) {
        selectedValue.value = selectedValue.value.filter((item) => item != value);
      }
    };
    const onCompositionstart = () => {
      composing.value = true;
    };
    const onCompositionend = (event) => {
      composing.value = false;
      handleSearch(event.target.value);
    };
    onMounted(() => {
      intOption();
      timer = setInterval(intOption, 500);
      watch([selectedValue, options], () => {
        var _a, _b;
        if (multiple.value) {
          multipleValue.value = (_a = selectedValue.value) == null ? void 0 : _a.map((value) => {
            return options.value.find((item) => {
              item.disabled == "" || item.disabled == true ? item.closable = false : item.closable = true;
              return item.value === value;
            });
          });
        } else {
          searchValue.value = "";
          singleValue.value = (_b = options.value.find((item) => {
            return item.value === selectedValue.value;
          })) == null ? void 0 : _b.label;
        }
      }, { immediate: true, deep: true });
    });
    onUnmounted(() => {
      clearInterval(timer);
    });
    const selectedValue = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        emits("update:modelValue", value);
        emits("change", value);
      }
    });
    const multiple = computed(() => {
      return props.multiple;
    });
    const handleSearch = (value) => {
      if (composing.value)
        return;
      emits("search", value);
      searchValue.value = value;
    };
    const handleClear = () => {
      if (multiple.value) {
        selectedValue.value = [];
      } else {
        selectedValue.value = "";
      }
    };
    const handleHide = () => {
      searchValue.value = "";
      openState.value = false;
    };
    provide("selectRef", selectRef);
    provide("openState", openState);
    provide("selectedValue", selectedValue);
    provide("searchValue", searchValue);
    provide("multiple", multiple);
    provide("searchMethod", props.searchMethod);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_sfc_main$1, {
          ref_key: "selectRef",
          ref: selectRef,
          disabled: __props.disabled,
          contentClass: __props.contentClass,
          contentStyle: __props.contentStyle,
          "update-at-scroll": true,
          autoFitWidth: true,
          onHide: handleHide,
          onShow: _cache[5] || (_cache[5] = ($event) => openState.value = true)
        }, {
          content: withCtx(() => [
            createElementVNode("dl", _hoisted_2, [
              __props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.items, (item, index2) => {
                return openBlock(), createBlock(_sfc_main$2, mergeProps(item, { key: index2 }), null, 16);
              }), 128)) : createCommentVNode("", true),
              renderSlot(_ctx.$slots, "default")
            ])
          ]),
          default: withCtx(() => [
            unref(multiple) ? (openBlock(), createBlock(_sfc_main$3, {
              key: 0,
              modelValue: multipleValue.value,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => multipleValue.value = $event),
              "input-value": searchValue.value,
              "onUpdate:input-value": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
              "allow-clear": __props.allowClear,
              placeholder: __props.placeholder,
              collapseTagsTooltip: __props.collapseTagsTooltip,
              minCollapsedNum: __props.minCollapsedNum,
              disabled: __props.disabled,
              disabledInput: !__props.showSearch,
              size: __props.size,
              class: normalizeClass({ "layui-unselect": true }),
              position: __props.position,
              onRemove: handleRemove,
              onClear: handleClear,
              onInputValueChange: handleSearch,
              onKeyupCapture: [
                _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
                }, ["prevent", "stop"]), ["delete"])),
                _cache[3] || (_cache[3] = withKeys(withModifiers(() => {
                }, ["prevent", "stop"]), ["backspace"]))
              ],
              onKeydownCapture: _cache[4] || (_cache[4] = withKeys(withModifiers(() => {
              }, ["prevent", "stop"]), ["enter"]))
            }, {
              suffix: withCtx(() => [
                createVNode(unref(_sfc_main$2E), {
                  type: "layui-icon-triangle-d",
                  class: normalizeClass({ triangle: openState.value })
                }, null, 8, ["class"])
              ]),
              _: 1
            }, 8, ["modelValue", "input-value", "allow-clear", "placeholder", "collapseTagsTooltip", "minCollapsedNum", "disabled", "disabledInput", "size", "position"])) : (openBlock(), createBlock(_sfc_main$4, {
              key: 1,
              size: __props.size,
              disabled: __props.disabled,
              readonly: !__props.showSearch,
              modelValue: singleValue.value,
              "allow-clear": __props.allowClear,
              placeholder: __props.placeholder,
              class: normalizeClass({ "layui-unselect": !__props.showSearch }),
              onCompositionstart,
              onCompositionend,
              onInput: handleSearch,
              onClear: handleClear
            }, {
              suffix: withCtx(() => [
                createVNode(unref(_sfc_main$2E), {
                  type: "layui-icon-triangle-d",
                  class: normalizeClass({ triangle: openState.value })
                }, null, 8, ["class"])
              ]),
              _: 1
            }, 8, ["size", "disabled", "readonly", "modelValue", "allow-clear", "placeholder", "class"]))
          ]),
          _: 3
        }, 8, ["disabled", "contentClass", "contentStyle"])
      ]);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };