work on design: items, components

assets/src/components/ACarousel.vue

@@ -0,0 +1,23 @@
+<template>
+  <carousel :items-to-show="1.5">
+    <slot></slot>
+    <template #addons>
+        <navigation />
+        <pagination />
+    </template>
+  </carousel>
+</template>
+
+<script>
+// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Pagination, Navigation } from 'vue3-carousel'
+
+export default {
+  components: {
+    Carousel,
+    Pagination,
+    Navigation,
+  },
+}
+</script>

assets/src/components/ADropdown.vue

@@ -0,0 +1,43 @@
+<template>
+<div>
+    <div :class="itemClass" @click="noButton && toggle()">
+        <slot name="button">
+            <span :class="['float-right', buttonClass]" @click="toggle()">
+                <span class="icon">
+                    <i v-if="!active" :class="buttonIconOpen"></i>
+                    <i v-if="active" :class="buttonIconClose"></i>
+                </span>
+            </span>
+        </slot>
+        <slot name="item"></slot>
+    </div>
+    <div :class="contentClass" v-if="active">
+        <slot></slot>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            "active": this.open,
+        }
+    },
+
+    props: {
+        itemClass: String,
+        buttonClass: String,
+        buttonIconOpen: { type: String, default:"fa fa-angle-down"},
+        buttonIconClose: { type: String, default:"fa fa-angle-up"},
+        contentClass: String,
+        open: {type: Boolean, default: false},
+        noButton: {type: Boolean, default: false},
+    },
+
+    methods: {
+        toggle() {
+            this.active = !this.active
+        }
+    },
+}
+</script>

assets/src/components/index.js

@@ -1,4 +1,5 @@
 import AAutocomplete from './AAutocomplete.vue'
+import ADropdown from "./ADropdown.vue"
 import AEpisode from './AEpisode.vue'
 import AList from './AList.vue'
 import APage from './APage.vue'
@@ -14,7 +15,7 @@ import AStreamer from './AStreamer.vue'
  * Core components
  */
 export const base = {
-    AAutocomplete, AEpisode, AList, APage, APlayer, APlaylist,
+    AAutocomplete, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
     AProgress, ASoundItem,
 }