@kokoccc/vuetify 1.0.1

package/src/components/VBtnToggle/VBtnToggle.sass

@@ -0,0 +1,99 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-btn-toggle) using ($material)
+  &:not(.v-btn-toggle--group)
+    background: map-get($material, 'cards')
+    color: map-deep-get($material, 'text', 'primary')
+
+    .v-btn.v-btn
+      border-color: map-get($material, 'dividers') !important
+
+      &:focus:not(:active)
+        border-color: map-deep-get($material, 'buttons', 'disabled')
+
+      .v-icon
+        color: map-deep-get($material, 'toggle-buttons', 'color')
+
+// Block
+.v-btn-toggle
+  border-radius: $btn-toggle-border-radius
+  display: inline-flex
+  max-width: 100%
+
+  > .v-btn.v-btn
+    border-radius: 0
+    border-style: solid
+    border-width: thin
+    box-shadow: none
+    box-shadow: none
+    opacity: $btn-toggle-btn-opacity
+    padding: $btn-toggle-btn-padding
+
+    &:first-child
+      +ltr()
+        border-top-left-radius: inherit
+        border-bottom-left-radius: inherit
+
+      +rtl()
+        border-top-right-radius: inherit
+        border-bottom-right-radius: inherit
+
+    &:last-child
+      +ltr()
+        border-top-right-radius: inherit
+        border-bottom-right-radius: inherit
+
+      +rtl()
+        border-top-left-radius: inherit
+        border-bottom-left-radius: inherit
+
+    &--active
+      color: inherit
+      opacity: 1
+
+    &:after
+      display: none
+
+    +ltr()
+      &:not(:first-child)
+        border-left-width: 0
+
+    +rtl()
+      &:not(:last-child)
+        border-left-width: 0
+
+  .v-btn.v-btn.v-size--default
+    min-width: $btn-toggle-btn-width
+    min-height: 0
+
+  &:not(.v-btn-toggle--dense)
+    .v-btn.v-btn.v-size--default
+      height: $btn-toggle-btn-height
+
+.v-btn-toggle--borderless
+  > .v-btn.v-btn
+    border-width: 0
+
+.v-btn-toggle--dense
+  > .v-btn.v-btn
+    padding: $btn-toggle-dense-btn-padding
+
+.v-btn-toggle--group
+  border-radius: 0
+
+  > .v-btn.v-btn
+    background-color: transparent !important
+    border-color: transparent
+    margin: $btn-toggle-group-btn-margin
+    min-width: auto
+
+.v-btn-toggle--rounded
+  border-radius: $btn-toggle-round-border-radius
+
+.v-btn-toggle--shaped
+  border-radius: $btn-toggle-shaped-border-radius $btn-toggle-border-radius
+
+.v-btn-toggle--tile
+  border-radius: 0

package/src/components/VBtnToggle/VBtnToggle.ts

@@ -0,0 +1,55 @@
+// Styles
+import './VBtnToggle.sass'
+
+// Mixins
+import ButtonGroup from '../../mixins/button-group'
+import Colorable from '../../mixins/colorable'
+
+// Utilities
+import mixins from '../../util/mixins'
+
+/* @vue/component */
+export default mixins(
+  ButtonGroup,
+  Colorable
+).extend({
+  name: 'v-btn-toggle',
+
+  props: {
+    backgroundColor: String,
+    borderless: Boolean,
+    dense: Boolean,
+    group: Boolean,
+    rounded: Boolean,
+    shaped: Boolean,
+    tile: Boolean,
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        ...ButtonGroup.computed.classes.call(this),
+        'v-btn-toggle': true,
+        'v-btn-toggle--borderless': this.borderless,
+        'v-btn-toggle--dense': this.dense,
+        'v-btn-toggle--group': this.group,
+        'v-btn-toggle--rounded': this.rounded,
+        'v-btn-toggle--shaped': this.shaped,
+        'v-btn-toggle--tile': this.tile,
+        ...this.themeClasses,
+      }
+    },
+  },
+
+  methods: {
+    genData () {
+      const data = this.setTextColor(this.color, {
+        ...ButtonGroup.methods.genData.call(this),
+      })
+
+      if (this.group) return data
+
+      return this.setBackgroundColor(this.backgroundColor, data)
+    },
+  },
+})

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

