import { defineComponent, ref, pushScopeId, popScopeId, openBlock, createBlock, createVNode, toDisplayString, renderSlot, withScopeId } from 'vue';

var script = defineComponent({
    name: "SimpleModal",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        }
    },
    setup(props) {
        const isShow = ref(props.show);
        const close = () => {
            isShow.value = false;
        };
        return {
            isShow,
            close
        };
    }
});

const _withId = /*#__PURE__*/withScopeId("data-v-8217442e");

pushScopeId("data-v-8217442e");
const _hoisted_1 = { class: "modal-content" };
const _hoisted_2 = { class: "title" };
popScopeId();

const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock("div", {
    class: `modal ${_ctx.isShow ? 'show' : ''}`
  }, [
    createVNode("div", _hoisted_1, [
      createVNode("span", {
        class: "close",
        onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.close(...args)))
      }, "×"),
      createVNode("p", _hoisted_2, toDisplayString(_ctx.title), 1),
      renderSlot(_ctx.$slots, "default")
    ])
  ], 2))
});

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".modal {\n  display: none; /* Hidden by default */\n  position: fixed;\n  z-index: 10;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: rgb(0,0,0);\n  background-color: rgba(0,0,0,0.6);\n}\n.modal.show {\n  display: block;\n}\n.modal-content {\n  box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.5);\n  border-radius: 6px 0px 0px 6px;\n  background: #2C3335;\n  margin: 15% auto; /* 15% from the top and centered */\n  padding: 20px;\n  border: 1px solid #888;\n  width: 24.688rem;\n  height: auto;\n}\n.title {\n  font-style: normal;\n  font-weight: 590;\n  font-size: 1.375rem;\n  line-height: 1.625rem;\n  letter-spacing: -0.02em;\n  color: #F7F7F8;\n}\n.close {\n  width: 40px;\n  height: 40px;\n  color: #B1B7C1;\n  float: right;\n  font-size: 40px;\n  cursor: pointer;\n}\n";
styleInject(css_248z);

script.render = render;
script.__scopeId = "data-v-8217442e";

const registerComponent = (instance, component) => {
    if (component) {
        instance.component(component.name || "", component);
    }
};

const Plugin = {
    install(vue) {
        registerComponent(vue, script);
    }
};

export default Plugin;
export { script as SimpleModal };