Test sit

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "vueIndentScriptAndStyle": true,
+  "printWidth": 80,
+  "singleAttributePerLine": true,
+  "bracketSameLine": false,
+  "endOfLine": "lf"
+}

test/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

test/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

test/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtLayout />
+</template>

test/components/ItemList.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+  import { defineProps } from 'vue';
+
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    onSelect: {
+      type: Function,
+      required: true,
+    },
+  });
+</script>
+
+<template>
+  <div>
+    <h3>{{ title }}</h3>
+    <div class="items">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        @click="onSelect(item)"
+        class="item-button"
+      >
+        {{ item.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .item-button {
+    border: 1px solid #ccc;
+    padding: 10px;
+    cursor: pointer;
+  }
+</style>

test/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+    <NuxtPage />
+</template>

test/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  modules: ['@pinia/nuxt'],
+  devtools: { enabled: true }
+})

test/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@pinia/nuxt": "^0.7.0",
+    "nuxt": "^3.14.159",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}

test/pages/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import { useItemsStore } from '~/store/items';
+  import ItemList from '~/components/ItemList.vue';
+
+  const itemsStore = useItemsStore();
+</script>
+
+<template>
+  <div>
+    <div class="top-blocks">
+      <div>
+        <h2>Выбранные вещи пользователя</h2>
+        <div>
+          <p
+            v-for="item in itemsStore.selectedUserItems"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </p>
+        </div>
+      </div>
+      <div>
+        <h2>Выбранная вещь</h2>
+        <p v-if="itemsStore.selectedSelectableItem">
+          {{ itemsStore.selectedSelectableItem.name }}
+        </p>
+      </div>
+    </div>
+    <div class="bottom-blocks">
+      <ItemList
+        :title="'User Items'"
+        :items="itemsStore.userItems"
+        :onSelect="itemsStore.selectUserItem"
+      />
+      <ItemList
+        :title="'Selectable Items'"
+        :items="itemsStore.selectableItems"
+        :onSelect="itemsStore.selectSelectableItem"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .top-blocks,
+  .bottom-blocks {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+</style>

test/public/robots.txt

@@ -0,0 +1 @@
+

test/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

test/store/items.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+
+interface Item {
+  id: number;
+  name: string;
+}
+
+export const useItemsStore = defineStore('items', {
+  state: () => ({
+    userItems: [
+      { id: 1, name: 'Shoes 1' },
+      { id: 2, name: 'Shoes 2' },
+      { id: 3, name: 'Shoes 3' },
+      { id: 4, name: 'Shoes 4' },
+      { id: 5, name: 'T-shirt 1' },
+      { id: 6, name: 'T-shirt 2' },
+      { id: 7, name: 'T-shirt 3' },
+      { id: 8, name: 'T-shirt 4' },
+    ] as Item[],
+    selectableItems: [
+      { id: 11, name: 'Jacket 1' },
+      { id: 12, name: 'Jacket 2' },
+      { id: 13, name: 'Jacket 3' },
+      { id: 14, name: 'Jacket 4' },
+      { id: 15, name: 'Hoodie 1' },
+      { id: 16, name: 'Hoodie 2' },
+      { id: 17, name: 'Hoodie 3' },
+      { id: 18, name: 'Hoodie 4' },
+    ] as Item[],
+    selectedUserItems: [] as Item[],
+    selectedSelectableItem: null as Item | null,
+  }),
+
+  actions: {
+    selectUserItem(item: Item) {
+      const itemExists = this.selectedUserItems.find(
+        (selected) => selected.id === item.id
+      );
+
+      if (!itemExists) {
+        // Если длина больше 6, удаляем первый элемент
+        if (this.selectedUserItems.length >= 6) {
+          this.selectedUserItems.shift();
+        }
+        this.selectedUserItems.push(item);
+      }
+    },
+
+    deselectUserItem(item: Item) {
+      this.selectedUserItems = this.selectedUserItems.filter(
+        (selected) => selected.id !== item.id
+      );
+    },
+
+    selectSelectableItem(item: Item) {
+      this.selectedSelectableItem = item;
+    },
+  },
+});

test/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}