From c2783fe540050b9b99af4e04a513597761b00b14 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 05:42:07 +0300
Subject: [PATCH] remove @vueuse/motion

+ remove unused data folder
---
 package.json                               |  1 -
 src/components/AlbumView/Header.vue        |  3 +-
 src/components/LeftSidebar/Navigation.vue  |  2 +-
 src/components/Logo.vue                    |  1 -
 src/components/PlaylistView/Header.vue     |  2 +-
 src/components/RightSideBar/Search/Tab.vue |  2 +-
 src/components/nav/NavBar.vue              |  3 -
 src/components/nav/Titles/APTitle.vue      | 14 +---
 src/components/nav/Titles/Folder.vue       |  3 +-
 src/components/nav/Titles/Playlists.vue    |  1 -
 src/data/folders.js                        | 92 ----------------------
 src/data/songs.js                          | 58 --------------
 src/main.js                                |  3 -
 src/transitions.ts                         | 59 --------------
 14 files changed, 9 insertions(+), 235 deletions(-)
 delete mode 100644 src/data/folders.js
 delete mode 100644 src/data/songs.js
 delete mode 100644 src/transitions.ts

diff --git a/package.json b/package.json
index 1397fad..cf04747 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^8.5.0",
-    "@vueuse/motion": "^2.0.0-beta.18",
     "axios": "^0.26.1",
     "defu": "^6.0.0",
     "mitt": "^3.0.0",
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index ea1b671..7d9e7cd 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -12,12 +12,11 @@
       <img
         :src="imguri + album.image"
         alt=""
-        v-motion-slide-from-left
         class="rounded shadow-lg"
       />
     </div>
     <div class="info" :class="{ nocontrast: isLight() }">
-      <div class="top" v-motion-slide-from-top>
+      <div class="top">
         <div class="h">
           <span v-if="album.is_soundtrack">Soundtrack</span>
           <span v-else-if="album.is_compilation">Compilation</span>
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index caf73da..0f1fe56 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -5,7 +5,7 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu.params }"
     >
-      <div class="nav-button" id="home-button" v-motion-slide-from-left-100>
+      <div class="nav-button" id="home-button">
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 25110d8..1571f34 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="logo-container"
-    v-motion-slide-from-top
   >
     <router-link :to="{ name: 'Home' }">
       <div id="logo" class="rounded"></div
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 7f77e24..17316e0 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -37,7 +37,7 @@
         <div class="type">Playlist</div>
       </div>
     </div>
-    <div class="last-updated" v-motion-slide-from-right>
+    <div class="last-updated">
       <span class="status"
         >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
       >
diff --git a/src/components/RightSideBar/Search/Tab.vue b/src/components/RightSideBar/Search/Tab.vue
index ac06763..2ab2908 100644
--- a/src/components/RightSideBar/Search/Tab.vue
+++ b/src/components/RightSideBar/Search/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="name == s.currentTab" v-motion-slide-visible-top>
+  <div v-show="name == s.currentTab">
     <slot />
   </div>
 </template>
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 8df2c4e..74eaff7 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -81,8 +81,6 @@ watch(
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
-  // border-bottom: 1px solid $gray3;
-  // padding-bottom: $small;
 
   .left {
     display: grid;
@@ -94,7 +92,6 @@ watch(
       .title {
         font-size: 1.5rem;
         font-weight: bold;
-        margin-top: $smaller;
         display: flex;
       }
     }
diff --git a/src/components/nav/Titles/APTitle.vue b/src/components/nav/Titles/APTitle.vue
index ed2204b..959ec14 100644
--- a/src/components/nav/Titles/APTitle.vue
+++ b/src/components/nav/Titles/APTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="title albumnavtitle" v-motion-slide-from-left-100>
+  <div class="title albumnavtitle">
     <PlayBtn :source="things.source" :store="things.store" />
     <div class="ellip">
       {{ things.text }}
@@ -44,14 +44,8 @@ const things = computed(() => {
 
 <style lang="scss">
 .albumnavtitle {
-  padding-left: 3rem;
-
-  .play-btn {
-    position: absolute;
-    left: $smaller;
-    top: -$smaller;
-    height: 2.25rem;
-    aspect-ratio: 1;
-  }
+  display: flex;
+  align-items: center;
+  gap: $small;
 }
 </style>
diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue
index ba4b16e..0168770 100644
--- a/src/components/nav/Titles/Folder.vue
+++ b/src/components/nav/Titles/Folder.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="folder-nav-title">
-    <div class="folder" v-motion-slide-from-left-100>
+    <div class="folder">
       <div class="fname">
         <div class="icon image"></div>
         <div class="paths">
@@ -9,7 +9,6 @@
             v-for="path in subPaths"
             :key="path.path"
             :class="{ inthisfolder: path.active }"
-            v-motion-slide-from-left-100
             @click="
               $router.push({ name: 'FolderView', params: { path: path.path } })
             "
diff --git a/src/components/nav/Titles/Playlists.vue b/src/components/nav/Titles/Playlists.vue
index f2613ca..dcbecd4 100644
--- a/src/components/nav/Titles/Playlists.vue
+++ b/src/components/nav/Titles/Playlists.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="title"
-    v-motion-slide-from-left-100
   >
     Playlists
   </div>
diff --git a/src/data/folders.js b/src/data/folders.js
deleted file mode 100644
index 862f22d..0000000
--- a/src/data/folders.js
+++ /dev/null
@@ -1,92 +0,0 @@
-const folders = [
-  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },
-];
-
-export default {
-  folders,
-};
diff --git a/src/data/songs.js b/src/data/songs.js
deleted file mode 100644
index 7ffa4f3..0000000
--- a/src/data/songs.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const songs = [
-  {
-    title: "Doom",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Girl Of My Dreams",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Suga [BTS]"],
-    duration: "03:14",
-  },
-  {
-    title: "Feline",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Polo G, ", "Lil Yachty"],
-    duration: "03:14",
-  },
-  {
-    title: "Rockstar In His Prime",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Is this love",
-    album: "Fighting Demons",
-    artists: ["Bob Marley"],
-    duration: "03:14",
-  },
-  {
-    title: "I'm a little teapot",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Don't stop me now",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-];
-
-export default {
-  songs,
-};
diff --git a/src/main.js b/src/main.js
index 03e443b..be9ed4d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,15 @@
 import "./registerServiceWorker";
 import "../src/assets/css/global.scss";
 
-import { MotionPlugin } from "@vueuse/motion";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "./App.vue";
 import router from "./router";
-import CustomTransitions from "./transitions";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
-app.use(MotionPlugin, CustomTransitions);
 
 app.mount("#app");
diff --git a/src/transitions.ts b/src/transitions.ts
deleted file mode 100644
index c90ede3..0000000
--- a/src/transitions.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export default {
-  directives: {
-    "slide-from-left": {
-      initial: {
-        opacity: 0,
-        x: 0,
-        y: 20,
-      },
-      enter: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-          duration: 100,
-          ease: "circInOut",
-        },
-      },
-    },
-    "slide-from-left-100": {
-      initial: {
-        opacity: 0,
-        x: -20,
-      },
-      visible: {
-        opacity: 1,
-        x: 0,
-        transition: {
-          delay: 100,
-        },
-      },
-    },
-    "slide-from-top": {
-      initial: {
-        y: -20,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-    "slide-from-right": {
-      initial: {
-        x: 20,
-        opacity: 0,
-      },
-      enter: {
-        x: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-  },
-};