@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,74 @@
+
+// Components
+import Grid from '../grid'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+} from '@vue/test-utils'
+
+const Mock = Grid('test')
+
+describe('VGrid.ts', () => {
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(Mock, {
+        ...options,
+      })
+    }
+  })
+
+  it('should conditionally apply if boolean is used', () => {
+    const wrapper = mountFunction({
+      attrs: {
+        foo: '',
+        bar: false,
+      },
+    })
+
+    // В Vue 3 атрибуты передаются как DOM атрибуты
+    expect(wrapper.attributes('foo')).toBe('')
+    expect(wrapper.attributes('bar')).toBe('false')
+    // Но они не добавляются как классы в текущей реализации
+    expect(wrapper.classes('foo')).toBe(false)
+    expect(wrapper.classes('bar')).toBe(false)
+  })
+
+  it('should pass the id attr', () => {
+    const wrapper = mountFunction({
+      props: {
+        id: 'test',
+      },
+    })
+
+    expect(wrapper.attributes('id')).toBe('test')
+  })
+
+  it('should not pass data-* attrs as classes', () => {
+    const wrapper = mountFunction({
+      attrs: {
+        foo: 'bar',
+        'data-test': 'foo',
+      },
+    })
+
+    // В текущей реализации атрибуты не фильтруются в классы
+    expect(wrapper.classes('foo')).toBe(false)
+    expect(wrapper.classes('data-test')).toBe(false)
+    expect(wrapper.attributes('data-test')).toBe('foo')
+  })
+
+  // TODO: Remove once resolved
+  // https://github.com/vuejs/vue/issues/7841
+  it('should filter the slot attr', () => {
+    const wrapper = mountFunction({
+      attrs: { slot: 'content' },
+    })
+
+    expect(wrapper.element.classList.contains('slot')).toBe(false)
+  })
+})

package/src/components/VGrid/__tests__/VLayout.spec.ts

@@ -0,0 +1,28 @@
+// Components
+import VLayout from '../VLayout'
+
+// Utilities
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VLayout.ts', () => {
+  type Instance = InstanceType<typeof VLayout>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VLayout, {
+        ...options,
+      })
+    }
+  })
+
+  it('should work', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

package/src/components/VGrid/__tests__/__snapshots__/VContainer.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VContainer.ts should work 1`] = `
+<div class="container">
+</div>
+`;

package/src/components/VGrid/__tests__/__snapshots__/VFlex.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VFlex.ts should work 1`] = `
+<div class="flex">
+</div>
+`;

