update items

MixDrinks · Sep 28, 2024 · 5cb1782 · 5cb1782
1 parent b974447
commit 5cb1782
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 105 deletions.
diff --git a/components/UI/styles/icon-btn.scss b/components/UI/styles/icon-btn.scss
@@ -1,57 +1,61 @@
 .btn {
-  $self: &;
+    $self: &;
 
-  @include defaultBtn;
-  font-size: 0;
-  line-height: 0;
+    @include defaultBtn;
+    font-size: 0;
+    line-height: 0;
 
-  position: relative;
+    position: relative;
 
-  background-color: $colorMain;
+    background-color: $colorMain;
 
-  transition: background-color $defaultAnimTime, box-shadow $defaultAnimTime;
+    transition: background-color $defaultAnimTime, box-shadow $defaultAnimTime;
 
-  &--short {
-    min-width: 30px;
-    min-height: 30px;
+    &--short {
+        min-width: 30px;
+        min-height: 30px;
 
-    #{$self}__icon {
-      mask-size: 20px;
+        #{$self}__icon {
+            mask-size: 20px;
+        }
     }
-  }
-
-  &--lock {
-    pointer-events: none;
 
     &::after {
-      @include fullPseudoElement;
+        @include fullPseudoElement;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity $defaultAnimTime;
+        background-color: rgba($colorWhite, 0.8);
+    }
 
-      background-color: rgba($colorWhite, 0.8);
+    &--lock {
+        pointer-events: none;
 
-      z-index: 1;
+        &::after {
+            opacity: 1;
+        }
     }
-  }
 
-  &--bottom {
-    #{$self}__icon {
-      transform: rotate(180deg);
+    &--bottom {
+        #{$self}__icon {
+            transform: rotate(180deg);
+        }
     }
-  }
 
-  &:not(#{&--lock}) {
-    &:hover {
-      background-color: $colorHover;
-      box-shadow: -5px -5px 40px rgba($colorHover, 0.1);
+    &:not(#{&--lock}) {
+        &:hover {
+            background-color: $colorHover;
+            box-shadow: -5px -5px 40px rgba($colorHover, 0.1);
+        }
     }
-  }
 
-  &__icon {
-    @include fullPseudoElement;
+    &__icon {
+        @include fullPseudoElement;
 
-    mask-size: 20px;
-    mask-position: center;
-    mask-repeat: no-repeat;
-    background-color: $colorWhite;
-  }
+        mask-size: 20px;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        background-color: $colorWhite;
+    }
 
 }
diff --git a/components/cocktails/CocktailComponents.vue b/components/cocktails/CocktailComponents.vue
@@ -1,42 +1,39 @@
 <template>
-    <div class="сomponents">
-        <h2 class="сomponents__title сomponents-title">
-            <span class="сomponents-title__label">
-                {{ title }}
-            </span>
+    <div class="components">
+        <h2 class="components__title">
+            {{ title }}
         </h2>
-        <div class="сomponents__counter сomponents-counter" v-if="withCounter">
+        <div class="components__counter components-counter" v-if="withCounter">
             <IconBtn
-                class="сomponents-counter__btn сomponents-counter__btn--dec"
-                :lock="counter === 1"
+                class="components-counter__btn"
+                :lock="isDecLock"
                 icon="/img/icons/minus.svg"
-                @click="dec()"
+                @click="dec"
             >
                 Декримент
             </IconBtn>
-
-            <div class="сomponents-counter__value">
+            <div class="components-counter__value">
                 {{ counter }}
             </div>
             <IconBtn
-                class="сomponents-counter__btn сomponents-counter__btn--inc"
+                class="components-counter__btn"
                 icon="/img/icons/plus.svg"
-                @click="inc()"
+                @click="inc"
             >
                 Інкримент
             </IconBtn>
         </div>
-        <ul class="сomponents__list сomponents-list">
+        <ul class="components__list components-list">
             <li
-                class="сomponents-list__item сomponents-list-item"
-                v-for="item in components"
-                :key="item.url"
+                class="components-list__item components-list-item"
+                v-for="(item, itemIndex) in components"
+                :key="`components-list__item--${itemIndex}`"
             >
                 <NuxtLink
-                    class="сomponents-list-item__link сomponents-list-item-link"
+                    class="components-list-item__link components-list-item-link"
                     :to="`/${item.url}`"
                 >
-                    <picture class="сomponents-list-item-link__picture">
+                    <picture class="components-list-item-link__picture">
                         <source
                             v-for="img in item.images"
                             :key="img.id"
@@ -45,20 +42,20 @@
                             :type="img.type"
                         />
                         <img
-                            class="сomponents-list-item-link__img"
+                            class="components-list-item-link__img"
                             width="100"
                             height="100"
                             loading="lazy"
                             :alt="`Зображення ${item.name}`"
                             title=""
                         />
                     </picture>
-                    <div class="сomponents-list-item-link__label">
+                    <div class="components-list-item-link__label">
                         {{ item.name }}
                         <template v-if="item.amount">
                             <br />
                             <strong>
-                                {{ item.amount * counter }} {{ item.unit }}.
+                                {{ getAmount(item.amount) }} {{ item.unit }}.
                             </strong>
                         </template>
                     </div>
@@ -69,24 +66,13 @@
 </template>
 
 <script>
+import { computed, defineComponent, ref, unref } from 'vue'
 import IconBtn from './../UI/IconBtn.vue'
 
-export default {
+export default defineComponent({
     name: 'CocktailComponents',
     components: { IconBtn },
-    data: () => ({
-        counter: 1,
-    }),
-    methods: {
-        inc() {
-            this.counter++
-        },
-        dec() {
-            if (this.counter > 1) {
-                this.counter--
-            }
-        },
-    },
+
     props: {
         components: {
             type: Array,
@@ -101,7 +87,26 @@ export default {
             default: false,
         },
     },
-}
+
+    setup() {
+        const counter = ref(1)
+
+        const inc = () => counter.value++
+        const dec = () => {
+            if (unref(counter) > 1) counter.value--
+        }
+        const getAmount = (value) => value * unref(counter)
+        const isDecLock = computed(() => unref(counter) === 1)
+
+        return {
+            getAmount,
+            counter,
+            inc,
+            dec,
+            isDecLock,
+        }
+    },
+})
 </script>
 <style lang="scss" scoped>
 @import './styles/cocktail-components';

diff --git a/components/cocktails/CocktailsPage.vue b/components/cocktails/CocktailsPage.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import CocktailsList from './CocktailsList.vue'
+import CocktailsList from './../global/CocktailsList.vue'
 import FilterList from './FilterList.vue'
 import Pagination from '../dump/Pagination.vue'
 import Sorting from './Sorting.vue'