@dcrackel/hematournamentui 1.0.7 → 1.0.8

package/dist/HemaTouranmentUI-lib.es.js

@@ -1,10 +1,10 @@
-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";
+import { ref as C, watch as S, computed as A, withDirectives as v, openBlock as i, createElementBlock as m, normalizeClass as x, vModelText as E, toDisplayString as _, resolveComponent as u, createBlock as h, normalizeStyle as k, createCommentVNode as I, createVNode as d, reactive as Y, createElementVNode as c, Fragment as f, renderList as b, resolveDynamicComponent as M } from "vue";
 const g = (e, t) => {
   const r = e.__vccOpts || e;
-  for (const [l, o] of t)
-    r[l] = o;
+  for (const [a, o] of t)
+    r[a] = o;
   return r;
-}, Y = {
+}, G = {
   name: "BaseInput",
   props: {
     placeholder: {
@@ -14,38 +14,54 @@ const g = (e, t) => {
     value: {
       type: String,
       default: ""
+    },
+    type: {
+      type: String,
+      default: "borderless",
+      validator: function(e) {
+        return ["formInput", "borderless"].indexOf(e) !== -1;
+      }
     }
   },
-  data() {
+  setup(e, { emit: t }) {
+    const r = C(e.value), a = C(null);
+    S(() => e.value, (l) => {
+      r.value = l;
+    });
+    const o = A(() => {
+      let l = "appearance-none focus:outline-none";
+      switch (e.type) {
+        case "borderless":
+          l += " w-full text-sm";
+          break;
+        case "formInput":
+          l += " border border-dropdownSelect rounded-lg text-secondary placeholder:text-xs text-sm p-2 w-full";
+          break;
+      }
+      return l;
+    });
     return {
-      internalValue: this.value,
-      timeout: null
+      internalValue: r,
+      baseClasses: o,
+      onInput: () => {
+        clearTimeout(a.value), a.value = setTimeout(() => {
+          t("update:value", r.value);
+        }, 300);
+      }
     };
-  },
-  watch: {
-    value(e) {
-      this.internalValue = e;
-    }
-  },
-  methods: {
-    onInput() {
-      clearTimeout(this.timeout), this.timeout = setTimeout(() => {
-        console.log("this.internalValue", this.internalValue), this.$emit("update:value", this.internalValue);
-      }, 300);
-    }
   }
-}, 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",
+}, U = ["placeholder"];
+function q(e, t, r, a, o, n) {
+  return v((i(), m("input", {
+    class: x(a.baseClasses),
     placeholder: r.placeholder,
-    "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]
+    "onUpdate:modelValue": t[0] || (t[0] = (l) => a.internalValue = l),
+    onInput: t[1] || (t[1] = (...l) => a.onInput && a.onInput(...l))
+  }, null, 42, U)), [
+    [E, a.internalValue]
   ]);
 }
-const I = /* @__PURE__ */ g(Y, [["render", G]]), U = {
+const Q = /* @__PURE__ */ g(G, [["render", q]]), $ = {
   name: "BaseText",
   props: {
     text: {
@@ -91,10 +107,10 @@ const I = /* @__PURE__ */ g(Y, [["render", G]]), U = {
     }
   },
   setup(e) {
-    return e = b(e), {
-      classes: h(() => {
+    return {
+      classes: A(() => {
         let t = "inline-block font-sans";
-        switch (e.color) {
+        switch (console.log(`props.color in BaseText: ${e.color}`), e.color) {
           case "neutral":
             t += " text-neutral";
             break;
@@ -191,36 +207,82 @@ const I = /* @__PURE__ */ g(Y, [["render", G]]), U = {
     };
   }
 };
-function q(e, t, r, l, o, a) {
-  return i(), u("div", {
-    class: B(l.classes)
-  }, k(r.text), 3);
+function T(e, t, r, a, o, n) {
+  return i(), m("div", {
+    class: x(a.classes)
+  }, _(r.text), 3);
 }
-const y = /* @__PURE__ */ g(U, [["render", q]]), T = {
-  name: "base-button",
-  components: { BaseText: y },
+const p = /* @__PURE__ */ g($, [["render", T]]), V = {
+  name: "BaseIcon",
   props: {
-    label: {
+    iconName: {
       type: String,
       required: !0
     },
-    iconClass: {
+    style: {
       type: String,
-      default: null
+      default: "fa-solid",
+      validator: function(e) {
+        return ["fa-solid", "fa-regular", "fa-solid", "fa-light", "fa-thing"].indexOf(e) !== -1;
+      }
     },
     size: {
       type: String,
       validator: function(e) {
-        return ["xs", "sm", "md", "lg", "xl"].indexOf(e) !== -1;
+        return ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"].indexOf(e) !== -1;
       },
       default: "sm"
     },
+    color: {
+      type: String,
+      default: "primary"
+    }
+  },
+  computed: {
+    computedIconClass() {
+      return [
+        this.style,
+        this.iconName,
+        `text-${this.size}`,
+        this.colorClass
+      ];
+    },
+    colorClass() {
+      return `text-${this.color}`;
+    }
+  }
+};
+function F(e, t, r, a, o, n) {
+  return i(), m("i", {
+    class: x(n.computedIconClass)
+  }, null, 2);
+}
+const W = /* @__PURE__ */ g(V, [["render", F]]), K = {
+  name: "base-button",
+  components: { BaseText: p, BaseIcon: W },
+  props: {
+    label: {
+      type: String,
+      required: !0
+    },
+    iconName: {
+      type: String,
+      default: ""
+    },
+    iconStyle: {
+      type: String,
+      default: "fa-solid",
+      validator: (e) => ["fa-solid", "fa-regular", "fa-light", "fa-thing"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "sm",
+      validator: (e) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"].includes(e)
+    },
     type: {
       type: String,
       default: "primary",
-      validator: function(e) {
-        return ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary"].indexOf(e) !== -1;
-      }
+      validator: (e) => ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary", "continue", "iconOnly", "editor"].includes(e)
     },
     selected: {
       type: Boolean,
@@ -229,63 +291,50 @@ const y = /* @__PURE__ */ g(U, [["render", q]]), T = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    return e = b(e), {
-      textColor: h(() => {
-        switch (e.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: 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 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 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 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 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 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", e.selected ? r += " bg-primary" : r += " bg-tertiary";
-            break;
-        }
-        switch (e.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;
-        }
-        return r;
+    const r = {
+      primary: "px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary " + (e.selected ? "bg-dropdownSelect" : "bg-neutral"),
+      secondary: "px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral " + (e.selected ? "bg-dropdownSelect" : "bg-secondary"),
+      tertiary: "px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary " + (e.selected ? "bg-primary" : "bg-tertiary"),
+      bright: "px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral " + (e.selected ? "bg-primary" : "bg-bright"),
+      admin: "px-2.5 mx-1 py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight " + (e.selected, "bg-primary"),
+      adminSecondary: "px-2.5 mx-1 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, "bg-primary"),
+      continue: "px-2.5 mx-1 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center " + (e.selected ? "bg-secondary" : "bg-primary"),
+      iconOnly: "py-0.5 items-center rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary",
+      editor: "px-1 items-center rounded-md text-center justify-center hover:bg-tertiary"
+    }, a = {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl"
+    };
+    return {
+      textColor: A(() => ({
+        primary: "primary",
+        secondary: "secondary",
+        tertiary: "tertiary",
+        bright: "bright",
+        admin: "neutral",
+        adminSecondary: "neutral",
+        continue: "neutral",
+        editor: e.selected ? "bright" : "quaternary"
+      })[e.type] || "primary"),
+      classes: A(() => {
+        let o = "inline-flex", n = r[e.type] || "";
+        if (e.selected)
+          switch (e.type) {
+            case "primary":
+              n = n.replace("bg-neutral", "bg-dropdownSelect");
+              break;
+            case "secondary":
+              n = n.replace("bg-secondary", "bg-dropdownSelect");
+              break;
+          }
+        let l = a[e.size] || "";
+        return `${o} ${n} ${l}`;
       }),
       onClick() {
         t("click");
@@ -293,28 +342,32 @@ const y = /* @__PURE__ */ g(U, [["render", q]]), T = {
     };
   }
 };
-function $(e, t, r, l, o, a) {
-  const n = m("BaseText");
-  return i(), u("button", {
+function H(e, t, r, a, o, n) {
+  const l = u("BaseIcon"), s = u("BaseText");
+  return i(), m("button", {
     "data-testid": "base-button",
-    class: B(l.classes),
+    class: x(a.classes),
     type: "button",
-    onClick: t[0] || (t[0] = (...s) => l.onClick && l.onClick(...s))
+    onClick: t[0] || (t[0] = (...y) => a.onClick && a.onClick(...y))
   }, [
-    r.iconClass ? (i(), u("i", {
+    r.iconName ? (i(), h(l, {
       key: 0,
-      class: B([r.iconClass, "mr-2 hover:text-highlightedClass"])
-    }, null, 2)) : _("", !0),
-    d(n, {
+      "data-testid": "base-icon",
+      "icon-name": r.iconName,
+      style: k(r.iconStyle),
+      color: a.textColor,
+      size: r.size
+    }, null, 8, ["icon-name", "style", "color", "size"])) : I("", !0),
+    d(s, {
       "data-testid": "base-text",
-      color: l.textColor,
+      color: a.textColor,
       size: r.size,
       text: r.label,
       weight: "normal"
     }, null, 8, ["color", "size", "text"])
   ], 2);
 }
-const C = /* @__PURE__ */ g(T, [["render", $]]), V = {
+const B = /* @__PURE__ */ g(K, [["render", H]]), j = {
   name: "base-tag",
   props: {
     label: {
@@ -329,8 +382,8 @@ const C = /* @__PURE__ */ g(T, [["render", $]]), V = {
     }
   },
   setup(e) {
-    return e = b(e), {
-      classes: h(() => {
+    return e = Y(e), {
+      classes: A(() => {
         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,15 +410,15 @@ const C = /* @__PURE__ */ g(T, [["render", $]]), V = {
     };
   }
 };
-function F(e, t, r, l, o, a) {
-  return i(), u("div", {
-    class: B(l.classes)
-  }, k(r.label), 3);
+function P(e, t, r, a, o, n) {
+  return i(), m("div", {
+    class: x(a.classes)
+  }, _(r.label), 3);
 }
-const W = /* @__PURE__ */ g(V, [["render", F]]), w = "data:image/png;base64,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", K = {
+const z = /* @__PURE__ */ g(j, [["render", P]]), w = "data:image/png;base64,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", J = {
   name: "tournament-card-header",
   components: {
-    BaseTag: W
+    BaseTag: z
   },
   props: {
     artwork: {
@@ -383,16 +436,16 @@ const W = /* @__PURE__ */ g(V, [["render", F]]), w = "data:image/png;base64,iVBO
       return `background-image: url('${this.artwork || w}');`;
     }
   }
-}, 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, [
+}, O = { class: "rounded-t-xl w-full" }, N = { class: "flex flex-row" };
+function L(e, t, r, a, o, n) {
+  const l = u("BaseTag");
+  return i(), m("div", O, [
     c("div", {
-      style: E(a.backgroundStyle),
+      style: k(n.backgroundStyle),
       class: "h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"
     }, [
-      c("div", P, [
-        (i(!0), u(x, null, p(r.tags, (s) => (i(), f(n, {
+      c("div", N, [
+        (i(!0), m(f, null, b(r.tags, (s) => (i(), h(l, {
           key: s,
           label: s
         }, null, 8, ["label"]))), 128))
@@ -400,11 +453,11 @@ function j(e, t, r, l, o, a) {
     ], 4)
   ]);
 }
-const J = /* @__PURE__ */ g(K, [["render", j]]), z = {
+const Z = /* @__PURE__ */ g(J, [["render", L]]), R = {
   name: "tournament-card-details",
   components: {
-    BaseButton: C,
-    BaseText: y
+    BaseButton: B,
+    BaseText: p
   },
   props: {
     detail: {
@@ -418,37 +471,37 @@ const J = /* @__PURE__ */ g(K, [["render", j]]), z = {
       })
     }
   }
-}, 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, {
+}, X = { class: "flex flex-col w-full pt-4 pb-3 px-3" }, ee = { class: "mt-4 flex flex-col" }, te = { class: "flex flex-row w-full justify-end" };
+function re(e, t, r, a, o, n) {
+  const l = u("BaseText"), s = u("BaseButton");
+  return i(), m("div", X, [
+    d(l, {
       text: r.detail.name,
       color: "primary",
       size: "xl",
       weight: "semi-bold"
     }, null, 8, ["text"]),
-    d(n, {
+    d(l, {
       text: r.detail.location,
       color: "primary",
       size: "sm",
       weight: "normal"
     }, null, 8, ["text"]),
-    c("div", L, [
-      d(n, {
+    c("div", ee, [
+      d(l, {
         text: `${r.detail.date}`,
         color: "primaryHighlight",
         size: "sm",
         weight: "light"
       }, null, 8, ["text"]),
-      d(n, {
+      d(l, {
         text: `${r.detail.closes}`,
         color: "primaryHighlight",
         size: "sm",
         weight: "light"
       }, null, 8, ["text"])
     ]),
-    c("div", N, [
+    c("div", te, [
       d(s, {
         label: "Edit",
         class: "mt-2",
@@ -457,11 +510,11 @@ function Z(e, t, r, l, o, a) {
     ])
   ]);
 }
-const R = /* @__PURE__ */ g(z, [["render", Z]]), X = {
+const ae = /* @__PURE__ */ g(R, [["render", re]]), le = {
   name: "TournamentCard",
   components: {
-    TournamentHeader: J,
-    TournamentDetail: R
+    TournamentHeader: Z,
+    TournamentDetail: ae
   },
   props: {
     detail: {
@@ -478,20 +531,20 @@ const R = /* @__PURE__ */ g(z, [["render", Z]]), X = {
       })
     }
   }
-}, 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, {
+}, ne = { class: "rounded-xl w-72 shadow" };
+function oe(e, t, r, a, o, n) {
+  const l = u("TournamentHeader"), s = u("TournamentDetail");
+  return i(), m("div", ne, [
+    d(l, {
       artwork: r.detail.artwork,
       tags: r.detail.tags
     }, null, 8, ["artwork", "tags"]),
     d(s, { detail: r.detail }, null, 8, ["detail"])
   ]);
 }
-const re = /* @__PURE__ */ g(X, [["render", te]]), ae = {
+const se = /* @__PURE__ */ g(le, [["render", oe]]), ie = {
   name: "DropDownMenu",
-  components: { BaseText: y },
+  components: { BaseText: p },
   props: {
     label: {
       type: String
@@ -517,59 +570,54 @@ const re = /* @__PURE__ */ g(X, [["render", te]]), ae = {
       this.isDropDownOpen = !this.isDropDownOpen;
     }
   }
-}, ne = { class: "flex flex-row" }, le = /* @__PURE__ */ c("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), se = {
+}, ce = { class: "flex flex-row" }, de = /* @__PURE__ */ c("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), me = {
   key: 0,
   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, l, o, a) {
-  const n = m("BaseText");
-  return i(), u("div", ne, [
+}, ue = ["onClick"];
+function ge(e, t, r, a, o, n) {
+  const l = u("BaseText");
+  return i(), m("div", ce, [
     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] = (s) => a.handleDropDown())
+        class: "z-10 rounded-lg shadow px-2 py-2 w-40 flex flex-row justify-between",
+        onClick: t[0] || (t[0] = (s) => n.handleDropDown())
       }, [
-        d(n, {
+        d(l, {
           text: r.label,
           color: "quaternary",
           size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        d(n, {
+        d(l, {
           text: r.selectedItem.text,
           color: "secondary",
           size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        le
+        de
       ]),
-      e.isDropDownOpen ? (i(), u("div", se, [
-        (i(!0), u(x, null, p(r.items, (s) => (i(), u("a", {
+      e.isDropDownOpen ? (i(), m("div", me, [
+        (i(!0), m(f, null, b(r.items, (s) => (i(), m("a", {
           key: s.id,
-          onClick: (A) => a.handleClick(s),
+          onClick: (y) => n.handleClick(s),
           class: "hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"
         }, [
-          d(n, {
+          d(l, {
             text: s.text,
             color: "primary",
             size: "xs",
             weight: "normal"
           }, null, 8, ["text"])
-        ], 8, oe))), 128))
-      ])) : _("", !0)
+        ], 8, ue))), 128))
+      ])) : I("", !0)
     ])
   ]);
 }
-const Q = /* @__PURE__ */ g(ae, [["render", ie]]), ce = {
+const D = /* @__PURE__ */ g(ie, [["render", ge]]), ye = {
   name: "FilterAndSortBar",
   components: {
-    DropDownMenu: Q,
-    BaseInput: I
-  },
-  data() {
-    return {
-      filterText: ""
-    };
+    DropDownMenu: D,
+    BaseInput: Q
   },
   props: {
     label: {
@@ -581,44 +629,50 @@ const Q = /* @__PURE__ */ g(ae, [["render", ie]]), ce = {
     },
     selectedItem: null
   },
+  data() {
+    return {
+      filterText: "",
+      localSelectedItem: this.selectedItem
+    };
+  },
   methods: {
     handleFilter(e) {
       this.$emit("filterbar", e);
     },
     handleSelectedItem(e) {
-      this.$emit("sort", e), console.log("handleSelectedItem", e);
+      this.$emit("sort", e), this.localSelectedItem = 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" }, 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, {
+}, Ae = { class: "flex flex-row w-full justify-between" }, xe = { class: "rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4" }, pe = /* @__PURE__ */ c("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
+function he(e, t, r, a, o, n) {
+  const l = u("BaseInput"), s = u("DropDownMenu");
+  return i(), m("section", Ae, [
+    c("div", xe, [
+      pe,
+      d(l, {
         placeholder: "Search on Name, Location, or Date",
         class: "text-quaternary",
         value: o.filterText,
-        "onUpdate:value": a.handleFilter
+        "onUpdate:value": n.handleFilter
       }, null, 8, ["value", "onUpdate:value"])
     ]),
     c("div", null, [
       d(s, {
         label: r.label,
         items: r.items,
-        selectedItem: r.selectedItem,
-        "onUpdate:selectedItem": a.handleSelectedItem
+        selectedItem: o.localSelectedItem,
+        "onUpdate:selectedItem": n.handleSelectedItem
       }, null, 8, ["label", "items", "selectedItem", "onUpdate:selectedItem"])
     ])
   ]);
 }
-const Ae = /* @__PURE__ */ g(ce, [["render", ge]]), ye = {
+const fe = /* @__PURE__ */ g(ye, [["render", he]]), be = {
   name: "FilterUpcomingPast",
   components: {
-    BaseText: y,
-    BaseButton: C,
-    DropDownMenu: Q,
-    BaseInput: I
+    BaseText: p,
+    BaseButton: B,
+    DropDownMenu: D,
+    BaseInput: Q
   },
   props: {
     selected: {
@@ -636,50 +690,50 @@ const Ae = /* @__PURE__ */ g(ce, [["render", ge]]), ye = {
       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, {
+}, Be = { class: "flex flex-row w-full justify-between" }, Ce = { class: "rounded-lg w-3/4" }, we = { class: "flex flex-row h-8 w-1/4 justify-end" };
+function _e(e, t, r, a, o, n) {
+  const l = u("BaseText"), s = u("BaseButton");
+  return i(), m("section", Be, [
+    c("div", Ce, [
+      d(l, {
         text: "Tournament",
         color: "primary",
         size: "2xl",
         weight: "normal"
       })
     ]),
-    c("div", xe, [
+    c("div", we, [
       d(s, {
         label: "All",
         color: "primary",
         size: "sm",
         selected: o.localSelected === "All",
-        onClick: t[0] || (t[0] = (A) => a.handleTimeFrame("ALL"))
+        onClick: t[0] || (t[0] = (y) => n.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"))
+        onClick: t[1] || (t[1] = (y) => n.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"))
+        onClick: t[2] || (t[2] = (y) => n.handleTimeFrame("Past"))
       }, null, 8, ["selected"])
     ])
   ]);
 }
-const be = /* @__PURE__ */ g(ye, [["render", pe]]), fe = {
+const ke = /* @__PURE__ */ g(be, [["render", _e]]), Ie = {
   name: "GridContainer",
   components: {
-    FilterAndSortBar: Ae,
-    BaseText: y,
-    TournamentCard: re,
-    FilterUpcomingPast: be
+    FilterAndSortBar: fe,
+    BaseText: p,
+    TournamentCard: se,
+    FilterUpcomingPast: ke
   },
   props: {
     items: {
@@ -712,7 +766,7 @@ const be = /* @__PURE__ */ g(ye, [["render", pe]]), fe = {
       if (this.filterOn.trim()) {
         const r = this.filterOn.toLowerCase();
         e = e.filter(
-          (l) => Object.values(l).some(
+          (a) => Object.values(a).some(
             (o) => typeof o == "string" && o.toLowerCase().includes(r)
           )
         );
@@ -728,13 +782,13 @@ const be = /* @__PURE__ */ g(ye, [["render", pe]]), fe = {
       }
       switch (this.sortCriteria) {
         case "Date":
-          e = [...e].sort((r, l) => new Date(r.date) - new Date(l.date));
+          e = [...e].sort((r, a) => new Date(r.date) - new Date(a.date));
           break;
         case "Name":
-          e = [...e].sort((r, l) => r.name.localeCompare(l.name));
+          e = [...e].sort((r, a) => r.name.localeCompare(a.name));
           break;
         case "Location":
-          e = [...e].sort((r, l) => r.location.localeCompare(l.location));
+          e = [...e].sort((r, a) => r.location.localeCompare(a.location));
           break;
       }
       return e;
@@ -751,37 +805,37 @@ const be = /* @__PURE__ */ g(ye, [["render", pe]]), fe = {
       this.selectedTimeFrame = e;
     }
   }
-}, 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, {
+}, Qe = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, De = { class: "my-4" }, Se = { class: "my-4" }, ve = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full" };
+function Ee(e, t, r, a, o, n) {
+  const l = u("FilterUpcomingPast"), s = u("FilterAndSortBar");
+  return i(), m("div", Qe, [
+    c("div", De, [
+      d(l, {
         selected: o.selectedTimeFrame,
-        onTimeFrame: a.handleTimeFrameChange
+        onTimeFrame: n.handleTimeFrameChange
       }, null, 8, ["selected", "onTimeFrame"])
     ]),
-    c("div", ke, [
+    c("div", Se, [
       d(s, {
         items: r.dropdownItems,
         label: r.label,
         selectedItem: r.selectedItem,
-        onFilterbar: a.handleFilter,
-        onSort: a.handleSort
+        onFilterbar: n.handleFilter,
+        onSort: n.handleSort
       }, null, 8, ["items", "label", "selectedItem", "onFilterbar", "onSort"])
     ]),
-    c("div", _e, [
-      (i(!0), u(x, null, p(a.filteredItems, (A) => (i(), u("div", {
-        key: A.id
+    c("div", ve, [
+      (i(!0), m(f, null, b(n.filteredItems, (y) => (i(), m("div", {
+        key: y.id
       }, [
-        (i(), f(v(r.component), { detail: A }, null, 8, ["detail"]))
+        (i(), h(M(r.component), { detail: y }, null, 8, ["detail"]))
       ]))), 128))
     ])
   ]);
 }
-const Ue = /* @__PURE__ */ g(fe, [["render", Ie]]), Qe = {
+const Fe = /* @__PURE__ */ g(Ie, [["render", Ee]]), Ye = {
   name: "AdminLeftMenu",
-  components: { BaseButton: C },
+  components: { BaseButton: B },
   props: {
     buttons: {
       type: Array,
@@ -793,7 +847,7 @@ const Ue = /* @__PURE__ */ g(fe, [["render", Ie]]), Qe = {
       this.$emit("button-click", e);
     }
   }
-}, De = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, Se = /* @__PURE__ */ c("section", { class: "h-28 border-b border-neutral" }, [
+}, Me = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, Ge = /* @__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", {
@@ -803,49 +857,49 @@ const Ue = /* @__PURE__ */ g(fe, [["render", Ie]]), Qe = {
       })
     ])
   ])
-], -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, {
+], -1), Ue = { class: "flex flex-col p-2 h-full" }, qe = { class: "flex flex-col justify-end p-2 flex-grow" }, $e = { class: "border-t border-neutral pt-2" };
+function Te(e, t, r, a, o, n) {
+  const l = u("BaseButton");
+  return i(), m("div", Me, [
+    Ge,
+    c("section", Ue, [
+      (i(!0), m(f, null, b(r.buttons, (s) => (i(), h(l, {
         label: s.label,
         iconClass: "fa-solid fa-trophy text-white",
         type: "admin",
         hover: "admin",
-        onClick: (A) => a.handleButtonClick(s)
+        onClick: (y) => n.handleButtonClick(s)
       }, null, 8, ["label", "onClick"]))), 256))
     ]),
-    c("section", ve, [
-      c("div", Ye, [
-        d(n, {
+    c("section", qe, [
+      c("div", $e, [
+        d(l, {
           iconClass: "fa-solid fa-circle-user text-textSecondary",
           label: "Account",
           type: "adminSecondary",
-          onClick: t[0] || (t[0] = (s) => a.handleButtonClick(e.button))
+          onClick: t[0] || (t[0] = (s) => n.handleButtonClick(e.button))
         }),
-        d(n, {
+        d(l, {
           iconClass: "fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",
           label: "Log Out",
           type: "adminSecondary",
-          onClick: t[1] || (t[1] = (s) => a.handleButtonClick(e.button))
+          onClick: t[1] || (t[1] = (s) => n.handleButtonClick(e.button))
         })
       ])
     ])
   ]);
 }
-const qe = /* @__PURE__ */ g(Qe, [["render", Me]]);
+const We = /* @__PURE__ */ g(Ye, [["render", Te]]);
 export {
-  qe as AdminLeftMenu,
-  C as BaseButton,
-  I as BaseInput,
-  W as BaseTag,
-  y as BaseText,
-  Q as DropDownMenu,
-  Ae as FilterAndSortBar,
-  Ue as GridContainer,
-  re as TournamentCard,
-  R as TournamentCardDetails,
-  J as TournamentCardHeader
+  We as AdminLeftMenu,
+  B as BaseButton,
+  Q as BaseInput,
+  z as BaseTag,
+  p as BaseText,
+  D as DropDownMenu,
+  fe as FilterAndSortBar,
+  Fe as GridContainer,
+  se as TournamentCard,
+  ae as TournamentCardDetails,
+  Z as TournamentCardHeader
 };