radiocampus: style update

radiocampus/assets/src/components/ADropdown.vue

@@ -0,0 +1,49 @@
+<template>
+<component :is="tag" :class="[itemClass, active ? activeClass : '']">
+    <slot name="before-button" :toggle="toggle" :active="active"></slot>
+    <slot name="button" :toggle="toggle" :active="active">
+        <component :is="buttonTag" :class="buttonClass" @click="toggle()">
+            <span class="icon" v-if="labelIcon">
+                <i :class="labelIcon"></i>
+            </span>
+            <span>{{ label }}</span>
+            <span class="icon">
+                <i v-if="!active" :class="buttonIcon"></i>
+                <i v-if="active" :class="buttonIconClose"></i>
+            </span>
+        </component>
+    </slot>
+    <div :class="contentClass" v-show="active">
+        <slot></slot>
+    </div>
+</component>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            active: this.open,
+        }
+    },
+
+    props: {
+        tag: {type: String, default: "div"},
+        label: {type: String, default: ""},
+        labelIcon: {type: String, default: ""},
+        buttonTag: {type: String, default: "button"},
+        activeClass: {type: String, default: "is-active"},
+        buttonClass: {type: String, default: "button"},
+        buttonIcon: { 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>