'use strict';

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

var vue = require('vue');
var directives = require('../directives');
var validators = require('../utils/validators');
var overlay = require('../el-overlay');
var isServer = require('../utils/isServer');
var constants = require('../utils/constants');
var PopupManager = require('../utils/popup-manager');
var util = require('../utils/util');
var hooks = require('../hooks');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);
var PopupManager__default = /*#__PURE__*/_interopDefaultLegacy(PopupManager);

const CLOSE_EVENT = 'close';
const OPEN_EVENT = 'open';
const CLOSED_EVENT = 'closed';
const OPENED_EVENT = 'opened';
function useDialog (props, ctx, targetRef) {
    const visible = vue.ref(false);
    const closed = vue.ref(false);
    const dialogRef = vue.ref(null);
    const openTimer = vue.ref(null);
    const closeTimer = vue.ref(null);
    const rendered = vue.ref(false);
    const zIndex = vue.ref(props.zIndex || PopupManager__default['default'].nextZIndex());
    const modalRef = vue.ref(null);
    const normalizeWidth = () => {
        if (util.isNumber(props.width))
            return `${props.width}px`;
        else
            return props.width;
    };
    const style = vue.computed(() => {
        const style = {};
        if (!props.fullscreen) {
            style.marginTop = props.top;
            if (props.width) {
                style.width = normalizeWidth();
            }
        }
        return style;
    });
    function afterEnter() {
        ctx.emit(OPENED_EVENT);
    }
    function afterLeave() {
        ctx.emit(CLOSED_EVENT);
        ctx.emit(constants.UPDATE_MODEL_EVENT, false);
        if (props.destroyOnClose) {
            rendered.value = false;
        }
    }
    function beforeLeave() {
        ctx.emit(CLOSE_EVENT);
    }
    function open() {
        util.clearTimer(closeTimer);
        util.clearTimer(openTimer);
        if (props.openDelay && props.openDelay > 0) {
            openTimer.value = window.setTimeout(() => {
                openTimer.value = null;
                doOpen();
            }, props.openDelay);
        }
        else {
            doOpen();
        }
    }
    function close() {
        util.clearTimer(openTimer);
        util.clearTimer(closeTimer);
        if (props.closeDelay && props.closeDelay > 0) {
            closeTimer.value = window.setTimeout(() => {
                closeTimer.value = null;
                doClose();
            }, props.closeDelay);
        }
        else {
            doClose();
        }
    }
    function hide(shouldCancel) {
        if (shouldCancel)
            return;
        closed.value = true;
        visible.value = false;
    }
    function handleClose() {
        if (props.beforeClose) {
            props.beforeClose(hide);
        }
        else {
            close();
        }
    }
    function onModalClick() {
        if (props.closeOnClickModal) {
            handleClose();
        }
    }
    function doOpen() {
        if (isServer__default['default']) {
            return;
        }
        visible.value = true;
    }
    function doClose() {
        visible.value = false;
    }
    if (props.lockScroll) {
        hooks.useLockScreen(visible);
    }
    if (props.closeOnPressEscape) {
        hooks.useModal({
            handleClose,
        }, visible);
    }
    hooks.useRestoreActive(visible);
    vue.watch(() => props.modelValue, val => {
        if (val) {
            closed.value = false;
            open();
            rendered.value = true;
            ctx.emit(OPEN_EVENT);
            zIndex.value = props.zIndex ? zIndex.value++ : PopupManager__default['default'].nextZIndex();
            vue.nextTick(() => {
                if (targetRef.value) {
                    targetRef.value.scrollTop = 0;
                }
            });
        }
        else {
            if (visible.value) {
                close();
            }
        }
    });
    vue.onMounted(() => {
        if (props.modelValue) {
            visible.value = true;
            rendered.value = true;
            open();
        }
    });
    return {
        afterEnter,
        afterLeave,
        beforeLeave,
        handleClose,
        onModalClick,
        closed,
        dialogRef,
        style,
        rendered,
        modalRef,
        visible,
        zIndex,
    };
}

