'use strict';

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

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
require('../../../vue-components/index.cjs');
require('../../space/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index = require('../style/index.cjs');
var DrawerWrapper = require('./DrawerWrapper.cjs');
var props = require('./props.cjs');
var initDefaultProps = require('../../../utils/vue/initDefaultProps.cjs');
var log = require('../../../utils/log.cjs');
var index$1 = require('../../../hooks/use-scroll-locker/index.cjs');
var is = require('../../../utils/is.cjs');
var props$1 = require('../../../utils/vue/props.cjs');
var _class = require('../../../utils/dom/class.cjs');
var transition = require('../../../vue-components/transition/src/transition.cjs');
var omit = require('../../../utils/lang/omit.cjs');
var NoCompactStyle = require('../../space/src/NoCompactStyle.cjs');

const defaultPushState = {
  distance: 180
};
var ADrawer = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ADrawer",
  inheritAttrs: false,
  props: initDefaultProps.initDefaultProps(props.drawerProps(), {
    closable: true,
    placement: "right",
    maskClosable: true,
    mask: true,
    level: null,
    keyboard: true,
    push: defaultPushState
  }),
  slots: Object,
  // emits: ['update:visible', 'close', 'afterVisibleChange'],
  setup(props, {
    emit,
    slots,
    attrs
  }) {
    const sPush = vue.shallowRef(false);
    const destroyClose = vue.shallowRef(false);
    const vcDrawer = vue.shallowRef(null);
    const load = vue.shallowRef(false);
    const visible = vue.shallowRef(false);
    const mergedOpen = vue.computed(() => {
      var _a;
      return (_a = props.open) != null ? _a : props.visible;
    });
    vue.watch(mergedOpen, () => {
      if (mergedOpen.value)
        load.value = true;
      else
        visible.value = false;
    }, {
      immediate: true
    });
    vue.watch([mergedOpen, load], () => {
      if (mergedOpen.value && load.value)
        visible.value = true;
    }, {
      immediate: true
    });
    const parentDrawerOpts = vue.inject("parentDrawerOpts", null);
    const {
      prefixCls,
      getPopupContainer,
      direction
    } = useConfigInject.default("drawer", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    const getContainer = vue.computed(() => (
      // 有可能为 false，所以不能直接判断
      props.getContainer === void 0 && (getPopupContainer == null ? void 0 : getPopupContainer.value) ? () => getPopupContainer.value(document.body) : props.getContainer
    ));
    log.devWarning(!props.afterVisibleChange, "Drawer", "`afterVisibleChange` prop is deprecated, please use `@afterVisibleChange` event instead");
    if (process.env.NODE_ENV !== "production") {
      [["visible", "open"], ["onUpdate:visible", "onUpdate:open"], ["onAfterVisibleChange", "onAfterOpenChange"]].forEach(([deprecatedName, newName]) => {
        log.devWarning(!props[deprecatedName], "Drawer", `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`);
      });
    }
    const domFocus = () => {
      var _a, _b;
      (_b = (_a = vcDrawer.value) == null ? void 0 : _a.domFocus) == null ? void 0 : _b.call(_a);
    };
    const setPush = () => {
      sPush.value = true;
    };
    const setPull = () => {
      sPush.value = false;
      vue.nextTick(() => {
        domFocus();
      });
    };
    vue.provide("parentDrawerOpts", {
      setPush,
      setPull
    });
    if (props.lockScroll)
      index$1.useScrollLocker(visible);
    vue.onMounted(() => {
      if (mergedOpen.value && parentDrawerOpts)
        parentDrawerOpts.setPush();
    });
    vue.onUnmounted(() => {
      if (parentDrawerOpts)
        parentDrawerOpts.setPull();
    });
    vue.watch(visible, () => {
      if (parentDrawerOpts) {
        if (visible.value)
          parentDrawerOpts.setPush();
        else
          parentDrawerOpts.setPull();
      }
    }, {
      flush: "post"
    });
    const close = (e) => {
      emit("update:visible", false);
      emit("update:open", false);
      emit("close", e);
    };
    const afterVisibleChange = (open) => {
      var _a;
      if (!open) {
        if (destroyClose.value === false) {
          destroyClose.value = true;
        }
        if (props.destroyOnClose)
          load.value = false;
      }
      (_a = props.afterVisibleChange) == null ? void 0 : _a.call(props, open);
      emit("afterVisibleChange", open);
      emit("afterOpenChange", open);
    };
    const pushTransform = vue.computed(() => {
      const {
        push,
        placement
      } = props;
      let distance;
      if (typeof push === "boolean")
        distance = push ? defaultPushState.distance : 0;
      else
        distance = push.distance;
      distance = Number.parseFloat(String(distance || 0));
      if (placement === "left" || placement === "right")
        return `translateX(${placement === "left" ? distance : -distance}px)`;
      if (placement === "top" || placement === "bottom")
        return `translateY(${placement === "top" ? distance : -distance}px)`;
      return null;
    });
    const mergedWidth = vue.computed(() => {
      var _a;
      return (_a = props.width) != null ? _a : props.size === "large" ? 736 : 378;
    });
    const mergedHeight = vue.computed(() => {
      var _a;
      return (_a = props.height) != null ? _a : props.size === "large" ? 736 : 378;
    });
    const offsetStyle = vue.computed(() => {
      const {
        mask,
        placement
      } = props;
      if (!visible.value && !mask)
        return {};
      const val = {};
      if (placement === "left" || placement === "right")
        val.width = is.isNumeric(mergedWidth.value) ? `${mergedWidth.value}px` : mergedWidth.value;
      else
        val.height = is.isNumeric(mergedHeight.value) ? `${mergedHeight.value}px` : mergedHeight.value;
      return val;
    });
    const wrapperStyle = vue.computed(() => {
      const {
        zIndex,
        contentWrapperStyle
      } = props;
      const val = offsetStyle.value;
      return [{
        zIndex,
        transform: sPush.value ? pushTransform.value : void 0
      }, {
        ...contentWrapperStyle
      }, val];
    });
    const renderCloseIcon = (prefixCls2) => {
      var _a;
      const {
        closable
      } = props;
      const $closeIcon = slots.closeIcon ? (_a = slots.closeIcon) == null ? void 0 : _a.call(slots) : props.closeIcon;
      return closable && vue.createVNode("button", {
        "key": "closer",
        "onClick": close,
        "aria-label": "Close",
        "class": `${prefixCls2}-close`
      }, [$closeIcon === void 0 ? vue.createVNode(iconsVue.CloseOutlined, null, null) : $closeIcon]);
    };
    const renderHeader = (prefixCls2) => {
      const {
        closable,
        headerStyle
      } = props;
      const extra = props$1.getPropsSlot(slots, props, "extra");
      const title = props$1.getPropsSlot(slots, props, "title");
      if (!title && !closable)
        return null;
      return vue.createVNode("div", {
        "class": _class.classNames(`${prefixCls2}-header`, {
          [`${prefixCls2}-header-close-only`]: closable && !title && !extra
        }),
        "style": headerStyle
      }, [vue.createVNode("div", {
        "class": `${prefixCls2}-header-title`
      }, [renderCloseIcon(prefixCls2), title && vue.createVNode("div", {
        "class": `${prefixCls2}-title`
      }, [title])]), extra && vue.createVNode("div", {
        "class": `${prefixCls2}-extra`
      }, [extra])]);
    };
    const renderFooter = (prefix) => {
      const footer = props$1.getPropsSlot(slots, props, "footer");
      if (!footer)
        return null;
      const footerClassName = `${prefix}-footer`;
      return vue.createVNode("div", {
        "class": footerClassName,
        "style": props.footerStyle
      }, [footer]);
    };
    const renderBody = (prefix) => {
      var _a;
      if (destroyClose.value && !props.forceRender && !load.value)
        return null;
      const {
        bodyStyle,
        drawerStyle
      } = props;
      return vue.createVNode("div", {
        "class": `${prefix}-wrapper-body`,
        "style": drawerStyle
      }, [renderHeader(prefix), vue.createVNode("div", {
        "key": "body",
        "class": `${prefix}-body`,
        "style": bodyStyle
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderFooter(prefix)]);
    };
    const drawerClassName = vue.computed(() => _class.classNames({
      "no-mask": !props.mask,
      [`${prefixCls.value}-rtl`]: direction.value === "rtl"
    }, props.rootClassName, hashId.value));
    const maskMotion = vue.computed(() => {
      return transition.getTransitionProps(transition.getTransitionName(prefixCls.value, "mask-motion"));
    });
    const panelMotion = (motionPlacement) => {
      return transition.getTransitionProps(transition.getTransitionName(prefixCls.value, `panel-motion-${motionPlacement}`));
    };
    return () => {
      const {
        width,
        height,
        placement,
        mask,
        forceRender,
        ...rest
      } = props;
      const vcDrawerProps = {
        ...attrs,
        ...omit.omit(rest, ["size", "closeIcon", "closable", "destroyOnClose", "drawerStyle", "headerStyle", "bodyStyle", "title", "push", "onAfterVisibleChange", "onClose", "onUpdate:visible", "onUpdate:open", "visible"]),
        forceRender,
        onClose: close,
        afterVisibleChange,
        handler: false,
        prefixCls: prefixCls.value,
        open: visible.value,
        showMask: mask,
        placement,
        ref: vcDrawer
      };
      return wrapSSR(vue.createVNode(NoCompactStyle.NoCompactStyle, null, {
        default: () => [vue.createVNode(DrawerWrapper.default, {
          ...vcDrawerProps,
          "maskMotion": maskMotion.value,
          "motion": panelMotion,
          "width": mergedWidth.value,
          "height": mergedHeight.value,
          "getContainer": getContainer.value,
          "rootClassName": drawerClassName.value,
          "rootStyle": props.rootStyle,
          "contentWrapperStyle": wrapperStyle.value
        }, {
          handler: props.handle ? () => props.handle : slots.handle,
          default: () => renderBody(prefixCls.value)
        })]
      }));
    };
  }
});

exports.default = ADrawer;
//# sourceMappingURL=Drawer.cjs.map