@@ -0,0 +1,40 @@
+// Components
+import VBtnToggle from '../VBtnToggle'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+// Types
+import { ExtractVue } from '../../../util/mixins'
+
+describe('VBtnToggle.ts', () => {
+  type Instance = ExtractVue<typeof VBtnToggle>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
+      return mount(VBtnToggle, {
+        ...options,
+      })
+    }
+  })
+
+  it('should not apply background color with group', async () => {
+    const wrapper = mountFunction({
+      props: { backgroundColor: 'primary' },
+    })
+
+    expect(wrapper.element.classList.contains('primary')).toBeTruthy()
+
+    await wrapper.setProps({ group: true })
+
+    expect(wrapper.element.classList.contains('primary')).toBeFalsy()
+  })
+})

package/src/components/VBtnToggle/_variables.scss

@@ -0,0 +1,11 @@
+@import '../../styles/styles.sass';
+
+$btn-toggle-border-radius: $border-radius-root !default;
+$btn-toggle-shaped-border-radius: 24px !default;
+$btn-toggle-btn-height: 48px !default;
+$btn-toggle-btn-padding: 0 12px !default;
+$btn-toggle-btn-width: 48px !default;
+$btn-toggle-btn-opacity: 0.8 !default;
+$btn-toggle-round-border-radius: 24px !default;
+$btn-toggle-dense-btn-padding: 0 8px !default;
+$btn-toggle-group-btn-margin: 4px !default;

package/src/components/VBtnToggle/index.ts

@@ -0,0 +1,4 @@
+import VBtnToggle from './VBtnToggle'
+
+export { VBtnToggle }
+export default VBtnToggle

package/src/components/VCalendar/VCalendar.ts

