@kokoccc/vuetify 1.0.1

package/src/components/VCalendar/VCalendarWeekly.ts

@@ -0,0 +1,225 @@
+import { h, defineComponent } from 'vue'
+// Styles
+import './VCalendarWeekly.sass'
+
+// Types
+import { VNode } from 'vue'
+
+// Components
+import VBtn from '../VBtn'
+
+// Mixins
+import CalendarBase from './mixins/calendar-base'
+
+// Util
+import { getSlot } from '../../util/helpers'
+import { weekNumber } from '../../util/dateTimeUtils'
+import props from './util/props'
+import {
+  createDayList,
+  getDayIdentifier,
+  createNativeLocaleFormatter,
+  validateTimestamp,
+} from './util/timestamp'
+import { CalendarTimestamp, CalendarFormatter } from 'vuetify/types'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-calendar-weekly',
+  extends: CalendarBase,
+
+  props: {
+    ...props.weeks,
+    now: {
+      type: String,
+      validator: validateTimestamp,
+    },
+  },
+
+  computed: {
+    staticClass (): string {
+      return 'v-calendar-weekly'
+    },
+    classes (): object {
+      return this.themeClasses
+    },
+    parsedMinWeeks (): number {
+      return parseInt(this.minWeeks)
+    },
+    days (): CalendarTimestamp[] {
+      const minDays = this.parsedMinWeeks * this.parsedWeekdays.length
+      const start = this.getStartOfWeek(this.parsedStart)
+      const end = this.getEndOfWeek(this.parsedEnd)
+
+      return createDayList(
+        start,
+        end,
+        this.times.today,
+        this.weekdaySkips,
+        Number.MAX_SAFE_INTEGER,
+        minDays
+      )
+    },
+    todayWeek (): CalendarTimestamp[] {
+      const now = this.times.now
+      const start = this.getStartOfWeek(now)
+      const end = this.getEndOfWeek(now)
+
+      return createDayList(
+        start,
+        end,
+        now,
+        this.weekdaySkips,
+        this.parsedWeekdays.length,
+        this.parsedWeekdays.length
+      )
+    },
+    monthFormatter (): CalendarFormatter {
+      if (this.monthFormat) {
+        return this.monthFormat as CalendarFormatter
+      }
+
+      const longOptions = { timeZone: 'UTC', month: 'long' }
+      const shortOptions = { timeZone: 'UTC', month: 'short' }
+
+      return createNativeLocaleFormatter(
+        this.currentLocale,
+        (_tms, short) => short ? shortOptions : longOptions
+      )
+    },
+  },
+
+  methods: {
+    isOutside (day: CalendarTimestamp): boolean {
+      const dayIdentifier = getDayIdentifier(day)
+
+      return dayIdentifier < getDayIdentifier(this.parsedStart) ||
+             dayIdentifier > getDayIdentifier(this.parsedEnd)
+    },
+    genHead (): VNode {
+      return h('div', {
+        class: 'v-calendar-weekly__head',
+        role: 'row',
+      }, this.genHeadDays())
+    },
+    genHeadDays (): VNode[] {
+      const header = this.todayWeek.map(this.genHeadDay)
+
+      if (this.showWeek) {
+        header.unshift(h('div', {
+          class: 'v-calendar-weekly__head-weeknumber',
+        }))
+      }
+
+      return header
+    },
+    genHeadDay (day: CalendarTimestamp, index: number): VNode {
+      const outside = this.isOutside(this.days[index])
+      const color = day.present ? this.color : undefined
+
+      return h('div', this.setTextColor(color, {
+        key: day.date,
+        class: ['v-calendar-weekly__head-weekday', this.getRelativeClasses(day, outside)],
+        role: 'columnheader',
+      }), this.weekdayFormatter(day, this.shortWeekdays))
+    },
+    genWeeks (): VNode[] {
+      const days = this.days
+      const weekDays = this.parsedWeekdays.length
+      const weeks: VNode[] = []
+
+      for (let i = 0; i < days.length; i += weekDays) {
+        weeks.push(this.genWeek(days.slice(i, i + weekDays), this.getWeekNumber(days[i])))
+      }
+
+      return weeks
+    },
+    genWeek (week: CalendarTimestamp[], weekNumber: number): VNode {
+      const weekNodes = week.map((day, index) => this.genDay(day, index, week))
+
+      if (this.showWeek) {
+        weekNodes.unshift(this.genWeekNumber(weekNumber))
+      }
+
+      return h('div', {
+        key: week[0].date,
+        class: 'v-calendar-weekly__week',
+        role: 'row',
+      }, weekNodes)
+    },
+    getWeekNumber (determineDay: CalendarTimestamp) {
+      return weekNumber(
+        determineDay.year,
+        determineDay.month - 1,
+        determineDay.day,
+        this.parsedWeekdays[0],
+        parseInt(this.localeFirstDayOfYear)
+      )
+    },
+    genWeekNumber (weekNumber: number) {
+      return h('div', {
+        class: 'v-calendar-weekly__weeknumber',
+      }, [
+        h('small', String(weekNumber)),
+      ])
+    },
+    genDay (day: CalendarTimestamp, index: number, week: CalendarTimestamp[]): VNode {
+      const outside = this.isOutside(day)
+
+      return h('div', {
+        key: day.date,
+        class: ['v-calendar-weekly__day', this.getRelativeClasses(day, outside)],
+        role: 'cell',
+        ...this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+          return { nativeEvent, ...day }
+        }),
+      }, [
+        this.genDayLabel(day),
+        ...(getSlot(this, 'day', { outside, index, week, ...day }) || []),
+      ])
+    },
+    genDayLabel (day: CalendarTimestamp): VNode {
+      return h('div', {
+        class: 'v-calendar-weekly__day-label',
+      }, getSlot(this, 'day-label', day) || [this.genDayLabelButton(day)])
+    },
+    genDayLabelButton (day: CalendarTimestamp): VNode {
+      const color = day.present ? this.color : 'transparent'
+      const hasMonth = day.day === 1 && this.showMonthOnFirst
+
+      return h(VBtn, {
+        color,
+        fab: true,
+        depressed: true,
+        small: true,
+        ...this.getMouseEventHandlers({
+          'click:date': { event: 'click', stop: true },
+          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+        }, nativeEvent => ({ nativeEvent, ...day })),
+      }, {
+        default: () => hasMonth
+          ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
+          : this.dayFormatter(day, false)
+      })
+    },
+    genDayMonth (day: CalendarTimestamp): VNode | string {
+      const color = day.present ? this.color : undefined
+
+      return h('div', this.setTextColor(color, {
+        class: 'v-calendar-weekly__day-month',
+      }), getSlot(this, 'day-month', day) || this.monthFormatter(day, this.shortMonths))
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: [this.staticClass, this.classes],
+      onDragstart: (e: MouseEvent) => {
+        e.preventDefault()
+      },
+    }, [
+      !this.hideHeader ? this.genHead() : '',
+      ...this.genWeeks(),
+    ])
+  },
+})

