chore: bump version number

.browserslistrc

@@ -1,2 +1,3 @@
+defaults
+>1% and not dead
 last 2 versions
-not dead

.gitignore

@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
 }

package.json

@@ -1,38 +1,38 @@
 {
   "name": "sebin-reference",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "private": true,
   "scripts": {
     "dev": "vite --host",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.3.4",
+    "vue": "^3.4.38",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
+    "@rushstack/eslint-patch": "^1.10.4",
-    "@tsconfig/node18": "^18.2.1",
+    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^18.17.12",
+    "@types/node": "^20.16.3",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.20",
-    "eslint": "^8.48.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.28.0",
     "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.2",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.3",
-    "sass": "^1.66.1",
+    "sass": "^1.77.8",
-    "typescript": "^5.2.2",
+    "typescript": "~5.5.0",
-    "vite": "^4.4.9",
+    "vite": "^5.4.2",
-    "vite-imagetools": "^5.0.8",
+    "vite-imagetools": "^6.2.9",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^2.1.4"
   }
 }

src/components/FilterButton.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Ratings } from '@/interfaces'
 
 interface Props {
   modelValue: number[]
-  id: string
   name?: string
-  kind: string
+  value: Ratings
-  value: number
 }
 
 interface Emits {
@@ -32,12 +31,16 @@ const checked = computed({
       class="filter-button__input"
       type="checkbox"
       :name="name"
-      :id="id"
+      :id="Ratings[value].toLowerCase()"
       :value="value"
       v-model="checked"
     />
-    <label :for="id" class="filter-button__label" :class="[kind]">
+    <label
-      <slot></slot>
+      :for="Ratings[value].toLowerCase()"
+      class="filter-button__label"
+      :class="[Ratings[value].toLowerCase()]"
+    >
+      {{ Ratings[value] }}
     </label>
   </div>
 </template>

src/components/FilterListTag.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 interface Props {
-  type?: string
+  type: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <span class="filter-list__tag" :class="type">
+  <span class="filter-list__tag" :class="type.toLowerCase()">
-    <slot></slot>
+    <span>{{ type }}</span>
   </span>
 </template>
 

src/components/FilteredList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { Ratings, Role } from '@/interfaces'
 import type { Kink } from '@/interfaces'
 import FilterButton from '@/components/FilterButton.vue'
 import FilterListTag from '@/components/FilterListTag.vue'
@@ -17,36 +18,15 @@ const filteredItems = computed(() =>
     .sort((a, b) => a.rating - b.rating)
     .filter((kink) => filterOptions.value.some((filterNum) => kink.rating === filterNum))
 )
-
-const toLabel = (rating: number) => {
-  switch (rating) {
-    case 1:
-      return 'Love'
-    case 2:
-      return 'Yes'
-    case 3:
-      return 'Maybe'
-    case 4:
-      return 'No'
-  }
-}
 </script>
 
 <template>
   <div class="filter-list">
     <div class="filter-list__filters">
-      <FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
+      <FilterButton name="rating" :value="Ratings.Love" v-model="filterOptions" />
-        Love
+      <FilterButton name="rating" :value="Ratings.Yes" v-model="filterOptions" />
-      </FilterButton>
+      <FilterButton name="rating" :value="Ratings.Maybe" v-model="filterOptions" />
-      <FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
+      <FilterButton name="rating" :value="Ratings.No" v-model="filterOptions" />
-        Yes
-      </FilterButton>
-      <FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
-        Maybe
-      </FilterButton>
-      <FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
-        No
-      </FilterButton>
     </div>
 
     <div class="filter-list__list-container">
@@ -56,22 +36,19 @@ const toLabel = (rating: number) => {
             <FilterListTag
               v-if="filterOptions.length > 1"
               class="category"
-              :type="toLabel(item.rating)?.toLowerCase()"
+              :type="Ratings[item.rating]"
-            >
+            />
-              <span>{{ toLabel(item.rating) }}</span>
-            </FilterListTag>
-
             <span class="filter-list__item-name">
               <span>{{ item.name }}</span>
             </span>
-
+            <FilterListTag
-            <FilterListTag type="receive">
+              v-if="((item.role ?? 0) & Role.Receive) === Role.Receive"
-              <span v-if="item.receive">receive</span>
+              :type="Role[Role.Receive]"
-            </FilterListTag>
+            />
-
+            <FilterListTag
-            <FilterListTag type="give">
+              v-if="((item.role ?? 0) & Role.Give) === Role.Give"
-              <span v-if="item.give">give</span>
+              :type="Role[Role.Give]"
-            </FilterListTag>
+            />
           </li>
         </ul>
       </template>

src/interfaces.ts

@@ -6,8 +6,20 @@ interface ColorDict {
 interface Kink {
   name: string
   rating: number
-  receive?: boolean
+  role?: Role
-  give?: boolean
+}
+
+export enum Ratings {
+  Love,
+  Yes,
+  Maybe,
+  No
+}
+
+export enum Role {
+  Give = 1,
+  Receive = 2,
+  Both = Give | Receive
 }
 
 export type { ColorDict, Kink }

src/sebin.ts

@@ -1,3 +1,5 @@
+import { Ratings, Role } from '@/interfaces'
+
 export const firstName = 'Sebin',
   middleName = 'Antario',
   lastName = 'Nyshkim',
@@ -31,50 +33,50 @@ export const firstName = 'Sebin',
     girth: 5 // cm
   },
   kinks = [
-    { name: 'Absorption', rating: 4 },
+    { name: 'Absorption', rating: Ratings.No },
-    { name: 'Anal', rating: 1, recive: true, give: true },
+    { name: 'Anal', rating: Ratings.Love, role: Role.Both },
-    { name: 'Auto-Fellatio', rating: 2 },
+    { name: 'Auto-Fellatio', rating: Ratings.Yes },
-    { name: 'Biting', rating: 2, receive: true, give: true },
+    { name: 'Biting', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Bukkake', rating: 2, receive: false, give: true },
+    { name: 'Bukkake', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Chastity', rating: 4 },
+    { name: 'Chastity', rating: Ratings.No },
-    { name: 'Chubby', rating: 3 },
+    { name: 'Chubby', rating: Ratings.Maybe },
-    { name: 'Clothed Sex', rating: 2 },
+    { name: 'Clothed Sex', rating: Ratings.Yes },
-    { name: 'Cock Slapping', rating: 2, receive: false, give: true },
+    { name: 'Cock Slapping', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Coiling', rating: 3, receive: false, give: true },
+    { name: 'Coiling', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Competition', rating: 3, receive: false, give: true },
+    { name: 'Competition', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Creampie', rating: 2, receive: false, give: true },
+    { name: 'Creampie', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Crushing (Living/Objects)', rating: 4 },
+    { name: 'Crushing (Living/Objects)', rating: Ratings.No },
-    { name: 'Cum From Mouth/Nose', rating: 2, receive: false, give: true },
+    { name: 'Cum From Mouth/Nose', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Cum Inflation (Light/Medium)', rating: 2 },
+    { name: 'Cum Inflation (Light/Medium)', rating: Ratings.Yes },
-    { name: 'Deep-throat', rating: 2, receive: true, give: false },
+    { name: 'Deep-throat', rating: Ratings.Yes, role: Role.Receive },
-    { name: 'Dirty Talking', rating: 2 },
+    { name: 'Dirty Talking', rating: Ratings.Yes },
-    { name: 'Excessive Cum', rating: 1, receive: true, give: true },
+    { name: 'Excessive Cum', rating: Ratings.Love, role: Role.Both },
-    { name: 'Face-Fucking', rating: 2, receive: false, give: true },
+    { name: 'Face-Fucking', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Facial', rating: 2, receive: false, give: true },
+    { name: 'Facial', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Feet', rating: 4 },
+    { name: 'Feet', rating: Ratings.No },
-    { name: 'Filled Condoms', rating: 2 },
+    { name: 'Filled Condoms', rating: Ratings.Yes },
-    { name: 'Foreplay', rating: 2, receive: true, give: true },
+    { name: 'Foreplay', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Frotting', rating: 2 },
+    { name: 'Frotting', rating: Ratings.Yes },
-    { name: 'Gangbangs', rating: 2 },
+    { name: 'Gangbangs', rating: Ratings.Yes },
-    { name: 'Growth', rating: 1, receive: true, give: false },
+    { name: 'Growth', rating: Ratings.Love, role: Role.Receive },
-    { name: 'Handjobs', rating: 2, receive: true, give: true },
+    { name: 'Handjobs', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Hotdogging', rating: 2, receive: false, give: true },
+    { name: 'Hotdogging', rating: Ratings.Yes, role: Role.Give },
-    { name: 'Kissing', rating: 2, receive: true, give: true },
+    { name: 'Kissing', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Macro', rating: 1 },
+    { name: 'Macro', rating: Ratings.Love },
-    { name: 'Milking', rating: 2 },
+    { name: 'Milking', rating: Ratings.Yes },
-    { name: 'Muscle Growth', rating: 1, receive: true, give: true },
+    { name: 'Muscle Growth', rating: Ratings.Love, role: Role.Both },
-    { name: 'Muscle Worship', rating: 2, receive: true, give: true },
+    { name: 'Muscle Worship', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Nipple Play', rating: 2, receive: true, give: true },
+    { name: 'Nipple Play', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Oral', rating: 1, receive: true, give: true },
+    { name: 'Oral', rating: Ratings.Love, role: Role.Both },
-    { name: 'Rough', rating: 2, receive: true, give: true },
+    { name: 'Rough', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Sheath Play', rating: 2, receive: true, give: true },
+    { name: 'Sheath Play', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Size Difference', rating: 1 },
+    { name: 'Size Difference', rating: Ratings.Love },
-    { name: 'Slime/Goo Characters', rating: 2 },
+    { name: 'Slime/Goo Characters', rating: Ratings.Yes },
-    { name: 'Spanking', rating: 3, receive: false, give: true },
+    { name: 'Spanking', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Tailsex', rating: 2, receive: true, give: true },
+    { name: 'Tailsex', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Toys', rating: 2, receive: true, give: true },
+    { name: 'Toys', rating: Ratings.Yes, role: Role.Both },
-    { name: 'Underwear', rating: 1 },
+    { name: 'Underwear', rating: Ratings.Love },
-    { name: 'Unsanitary', rating: 4 },
+    { name: 'Unsanitary', rating: Ratings.No },
-    { name: 'Verbal Abuse', rating: 3, receive: false, give: true },
+    { name: 'Verbal Abuse', rating: Ratings.Maybe, role: Role.Give },
-    { name: 'Vore', rating: 4 },
+    { name: 'Vore', rating: Ratings.No }
   ]

tsconfig.app.json

@@ -4,6 +4,8 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
+  "extends": "@tsconfig/node20/tsconfig.json",
   "include": [
     "globals.d.ts",
     "vite.config.*",
@@ -10,6 +10,9 @@
   ],
   "compilerOptions": {
     "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "types": ["node"]