<commit_before><template>
    <div class="ui-datepicker-calendar" :class="classes">
        <div class="ui-datepicker-calendar__header">
            <div
                class="ui-datepicker-calendar__header-year"
                tabindex="0"

                :class="{ 'is-active': showYearPicker }"

                @click="$emit('update:currentView', 'year')"
                @keydown.enter="$emit('update:currentView', 'year')"
            >{{ headerYear }}</div>

            <div
                class="ui-datepicker-calendar__header-date"
                tabindex="0"

                :class="{ 'is-active': !showYearPicker }"

                @click="$emit('update:currentView', 'date')"
                @keydown.enter="$emit('update:currentView', 'date')"
            >
                <span class="ui-datepicker-calendar__header-weekday">{{ headerWeekday }}, </span>
                <span class="ui-datepicker-calendar__header-day">{{ headerDay }}</span>
            </div>
        </div>

        <ul class="ui-datepicker-calendar__years" ref="years" v-show="showYearPicker">
            <li
                class="ui-datepicker-calendar__year"
                tabindex="0"

                :class="getYearClasses(year)"

                @click="selectYear(year)"
                @keydown.enter="selectYear(year)"

                v-for="year in yearRange"
                v-if="!isYearOutOfRange(year)"
            >{{ year }}</li>
        </ul>

        <div class="ui-datepicker-calendar__body" v-show="!showYearPicker">
            <ui-calendar-controls
                ref="controls"

                :date-in-view="dateInView"
                :lang="lang"
                :max-date="maxDate"
                :min-date="minDate"
                :year-range="yearRange"

                @go-to-date="onGoToDate"
            ></ui-calendar-controls>

            <ui-calendar-month
                ref="month"
                square-cells

                :color="color"
                :date-filter="dateFilter"
                :date-in-view="dateInView"
                :lang="lang"
                :max-date="maxDate"
                :min-date="minDate"
                :selected="value"
                :start-of-week="startOfWeek"

                @change="onMonthChange"
                @date-select="onDateSelect"
            ></ui-calendar-month>
        </div>
    </div>
</template>

<script>
import UiCalendarControls from './UiCalendarControls.vue';
import UiCalendarMonth from './UiCalendarMonth.vue';

import dateUtils from './helpers/date';
import { scrollIntoView } from './helpers/element-scroll';

