work on design: items, components

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>