Migrate remaining components to SFC

package.json

@@ -38,9 +38,11 @@
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.42.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint-plugin-vue": "^9.14.1",
+    "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",
     "postcss-url": "^10.1.3",
+    "prettier": "^2.8.8",
     "typescript": "^5.1.3",
     "vite": "^4.3.5"
   },

src/components/AppFooter.vue

@@ -1,57 +1,49 @@
+<script setup lang="ts">
+import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { RouterLink } from 'vue-router'
+</script>
+
 <template>
   <footer class="footer">
     <div class="container">
       <div class="content has-text-centered">
         <p>
           <strong>Stardew Community Checklist</strong> by
-          <a href="http://johncleaver.com">John Cleaver</a>. The source code is licensed
+          <a href="https://johncleaver.com">John Cleaver</a>. The source code is licensed
-          <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+          <a href="https://opensource.org/license/mit/">MIT</a>.
         </p>
         <p>
-          <router-link to="/changelog">Changelog</router-link>
+          <RouterLink to="/changelog">Changelog</RouterLink>
         </p>
         <p>
           Bundle and Item information is from the
-          <a href="http://stardewvalleywiki.com/Stardew_Valley_Wiki">Stardew Valley Wiki</a> and is
+          <a href="https://stardewvalleywiki.com">Stardew Valley Wiki</a> and is used under the
-          used under the
+          <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
-          <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
         </p>
         <p>
-          <a href="http://stardewvalley.net/">Stardew Valley</a> &copy;
+          <a href="https://stardewvalley.net/">Stardew Valley</a> &copy;
           <a href="https://chucklefish.org/">Chucklefish LTD</a>. Developed by
           <a href="https://twitter.com/ConcernedApe">ConcernedApe</a>.
         </p>
-        <p>
+        <div class="github-reddit">
-          <a :href="gh_address"><font-awesome-icon :icon="gh_icon" /></a>
+          <a href="https://github.com/kihashi/stardew_community_checklist">
-          <a :href="reddit_address"><font-awesome-icon :icon="reddit_icon" /></a>
+            <FontAwesomeIcon :icon="faGithub" />
-        </p>
+          </a>
+          <a href="https://www.reddit.com/r/stardewchecklist/">
+            <FontAwesomeIcon :icon="faReddit" />
+          </a>
+        </div>
       </div>
     </div>
   </footer>
 </template>
 
