nuxt migration

.eslintrc

@@ -11,25 +11,24 @@
       },
 
       "extends": [
-        "plugin:vue/vue3-essential",
-        "eslint:recommended",
+        "@nuxt/eslint-config",
 
         "plugin:perfectionist/recommended-natural",
         "plugin:perfectionist/recommended-line-length",
 
         "plugin:sonarjs/recommended",
 
+        "@vue/eslint-config-prettier/skip-formatting",
         "@vue/eslint-config-typescript",
-        "@vue/eslint-config-prettier/skip-formatting"
+
+        "plugin:tailwindcss/recommended"
       ],
 
-      "plugins": ["perfectionist", "sonarjs", "@typescript-eslint"],
+      "plugins": ["perfectionist", "sonarjs"],
       "files": ["*.vue"],
-      "parser": "@typescript-eslint/parser",
 
       "rules": {
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": "error"
+        "vue/attributes-order": "off"
       }
     },
     {
@@ -39,9 +38,11 @@
       },
 
       "extends": [
-        "eslint:recommended",
+        "@nuxt/eslint-config",
+
         "plugin:perfectionist/recommended-natural",
         "plugin:perfectionist/recommended-line-length",
+
         "plugin:sonarjs/recommended"
       ],
 

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.prettierrc

@@ -2,5 +2,6 @@
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": false,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "Vue.volar",
     "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }

README.md

@@ -1,18 +1,75 @@
-[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://stand-with-ukraine.pp.ua)
+# Nuxt 3 Minimal Starter
 
-# SoulWorker Items Viever
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/SpaceAfterYou/soulworker-items-viewer?style=for-the-badge) ![Lines of code](https://img.shields.io/tokei/lines/github/SpaceAfterYou/soulworker-items-viewer?style=for-the-badge) ![MatWorker](https://img.shields.io/badge/Mat-Worker-lightgrey?style=for-the-badge&logo=data:image/webp;base64,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) ![Discord](https://img.shields.io/discord/606442027873206292?style=for-the-badge) ![Twitch Status](https://img.shields.io/twitch/status/sawich?style=for-the-badge)
+## Setup
 
-## Chat 🙋
+Make sure to install the dependencies:
 
-Wanna chat with us, talk about changes, or just hang out? ~~We~~(I'm) have a Discord server just for that.
+```bash
+# npm
+npm install
 
-[![!](https://invidget.switchblade.xyz/SequFJP)](http://discord.gg/SequFJP)
+# pnpm
+pnpm install
 
-## Contributors ❤️
+# yarn
+yarn install
 
-### My regards:
+# bun
+bun install
+```
 
-- @abchsr
-- @prozaks
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,11 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+* {
+  @apply text-white/90 outline-none;
+}
+</style>

assets/css/tailwind.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+a {
+  @apply no-underline hover:text-pink-500 ease-in-out transition-colors;
+}

components/items/search/input.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+const request = ref("");
+
+const type = [
+  { value: "includes", name: "Includes" },
+  { value: "starts-with", name: "Starts with" },
+];
+
+const where = [
+  { value: "any-of", name: "Any of" },
+  { value: "id", name: "Id" },
+  { value: "name", name: "Name" },
+  { value: "description", name: "Description" },
+];
+
+const selectedType = ref(type[0].value);
+const selectedWhere = ref(where[0].value);
+</script>
+
+<template>
+  <form class="flex gap-4">
+    <input
+      class="w-full rounded bg-neutral-700 px-4"
+      placeholder="Search request..."
+      v-model="request"
+      type="text"
+    />
+
+    <ItemsSearchSelectBadge>
+      <template #head> method </template>
+
+      <template #body>
+        <ItemsSearchSelect v-model="selectedType">
+          <ItemsSearchSelectOption
+            v-for="{ name, value } of type"
+            :value="value"
+            :key="value"
+          >
+            {{ name }}
+          </ItemsSearchSelectOption>
+        </ItemsSearchSelect>
+      </template>
+    </ItemsSearchSelectBadge>
+
+    <ItemsSearchSelectBadge>
+      <template #head> where </template>
+
+      <template #body>
+        <ItemsSearchSelect v-model="selectedWhere">
+          <ItemsSearchSelectOption
+            v-for="{ name, value } of where"
+            :value="value"
+            :key="value"
+          >
+            {{ name }}
+          </ItemsSearchSelectOption>
+        </ItemsSearchSelect>
+      </template>
+    </ItemsSearchSelectBadge>
+  </form>
+
+  <!-- https://youtu.be/5pxpOYSERz4 -->
+</template>

components/items/search/select/badge.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex gap-2 rounded bg-black/50">
+    <span class="self-center pl-2">
+      <slot name="head" />
+    </span>
+
+    <slot name="body" />
+  </div>
+</template>

components/items/search/select/index.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const value = defineModel();
+</script>
+
+<template>
+  <div class="flex gap-2 rounded bg-black/50">
+    <select class="rounded bg-neutral-700 px-2 text-white" v-model="value">
+      <slot />
+    </select>
+  </div>
+</template>

components/items/search/select/option.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+type Props = { value: string | number };
+
+defineProps<Props>();
+</script>
+
+<template>
+  <option :value="value">
+    <slot />
+  </option>
+</template>

components/items/sidebar/gain-types.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useGainTypes } from "@/stores/gain-types";
+
+const { selectedGainTypes, gainTypes } = storeToRefs(useGainTypes());
+</script>
+
+<template>
+  <div>
+    <ItemsSidebarTogglableBlock
+      :selected="selectedGainTypes"
+      :locale-path="'gainType'"
+      :values="gainTypes"
+    />
+  </div>
+</template>

components/items/sidebar/inventory-types.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { useInventoryTypes } from "@/stores/inventory-types";
+
+const { selectedInventoryTypes, inventoryType } =
+  storeToRefs(useInventoryTypes());
+</script>
+
+<template>
+  <div>
+    <ItemsSidebarTogglableBlock
+      :selected="selectedInventoryTypes"
+      :locale-path="'inventoryType'"
+      :values="inventoryType"
+    />
+  </div>
+</template>

components/items/sidebar/slot-types.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useSlotTypes } from "@/stores/slot-types";
+
+const { selectedSlotTypes, slotTypes } = storeToRefs(useSlotTypes());
+</script>
+
+<template>
+  <div>
+    <ItemsSidebarTogglableBlock
+      :selected="selectedSlotTypes"
+      :locale-path="'slotType'"
+      :values="slotTypes"
+    />
+  </div>
+</template>

