Tidy search page components

src/components/ButtonCheckbox.vue

@@ -12,7 +12,6 @@ function onUpdate() {
   if (Array.isArray(props.modelValue) && props.value) {
     const newValue = [...props.modelValue]
 
-    console.log(newValue)
     if (isChecked.value) {
       newValue.splice(newValue.indexOf(props.value), 1)
     } else {

src/components/SeasonIcon.vue

@@ -31,7 +31,8 @@ export default {
   content: attr(data-season);
   display: block;
   position: absolute;
-  bottom: -1.85rem;
+  bottom: -0.75rem;
+  width: 100%;
   border-radius: 3px;
   font-size: 0.75rem;
   background-color: #00d1b2;

src/components/SkillIcon.vue

@@ -33,6 +33,7 @@ export default {
   display: block;
   position: absolute;
   bottom: -0.85rem;
+  width: 100%;
   border-radius: 3px;
   font-size: 0.75rem;
   background-color: #209cee;

src/components/search/ItemSearch.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
-defineProps<{ modelValue: string }>()
+import { computed } from 'vue'
-defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+
+const props = defineProps<{ modelValue: string }>()
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
 </script>
 
 <template>
@@ -11,12 +22,7 @@ defineEmits<{ (e: 'update:modelValue', value: string): void }>()
     <div class="field-body">
       <div class="field">
         <div class="control">
-          <input
+          <input class="input" placeholder="Item Name" v-model="value" />
-            class="input"
-            placeholder="Item Name"
-            :value="modelValue"
-            @input="$emit('update:modelValue', $event.target?.value)"
-          />
         </div>
       </div>
     </div>

src/components/search/SearchForm.vue

@@ -15,13 +15,10 @@ const props = defineProps<{
 const emit = defineEmits<{ (e: 'update:filters', val: Filters): void }>()
 
 function updateName(name: string) {
-  const obj = { ...props.filters, nameFilter: name }
-  console.log(obj, name)
   emit('update:filters', { ...props.filters, nameFilter: name })
 }
 
 function updateSeasons(seasonFilter: typeof props.filters.seasonFilter) {
-  console.log(seasonFilter)
   emit('update:filters', { ...props.filters, seasonFilter })
 }
 
@@ -33,13 +30,13 @@ function updateSkills(skillFilter: typeof props.filters.skillFilter) {
 <template>
   <div class="columns">
     <div class="column">
-      <ItemSearch v-model="filters.nameFilter" />
+      <ItemSearch :modelValue="filters.nameFilter" @update:modelValue="updateName" />
     </div>
     <div class="column">
-      <SeasonFilter v-model="filters.seasonFilter" />
+      <SeasonFilter :modelValue="filters.seasonFilter" @update:modelValue="updateSeasons" />
     </div>
     <div class="column">
-      <SkillFilter v-model="filters.skillFilter" />
+      <SkillFilter :modelValue="filters.skillFilter" @update:modelValue="updateSkills" />
     </div>
   </div>
 </template>

src/components/search/SeasonFilter.vue

@@ -36,7 +36,7 @@ function updateExclusive(val: boolean) {
             @update:modelValue="updateSeasons"
           >
             <span class="icon is-small">
-              <season-icon :season="season.id"></season-icon>
+              <SeasonIcon :season="season.id"></SeasonIcon>
             </span>
           </ButtonCheckbox>
         </div>

src/components/search/SkillFilter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SkillIcon from '@/components/SkillIcon.vue'
-import ButtonCheck from '@/components/ButtonCheckbox.vue'
+import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
 import { useGeneralStore } from '@/store'
 
 interface ModelValue {
@@ -36,20 +36,20 @@ function updateExclusive(val: boolean) {
             @update:modelValue="updateSkills"
           >
             <span class="icon is-small">
-              <skill-icon :skill="skill.id" />
+              <SkillIcon :skill="skill.id" />
             </span>
           </ButtonCheckbox>
         </div>
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <ButtonCheck
+          <ButtonCheckbox
             class="is-fullwidth"
             :modelValue="modelValue.skillExclusive"
             @update:modelValue="updateExclusive"
           >
             Exclusive
-          </ButtonCheck>
+          </ButtonCheckbox>
         </div>
       </div>
     </div>

src/views/SearchView.vue

@@ -4,11 +4,11 @@ import ItemTable from '@/components/item_table/ItemTable.vue'
 import SearchForm from '@/components/search/SearchForm.vue'
 import { useGeneralStore } from '@/store'
 import _ from 'lodash'
-import { computed, reactive } from 'vue'
+import { computed, ref } from 'vue'
 
 const store = useGeneralStore()
 
-const filters = reactive({
+const filters = ref({
   nameFilter: '',
   seasonFilter: {
     selectedSeasons: ['spring', 'summer', 'fall', 'winter'],
@@ -21,12 +21,12 @@ const filters = reactive({
 })
 
 function filterSeasons(itemSeasons: string[]) {
-  if (filters.seasonFilter.seasonExclusive) {
+  if (filters.value.seasonFilter.seasonExclusive) {
-    if (itemSeasons.length !== filters.seasonFilter.selectedSeasons.length) {
+    if (itemSeasons.length !== filters.value.seasonFilter.selectedSeasons.length) {
       return false
     } else {
       var a = itemSeasons
-      var b = filters.seasonFilter.selectedSeasons
+      var b = filters.value.seasonFilter.selectedSeasons
       a.sort()
       b.sort()
       for (var i = 0; i < a.length; ++i) {
@@ -37,7 +37,7 @@ function filterSeasons(itemSeasons: string[]) {
       return true
     }
   } else {
-    for (var season of filters.seasonFilter.selectedSeasons) {
+    for (var season of filters.value.seasonFilter.selectedSeasons) {
       if (itemSeasons.indexOf(season) !== -1) {
         return true
       }
@@ -46,12 +46,12 @@ function filterSeasons(itemSeasons: string[]) {
   }
 }
 function filterSkills(itemSkills: string[]) {
-  if (filters.skillFilter.skillExclusive) {
+  if (filters.value.skillFilter.skillExclusive) {
-    if (itemSkills.length !== filters.skillFilter.selectedSkills.length) {
+    if (itemSkills.length !== filters.value.skillFilter.selectedSkills.length) {
       return false
     } else {
       var a = itemSkills
-      var b = filters.skillFilter.selectedSkills
+      var b = filters.value.skillFilter.selectedSkills
       a.sort()
       b.sort()
       for (var i = 0; i < a.length; ++i) {
@@ -62,7 +62,7 @@ function filterSkills(itemSkills: string[]) {
       return true
     }
   } else {
-    for (var season of filters.skillFilter.selectedSkills) {
+    for (var season of filters.value.skillFilter.selectedSkills) {
       if (itemSkills.indexOf(season) !== -1) {
         return true
       }
@@ -75,7 +75,9 @@ const filteredItems = computed(() => {
   return _.orderBy(
     store.items
       .filter((item) => !(store.HideCompleted && store.isItemComplete(item.id)))
-      .filter((item) => item.name.toLowerCase().indexOf(filters.nameFilter.toLowerCase()) !== -1)
+      .filter(
+        (item) => item.name.toLowerCase().indexOf(filters.value.nameFilter.toLowerCase()) !== -1
+      )
       .filter((item) => filterSeasons(item.seasons))
       .filter((item) => filterSkills(item.skills)),
     'name'