@@ -0,0 +1,383 @@
+import { h, defineComponent, VNode, Component, withDirectives } from 'vue'
+// Styles
+// import '../../stylus/components/_calendar-daily.styl'
+
+// Directives
+import Resize from '../../directives/resize'
+
+// Mixins
+import CalendarWithEvents from './mixins/calendar-with-events'
+
+// Util
+import props from './util/props'
+import {
+  DAYS_IN_MONTH_MAX,
+  DAY_MIN,
+  DAYS_IN_WEEK,
+  parseTimestamp,
+  validateTimestamp,
+  relativeDays,
+  nextDay,
+  prevDay,
+  copyTimestamp,
+  updateFormatted,
+  updateWeekday,
+  updateRelative,
+  getStartOfMonth,
+  getEndOfMonth,
+  VTime,
+  VTimestampInput,
+  timestampToDate,
+} from './util/timestamp'
+
+// Calendars
+import VCalendarMonthly from './VCalendarMonthly'
+import VCalendarDaily from './VCalendarDaily'
+import VCalendarWeekly from './VCalendarWeekly'
+import VCalendarCategory from './VCalendarCategory'
+import { CalendarTimestamp, CalendarFormatter, CalendarCategory } from 'vuetify/types'
+import { getParsedCategories } from './util/parser'
+
+// Types
+interface VCalendarRenderProps {
+  start: CalendarTimestamp
+  end: CalendarTimestamp
+  component: string | Component
+  maxDays: number
+  weekdays: number[]
+  categories: CalendarCategory[]
+}
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-calendar',
+
+
+  extends: CalendarWithEvents,
+
+  props: {
+    ...props.calendar,
+    ...props.weeks,
+    ...props.intervals,
+    ...props.category,
+  },
+
+  emits: ['change', 'update:modelValue', 'moved', 'click:date'],
+
+  data: () => ({
+    lastStart: null as CalendarTimestamp | null,
+    lastEnd: null as CalendarTimestamp | null,
+  }),
+
+  computed: {
+    parsedValue (): CalendarTimestamp {
+      return (validateTimestamp(this.value)
+        ? parseTimestamp(this.value, true)
+        : (this.parsedStart || this.times.today))
+    },
+    parsedCategoryDays (): number {
+      return parseInt(this.categoryDays) || 1
+    },
+    renderProps (): VCalendarRenderProps {
+      const around = this.parsedValue
+      let component: any = null
+      let maxDays = this.maxDays
+      let weekdays = this.parsedWeekdays
+      let categories = this.parsedCategories
+      let start = around
+      let end = around
+      switch (this.type) {
+        case 'month':
+          component = VCalendarMonthly
+          start = getStartOfMonth(around)
+          end = getEndOfMonth(around)
+          break
+        case 'week':
+          component = VCalendarDaily
+          start = this.getStartOfWeek(around)
+          end = this.getEndOfWeek(around)
+          maxDays = 7
+          break
+        case 'day':
+          component = VCalendarDaily
+          maxDays = 1
+          weekdays = [start.weekday]
+          break
+        case '4day':
+          component = VCalendarDaily
+          end = relativeDays(copyTimestamp(end), nextDay, 3)
+          updateFormatted(end)
+          maxDays = 4
+          weekdays = [
+            start.weekday,
+            (start.weekday + 1) % 7,
+            (start.weekday + 2) % 7,
+            (start.weekday + 3) % 7,
+          ]
+          break
+        case 'custom-weekly':
+          component = VCalendarWeekly
+          start = this.parsedStart || around
+          end = this.parsedEnd
+          break
+        case 'custom-daily':
+          component = VCalendarDaily
+          start = this.parsedStart || around
+          end = this.parsedEnd
+          break
+        case 'category':
+          const days = this.parsedCategoryDays
+
+          component = VCalendarCategory
+          end = relativeDays(copyTimestamp(end), nextDay, days)
+          updateFormatted(end)
+          maxDays = days
+          weekdays = []
+
+          for (let i = 0; i < days; i++) {
+            weekdays.push((start.weekday + i) % 7)
+          }
+
+          categories = this.getCategoryList(categories)
+          break
+        default:
+          throw new Error(this.type + ' is not a valid Calendar type')
+      }
+
+      return { component, start, end, maxDays, weekdays, categories }
+    },
+    eventWeekdays (): number[] {
+      return this.renderProps.weekdays
+    },
+    categoryMode (): boolean {
+      return this.type === 'category'
+    },
+    title (): string {
+      const { start, end } = this.renderProps
+      const spanYears = start.year !== end.year
+      const spanMonths = spanYears || start.month !== end.month
+
+      if (spanYears) {
+        return this.monthShortFormatter(start, true) + ' ' + start.year + ' - ' + this.monthShortFormatter(end, true) + ' ' + end.year
+      }
+
+      if (spanMonths) {
+        return this.monthShortFormatter(start, true) + ' - ' + this.monthShortFormatter(end, true) + ' ' + end.year
+      } else {
+        return this.monthLongFormatter(start, false) + ' ' + start.year
+      }
+    },
+    monthLongFormatter (): CalendarFormatter {
+      return this.getFormatter({
+        timeZone: 'UTC', month: 'long',
+      })
+    },
+    monthShortFormatter (): CalendarFormatter {
+      return this.getFormatter({
+        timeZone: 'UTC', month: 'short',
+      })
+    },
+    parsedCategories (): CalendarCategory[] {
+      return getParsedCategories(this.categories, this.categoryText)
+    },
+  },
+
+  watch: {
+    renderProps: 'checkChange',
+  },
+
+  mounted () {
+    this.updateEventVisibility()
+    this.checkChange()
+  },
+
+  updated () {
+    window.requestAnimationFrame(this.updateEventVisibility)
+  },
+
+  methods: {
+    checkChange (): void {
+      const { lastStart, lastEnd } = this
+      const { start, end } = this.renderProps
+      if (!lastStart || !lastEnd ||
+        start.date !== lastStart.date ||
+        end.date !== lastEnd.date) {
+        this.lastStart = start
+        this.lastEnd = end
+        this.$emit('change', { start, end })
+      }
+    },
+    move (amount = 1): void {
+      const moved = copyTimestamp(this.parsedValue)
+      const forward = amount > 0
+      const mover = forward ? nextDay : prevDay
+      const limit = forward ? DAYS_IN_MONTH_MAX : DAY_MIN
+      let times = forward ? amount : -amount
+
+      while (--times >= 0) {
+        switch (this.type) {
+          case 'month':
+            moved.day = limit
+            mover(moved)
+            break
+          case 'week':
+            relativeDays(moved, mover, DAYS_IN_WEEK)
+            break
+          case 'day':
+            relativeDays(moved, mover, 1)
+            break
+          case '4day':
+            relativeDays(moved, mover, 4)
+            break
+          case 'category':
+            relativeDays(moved, mover, this.parsedCategoryDays)
+            break
+        }
+      }
+
+      updateWeekday(moved)
+      updateFormatted(moved)
+      updateRelative(moved, this.times.now)
+
+      if (this.value instanceof Date) {
+        this.$emit('update:modelValue', timestampToDate(moved))
+      } else if (typeof this.value === 'number') {
+        this.$emit('update:modelValue', timestampToDate(moved).getTime())
+      } else {
+        this.$emit('update:modelValue', moved.date)
+      }
+
+      this.$emit('moved', moved)
+    },
+    next (amount = 1): void {
+      this.move(amount)
+    },
+    prev (amount = 1): void {
+      this.move(-amount)
+    },
+    timeToY (time: VTime, clamp = true): number | false {
+      const c = this.$refs.calendarChild as any
+
+      if (c && c.timeToY) {
+        return c.timeToY(time, clamp)
+      } else {
+        return false
+      }
+    },
+    timeDelta (time: VTime): number | false {
+      const c = this.$refs.calendarChild as any
+
+      if (c && c.timeDelta) {
+        return c.timeDelta(time)
+      } else {
+        return false
+      }
+    },
+    minutesToPixels (minutes: number): number {
+      const c = this.$refs.calendarChild as any
+
+      if (c && c.minutesToPixels) {
+        return c.minutesToPixels(minutes)
+      } else {
+        return -1
+      }
+    },
+    scrollToTime (time: VTime): boolean {
+      const c = this.$refs.calendarChild as any
+
+      if (c && c.scrollToTime) {
+        return c.scrollToTime(time)
+      } else {
+        return false
+      }
+    },
+    parseTimestamp (input: VTimestampInput, required?: false): CalendarTimestamp | null {
+      return parseTimestamp(input, required, this.times.now)
+    },
+    timestampToDate (timestamp: CalendarTimestamp): Date {
+      return timestampToDate(timestamp)
+    },
+    getCategoryList (categories: CalendarCategory[]): CalendarCategory[] {
+      if (!this.noEvents) {
+        const categoryMap: any = categories.reduce((map: any, category, index) => {
+          if (typeof category === 'object' && category.categoryName) map[category.categoryName] = { index, count: 0 }
+          else if (typeof category === 'string') map[category] = { index, count: 0 }
+          return map
+        }, {})
+
+        if (!this.categoryHideDynamic || !this.categoryShowAll) {
+          let categoryLength = categories.length
+
+          this.parsedEvents.forEach(ev => {
+            let category = ev.category
+
+            if (typeof category !== 'string') {
+              category = this.categoryForInvalid
+            }
+
+            if (!category) {
+              return
+            }
+
+            if (category in categoryMap) {
+              categoryMap[category].count++
+            } else if (!this.categoryHideDynamic) {
+              categoryMap[category] = {
+                index: categoryLength++,
+                count: 1,
+              }
+            }
+          })
+        }
+
+        if (!this.categoryShowAll) {
+          for (const category in categoryMap) {
+            if (categoryMap[category].count === 0) {
+              delete categoryMap[category]
+            }
+          }
+        }
+
+        categories = categories.filter((category: CalendarCategory) => {
+          if (typeof category === 'object' && category.categoryName) {
+            return categoryMap.hasOwnProperty(category.categoryName)
+          } else if (typeof category === 'string') {
+            return categoryMap.hasOwnProperty(category)
+          }
+          return false
+        })
+      }
+      return categories
+    },
+  },
+
+  render (): VNode {
+    const { start, end, maxDays, component, weekdays, categories } = this.renderProps
+
+    // Only pass categories prop to VCalendarCategory component
+    const props: any = {
+      ref: 'calendarChild',
+      class: ['v-calendar', {
+        'v-calendar-events': !this.noEvents,
+      }],
+      start: start.date,
+      end: end.date,
+      maxDays,
+      weekdays,
+      role: 'grid',
+      'onClick:date': (day: CalendarTimestamp, e?: MouseEvent) => {
+        this.$emit('update:modelValue', day.date)
+        this.$emit('click:date', day, e)
+      },
+    }
+
+    // Only add categories prop for VCalendarCategory component
+    if (component.name === 'v-calendar-category') {
+      props.categories = categories
+    }
+
+    return withDirectives(h(component, props, this.getScopedSlots()), [
+      [Resize, this.updateEventVisibility, '', { quiet: true }],
+    ])
+  },
+})

