@kokoccc/vuetify 1.0.1

package/src/components/VDatePicker/index.ts

@@ -0,0 +1,26 @@
+import VDatePicker from './VDatePicker'
+import VDatePickerTitle from './VDatePickerTitle'
+import VDatePickerHeader from './VDatePickerHeader'
+import VDatePickerDateTable from './VDatePickerDateTable'
+import VDatePickerMonthTable from './VDatePickerMonthTable'
+import VDatePickerYears from './VDatePickerYears'
+
+export {
+  VDatePicker,
+  VDatePickerTitle,
+  VDatePickerHeader,
+  VDatePickerDateTable,
+  VDatePickerMonthTable,
+  VDatePickerYears,
+}
+
+export default {
+  $_vuetify_subcomponents: {
+    VDatePicker,
+    VDatePickerTitle,
+    VDatePickerHeader,
+    VDatePickerDateTable,
+    VDatePickerMonthTable,
+    VDatePickerYears,
+  },
+}

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -0,0 +1,273 @@
+import '../VDatePickerTable.sass'
+
+// Directives
+import Touch from '../../../directives/touch'
+
+// Mixins
+import Colorable from '../../../mixins/colorable'
+import Localable from '../../../mixins/localable'
+import Themeable from '../../../mixins/themeable'
+
+// Utils
+import { createItemTypeNativeListeners, sanitizeDateString } from '../util'
+import isDateAllowed from '../util/isDateAllowed'
+import { mergeListeners } from '../../../util/mergeData'
+import mixins from '../../../util/mixins'
+import { throttle } from '../../../util/helpers'
+import { breaking } from '../../../util/console'
+
+// Types
+import {
+  PropType,
+  VNodeChildren,
+  Transition,
+  withDirectives,
+  h,
+} from 'vue'
+import { PropValidator } from 'vue/types/options'
+import {
+  DatePickerAllowedDatesFunction,
+  DatePickerEventColors,
+  DatePickerEventColorValue,
+  DatePickerEvents,
+  DatePickerFormatter,
+  TouchWrapper,
+} from 'vuetify/types'
+
+type CalculateTableDateFunction = (v: number) => string
+
+export default mixins(
+  Colorable,
+  Localable,
+  Themeable
+/* @vue/component */
+).extend({
+
+  props: {
+    allowedDates: Function as PropType<DatePickerAllowedDatesFunction | undefined>,
+    current: String,
+    disabled: Boolean,
+    format: Function as PropType<DatePickerFormatter | undefined>,
+    events: {
+      type: [Array, Function, Object],
+      default: () => null,
+    } as PropValidator<DatePickerEvents | null>,
+    eventColor: {
+      type: [Array, Function, Object, String],
+      default: () => 'warning',
+    } as PropValidator<DatePickerEventColors>,
+    min: String,
+    max: String,
+    range: Boolean,
+    readonly: Boolean,
+    scrollable: Boolean,
+    tableDate: {
+      type: String,
+      required: true,
+    },
+    modelValue: [String, Array] as PropType<string | string[]>,
+  },
+
+  data: () => ({
+    isReversing: false,
+    wheelThrottle: null as any,
+  }),
+
+  computed: {
+    computedTransition (): string {
+      return (this.isReversing === !this.$vuetify.rtl) ? 'tab-reverse-transition' : 'tab-transition'
+    },
+    displayedMonth (): number {
+      return Number(this.tableDate.split('-')[1]) - 1
+    },
+    displayedYear (): number {
+      return Number(this.tableDate.split('-')[0])
+    },
+    // Vue 3 compatibility: use modelValue
+    currentValue (): string | string[] | undefined {
+      return this.modelValue
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  watch: {
+    tableDate (newVal: string, oldVal: string) {
+      this.isReversing = newVal < oldVal
+    },
+  },
+
+  mounted () {
+    this.wheelThrottle = throttle(this.wheel, 250)
+  },
+
+  methods: {
+    genButtonClasses (
+      isAllowed: boolean,
+      isFloating: boolean,
+      isSelected: boolean,
+      isCurrent: boolean,
+      isFirst: boolean,
+      isLast: boolean,
+    ) {
+      return {
+        'v-size--default': !isFloating,
+        'v-date-picker-table__current': isCurrent,
+        'v-btn--active': isSelected,
+        'v-btn--flat': !isAllowed || this.disabled,
+        'v-btn--text': isSelected === isCurrent,
+        'v-btn--rounded': isFloating,
+        'v-btn--disabled': !isAllowed || this.disabled,
+        'v-btn--outlined': isCurrent && !isSelected,
+        'v-date-picker--first-in-range': isFirst,
+        'v-date-picker--last-in-range': isLast,
+        ...this.themeClasses,
+      }
+    },
+    genButtonEvents (value: string, isAllowed: boolean, mouseEventType: string) {
+      if (this.disabled) return undefined
+
+      return mergeListeners({
+        onClick: () => {
+          if (isAllowed && !this.readonly) {
+            this.$emit('update:modelValue', value)
+          }
+        },
+      }, createItemTypeNativeListeners(this, mouseEventType, value))
+    },
+    genButton (value: string, isFloating: boolean, mouseEventType: string, formatter: DatePickerFormatter, isOtherMonth = false) {
+      const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates)
+      const isSelected = this.isSelected(value) && isAllowed
+      const isCurrent = value === this.current
+      const setColor = isSelected ? this.setBackgroundColor : this.setTextColor
+      const color = (isSelected || isCurrent) && (this.color || 'accent')
+      let isFirst = false
+      let isLast = false
+      if (this.range && !!this.currentValue && Array.isArray(this.currentValue)) {
+        isFirst = value === this.currentValue[0]
+        isLast = value === this.currentValue[this.currentValue.length - 1]
+      }
+
+      return h('button', setColor(color, {
+        class: ['v-btn', this.genButtonClasses(
+          isAllowed && !isOtherMonth,
+          isFloating,
+          isSelected,
+          isCurrent,
+          isFirst,
+          isLast,
+        )],
+        type: 'button',
+        disabled: this.disabled || !isAllowed || isOtherMonth,
+        ...this.genButtonEvents(value, isAllowed, mouseEventType),
+      }), [
+        h('div', {
+          class: 'v-btn__content',
+        }, [formatter(value)]),
+        this.genEvents(value),
+      ])
+    },
+    getEventColors (date: string) {
+      const arrayize = (v: string | string[]) => Array.isArray(v) ? v : [v]
+      let eventData: boolean | DatePickerEventColorValue
+      let eventColors: string[] = []
+
+      if (Array.isArray(this.events)) {
+        eventData = this.events.includes(date)
+      } else if (this.events instanceof Function) {
+        eventData = this.events(date) || false
+      } else if (this.events) {
+        eventData = this.events[date] || false
+      } else {
+        eventData = false
+      }
+
+      if (!eventData) {
+        return []
+      } else if (eventData !== true) {
+        eventColors = arrayize(eventData)
+      } else if (typeof this.eventColor === 'string') {
+        eventColors = [this.eventColor]
+      } else if (typeof this.eventColor === 'function') {
+        eventColors = arrayize(this.eventColor(date))
+      } else if (Array.isArray(this.eventColor)) {
+        eventColors = this.eventColor
+      } else {
+        eventColors = arrayize(this.eventColor[date])
+      }
+
+      return eventColors.filter(v => v)
+    },
+    genEvents (date: string) {
+      const eventColors = this.getEventColors(date)
+
+      return eventColors.length ? h('div', {
+        class: 'v-date-picker-table__events',
+      }, eventColors.map(color => h('div', this.setBackgroundColor(color)))) : null
+    },
+    isValidScroll (value: number, calculateTableDate: CalculateTableDateFunction) {
+      const tableDate = calculateTableDate(value)
+      // tableDate is 'YYYY-MM' for DateTable and 'YYYY' for MonthTable
+      const sanitizeType = tableDate.split('-').length === 1 ? 'year' : 'month'
+      return (value < 0 && (this.min ? tableDate >= sanitizeDateString(this.min, sanitizeType) : true)) ||
+        (value > 0 && (this.max ? tableDate <= sanitizeDateString(this.max, sanitizeType) : true))
+    },
+    wheel (e: WheelEvent, calculateTableDate: CalculateTableDateFunction) {
+      this.$emit('update:table-date', calculateTableDate(e.deltaY))
+    },
+    touch (value: number, calculateTableDate: CalculateTableDateFunction) {
+      this.$emit('update:table-date', calculateTableDate(value))
+    },
+    genTable (staticClass: string, children: VNodeChildren, calculateTableDate: CalculateTableDateFunction) {
+      const transition = h(Transition, {
+        name: this.computedTransition,
+      }, () => [h('table', { key: this.tableDate }, children)])
+
+      const touchDirective = [
+        Touch,
+        {
+          left: (e: TouchWrapper) => (e.offsetX < -15) &&
+            (this.isValidScroll(1, calculateTableDate) && this.touch(1, calculateTableDate)),
+          right: (e: TouchWrapper) => (e.offsetX > 15) &&
+            (this.isValidScroll(-1, calculateTableDate) && this.touch(-1, calculateTableDate)),
+        },
+      ]
+
+      return withDirectives(h('div', {
+        class: {
+          [staticClass]: true,
+          'v-date-picker-table--disabled': this.disabled,
+          ...this.themeClasses,
+        },
+        ...((!this.disabled && this.scrollable) ? {
+          onWheel: (e: WheelEvent) => {
+            e.preventDefault()
+            if (this.isValidScroll(e.deltaY, calculateTableDate)) { this.wheelThrottle(e, calculateTableDate) }
+          },
+        } : {}),
+      }, [transition]), [touchDirective])
+    },
+    isSelected (value: string): boolean {
+      if (Array.isArray(this.currentValue)) {
+        if (this.range && this.currentValue.length === 2) {
+          const [from, to] = [...this.currentValue].sort()
+          return from <= value && value <= to
+        } else {
+          return this.currentValue.indexOf(value) !== -1
+        }
+      }
+
+      return value === this.currentValue
+    },
+  },
+})

package/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts

@@ -0,0 +1,34 @@
+import createNativeLocaleFormatter from '../createNativeLocaleFormatter'
+
+describe('VDatePicker/util/createNativeLocaleFormatter.ts', () => {
+  it('should format dates', () => {
+    const formatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' })
+    expect(formatter('2013-2-07')).toBe('7')
+  })
+
+  it('should format date with year < 1000', () => {
+    const formatter = createNativeLocaleFormatter(undefined, { year: 'numeric', timeZone: 'UTC' })
+    expect(formatter('13-2-07')).toBe('13')
+  })
+
+  it('should format dates if Intl is not defined', () => {
+    const oldIntl = global.Intl
+
+    global.Intl = null
+    const formatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' }, { start: 0, length: 10 })
+    expect(formatter('2013-2-7')).toBe('2013-02-07')
+    expect(formatter('2013-2')).toBe('2013-02-01')
+    expect(formatter('2013')).toBe('2013-01-01')
+
+    const nullFormatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' })
+    expect(nullFormatter).toBeUndefined()
+    global.Intl = oldIntl
+  })
+
+  it('should handle invalid date strings', () => {
+    const formatter = createNativeLocaleFormatter(undefined, { year: 'numeric', timeZone: 'UTC' })
+    expect(formatter('undefined')).toBe('1970')
+    expect(formatter('null')).toBe('1970')
+    expect(formatter('')).toBe('1970')
+  })
+})

package/src/components/VDatePicker/util/__tests__/monthChange.spec.ts

@@ -0,0 +1,10 @@
+import monthChange from '../monthChange'
+
+describe('VDatePicker/util/monthChange.ts', () => {
+  it('should change month', () => {
+    expect(monthChange('2000-01', -1)).toBe('1999-12')
+    expect(monthChange('2000-01', +1)).toBe('2000-02')
+    expect(monthChange('2000-12', -1)).toBe('2000-11')
+    expect(monthChange('2000-12', +1)).toBe('2001-01')
+  })
+})

package/src/components/VDatePicker/util/__tests__/pad.spec.ts

@@ -0,0 +1,18 @@
+import pad from '../pad'
+
+describe('VDatePicker/util/pad.ts', () => {
+  it('should pad 1-digit numbers', () => {
+    expect(pad(0)).toBe('00')
+    expect(pad('3', 3)).toBe('003')
+  })
+
+  it('should pad 2-digit numbers', () => {
+    expect(pad(40)).toBe('40')
+    expect(pad('98')).toBe('98')
+  })
+
+  it('should not pad 3-digit numbers', () => {
+    expect(pad(400)).toBe('400')
+    expect(pad('998')).toBe('998')
+  })
+})

package/src/components/VDatePicker/util/__tests__/sanitizeDateString.spec.ts

@@ -0,0 +1,10 @@
+import sanitizeDateString from '../sanitizeDateString'
+
+describe('VDatePicker/util/sanitizeDateString.ts', () => {
+  it('should sanitize date string based upon type', () => {
+    expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'date')).toBe('2000-01-02')
+    expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'month')).toBe('2000-01')
+    expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'year')).toBe('2000')
+    expect(sanitizeDateString('2000-1-2', 'date')).toBe('2000-01-02')
+  })
+})