package/src/components/VCalendar/__tests__/VCalendar.spec.ts

@@ -0,0 +1,129 @@
+import { parseDate } from '../util/timestamp'
+import VCalendar from '../VCalendar'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+} from '@vue/test-utils'
+
+describe('VCalendar', () => {
+  type Instance = InstanceType<typeof VCalendar>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VCalendar, {
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should render day view', async () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'day',
+        start: '2018-01-29',
+        end: '2018-02-04',
+        now: '2019-02-17',
+      },
+    })
+
+    expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render 4-day view', async () => {
+    const wrapper = mountFunction({
+      props: {
+        type: '4day',
+        start: '2018-01-29',
+        end: '2018-02-04',
+        now: '2019-02-17',
+      },
+    })
+
+    expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render week view', async () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'week',
+        start: '2018-01-29',
+        end: '2018-02-04',
+        now: '2019-02-17',
+      },
+    })
+
+    expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it.skip('should render month view', async () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'month',
+        start: '2018-01-29',
+        end: '2018-02-04',
+        now: '2019-02-17',
+      },
+    })
+
+    expect(wrapper.classes('v-calendar-monthly')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should parse value', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: '2019-02-02',
+        start: '2019-01-29',
+        end: '2019-02-04',
+      },
+    })
+
+    expect(wrapper.vm.parsedValue.date).toBe('2019-02-02')
+  })
+
+  it('should parse start', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+      },
+    })
+
+    expect(wrapper.vm.parsedValue.date).toBe('2019-01-29')
+  })
+
+  it('should go to correct day when using next/prev public functions', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: '2019-01-11',
+        type: 'day',
+        weekdays: [1, 2, 3, 4, 5],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.vm.next()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.vm.prev()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

package/src/components/VCalendar/__tests__/VCalendarCategory.spec.ts

@@ -0,0 +1,112 @@
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+} from '@vue/test-utils'
+import { ExtractVue } from '../../../util/mixins'
+import VCalendar from '../VCalendar'
+
+describe('VCalendarCategory', () => {
+  type Instance = ExtractVue<typeof VCalendar>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VCalendar, {
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should test categoryText prop as a string', () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'category',
+        events: [{ start: '2019-02-17', category: 'Nate' }],
+        categories: [{ name: 'Nate' }],
+        categoryText: 'name',
+      },
+    })
+
+    expect(wrapper.find('.v-calendar-category__column-header').text()).toEqual('Nate')
+  })
+
+  it('should test categoryText prop as a function', () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'category',
+        events: [{ start: '2019-02-17', category: '20' }],
+        categories: [{ name: 'Nate', age: '20' }],
+        categoryText (category) {
+          return category.age
+        },
+      },
+    })
+
+    expect(wrapper.find('.v-calendar-category__column-header').text()).toEqual('20')
+  })
+
+  it('should pass entire cateogry to interval style method', () => {
+    function intervalStyle (obj) {
+      expect(obj.category.name).toEqual('Nate')
+      expect(obj.category.age).toEqual(20)
+      expect(obj.category.categoryName).toEqual('Nate')
+    }
+
+    const wrapper = mountFunction({
+      props: {
+        type: 'category',
+        events: [{ start: '2019-02-17', category: 'Nate' }],
+        categories: [{ name: 'Nate', age: 20 }, { name: 'Bob', age: 30 }],
+        categoryText: 'name',
+        intervalStyle,
+      },
+    })
+  })
+
+  it('should show all categories when events arent tied to each catogry', () => {
+    let intervals = 0
+    function intervalStyle (obj) {
+      if (intervals < 24) expect(obj.category.name).toEqual('Nate')
+      else expect(obj.category.name).toEqual('Bob')
+      intervals++
+    }
+
+    const wrapper = mountFunction({
+      props: {
+        type: 'category',
+        categoryShowAll: true,
+        events: [{ start: '2019-02-17', category: 'Nate' }],
+        categories: [{ name: 'Nate', age: 20 }, { name: 'Bob', age: 30 }],
+        categoryText: 'name',
+        intervalStyle,
+      },
+    })
+  })
+
+  it('should pass strings from an array', () => {
+    let intervals = 0
+    function intervalStyle (obj) {
+      if (intervals < 24) expect(obj.category).toEqual('Nate')
+      else expect(obj.category).toEqual('Bob')
+      intervals++
+    }
+
+    const wrapper = mountFunction({
+      props: {
+        type: 'category',
+        events: [{ start: '2019-02-17', category: 'Nate' }, { start: '2019-02-18', category: 'Bob' }],
+        categories: ['Nate', 'Bob'],
+        intervalStyle,
+      },
+    })
+  })
+})

