Module1 task1

frontend/src/App.vue

@@ -1,62 +1,17 @@
 <template>
-  <div class="main__wrapper">
-    <div class="main__header">
-      <img src="@/assets/img/logo.svg" width="300" height="47" alt="V!U!E! Pizza" />
-    </div>
-    <h1>Добро пожаловать!</h1>
-    <p>
-      Это проект V!U!E! Pizza для обучения на профессиональном онлайн‑курсе<br />
-      <b>«Vue.js для опытных разработчиков».</b>
-    </p>
-  </div>
+<app-layout>
+  <home-view />
+</app-layout>
 </template>
 
-<style lang="scss">
-@import "@/assets/scss/app.scss";
-body {
-  justify-content: center;
-  align-items: center;
-}
-.main__wrapper {
-  padding-bottom: 30px;
-
-  background-color: $white;
-  box-shadow: $shadow-light;
-
-  h1 {
-    margin-bottom: 0;
-    padding: 0 95px;
-
-    text-align: center;
-
-    @include b-s36-h42;
-  }
-
-  p {
-    padding: 0 95px;
-
-    text-align: center;
-
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  b {
-    font-size: 1.2em;
-  }
-}
-
-.main__header {
-  margin-bottom: 30px;
-  padding: 20px 0;
-
-  background-color: $green-600;
-
-  img {
-    display: block;
-
-    margin: 0 auto;
-  }
+<script>
+import { AppLayout } from "@/layouts";
+import { HomeView } from "@/views";
+export default {
+  components: {HomeView, AppLayout}
 }
+</script>
 
+<style lang="scss">
+@import "@/assets/scss/app.scss";
 </style>

frontend/src/common/components/AppDrag.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+      :draggable="draggable"
+      @dragstart.self="onDrag"
+      @dragover.prevent
+      @dragend.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD, MOVE } from '../constants'
+
+const props = defineProps({
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  transferData: {
+    type: Object,
+    required: true
+  }
+})
+
+const onDrag = ({ dataTransfer }) => {
+  dataTransfer.effectAllowed = MOVE;
+  dataTransfer.dropEffect = MOVE;
+  dataTransfer.setData(
+      DATA_TRANSFER_PAYLOAD,
+      JSON.stringify(props.transferData)
+  )
+}
+</script>

frontend/src/common/components/AppDrop.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+   @drop.stop="onDrop"
+   @dragover.prevent
+   @dragenter.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD } from '../constants'
+
+const emit = defineEmits(['drop'])
+
+const onDrop = ({ dataTransfer }) => {
+  if (!dataTransfer) return;
+
+  try {
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+    if (payload) {
+      const transferData = JSON.parse(payload);
+      emit('drop', transferData);
+    }
+  } catch (e) {
+    console.error('Error parsing drop data:', e);
+  }
+}
+</script>

frontend/src/common/components/DoughSelector.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="content__dough">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите тесто</h2>
+      <div class="sheet__content dough">
+        <label
+            v-for="doughType in doughItems"
+            class="dough__input"
+            :class="`dough__input--${doughType.value}`"
+            :key="doughType.id"
+        >
+          <input
+              type="radio"
+              name="dought"
+              :value="doughType.value"
+              class="visually-hidden"
+              :checked="doughType.id === modelValue?.id"
+              @change="$emit('update:modelValue', doughType)"
+          />
+          <img :src="getImage(doughType.image)" :alt="doughType.name" />
+          <b>{{ doughType.name }}</b>
+          <span>{{ doughType.description }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch } from 'vue';
+
+const props = defineProps({
+  doughItems: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object
+  }
+})
+
+defineEmits(['update:modelValue']);
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dough__input {
+  position: relative;
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  cursor: pointer;
+}
+
+.dough__input img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: box-shadow 0.3s;
+}
+
+.dough__input b {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dough__input span {
+  font-size: 11px;
+  display: block;
+}
+
+.dough__input:hover img {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.dough__input input:checked + img {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>