package/src/components/VDatePicker/util/createNativeLocaleFormatter.ts

@@ -0,0 +1,43 @@
+import pad from './pad'
+import { DatePickerFormatter } from 'vuetify/types'
+
+interface SubstrOptions {
+  start?: number
+  length: number
+}
+
+function createNativeLocaleFormatter (
+  local: string | undefined,
+  options: Intl.DateTimeFormatOptions
+): DatePickerFormatter | undefined
+
+function createNativeLocaleFormatter (
+  local: string | undefined,
+  options: Intl.DateTimeFormatOptions,
+  substrOptions: SubstrOptions
+): DatePickerFormatter
+
+function createNativeLocaleFormatter (
+  locale: string | undefined,
+  options: Intl.DateTimeFormatOptions,
+  substrOptions: SubstrOptions = { start: 0, length: 0 }
+): DatePickerFormatter | undefined {
+  const makeIsoString = (dateString: string) => {
+    if (!dateString || dateString === 'undefined' || dateString === 'null') {
+      return '1970-01-01' // fallback date
+    }
+    const [year, month, date] = dateString.trim().split(' ')[0].split('-')
+    return [pad(year, 4), pad(month || 1), pad(date || 1)].join('-')
+  }
+
+  try {
+    const intlFormatter = new Intl.DateTimeFormat(locale || undefined, options)
+    return (dateString: string) => intlFormatter.format(new Date(`${makeIsoString(dateString)}T00:00:00+00:00`))
+  } catch (e) {
+    return (substrOptions.start || substrOptions.length)
+      ? (dateString: string) => makeIsoString(dateString).substr(substrOptions.start || 0, substrOptions.length)
+      : undefined
+  }
+}
+
+export default createNativeLocaleFormatter

