@namelivia/vue-components 1.2.0 → 1.3.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, toDisplayString, createStaticVNode, createElementVNode, renderSlot, withDirectives, Fragment, renderList, vModelSelect, createCommentVNode, normalizeClass, resolveComponent, createBlock, Transition, withCtx, createVNode } from 'vue';
 
-var script$s = defineComponent({
+var script$t = defineComponent({
   name: 'SectionTitle',
   props: {
     text: {
@@ -10,73 +10,73 @@ var script$s = defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "text-center text-6xl leading-relaxed" };
+const _hoisted_1$p = { class: "text-center text-6xl leading-relaxed" };
 
-function render$s(_ctx, _cache) {
-  return (openBlock(), createElementBlock("h1", _hoisted_1$o, toDisplayString(_ctx.text), 1 /* TEXT */))
+function render$t(_ctx, _cache) {
+  return (openBlock(), createElementBlock("h1", _hoisted_1$p, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$s.render = render$s;
-script$s.__file = "src/SectionTitle.vue";
+script$t.render = render$t;
+script$t.__file = "src/SectionTitle.vue";
 
-var script$r = defineComponent({
+var script$s = defineComponent({
   name: "Loading",
   props: {
     text: String,
   },
 });
 
-const _hoisted_1$n = /*#__PURE__*/createStaticVNode("<h1 class=\"text-center.text-1xl.leading-relaxed\">Loading...</h1><div class=\"flex items-center justify-center space-x-2 animate-bounce\"><div class=\"w-8 h-8 bg-blue-400 rounded-full\"></div><div class=\"w-8 h-8 bg-green-400 rounded-full\"></div><div class=\"w-8 h-8 bg-red-400 rounded-full\"></div></div>", 2);
-const _hoisted_3$9 = [
-  _hoisted_1$n
+const _hoisted_1$o = /*#__PURE__*/createStaticVNode("<h1 class=\"text-center.text-1xl.leading-relaxed\">Loading...</h1><div class=\"flex items-center justify-center space-x-2 animate-bounce\"><div class=\"w-8 h-8 bg-blue-400 rounded-full\"></div><div class=\"w-8 h-8 bg-green-400 rounded-full\"></div><div class=\"w-8 h-8 bg-red-400 rounded-full\"></div></div>", 2);
+const _hoisted_3$a = [
+  _hoisted_1$o
 ];
 
-function render$r(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", null, _hoisted_3$9))
+function render$s(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", null, _hoisted_3$a))
 }
 
-script$r.render = render$r;
-script$r.__file = "src/Loading.vue";
+script$s.render = render$s;
+script$s.__file = "src/Loading.vue";
 
-var script$q = defineComponent({
+var script$r = defineComponent({
   name: "ResetButton",
   props: {
     text: String,
   },
 });
 
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   class: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded",
   type: "reset"
 };
 
-function render$q(_ctx, _cache) {
-  return (openBlock(), createElementBlock("button", _hoisted_1$m, toDisplayString(_ctx.text), 1 /* TEXT */))
+function render$r(_ctx, _cache) {
+  return (openBlock(), createElementBlock("button", _hoisted_1$n, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$q.render = render$q;
-script$q.__file = "src/ResetButton.vue";
+script$r.render = render$r;
+script$r.__file = "src/ResetButton.vue";
 
-var script$p = defineComponent({
+var script$q = defineComponent({
   name: "SubmitButton",
   props: {
     text: String,
   },
 });
 
-const _hoisted_1$l = {
+const _hoisted_1$m = {
   class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded",
   type: "submit"
 };
 
-function render$p(_ctx, _cache) {
-  return (openBlock(), createElementBlock("button", _hoisted_1$l, toDisplayString(_ctx.text), 1 /* TEXT */))
+function render$q(_ctx, _cache) {
+  return (openBlock(), createElementBlock("button", _hoisted_1$m, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$p.render = render$p;
-script$p.__file = "src/SubmitButton.vue";
+script$q.render = render$q;
+script$q.__file = "src/SubmitButton.vue";
 
-var script$o = defineComponent({
+var script$p = defineComponent({
   name: "RegularButton",
   props: {
     text: String,
@@ -89,17 +89,17 @@ var script$o = defineComponent({
   }
 });
 
-function render$o(_ctx, _cache) {
+function render$p(_ctx, _cache) {
   return (openBlock(), createElementBlock("button", {
     class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded",
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
   }, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$o.render = render$o;
-script$o.__file = "src/RegularButton.vue";
+script$p.render = render$p;
+script$p.__file = "src/RegularButton.vue";
 
-var script$n = defineComponent({
+var script$o = defineComponent({
   name: "SecondaryButton",
   props: {
     text: String,
@@ -112,17 +112,17 @@ var script$n = defineComponent({
   }
 });
 
-function render$n(_ctx, _cache) {
+function render$o(_ctx, _cache) {
   return (openBlock(), createElementBlock("button", {
     class: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded",
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
   }, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$n.render = render$n;
-script$n.__file = "src/SecondaryButton.vue";
+script$o.render = render$o;
+script$o.__file = "src/SecondaryButton.vue";
 
-var script$m = defineComponent({
+var script$n = defineComponent({
   name: "DangerButton",
   props: {
     text: String,
@@ -135,35 +135,35 @@ var script$m = defineComponent({
   }
 });
 
-function render$m(_ctx, _cache) {
+function render$n(_ctx, _cache) {
   return (openBlock(), createElementBlock("button", {
     class: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded",
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
   }, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-script$m.render = render$m;
-script$m.__file = "src/DangerButton.vue";
+script$n.render = render$n;
+script$n.__file = "src/DangerButton.vue";
 
-var script$l = defineComponent({
+var script$m = defineComponent({
   name: "Card"
 });
 
-const _hoisted_1$k = { class: "m-8" };
-const _hoisted_2$d = { class: "max-w-sm rounded overflow-hidden shadow-lg" };
+const _hoisted_1$l = { class: "m-8" };
+const _hoisted_2$e = { class: "max-w-sm rounded overflow-hidden shadow-lg" };
 
-function render$l(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$k, [
-    createElementVNode("div", _hoisted_2$d, [
+function render$m(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$l, [
+    createElementVNode("div", _hoisted_2$e, [
       renderSlot(_ctx.$slots, "default")
     ])
   ]))
 }
 
-script$l.render = render$l;
-script$l.__file = "src/Card.vue";
+script$m.render = render$m;
+script$m.__file = "src/Card.vue";
 
-var script$k = defineComponent({
+var script$l = defineComponent({
   name: "CardImage",
   props: {
     src: String,
@@ -185,44 +185,44 @@ var script$k = defineComponent({
   },
 });
 
-const _hoisted_1$j = ["src", "alt"];
+const _hoisted_1$k = ["src", "alt"];
 
-function render$k(_ctx, _cache) {
+function render$l(_ctx, _cache) {
   return (openBlock(), createElementBlock("img", {
     class: "w-full",
     src: _ctx.src,
     alt: _ctx.alt,
     ref: "image"
-  }, null, 8 /* PROPS */, _hoisted_1$j))
+  }, null, 8 /* PROPS */, _hoisted_1$k))
 }
 
-script$k.render = render$k;
-script$k.__file = "src/CardImage.vue";
+script$l.render = render$l;
+script$l.__file = "src/CardImage.vue";
 
-var script$j = defineComponent({
+var script$k = defineComponent({
   name: "CardBody",
   props: {
     title: String,
   },
 });
 
-const _hoisted_1$i = { class: "px-6 py-4" };
-const _hoisted_2$c = { class: "font-bold text-xl mb-2" };
-const _hoisted_3$8 = { class: "text-gray-700 text-base" };
+const _hoisted_1$j = { class: "px-6 py-4" };
+const _hoisted_2$d = { class: "font-bold text-xl mb-2" };
+const _hoisted_3$9 = { class: "text-gray-700 text-base" };
 
-function render$j(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$i, [
-    createElementVNode("div", _hoisted_2$c, toDisplayString(_ctx.title), 1 /* TEXT */),
-    createElementVNode("p", _hoisted_3$8, [
+function render$k(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$j, [
+    createElementVNode("div", _hoisted_2$d, toDisplayString(_ctx.title), 1 /* TEXT */),
+    createElementVNode("p", _hoisted_3$9, [
       renderSlot(_ctx.$slots, "default")
     ])
   ]))
 }
 
-script$j.render = render$j;
-script$j.__file = "src/CardBody.vue";
+script$k.render = render$k;
+script$k.__file = "src/CardBody.vue";
 
-var script$i = defineComponent({
+var script$j = defineComponent({
   name: "Selector",
   props: {
     id: {
@@ -261,9 +261,9 @@ var script$i = defineComponent({
   },
 });
 
-const _hoisted_1$h = { class: "mb-4" };
-const _hoisted_2$b = ["for"];
-const _hoisted_3$7 = { class: "relative" };
+const _hoisted_1$i = { class: "mb-4" };
+const _hoisted_2$c = ["for"];
+const _hoisted_3$8 = { class: "relative" };
 const _hoisted_4$1 = ["id"];
 const _hoisted_5$1 = ["value", "disabled"];
 const _hoisted_6 = /*#__PURE__*/createElementVNode("div", { class: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700" }, [
@@ -276,13 +276,13 @@ const _hoisted_6 = /*#__PURE__*/createElementVNode("div", { class: "pointer-even
   ])
 ], -1 /* HOISTED */);
 
-function render$i(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$h, [
+function render$j(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$i, [
     createElementVNode("label", {
       class: "block text-gray-700 text-sm font-bold mb-2",
       for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$b),
-    createElementVNode("div", _hoisted_3$7, [
+    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$c),
+    createElementVNode("div", _hoisted_3$8, [
       withDirectives(createElementVNode("select", {
         class: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500",
         id: _ctx.id,
@@ -304,10 +304,10 @@ function render$i(_ctx, _cache) {
   ]))
 }
 
-script$i.render = render$i;
-script$i.__file = "src/Selector.vue";
+script$j.render = render$j;
+script$j.__file = "src/Selector.vue";
 
-var script$h = defineComponent({
+var script$i = defineComponent({
   name: "TextInput",
   props: {
     id: {
@@ -335,16 +335,16 @@ var script$h = defineComponent({
 
 });
 
-const _hoisted_1$g = { class: "mb-4" };
-const _hoisted_2$a = ["for"];
-const _hoisted_3$6 = ["id", "name", "required", "placeholder", "value"];
+const _hoisted_1$h = { class: "mb-4" };
+const _hoisted_2$b = ["for"];
+const _hoisted_3$7 = ["id", "name", "required", "placeholder", "value"];
 
-function render$h(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
+function render$i(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$h, [
     createElementVNode("label", {
       class: "block text-gray-700 text-sm font-bold mb-2",
       for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$a),
+    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$b),
     createElementVNode("input", {
       class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
       id: _ctx.id,
@@ -354,14 +354,14 @@ function render$h(_ctx, _cache) {
       value: _ctx.text,
       onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
       type: "text"
-    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$6)
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$7)
   ]))
 }
 
-script$h.render = render$h;
-script$h.__file = "src/TextInput.vue";
+script$i.render = render$i;
+script$i.__file = "src/TextInput.vue";
 
-var script$g = defineComponent({
+var script$h = defineComponent({
   name: "CheckBoxInput",
   props: {
     id: {
@@ -388,11 +388,11 @@ var script$g = defineComponent({
   },
 });
 
-const _hoisted_1$f = { class: "mb-4" };
-const _hoisted_2$9 = ["id", "name", "required", "value"];
+const _hoisted_1$g = { class: "mb-4" };
+const _hoisted_2$a = ["id", "name", "required", "value"];
 
-function render$g(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$f, [
+function render$h(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
     createElementVNode("input", {
       id: _ctx.id,
       name: _ctx.id,
@@ -401,16 +401,16 @@ function render$g(_ctx, _cache) {
       onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
       type: "checkbox",
       "unchecked-value": "false"
-    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_2$9),
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_2$a),
     createCommentVNode("TODO: This seems not to work"),
     createCommentVNode("label(class=\"block text-gray-700 text-sm font-bold\" :for=\"id\") {{ label }}")
   ]))
 }
 
-script$g.render = render$g;
-script$g.__file = "src/CheckBoxInput.vue";
+script$h.render = render$h;
+script$h.__file = "src/CheckBoxInput.vue";
 
-var script$f = defineComponent({
+var script$g = defineComponent({
   name: "NumberInput",
   props: {
     id: {
@@ -444,16 +444,16 @@ var script$f = defineComponent({
 
 });
 
-const _hoisted_1$e = { class: "mb-4" };
-const _hoisted_2$8 = ["for"];
-const _hoisted_3$5 = ["id", "name", "required", "placeholder", "value", "min", "step"];
+const _hoisted_1$f = { class: "mb-4" };
+const _hoisted_2$9 = ["for"];
+const _hoisted_3$6 = ["id", "name", "required", "placeholder", "value", "min", "step"];
 
-function render$f(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$e, [
+function render$g(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$f, [
     createElementVNode("label", {
       class: "block text-gray-700 text-sm font-bold mb-2",
       for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$8),
+    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$9),
     createElementVNode("input", {
       class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
       id: _ctx.id,
@@ -465,14 +465,14 @@ function render$f(_ctx, _cache) {
       step: _ctx.step,
       onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
       type: "number"
-    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$5)
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$6)
   ]))
 }
 
-script$f.render = render$f;
-script$f.__file = "src/NumberInput.vue";
+script$g.render = render$g;
+script$g.__file = "src/NumberInput.vue";
 
-var script$e = defineComponent({
+var script$f = defineComponent({
   name: "ImageInput",
   props: {
     id: {
@@ -502,16 +502,16 @@ var script$e = defineComponent({
   },
 });
 
-const _hoisted_1$d = { class: "mb-4" };
-const _hoisted_2$7 = ["for"];
-const _hoisted_3$4 = ["id", "name", "required", "placeholder", "value", "drop-placeholder"];
+const _hoisted_1$e = { class: "mb-4" };
+const _hoisted_2$8 = ["for"];
+const _hoisted_3$5 = ["id", "name", "required", "placeholder", "value", "drop-placeholder"];
 
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
+function render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$e, [
     createElementVNode("label", {
       class: "block text-gray-700 text-sm font-bold mb-2",
       for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$7),
+    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$8),
     createElementVNode("input", {
       class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
       id: _ctx.id,
@@ -523,44 +523,44 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
       type: "file",
       accept: "image/*"
-    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$4)
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3$5)
   ]))
 }
 
-script$e.render = render$e;
-script$e.__file = "src/ImageInput.vue";
+script$f.render = render$f;
+script$f.__file = "src/ImageInput.vue";
 
-var script$d = defineComponent({
+var script$e = defineComponent({
   name: "CardGrid"
 });
 
-const _hoisted_1$c = { class: "flex flex-wrap lg:justify-between justify-center align-content:center" };
+const _hoisted_1$d = { class: "flex flex-wrap lg:justify-between justify-center align-content:center" };
 
-function render$d(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$c, [
+function render$e(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
 
-script$d.render = render$d;
-script$d.__file = "src/CardGrid.vue";
+script$e.render = render$e;
+script$e.__file = "src/CardGrid.vue";
 
-var script$c = defineComponent({
+var script$d = defineComponent({
   name: "Container"
 });
 
-const _hoisted_1$b = { class: "container mx-auto" };
+const _hoisted_1$c = { class: "container mx-auto" };
 
-function render$c(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
+function render$d(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$c, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
 
-script$c.render = render$c;
-script$c.__file = "src/Container.vue";
+script$d.render = render$d;
+script$d.__file = "src/Container.vue";
 
-var script$b = defineComponent({
+var script$c = defineComponent({
   name: "MobileNavigationLink",
   props: {
     text: {
@@ -583,23 +583,23 @@ var script$b = defineComponent({
   },
 });
 
-const _hoisted_1$a = ["href"];
+const _hoisted_1$b = ["href"];
 
-function render$b(_ctx, _cache) {
+function render$c(_ctx, _cache) {
   return (openBlock(), createElementBlock("a", {
     href: _ctx.href,
     class: normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$a))
+  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$b))
 }
 
-script$b.render = render$b;
-script$b.__file = "src/MobileNavigationLink.vue";
+script$c.render = render$c;
+script$c.__file = "src/MobileNavigationLink.vue";
 
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: "MobileNavigationLinks",
   components: {
-    MobileNavigationLink: script$b,
+    MobileNavigationLink: script$c,
   },
   props: {
     links: {
@@ -612,14 +612,14 @@ var script$a = defineComponent({
   },
 });
 
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   key: 0,
   class: "sm:hidden",
   id: "mobile-menu"
 };
-const _hoisted_2$6 = { class: "px-2 pt-2 pb-3 space-y-1" };
+const _hoisted_2$7 = { class: "px-2 pt-2 pb-3 space-y-1" };
 
-function render$a(_ctx, _cache) {
+function render$b(_ctx, _cache) {
   const _component_mobile_navigation_link = resolveComponent("mobile-navigation-link");
 
   return (openBlock(), createBlock(Transition, {
@@ -632,8 +632,8 @@ function render$a(_ctx, _cache) {
   }, {
     default: withCtx(() => [
       (_ctx.open)
-        ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-            createElementVNode("div", _hoisted_2$6, [
+        ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+            createElementVNode("div", _hoisted_2$7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
                 return (openBlock(), createBlock(_component_mobile_navigation_link, {
                   key: link.id,
@@ -649,10 +649,10 @@ function render$a(_ctx, _cache) {
   }))
 }
 
-script$a.render = render$a;
-script$a.__file = "src/MobileNavigationLinks.vue";
+script$b.render = render$b;
+script$b.__file = "src/MobileNavigationLinks.vue";
 
-var script$9 = defineComponent({
+var script$a = defineComponent({
   name: "NavigationLink",
   props: {
     text: {
@@ -675,23 +675,23 @@ var script$9 = defineComponent({
   },
 });
 
-const _hoisted_1$8 = ["href"];
+const _hoisted_1$9 = ["href"];
 
-function render$9(_ctx, _cache) {
+function render$a(_ctx, _cache) {
   return (openBlock(), createElementBlock("a", {
     href: _ctx.href,
     class: normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$8))
+  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$9))
 }
 
-script$9.render = render$9;
-script$9.__file = "src/NavigationLink.vue";
+script$a.render = render$a;
+script$a.__file = "src/NavigationLink.vue";
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: "NavigationLinks",
   components: {
-    NavigationLink: script$9,
+    NavigationLink: script$a,
   },
   props: {
     links: {
@@ -700,14 +700,14 @@ var script$8 = defineComponent({
   },
 });
 
-const _hoisted_1$7 = { class: "hidden sm:block sm:ml-6" };
-const _hoisted_2$5 = { class: "flex space-x-4" };
+const _hoisted_1$8 = { class: "hidden sm:block sm:ml-6" };
+const _hoisted_2$6 = { class: "flex space-x-4" };
 
-function render$8(_ctx, _cache) {
+function render$9(_ctx, _cache) {
   const _component_navigation_link = resolveComponent("navigation-link");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
-    createElementVNode("div", _hoisted_2$5, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
+    createElementVNode("div", _hoisted_2$6, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
         return (openBlock(), createBlock(_component_navigation_link, {
           key: link.id,
@@ -719,10 +719,10 @@ function render$8(_ctx, _cache) {
   ]))
 }
 
-script$8.render = render$8;
-script$8.__file = "src/NavigationLinks.vue";
+script$9.render = render$9;
+script$9.__file = "src/NavigationLinks.vue";
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: "NavbarTitle",
   props: {
     href: {
@@ -740,11 +740,11 @@ var script$7 = defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["href"];
-const _hoisted_2$4 = ["src", "alt"];
-const _hoisted_3$3 = ["src", "alt"];
+const _hoisted_1$7 = ["href"];
+const _hoisted_2$5 = ["src", "alt"];
+const _hoisted_3$4 = ["src", "alt"];
 
-function render$7(_ctx, _cache) {
+function render$8(_ctx, _cache) {
   return (openBlock(), createElementBlock("a", {
     class: "flex-shrink-0 flex items-center",
     href: _ctx.href
@@ -753,19 +753,19 @@ function render$7(_ctx, _cache) {
       class: "block lg:hidden h-8 w-auto",
       src: _ctx.imageSmall,
       alt: _ctx.title
-    }, null, 8 /* PROPS */, _hoisted_2$4),
+    }, null, 8 /* PROPS */, _hoisted_2$5),
     createElementVNode("img", {
       class: "hidden lg:block h-8 w-auto",
       src: _ctx.imageBig,
       alt: _ctx.title
-    }, null, 8 /* PROPS */, _hoisted_3$3)
-  ], 8 /* PROPS */, _hoisted_1$6))
+    }, null, 8 /* PROPS */, _hoisted_3$4)
+  ], 8 /* PROPS */, _hoisted_1$7))
 }
 
-script$7.render = render$7;
-script$7.__file = "src/NavbarTitle.vue";
+script$8.render = render$8;
+script$8.__file = "src/NavbarTitle.vue";
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: "RightContent",
   props: {
     locale: {
@@ -777,21 +777,21 @@ var script$6 = defineComponent({
   },
 });
 
-const _hoisted_1$5 = { class: "absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0" };
-const _hoisted_2$3 = { class: "bg-gray-800 p-1 text-gray-400" };
-const _hoisted_3$2 = { class: "bg-gray-800 p-1 text-gray-400" };
+const _hoisted_1$6 = { class: "absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0" };
+const _hoisted_2$4 = { class: "bg-gray-800 p-1 text-gray-400" };
+const _hoisted_3$3 = { class: "bg-gray-800 p-1 text-gray-400" };
 
-function render$6(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$5, [
-    createElementVNode("span", _hoisted_2$3, toDisplayString(_ctx.$i18n.locale), 1 /* TEXT */),
-    createElementVNode("span", _hoisted_3$2, toDisplayString(_ctx.currentUserEmail), 1 /* TEXT */)
+function render$7(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
+    createElementVNode("span", _hoisted_2$4, toDisplayString(_ctx.$i18n.locale), 1 /* TEXT */),
+    createElementVNode("span", _hoisted_3$3, toDisplayString(_ctx.currentUserEmail), 1 /* TEXT */)
   ]))
 }
 
-script$6.render = render$6;
-script$6.__file = "src/RightContent.vue";
+script$7.render = render$7;
+script$7.__file = "src/RightContent.vue";
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: "MobileMenuButton",
   props: {
     open: {
@@ -807,7 +807,7 @@ var script$5 = defineComponent({
   }
 });
 
-const _hoisted_1$4 = /*#__PURE__*/createElementVNode("svg", {
+const _hoisted_1$5 = /*#__PURE__*/createElementVNode("svg", {
   class: "block h-6 w-6",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -821,29 +821,29 @@ const _hoisted_1$4 = /*#__PURE__*/createElementVNode("svg", {
     d: "M4 6h16M4 12h16M4 18h16"
   })
 ], -1 /* HOISTED */);
-const _hoisted_2$2 = [
-  _hoisted_1$4
+const _hoisted_2$3 = [
+  _hoisted_1$5
 ];
 
-function render$5(_ctx, _cache) {
+function render$6(_ctx, _cache) {
   return (openBlock(), createElementBlock("button", {
     class: "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
     type: "button",
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, _hoisted_2$2))
+  }, _hoisted_2$3))
 }
 
-script$5.render = render$5;
-script$5.__file = "src/MobileMenuButton.vue";
+script$6.render = render$6;
+script$6.__file = "src/MobileMenuButton.vue";
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: "Navbar",
   components: {
-    NavbarTitle: script$7,
-    NavigationLinks: script$8,
-    MobileNavigationLinks: script$a,
-    RightContent: script$6,
-    MobileMenuButton: script$5,
+    NavbarTitle: script$8,
+    NavigationLinks: script$9,
+    MobileNavigationLinks: script$b,
+    RightContent: script$7,
+    MobileMenuButton: script$6,
   },
   data() {
     return {
@@ -877,22 +877,22 @@ var script$4 = defineComponent({
   }
 });
 
-const _hoisted_1$3 = { class: "bg-gray-800" };
-const _hoisted_2$1 = { class: "max-w-7xl mx-auto px-2 sm:px-6 lg:px-8" };
-const _hoisted_3$1 = { class: "relative flex items-center justify-between h-16" };
+const _hoisted_1$4 = { class: "bg-gray-800" };
+const _hoisted_2$2 = { class: "max-w-7xl mx-auto px-2 sm:px-6 lg:px-8" };
+const _hoisted_3$2 = { class: "relative flex items-center justify-between h-16" };
 const _hoisted_4 = { class: "absolute inset-y-0 left-0 flex items-center sm:hidden" };
 const _hoisted_5 = { class: "flex-1 flex items-center justify-center sm:items-stretch sm:justify-start" };
 
-function render$4(_ctx, _cache) {
+function render$5(_ctx, _cache) {
   const _component_mobile_menu_button = resolveComponent("mobile-menu-button");
   const _component_navbar_title = resolveComponent("navbar-title");
   const _component_navigation_links = resolveComponent("navigation-links");
   const _component_right_content = resolveComponent("right-content");
   const _component_mobile_navigation_links = resolveComponent("mobile-navigation-links");
 
-  return (openBlock(), createElementBlock("nav", _hoisted_1$3, [
-    createElementVNode("div", _hoisted_2$1, [
-      createElementVNode("div", _hoisted_3$1, [
+  return (openBlock(), createElementBlock("nav", _hoisted_1$4, [
+    createElementVNode("div", _hoisted_2$2, [
+      createElementVNode("div", _hoisted_3$2, [
         createElementVNode("div", _hoisted_4, [
           createVNode(_component_mobile_menu_button, {
             onClick: _ctx.onMobileMenuClick,
@@ -921,25 +921,25 @@ function render$4(_ctx, _cache) {
   ]))
 }
 
-script$4.render = render$4;
-script$4.__file = "src/Navbar.vue";
+script$5.render = render$5;
+script$5.__file = "src/Navbar.vue";
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: "StyledTable"
 });
 
-const _hoisted_1$2 = { class: "w-full border-collapse" };
+const _hoisted_1$3 = { class: "w-full border-collapse" };
 
-function render$3(_ctx, _cache) {
-  return (openBlock(), createElementBlock("table", _hoisted_1$2, [
+function render$4(_ctx, _cache) {
+  return (openBlock(), createElementBlock("table", _hoisted_1$3, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
 
-script$3.render = render$3;
-script$3.__file = "src/StyledTable.vue";
+script$4.render = render$4;
+script$4.__file = "src/StyledTable.vue";
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: "Pagination",
   props: {
     previousLabel: String,
@@ -949,34 +949,34 @@ var script$2 = defineComponent({
     nextLink: String,
   },
   components: {
-    RegularButton: script$o
+    RegularButton: script$p
   }
 });
 
-const _hoisted_1$1 = { class: "flex justify-between mt-4" };
-const _hoisted_2 = ["href"];
-const _hoisted_3 = ["href"];
+const _hoisted_1$2 = { class: "flex justify-between mt-4" };
+const _hoisted_2$1 = ["href"];
+const _hoisted_3$1 = ["href"];
 
-function render$2(_ctx, _cache) {
+function render$3(_ctx, _cache) {
   const _component_regular_button = resolveComponent("regular-button");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
     (_ctx.showPrevious)
       ? (openBlock(), createElementBlock("a", {
           key: 0,
           href: _ctx.previousLink
         }, [
           createVNode(_component_regular_button, { text: _ctx.previousLabel }, null, 8 /* PROPS */, ["text"])
-        ], 8 /* PROPS */, _hoisted_2))
+        ], 8 /* PROPS */, _hoisted_2$1))
       : createCommentVNode("v-if", true),
     createElementVNode("a", { href: _ctx.nextLink }, [
       createVNode(_component_regular_button, { text: _ctx.nextLabel }, null, 8 /* PROPS */, ["text"])
-    ], 8 /* PROPS */, _hoisted_3)
+    ], 8 /* PROPS */, _hoisted_3$1)
   ]))
 }
 
-script$2.render = render$2;
-script$2.__file = "src/Pagination.vue";
+script$3.render = render$3;
+script$3.__file = "src/Pagination.vue";
 
 /*! image-blob-reduce 4.1.0 https://github.com/nodeca/image-blob-reduce @license MIT */
 function commonjsRequire (path) {
@@ -4573,7 +4573,7 @@ ImageBlobReduce.pica = pica;
 
 var imageBlobReduce = ImageBlobReduce;
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: "ResizeImageUpload",
   props: {
     id: {
@@ -4619,7 +4619,7 @@ var script$1 = defineComponent({
   },
 });
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_image_input = resolveComponent("image-input");
 
   return (openBlock(), createBlock(_component_image_input, {
@@ -4633,24 +4633,72 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8 /* PROPS */, ["id", "name", "required", "placeholder", "drop-placeholder", "label", "onUpdate"]))
 }
 
-script$1.render = render$1;
-script$1.__file = "src/ResizeImageUpload.vue";
+script$2.render = render$2;
+script$2.__file = "src/ResizeImageUpload.vue";
 
-var script = defineComponent({
+var script$1 = defineComponent({
   name: "Badge",
   props: {
     text: String,
   },
 });
 
-const _hoisted_1 = { class: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800" };
+const _hoisted_1$1 = { class: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 inline-block" };
+
+function render$1(_ctx, _cache) {
+  return (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.text), 1 /* TEXT */))
+}
+
+script$1.render = render$1;
+script$1.__file = "src/Badge.vue";
+
+var script = defineComponent({
+  name: "Modal",
+  emits: ['cancel', 'confirm'],
+  props: {
+    open: Boolean,
+  },
+  methods: {
+    onCancel(evt) {
+      this.$emit('cancel', evt);
+    },
+    onConfirm(evt) {
+      this.$emit('confirm', evt);
+    },
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "bg-slate-800 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0"
+};
+const _hoisted_2 = { class: "bg-white px-16 py-14 rounded-md text-center" };
+const _hoisted_3 = /*#__PURE__*/createElementVNode("h1", { class: "text-xl mb-4 font-bold text-slate-500" }, "Are you sure?", -1 /* HOISTED */);
 
 function render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.text), 1 /* TEXT */))
+  const _component_secondary_button = resolveComponent("secondary-button");
+  const _component_danger_button = resolveComponent("danger-button");
+
+  return (_ctx.open)
+    ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _hoisted_3,
+          createVNode(_component_secondary_button, {
+            onClick: _ctx.onCancel,
+            text: "No"
+          }, null, 8 /* PROPS */, ["onClick"]),
+          createVNode(_component_danger_button, {
+            class: "ml-2",
+            onClick: _ctx.onConfirm,
+            text: "Yes"
+          }, null, 8 /* PROPS */, ["onClick"])
+        ])
+      ]))
+    : createCommentVNode("v-if", true)
 }
 
 script.render = render;
-script.__file = "src/Badge.vue";
+script.__file = "src/Modal.vue";
 
-export { script as Badge, script$l as Card, script$j as CardBody, script$d as CardGrid, script$k as CardImage, script$g as CheckBoxInput, script$c as Container, script$m as DangerButton, script$e as ImageInput, script$r as Loading, script$4 as Navbar, script$f as NumberInput, script$2 as Pagination, script$o as RegularButton, script$q as ResetButton, script$1 as ResizeImageUpload, script$n as SecondaryButton, script$s as SectionTitle, script$i as Selector, script$3 as StyledTable, script$p as SubmitButton, script$h as TextInput };
+export { script$1 as Badge, script$m as Card, script$k as CardBody, script$e as CardGrid, script$l as CardImage, script$h as CheckBoxInput, script$d as Container, script$n as DangerButton, script$f as ImageInput, script$s as Loading, script as Modal, script$5 as Navbar, script$g as NumberInput, script$3 as Pagination, script$p as RegularButton, script$r as ResetButton, script$2 as ResizeImageUpload, script$o as SecondaryButton, script$t as SectionTitle, script$j as Selector, script$4 as StyledTable, script$q as SubmitButton, script$i as TextInput };
 //# sourceMappingURL=index.esm.js.map