'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var index = require('../../cascader-panel/index.js');
var index$1 = require('../../input/index.js');
var index$2 = require('../../tooltip/index.js');
var index$3 = require('../../scrollbar/index.js');
var index$4 = require('../../tag/index.js');
var index$5 = require('../../icon/index.js');
require('../../../tokens/index.js');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var iconsVue = require('@element-plus/icons-vue');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var config = require('../../cascader-panel/src/config.js');
var validator = require('../../../utils/vue/validator.js');
var tooltip = require('../../tooltip/src/tooltip.js');
var tag = require('../../tag/src/tag.js');
var index$6 = require('../../../hooks/use-namespace/index.js');
var index$7 = require('../../../hooks/use-locale/index.js');
var form = require('../../../tokens/form.js');
var index$8 = require('../../../hooks/use-common-props/index.js');
var resizeEvent = require('../../../utils/dom/resize-event.js');

const DEFAULT_INPUT_HEIGHT = 40;
const INPUT_HEIGHT_MAP = {
  large: 36,
  default: 32,
  small: 28
};
const popperOptions = {
  modifiers: [
    {
      name: "arrowPosition",
      enabled: true,
      phase: "main",
      fn: ({ state }) => {
        const { modifiersData, placement } = state;
        if (["right", "left", "bottom", "top"].includes(placement))
          return;
        modifiersData.arrow.x = 35;
      },
      requires: ["arrow"]
    }
  ]
};
const COMPONENT_NAME = "PsCascader";
const _sfc_main = vue.defineComponent({
  name: COMPONENT_NAME,
  components: {
    PsCascaderPanel: index["default"],
    PsInput: index$1.PsInput,
    PsTooltip: index$2.PsTooltip,
    PsScrollbar: index$3.PsScrollbar,
    PsTag: index$4.PsTag,
    PsIcon: index$5.PsIcon,
    CircleClose: iconsVue.CircleClose,
    Check: iconsVue.Check,
    ArrowDown: iconsVue.ArrowDown
  },
  props: {
    ...config.CommonProps,
    size: {
      type: String,
      validator: validator.isValidComponentSize
    },
    placeholder: {
      type: String
    },
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    filterMethod: {
      type: Function,
      default: (node, keyword) => node.text.includes(keyword)
    },
    separator: {
      type: String,
      default: " / "
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    collapseTags: Boolean,
    collapseTagsTooltip: {
      type: Boolean,
      default: false
    },
    debounce: {
      type: Number,
      default: 300
    },
    beforeFilter: {
      type: Function,
      default: () => true
    },
    popperClass: {
      type: String,
      default: ""
    },
    popperAppendToBody: {
      type: Boolean,
      default: void 0
    },
    teleported: tooltip.useTooltipContentProps.teleported,
    tagType: { ...tag.tagProps.type, default: "info" },
    widget: {
      type: String
    }
  },
  setup(props) {
    let inputInitialHeight = 0;
    const nsCascader = index$6.useNamespace("cascader");
    const nsInput = index$6.useNamespace("input");
    const { t } = index$7.useLocale();
    const elForm = vue.inject(form.formContextKey, {});
    const tooltipRef = vue.ref(null);
    const input = vue.ref(null);
    const tagWrapper = vue.ref(null);
    const panel = vue.ref(null);
    const suggestionPanel = vue.ref(null);
    const inputHover = vue.ref(false);
    const filtering = vue.ref(false);
    const inputValue = vue.ref("");
    const searchInputValue = vue.ref("");
    const presentTags = vue.ref([]);
    const allPresentTags = vue.ref([]);
    const isDisabled = vue.computed(() => props.disabled || elForm.disabled);
    const inputPlaceholder = vue.computed(() => props.placeholder || t("el.cascader.placeholder"));
    const realSize = index$8.useSize();
    const tagSize = vue.computed(() => ["small"].includes(realSize.value) ? "small" : "default");
    const multiple = vue.computed(() => !!props.props.multiple);
    const readonly = vue.computed(() => !props.filterable || multiple.value);
    const checkedNodes = vue.computed(() => {
      var _a;
      return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
    });
    const clearBtnVisible = vue.computed(() => {
      if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
        return false;
      return !!checkedNodes.value.length;
    });
    const presentText = vue.computed(() => {
      const { showAllLevels, separator } = props;
      const nodes = checkedNodes.value;
      return nodes.length ? multiple.value ? " " : nodes[0].calcText(showAllLevels, separator) : "";
    });
    const updatePopperPosition = () => {
      vue.nextTick(() => {
        var _a;
        (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
      });
    };
    const updateStyle = () => {
      var _a, _b;
      const inputInner = (_a = input.value) == null ? void 0 : _a.input;
      const tagWrapperEl = tagWrapper.value;
      const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el;
      if (!core.isClient || !inputInner)
        return;
      if (suggestionPanelEl) {
        const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`);
        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
      }
      if (tagWrapperEl) {
        const { offsetHeight } = tagWrapperEl;
        const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px` : `${inputInitialHeight}px`;
        inputInner.style.height = height;
        updatePopperPosition();
      }
    };
    vue.onMounted(() => {
      var _a;
      const inputEl = (_a = input.value) == null ? void 0 : _a.$el;
      inputInitialHeight = (inputEl == null ? void 0 : inputEl.offsetHeight) || INPUT_HEIGHT_MAP[realSize.value] || DEFAULT_INPUT_HEIGHT;
      resizeEvent.addResizeListener(inputEl, updateStyle);
    });
    vue.onBeforeUnmount(() => {
      var _a;
      resizeEvent.removeResizeListener((_a = input.value) == null ? void 0 : _a.$el, updateStyle);
    });
    return {
      input,
      tagWrapper,
      inputPlaceholder,
      presentText,
      inputValue,
      searchInputValue,
      presentTags,
      allPresentTags,
      isDisabled,
      realSize,
      tagSize,
      multiple,
      readonly,
      clearBtnVisible,
      nsCascader,
      nsInput
    };
  }
});
const _hoisted_1 = ["widget"];
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { class: "el-cascader__collapse-tags" };
const _hoisted_4 = ["placeholder"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_circle_close = vue.resolveComponent("circle-close");
  const _component_ps_icon = vue.resolveComponent("ps-icon");
  const _component_arrow_down = vue.resolveComponent("arrow-down");
  const _component_ps_input = vue.resolveComponent("ps-input");
  const _component_ps_tag = vue.resolveComponent("ps-tag");
  const _component_ps_tooltip = vue.resolveComponent("ps-tooltip");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([
      _ctx.nsCascader.b(),
      _ctx.nsCascader.m(_ctx.realSize),
      _ctx.nsCascader.is("disabled", _ctx.isDisabled),
      _ctx.$attrs.class
    ]),
    style: vue.normalizeStyle(_ctx.$attrs.style),
    widget: _ctx.widget
  }, [
    vue.createVNode(_component_ps_input, {
      ref: "input",
      modelValue: _ctx.inputValue,
      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
      placeholder: _ctx.inputPlaceholder,
      readonly: _ctx.readonly,
      disabled: _ctx.isDisabled,
      "validate-event": false,
      size: _ctx.realSize,
      class: vue.normalizeClass(_ctx.nsCascader.is("focus", _ctx.popperVisible))
    }, {
      suffix: vue.withCtx(() => [
        _ctx.clearBtnVisible ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
          key: "clear",
          class: vue.normalizeClass([_ctx.nsInput.e("icon"), "icon-circle-close"])
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(_component_circle_close)
          ]),
          _: 1
        }, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_ps_icon, {
          key: "arrow-down",
          class: vue.normalizeClass([
            _ctx.nsInput.e("icon"),
            "icon-arrow-down",
            _ctx.nsCascader.is("reverse", _ctx.popperVisible)
          ])
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(_component_arrow_down)
          ]),
          _: 1
        }, 8, ["class"]))
      ]),
      _: 1
    }, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class"]),
    _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
      key: 0,
      ref: "tagWrapper",
      class: vue.normalizeClass(_ctx.nsCascader.e("tags"))
    }, [
      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.presentTags, (tag) => {
        return vue.openBlock(), vue.createBlock(_component_ps_tag, {
          key: tag.key,
          type: _ctx.tagType,
          size: _ctx.tagSize,
          hit: tag.hitState,
          closable: tag.closable,
          "disable-transitions": ""
        }, {
          default: vue.withCtx(() => [
            tag.isCollapseTag === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createBlock(_component_ps_tooltip, {
              key: 1,
              teleported: false,
              disabled: _ctx.popperVisible || !_ctx.collapseTagsTooltip,
              "fallback-placements": ["bottom", "top", "right", "left"],
              placement: "bottom",
              effect: "light"
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("span", null, vue.toDisplayString(tag.text), 1)
              ]),
              content: vue.withCtx(() => [
                vue.createElementVNode("div", _hoisted_3, [
                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.allPresentTags, (tag2, idx) => {
                    return vue.openBlock(), vue.createElementBlock("div", {
                      key: idx,
                      class: "el-cascader__collapse-tag"
                    }, [
                      (vue.openBlock(), vue.createBlock(_component_ps_tag, {
                        key: tag2.key,
                        class: "in-tooltip",
                        type: _ctx.tagType,
                        size: _ctx.tagSize,
                        hit: tag2.hitState,
                        closable: tag2.closable,
                        "disable-transitions": ""
                      }, {
                        default: vue.withCtx(() => [
                          vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1)
                        ]),
                        _: 2
                      }, 1032, ["type", "size", "hit", "closable"]))
                    ]);
                  }), 128))
                ])
              ]),
              _: 2
            }, 1032, ["disabled"]))
          ]),
          _: 2
        }, 1032, ["type", "size", "hit", "closable"]);
      }), 128)),
      _ctx.filterable && !_ctx.isDisabled ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
        key: 0,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.searchInputValue = $event),
        type: "text",
        class: vue.normalizeClass(_ctx.nsCascader.e("search-input")),
        placeholder: _ctx.presentText ? "" : _ctx.inputPlaceholder
      }, null, 10, _hoisted_4)), [
        [vue.vModelText, _ctx.searchInputValue]
      ]) : vue.createCommentVNode("v-if", true)
    ], 2)) : vue.createCommentVNode("v-if", true)
  ], 14, _hoisted_1);
}
var Cascader = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/cascader/src/index.vue"]]);

exports["default"] = Cascader;
//# sourceMappingURL=index.js.map
