@dcrackel/hematournamentui 1.0.0 → 1.0.1

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "dist/my-library.umd.js",
   "module": "dist/my-library.es.js",

package/src/mocks/tournamentMock.js

@@ -7,7 +7,7 @@ const mockTournaments = [
     description: 'Join us for the hottest tournament this summer!',
     date: '15 June 2023',
     closes: 'Status Line',
-    location: 'Beachside Arena, Miami, FL'
+    location: 'Amber Arena, Miami, FL'
   },
   {
     id: 2,
@@ -27,7 +27,7 @@ const mockTournaments = [
     description: 'Celebrate fall with intense matches!',
     date: '20 October 2023',
     closes: 'Registration Closes 18th October 2023',
-    location: 'Forest Field, Portland, OR'
+    location: 'Withers Field, Portland, OR'
   }
 ];
 

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

@@ -43,19 +43,19 @@ export default {
       textColor: computed(() => {
         switch (props.type) {
           case 'primary':
-            return 'text-primary';
+            return 'primary';
           case 'secondary':
-            return 'text-secondary';
+            return 'secondary';
           case 'tertiary':
-            return 'text-tertiary';
+            return 'tertiary';
           case 'bright':
-            return 'text-bright';
+            return 'bright';
           case 'admin':
-            return 'text-neutral';
+            return 'neutral';
           case 'adminSecondary':
-            return 'text-secondary';
+            return 'secondary';
           default:
-            return 'text-primary';
+            return 'primary';
         }
       }),
       hoverClass: computed(() => {

package/src/stories/Base/Input/BaseInput.vue

@@ -1,6 +1,6 @@
 <template>
   <input
-      class="appearance-none focus:outline-none w-full"
+      class="appearance-none focus:outline-none w-full text-sm"
       :placeholder="placeholder"
       v-model="internalValue"
       @input="onInput"
@@ -36,6 +36,7 @@ export default {
     onInput() {
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
+        console.log('this.internalValue', this.internalValue)
         this.$emit('update:value', this.internalValue);
       }, 300);
     }

package/src/stories/Base/Text/BaseText.vue

@@ -31,7 +31,7 @@ export default {
       type: String,
       default: 'primary',
       validator: function (value) {
-        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'].indexOf(value) !== -1;
+        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright', 'primaryHighlight'].indexOf(value) !== -1;
       }
     },
     hoverColor: {
@@ -74,6 +74,9 @@ export default {
           case 'primary':
             baseClasses += ' text-primary';
             break;
+          case 'primaryHighlight':
+            baseClasses += ' text-primaryHighlight';
+            break;
           case 'bright':
             baseClasses += ' text-bright';
             break;

package/src/stories/Cards/TournamentCard/Detail/TournamentCardDetail.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col w-full pt-4 pb-3 px-3">
-    <BaseText :text="detail.name" color="textPrimary" size="xl" weight="semi-bold" />
-    <BaseText :text="detail.location" color="textPrimary" size="small" weight="normal" />
+    <BaseText :text="detail.name" color="primary" size="xl" weight="semi-bold" />
+    <BaseText :text="detail.location" color="primary" size="small" weight="normal" />
     <div class="mt-4 flex flex-col">
-      <BaseText :text="`${detail.date}`" color="textPrimary" size="small" weight="light" />
-      <BaseText :text="`${detail.closes}`" color="textPrimary" size="small" weight="light" />
+      <BaseText :text="`${detail.date}`" color="primaryHighlight" size="small" weight="light" />
+      <BaseText :text="`${detail.closes}`" color="primaryHighlight" size="small" weight="light" />
     </div>
     <div class="flex flex-row w-full justify-end">
       <BaseButton :label="`Edit`" class="mt-2" primary />

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

@@ -1,5 +1,4 @@
 import GridContainer from './GridContainer.vue';
-import TournamentCard from "../../Cards/TournamentCard/TournamentCard.vue";
 import MockTournaments from '../../../mocks/tournamentMock.js';
 export default {
     title: 'Containers/GridContainer',
@@ -10,18 +9,39 @@ export default {
 export const Default = {
     args: {
         items: MockTournaments,
-        component: 'TournamentCard'
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Date', link: '/sort/name'}
     }
 };
 export const EmptyBoard = {
     args: {
         tournaments: [],
-        component: 'TournamentCard'
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Name', link: '/sort/name'}
     }
 };
 export const WithTournaments = {
     args: {
         items: MockTournaments,
-        component: 'TournamentCard'
+        component: 'TournamentCard',
+        label: 'Sort by',
+        dropdownItems: [
+            {text: 'Name', link: '/sort/name'},
+            {text: 'Location', link: '/sort/location'},
+            {text: 'Date', link: '/sort/date'}
+        ],
+        selectedItem: {text: 'Name', link: '/sort/name'}
     }
 };

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

@@ -1,24 +1,30 @@
 <template>
-  <div class="border border-cloudy rounded-lg p-9 bg-white">
+  <div class="border border-dropdownSelect rounded-lg p-9 bg-white">
     <h1 class="w-full text-center mb-9">
-      <BaseText color="primary" size="2xl" text="Upcoming Tournaments" weight="normal" />
+      <BaseText color="primaryHighlight" size="2xl" text="Upcoming Tournaments" weight="normal" />
     </h1>
+    <div class="my-4">
+      <FilterAndSortBar :items="dropdownItems" :label="label" :selectedItem="selectedItem" @filterbar="handleFilter" @sort="handleSort"/>
+    </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 w-full">
-        <div v-for="item in items" :key="item.id">
-          <component :is="component" :detail="item" />
+      <div v-for="item in filteredItems" :key="item.id">
+        <component :is="component" :detail="item" />
       </div>
     </div>
   </div>
 
 </template>
 
+
 <script>
 import BaseText from "../../Base/Text/BaseText.vue";
 import TournamentCard from "../../Cards/TournamentCard/TournamentCard.vue";
+import FilterAndSortBar from "../../Filters/FilterAndSortBar/FilterAndSortBar.vue";
 
 export default {
   name: 'GridContainer',
   components: {
+    FilterAndSortBar,
     BaseText,
     TournamentCard
   },
@@ -30,6 +36,55 @@ export default {
     component: {
       type: String,
       required: true
+    },
+    label: {
+      type: String,
+    },
+    dropdownItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedItem: null
+  },
+  data() {
+    return {
+      filterOn: '',
+      sortCriteria: 'Date'
+    };
+  },
+  computed: {
+    filteredItems() {
+      let result = this.items;
+
+      if (this.filterOn.trim()) {
+        const lowerCaseSearchText = this.filterOn.toLowerCase();
+        result = result.filter(item =>
+            Object.values(item).some(value =>
+                typeof value === 'string' && value.toLowerCase().includes(lowerCaseSearchText)
+            )
+        );
+      }
+
+      switch(this.sortCriteria) {
+        case 'Date':
+          result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
+          break;
+        case 'Name':
+          result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+          break;
+        case 'Location':
+          result = [...result].sort((a, b) => a.location.localeCompare(b.location));
+          break;
+      }
+      return result;
+    }
+  },
+  methods: {
+    handleFilter(filterText) {
+      this.filterOn = filterText;
+    },
+    handleSort(criteria) {
+      this.sortCriteria = criteria.text;
     }
   }
 };

package/src/stories/Filters/FilterAndSortBar/FilterAndSortBar.vue

@@ -2,10 +2,10 @@
   <section class="flex flex-row w-full justify-between">
     <div class="rounded-lg shadow px-2 py-1 w-1/2 flex flex-row mt-0.5">
       <i class="fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" />
-      <BaseInput placeholder="Search on Name, Location, or Date" class="text-quaternary"  />
+      <BaseInput placeholder="Search on Name, Location, or Date" class="text-quaternary" :value="filterText" @update:value="handleFilter" />
     </div>
     <div>
-      <DropDownMenu :label="label" :items="items" :selectedItem="selectedItem" />
+      <DropDownMenu :label="label" :items="items" :selectedItem="selectedItem" @update:selectedItem="handleSelectedItem" />
     </div>
   </section>
 </template>
@@ -20,6 +20,11 @@ export default {
     DropDownMenu,
     BaseInput
   },
+  data() {
+    return {
+      filterText: ''
+    };
+  },
   props: {
     label: {
       type: String,
@@ -31,9 +36,13 @@ export default {
     selectedItem: null
   },
   methods: {
-    handleButtonClick(button) {
-      this.$emit('button-click', button);
-    }
+    handleFilter(filterText) {
+      this.$emit('filterbar', filterText);
+    },
+    handleSelectedItem(item) {
+      this.$emit('sort', item)
+      console.log('handleSelectedItem', item)
+    },
   }
 };
 </script>

package/src/stories/Menu/Admin/AdminLeftMenu.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-backgroundSecondary w-64 h-screen flex flex-col justify-between bg-secondary">
-    <section class="h-28 border-b-2 border-borderPrimary">
+  <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
+    <section class="h-28 border-b-2 border-neutral">
       <div class="flex flex-col justify-center h-28">
         <div class="ml-8">
           <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png" />
@@ -18,7 +18,7 @@
       />
     </section>
     <section class="flex flex-col justify-end p-2 h-full">
-      <div class="border-t-2 border-borderPrimary pt-2">
+      <div class="border-t-2 border-neutral pt-2">
         <BaseButton
             iconClass="fa-solid fa-circle-user text-textSecondary"
             label="Account"

package/src/stories/Menu/DropDown/DropDownMenu.vue

@@ -6,10 +6,10 @@
 
     <span>
       <div class="z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between" @click="handleDropDown()">
-        <BaseText :text="selectedItem.text" color="secondary" size="xs" weight="normal" />
+        <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
         <i class="fa-solid fa-chevron-down text-xs" />
       </div>
-      <div v-if="isDropDownOpen" class="flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute">
+      <div v-if="isDropDownOpen" class="flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-white">
         <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0">
           <BaseText :text="item.text" color="primary" size="xs" weight="normal" />
         </a>
@@ -39,7 +39,7 @@ export default {
   methods: {
     handleClick(item) {
       this.isDropDownOpen = false;
-      console.log(`menu item clicked ${item}`);
+      this.$emit('update:selectedItem', item);
     },
     handleDropDown() {
       this.isDropDownOpen = !this.isDropDownOpen;

package/tailwind/output.css

@@ -559,6 +559,11 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.my-4{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-9{
   margin-bottom: 2.25rem;
 }
@@ -627,6 +632,10 @@ video {
   height: 100vh;
 }
 
+.w-1\/2{
+  width: 50%;
+}
+
 .w-11\/12{
   width: 91.666667%;
 }
@@ -651,14 +660,6 @@ video {
   width: 100%;
 }
 
-.w-3\/4{
-  width: 75%;
-}
-
-.w-1\/2{
-  width: 50%;
-}
-
 .cursor-pointer{
   cursor: pointer;
 }
@@ -751,6 +752,11 @@ video {
   border-color: rgb(213 228 238 / var(--tw-border-opacity));
 }
 
+.border-neutral{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-secondary{
   --tw-border-opacity: 1;
   border-color: rgb(43 50 75 / var(--tw-border-opacity));
@@ -831,15 +837,14 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-4{
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .pb-3{
   padding-bottom: 0.75rem;
 }
 
+.pt-1{
+  padding-top: 0.25rem;
+}
+
 .pt-2{
   padding-top: 0.5rem;
 }
@@ -848,10 +853,6 @@ video {
   padding-top: 1rem;
 }
 
-.pt-1{
-  padding-top: 0.25rem;
-}
-
 .text-center{
   text-align: center;
 }
@@ -960,6 +961,10 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .last\:border-0:last-child{
   border-width: 0px;
 }