package/src/components/VCalendar/__tests__/VCalendarDaily.spec.ts

@@ -0,0 +1,187 @@
+import VCalendarDaily from '../VCalendarDaily'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+} from '@vue/test-utils'
+
+describe('VCalendarDaily', () => {
+  type Instance = InstanceType<typeof VCalendarDaily>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VCalendarDaily, {
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and have v-calendar-daily class', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+      },
+    })
+
+    expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it.skip('should compute scrollPush on init', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+      },
+    })
+
+    // jest.spyOn не работает с Vue 3 компонентами
+    // jest.spyOn(wrapper.vm, 'getScrollPush').mockImplementation(_ => 123)
+
+    expect(wrapper.vm.scrollPush).toBe(0)
+    // expect(wrapper.vm.getScrollPush).not.toHaveBeenCalled()
+    await wrapper.vm.$nextTick()
+    // expect(wrapper.vm.getScrollPush).toHaveBeenCalled()
+    // expect(wrapper.vm.scrollPush).toBe(123)
+  })
+
+  it('should compute scrollPush properly', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+      },
+    })
+
+    expect(wrapper.vm.getScrollPush()).toBe(0)
+
+    Object.defineProperty(wrapper.vm.$refs.scrollArea, 'offsetWidth', { value: 100 })
+    Object.defineProperty(wrapper.vm.$refs.pane, 'offsetWidth', { value: 25 })
+
+    expect(wrapper.vm.getScrollPush()).toBe(75)
+  })
+
+  it('should render correctly with intervalMinutes prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        intervalMinutes: 40,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render correctly with maxDays prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        maxDays: 5,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // TODO: Re-enable once test can be done without breaking travis
+  it.skip('should render correctly without shortIntervals prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        shortIntervals: false,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render correctly with intervalHeight prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        intervalHeight: 70,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render correctly with firstInterval prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        firstInterval: 2,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render correctly with intervalCount prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        intervalCount: 12,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should use custom interval formatter and render correctly', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        intervalFormat: jest.fn(x => `test: ${x.date} ${x.time}`),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.intervalFormat).toHaveBeenCalled()
+  })
+
+  it('should use custom interval style function and render correctly', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        intervalStyle: jest.fn(x => ({
+          opacity: x.hour / 24,
+        })),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.intervalStyle).toHaveBeenCalled()
+  })
+
+  it('should use custom showIntervalLabel function and render correctly', async () => {
+    const wrapper = mountFunction({
+      props: {
+        start: '2019-01-29',
+        end: '2019-02-04',
+        showIntervalLabel: jest.fn(x => (x.hour % 2 === 0)),
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.showIntervalLabel).toHaveBeenCalled()
+  })
+})