'use strict';

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

require('../../../hooks/index.js');
var resizableColumn = require('./resizable-column.js');
var vue = require('vue');
require('../../../utils/index.js');
var constants = require('./constants.js');
var iconsVue = require('@element-plus/icons-vue');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var error = require('../../../utils/error.js');
var index = require('../../../hooks/use-namespace/index.js');

const _sfc_main = vue.defineComponent({
  name: "ElResizableColumn",
  components: { ArrowLeft: iconsVue.ArrowLeft, ArrowRight: iconsVue.ArrowRight },
  props: resizableColumn.resizableColumnProps,
  setup(props, { slots }) {
    const instance = vue.getCurrentInstance();
    const columnsRoot = vue.inject(constants.resizableColumnsRootContextKey);
    if (!columnsRoot)
      error.throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
    const collapsable = vue.computed(() => props.collapsable || columnsRoot.props.collapsable);
    const showCollapse = vue.computed(() => props.showCollapse || columnsRoot.props.showCollapse);
    const collapsed = vue.ref(false);
    const column = vue.reactive({
      uid: instance.uid,
      slots,
      props,
      maxWidth: 0,
      parentWidth: 0,
      index: 0,
      width: 0,
      left: 0,
      collapsable,
      showCollapse,
      collapsed
    });
    const columnStyle = vue.computed(() => {
      if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
        return { height: `${column.width}px`, top: `${column.left}px`, display: column.collapsed ? "none" : "unset", width: "100%" };
      } else {
        return { width: `${column.width}px`, left: `${column.left}px`, display: column.collapsed ? "none" : "unset" };
      }
    });
    const resizerStyle = vue.computed(() => {
      if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
        return { top: `${column.left + (column.collapsed ? 0 : column.width)}px`, width: "100%" };
      } else {
        return { left: `${column.left + (column.collapsed ? 0 : column.width)}px` };
      }
    });
    vue.onMounted(() => {
      columnsRoot.registerColumn(column);
      columnsRoot.initColumnSize();
    });
    vue.onUnmounted(() => {
      columnsRoot.unregisterColumn(column.uid);
      columnsRoot.initColumnSize();
    });
    const columnsCount = vue.computed(() => columnsRoot.columns.value.length);
    const ns = index.useNamespace("resizable-column");
    const handleCollapse = () => {
      columnsRoot.handleCollapse(column);
    };
    const handleExpand = () => {
      columnsRoot.handleExpand(column);
    };
    return {
      ns,
      column,
      columnsCount,
      columnStyle,
      resizerStyle,
      handleCollapse,
      handleExpand
    };
  }
});
const _hoisted_1 = ["widget"];
const _hoisted_2 = ["data-index"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowLeft = vue.resolveComponent("ArrowLeft");
  const _component_el_icon = vue.resolveComponent("el-icon");
  const _component_el_button = vue.resolveComponent("el-button");
  const _component_ArrowRight = vue.resolveComponent("ArrowRight");
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
    vue.createElementVNode("div", {
      class: vue.normalizeClass(_ctx.ns.b()),
      widget: _ctx.widget,
      style: vue.normalizeStyle(_ctx.columnStyle)
    }, [
      vue.renderSlot(_ctx.$slots, "default")
    ], 14, _hoisted_1),
    _ctx.column.index < _ctx.columnsCount - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
      key: 0,
      class: vue.normalizeClass(["resizer", { "collapsed": _ctx.column.collapsed }]),
      style: vue.normalizeStyle(_ctx.resizerStyle),
      "data-index": _ctx.column.index
    }, [
      !_ctx.column.collapsed ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
        key: 0,
        class: "left",
        size: "small",
        onClick: _ctx.handleCollapse,
        disabled: !_ctx.column.collapsable
      }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_el_icon, null, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_ArrowLeft)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["onClick", "disabled"])), [
        [vue.vShow, _ctx.column.showCollapse]
      ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
        key: 1,
        class: "right",
        size: "small",
        onClick: _ctx.handleExpand,
        disabled: !_ctx.column.collapsable
      }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_el_icon, null, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_ArrowRight)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["onClick", "disabled"])), [
        [vue.vShow, _ctx.column.showCollapse]
      ])
    ], 14, _hoisted_2)) : vue.createCommentVNode("v-if", true)
  ], 64);
}
var ResizableColumn = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-column.vue"]]);

exports["default"] = ResizableColumn;
//# sourceMappingURL=resizable-column2.js.map
