@dcrackel/hematournamentui 1.0.4 → 1.0.5

package/dist/HemaTouranmentUI-lib.es.js

@@ -1,10 +1,10 @@
-import { withDirectives as I, openBlock as s, createElementBlock as c, vModelText as Q, reactive as p, computed as y, normalizeClass as h, toDisplayString as k, resolveComponent as g, createCommentVNode as w, createVNode as d, createElementVNode as i, normalizeStyle as D, Fragment as B, renderList as x, createBlock as f, resolveDynamicComponent as E } from "vue";
-const A = (e, t) => {
+import { withDirectives as D, openBlock as i, createElementBlock as u, vModelText as S, reactive as b, computed as h, normalizeClass as B, toDisplayString as k, resolveComponent as m, createCommentVNode as _, createVNode as d, createElementVNode as c, normalizeStyle as E, Fragment as x, renderList as p, createBlock as f, resolveDynamicComponent as v } from "vue";
+const g = (e, t) => {
   const r = e.__vccOpts || e;
-  for (const [o, u] of t)
-    r[o] = u;
+  for (const [l, o] of t)
+    r[l] = o;
   return r;
-}, S = {
+}, Y = {
   name: "BaseInput",
   props: {
     placeholder: {
@@ -34,18 +34,18 @@ const A = (e, t) => {
       }, 300);
     }
   }
-}, Y = ["placeholder"];
-function v(e, t, r, o, u, n) {
-  return I((s(), c("input", {
+}, M = ["placeholder"];
+function G(e, t, r, l, o, a) {
+  return D((i(), u("input", {
     class: "appearance-none focus:outline-none w-full text-sm",
     placeholder: r.placeholder,
-    "onUpdate:modelValue": t[0] || (t[0] = (a) => u.internalValue = a),
-    onInput: t[1] || (t[1] = (...a) => n.onInput && n.onInput(...a))
-  }, null, 40, Y)), [
-    [Q, u.internalValue]
+    "onUpdate:modelValue": t[0] || (t[0] = (n) => o.internalValue = n),
+    onInput: t[1] || (t[1] = (...n) => a.onInput && a.onInput(...n))
+  }, null, 40, M)), [
+    [S, o.internalValue]
   ]);
 }
-const M = /* @__PURE__ */ A(S, [["render", v]]), G = {
+const I = /* @__PURE__ */ g(Y, [["render", G]]), U = {
   name: "BaseText",
   props: {
     text: {
@@ -91,8 +91,8 @@ const M = /* @__PURE__ */ A(S, [["render", v]]), G = {
     }
   },
   setup(e) {
-    return e = p(e), {
-      classes: y(() => {
+    return e = b(e), {
+      classes: h(() => {
         let t = "inline-block font-sans";
         switch (e.color) {
           case "neutral":
@@ -191,14 +191,14 @@ const M = /* @__PURE__ */ A(S, [["render", v]]), G = {
     };
   }
 };
-function q(e, t, r, o, u, n) {
-  return s(), c("div", {
-    class: h(o.classes)
+function q(e, t, r, l, o, a) {
+  return i(), u("div", {
+    class: B(l.classes)
   }, k(r.text), 3);
 }
-const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
+const y = /* @__PURE__ */ g(U, [["render", q]]), T = {
   name: "base-button",
-  components: { BaseText: b },
+  components: { BaseText: y },
   props: {
     label: {
       type: String,
@@ -229,8 +229,8 @@ const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    return e = p(e), {
-      textColor: y(() => {
+    return e = b(e), {
+      textColor: h(() => {
         switch (e.type) {
           case "primary":
             return "primary";
@@ -246,7 +246,7 @@ const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
             return "neutral";
         }
       }),
-      classes: y(() => {
+      classes: h(() => {
         let r = "px-2.5 mx-1 inline-flex ";
         switch (e.type) {
           case "primary":
@@ -288,33 +288,33 @@ const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
         return r;
       }),
       onClick() {
-        console.log("Click!"), t("click");
+        t("click");
       }
     };
   }
 };
-function V(e, t, r, o, u, n) {
-  const a = g("BaseText");
-  return s(), c("button", {
+function $(e, t, r, l, o, a) {
+  const n = m("BaseText");
+  return i(), u("button", {
     "data-testid": "base-button",
-    class: h(o.classes),
+    class: B(l.classes),
     type: "button",
-    onClick: t[0] || (t[0] = (...l) => o.onClick && o.onClick(...l))
+    onClick: t[0] || (t[0] = (...s) => l.onClick && l.onClick(...s))
   }, [
-    r.iconClass ? (s(), c("i", {
+    r.iconClass ? (i(), u("i", {
       key: 0,
-      class: h([r.iconClass, "mr-2 hover:text-highlightedClass"])
-    }, null, 2)) : w("", !0),
-    d(a, {
+      class: B([r.iconClass, "mr-2 hover:text-highlightedClass"])
+    }, null, 2)) : _("", !0),
+    d(n, {
       "data-testid": "base-text",
-      color: o.textColor,
+      color: l.textColor,
       size: r.size,
       text: r.label,
       weight: "normal"
     }, null, 8, ["color", "size", "text"])
   ], 2);
 }
-const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
+const C = /* @__PURE__ */ g(T, [["render", $]]), V = {
   name: "base-tag",
   props: {
     label: {
@@ -329,8 +329,8 @@ const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
     }
   },
   setup(e) {
-    return e = p(e), {
-      classes: y(() => {
+    return e = b(e), {
+      classes: h(() => {
         let t = "cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";
         switch (e.backgroundColor) {
           case "primary":
@@ -357,12 +357,12 @@ const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
     };
   }
 };
-function T(e, t, r, o, u, n) {
-  return s(), c("div", {
-    class: h(o.classes)
+function F(e, t, r, l, o, a) {
+  return i(), u("div", {
+    class: B(l.classes)
   }, k(r.label), 3);
 }
-const W = /* @__PURE__ */ A($, [["render", T]]), C = "data:image/png;base64,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", K = {
+const W = /* @__PURE__ */ g(V, [["render", F]]), w = "data:image/png;base64,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", K = {
   name: "tournament-card-header",
   components: {
     BaseTag: W
@@ -371,7 +371,7 @@ const W = /* @__PURE__ */ A($, [["render", T]]), C = "data:image/png;base64,iVBO
     artwork: {
       type: String,
       required: !0,
-      default: C
+      default: w
     },
     tags: {
       type: Array,
@@ -380,31 +380,31 @@ const W = /* @__PURE__ */ A($, [["render", T]]), C = "data:image/png;base64,iVBO
   },
   computed: {
     backgroundStyle() {
-      return `background-image: url('${this.artwork || C}');`;
+      return `background-image: url('${this.artwork || w}');`;
     }
   }
-}, H = { class: "rounded-t-xl w-full" }, J = { class: "flex flex-row" };
-function j(e, t, r, o, u, n) {
-  const a = g("BaseTag");
-  return s(), c("div", H, [
-    i("div", {
-      style: D(n.backgroundStyle),
+}, H = { class: "rounded-t-xl w-full" }, P = { class: "flex flex-row" };
+function j(e, t, r, l, o, a) {
+  const n = m("BaseTag");
+  return i(), u("div", H, [
+    c("div", {
+      style: E(a.backgroundStyle),
       class: "h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"
     }, [
-      i("div", J, [
-        (s(!0), c(B, null, x(r.tags, (l) => (s(), f(a, {
-          key: l,
-          label: l
+      c("div", P, [
+        (i(!0), u(x, null, p(r.tags, (s) => (i(), f(n, {
+          key: s,
+          label: s
         }, null, 8, ["label"]))), 128))
       ])
     ], 4)
   ]);
 }
-const F = /* @__PURE__ */ A(K, [["render", j]]), O = {
+const J = /* @__PURE__ */ g(K, [["render", j]]), z = {
   name: "tournament-card-details",
   components: {
-    BaseButton: _,
-    BaseText: b
+    BaseButton: C,
+    BaseText: y
   },
   props: {
     detail: {
@@ -418,38 +418,38 @@ const F = /* @__PURE__ */ A(K, [["render", j]]), O = {
       })
     }
   }
-}, P = { class: "flex flex-col w-full pt-4 pb-3 px-3" }, z = { class: "mt-4 flex flex-col" }, L = { class: "flex flex-row w-full justify-end" };
-function N(e, t, r, o, u, n) {
-  const a = g("BaseText"), l = g("BaseButton");
-  return s(), c("div", P, [
-    d(a, {
+}, O = { class: "flex flex-col w-full pt-4 pb-3 px-3" }, L = { class: "mt-4 flex flex-col" }, N = { class: "flex flex-row w-full justify-end" };
+function Z(e, t, r, l, o, a) {
+  const n = m("BaseText"), s = m("BaseButton");
+  return i(), u("div", O, [
+    d(n, {
       text: r.detail.name,
       color: "primary",
       size: "xl",
       weight: "semi-bold"
     }, null, 8, ["text"]),
-    d(a, {
+    d(n, {
       text: r.detail.location,
       color: "primary",
       size: "sm",
       weight: "normal"
     }, null, 8, ["text"]),
-    i("div", z, [
-      d(a, {
+    c("div", L, [
+      d(n, {
         text: `${r.detail.date}`,
         color: "primaryHighlight",
         size: "sm",
         weight: "light"
       }, null, 8, ["text"]),
-      d(a, {
+      d(n, {
         text: `${r.detail.closes}`,
         color: "primaryHighlight",
         size: "sm",
         weight: "light"
       }, null, 8, ["text"])
     ]),
-    i("div", L, [
-      d(l, {
+    c("div", N, [
+      d(s, {
         label: "Edit",
         class: "mt-2",
         primary: ""
@@ -457,11 +457,11 @@ function N(e, t, r, o, u, n) {
     ])
   ]);
 }
-const Z = /* @__PURE__ */ A(O, [["render", N]]), R = {
+const R = /* @__PURE__ */ g(z, [["render", Z]]), X = {
   name: "TournamentCard",
   components: {
-    TournamentHeader: F,
-    TournamentDetail: Z
+    TournamentHeader: J,
+    TournamentDetail: R
   },
   props: {
     detail: {
@@ -478,20 +478,20 @@ const Z = /* @__PURE__ */ A(O, [["render", N]]), R = {
       })
     }
   }
-}, X = { class: "rounded-xl w-72 shadow" };
-function ee(e, t, r, o, u, n) {
-  const a = g("TournamentHeader"), l = g("TournamentDetail");
-  return s(), c("div", X, [
-    d(a, {
+}, ee = { class: "rounded-xl w-72 shadow" };
+function te(e, t, r, l, o, a) {
+  const n = m("TournamentHeader"), s = m("TournamentDetail");
+  return i(), u("div", ee, [
+    d(n, {
       artwork: r.detail.artwork,
       tags: r.detail.tags
     }, null, 8, ["artwork", "tags"]),
-    d(l, { detail: r.detail }, null, 8, ["detail"])
+    d(s, { detail: r.detail }, null, 8, ["detail"])
   ]);
 }
-const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
+const re = /* @__PURE__ */ g(X, [["render", te]]), ae = {
   name: "DropDownMenu",
-  components: { BaseText: b },
+  components: { BaseText: y },
   props: {
     label: {
       type: String
@@ -517,54 +517,54 @@ const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
       this.isDropDownOpen = !this.isDropDownOpen;
     }
   }
-}, ae = { class: "flex flex-row" }, ne = /* @__PURE__ */ i("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), le = {
+}, ne = { class: "flex flex-row" }, le = /* @__PURE__ */ c("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), se = {
   key: 0,
   class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"
-}, se = ["onClick"];
-function oe(e, t, r, o, u, n) {
-  const a = g("BaseText");
-  return s(), c("div", ae, [
-    i("span", null, [
-      i("div", {
+}, oe = ["onClick"];
+function ie(e, t, r, l, o, a) {
+  const n = m("BaseText");
+  return i(), u("div", ne, [
+    c("span", null, [
+      c("div", {
         class: "z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",
-        onClick: t[0] || (t[0] = (l) => n.handleDropDown())
+        onClick: t[0] || (t[0] = (s) => a.handleDropDown())
       }, [
-        d(a, {
+        d(n, {
           text: r.label,
           color: "quaternary",
           size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        d(a, {
+        d(n, {
           text: r.selectedItem.text,
           color: "secondary",
           size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        ne
+        le
       ]),
-      e.isDropDownOpen ? (s(), c("div", le, [
-        (s(!0), c(B, null, x(r.items, (l) => (s(), c("a", {
-          key: l.id,
-          onClick: (m) => n.handleClick(l),
+      e.isDropDownOpen ? (i(), u("div", se, [
+        (i(!0), u(x, null, p(r.items, (s) => (i(), u("a", {
+          key: s.id,
+          onClick: (A) => a.handleClick(s),
           class: "hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"
         }, [
-          d(a, {
-            text: l.text,
+          d(n, {
+            text: s.text,
             color: "primary",
             size: "xs",
             weight: "normal"
           }, null, 8, ["text"])
-        ], 8, se))), 128))
-      ])) : w("", !0)
+        ], 8, oe))), 128))
+      ])) : _("", !0)
     ])
   ]);
 }
-const ie = /* @__PURE__ */ A(re, [["render", oe]]), ce = {
+const Q = /* @__PURE__ */ g(ae, [["render", ie]]), ce = {
   name: "FilterAndSortBar",
   components: {
-    DropDownMenu: ie,
-    BaseInput: M
+    DropDownMenu: Q,
+    BaseInput: I
   },
   data() {
     return {
@@ -589,35 +589,97 @@ const ie = /* @__PURE__ */ A(re, [["render", oe]]), ce = {
       this.$emit("sort", e), console.log("handleSelectedItem", e);
     }
   }
-}, de = { class: "flex flex-row w-full justify-between" }, ue = { class: "rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4" }, ge = /* @__PURE__ */ i("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
-function Ae(e, t, r, o, u, n) {
-  const a = g("BaseInput"), l = g("DropDownMenu");
-  return s(), c("section", de, [
-    i("div", ue, [
-      ge,
-      d(a, {
+}, de = { class: "flex flex-row w-full justify-between" }, ue = { class: "rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4" }, me = /* @__PURE__ */ c("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
+function ge(e, t, r, l, o, a) {
+  const n = m("BaseInput"), s = m("DropDownMenu");
+  return i(), u("section", de, [
+    c("div", ue, [
+      me,
+      d(n, {
         placeholder: "Search on Name, Location, or Date",
         class: "text-quaternary",
-        value: u.filterText,
-        "onUpdate:value": n.handleFilter
+        value: o.filterText,
+        "onUpdate:value": a.handleFilter
       }, null, 8, ["value", "onUpdate:value"])
     ]),
-    i("div", null, [
-      d(l, {
+    c("div", null, [
+      d(s, {
         label: r.label,
         items: r.items,
         selectedItem: r.selectedItem,
-        "onUpdate:selectedItem": n.handleSelectedItem
+        "onUpdate:selectedItem": a.handleSelectedItem
       }, null, 8, ["label", "items", "selectedItem", "onUpdate:selectedItem"])
     ])
   ]);
 }
-const me = /* @__PURE__ */ A(ce, [["render", Ae]]), ye = {
+const Ae = /* @__PURE__ */ g(ce, [["render", ge]]), ye = {
+  name: "FilterUpcomingPast",
+  components: {
+    BaseText: y,
+    BaseButton: C,
+    DropDownMenu: Q,
+    BaseInput: I
+  },
+  props: {
+    selected: {
+      type: String,
+      default: "All"
+    }
+  },
+  data() {
+    return {
+      localSelected: this.selected
+    };
+  },
+  methods: {
+    handleTimeFrame(e) {
+      this.$emit("timeFrame", e), this.localSelected = e;
+    }
+  }
+}, he = { class: "flex flex-row w-full justify-between" }, Be = { class: "rounded-lg w-3/4" }, xe = { class: "flex flex-row h-8 w-1/4 justify-end" };
+function pe(e, t, r, l, o, a) {
+  const n = m("BaseText"), s = m("BaseButton");
+  return i(), u("section", he, [
+    c("div", Be, [
+      d(n, {
+        text: "Tournament",
+        color: "primary",
+        size: "2xl",
+        weight: "normal"
+      })
+    ]),
+    c("div", xe, [
+      d(s, {
+        label: "All",
+        color: "primary",
+        size: "sm",
+        selected: o.localSelected === "All",
+        onClick: t[0] || (t[0] = (A) => a.handleTimeFrame("ALL"))
+      }, null, 8, ["selected"]),
+      d(s, {
+        label: "Upcoming",
+        color: "primary",
+        size: "sm",
+        selected: o.localSelected === "Upcoming",
+        onClick: t[1] || (t[1] = (A) => a.handleTimeFrame("Upcoming"))
+      }, null, 8, ["selected"]),
+      d(s, {
+        label: "Past",
+        color: "primary",
+        size: "sm",
+        selected: o.localSelected === "Past",
+        onClick: t[2] || (t[2] = (A) => a.handleTimeFrame("Past"))
+      }, null, 8, ["selected"])
+    ])
+  ]);
+}
+const be = /* @__PURE__ */ g(ye, [["render", pe]]), fe = {
   name: "GridContainer",
   components: {
-    FilterAndSortBar: me,
-    BaseText: b,
-    TournamentCard: te
+    FilterAndSortBar: Ae,
+    BaseText: y,
+    TournamentCard: re,
+    FilterUpcomingPast: be
   },
   props: {
     items: {
@@ -640,29 +702,39 @@ const me = /* @__PURE__ */ A(ce, [["render", Ae]]), ye = {
   data() {
     return {
       filterOn: "",
-      sortCriteria: "Date"
+      sortCriteria: "Date",
+      selectedTimeFrame: "All"
     };
   },
   computed: {
     filteredItems() {
       let e = this.items;
       if (this.filterOn.trim()) {
-        const t = this.filterOn.toLowerCase();
+        const r = this.filterOn.toLowerCase();
         e = e.filter(
-          (r) => Object.values(r).some(
-            (o) => typeof o == "string" && o.toLowerCase().includes(t)
+          (l) => Object.values(l).some(
+            (o) => typeof o == "string" && o.toLowerCase().includes(r)
           )
         );
       }
+      const t = /* @__PURE__ */ new Date();
+      switch (t.setHours(0, 0, 0, 0), this.selectedTimeFrame) {
+        case "Upcoming":
+          e = e.filter((r) => new Date(r.date) >= t);
+          break;
+        case "Past":
+          e = e.filter((r) => new Date(r.date) < t);
+          break;
+      }
       switch (this.sortCriteria) {
         case "Date":
-          e = [...e].sort((t, r) => new Date(t.date) - new Date(r.date));
+          e = [...e].sort((r, l) => new Date(r.date) - new Date(l.date));
           break;
         case "Name":
-          e = [...e].sort((t, r) => t.name.localeCompare(r.name));
+          e = [...e].sort((r, l) => r.name.localeCompare(l.name));
           break;
         case "Location":
-          e = [...e].sort((t, r) => t.location.localeCompare(r.location));
+          e = [...e].sort((r, l) => r.location.localeCompare(l.location));
           break;
       }
       return e;
@@ -674,41 +746,42 @@ const me = /* @__PURE__ */ A(ce, [["render", Ae]]), ye = {
     },
     handleSort(e) {
       this.sortCriteria = e.text;
+    },
+    handleTimeFrameChange(e) {
+      this.selectedTimeFrame = e;
     }
   }
-}, he = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, Be = { class: "w-full text-center mb-9" }, xe = { class: "my-4" }, be = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full" };
-function pe(e, t, r, o, u, n) {
-  const a = g("BaseText"), l = g("FilterAndSortBar");
-  return s(), c("div", he, [
-    i("h1", Be, [
-      d(a, {
-        color: "primaryHighlight",
-        size: "2xl",
-        text: "Upcoming Tournaments",
-        weight: "normal"
-      })
+}, Ce = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, we = { class: "my-4" }, ke = { class: "my-4" }, _e = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full" };
+function Ie(e, t, r, l, o, a) {
+  const n = m("FilterUpcomingPast"), s = m("FilterAndSortBar");
+  return i(), u("div", Ce, [
+    c("div", we, [
+      d(n, {
+        selected: o.selectedTimeFrame,
+        onTimeFrame: a.handleTimeFrameChange
+      }, null, 8, ["selected", "onTimeFrame"])
     ]),
-    i("div", xe, [
-      d(l, {
+    c("div", ke, [
+      d(s, {
         items: r.dropdownItems,
         label: r.label,
         selectedItem: r.selectedItem,
-        onFilterbar: n.handleFilter,
-        onSort: n.handleSort
+        onFilterbar: a.handleFilter,
+        onSort: a.handleSort
       }, null, 8, ["items", "label", "selectedItem", "onFilterbar", "onSort"])
     ]),
-    i("div", be, [
-      (s(!0), c(B, null, x(n.filteredItems, (m) => (s(), c("div", {
-        key: m.id
+    c("div", _e, [
+      (i(!0), u(x, null, p(a.filteredItems, (A) => (i(), u("div", {
+        key: A.id
       }, [
-        (s(), f(E(r.component), { detail: m }, null, 8, ["detail"]))
+        (i(), f(v(r.component), { detail: A }, null, 8, ["detail"]))
       ]))), 128))
     ])
   ]);
 }
-const Ee = /* @__PURE__ */ A(ye, [["render", pe]]), fe = {
+const Ue = /* @__PURE__ */ g(fe, [["render", Ie]]), Qe = {
   name: "AdminLeftMenu",
-  components: { BaseButton: _ },
+  components: { BaseButton: C },
   props: {
     buttons: {
       type: Array,
@@ -720,59 +793,59 @@ const Ee = /* @__PURE__ */ A(ye, [["render", pe]]), fe = {
       this.$emit("button-click", e);
     }
   }
-}, Ce = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, ke = /* @__PURE__ */ i("section", { class: "h-28 border-b border-neutral" }, [
-  /* @__PURE__ */ i("div", { class: "flex flex-col justify-center h-28" }, [
-    /* @__PURE__ */ i("div", { class: "ml-8" }, [
-      /* @__PURE__ */ i("img", {
+}, De = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, Se = /* @__PURE__ */ c("section", { class: "h-28 border-b border-neutral" }, [
+  /* @__PURE__ */ c("div", { class: "flex flex-col justify-center h-28" }, [
+    /* @__PURE__ */ c("div", { class: "ml-8" }, [
+      /* @__PURE__ */ c("img", {
         class: "w-32",
         src: "https://ferrotas.com/assets/ferrotas-white-small-720502db.png",
         alt: "logo"
       })
     ])
   ])
-], -1), we = { class: "flex flex-col p-2 h-full" }, _e = { class: "flex flex-col justify-end p-2 flex-grow" }, Ie = { class: "border-t border-neutral pt-2" };
-function Qe(e, t, r, o, u, n) {
-  const a = g("BaseButton");
-  return s(), c("div", Ce, [
-    ke,
-    i("section", we, [
-      (s(!0), c(B, null, x(r.buttons, (l) => (s(), f(a, {
-        label: l.label,
+], -1), Ee = { class: "flex flex-col p-2 h-full" }, ve = { class: "flex flex-col justify-end p-2 flex-grow" }, Ye = { class: "border-t border-neutral pt-2" };
+function Me(e, t, r, l, o, a) {
+  const n = m("BaseButton");
+  return i(), u("div", De, [
+    Se,
+    c("section", Ee, [
+      (i(!0), u(x, null, p(r.buttons, (s) => (i(), f(n, {
+        label: s.label,
         iconClass: "fa-solid fa-trophy text-white",
         type: "admin",
         hover: "admin",
-        onClick: (m) => n.handleButtonClick(l)
+        onClick: (A) => a.handleButtonClick(s)
       }, null, 8, ["label", "onClick"]))), 256))
     ]),
-    i("section", _e, [
-      i("div", Ie, [
-        d(a, {
+    c("section", ve, [
+      c("div", Ye, [
+        d(n, {
           iconClass: "fa-solid fa-circle-user text-textSecondary",
           label: "Account",
           type: "adminSecondary",
-          onClick: t[0] || (t[0] = (l) => n.handleButtonClick(e.button))
+          onClick: t[0] || (t[0] = (s) => a.handleButtonClick(e.button))
         }),
-        d(a, {
+        d(n, {
           iconClass: "fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",
           label: "Log Out",
           type: "adminSecondary",
-          onClick: t[1] || (t[1] = (l) => n.handleButtonClick(e.button))
+          onClick: t[1] || (t[1] = (s) => a.handleButtonClick(e.button))
         })
       ])
     ])
   ]);
 }
-const Se = /* @__PURE__ */ A(fe, [["render", Qe]]);
+const qe = /* @__PURE__ */ g(Qe, [["render", Me]]);
 export {
-  Se as AdminLeftMenu,
-  _ as BaseButton,
-  M as BaseInput,
+  qe as AdminLeftMenu,
+  C as BaseButton,
+  I as BaseInput,
   W as BaseTag,
-  b as BaseText,
-  ie as DropDownMenu,
-  me as FilterAndSortBar,
-  Ee as GridContainer,
-  te as TournamentCard,
-  Z as TournamentCardDetails,
-  F as TournamentCardHeader
+  y as BaseText,
+  Q as DropDownMenu,
+  Ae as FilterAndSortBar,
+  Ue as GridContainer,
+  re as TournamentCard,
+  R as TournamentCardDetails,
+  J as TournamentCardHeader
 };

package/dist/HemaTouranmentUI-lib.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.HemaTournamentUI={},c.Vue))})(this,function(c,e){"use strict";const d=(t,r)=>{const a=t.__vccOpts||t;for(const[s,i]of r)a[s]=i;return a},k={name:"BaseInput",props:{placeholder:{type:String,default:""},value:{type:String,default:""}},data(){return{internalValue:this.value,timeout:null}},watch:{value(t){this.internalValue=t}},methods:{onInput(){clearTimeout(this.timeout),this.timeout=setTimeout(()=>{console.log("this.internalValue",this.internalValue),this.$emit("update:value",this.internalValue)},300)}}},C=["placeholder"];function w(t,r,a,s,i,l){return e.withDirectives((e.openBlock(),e.createElementBlock("input",{class:"appearance-none focus:outline-none w-full text-sm",placeholder:a.placeholder,"onUpdate:modelValue":r[0]||(r[0]=n=>i.internalValue=n),onInput:r[1]||(r[1]=(...n)=>l.onInput&&l.onInput(...n))},null,40,C)),[[e.vModelText,i.internalValue]])}const B=d(k,[["render",w]]),_={name:"BaseText",props:{text:{type:String,required:!0,default:""},weight:{type:String,default:"normal",validator:function(t){return["light","normal","medium","semi-bold","bold","extra-bold"].indexOf(t)!==-1}},size:{type:String,default:"small",validator:function(t){return["xs","sm","md","lg","xl","2xl","3xl"].indexOf(t)!==-1}},color:{type:String,default:"primary",validator:function(t){return["neutral","quaternary","tertiary","secondary","primary","bright","primaryHighlight"].indexOf(t)!==-1}},hoverColor:{type:String,default:"none",validator:function(t){return["primary","secondary","tertiary","quaternary","neutral","bright","none"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="inline-block font-sans";switch(t.color){case"neutral":r+=" text-neutral";break;case"tertiary":r+=" text-tertiary";break;case"secondary":r+=" text-secondary";break;case"quaternary":r+=" text-quaternary";break;case"primary":r+=" text-primary";break;case"primaryHighlight":r+=" text-primaryHighlight";break;case"bright":r+=" text-bright";break}switch(t.hoverColor){case"neutral":r+=" hover:text-neutral";break;case"tertiary":r+=" hover:text-tertiary";break;case"secondary":r+=" hover:text-secondary";break;case"quaternary":r+=" hover:text-quaternary";break;case"primary":r+=" hover:text-primary";break;case"bright":r+=" hover:text-bright";break;case"none":r+="";break}switch(t.weight){case"light":r+=" font-light";break;case"normal":r+=" font-normal";break;case"medium":r+=" font-medium";break;case"semi-bold":r+=" font-semibold";break;case"bold":r+=" font-bold";break;case"extra-bold":r+=" font-extrabold";break}switch(t.size){case"xs":r+=" text-xs";break;case"sm":r+=" text-sm";break;case"md":r+=" text-md";break;case"lg":r+=" text-lg";break;case"xl":r+=" text-xl";break;case"2xl":r+=" text-2xl";break;case"3xl":r+=" text-3xl";break;default:r+=" text-sm";break}return r})}}};function I(t,r,a,s,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.classes)},e.toDisplayString(a.text),3)}const m=d(_,[["render",I]]),E={name:"base-button",components:{BaseText:m},props:{label:{type:String,required:!0},iconClass:{type:String,default:null},size:{type:String,validator:function(t){return["xs","sm","md","lg","xl"].indexOf(t)!==-1},default:"sm"},type:{type:String,default:"primary",validator:function(t){return["primary","secondary","tertiary","bright","admin","adminSecondary"].indexOf(t)!==-1}},selected:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:r}){return t=e.reactive(t),{textColor:e.computed(()=>{switch(t.type){case"primary":return"primary";case"secondary":return"secondary";case"tertiary":return"tertiary";case"bright":return"bright";case"admin":return"neutral";case"adminSecondary":return"neutral"}}),classes:e.computed(()=>{let a="px-2.5 mx-1 inline-flex ";switch(t.type){case"primary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary",t.selected?a+=" bg-dropdownSelect":a+=" bg-neutral";break;case"secondary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral",t.selected?a+=" bg-dropdownSelect":a+=" bg-secondary";break;case"tertiary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary",t.selected?a+=" bg-primary":a+=" bg-tertiary";break;case"bright":a+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral",t.selected?a+=" bg-primary":a+=" bg-bright";break;case"admin":a+=" py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight",t.selected,a+=" bg-primary";break;case"adminSecondary":a+=" py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral",t.selected?a+=" bg-primary":a+=" bg-tertiary";break}switch(t.size){case"xs":a+=" text-xs";break;case"sm":a+=" text-sm";break;case"md":a+=" text-md";break;case"lg":a+=" text-lg";break;case"xl":a+=" text-xl";break}return a}),onClick(){console.log("Click!"),r("click")}}}};function Q(t,r,a,s,i,l){const n=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("button",{"data-testid":"base-button",class:e.normalizeClass(s.classes),type:"button",onClick:r[0]||(r[0]=(...o)=>s.onClick&&s.onClick(...o))},[a.iconClass?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass([a.iconClass,"mr-2 hover:text-highlightedClass"])},null,2)):e.createCommentVNode("",!0),e.createVNode(n,{"data-testid":"base-text",color:s.textColor,size:a.size,text:a.label,weight:"normal"},null,8,["color","size","text"])],2)}const A=d(E,[["render",Q]]),D={name:"base-tag",props:{label:{type:String,required:!0},backgroundColor:{type:String,validator:function(t){return["primary","secondary","tertiary","neutral","bright"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";switch(t.backgroundColor){case"primary":r+=" bg-primary";break;case"secondary":r+=" bg-secondary";break;case"tertiary":r+=" bg-tertiary";break;case"neutral":r+=" bg-neutral";break;case"bright":r+=" bg-bright";break;default:r+=" bg-primary";break}return r})}}};function V(t,r,a,s,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.classes)},e.toDisplayString(a.label),3)}const y=d(D,[["render",V]]),h="data:image/png;base64,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",S={name:"tournament-card-header",components:{BaseTag:y},props:{artwork:{type:String,required:!0,default:h},tags:{type:Array,default:()=>[]}},computed:{backgroundStyle(){return`background-image: url('${this.artwork||h}');`}}},Y={class:"rounded-t-xl w-full"},M={class:"flex flex-row"};function G(t,r,a,s,i,l){const n=e.resolveComponent("BaseTag");return e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",{style:e.normalizeStyle(l.backgroundStyle),class:"h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"},[e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tags,o=>(e.openBlock(),e.createBlock(n,{key:o,label:o},null,8,["label"]))),128))])],4)])}const p=d(S,[["render",G]]),q={name:"tournament-card-details",components:{BaseButton:A,BaseText:m},props:{detail:{type:Object,required:!0,default:()=>({name:"",date:"",closes:"",location:""})}}},U={class:"flex flex-col w-full pt-4 pb-3 px-3"},N={class:"mt-4 flex flex-col"},T={class:"flex flex-row w-full justify-end"};function $(t,r,a,s,i,l){const n=e.resolveComponent("BaseText"),o=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",U,[e.createVNode(n,{text:a.detail.name,color:"primary",size:"xl",weight:"semi-bold"},null,8,["text"]),e.createVNode(n,{text:a.detail.location,color:"primary",size:"sm",weight:"normal"},null,8,["text"]),e.createElementVNode("div",N,[e.createVNode(n,{text:`${a.detail.date}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"]),e.createVNode(n,{text:`${a.detail.closes}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"])]),e.createElementVNode("div",T,[e.createVNode(o,{label:"Edit",class:"mt-2",primary:""})])])}const u=d(q,[["render",$]]),W={name:"TournamentCard",components:{TournamentHeader:p,TournamentDetail:u},props:{detail:{type:Object,required:!0,default:()=>({artwork:"",tags:[],name:"",description:"",date:"",closes:"",location:""})}}},K={class:"rounded-xl w-72 shadow"};function H(t,r,a,s,i,l){const n=e.resolveComponent("TournamentHeader"),o=e.resolveComponent("TournamentDetail");return e.openBlock(),e.createElementBlock("div",K,[e.createVNode(n,{artwork:a.detail.artwork,tags:a.detail.tags},null,8,["artwork","tags"]),e.createVNode(o,{detail:a.detail},null,8,["detail"])])}const b=d(W,[["render",H]]),F={name:"DropDownMenu",components:{BaseText:m},props:{label:{type:String},items:{type:Array,validator:t=>t.every(r=>typeof r.text=="string")},selectedItem:{type:Object,default:()=>({text:""}),validator:t=>typeof t.text=="string"}},data:()=>({isDropDownOpen:!1}),methods:{handleClick(t){this.isDropDownOpen=!1,this.$emit("update:selectedItem",t)},handleDropDown(){this.isDropDownOpen=!this.isDropDownOpen}}},j={class:"flex flex-row"},J=e.createElementVNode("i",{class:"fa-solid fa-chevron-down text-xs"},null,-1),L={key:0,class:"flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"},O=["onClick"];function P(t,r,a,s,i,l){const n=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("span",null,[e.createElementVNode("div",{class:"z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",onClick:r[0]||(r[0]=o=>l.handleDropDown())},[e.createVNode(n,{text:a.label,color:"quaternary",size:"sm",weight:"normal"},null,8,["text"]),e.createVNode(n,{text:a.selectedItem.text,color:"secondary",size:"sm",weight:"normal"},null,8,["text"]),J]),t.isDropDownOpen?(e.openBlock(),e.createElementBlock("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.items,o=>(e.openBlock(),e.createElementBlock("a",{key:o.id,onClick:g=>l.handleClick(o),class:"hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"},[e.createVNode(n,{text:o.text,color:"primary",size:"xs",weight:"normal"},null,8,["text"])],8,O))),128))])):e.createCommentVNode("",!0)])])}const x=d(F,[["render",P]]),z={name:"FilterAndSortBar",components:{DropDownMenu:x,BaseInput:B},data(){return{filterText:""}},props:{label:{type:String},items:{type:Array,default:()=>[]},selectedItem:null},methods:{handleFilter(t){this.$emit("filterbar",t)},handleSelectedItem(t){this.$emit("sort",t),console.log("handleSelectedItem",t)}}},Z={class:"flex flex-row w-full justify-between"},R={class:"rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4"},X=e.createElementVNode("i",{class:"fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1"},null,-1);function v(t,r,a,s,i,l){const n=e.resolveComponent("BaseInput"),o=e.resolveComponent("DropDownMenu");return e.openBlock(),e.createElementBlock("section",Z,[e.createElementVNode("div",R,[X,e.createVNode(n,{placeholder:"Search on Name, Location, or Date",class:"text-quaternary",value:i.filterText,"onUpdate:value":l.handleFilter},null,8,["value","onUpdate:value"])]),e.createElementVNode("div",null,[e.createVNode(o,{label:a.label,items:a.items,selectedItem:a.selectedItem,"onUpdate:selectedItem":l.handleSelectedItem},null,8,["label","items","selectedItem","onUpdate:selectedItem"])])])}const f=d(z,[["render",v]]),ee={name:"GridContainer",components:{FilterAndSortBar:f,BaseText:m,TournamentCard:b},props:{items:{type:Array,default:()=>[]},component:{type:String,required:!0},label:{type:String},dropdownItems:{type:Array,default:()=>[]},selectedItem:null},data(){return{filterOn:"",sortCriteria:"Date"}},computed:{filteredItems(){let t=this.items;if(this.filterOn.trim()){const r=this.filterOn.toLowerCase();t=t.filter(a=>Object.values(a).some(s=>typeof s=="string"&&s.toLowerCase().includes(r)))}switch(this.sortCriteria){case"Date":t=[...t].sort((r,a)=>new Date(r.date)-new Date(a.date));break;case"Name":t=[...t].sort((r,a)=>r.name.localeCompare(a.name));break;case"Location":t=[...t].sort((r,a)=>r.location.localeCompare(a.location));break}return t}},methods:{handleFilter(t){this.filterOn=t},handleSort(t){this.sortCriteria=t.text}}},te={class:"border border-dropdownSelect rounded-lg p-9 bg-neutral"},re={class:"w-full text-center mb-9"},ae={class:"my-4"},ne={class:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full"};function le(t,r,a,s,i,l){const n=e.resolveComponent("BaseText"),o=e.resolveComponent("FilterAndSortBar");return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("h1",re,[e.createVNode(n,{color:"primaryHighlight",size:"2xl",text:"Upcoming Tournaments",weight:"normal"})]),e.createElementVNode("div",ae,[e.createVNode(o,{items:a.dropdownItems,label:a.label,selectedItem:a.selectedItem,onFilterbar:l.handleFilter,onSort:l.handleSort},null,8,["items","label","selectedItem","onFilterbar","onSort"])]),e.createElementVNode("div",ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.filteredItems,g=>(e.openBlock(),e.createElementBlock("div",{key:g.id},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.component),{detail:g},null,8,["detail"]))]))),128))])])}const oe=d(ee,[["render",le]]),se={name:"AdminLeftMenu",components:{BaseButton:A},props:{buttons:{type:Array,default:()=>[]}},methods:{handleButtonClick(t){this.$emit("button-click",t)}}},ce={class:"bg-secondary w-64 h-screen flex flex-col justify-between"},ie=e.createElementVNode("section",{class:"h-28 border-b border-neutral"},[e.createElementVNode("div",{class:"flex flex-col justify-center h-28"},[e.createElementVNode("div",{class:"ml-8"},[e.createElementVNode("img",{class:"w-32",src:"https://ferrotas.com/assets/ferrotas-white-small-720502db.png",alt:"logo"})])])],-1),de={class:"flex flex-col p-2 h-full"},me={class:"flex flex-col justify-end p-2 flex-grow"},ge={class:"border-t border-neutral pt-2"};function Ae(t,r,a,s,i,l){const n=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",ce,[ie,e.createElementVNode("section",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.buttons,o=>(e.openBlock(),e.createBlock(n,{label:o.label,iconClass:"fa-solid fa-trophy text-white",type:"admin",hover:"admin",onClick:g=>l.handleButtonClick(o)},null,8,["label","onClick"]))),256))]),e.createElementVNode("section",me,[e.createElementVNode("div",ge,[e.createVNode(n,{iconClass:"fa-solid fa-circle-user text-textSecondary",label:"Account",type:"adminSecondary",onClick:r[0]||(r[0]=o=>l.handleButtonClick(t.button))}),e.createVNode(n,{iconClass:"fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",label:"Log Out",type:"adminSecondary",onClick:r[1]||(r[1]=o=>l.handleButtonClick(t.button))})])])])}const Be=d(se,[["render",Ae]]);c.AdminLeftMenu=Be,c.BaseButton=A,c.BaseInput=B,c.BaseTag=y,c.BaseText=m,c.DropDownMenu=x,c.FilterAndSortBar=f,c.GridContainer=oe,c.TournamentCard=b,c.TournamentCardDetails=u,c.TournamentCardHeader=p,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.HemaTournamentUI={},i.Vue))})(this,function(i,e){"use strict";const d=(t,r)=>{const n=t.__vccOpts||t;for(const[o,c]of r)n[o]=c;return n},k={name:"BaseInput",props:{placeholder:{type:String,default:""},value:{type:String,default:""}},data(){return{internalValue:this.value,timeout:null}},watch:{value(t){this.internalValue=t}},methods:{onInput(){clearTimeout(this.timeout),this.timeout=setTimeout(()=>{console.log("this.internalValue",this.internalValue),this.$emit("update:value",this.internalValue)},300)}}},C=["placeholder"];function w(t,r,n,o,c,a){return e.withDirectives((e.openBlock(),e.createElementBlock("input",{class:"appearance-none focus:outline-none w-full text-sm",placeholder:n.placeholder,"onUpdate:modelValue":r[0]||(r[0]=l=>c.internalValue=l),onInput:r[1]||(r[1]=(...l)=>a.onInput&&a.onInput(...l))},null,40,C)),[[e.vModelText,c.internalValue]])}const B=d(k,[["render",w]]),_={name:"BaseText",props:{text:{type:String,required:!0,default:""},weight:{type:String,default:"normal",validator:function(t){return["light","normal","medium","semi-bold","bold","extra-bold"].indexOf(t)!==-1}},size:{type:String,default:"small",validator:function(t){return["xs","sm","md","lg","xl","2xl","3xl"].indexOf(t)!==-1}},color:{type:String,default:"primary",validator:function(t){return["neutral","quaternary","tertiary","secondary","primary","bright","primaryHighlight"].indexOf(t)!==-1}},hoverColor:{type:String,default:"none",validator:function(t){return["primary","secondary","tertiary","quaternary","neutral","bright","none"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="inline-block font-sans";switch(t.color){case"neutral":r+=" text-neutral";break;case"tertiary":r+=" text-tertiary";break;case"secondary":r+=" text-secondary";break;case"quaternary":r+=" text-quaternary";break;case"primary":r+=" text-primary";break;case"primaryHighlight":r+=" text-primaryHighlight";break;case"bright":r+=" text-bright";break}switch(t.hoverColor){case"neutral":r+=" hover:text-neutral";break;case"tertiary":r+=" hover:text-tertiary";break;case"secondary":r+=" hover:text-secondary";break;case"quaternary":r+=" hover:text-quaternary";break;case"primary":r+=" hover:text-primary";break;case"bright":r+=" hover:text-bright";break;case"none":r+="";break}switch(t.weight){case"light":r+=" font-light";break;case"normal":r+=" font-normal";break;case"medium":r+=" font-medium";break;case"semi-bold":r+=" font-semibold";break;case"bold":r+=" font-bold";break;case"extra-bold":r+=" font-extrabold";break}switch(t.size){case"xs":r+=" text-xs";break;case"sm":r+=" text-sm";break;case"md":r+=" text-md";break;case"lg":r+=" text-lg";break;case"xl":r+=" text-xl";break;case"2xl":r+=" text-2xl";break;case"3xl":r+=" text-3xl";break;default:r+=" text-sm";break}return r})}}};function E(t,r,n,o,c,a){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.classes)},e.toDisplayString(n.text),3)}const g=d(_,[["render",E]]),I={name:"base-button",components:{BaseText:g},props:{label:{type:String,required:!0},iconClass:{type:String,default:null},size:{type:String,validator:function(t){return["xs","sm","md","lg","xl"].indexOf(t)!==-1},default:"sm"},type:{type:String,default:"primary",validator:function(t){return["primary","secondary","tertiary","bright","admin","adminSecondary"].indexOf(t)!==-1}},selected:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:r}){return t=e.reactive(t),{textColor:e.computed(()=>{switch(t.type){case"primary":return"primary";case"secondary":return"secondary";case"tertiary":return"tertiary";case"bright":return"bright";case"admin":return"neutral";case"adminSecondary":return"neutral"}}),classes:e.computed(()=>{let n="px-2.5 mx-1 inline-flex ";switch(t.type){case"primary":n+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary",t.selected?n+=" bg-dropdownSelect":n+=" bg-neutral";break;case"secondary":n+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral",t.selected?n+=" bg-dropdownSelect":n+=" bg-secondary";break;case"tertiary":n+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary",t.selected?n+=" bg-primary":n+=" bg-tertiary";break;case"bright":n+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral",t.selected?n+=" bg-primary":n+=" bg-bright";break;case"admin":n+=" py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight",t.selected,n+=" bg-primary";break;case"adminSecondary":n+=" py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral",t.selected?n+=" bg-primary":n+=" bg-tertiary";break}switch(t.size){case"xs":n+=" text-xs";break;case"sm":n+=" text-sm";break;case"md":n+=" text-md";break;case"lg":n+=" text-lg";break;case"xl":n+=" text-xl";break}return n}),onClick(){r("click")}}}};function Q(t,r,n,o,c,a){const l=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("button",{"data-testid":"base-button",class:e.normalizeClass(o.classes),type:"button",onClick:r[0]||(r[0]=(...s)=>o.onClick&&o.onClick(...s))},[n.iconClass?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass([n.iconClass,"mr-2 hover:text-highlightedClass"])},null,2)):e.createCommentVNode("",!0),e.createVNode(l,{"data-testid":"base-text",color:o.textColor,size:n.size,text:n.label,weight:"normal"},null,8,["color","size","text"])],2)}const A=d(I,[["render",Q]]),D={name:"base-tag",props:{label:{type:String,required:!0},backgroundColor:{type:String,validator:function(t){return["primary","secondary","tertiary","neutral","bright"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";switch(t.backgroundColor){case"primary":r+=" bg-primary";break;case"secondary":r+=" bg-secondary";break;case"tertiary":r+=" bg-tertiary";break;case"neutral":r+=" bg-neutral";break;case"bright":r+=" bg-bright";break;default:r+=" bg-primary";break}return r})}}};function V(t,r,n,o,c,a){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.classes)},e.toDisplayString(n.label),3)}const p=d(D,[["render",V]]),h="data:image/png;base64,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",S={name:"tournament-card-header",components:{BaseTag:p},props:{artwork:{type:String,required:!0,default:h},tags:{type:Array,default:()=>[]}},computed:{backgroundStyle(){return`background-image: url('${this.artwork||h}');`}}},Y={class:"rounded-t-xl w-full"},M={class:"flex flex-row"};function G(t,r,n,o,c,a){const l=e.resolveComponent("BaseTag");return e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",{style:e.normalizeStyle(a.backgroundStyle),class:"h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"},[e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tags,s=>(e.openBlock(),e.createBlock(l,{key:s,label:s},null,8,["label"]))),128))])],4)])}const u=d(S,[["render",G]]),U={name:"tournament-card-details",components:{BaseButton:A,BaseText:g},props:{detail:{type:Object,required:!0,default:()=>({name:"",date:"",closes:"",location:""})}}},q={class:"flex flex-col w-full pt-4 pb-3 px-3"},T={class:"mt-4 flex flex-col"},N={class:"flex flex-row w-full justify-end"};function $(t,r,n,o,c,a){const l=e.resolveComponent("BaseText"),s=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",q,[e.createVNode(l,{text:n.detail.name,color:"primary",size:"xl",weight:"semi-bold"},null,8,["text"]),e.createVNode(l,{text:n.detail.location,color:"primary",size:"sm",weight:"normal"},null,8,["text"]),e.createElementVNode("div",T,[e.createVNode(l,{text:`${n.detail.date}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"]),e.createVNode(l,{text:`${n.detail.closes}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"])]),e.createElementVNode("div",N,[e.createVNode(s,{label:"Edit",class:"mt-2",primary:""})])])}const b=d(U,[["render",$]]),F={name:"TournamentCard",components:{TournamentHeader:u,TournamentDetail:b},props:{detail:{type:Object,required:!0,default:()=>({artwork:"",tags:[],name:"",description:"",date:"",closes:"",location:""})}}},W={class:"rounded-xl w-72 shadow"};function K(t,r,n,o,c,a){const l=e.resolveComponent("TournamentHeader"),s=e.resolveComponent("TournamentDetail");return e.openBlock(),e.createElementBlock("div",W,[e.createVNode(l,{artwork:n.detail.artwork,tags:n.detail.tags},null,8,["artwork","tags"]),e.createVNode(s,{detail:n.detail},null,8,["detail"])])}const f=d(F,[["render",K]]),H={name:"DropDownMenu",components:{BaseText:g},props:{label:{type:String},items:{type:Array,validator:t=>t.every(r=>typeof r.text=="string")},selectedItem:{type:Object,default:()=>({text:""}),validator:t=>typeof t.text=="string"}},data:()=>({isDropDownOpen:!1}),methods:{handleClick(t){this.isDropDownOpen=!1,this.$emit("update:selectedItem",t)},handleDropDown(){this.isDropDownOpen=!this.isDropDownOpen}}},P={class:"flex flex-row"},j=e.createElementVNode("i",{class:"fa-solid fa-chevron-down text-xs"},null,-1),J={key:0,class:"flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"},z=["onClick"];function L(t,r,n,o,c,a){const l=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("span",null,[e.createElementVNode("div",{class:"z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",onClick:r[0]||(r[0]=s=>a.handleDropDown())},[e.createVNode(l,{text:n.label,color:"quaternary",size:"sm",weight:"normal"},null,8,["text"]),e.createVNode(l,{text:n.selectedItem.text,color:"secondary",size:"sm",weight:"normal"},null,8,["text"]),j]),t.isDropDownOpen?(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,s=>(e.openBlock(),e.createElementBlock("a",{key:s.id,onClick:m=>a.handleClick(s),class:"hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"},[e.createVNode(l,{text:s.text,color:"primary",size:"xs",weight:"normal"},null,8,["text"])],8,z))),128))])):e.createCommentVNode("",!0)])])}const y=d(H,[["render",L]]),O={name:"FilterAndSortBar",components:{DropDownMenu:y,BaseInput:B},data(){return{filterText:""}},props:{label:{type:String},items:{type:Array,default:()=>[]},selectedItem:null},methods:{handleFilter(t){this.$emit("filterbar",t)},handleSelectedItem(t){this.$emit("sort",t),console.log("handleSelectedItem",t)}}},Z={class:"flex flex-row w-full justify-between"},R={class:"rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4"},X=e.createElementVNode("i",{class:"fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1"},null,-1);function v(t,r,n,o,c,a){const l=e.resolveComponent("BaseInput"),s=e.resolveComponent("DropDownMenu");return e.openBlock(),e.createElementBlock("section",Z,[e.createElementVNode("div",R,[X,e.createVNode(l,{placeholder:"Search on Name, Location, or Date",class:"text-quaternary",value:c.filterText,"onUpdate:value":a.handleFilter},null,8,["value","onUpdate:value"])]),e.createElementVNode("div",null,[e.createVNode(s,{label:n.label,items:n.items,selectedItem:n.selectedItem,"onUpdate:selectedItem":a.handleSelectedItem},null,8,["label","items","selectedItem","onUpdate:selectedItem"])])])}const x=d(O,[["render",v]]),ee={name:"FilterUpcomingPast",components:{BaseText:g,BaseButton:A,DropDownMenu:y,BaseInput:B},props:{selected:{type:String,default:"All"}},data(){return{localSelected:this.selected}},methods:{handleTimeFrame(t){this.$emit("timeFrame",t),this.localSelected=t}}},te={class:"flex flex-row w-full justify-between"},re={class:"rounded-lg w-3/4"},ne={class:"flex flex-row h-8 w-1/4 justify-end"};function ae(t,r,n,o,c,a){const l=e.resolveComponent("BaseText"),s=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("section",te,[e.createElementVNode("div",re,[e.createVNode(l,{text:"Tournament",color:"primary",size:"2xl",weight:"normal"})]),e.createElementVNode("div",ne,[e.createVNode(s,{label:"All",color:"primary",size:"sm",selected:c.localSelected==="All",onClick:r[0]||(r[0]=m=>a.handleTimeFrame("ALL"))},null,8,["selected"]),e.createVNode(s,{label:"Upcoming",color:"primary",size:"sm",selected:c.localSelected==="Upcoming",onClick:r[1]||(r[1]=m=>a.handleTimeFrame("Upcoming"))},null,8,["selected"]),e.createVNode(s,{label:"Past",color:"primary",size:"sm",selected:c.localSelected==="Past",onClick:r[2]||(r[2]=m=>a.handleTimeFrame("Past"))},null,8,["selected"])])])}const le={name:"GridContainer",components:{FilterAndSortBar:x,BaseText:g,TournamentCard:f,FilterUpcomingPast:d(ee,[["render",ae]])},props:{items:{type:Array,default:()=>[]},component:{type:String,required:!0},label:{type:String},dropdownItems:{type:Array,default:()=>[]},selectedItem:null},data(){return{filterOn:"",sortCriteria:"Date",selectedTimeFrame:"All"}},computed:{filteredItems(){let t=this.items;if(this.filterOn.trim()){const n=this.filterOn.toLowerCase();t=t.filter(o=>Object.values(o).some(c=>typeof c=="string"&&c.toLowerCase().includes(n)))}const r=new Date;switch(r.setHours(0,0,0,0),this.selectedTimeFrame){case"Upcoming":t=t.filter(n=>new Date(n.date)>=r);break;case"Past":t=t.filter(n=>new Date(n.date)<r);break}switch(this.sortCriteria){case"Date":t=[...t].sort((n,o)=>new Date(n.date)-new Date(o.date));break;case"Name":t=[...t].sort((n,o)=>n.name.localeCompare(o.name));break;case"Location":t=[...t].sort((n,o)=>n.location.localeCompare(o.location));break}return t}},methods:{handleFilter(t){this.filterOn=t},handleSort(t){this.sortCriteria=t.text},handleTimeFrameChange(t){this.selectedTimeFrame=t}}},oe={class:"border border-dropdownSelect rounded-lg p-9 bg-neutral"},se={class:"my-4"},ce={class:"my-4"},ie={class:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full"};function de(t,r,n,o,c,a){const l=e.resolveComponent("FilterUpcomingPast"),s=e.resolveComponent("FilterAndSortBar");return e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",se,[e.createVNode(l,{selected:c.selectedTimeFrame,onTimeFrame:a.handleTimeFrameChange},null,8,["selected","onTimeFrame"])]),e.createElementVNode("div",ce,[e.createVNode(s,{items:n.dropdownItems,label:n.label,selectedItem:n.selectedItem,onFilterbar:a.handleFilter,onSort:a.handleSort},null,8,["items","label","selectedItem","onFilterbar","onSort"])]),e.createElementVNode("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.filteredItems,m=>(e.openBlock(),e.createElementBlock("div",{key:m.id},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.component),{detail:m},null,8,["detail"]))]))),128))])])}const me=d(le,[["render",de]]),ge={name:"AdminLeftMenu",components:{BaseButton:A},props:{buttons:{type:Array,default:()=>[]}},methods:{handleButtonClick(t){this.$emit("button-click",t)}}},Ae={class:"bg-secondary w-64 h-screen flex flex-col justify-between"},Be=e.createElementVNode("section",{class:"h-28 border-b border-neutral"},[e.createElementVNode("div",{class:"flex flex-col justify-center h-28"},[e.createElementVNode("div",{class:"ml-8"},[e.createElementVNode("img",{class:"w-32",src:"https://ferrotas.com/assets/ferrotas-white-small-720502db.png",alt:"logo"})])])],-1),ye={class:"flex flex-col p-2 h-full"},pe={class:"flex flex-col justify-end p-2 flex-grow"},he={class:"border-t border-neutral pt-2"};function ue(t,r,n,o,c,a){const l=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",Ae,[Be,e.createElementVNode("section",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.buttons,s=>(e.openBlock(),e.createBlock(l,{label:s.label,iconClass:"fa-solid fa-trophy text-white",type:"admin",hover:"admin",onClick:m=>a.handleButtonClick(s)},null,8,["label","onClick"]))),256))]),e.createElementVNode("section",pe,[e.createElementVNode("div",he,[e.createVNode(l,{iconClass:"fa-solid fa-circle-user text-textSecondary",label:"Account",type:"adminSecondary",onClick:r[0]||(r[0]=s=>a.handleButtonClick(t.button))}),e.createVNode(l,{iconClass:"fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",label:"Log Out",type:"adminSecondary",onClick:r[1]||(r[1]=s=>a.handleButtonClick(t.button))})])])])}const be=d(ge,[["render",ue]]);i.AdminLeftMenu=be,i.BaseButton=A,i.BaseInput=B,i.BaseTag=p,i.BaseText=g,i.DropDownMenu=y,i.FilterAndSortBar=x,i.GridContainer=me,i.TournamentCard=f,i.TournamentCardDetails=b,i.TournamentCardHeader=u,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "dist/my-library.umd.js",
   "module": "dist/my-library.es.js",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "npm version patch && vite build",
     "publish:package": "npm publish",
     "preview": "vite preview",
     "build-storybook": "npm run build:tailwind && storybook build",

package/src/stories/Base/Button/BaseButton.vue

@@ -118,7 +118,6 @@ export default {
         return baseClasses;
       }),
       onClick() {
-        console.log('Click!');
         emit('click');
       }
     };

package/src/stories/Containers/Grid/GridContainer.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
-    <h1 class="w-full text-center mb-9">
-      <BaseText color="primaryHighlight" size="2xl" text="Upcoming Tournaments" weight="normal" />
-    </h1>
+    <div class="my-4">
+      <FilterUpcomingPast :selected="selectedTimeFrame" @timeFrame="handleTimeFrameChange"/>
+    </div>
     <div class="my-4">
       <FilterAndSortBar :items="dropdownItems" :label="label" :selectedItem="selectedItem" @filterbar="handleFilter" @sort="handleSort"/>
     </div>
@@ -20,13 +20,15 @@
 import BaseText from "../../Base/Text/BaseText.vue";
 import TournamentCard from "../../Cards/TournamentCard/TournamentCard.vue";
 import FilterAndSortBar from "../../Filters/FilterAndSortBar/FilterAndSortBar.vue";
+import FilterUpcomingPast from "../../Filters/FilterUpcomingPast/FilterUpcomingPast.vue";
 
 export default {
   name: 'GridContainer',
   components: {
     FilterAndSortBar,
     BaseText,
-    TournamentCard
+    TournamentCard,
+    FilterUpcomingPast
   },
   props: {
     items: {
@@ -49,7 +51,8 @@ export default {
   data() {
     return {
       filterOn: '',
-      sortCriteria: 'Date'
+      sortCriteria: 'Date',
+      selectedTimeFrame: 'All'
     };
   },
   computed: {
@@ -65,6 +68,17 @@ export default {
         );
       }
 
+      const currentDate = new Date();
+      currentDate.setHours(0, 0, 0, 0);
+      switch (this.selectedTimeFrame) {
+        case 'Upcoming':
+          result = result.filter(item => new Date(item.date) >= currentDate);
+          break;
+        case 'Past':
+          result = result.filter(item => new Date(item.date) < currentDate);
+          break;
+      }
+
       switch(this.sortCriteria) {
         case 'Date':
           result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
@@ -85,6 +99,9 @@ export default {
     },
     handleSort(criteria) {
       this.sortCriteria = criteria.text;
+    },
+    handleTimeFrameChange(timeFrame) {
+      this.selectedTimeFrame = timeFrame;
     }
   }
 };

package/src/stories/Filters/FilterUpcomingPast/FilterUpcomingPast.vue

@@ -4,9 +4,9 @@
       <BaseText text="Tournament" color="primary" size="2xl" weight="normal" />
     </div>
     <div class="flex flex-row h-8 w-1/4 justify-end">
-      <BaseButton label="All" color="primary" size="sm" :selected="selected === 'All'" @click="handleTimeFrame('ALL')" />
-      <BaseButton label="Upcoming" color="primary" size="sm" :selected="selected === 'Upcoming'" @click="handleTimeFrame('Upcoming')" />
-      <BaseButton label="Past" color="primary" size="sm" :selected="selected === 'Past'" @click="handleTimeFrame('Past')" />
+      <BaseButton label="All" color="primary" size="sm" :selected="localSelected === 'All'" @click="handleTimeFrame('ALL')" />
+      <BaseButton label="Upcoming" color="primary" size="sm" :selected="localSelected === 'Upcoming'" @click="handleTimeFrame('Upcoming')" />
+      <BaseButton label="Past" color="primary" size="sm" :selected="localSelected === 'Past'" @click="handleTimeFrame('Past')" />
     </div>
   </section>
 </template>
@@ -31,9 +31,15 @@ export default {
       default: 'All'
     }
   },
+  data() {
+    return {
+      localSelected: this.selected
+    };
+  },
   methods: {
     handleTimeFrame(timeFrame) {
       this.$emit('timeFrame', timeFrame)
+      this.localSelected = timeFrame
     }
   }
 };