package/src/components/VCalendar/VCalendarCategory.sass

@@ -0,0 +1,100 @@
+@import './_variables.scss'
+
+// Theme
++theme(v-calendar-category) using ($material)
+  .v-calendar-category__column,
+  .v-calendar-category__column-header
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+  .v-calendar-daily__head
+    background: map-deep-get($material, 'calendar', 'background-color')
+
+  .v-calendar-daily__intervals-head
+    background: map-deep-get($material, 'calendar', 'background-color')
+
+  .v-calendar-daily__intervals-body
+    background: map-deep-get($material, 'calendar', 'background-color')
+
+.v-calendar-category
+  overflow: auto
+  position: relative
+
+  .v-calendar-category__category
+    text-align: center
+
+  .v-calendar-daily__day-container
+    width: min-content
+    .v-calendar-category__columns
+      position: absolute
+      height: 100%
+      width: 100%
+      top: 0
+
+  .v-calendar-daily__day-body
+    display: flex
+    flex: 1
+    width: 100%
+    height: 100%
+
+  .v-calendar-daily__head
+    flex-direction: row
+    width: min-content
+    min-width: 100%
+    position: sticky
+    top: 0
+    z-index: 2
+
+  .v-calendar-daily_head-day
+    width: auto
+    position: unset
+
+  .v-calendar-daily__intervals-head
+    position: sticky
+    left: 0
+    top: 0
+    z-index: 2
+
+  .v-calendar-daily_head-weekday
+    position: sticky
+    left: 50%
+    width: $calendar-daily-head-weekday-size
+
+  .v-calendar-daily_head-day-label
+    width: $calendar-daily-head-day-label-size
+    position: sticky
+    left: 50%
+
+  .v-calendar-daily__day
+    min-width: $calendar-category-column-min-width
+
+  .v-calendar-daily__intervals-body
+    position: sticky
+    left: 0
+    z-index: 1
+
+  .v-calendar-daily__interval
+    &:last-of-type::after
+      display: none
+
+  .v-calendar-daily__body
+    overflow: visible
+    .v-calendar-daily__scroll-area
+      overflow-y: visible
+      flex: none
+
+  .v-calendar-daily__pane
+    overflow-y: visible
+
+  .v-calendar-category__columns
+    display: flex
+    width: min-content
+    min-width: 100%
+
+    .v-calendar-category__column,
+    .v-calendar-category__column-header
+      flex: 1 1 auto
+      width: 0
+      position: relative
+
+    .v-calendar-category__column-header
+      min-width: $calendar-category-column-min-width