add search and animation

src/App.vue

@@ -2,6 +2,8 @@
   <div class="app">
     <h1>Страница постов</h1>
 
+    <my-input v-model="searchQuery" placeholder="Поиск" class="search"/>
+
     <div class="app__btns">
       <my-button @click="showCreateDialog" class="createBtn">
         Создать пост
@@ -15,21 +17,17 @@
     </my-dialog>
 
     <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
-    <post-list v-else :posts="sortedPost" @removePost="removePost" class="postList"/>
+    <post-list v-else :posts="sortedAndSearchedPosts" @removePost="removePost" class="postList"/>
   </div>
 </template>
 
 <script>
 import PostForm from '@/components/PostForm.vue';
 import PostList from '@/components/PostList.vue';
-import MyDialog from '@/components/ui/Dialog.vue';
-import MyButton from '@/components/ui/Button.vue';
 import axios from 'axios';
 
 export default {
   components: {
-    MyButton,
-    MyDialog,
     PostForm,
     PostList
   },
@@ -42,7 +40,8 @@ export default {
       sortOptions: [
         {value: 'title', name: 'По названию'},
         {value: 'body', name: 'По описанию'}
-      ]
+      ],
+      searchQuery: ''
     }
   },
   methods: {
@@ -75,6 +74,9 @@ export default {
       return [...this.posts].sort((post1, post2) => {
         return post1?.[this.selectedSort]?.localeCompare(post2?.[this.selectedSort])
       })
+    },
+    sortedAndSearchedPosts() {
+      return this.sortedPost.filter((post) => post.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
     }
   },
   watch: {
@@ -118,4 +120,8 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
+
+  .search {
+    margin-top: 15px;
+  }
 </style>

src/components/PostList.vue

@@ -1,12 +1,14 @@
 <template>
   <div v-if="posts.length > 0">
     <h3>Список постов</h3>
+     <transition-group name="post-list">
       <post
           v-for="post in posts"
           :post="post"
           :key="post.id"
           @removePost="$emit('removePost', post)"
       />
+    </transition-group>
   </div>
   <div v-else>
     <h2>
@@ -33,4 +35,25 @@ export default {
 
 <style scoped>
 
+ .post-list-item {
+   display: inline-block;
+   margin-right: 10px;
+ }
+
+ .post-list-enter-active {
+   transition: all 0.4s ease-in;
+ }
+
+ .post-list-leave-active {
+   transition: all 0.4s ease-out;
+ }
+ .post-list-enter-from,
+ .post-list-leave-to {
+   opacity: 0;
+   transform: translateY(30px);
+ }
+
+ .post-list-move {
+   transition: transform 0.4s ease;
+ }
 </style>