package/src/components/VDatePicker/util/eventHelpers.ts

@@ -0,0 +1,41 @@
+// Utils for creating event listeners that work with Vue 3 emits/attrs pattern
+
+export function createItemTypeListeners (instance: any, itemTypeSuffix: string) {
+  const listeners: Record<string, Function> = {}
+
+  const eventAttrs = [
+    `onClick${itemTypeSuffix}`,
+    `onDblclick${itemTypeSuffix}`,
+  ]
+
+  eventAttrs.forEach(attrName => {
+    const handler = instance.$attrs[attrName]
+    if (handler && typeof handler === 'function') {
+      listeners[attrName] = handler
+    }
+  })
+
+  return listeners
+}
+
+export function createItemTypeNativeListeners (instance: any, mouseEventType: string, value: any) {
+  const listeners: Record<string, Function> = {}
+
+  const eventAttrs = [
+    `onClick${mouseEventType.charAt(0).toUpperCase() + mouseEventType.slice(1)}`,
+    `onDblclick${mouseEventType.charAt(0).toUpperCase() + mouseEventType.slice(1)}`,
+  ]
+
+  eventAttrs.forEach(attrName => {
+    const handler = instance.$attrs[attrName]
+    if (handler && typeof handler === 'function') {
+      // Преобразуем onClickDate -> click и onDblclickDate -> dblclick для DOM событий
+      const eventName = attrName.slice(2, attrName.length - mouseEventType.length).toLowerCase()
+      listeners[eventName] = (event: Event) => {
+        handler(value, event)
+      }
+    }
+  })
+
+  return listeners
+}

