@dcrackel/hematournamentui 1.0.3 → 1.0.5

package/dist/{my-library.es.js → HemaTouranmentUI-lib.es.js}

@@ -1,10 +1,10 @@
-import { withDirectives as I, openBlock as s, createElementBlock as c, vModelText as Q, reactive as b, computed as m, normalizeClass as h, toDisplayString as k, resolveComponent as g, createCommentVNode as w, createVNode as d, createElementVNode as i, normalizeStyle as D, Fragment as x, renderList as B, 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;
-}, v = {
+}, Y = {
   name: "BaseInput",
   props: {
     placeholder: {
@@ -34,18 +34,18 @@ const A = (e, t) => {
       }, 300);
     }
   }
-}, S = ["placeholder"];
-function Y(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, S)), [
-    [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(v, [["render", Y]]), G = {
+const I = /* @__PURE__ */ g(Y, [["render", G]]), U = {
   name: "BaseText",
   props: {
     text: {
@@ -64,7 +64,7 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
       type: String,
       default: "small",
       validator: function(e) {
-        return ["xs", "small", "medium", "large", "xl", "2xl", "3xl"].indexOf(e) !== -1;
+        return ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"].indexOf(e) !== -1;
       }
     },
     color: {
@@ -92,7 +92,7 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
   },
   setup(e) {
     return e = b(e), {
-      classes: m(() => {
+      classes: h(() => {
         let t = "inline-block font-sans";
         switch (e.color) {
           case "neutral":
@@ -159,21 +159,18 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
           case "extra-bold":
             t += " font-extrabold";
             break;
-          default:
-            t += " font-normal";
-            break;
         }
         switch (e.size) {
           case "xs":
             t += " text-xs";
             break;
-          case "small":
+          case "sm":
             t += " text-sm";
             break;
-          case "medium":
+          case "md":
             t += " text-md";
             break;
-          case "large":
+          case "lg":
             t += " text-lg";
             break;
           case "xl":
@@ -194,14 +191,14 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), 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 p = /* @__PURE__ */ A(G, [["render", q]]), U = {
+const y = /* @__PURE__ */ g(U, [["render", q]]), T = {
   name: "base-button",
-  components: { DefaultText: p },
+  components: { BaseText: y },
   props: {
     label: {
       type: String,
@@ -214,8 +211,9 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
     size: {
       type: String,
       validator: function(e) {
-        return ["xs", "small", "medium", "large", "xl"].indexOf(e) !== -1;
-      }
+        return ["xs", "sm", "md", "lg", "xl"].indexOf(e) !== -1;
+      },
+      default: "sm"
     },
     type: {
       type: String,
@@ -223,12 +221,16 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
       validator: function(e) {
         return ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary"].indexOf(e) !== -1;
       }
+    },
+    selected: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["click"],
   setup(e, { emit: t }) {
     return e = b(e), {
-      textColor: m(() => {
+      textColor: h(() => {
         switch (e.type) {
           case "primary":
             return "primary";
@@ -242,100 +244,77 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
             return "neutral";
           case "adminSecondary":
             return "neutral";
-          default:
-            return "primary";
         }
       }),
-      hoverClass: m(() => {
-        switch (e.type) {
-          case "admin":
-            return "hover:text-secondary";
-          case "adminSecondary":
-            return "hover:text-tertiary";
-          default:
-            return "";
-        }
-      }),
-      hoverColor: m(() => {
-        switch (e.type) {
-          case "admin":
-            return "text-secondary";
-          case "adminSecondary":
-            return "text-tertiary";
-          default:
-            return null;
-        }
-      }),
-      classes: m(() => {
-        let r = "px-2.5 mx-2 inline-flex ";
+      classes: h(() => {
+        let r = "px-2.5 mx-1 inline-flex ";
         switch (e.type) {
           case "primary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center bg-neutral hover:bg-tertiary";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary", e.selected ? r += " bg-dropdownSelect" : r += " bg-neutral";
             break;
           case "secondary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow bg-secondary justify-center hover:bg-primary text-neutral";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral", e.selected ? r += " bg-dropdownSelect" : r += " bg-secondary";
             break;
           case "tertiary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center bg-tertiary hover:bg-primary text-primary";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary", e.selected ? r += " bg-primary" : r += " bg-tertiary";
             break;
           case "bright":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center bg-bright hover:bg-primary text-neutral";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral", e.selected ? r += " bg-primary" : r += " bg-bright";
             break;
           case "admin":
-            r += " py-2 items-center rounded-md gap-2.5 text-center bg-primary hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight";
+            r += " py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight", e.selected, r += " bg-primary";
             break;
           case "adminSecondary":
-            r += " 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";
+            r += " 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", e.selected ? r += " bg-primary" : r += " bg-tertiary";
             break;
         }
         switch (e.size) {
           case "xs":
             r += " text-xs";
             break;
-          case "small":
+          case "sm":
             r += " text-sm";
             break;
-          case "medium":
+          case "md":
             r += " text-md";
             break;
-          case "large":
+          case "lg":
             r += " text-lg";
             break;
           case "xl":
             r += " text-xl";
             break;
-          default:
-            r += "";
-            break;
         }
         return r;
       }),
       onClick() {
-        console.log("Click!"), t("click");
+        t("click");
       }
     };
   }
 };
-function V(e, t, r, o, u, n) {
-  const a = g("DefaultText");
-  return s(), c("button", {
-    class: h(o.classes),
+function $(e, t, r, l, o, a) {
+  const n = m("BaseText");
+  return i(), u("button", {
+    "data-testid": "base-button",
+    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, {
-      color: o.textColor,
+      class: B([r.iconClass, "mr-2 hover:text-highlightedClass"])
+    }, null, 2)) : _("", !0),
+    d(n, {
+      "data-testid": "base-text",
+      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: {
@@ -351,7 +330,7 @@ const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
   },
   setup(e) {
     return e = b(e), {
-      classes: m(() => {
+      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":
@@ -378,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
@@ -392,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,
@@ -401,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(x, null, B(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: p
+    BaseButton: C,
+    BaseText: y
   },
   props: {
     detail: {
@@ -439,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: "small",
+      size: "sm",
       weight: "normal"
     }, null, 8, ["text"]),
-    i("div", z, [
-      d(a, {
+    c("div", L, [
+      d(n, {
         text: `${r.detail.date}`,
         color: "primaryHighlight",
-        size: "small",
+        size: "sm",
         weight: "light"
       }, null, 8, ["text"]),
-      d(a, {
+      d(n, {
         text: `${r.detail.closes}`,
         color: "primaryHighlight",
-        size: "small",
+        size: "sm",
         weight: "light"
       }, null, 8, ["text"])
     ]),
-    i("div", L, [
-      d(l, {
+    c("div", N, [
+      d(s, {
         label: "Edit",
         class: "mt-2",
         primary: ""
@@ -478,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: {
@@ -499,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: p },
+  components: { BaseText: y },
   props: {
     label: {
       type: String
@@ -538,27 +517,25 @@ const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
       this.isDropDownOpen = !this.isDropDownOpen;
     }
   }
-}, ae = { class: "flex flex-row" }, ne = { class: "mr-2 pt-1" }, le = /* @__PURE__ */ i("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), se = {
+}, 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-white"
+  class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"
 }, oe = ["onClick"];
-function ie(e, t, r, o, u, n) {
-  const a = g("BaseText");
-  return s(), c("div", ae, [
-    i("span", ne, [
-      d(a, {
-        text: r.label,
-        color: "quaternary",
-        size: "small",
-        weight: "normal"
-      }, null, 8, ["text"])
-    ]),
-    i("span", null, [
-      i("div", {
+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(n, {
           text: r.selectedItem.text,
           color: "secondary",
           size: "sm",
@@ -566,28 +543,28 @@ function ie(e, t, r, o, u, n) {
         }, null, 8, ["text"]),
         le
       ]),
-      e.isDropDownOpen ? (s(), c("div", se, [
-        (s(!0), c(x, null, B(r.items, (l) => (s(), c("a", {
-          key: l.id,
-          onClick: (y) => 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, oe))), 128))
-      ])) : w("", !0)
+      ])) : _("", !0)
     ])
   ]);
 }
-const ce = /* @__PURE__ */ A(re, [["render", ie]]), de = {
+const Q = /* @__PURE__ */ g(ae, [["render", ie]]), ce = {
   name: "FilterAndSortBar",
   components: {
-    DropDownMenu: ce,
-    BaseInput: M
+    DropDownMenu: Q,
+    BaseInput: I
   },
   data() {
     return {
@@ -612,35 +589,97 @@ const ce = /* @__PURE__ */ A(re, [["render", ie]]), de = {
       this.$emit("sort", e), console.log("handleSelectedItem", e);
     }
   }
-}, ue = { class: "flex flex-row w-full justify-between" }, ge = { class: "rounded-lg shadow px-2 py-1 w-1/2 flex flex-row mt-0.5" }, Ae = /* @__PURE__ */ i("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
-function me(e, t, r, o, u, n) {
-  const a = g("BaseInput"), l = g("DropDownMenu");
-  return s(), c("section", ue, [
-    i("div", ge, [
-      Ae,
-      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 ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
+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: ye,
-    BaseText: p,
-    TournamentCard: te
+    FilterAndSortBar: Ae,
+    BaseText: y,
+    TournamentCard: re,
+    FilterUpcomingPast: be
   },
   props: {
     items: {
@@ -663,29 +702,39 @@ const ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
   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;
@@ -697,41 +746,42 @@ const ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
     },
     handleSort(e) {
       this.sortCriteria = e.text;
+    },
+    handleTimeFrameChange(e) {
+      this.selectedTimeFrame = e;
     }
   }
-}, xe = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, Be = { class: "w-full text-center mb-9" }, pe = { 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 fe(e, t, r, o, u, n) {
-  const a = g("BaseText"), l = g("FilterAndSortBar");
-  return s(), c("div", xe, [
-    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", pe, [
-      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(x, null, B(n.filteredItems, (y) => (s(), c("div", {
-        key: y.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: y }, null, 8, ["detail"]))
+        (i(), f(v(r.component), { detail: A }, null, 8, ["detail"]))
       ]))), 128))
     ])
   ]);
 }
-const ve = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
+const Ue = /* @__PURE__ */ g(fe, [["render", Ie]]), Qe = {
   name: "AdminLeftMenu",
-  components: { BaseButton: _ },
+  components: { BaseButton: C },
   props: {
     buttons: {
       type: Array,
@@ -743,59 +793,59 @@ const ve = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
       this.$emit("button-click", e);
     }
   }
-}, ke = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, we = /* @__PURE__ */ i("section", { class: "h-28 border-b-2 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), _e = { class: "flex flex-col p-2 h-full" }, Ie = { class: "flex flex-col justify-end p-2 h-full" }, Qe = { class: "border-t-2 border-neutral pt-2" };
-function De(e, t, r, o, u, n) {
-  const a = g("BaseButton");
-  return s(), c("div", ke, [
-    we,
-    i("section", _e, [
-      (s(!0), c(x, null, B(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: (y) => n.handleButtonClick(l)
+        onClick: (A) => a.handleButtonClick(s)
       }, null, 8, ["label", "onClick"]))), 256))
     ]),
-    i("section", Ie, [
-      i("div", Qe, [
-        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(Ce, [["render", De]]);
+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,
-  p as BaseText,
-  ce as DropDownMenu,
-  ye as FilterAndSortBar,
-  ve 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
 };