components/items/sidebar/togglable-block.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+type Props = { selected: Set<number>; localePath: string; values: number[] };
+
+const props = defineProps<Props>();
+
+function toggle(value: number) {
+  if (!props.selected.delete(value)) {
+    props.selected.add(value);
+  }
+}
+</script>
+
+<template>
+  <SidebarTitledBlock>
+    <template #head> {{ $t(`${localePath}.name`) }} </template>
+
+    <template #body>
+      <section class="flex flex-wrap gap-2">
+        <SidebarToggleButton
+          :is-active="selected.has(value)"
+          v-for="value of values"
+          @click="toggle(value)"
+          :key="value"
+        >
+          {{ $t(`${localePath}.values.${value}`) }}
+        </SidebarToggleButton>
+      </section>
+    </template>
+  </SidebarTitledBlock>
+</template>

components/layout/footer-link.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+type Props = { href: string };
+
+defineProps<Props>();
+</script>
+
+<template>
+  <a class="lowercase" :href="href">
+    <slot />
+  </a>
+</template>

components/layout/footer.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <section class="flex justify-center gap-8 bg-black/40 py-8">
+    <LayoutFooterLink href="https://github.com/sawich/soulworker-items-viewer">
+      GitHub
+    </LayoutFooterLink>
+
+    <LayoutFooterLink href="http://discord.gg/SequFJP">
+      Discord
+    </LayoutFooterLink>
+  </section>
+</template>