package/src/components/VDatePicker/util/index.ts

@@ -0,0 +1,17 @@
+import {
+  createItemTypeListeners,
+  createItemTypeNativeListeners,
+} from './eventHelpers'
+import createNativeLocaleFormatter from './createNativeLocaleFormatter'
+import monthChange from './monthChange'
+import sanitizeDateString from './sanitizeDateString'
+import pad from './pad'
+
+export {
+  createItemTypeListeners,
+  createItemTypeNativeListeners,
+  createNativeLocaleFormatter,
+  monthChange,
+  sanitizeDateString,
+  pad,
+}

package/src/components/VDatePicker/util/isDateAllowed.ts

@@ -0,0 +1,7 @@
+import { DatePickerAllowedDatesFunction } from 'vuetify/types'
+
+export default function isDateAllowed (date: string, min: string, max: string, allowedFn: DatePickerAllowedDatesFunction | undefined) {
+  return (!allowedFn || allowedFn(date)) &&
+    (!min || date >= min.substr(0, 10)) &&
+    (!max || date <= max)
+}

package/src/components/VDatePicker/util/monthChange.ts

@@ -0,0 +1,17 @@
+import pad from './pad'
+
+/**
+ * @param {String} value YYYY-MM format
+ * @param {Number} sign -1 or +1
+ */
+export default (value: string, sign: number) => {
+  const [year, month] = value.split('-').map(Number)
+
+  if (month + sign === 0) {
+    return `${year - 1}-12`
+  } else if (month + sign === 13) {
+    return `${year + 1}-01`
+  } else {
+    return `${year}-${pad(month + sign)}`
+  }
+}

