radiocampus: style update

radiocampus/assets/src/components/AModal.vue

@@ -0,0 +1,53 @@
+<template>
+    <section :class="['modal', active && 'is-active' || '']">
+        <div class="modal-background" @click="close"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <div class="modal-card-title">
+                    <slot name="title" :item="item">{{ title }}</slot>
+                </div>
+                <slot name="bar" :item="item"></slot>
+                <button type="button" class="delete square" aria-label="close" @click="close">
+                    <span class="icon">
+                        <i class="fa fa-close"></i>
+                    </span>
+                </button>
+            </header>
+            <section class="modal-card-body">
+                <slot name="default" :item="item"></slot>
+            </section>
+            <div class="modal-card-foot align-right">
+                <slot name="footer" :item="item" :close="close"></slot>
+            </div>
+        </div>
+    </section>
+</template>
+<script>
+export default {
+    props: {
+        title: { type: String, default: ""},
+    },
+
+    data() {
+        return {
+            ///! If true, modal is open
+            active: false,
+            ///! Item or data passed down to slots.
+            item: null,
+        }
+    },
+
+    methods: {
+        ///! Open modal dialog. Set provided `item` to dialog's one.
+        open(item=null) {
+            this.active = true
+            this.item = item
+        },
+        ///! Close modal and reset item to null.
+        close() {
+            this.active = false
+            this.item = null
+        },
+    }
+}
+</script>