latest

YgamiJS · YgamiJS · commit 29b229a8346b · 2023-08-11T13:27:51.000+03:00
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
@@ -3,10 +3,13 @@ import type { ICategories, ICategory } from "@/types";
 
 import CategoryItem from "./CategoryItem.vue";
 
+defineEmits<{
+  (e: "click", category?: ICategory): void;
+}>();
+
 const props = defineProps<{
   categories: ICategories;
   isOpenFilterButton: boolean;
-  onClick: (category?: ICategory) => void;
 }>();
 </script>
 
@@ -16,7 +19,7 @@ const props = defineProps<{
       v-for="category of props.categories.categories"
       :key="category"
       :category="category"
-      @click="props.onClick"
+      @click="(category) => $emit('click', category)"
     />
   </ul>
 </template>
diff --git a/src/components/FilterMenu.vue b/src/components/FilterMenu.vue
@@ -10,11 +10,11 @@ import FilterMenuFind from "./FilterMenuFind.vue";
 import Select from "./SelectSort.vue";
 import SetPrice from "./SetPrice.vue";
 
-const props = defineProps<{
-  onClick: (category?: ICategory) => void;
-  onSelect: (filter: SortBy) => void;
-  onSubmit: (data: IFind) => void;
-  onSubmitSetPrice: (data: ISetPrice) => void;
+defineEmits<{
+  (e: "click", category?: ICategory): void;
+  (e: "select", filter: SortBy): void;
+  (e: "submit", data: IFind): void;
+  (e: "submitSetPrice", data: ISetPrice): void;
 }>();
 
 const isOpenFilterButton = ref<boolean>(false);
@@ -31,22 +31,34 @@ const { maxPriceByCategory, minPriceByCategory } = storeToRefs(useProductsStore(
     <div class="Filter__filters">
       <p class="Filter__p">{{ $t("Shop.Aside.catalog") }}</p>
       <div class="Filter__selects">
-        <Select @select="props.onSelect" :options="sortBy.firstSortBy"></Select>
-        <Select @select="props.onSelect" :options="sortBy.secondSortBy"></Select>
+        <Select
+          @select="(filter) => $emit('select', filter)"
+          :options="sortBy.firstSortBy"
+        ></Select>
+        <Select
+          @select="(filter) => $emit('select', filter)"
+          :options="sortBy.secondSortBy"
+        ></Select>
       </div>
     </div>
     <div class="Filter__selects-filtres" @click="isOpenFilterButton = !isOpenFilterButton">
       <span class="Filter__selects-filters-span">{{ $t("Shop.Aside.filtres") }}</span>
     </div>
     <div class="allFiltres" :class="{ active: isOpenFilterButton }">
       <div class="allFiltres__selects">
-        <Select @select="props.onSelect" :options="sortBy.firstSortBy"></Select>
-        <Select @select="props.onSelect" :options="sortBy.secondSortBy"></Select>
+        <Select
+          @select="(filter) => $emit('select', filter)"
+          :options="sortBy.firstSortBy"
+        ></Select>
+        <Select
+          @select="(filter) => $emit('select', filter)"
+          :options="sortBy.secondSortBy"
+        ></Select>
       </div>
       <div class="allFiltres__categories">
-        <FilterMenuFind class-name="allFiltres__find" @submit="props.onSubmit" />
+        <FilterMenuFind class-name="allFiltres__find" @submit="(data) => $emit('submit', data)" />
         <SetPrice
-          @submit="props.onSubmitSetPrice"
+          @submit="(data) => $emit('submitSetPrice', data)"
           class-name="allFiltres__setPrice"
           :max-price="maxPriceByCategory"
           v-if="isOpenFilterButton"
@@ -55,26 +67,26 @@ const { maxPriceByCategory, minPriceByCategory } = storeToRefs(useProductsStore(
         <Categories
           :categories="categories"
           :is-open-filter-button="isOpenFilterButton"
-          @click="props.onClick"
+          @click="(category) => $emit('click', category)"
         />
       </div>
     </div>
     <div class="Filter__categories">
       <div class="Filter__categories-list">
         <FilterMenuFind
           class-name="allFiltres__find allFiltres__find_pc"
-          @submit="props.onSubmit"
+          @submit="(data) => $emit('submit', data)"
         />
         <SetPrice
-          @submit="props.onSubmitSetPrice"
+          @submit="(data) => $emit('submitSetPrice', data)"
           class-name="allFiltres__setPrice allFiltres__setPrice_pc"
           :max-price="maxPriceByCategory"
           :min-price="minPriceByCategory"
         />
         <Categories
           :categories="categories"
           :is-open-filter-button="isOpenFilterButton"
-          @click="props.onClick"
+          @click="(category) => $emit('click', category)"
         />
       </div>
       <slot></slot>
diff --git a/src/components/FilterMenuFind.vue b/src/components/FilterMenuFind.vue
@@ -9,16 +9,10 @@ interface IFind {
   findfield: string;
 }
 
-interface Props {
-  className?: string;
-}
-
 const emit = defineEmits<{
   (e: "submit", data: IFind): void;
 }>();
 
-const props = defineProps<Props>();
-
 const schema = yup.object({
   findfield: yup.string()
 });
@@ -35,7 +29,7 @@ const debouncedSubmit = debounce(onSubmit, 300);
 </script>
 
 <template>
-  <form class="find" @submit.prevent="onSubmit" :class="props.className">
+  <form class="find" @submit.prevent="onSubmit" :class="$attrs.className">
     <p class="find__search">{{ $t("Shop.Aside.Find.find") }}</p>
     <InputForm
       class-name="find__findfield"
diff --git a/src/components/SetPrice.vue b/src/components/SetPrice.vue
@@ -10,15 +10,11 @@ interface ISetPrice {
   minPrice: number;
 }
 
-interface Props extends ISetPrice {
-  className?: string;
-}
-
 const emit = defineEmits<{
   (e: "submit", data: ISetPrice): void;
 }>();
 
-const props = defineProps<Props>();
+const props = defineProps<ISetPrice>();
 
 const schema = yup.object({
   maxPrice: yup.number().transform((value) => (isNaN(value) ? 0 : value)),
@@ -45,7 +41,7 @@ const onSubmit = handleSubmit((data) => {
 </script>
 
 <template>
-  <form class="setPrice" @submit.prevent="onSubmit" :class="props.className">
+  <form class="setPrice" @submit.prevent="onSubmit" :class="$attrs.className">
     <p class="setPrice__price">{{ $t("Shop.Aside.SetPrice.price") }}</p>
     <InputForm
       type="number"
