@lemonadejs/timeline/dist/vue.js

LemonadeJS timeline component

import { h } from 'vue';
import component from './index';

import './style.css';

export default {
    inheritAttrs: false,
    mounted() {
        this.$nextTick(() => {
            const options = { ...this.$attrs };
            this.el = this.$refs.container;
            this.current = component(this.$refs.container, options);
        });
    },
    setup() {
        return () => h('div', {
            ref: 'container',
            style: { width: '100%', height: '100%' },
        });
    },
    watch: {
        $attrs: {
            deep: true,
            handler() {
                this.updateState();
            },
        },
    },
    methods: {
        updateState() {
            if (!this.current) return;
            for (const key in this.$attrs) {
                if (Object.prototype.hasOwnProperty.call(this.$attrs, key)
                    && Object.prototype.hasOwnProperty.call(this.current, key)
                    && this.$attrs[key] !== this.current[key]) {
                    this.current[key] = this.$attrs[key];
                }
            }
        },
    },
};