dededit/src/components/MetaEditor.vue

<template>
    <div class="meta-editor">
        <div class="meta-editor-content">
            <button title="fermer" class="close-btn" v-on:click="hide">
                &times;
                <!--<svg viewPort="0 0 42 42" version="1.1"-->
                     <!--xmlns="http://www.w3.org/2000/svg">-->
                    <!--<line x1="0" y1="42"-->
                          <!--x2="42" y2="0"-->
                          <!--stroke="black"-->
                          <!--stroke-width="1"/>-->
                    <!--<line x1="0" y1="0"-->
                          <!--x2="42" y2="42"-->
                          <!--stroke="black"-->
                          <!--stroke-width="1"/>-->
                <!--</svg>-->

            </button>
            <h3>Métadonnées</h3>
            <div>
                <label>Titre</label>
                <input type="text" v-model="title"/>
            </div>

            <div>
                <label>Auteur</label>
                <input type="text" v-model="author"/>
            </div>

            <div>
                <label>Date</label>
                <input type="text" v-model="date"/>
            </div>

        </div>
    </div>
</template>

<script>


    export default {
        components: {},
        data() {
            let today = new Date();
            return {
                title: "Lorem Ipsum",
                author: "John Doe",
                date: (today.getDate() < 10 ? ('0' + today.getDate()): today.getDate() )
                    + '/' + (today.getMonth() < 9 ? '0' :'') + (today.getMonth() + 1) + '/' + today.getFullYear()
            }
        },
        beforeDestroy() {

        },

        mounted() {

        },

        methods: {

            hide: function(){
                this.$emit('meta-editor:closed')
            }

        }
    }
</script>

<style lang="scss">
    @import '../assets/_vars';

    .meta-editor {
        width: 100vw;
        height: 100vh;
        background-color: rgba(100, 100, 100, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 500;

        h3 {
            text-align: center;
            margin-bottom: 50px;
        }

        .meta-editor-content {
            padding: 10px;
            width: 800px;
            height: 400px;
            background-color: $bg-color;
            position: relative;

            div {
                margin: 5px;

                label, input {
                    display: inline-block;
                    width: 200px;
                }
            }

            .close-btn {
                position: absolute;
                top: 5px;
                right: 5px;
                padding:0;
                margin : 0;
                border: none;
                cursor: pointer;
                background-color: $bg-color;
                //height: $button-width;
                font-size: $button-width;
                /*svg{
                    width: $button-width;
                    height: 4$button-width;
                }*/
            }

        }
    }

</style>