import { defineComponent, reactive, ref, computed, h, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
import { PsButton } from '../../button/index.mjs';
import { PsIcon } from '../../icon/index.mjs';
import '../../../hooks/index.mjs';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import TransferPanel from './transfer-panel.mjs';
import { useComputedData } from './useComputedData.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const _sfc_main = defineComponent({
  name: "PsTransfer",
  components: {
    TransferPanel,
    PsButton,
    PsIcon,
    ArrowLeft,
    ArrowRight
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    titles: {
      type: Array,
      default: () => []
    },
    buttonTexts: {
      type: Array,
      default: () => []
    },
    filterPlaceholder: {
      type: String,
      default: ""
    },
    filterMethod: Function,
    leftDefaultChecked: {
      type: Array,
      default: () => []
    },
    rightDefaultChecked: {
      type: Array,
      default: () => []
    },
    renderContent: Function,
    modelValue: {
      type: Array,
      default: () => []
    },
    format: {
      type: Object,
      default: () => ({})
    },
    filterable: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => ({
        label: "label",
        key: "key",
        disabled: "disabled"
      })
    },
    targetOrder: {
      type: String,
      default: "original",
      validator: (val) => {
        return ["original", "push", "unshift"].includes(val);
      }
    }
  },
  setup(props, { slots }) {
    const { t } = useLocale();
    const ns = useNamespace("transfer");
    const checkedState = reactive({
      leftChecked: [],
      rightChecked: []
    });
    const { sourceData, targetData } = useComputedData(props);
    const leftPanel = ref();
    const rightPanel = ref();
    const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
    const leftPanelTitle = computed(() => props.titles[0] || t("el.transfer.titles.0"));
    const rightPanelTitle = computed(() => props.titles[1] || t("el.transfer.titles.1"));
    const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
    const optionRender = computed(() => (option) => {
      if (props.renderContent)
        return props.renderContent(h, option);
      if (slots.default)
        return slots.default({ option });
      return h("span", option[props.props.label] || option[props.props.key]);
    });
    return {
      ns,
      sourceData,
      targetData,
      ...toRefs(checkedState),
      hasButtonTexts,
      leftPanelTitle,
      rightPanelTitle,
      panelFilterPlaceholder,
      leftPanel,
      rightPanel,
      optionRender
    };
  }
});
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_transfer_panel = resolveComponent("transfer-panel");
  const _component_arrow_left = resolveComponent("arrow-left");
  const _component_ps_icon = resolveComponent("ps-icon");
  const _component_ps_button = resolveComponent("ps-button");
  const _component_arrow_right = resolveComponent("arrow-right");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.ns.b())
  }, [
    createVNode(_component_transfer_panel, {
      ref: "leftPanel",
      data: _ctx.sourceData,
      "option-render": _ctx.optionRender,
      placeholder: _ctx.panelFilterPlaceholder,
      title: _ctx.leftPanelTitle,
      filterable: _ctx.filterable,
      format: _ctx.format,
      "filter-method": _ctx.filterMethod,
      "default-checked": _ctx.leftDefaultChecked,
      props: _ctx.props
    }, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "left-footer")
      ]),
      _: 3
    }, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props"]),
    createElementVNode("div", {
      class: normalizeClass(_ctx.ns.e("buttons"))
    }, [
      createVNode(_component_ps_button, {
        type: "primary",
        class: normalizeClass([_ctx.ns.e("button"), _ctx.ns.is("with-texts", _ctx.hasButtonTexts)]),
        disabled: _ctx.rightChecked.length === 0
      }, {
        default: withCtx(() => [
          createVNode(_component_ps_icon, null, {
            default: withCtx(() => [
              createVNode(_component_arrow_left)
            ]),
            _: 1
          }),
          _ctx.buttonTexts[0] !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.buttonTexts[0]), 1)) : createCommentVNode("v-if", true)
        ]),
        _: 1
      }, 8, ["class", "disabled"]),
      createVNode(_component_ps_button, {
        type: "primary",
        class: normalizeClass([_ctx.ns.e("button"), _ctx.ns.is("with-texts", _ctx.hasButtonTexts)]),
        disabled: _ctx.leftChecked.length === 0
      }, {
        default: withCtx(() => [
          _ctx.buttonTexts[1] !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.buttonTexts[1]), 1)) : createCommentVNode("v-if", true),
          createVNode(_component_ps_icon, null, {
            default: withCtx(() => [
              createVNode(_component_arrow_right)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["class", "disabled"])
    ], 2),
    createVNode(_component_transfer_panel, {
      ref: "rightPanel",
      data: _ctx.targetData,
      "option-render": _ctx.optionRender,
      placeholder: _ctx.panelFilterPlaceholder,
      filterable: _ctx.filterable,
      format: _ctx.format,
      "filter-method": _ctx.filterMethod,
      title: _ctx.rightPanelTitle,
      "default-checked": _ctx.rightDefaultChecked,
      props: _ctx.props
    }, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "right-footer")
      ]),
      _: 3
    }, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props"])
  ], 2);
}
var Transfer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/transfer/src/index.vue"]]);

export { Transfer as default };
//# sourceMappingURL=index.mjs.map
