<!--
    #VUE3 Todo
-->

<script>
/**
 * Base class for managing a date-focused component. Exposes a v-model prop called date and a
 * synced data value called dateValue. Both the v-model and :sync should work for two-way binding.
 */

export default {
    props: {
        /**
         *  Publicly exposed date property (use .dateValue if modifying internally).
         */
        date: { type: Date, default: null },
    },
    data() {
        return {
            dateValue: this.date,
        };
    },
    watch: {
        date: {
            handler(nv) {
                this.dateValue = nv;
            },
        },
        dateValue(nv) {
            /**
             * Fired when the date changes. Expected to primarily be used for :sync scenarios.
             * @property {Date} nv The new date value.
             */
            this.$emit('update:date', nv);

            /**
             * Fired when the date changes.
             * @property {Date} nv The new date value.
             */
            this.$emit('changed', nv);
        },
    },
};
</script>
