FreeLu.vue

<script>
    import FreeLuEdit from "./FreeLuEdit.vue";
    import FreeLusList from "./FreeLusList.vue";

    export default {
        data() {
            return {
                entryId: null,
                gettext: window.gettext,
            };
        },
        components: {FreeLuEdit, FreeLusList},
        methods: {
            entrySelected(entryId) {
                this.entryId = entryId;
            },
        },
        mounted() {
            $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
                sizes: [20, 80],
                gutterSize: 4,
                minSize: 10,
                elementStyle: (dimension, size, gutterSize) => {
                    return {
                        'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
                    }
                },
            });
        },
    };
</script>

<template>
    <div id="overlay">
        <div class="cv-spinner">
            <span class="spinner"></span>
        </div>
    </div>
    <div id="entries-list" class="col h-100 w-100 pr-0 overflow-hidden">
        <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-hidden">
            <free-lus-list @entry-selected="entrySelected"/>
        </div>
    </div>
    <div id="entry-display" class="col h-100 p-0 overflow-hidden">
        <div v-if="entryId" :key="entryId" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
            <free-lu-edit
                    ref="freeLusEdit"
                    v-if="entryId"
                    :key="entryId"
                    :entryId="entryId"
            />
        </div>
    </div>
</template>