package/src/components/VDatePicker/util/pad.ts

@@ -0,0 +1,16 @@
+const padStart = (string: number | string, targetLength: number, padString: string) => {
+  targetLength = targetLength >> 0
+  string = String(string)
+  padString = String(padString)
+  if (string.length > targetLength) {
+    return String(string)
+  }
+
+  targetLength = targetLength - string.length
+  if (targetLength > padString.length) {
+    padString += padString.repeat(targetLength / padString.length)
+  }
+  return padString.slice(0, targetLength) + String(string)
+}
+
+export default (n: string | number, length = 2) => padStart(n, length, '0')

package/src/components/VDatePicker/util/sanitizeDateString.ts

@@ -0,0 +1,8 @@
+// Adds leading zero to month/day if necessary, returns 'YYYY' if type = 'year',
+// 'YYYY-MM' if 'month' and 'YYYY-MM-DD' if 'date'
+import pad from './pad'
+
+export default (dateString: string, type: 'date' | 'month' | 'year'): string => {
+  const [year, month = 1, date = 1] = dateString.split('-')
+  return `${year}-${pad(month)}-${pad(date)}`.substr(0, { date: 10, month: 7, year: 4 }[type])
+}

package/src/components/VDialog/VDialog.sass

@@ -0,0 +1,106 @@
+@import './_variables.scss'
+
+// Block
+.v-dialog
+  border-radius: $dialog-border-radius
+  margin: $dialog-margin
+  overflow-y: auto
+  pointer-events: auto
+  transition: .3s map-get($transition, 'fast-in-fast-out')
+  width: 100%
+  z-index: inherit
+  outline: none
+  +elevation($dialog-elevation)
+
+  &:not(.v-dialog--fullscreen)
+    max-height: $dialog-max-height
+
+  > *
+    width: 100%
+
+  > .v-card
+    > .v-card__title
+      font-size: $dialog-card-title-font-size
+      font-weight: $dialog-card-title-font-weight
+      letter-spacing: $dialog-card-title-letter-spacing
+      padding: $dialog-card-title-padding
+
+    > .v-card__text
+      padding: $dialog-card-text-padding
+
+    > .v-card__subtitle
+      padding: $dialog-card-subtitle-padding
+
+    > .v-card__actions
+      padding: $dialog-card-actions-padding
+
+// Element
+.v-dialog__content
+  align-items: center
+  display: flex
+  height: 100%
+  justify-content: center
+  left: 0
+  pointer-events: none
+  position: fixed
+  top: 0
+  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
+  width: 100%
+  z-index: 6
+
+.v-dialog__container
+  display: none
+
+  &--attached
+    display: inline
+
+// Modifier
+.v-dialog--animated
+  animation-duration: .15s
+  animation-name: animate-dialog
+  animation-timing-function: map-get($transition, 'fast-in-fast-out')
+
+.v-dialog--fullscreen
+  border-radius: 0
+  margin: 0
+  height: 100%
+  position: fixed
+  overflow-y: auto
+  top: 0
+  left: 0
+
+  > .v-card
+    min-height: 100%
+    min-width: 100%
+    margin: 0 !important
+    padding: 0 !important
+
+.v-dialog--scrollable,
+.v-dialog--scrollable > form
+  display: flex
+
+  > .v-card
+    display: flex
+    flex: 1 1 100%
+    flex-direction: column
+    max-height: 100%
+    max-width: 100%
+
+    > .v-card__title,
+    > .v-card__actions
+      flex: 0 0 auto
+
+    > .v-card__text
+      backface-visibility: hidden
+      flex: 1 1 auto
+      overflow-y: auto
+
+@keyframes animate-dialog
+  0%
+    transform: scale(1)
+
+  50%
+    transform: scale(1.03)
+
+  100%
+    transform: scale(1)