'use strict';

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

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../utils/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var props = require('./props.cjs');
var injectionKey = require('./injectionKey.cjs');
var initDefaultProps = require('../../../utils/vue/initDefaultProps.cjs');
var is = require('../../../utils/is.cjs');
var _class = require('../../../utils/dom/class.cjs');

const dimensionMaxMap = {
  xs: "479.98px",
  sm: "575.98px",
  md: "767.98px",
  lg: "991.98px",
  xl: "1199.98px",
  xxl: "1599.98px",
  xxxl: "1999.98px"
};
const generateId = (() => {
  let i = 0;
  return (prefix = "") => {
    i += 1;
    return `${prefix}${i}`;
  };
})();
var Sider = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ALayoutSider",
  inheritAttrs: false,
  props: initDefaultProps.initDefaultProps(props.siderProps(), {
    collapsible: false,
    defaultCollapsed: false,
    reverseArrow: false,
    width: 200,
    collapsedWidth: 80
  }),
  emits: ["breakpoint", "update:collapsed", "collapse"],
  setup(props, {
    emit,
    attrs,
    slots
  }) {
    const {
      prefixCls
    } = useConfigInject.default("layout-sider", props);
    const siderHook = vue.inject(injectionKey.SiderHookProviderKey, void 0);
    const collapsed = vue.shallowRef(!!(props.collapsed !== void 0 ? props.collapsed : props.defaultCollapsed));
    const below = vue.shallowRef(false);
    vue.watch(() => props.collapsed, () => {
      collapsed.value = !!props.collapsed;
    });
    vue.provide(injectionKey.SiderCollapsedKey, collapsed);
    const handleSetCollapsed = (value, type) => {
      if (props.collapsed === void 0)
        collapsed.value = value;
      emit("update:collapsed", value);
      emit("collapse", value, type);
    };
    const responsiveHandlerRef = vue.shallowRef((mql2) => {
      below.value = mql2.matches;
      emit("breakpoint", mql2.matches);
      if (collapsed.value !== mql2.matches)
        handleSetCollapsed(mql2.matches, "responsive");
    });
    let mql;
    function responsiveHandler(mediaQueryList) {
      return responsiveHandlerRef.value(mediaQueryList);
    }
    const uniqueId = generateId("ant-sider-");
    siderHook && siderHook.addSider(uniqueId);
    vue.onMounted(() => {
      vue.watch(() => props.breakpoint, () => {
        try {
          mql == null ? void 0 : mql.removeEventListener("change", responsiveHandler);
        } catch (error) {
          mql == null ? void 0 : mql.removeListener(responsiveHandler);
        }
        if (typeof window !== "undefined") {
          const {
            matchMedia
          } = window;
          if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
            mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
            try {
              mql.addEventListener("change", responsiveHandler);
            } catch (error) {
              mql.addListener(responsiveHandler);
            }
            responsiveHandler(mql);
          }
        }
      }, {
        immediate: true
      });
    });
    vue.onBeforeUnmount(() => {
      try {
        mql == null ? void 0 : mql.removeEventListener("change", responsiveHandler);
      } catch (error) {
        mql == null ? void 0 : mql.removeListener(responsiveHandler);
      }
      siderHook && siderHook.removeSider(uniqueId);
    });
    const toggle = () => {
      handleSetCollapsed(!collapsed.value, "clickTrigger");
    };
    return () => {
      var _a, _b;
      const pre = prefixCls.value;
      const {
        collapsedWidth,
        width,
        reverseArrow,
        zeroWidthTriggerStyle,
        trigger = (_a = slots.trigger) == null ? void 0 : _a.call(slots),
        collapsible,
        theme
      } = props;
      const rawWidth = collapsed.value ? collapsedWidth : width;
      const siderWidth = is.isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
      const zeroWidthTrigger = Number.parseFloat(String(collapsedWidth || 0)) === 0 ? vue.createVNode("span", {
        "onClick": toggle,
        "class": _class.classNames(`${pre}-zero-width-trigger`, `${pre}-zero-width-trigger-${reverseArrow ? "right" : "left"}`),
        "style": zeroWidthTriggerStyle
      }, [trigger || vue.createVNode(iconsVue.BarsOutlined, null, null)]) : null;
      const iconObj = {
        expanded: reverseArrow ? vue.createVNode(iconsVue.RightOutlined, null, null) : vue.createVNode(iconsVue.LeftOutlined, null, null),
        collapsed: reverseArrow ? vue.createVNode(iconsVue.LeftOutlined, null, null) : vue.createVNode(iconsVue.RightOutlined, null, null)
      };
      const status = collapsed.value ? "collapsed" : "expanded";
      const defaultTrigger = iconObj[status];
      const triggerDom = trigger !== null ? zeroWidthTrigger || vue.createVNode("div", {
        "class": `${pre}-trigger`,
        "onClick": toggle,
        "style": {
          width: siderWidth
        }
      }, [trigger || defaultTrigger]) : null;
      const divStyle = [attrs.style, {
        flex: `0 0 ${siderWidth}`,
        maxWidth: siderWidth,
        // Fix width transition bug in IE11
        minWidth: siderWidth,
        // https://github.com/ant-design/ant-design/issues/6349
        width: siderWidth
      }];
      const siderCls = _class.classNames(pre, `${pre}-${theme}`, {
        [`${pre}-collapsed`]: !!collapsed.value,
        [`${pre}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
        [`${pre}-below`]: !!below.value,
        [`${pre}-zero-width`]: Number.parseFloat(siderWidth) === 0
      }, attrs.class);
      return vue.createVNode("aside", {
        ...attrs,
        "class": siderCls,
        "style": divStyle
      }, [vue.createVNode("div", {
        "class": `${pre}-children`
      }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]), collapsible || below.value && zeroWidthTrigger ? triggerDom : null]);
    };
  }
});

exports.default = Sider;
//# sourceMappingURL=Sider.cjs.map
