"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const types = require("../../../utils/types.js");
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-locale/index.js");
const index$1 = require("../../../hooks/use-namespace/index.js");
const index$3 = require("../../icon/index.js");
const useFormItem = require("../../form/src/hooks/use-form-item.js");
const index$2 = require("../../button/index.js");
const transfer = require("./transfer.js");
const usePropsAlias = require("./composables/use-props-alias.js");
const useCheckedChange = require("./composables/use-checked-change.js");
const useComputedData = require("./composables/use-computed-data.js");
const useMove = require("./composables/use-move.js");
const transferPanel2 = require("./transfer-panel2.js");
const index$4 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 0 };
var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElTransfer",
  __name: "transfer",
  props: transfer.transferProps,
  emits: transfer.transferEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const slots = Vue.useSlots();
    const { t } = index.useLocale();
    const ns = index$1.useNamespace("transfer");
    const { formItem } = useFormItem.useFormItem();
    const checkedState = Vue.reactive({
      leftChecked: [],
      rightChecked: []
    });
    const propsAlias = usePropsAlias.usePropsAlias(props);
    const { sourceData, targetData } = useComputedData.useComputedData(props);
    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange.useCheckedChange(checkedState, emit);
    const { addToLeft, addToRight } = useMove.useMove(props, checkedState, emit);
    const leftPanel = Vue.ref();
    const rightPanel = Vue.ref();
    const clearQuery = (which) => {
      switch (which) {
        case "left":
          leftPanel.value.query = "";
          break;
        case "right":
          rightPanel.value.query = "";
          break;
      }
    };
    const hasButtonTexts = Vue.computed(() => props.buttonTexts.length === 2);
    const leftPanelTitle = Vue.computed(() => props.titles[0] || t("el.transfer.titles.0"));
    const rightPanelTitle = Vue.computed(() => props.titles[1] || t("el.transfer.titles.1"));
    const panelFilterPlaceholder = Vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
    Vue.watch(() => props.modelValue, () => {
      var _a;
      if (props.validateEvent) (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
    });
    const optionRender = Vue.computed(() => (option) => {
      var _a;
      if (props.renderContent) return props.renderContent(Vue.h, option);
      const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, { option })) || []).filter((node) => node.type !== Vue.Comment);
      if (defaultSlotVNodes.length) return defaultSlotVNodes;
      return Vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
    });
    __expose({
      clearQuery,
      leftPanel,
      rightPanel
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", { class: Vue.normalizeClass(Vue.unref(ns).b()) }, [
        Vue.createVNode(transferPanel2.default, {
          ref_key: "leftPanel",
          ref: leftPanel,
          data: Vue.unref(sourceData),
          "option-render": optionRender.value,
          placeholder: panelFilterPlaceholder.value,
          title: leftPanelTitle.value,
          filterable: __props.filterable,
          format: __props.format,
          "filter-method": __props.filterMethod,
          "default-checked": __props.leftDefaultChecked,
          props: props.props,
          onCheckedChange: Vue.unref(onSourceCheckedChange)
        }, {
          empty: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "left-empty")]),
          default: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "left-footer")]),
          _: 3
        }, 8, [
          "data",
          "option-render",
          "placeholder",
          "title",
          "filterable",
          "format",
          "filter-method",
          "default-checked",
          "props",
          "onCheckedChange"
        ]),
        Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("buttons")) }, [Vue.createVNode(Vue.unref(index$2.ElButton), {
          type: "primary",
          class: Vue.normalizeClass([Vue.unref(ns).e("button"), Vue.unref(ns).is("with-texts", hasButtonTexts.value)]),
          disabled: Vue.unref(types.isEmpty)(checkedState.rightChecked),
          onClick: Vue.unref(addToLeft)
        }, {
          default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$3.ElIcon), null, {
            default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$4.ArrowLeft))]),
            _: 1
          }), !Vue.unref(types.isUndefined)(__props.buttonTexts[0]) ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_1, Vue.toDisplayString(__props.buttonTexts[0]), 1)) : Vue.createCommentVNode("v-if", true)]),
          _: 1
        }, 8, [
          "class",
          "disabled",
          "onClick"
        ]), Vue.createVNode(Vue.unref(index$2.ElButton), {
          type: "primary",
          class: Vue.normalizeClass([Vue.unref(ns).e("button"), Vue.unref(ns).is("with-texts", hasButtonTexts.value)]),
          disabled: Vue.unref(types.isEmpty)(checkedState.leftChecked),
          onClick: Vue.unref(addToRight)
        }, {
          default: Vue.withCtx(() => [!Vue.unref(types.isUndefined)(__props.buttonTexts[1]) ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_2, Vue.toDisplayString(__props.buttonTexts[1]), 1)) : Vue.createCommentVNode("v-if", true), Vue.createVNode(Vue.unref(index$3.ElIcon), null, {
            default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$4.ArrowRight))]),
            _: 1
          })]),
          _: 1
        }, 8, [
          "class",
          "disabled",
          "onClick"
        ])], 2),
        Vue.createVNode(transferPanel2.default, {
          ref_key: "rightPanel",
          ref: rightPanel,
          data: Vue.unref(targetData),
          "option-render": optionRender.value,
          placeholder: panelFilterPlaceholder.value,
          filterable: __props.filterable,
          format: __props.format,
          "filter-method": __props.filterMethod,
          title: rightPanelTitle.value,
          "default-checked": __props.rightDefaultChecked,
          props: props.props,
          onCheckedChange: Vue.unref(onTargetCheckedChange)
        }, {
          empty: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "right-empty")]),
          default: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "right-footer")]),
          _: 3
        }, 8, [
          "data",
          "option-render",
          "placeholder",
          "filterable",
          "format",
          "filter-method",
          "title",
          "default-checked",
          "props",
          "onCheckedChange"
        ])
      ], 2);
    };
  }
});
exports.default = transfer_vue_vue_type_script_setup_true_lang_default;