-<script>
+<style scoped>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+.github-reddit {
-import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+  display: flex;
-import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
+  gap: 0.4rem;
-export default {
+  justify-content: center;
-  name: 'app-footer',
-  components: {
-    'font-awesome-icon': FontAwesomeIcon
-  },
-  computed: {
-    gh_icon() {
-      return faGithub
-    },
-    reddit_icon() {
-      return faReddit
-    }
-  },
-  data: function () {
-    return {
-      gh_address: 'https://github.com/kihashi/stardew_community_checklist',
-      reddit_address: 'https://www.reddit.com/r/stardewchecklist/'
-    }
-  }
 }
-</script>
+</style>

src/components/SeasonIcon.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+defineProps<{ season: string }>()
+</script>
+
 <template>
-  <span class="icon" v-bind:data-season="season.id">
+  <span class="icon" v-bind:data-season="season">
     <mdicon name="flower" v-if="season === 'spring'" />
     <mdicon name="white-balance-sunny" v-if="season === 'summer'" />
     <mdicon name="leaf" v-if="season === 'fall'" />
@@ -7,21 +11,6 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'season-icon',
-  props: {
-    season: {
-      type: String,
-      required: true,
-      default: function () {
-        return 'spring'
-      }
-    }
-  }
-}
-</script>
-
 <style scoped>
 .icon {
   position: relative;
@@ -31,8 +20,7 @@ export default {
   content: attr(data-season);
   display: block;
   position: absolute;
-  bottom: -0.75rem;
+  bottom: -1.85rem;
-  width: 100%;
   border-radius: 3px;
   font-size: 0.75rem;
   background-color: #00d1b2;

src/components/SkillIcon.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+defineProps<{ skill: string }>()
+</script>
+
 <template>
-  <span class="icon" v-bind:data-skill="skill.id">
+  <span class="icon" v-bind:data-skill="skill">
     <mdicon name="cow" v-if="skill === 'farming'" />
     <mdicon name="diamond" v-if="skill === 'mining'" />
     <mdicon name="mushroom" v-if="skill === 'foraging'" />
@@ -8,21 +12,6 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'skill-icon',
-  props: {
-    skill: {
-      type: String,
-      required: true,
-      default: function () {
-        return 'farming'
-      }
-    }
-  }
-}
-</script>
-
 <style scoped>
 .icon {
   position: relative;
@@ -32,8 +21,7 @@ export default {
   content: attr(data-skill);
   display: block;
   position: absolute;
-  bottom: -0.85rem;
+  bottom: -1.85rem;
-  width: 100%;
   border-radius: 3px;
   font-size: 0.75rem;
   background-color: #209cee;

src/components/bundles/BundleItems.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ItemCard from '@/components/item_card/ItemCard.vue'
+import ItemCard from '@/components/item-card/ItemCard.vue'
-import ItemTable from '@/components/item_table/ItemTable.vue'
+import ItemTable from '@/components/item-table/ItemTable.vue'
-import { useGeneralStore } from '@/store'
+import { useGeneralStore, type Item } from '@/store'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -16,7 +16,10 @@ const bundleItems = computed(() =>
   bundle.value ? store.getBundleItemsInBundle(bundle.value.id) : []
 )
 const items = computed(() =>
-  bundleItems.value.map((i) => store.getItemById(i.item_id)).filter((v, i, a) => a.indexOf(v) === i)
+  bundleItems.value
+    .map((i) => store.getItemById(i.item_id))
+    .filter((item): item is Item => !!item)
+    .filter((v, i, a) => a.indexOf(v) === i)
 )
 const room = computed(() => (bundle.value ? store.getRoomById(bundle.value.room) : undefined))
 
@@ -68,7 +71,7 @@ const hideBundleItems = computed(() => store.HideSpoilers && store.BundleRewards
           v-else
           class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex"
           v-for="item in items"
-          :key="item?.id"
+          :key="item.id"
         >
           <item-card :item="item"></item-card>
         </div>

src/components/changelog/ChangeLog.vue

@@ -1,26 +0,0 @@
-<template>
-  <section class="section">
-    <section class="container">
-      <h1 class="title">Changelog</h1>
-      <version v-for="version in changelog.versions" :key="version.date" :version="version" />
-    </section>
-  </section>
-</template>
-
-<script>
-import ChangeLogJson from '@/assets/game_data/changelog.json'
-import Version from '@/components/changelog/Version.vue'
-export default {
-  name: 'changelog',
-  components: {
-    Version
-  },
-  data() {
-    return {
-      changelog: ChangeLogJson
-    }
-  }
-}
-</script>
-
-<style></style>

src/components/changelog/VersionDisplay.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    version: {
+      id: string
+      date: string
+      link: string
+      changes: string[]
+    }
+  }>(),
+  {
+    version: () => ({
+      id: 'Version 1.0',
+      date: '2016-04-13',
+      link: 'Version-1.0',
+      changes: ['Initial Version']
+    })
+  }
+)
+
+const releaseUrl = computed(
+  () => 'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + props.version.link
+)
+</script>
+
 <template>
   <div class="card">
     <header class="card-header">
@@ -8,7 +37,7 @@
     <div class="card-content">
       <div class="content">
         <ul>
-          <li v-for="change in version.changes" :key="change.date">
+          <li v-for="change in version.changes" :key="change">
             {{ change }}
           </li>
         </ul>
@@ -17,9 +46,9 @@
     <div class="card-footer">
       <p class="card-footer-item has-text-centered-mobile">Release Date: {{ version.date }}</p>
       <p class="card-footer-item">
-        <a :href="release_url" class="button">
+        <a :href="releaseUrl" class="button">
           <span class="icon">
-            <font-awesome-icon :icon="gh_icon" />
+            <FontAwesomeIcon :icon="faGithub" />
           </span>
           <span>Release</span>
         </a>
@@ -28,35 +57,4 @@
   </div>
 </template>
 
-<script>
-import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
-
-export default {
-  name: 'version',
-  props: {
-    version: {
-      type: Object,
-      default() {
-        return {
-          id: 'Version 1.0',
-          date: '2016-04-13',
-          link: 'Version-1.0',
-          changes: ['Initial Version']
-        }
-      }
-    }
-  },
-  computed: {
-    release_url() {
-      return (
-        'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + this.version.link
-      )
-    },
-    gh_icon() {
-      return faGithub
-    }
-  }
-}
-</script>
-
 <style></style>

src/components/item-card/SeasonList.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import SeasonTag from './SeasonTag.vue'
+
+withDefaults(defineProps<{ seasons: string[] }>(), {
+  seasons: () => ['spring', 'summer', 'fall', 'winter']
+})
+</script>
+
+<template>
+  <span class="tags has-addons">
+    <season-tag v-for="season in seasons" :key="season" :season="season" />
+  </span>
+</template>
+
+<style scoped>
+.tags {
+  justify-content: center;
+  flex-wrap: no-wrap;
+}
+</style>

src/components/item-card/SeasonTag.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="tag is-primary">
+    <season-icon :season="season" class="is-small"></season-icon>
+  </span>
+</template>
+
+<script setup lang="ts">
+import SeasonIcon from '@/components/SeasonIcon.vue'
+
+defineProps<{ season: string }>()
+</script>
+
+<style scoped></style>

src/components/item-card/SkillList.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="tags has-addons">
+    <skill-tag v-for="skill in skills" :key="skill" :skill="skill" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import SkillTag from './SkillTag.vue'
+
+defineProps<{ skills: string[] }>()
+</script>
+
+<style scoped>
+.tags {
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+</style>

src/components/item-card/SkillTag.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="tag is-info">
+    <SkillIcon :skill="skill" class="is-small" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import SkillIcon from '@/components/SkillIcon.vue'
+
+defineProps<{ skill: string }>()
+</script>
+
+<style scoped></style>

src/components/item-table/ItemTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <table class="table is-bordered is-striped is-narrow is-fullwidth">
+    <thead>
+      <tr>
+        <th>Item</th>
+        <th>Source</th>
+        <th v-if="showSeasonList">Seasons</th>
+        <th v-if="showSkillList">Skills</th>
+        <th>Bundles</th>
+      </tr>
+    </thead>
+    <tbody>
+      <ItemTableRow v-for="item in items" :key="item.id" :item="item" />
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import ItemTableRow from '@/components/item-table/ItemTableRow.vue'
+import { useGeneralStore, type Item } from '@/store'
+import { computed } from 'vue'
+
+const store = useGeneralStore()
+
+defineProps<{ items: Item[] }>()
+
+const showSeasonList = computed(() => !(store.HideSpoilers && store.SeasonsSpoilers))
+const showSkillList = computed(() => !(store.HideSpoilers && store.SkillsSpoilers))
+</script>
+
+<style lang="scss" scoped>
+table {
+  table-layout: fixed;
+}
+</style>

src/components/item-table/ItemTableRow.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import SeasonList from '../item-card/SeasonList.vue'
+import SkillList from '../item-card/SkillList.vue'
+import BundleButton from '../item-card/BundleButton.vue'
+import { useGeneralStore, type Item } from '@/store'
+import { computed } from 'vue'
+
+const store = useGeneralStore()
+
+const showSeasonList = computed(() => !(store.HideSpoilers && store.SeasonsSpoilers))
+const showSkillList = computed(() => !(store.HideSpoilers && store.SkillsSpoilers))
+
+defineProps<{ item: Item }>()
+</script>
+
+<template>
+  <tr>
+    <td>
+      {{ item.name }}
+    </td>
+    <td>
+      {{ item.source }}
+    </td>
+    <td v-if="showSeasonList">
+      <season-list :seasons="item.seasons" />
+    </td>
+    <td v-if="showSkillList">
+      <skill-list :skills="item.skills" />
+    </td>
+    <td>
+      <bundle-button
+        v-for="bundleItem in store.getBundleItemsForItem(item.id)"
+        :key="bundleItem.id"
+        :bundle-item="bundleItem"
+        :item="item"
+      />
+    </td>
+  </tr>
+</template>

src/components/item_card/SeasonList.vue

@@ -1,51 +0,0 @@
-<template>
-  <span class="tags has-addons">
-    <season-tag v-for="season in seasons" :key="season.order" :season="season" />
-  </span>
-</template>
-
-<script>
-import SeasonTag from './SeasonTag.vue'
-
-export default {
-  components: { SeasonTag },
-  name: 'season-list',
-  props: {
-    seasons: {
-      type: Array,
-      required: true,
-      default: function () {
-        return [
-          {
-            id: 'spring',
-            order: 0,
-            name: 'Spring'
-          },
-          {
-            id: 'summer',
-            order: 1,
-            name: 'Summer'
-          },
-          {
-            id: 'fall',
-            order: 2,
-            name: 'Fall'
-          },
-          {
-            id: 'winter',
-            order: 3,
-            name: 'Winter'
-          }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tags {
-  justify-content: center;
-  flex-wrap: no-wrap;
-}
-</style>

src/components/item_card/SeasonTag.vue

@@ -1,26 +0,0 @@
-<template>
-  <span class="tag is-primary">
-    <season-icon :season="season" class="is-small"></season-icon>
-  </span>
-</template>
-
-<script>
-import SeasonIcon from '@/components/SeasonIcon.vue'
-export default {
-  name: 'season-tag',
-  props: {
-    season: {
-      type: String,
-      required: true,
-      default: function () {
-        return 'spring'
-      }
-    }
-  },
-  components: {
-    SeasonIcon
-  }
-}
-</script>
-
-<style scoped></style>

src/components/item_card/SkillList.vue

@@ -1,27 +0,0 @@
-<template>
-  <span class="tags has-addons">
-    <skill-tag v-for="skill in skills" :key="skill.order" :skill="skill" />
-  </span>
-</template>
-
-<script>
-import SkillTag from './SkillTag.vue'
-
-export default {
-  components: { SkillTag },
-  name: 'skill-list',
-  props: {
-    skills: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tags {
-  justify-content: center;
-  flex-wrap: nowrap;
-}
-</style>

src/components/item_card/SkillTag.vue

@@ -1,27 +0,0 @@
-<template>
-  <span class="tag is-info">
-    <skill-icon :skill="skill" class="is-small" />
-  </span>
-</template>
-
-<script>
-import SkillIcon from '@/components/SkillIcon.vue'
-
-export default {
-  name: 'skill-tag',
-  props: {
-    skill: {
-      type: String,
-      required: true,
-      default: function () {
-        return 'farming'
-      }
-    }
-  },
-  components: {
-    SkillIcon
-  }
-}
-</script>
-
-<style scoped></style>

src/components/item_table/ItemTable.vue

@@ -1,49 +0,0 @@
-<template>
-  <table class="table is-bordered is-striped is-narrow is-fullwidth">
-    <thead>
-      <tr>
-        <th>Item</th>
-        <th>Source</th>
-        <th v-if="showSeasonList">Seasons</th>
-        <th v-if="showSkillList">Skills</th>
-        <th>Bundles</th>
-      </tr>
-    </thead>
-    <tbody>
-      <item-table-row v-for="item in items" :key="item.id" :item="item" />
-    </tbody>
-  </table>
-</template>
-
-<script>
-import ItemTableRow from '@/components/item_table/ItemTableRow.vue'
-
-export default {
-  name: 'ItemTable',
-  components: {
-    ItemTableRow
-  },
-  data() {
-    return {}
-  },
-  props: {
-    items: {
-      type: Array
-    }
-  },
-  computed: {
-    showSeasonList: function () {
-      return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
-    },
-    showSkillList: function () {
-      return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-table {
-  table-layout: fixed;
-}
-</style>

src/components/item_table/ItemTableRow.vue

@@ -1,121 +0,0 @@
-<template>
-  <tr>
-    <td>
-      {{ item.name }}
-    </td>
-    <td>
-      {{ item.source }}
-    </td>
-    <td v-if="showSeasonList">
-      <season-list :seasons="item.seasons" />
-    </td>
-    <td v-if="showSkillList">
-      <skill-list :skills="item.skills" />
-    </td>
-    <td>
-      <bundle-button
-        v-for="bundleItem in item.bundles"
-        :key="bundleItem.id"
-        :bundle-item="bundleItem"
-        :item="item"
-      />
-    </td>
-  </tr>
-</template>
-
-<script>
-import SeasonList from '../item_card/SeasonList.vue'
-import SkillList from '../item_card/SkillList.vue'
-import BundleButton from '../item_card/BundleButton.vue'
-export default {
-  name: 'ItemTable',
-  components: {
-    BundleButton,
-    SkillList,
-    SeasonList
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    showItemDesc: function () {
-      return !(this.$store.state.HideSpoilers && this.$store.state.ItemInfoSpoilers)
-    },
-    showSeasonList: function () {
-      return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
-    },
-    showSkillList: function () {
-      return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
-    }
-  },
-  props: {
-    item: {
-      type: Object,
-      default: function () {
-        return {
-          id: 22,
-          name: 'Purple Mushroom',
-          source:
-            'Can be found in the mines or in the farm cave if you selected the mushroom perk.',
-          seasons: [
-            {
-              id: 'spring',
-              order: 0,
-              name: 'Spring'
-            },
-            {
-              id: 'summer',
-              order: 1,
-              name: 'Summer'
-            },
-            {
-              id: 'fall',
-              order: 2,
-              name: 'Fall'
-            },
-            {
-              id: 'winter',
-              order: 3,
-              name: 'Winter'
-            }
-          ],
-          skills: [
-            {
-              id: 'mining',
-              order: 1,
-              name: 'Mining'
-            },
-            {
-              id: 'foraging',
-              order: 2,
-              name: 'Foraging'
-            }
-          ],
-          bundles: [
-            {
-              count: 1,
-              bundle: {
-                id: 5,
-                name: 'Exotic Foraging Bundle',
-                room: 0,
-                reward: "Autumn's Bounty (5)"
-              },
-              id: 24
-            },
-            {
-              count: 1,
-              bundle: {
-                id: 23,
-                name: 'Field Research Bundle',
-                room: 4,
-                reward: 'Recycling Machine'
-              },
-              id: 25
-            }
-          ]
-        }
-      }
-    }
-  }
-}
-</script>

src/components/search/SearchForm.vue

@@ -9,34 +9,19 @@ interface Filters {
   skillFilter: { selectedSkills: string[]; skillExclusive: boolean }
 }
 
-const props = defineProps<{
+const filters = defineModel<Filters>()
-  filters: Filters
-}>()
-const emit = defineEmits<{ (e: 'update:filters', val: Filters): void }>()
-
-function updateName(name: string) {
-  emit('update:filters', { ...props.filters, nameFilter: name })
-}
-
-function updateSeasons(seasonFilter: typeof props.filters.seasonFilter) {
-  emit('update:filters', { ...props.filters, seasonFilter })
-}
-
-function updateSkills(skillFilter: typeof props.filters.skillFilter) {
-  emit('update:filters', { ...props.filters, skillFilter })
-}
 </script>
 
 <template>
-  <div class="columns">
+  <div class="columns" v-if="filters">
     <div class="column">
-      <ItemSearch :modelValue="filters.nameFilter" @update:modelValue="updateName" />
+      <ItemSearch v-model="filters.nameFilter" />
     </div>
     <div class="column">
-      <SeasonFilter :modelValue="filters.seasonFilter" @update:modelValue="updateSeasons" />
+      <SeasonFilter v-model="filters.seasonFilter" />
     </div>
     <div class="column">
-      <SkillFilter :modelValue="filters.skillFilter" @update:modelValue="updateSkills" />
+      <SkillFilter v-model="filters.skillFilter" />
     </div>
   </div>
 </template>

src/components/search/SeasonFilter.vue

@@ -3,23 +3,14 @@ import SeasonIcon from '@/components/SeasonIcon.vue'
 import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
 import { useGeneralStore } from '@/store'
 
+const store = useGeneralStore()
+
 interface ModelValue {
   selectedSeasons: string[]
   seasonExclusive: boolean
 }
 
-const props = defineProps<{ modelValue: ModelValue }>()
+const modelValue = defineModel<ModelValue>()
-const emit = defineEmits<{ (e: 'update:modelValue', value: ModelValue): void }>()
-
-const store = useGeneralStore()
-
-function updateSeasons(val: string[]) {
-  emit('update:modelValue', { ...props.modelValue, selectedSeasons: val })
-}
-
-function updateExclusive(val: boolean) {
-  emit('update:modelValue', { ...props.modelValue, seasonExclusive: val })
-}
 </script>
 
 <template>
@@ -27,14 +18,10 @@ function updateExclusive(val: boolean) {
     <div class="field-label is-normal">
       <label class="label">Season</label>
     </div>
-    <div class="field-body">
+    <div class="field-body" v-if="modelValue">
       <div class="field has-addons has-addons-centered">
         <div class="control" v-for="season in store.seasons" :key="season.order">
-          <ButtonCheckbox
+          <ButtonCheckbox :value="season.id" v-model="modelValue.selectedSeasons">
-            :value="season.id"
-            :modelValue="modelValue.selectedSeasons"
-            @update:modelValue="updateSeasons"
-          >
             <span class="icon is-small">
               <SeasonIcon :season="season.id"></SeasonIcon>
             </span>
@@ -43,11 +30,7 @@ function updateExclusive(val: boolean) {
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <ButtonCheckbox
+          <ButtonCheckbox class="is-fullwidth" v-model="modelValue.seasonExclusive">
-            class="is-fullwidth"
-            :modelValue="modelValue.seasonExclusive"
-            @update:modelValue="updateExclusive"
-          >
             Exclusive
           </ButtonCheckbox>
         </div>

src/components/search/SkillFilter.vue

@@ -8,18 +8,9 @@ interface ModelValue {
   skillExclusive: boolean
 }
 
-const props = defineProps<{ modelValue: ModelValue }>()
+const modelValue = defineModel<ModelValue>()
-const emit = defineEmits<{ (e: 'update:modelValue', value: ModelValue): void }>()
 
 const store = useGeneralStore()
-
-function updateSkills(val: string[]) {
-  emit('update:modelValue', { ...props.modelValue, selectedSkills: val })
-}
-
-function updateExclusive(val: boolean) {
-  emit('update:modelValue', { ...props.modelValue, skillExclusive: val })
-}
 </script>
 
 <template>
@@ -27,14 +18,10 @@ function updateExclusive(val: boolean) {
     <div class="field-label is-normal">
       <label class="label">Skills</label>
     </div>
-    <div class="field-body">
+    <div class="field-body" v-if="modelValue">
       <div class="field has-addons has-addons-centered">
         <div class="control" v-for="skill in store.skills" :key="skill.id">
-          <ButtonCheckbox
+          <ButtonCheckbox :value="skill.id" v-model="modelValue.selectedSkills">
-            :value="skill.id"
-            :modelValue="modelValue.selectedSkills"
-            @update:modelValue="updateSkills"
-          >
             <span class="icon is-small">
               <SkillIcon :skill="skill.id" />
             </span>
@@ -43,11 +30,7 @@ function updateExclusive(val: boolean) {
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <ButtonCheckbox
+          <ButtonCheckbox class="is-fullwidth" v-model="modelValue.skillExclusive">
-            class="is-fullwidth"
-            :modelValue="modelValue.skillExclusive"
-            @update:modelValue="updateExclusive"
-          >
             Exclusive
           </ButtonCheckbox>
         </div>

src/router/index.ts

@@ -5,7 +5,7 @@ import Bundles from '@/views/BundlesView.vue'
 import BundleItems from '@/components/bundles/BundleItems.vue'
 import Search from '@/views/SearchView.vue'
 import Settings from '@/views/SettingsView.vue'
-import ChangeLog from '@/components/changelog/ChangeLog.vue'
+import Changelog from '@/views/ChangelogView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -49,7 +49,7 @@ const router = createRouter({
     },
     {
       path: '/changelog',
-      component: ChangeLog
+      component: Changelog
     }
   ],
   linkActiveClass: 'is-active'

src/views/BundlesView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import BundleNav from '@/components/bundles/BundleNav.vue'
-import router from '@/router'
 import { useGeneralStore } from '@/store'
-import { RouterView } from 'vue-router'
+import { RouterView, useRouter } from 'vue-router'
 
+const router = useRouter()
 const store = useGeneralStore()
+
 const bundle = store.getBundleById(Number(router.currentRoute.value.params.id))
 </script>
 
@@ -12,19 +13,7 @@ const bundle = store.getBundleById(Number(router.currentRoute.value.params.id))
   <div>
     <BundleNav />
     <section class="section">
-      <RouterView :key="bundle?.id"></RouterView>
+      <RouterView :key="bundle?.id" />
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-</style>

src/views/ChangelogView.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ChangeLogJson from '@/assets/game_data/changelog.json'
+import Version from '@/components/changelog/VersionDisplay.vue'
+</script>
+
+<template>
+  <section class="section">
+    <section class="container">
+      <h1 class="title">Changelog</h1>
+      <Version v-for="version in ChangeLogJson.versions" :key="version.date" :version="version" />
+    </section>
+  </section>
+</template>
+
+<style></style>

src/views/SearchView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ItemCard from '@/components/item_card/ItemCard.vue'
+import ItemCard from '@/components/item-card/ItemCard.vue'
-import ItemTable from '@/components/item_table/ItemTable.vue'
+import ItemTable from '@/components/item-table/ItemTable.vue'
 import SearchForm from '@/components/search/SearchForm.vue'
 import { useGeneralStore } from '@/store'
 import _ from 'lodash'
@@ -87,7 +87,7 @@ const filteredItems = computed(() => {
 
 <template>
   <section class="section">
-    <SearchForm v-model:filters="filters"></SearchForm>
+    <SearchForm v-model="filters"></SearchForm>
     <section class="container">
       <div class="columns is-multiline">
         <ItemTable v-if="store.CompactView" :items="filteredItems" />

vite.config.js

@@ -1,15 +0,0 @@
-import { fileURLToPath, URL } from "node:url";
-
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), vueJsx()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-});

vite.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue({ script: { defineModel: true } }), vueJsx()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})

yarn.lock

@@ -1117,7 +1117,7 @@ eslint-plugin-prettier@^4.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^9.11.0:
+eslint-plugin-vue@^9.14.1:
   version "9.14.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.14.1.tgz#3b0c9857642dac547c7564031cfb09d283eafdd4"
   integrity sha512-LQazDB1qkNEKejLe/b5a9VfEbtbczcOaui5lQ4Qw0tbRBbQYREyxxOV5BQgNDTqGPs9pxqiEpbMi9ywuIaF7vw==
@@ -1764,7 +1764,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.10, postcss@^8.4.23:
+postcss@^8.1.10, postcss@^8.4.23, postcss@^8.4.24:
   version "8.4.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
   integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
@@ -1785,6 +1785,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"