"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index = require("../../../hooks/use-namespace/index.js");
const index$1 = require("../../../hooks/use-ordered-children/index.js");
const splitter = require("./splitter.js");
const useContainer = require("./hooks/useContainer.js");
const useSize = require("./hooks/useSize.js");
const useResize = require("./hooks/useResize.js");
const type = require("./type.js");
const Vue = require("vue");
var splitter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElSplitter",
  __name: "splitter",
  props: splitter.splitterProps,
  emits: splitter.splitterEmits,
  setup(__props, { emit: __emit }) {
    const ns = index.useNamespace("splitter");
    const emits = __emit;
    const props = __props;
    const layout = Vue.toRef(props, "layout");
    const lazy = Vue.toRef(props, "lazy");
    const { containerEl, containerSize } = useContainer.useContainer(layout);
    const { removeChild: unregisterPanel, children: panels, addChild: registerPanel, ChildrenSorter: PanelsSorter } = index$1.useOrderedChildren(Vue.getCurrentInstance(), "ElSplitterPanel");
    Vue.watch(panels, () => {
      movingIndex.value = null;
      panels.value.forEach((instance, index2) => {
        instance.setIndex(index2);
      });
    });
    const { percentSizes, pxSizes } = useSize.useSize(panels, containerSize);
    const { lazyOffset, movingIndex, onMoveStart, onMoving, onMoveEnd, onCollapse } = useResize.useResize(panels, containerSize, pxSizes, lazy);
    const splitterStyles = Vue.computed(() => {
      return { [ns.cssVarBlockName("bar-offset")]: lazy.value ? `${lazyOffset.value}px` : void 0 };
    });
    const onResizeStart = (index2) => {
      onMoveStart(index2);
      emits("resizeStart", index2, pxSizes.value);
    };
    const onResize = (index2, offset) => {
      onMoving(index2, offset);
      if (!lazy.value) emits("resize", index2, pxSizes.value);
    };
    const onResizeEnd = async (index2) => {
      onMoveEnd();
      await Vue.nextTick();
      emits("resizeEnd", index2, pxSizes.value);
    };
    const onCollapsible = (index2, type2) => {
      onCollapse(index2, type2);
      emits("collapse", index2, type2, pxSizes.value);
    };
    Vue.provide(type.splitterRootContextKey, Vue.reactive({
      panels,
      percentSizes,
      pxSizes,
      layout,
      lazy,
      movingIndex,
      containerSize,
      onMoveStart: onResizeStart,
      onMoving: onResize,
      onMoveEnd: onResizeEnd,
      onCollapse: onCollapsible,
      registerPanel,
      unregisterPanel
    }));
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "containerEl",
        ref: containerEl,
        class: Vue.normalizeClass([Vue.unref(ns).b(), Vue.unref(ns).e(layout.value)]),
        style: Vue.normalizeStyle(splitterStyles.value)
      }, [
        Vue.renderSlot(_ctx.$slots, "default"),
        Vue.createVNode(Vue.unref(PanelsSorter)),
        Vue.createCommentVNode(" Prevent iframe touch events from breaking "),
        Vue.unref(movingIndex) ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass([Vue.unref(ns).e("mask"), Vue.unref(ns).e(`mask-${layout.value}`)])
        }, null, 2)) : Vue.createCommentVNode("v-if", true)
      ], 6);
    };
  }
});
exports.default = splitter_vue_vue_type_script_setup_true_lang_default;
