'use strict';

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

var vue = require('vue');
var vueFullscreen = require('vue-fullscreen');
var index = require('../../icon-button/index.js');

"use strict";
const _hoisted_1 = { style: { "display": "flex", "width": "fit-content", "flex": "1", "align-items": "center" } };
const _hoisted_2 = { style: { "display": "flex", "align-items": "center", "cursor": "pointer" } };
const _hoisted_3 = {
  class: "card-text",
  style: { height: "100%" }
};
const __default__ = vue.defineComponent({
  name: "me-card"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    title: { type: String, required: false },
    headerBorder: { type: Boolean, required: false, default: true },
    footerBorder: { type: Boolean, required: false, default: true },
    border: { type: Boolean, required: false, default: true },
    titleSize: { type: String, required: false, default: "16px" },
    bgColor: { type: String, required: false },
    width: { type: String, required: false },
    height: { type: String, required: false },
    bodyHeight: { type: String, required: false },
    bodyStyle: { type: null, required: false },
    mode: { type: String, required: false, default: "normal" },
    round: { type: Boolean, required: false, default: true },
    customStyle: { type: null, required: false },
    fullscreen: { type: Boolean, required: false, default: false },
    showCollapse: { type: Boolean, required: false, default: true },
    shadow: { type: String, required: false, default: "never" },
    headerStyle: { type: Object, required: false },
    expand: { type: Boolean, required: false, default: true }
  },
  emits: ["closeEvent", "changeEvent"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const bodyRef = vue.ref();
    const bodyMinWidth = vue.ref(0);
    vue.onMounted(() => {
      bodyMinWidth.value = bodyRef.value?.getBoundingClientRect()?.width;
    });
    const emit = __emit;
    const slot = vue.useSlots();
    const bodyHeight = vue.ref(props.bodyHeight);
    const showBody = vue.ref(props.expand);
    vue.watch(
      () => props.expand,
      (newValue) => {
        showBody.value = newValue;
      }
    );
    const headerBorder = vue.computed(() => {
      return {
        "border-bottom": props.headerBorder ? "var(--card-border-width) solid var(--card-border-color)" : "0"
      };
    });
    const footerBorder = vue.computed(() => {
      return {
        "border-top": props.footerBorder ? "var(--card-border-width) solid var(--card-border-color)" : "0"
      };
    });
    const getStyle = vue.computed(() => {
      return {
        border: props.border ? "var(--card-border-width) solid var(--card-border-color)" : "0",
        height: props.mode === "full" ? "100%" : props.height,
        borderRadius: props.round ? "calc(4px - (1px))" : "0",
        backgroundColor: props.bgColor,
        ...props.customStyle
      };
    });
    const fullscreenVal = vue.ref(false);
    const meCardRef = vue.ref(null);
    const zIndex = vue.ref(0);
    const fullScreenIcon = vue.ref("ri-expand-diagonal-line");
    const fullScreenStyle = vue.ref({
      width: "",
      margin: "",
      height: props.height
    });
    window.addEventListener("resize", () => {
      if (!fullscreenVal.value) {
        bodyMinWidth.value = bodyRef.value?.getBoundingClientRect()?.width;
      }
    });
    const toggle = async () => {
      vueFullscreen.api.toggle(meCardRef.value, {
        teleport: true,
        pageOnly: true,
        callback: (isFullscreen) => {
          fullscreenVal.value = isFullscreen;
          console.log(isFullscreen, "isFullscreen");
          emit("changeEvent", isFullscreen);
          if (isFullscreen) {
            zIndex.value = 1e3;
            fullScreenStyle.value = {
              width: "100vw",
              margin: "0",
              height: "100vh"
            };
            fullScreenIcon.value = "ri-collapse-diagonal-line";
            bodyHeight.value = "100%";
          } else {
            zIndex.value = 0;
            fullScreenStyle.value = {
              width: "",
              margin: "",
              height: "100%"
            };
            fullScreenIcon.value = "ri-expand-diagonal-line";
            bodyHeight.value = props.bodyHeight;
          }
        }
      });
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["me-card", {
            "is-hover-shadow": props.shadow == "hover",
            "is-always-shadow": props.shadow == "always"
          }]),
          ref_key: "meCardRef",
          ref: meCardRef,
          style: vue.normalizeStyle({ ...getStyle.value, zIndex: zIndex.value, ...fullScreenStyle.value })
        },
        [
          vue.createCommentVNode(" header "),
          vue.unref(slot)?.header || vue.unref(slot)["header-left-btn"] || vue.unref(slot)["header-right-btn"] || __props.title ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: "card-header",
              style: vue.normalizeStyle({ ...headerBorder.value, ...__props.headerStyle })
            },
            [
              vue.createElementVNode("div", _hoisted_1, [
                vue.renderSlot(_ctx.$slots, "header"),
                vue.createElementVNode("div", null, [
                  vue.renderSlot(_ctx.$slots, "header-left-btn", {}, () => [
                    vue.createElementVNode(
                      "div",
                      {
                        class: "card-title",
                        style: vue.normalizeStyle({ fontSize: __props.titleSize })
                      },
                      vue.toDisplayString(__props.title),
                      5
                      /* TEXT, STYLE */
                    )
                  ])
                ])
              ]),
              vue.createElementVNode("div", _hoisted_2, [
                vue.renderSlot(_ctx.$slots, "header-right-btn"),
                props.showCollapse ? (vue.openBlock(), vue.createElementBlock("div", {
                  key: 0,
                  onClick: _cache[0] || (_cache[0] = ($event) => showBody.value = !showBody.value),
                  style: { "margin-left": "10px" }
                }, [
                  vue.createVNode(vue.unref(index.MeIconButton), {
                    hover: "",
                    icon: showBody.value ? "ri-subtract-line" : "ri-add-line"
                  }, null, 8, ["icon"])
                ])) : vue.createCommentVNode("v-if", true),
                props.fullscreen ? (vue.openBlock(), vue.createElementBlock("div", {
                  key: 1,
                  onClick: toggle,
                  style: { "margin-left": "10px" }
                }, [
                  vue.createVNode(vue.unref(index.MeIconButton), {
                    hover: "",
                    icon: fullScreenIcon.value
                  }, null, 8, ["icon"])
                ])) : vue.createCommentVNode("v-if", true)
              ])
            ],
            4
            /* STYLE */
          )) : vue.createCommentVNode("v-if", true),
          vue.createCommentVNode(" body "),
          vue.withDirectives(vue.createElementVNode(
            "div",
            {
              ref_key: "bodyRef",
              ref: bodyRef,
              style: vue.normalizeStyle([{ "overflow-y": "auto", "padding": "10px 0" }, { height: bodyHeight.value, ...__props.bodyStyle }])
            },
            [
              vue.withDirectives(vue.createElementVNode(
                "div",
                {
                  class: "card-body",
                  style: vue.normalizeStyle({
                    height: !fullscreenVal.value ? `calc(${props.bodyHeight} - 20px)` : "100%",
                    ...__props.bodyStyle
                  })
                },
                [
                  vue.createElementVNode("div", _hoisted_3, [
                    vue.renderSlot(_ctx.$slots, "default")
                  ])
                ],
                4
                /* STYLE */
              ), [
                [vue.vShow, true]
              ])
            ],
            4
            /* STYLE */
          ), [
            [vue.vShow, showBody.value]
          ]),
          vue.createCommentVNode(" footer "),
          vue.unref(slot)?.footer && showBody.value ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 1,
              style: vue.normalizeStyle(footerBorder.value),
              class: "card-footer"
            },
            [
              vue.renderSlot(_ctx.$slots, "footer")
            ],
            4
            /* STYLE */
          )) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=card.vue2.js.map