var script = vue.defineComponent({
    name: 'ElDialog',
    components: {
        'el-overlay': overlay.Overlay,
    },
    directives: {
        TrapFocus: directives.TrapFocus,
    },
    props: {
        appendToBody: {
            type: Boolean,
            default: false,
        },
        beforeClose: {
            type: Function,
        },
        destroyOnClose: {
            type: Boolean,
            default: false,
        },
        center: {
            type: Boolean,
            default: false,
        },
        customClass: {
            type: String,
            default: '',
        },
        closeOnClickModal: {
            type: Boolean,
            default: true,
        },
        closeOnPressEscape: {
            type: Boolean,
            default: true,
        },
        fullscreen: {
            type: Boolean,
            default: false,
        },
        lockScroll: {
            type: Boolean,
            default: true,
        },
        modal: {
            type: Boolean,
            default: true,
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        title: {
            type: String,
            default: '',
        },
        openDelay: {
            type: Number,
            default: 0,
        },
        closeDelay: {
            type: Number,
            default: 0,
        },
        top: {
            type: String,
            default: '15vh',
        },
        modelValue: {
            type: Boolean,
            required: true,
        },
        modalClass: String,
        width: {
            type: [String, Number],
            default: '50%',
            validator: validators.isValidWidthUnit,
        },
        zIndex: {
            type: Number,
        },
    },
    emits: [
        OPEN_EVENT,
        OPENED_EVENT,
        CLOSE_EVENT,
        CLOSED_EVENT,
        constants.UPDATE_MODEL_EVENT,
    ],
    setup(props, ctx) {
        const dialogRef = vue.ref(null);
        return Object.assign(Object.assign({}, useDialog(props, ctx, dialogRef)), { dialogRef });
    },
});

const _hoisted_1 = { class: "el-dialog__header" };
const _hoisted_2 = { class: "el-dialog__title" };
const _hoisted_3 = /*#__PURE__*/vue.createVNode("i", { class: "el-dialog__close el-icon el-icon-close" }, null, -1 /* HOISTED */);
const _hoisted_4 = {
  key: 0,
  class: "el-dialog__body"
};
const _hoisted_5 = {
  key: 1,
  class: "el-dialog__footer"
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_overlay = vue.resolveComponent("el-overlay");
  const _directive_trap_focus = vue.resolveDirective("trap-focus");

  return (vue.openBlock(), vue.createBlock(vue.Teleport, {
    to: "body",
    disabled: !_ctx.appendToBody
  }, [
    vue.createVNode(vue.Transition, {
      name: "dialog-fade",
      onAfterEnter: _ctx.afterEnter,
      onAfterLeave: _ctx.afterLeave,
      onBeforeLeave: _ctx.beforeLeave
    }, {
      default: vue.withCtx(() => [
        vue.withDirectives(vue.createVNode(_component_el_overlay, {
          mask: _ctx.modal,
          "overlay-class": _ctx.modalClass,
          "z-index": _ctx.zIndex,
          onClick: _ctx.onModalClick
        }, {
          default: vue.withCtx(() => [
            vue.withDirectives(vue.createVNode("div", {
              ref: "dialogRef",
              class: [
            'el-dialog',
            {
              'is-fullscreen': _ctx.fullscreen,
              'el-dialog--center': _ctx.center,
            },
            _ctx.customClass,
          ],
              "aria-modal": "true",
              role: "dialog",
              "aria-label": _ctx.title || 'dialog',
              style: _ctx.style,
              onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {}, ["stop"]))
            }, [
              vue.createVNode("div", _hoisted_1, [
                vue.renderSlot(_ctx.$slots, "title", {}, () => [
                  vue.createVNode("span", _hoisted_2, vue.toDisplayString(_ctx.title), 1 /* TEXT */)
                ]),
                (_ctx.showClose)
                  ? (vue.openBlock(), vue.createBlock("button", {
                      key: 0,
                      "aria-label": "close",
                      class: "el-dialog__headerbtn",
                      type: "button",
                      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClose && _ctx.handleClose(...args)))
                    }, [
                      _hoisted_3
                    ]))
                  : vue.createCommentVNode("v-if", true)
              ]),
              (_ctx.rendered)
                ? (vue.openBlock(), vue.createBlock("div", _hoisted_4, [
                    vue.renderSlot(_ctx.$slots, "default")
                  ]))
                : vue.createCommentVNode("v-if", true),
              (_ctx.$slots.footer)
                ? (vue.openBlock(), vue.createBlock("div", _hoisted_5, [
                    vue.renderSlot(_ctx.$slots, "footer")
                  ]))
                : vue.createCommentVNode("v-if", true)
            ], 14 /* CLASS, STYLE, PROPS */, ["aria-label"]), [
              [_directive_trap_focus]
            ])
          ]),
          _: 3 /* FORWARDED */
        }, 8 /* PROPS */, ["mask", "overlay-class", "z-index", "onClick"]), [
          [vue.vShow, _ctx.visible]
        ])
      ]),
      _: 1 /* STABLE */
    }, 8 /* PROPS */, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
  ], 8 /* PROPS */, ["disabled"]))
}

script.render = render;
script.__file = "packages/dialog/src/index.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _Dialog = script;

exports.default = _Dialog;
exports.useDialog = useDialog;