package/src/components/VGrid/__tests__/__snapshots__/VLayout.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VLayout.ts should work 1`] = `
+<div class="layout">
+</div>
+`;

package/src/components/VGrid/_grid.sass

@@ -0,0 +1,117 @@
+@import '../../styles/styles.sass'
+
+.container
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+  &.fill-height
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+
+    > .row
+      flex: 1 1 100%
+      max-width: calc(100% + #{$grid-gutter})
+
+    > .layout
+      height: 100%
+      flex: 1 1 auto
+
+      &.grow-shrink-0
+        flex-grow: 0
+        flex-shrink: 0
+
+  &.grid-list
+    @each $size, $gutter in $grid-gutters
+      &-#{$size}
+        .layout
+          .flex
+            padding: $gutter / 2
+
+        .layout:only-child
+          margin: -$gutter / 2
+
+        .layout:not(:only-child)
+          margin: auto (-$gutter / 2)
+
+        *:not(:only-child)
+          .layout:first-child
+            margin-top: -$gutter / 2
+
+          .layout:last-child
+            margin-bottom: -$gutter / 2
+
+.layout
+  display: flex
+  flex: 1 1 auto
+  flex-wrap: nowrap
+  // https://github.com/vuetifyjs/vuetify/issues/3873
+  min-width: 0
+
+  &.reverse
+    flex-direction: row-reverse
+
+  &.column
+    flex-direction: column
+
+    &.reverse
+      flex-direction: column-reverse
+
+    > .flex
+      max-width: 100%
+
+  &.wrap
+    flex-wrap: wrap
+
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+@each $size, $width in $grid-breakpoints
+  @media all and (min-width: #{$width})
+    $n: $grid-columns
+    @while $n > 0
+      .flex.#{$size}#{$n}
+        flex-basis: $n / $grid-columns * 100%
+        flex-grow: 0
+        max-width: $n / $grid-columns * 100%
+
+      .flex.order-#{$size}#{$n}
+        order: $n
+
+      $n: $n - 1
+
+    $m: $grid-columns
+    @while $m >= 0
+      .flex.offset-#{$size}#{$m}
+        // Offsets can only ever work in row layouts
+        +ltr()
+          margin-left: $m / $grid-columns * 100%
+        +rtl()
+          margin-right: $m / $grid-columns * 100%
+
+      $m: $m - 1
+
+.flex,
+.child-flex > *
+  flex: 1 1 auto
+  max-width: 100%
+
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+.spacer
+  flex-grow: 1 !important
+
+.grow
+  flex-grow: 1 !important
+  flex-shrink: 0 !important
+
+.shrink
+  flex-grow: 0 !important
+  flex-shrink: 1 !important
+
+.fill-height
+  height: 100%

package/src/components/VGrid/_mixins.sass

@@ -0,0 +1,72 @@
+=make-container($padding-x: $container-padding-x)
+  width: 100%
+  padding: $padding-x
+  margin-right: auto
+  margin-left: auto
+
+// For each breakpoint, define the maximum width of the container in a media query
+=make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+  @each $breakpoint, $container-max-width in $max-widths
+    +media-breakpoint-up($breakpoint, $breakpoints)
+      max-width: $container-max-width
+
+=make-row($gutter: $grid-gutter)
+  display: flex
+  flex-wrap: wrap
+  flex: 1 1 auto
+  margin: -$gutter / 2
+
+=make-col-ready($gutter: $grid-gutter)
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%
+  padding: $gutter / 2
+
+=make-col($size, $columns: $grid-columns)
+  flex: 0 0 percentage($size / $columns)
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns)
+
+=make-col-offset($size, $columns: $grid-columns)
+  $num: $size / $columns
+  +ltr()
+    margin-left: if($num == 0, 0, percentage($num))
+  +rtl()
+    margin-right: if($num == 0, 0, percentage($num))
+
+=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $grid-breakpoints)
+  // Common properties for all breakpoints
+  %grid-column
+    width: 100%
+    padding: $gutter / 2
+  @each $breakpoint in map-keys($breakpoints)
+    $infix: breakpoint-infix($breakpoint, $breakpoints)
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns
+      .col#{$infix}-#{$i}
+        @extend %grid-column
+    .col#{$infix},
+    .col#{$infix}-auto
+      @extend %grid-column
+    +media-breakpoint-up($breakpoint, $breakpoints)
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix}
+        flex-basis: 0
+        flex-grow: 1
+        max-width: 100%
+      .col#{$infix}-auto
+        flex: 0 0 auto
+        width: auto
+        max-width: 100% // Reset earlier grid tiers
+      @for $i from 1 through $columns
+        .col#{$infix}-#{$i}
+          +make-col($i, $columns)
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through $columns - 1
+        @if not ($infix == "" and $i == 0)
+          // Avoid emitting useless .offset-0
+          .offset#{$infix}-#{$i}
+            +make-col-offset($i, $columns)

package/src/components/VGrid/grid.ts

@@ -0,0 +1,55 @@
+// Types
+import { defineComponent, VNode, h } from 'vue'
+
+export default function VGrid (name: string) {
+  /* @vue/component */
+  return defineComponent({
+    name: `v-${name}`,
+
+    props: {
+      id: String,
+      tag: {
+        type: String,
+        default: 'div',
+      },
+    },
+
+    render() {
+      const data: any = { ...this.$attrs }
+      const children = this.$slots?.default?.() || []
+      const componentProps = this.$props
+
+      data.class = [name, data.class].filter(Boolean)
+
+      const { attrs: dataAttrs } = data
+      if (dataAttrs) {
+        // reset attrs to extract utility clases like pa-3
+        data.attrs = {}
+        const classes = Object.keys(dataAttrs).filter(key => {
+          // TODO: Remove once resolved
+          // https://github.com/vuejs/vue/issues/7841
+          if (key === 'slot') return false
+
+          const value = dataAttrs[key]
+
+          // add back data attributes like data-test="foo" but do not
+          // add them as classes
+          if (key.startsWith('data-')) {
+            data.attrs![key] = value
+            return false
+          }
+
+          return value || typeof value === 'string'
+        })
+
+        if (classes.length) data.class = [...data.class, ...classes]
+      }
+
+      if (componentProps?.id) {
+        data.id = componentProps.id
+      }
+
+      return h(componentProps?.tag || 'div', data, children)
+    }
+  })
+}

package/src/components/VGrid/index.ts

@@ -0,0 +1,26 @@
+import VContainer from './VContainer'
+import VCol from './VCol'
+import VRow from './VRow'
+import VSpacer from './VSpacer'
+import VLayout from './VLayout'
+import VFlex from './VFlex'
+
+export {
+  VContainer,
+  VCol,
+  VRow,
+  VSpacer,
+  VLayout,
+  VFlex,
+}
+
+export default {
+  $_vuetify_subcomponents: {
+    VContainer,
+    VCol,
+    VRow,
+    VSpacer,
+    VLayout,
+    VFlex,
+  },
+}

package/src/components/VHover/VHover.ts

@@ -0,0 +1,79 @@
+// Mixins
+import Delayable from '../../mixins/delayable'
+import Toggleable from '../../mixins/toggleable'
+
+// Utilities
+import mixins from '../../util/mixins'
+import { consoleWarn } from '../../util/console'
+
+// Types
+import { VNode, mergeProps } from 'vue'
+import { ScopedSlotChildren } from 'vue/types/vnode'
+
+export default mixins(
+  Delayable,
+  Toggleable
+  /* @vue/component */
+).extend({
+  name: 'v-hover',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  methods: {
+    onMouseEnter () {
+      if (this.disabled) return
+      this.runDelay('open')
+    },
+    onMouseLeave () {
+      if (this.disabled) return
+      this.runDelay('close')
+    },
+  },
+
+  render (): VNode {
+    if (!this.$slots.default && this.modelValue === undefined) {
+      consoleWarn('v-hover is missing a default scopedSlot or bound value', this)
+      return null as any
+    }
+
+    if (!this.$slots.default) return null as any
+
+    const slotContent = this.$slots.default({ hover: this.isActive })
+
+    if (!slotContent?.length) {
+      consoleWarn('v-hover slot returned empty content', this)
+      return null as any
+    }
+
+    const element = slotContent[0]
+
+    if (!element?.type) {
+      consoleWarn('v-hover should only contain valid VNode elements', this)
+      return element as any
+    }
+
+    if (slotContent.length > 1) {
+      consoleWarn('v-hover should only contain a single element', this)
+    }
+
+    if (!this.disabled) {
+      element.props = mergeProps(element.props || {}, {
+        onMouseenter: this.onMouseEnter,
+        onMouseleave: this.onMouseLeave,
+      })
+    }
+
+    return element
+  },
+})

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

@@ -0,0 +1,119 @@
+// Components
+import VHover from '../VHover'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h } from 'vue'
+import { wait } from '../../../../test'
+import { config } from '@vue/test-utils'
+
+const item = (props: any) => h('div', {
+  class: ['foobar', { fizzbuzz: props.hover }],
+})
+
+describe('VHover.ts', () => {
+  let mountFunction: (options?: object) => VueWrapper<InstanceType<typeof VHover>>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VHover, {
+        ...options,
+        global: {
+          mocks: {
+            ...config.global.mocks,
+            $_alreadyWarned: [],
+            parent: null,
+            constructor: {},
+            appContext: {},
+            props: {},
+            setupState: {},
+          },
+          ...options.global,
+        },
+      })
+    }
+  })
+
+  it('should change class when hovered', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: item,
+      },
+    })
+
+    const div = wrapper.find('.foobar')
+
+    // Call methods directly since trigger doesn't work with our custom event handlers
+    wrapper.vm.onMouseEnter()
+    await wait(100)
+
+    expect(div.classes('fizzbuzz')).toBe(true)
+
+    wrapper.vm.onMouseLeave()
+
+    // Wait for runDelay
+    await wait(200)
+
+    expect(div.classes('fizzbuzz')).toBe(false)
+  })
+
+  it('should not react to changes when disabled', async () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+        modelValue: true,
+      },
+      slots: {
+        default: item,
+      },
+    })
+
+    const div = wrapper.find('.foobar')
+
+    // When disabled, the component should start with modelValue state
+    // But we need to wait for the component to render with the correct state
+    await wait(100)
+    expect(div.classes('fizzbuzz')).toBe(true)
+
+    // Call methods directly - they should not change state when disabled
+    wrapper.vm.onMouseEnter()
+    await wait(100)
+
+    expect(div.classes('fizzbuzz')).toBe(true)
+
+    wrapper.vm.onMouseLeave()
+
+    // Wait for runDelay
+    await wait(200)
+
+    expect(div.classes('fizzbuzz')).toBe(true)
+  })
+
+  it('should warn when missing scoped slot and bound value', () => {
+    mountFunction()
+
+    expect('v-hover is missing a default scopedSlot or bound value').toHaveBeenTipped()
+  })
+
+  it('should warn when using multiple root elements', () => {
+    mountFunction({
+      props: {
+        modelValue: false,
+      },
+      slots: {
+        default: () => [
+          h('div'),
+          h('div'),
+        ],
+      },
+    })
+
+    expect('v-hover should only contain a single element').toHaveBeenTipped()
+  })
+})

package/src/components/VHover/index.ts

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

package/src/components/VIcon/VIcon.sass

@@ -0,0 +1,73 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-icon) using ($material)
+  color: map-deep-get($material, 'icons', 'active')
+
+  &:focus::after
+    opacity: map-deep-get($material, 'states', 'focus')
+
+  &.v-icon.v-icon--disabled
+    color: map-deep-get($material, 'icons', 'inactive') !important
+
+// Increased specificity to overwrite
+// iconfont css interference
+.v-icon.v-icon
+  align-items: center
+  display: inline-flex
+  font-feature-settings: 'liga'
+  font-size: $icon-size
+  justify-content: center
+  letter-spacing: normal
+  line-height: 1
+  position: relative
+  text-indent: 0
+  transition: $primary-transition, visibility 0s
+  vertical-align: middle
+  user-select: none
+
+  &::after
+    background-color: currentColor
+    border-radius: 50%
+    content: ''
+    display: inline-block
+    height: 100%
+    left: 0
+    opacity: 0
+    pointer-events: none
+    position: absolute
+    top: 0
+    transform: scale(1.3)
+    width: 100%
+    transition: opacity 0.2s map-get($transition, 'ease-in-out')
+
+  &--dense
+    font-size: $icon-size-dense
+
+.v-icon
+  &--right
+    margin-left: map-get($grid-gutters, 'md')
+  &--left
+    margin-right: map-get($grid-gutters, 'md')
+
+  &.v-icon.v-icon--link
+    cursor: pointer
+    outline: none
+
+  &--disabled
+    pointer-events: none
+
+  &--dense
+    .v-icon__component,
+    .v-icon__svg
+      height: $icon-size-dense
+
+  &__component
+    height: $icon-size
+    width: $icon-size
+
+  &__svg
+    height: $icon-size
+    width: $icon-size
+    fill: currentColor