export default {
    name: 'ui-datepicker-calendar',

    props: {
        value: Date,
        minDate: Date,
        maxDate: Date,
        startOfWeek: {
            type: Number,
            default: 0
        },
        currentView: {
            type: String,
            validator: value => value === 'date' || value === 'year'
        },
        lang: {
            type: Object,
            default() {
                return dateUtils.defaultLang;
            }
        },
        yearRange: {
            type: Array,
            default() {
                const thisYear = (new Date()).getFullYear();

                // Generates a range of 200 years
                // (100 years into the past and 100 years into the future, including the current year)
                return Array.apply(null, Array(200))
                    .map((item, index) => {
                        return (thisYear - 100) + index;
                    });
            }
        },
        dateFilter: Function,
        color: {
            type: String,
            default: 'primary' // 'primary' or 'accent'
        },
        orientation: {
            type: String,
            default: 'portrait' // 'portrait' or 'landscape'
        }
    },

    data() {
        return {
            today: new Date(),
            dateInView: this.getDateInRange(this.value, new Date())
        };
    },

    computed: {
        classes() {
            return [
                `ui-datepicker-calendar--color-${this.color}`,
                `ui-datepicker-calendar--orientation-${this.orientation}`
            ];
        },

        headerYear() {
            return this.value ? this.value.getFullYear() : this.today.getFullYear();
        },

        headerWeekday() {
            return this.value ?
                dateUtils.getDayAbbreviated(this.value, this.lang) :
                dateUtils.getDayAbbreviated(this.today, this.lang);
        },

        headerDay() {
            const date = this.value ? this.value : this.today;

            return dateUtils.getMonthAbbreviated(date, this.lang) + ' ' +
                dateUtils.getDayOfMonth(date, this.lang);
        },

        showYearPicker() {
            return this.currentView === 'year';
        },

        showDatePicker() {
            return this.currentView === 'date';
        }
    },

    watch: {
        value() {
            if (this.value) {
                this.dateInView = dateUtils.clone(this.value);
            }
        },

        currentView() {
            if (this.showYearPicker) {
                this.$nextTick(() => {
                    const el = this.$refs.years.querySelector('.is-selected') ||
                    this.$refs.years.querySelector('.is-current-year');

                    scrollIntoView(el, { marginTop: 144 });
                });
            }
        }
    },

    methods: {
        selectYear(year) {
            const newDate = dateUtils.clone(this.dateInView);
            newDate.setFullYear(year);

            this.dateInView = this.getDateInRange(newDate);
            this.$emit('update:currentView', 'date')
        },<commit_msg>Fix lint<commit_after><template>
    <div class="ui-datepicker-calendar" :class="classes">
        <div class="ui-datepicker-calendar__header">
            <div
                class="ui-datepicker-calendar__header-year"
                tabindex="0"

                :class="{ 'is-active': showYearPicker }"

                @click="$emit('update:currentView', 'year')"
                @keydown.enter="$emit('update:currentView', 'year')"
            >{{ headerYear }}</div>

            <div
                class="ui-datepicker-calendar__header-date"
                tabindex="0"

                :class="{ 'is-active': !showYearPicker }"

                @click="$emit('update:currentView', 'date')"
                @keydown.enter="$emit('update:currentView', 'date')"
            >
                <span class="ui-datepicker-calendar__header-weekday">{{ headerWeekday }}, </span>
                <span class="ui-datepicker-calendar__header-day">{{ headerDay }}</span>
            </div>
        </div>

        <ul class="ui-datepicker-calendar__years" ref="years" v-show="showYearPicker">
            <li
                class="ui-datepicker-calendar__year"
                tabindex="0"

                :class="getYearClasses(year)"

                @click="selectYear(year)"
                @keydown.enter="selectYear(year)"

                v-for="year in yearRange"
                v-if="!isYearOutOfRange(year)"
            >{{ year }}</li>
        </ul>

        <div class="ui-datepicker-calendar__body" v-show="!showYearPicker">
            <ui-calendar-controls
                ref="controls"

                :date-in-view="dateInView"
                :lang="lang"
                :max-date="maxDate"
                :min-date="minDate"
                :year-range="yearRange"

                @go-to-date="onGoToDate"
            ></ui-calendar-controls>

            <ui-calendar-month
                ref="month"
                square-cells

                :color="color"
                :date-filter="dateFilter"
                :date-in-view="dateInView"
                :lang="lang"
                :max-date="maxDate"
                :min-date="minDate"
                :selected="value"
                :start-of-week="startOfWeek"

                @change="onMonthChange"
                @date-select="onDateSelect"
            ></ui-calendar-month>
        </div>
    </div>
</template>

<script>
import UiCalendarControls from './UiCalendarControls.vue';
import UiCalendarMonth from './UiCalendarMonth.vue';

import dateUtils from './helpers/date';
import { scrollIntoView } from './helpers/element-scroll';

export default {
    name: 'ui-datepicker-calendar',

    props: {
        value: Date,
        minDate: Date,
        maxDate: Date,
        startOfWeek: {
            type: Number,
            default: 0
        },
        currentView: {
            type: String,
            validator: value => value === 'date' || value === 'year'
        },
        lang: {
            type: Object,
            default() {
                return dateUtils.defaultLang;
            }
        },
        yearRange: {
            type: Array,
            default() {
                const thisYear = (new Date()).getFullYear();

                // Generates a range of 200 years
                // (100 years into the past and 100 years into the future, including the current year)
                return Array.apply(null, Array(200))
                    .map((item, index) => {
                        return (thisYear - 100) + index;
                    });
            }
        },
        dateFilter: Function,
        color: {
            type: String,
            default: 'primary' // 'primary' or 'accent'
        },
        orientation: {
            type: String,
            default: 'portrait' // 'portrait' or 'landscape'
        }
    },

    data() {
        return {
            today: new Date(),
            dateInView: this.getDateInRange(this.value, new Date())
        };
    },

    computed: {
        classes() {
            return [
                `ui-datepicker-calendar--color-${this.color}`,
                `ui-datepicker-calendar--orientation-${this.orientation}`
            ];
        },

        headerYear() {
            return this.value ? this.value.getFullYear() : this.today.getFullYear();
        },

        headerWeekday() {
            return this.value ?
                dateUtils.getDayAbbreviated(this.value, this.lang) :
                dateUtils.getDayAbbreviated(this.today, this.lang);
        },

        headerDay() {
            const date = this.value ? this.value : this.today;

            return dateUtils.getMonthAbbreviated(date, this.lang) + ' ' +
                dateUtils.getDayOfMonth(date, this.lang);
        },

        showYearPicker() {
            return this.currentView === 'year';
        },

        showDatePicker() {
            return this.currentView === 'date';
        }
    },

    watch: {
        value() {
            if (this.value) {
                this.dateInView = dateUtils.clone(this.value);
            }
        },

        currentView() {
            if (this.showYearPicker) {
                this.$nextTick(() => {
                    const el = this.$refs.years.querySelector('.is-selected') ||
                    this.$refs.years.querySelector('.is-current-year');

                    scrollIntoView(el, { marginTop: 144 });
                });
            }
        }
    },

    methods: {
        selectYear(year) {
            const newDate = dateUtils.clone(this.dateInView);
            newDate.setFullYear(year);

            this.dateInView = this.getDateInRange(newDate);
            this.$emit('update:currentView', 'date');
        },
{'fraction_non_alphanumeric': 0.13301559792027728, 'fraction_numerical': 0.0038128249566724438, 'mean_word_length': 1.4215274863617289, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2734430', 'n_tokens_mistral': 3273, 'n_tokens_neox': 3004, 'n_words': 521}