ship-view-ui-plus/src/components/date-picker/base/mixin.js

A high quality UI components Library with Vue.js 3

import { clearHours } from '../util';
import random from '../../../utils/random_str';

export default {
    name: 'PanelTable',
    emits: ['on-pick', 'on-pick-click', 'on-change-range'],
    inject: ['PickerInstance'],
    props: {
        tableDate: {
            type: Date,
            required: true
        },
        disabledDate: {
            type: Function
        },
        selectionMode: {
            type: String,
            required: true
        },
        modelValue: {
            type: Array,
            required: true
        },
        rangeState: {
            type: Object,
            default: () => ({
                from: null,
                to: null,
                selecting: false
            })
        },
        focusedDate: {
            type: Date,
            required: true,
        }
    },
    data () {
        return {
            id: random(6)
        }
    },
    computed: {
        dates () {
            const { selectionMode, modelValue, rangeState } = this;
            const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
            return rangeSelecting ? [rangeState.from] : modelValue;
        }
    },
    methods: {
        handleClick (cell, e) {
            e.stopPropagation();

            if (cell.disabled || cell.type === 'weekLabel') return;
            const newDate = new Date(clearHours(cell.date));

            this.$emit('on-pick', newDate);
            this.$emit('on-pick-click');
        },
        handleMouseMove (cell) {
            if (!this.rangeState.selecting) return;
            if (cell.disabled) return;
            const newDate = cell.date;
            this.$emit('on-change-range', newDate);
        },
        addPanelTable () {
            const root = this.PickerInstance;
            if (!root.panelTableList) root.panelTableList = [];
            root.panelTableList.push({
                id: this.id,
                panelTable: this
            });
        },
        removePanelTable () {
            const root = this.PickerInstance;
            if (root.panelTableList && root.panelTableList.length) {
                const index = root.panelTableList.findIndex(item => item.id === this.id);
                root.panelTableList.splice(index, 1);
            }
        }
    },
    mounted () {
        this.addPanelTable();
    },
    beforeUnmount () {
        this.removePanelTable();
    }
};