@kokoccc/vuetify 1.0.1

package/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts

@@ -0,0 +1,318 @@
+// Components
+import VAutocomplete from '../VAutocomplete'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+
+describe('VAutocomplete.ts', () => {
+  type Instance = InstanceType<typeof VAutocomplete>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+
+    mountFunction = (options = {}) => {
+      return mount(VAutocomplete, {
+        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              theme: {
+                dark: false
+              },
+              icons: {
+                component: null
+              }
+            }
+          }
+        }
+      });
+    }
+  })
+
+  it('should have the correct role', async () => {
+    const wrapper = mountFunction()
+
+    const inputSlot = wrapper.find('.v-input__slot')
+
+    expect(inputSlot.element.getAttribute('role')).toBe('combobox')
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/7259
+  it('should update search when same item is selected', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: {
+        items: ['foo'],
+        modelValue: 'foo',
+      },
+    })
+
+    await nextTick()
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    expect(element.value).toBe('foo')
+
+    input.trigger('focus')
+    input.trigger('click')
+    element.value = 'fo'
+    input.trigger('input')
+
+    await nextTick()
+
+    const item = wrapper.find('.v-list-item')
+    if (item.exists()) {
+      item.trigger('click')
+      await nextTick()
+    }
+
+    // Force update the input value after selection
+    wrapper.vm.setSearch()
+    await nextTick()
+
+    expect(element.value).toBe('foo')
+  })
+
+  it('should copy selected item if multiple', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['aaa', 'bbb', 'ccc'],
+        modelValue: ['aaa', 'bbb'],
+        chips: true,
+        multiple: true,
+      },
+    })
+
+    const input = wrapper.find('input')
+    const chip = wrapper.findAll('.v-chip').at(1)
+    const setData = jest.fn()
+    const event = {
+      clipboardData: {
+        setData,
+      },
+      preventDefault: jest.fn(),
+    }
+
+    input.trigger('focus')
+    chip.trigger('click')
+    wrapper.vm.onCopy(event)
+
+    expect(setData).toHaveBeenCalledWith('text/plain', 'bbb')
+    expect(setData).toHaveBeenCalledWith('text/vnd.vuetify.autocomplete.item+plain', 'bbb')
+    expect(event.preventDefault).toHaveBeenCalled()
+  })
+
+  it('should not copy anything if there is no selected item', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['aaa', 'bbb', 'ccc'],
+        modelValue: ['aaa', 'bbb'],
+        chips: true,
+        multiple: true,
+      },
+    })
+
+    const input = wrapper.find('input')
+    const setData = jest.fn()
+    const event = {
+      clipboardData: {
+        setData,
+      },
+      preventDefault: jest.fn(),
+    }
+
+    input.trigger('focus')
+    wrapper.vm.onCopy(event)
+
+    expect(setData).not.toHaveBeenCalled()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9654
+  // https://github.com/vuetifyjs/vuetify/issues/11639
+  it('should delete value when pressing backspace', async () => {
+    const wrapper = mountFunction({
+      props: {
+        chips: true,
+        items: ['foo', 'bar', 'fizz', 'buzz'],
+        modelValue: 'foo',
+      },
+    })
+
+    const input = wrapper.find('input')
+
+    input.trigger('focus')
+    input.trigger('keydown.backspace')
+    input.trigger('keydown.backspace')
+
+    expect(wrapper.vm.internalValue).toBeNull()
+
+    wrapper.setProps({
+      multiple: true,
+      modelValue: ['foo', 'bar'],
+    })
+
+    await nextTick()
+
+    input.trigger('keydown.backspace')
+    input.trigger('keydown.backspace')
+
+    expect(wrapper.vm.internalValue).toEqual(['foo'])
+  })
+
+  it('should not change selectedIndex to 0 when backspace is pressed', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['f', 'b'],
+        modelValue: 'f',
+      },
+    })
+
+    const input = wrapper.find('input')
+
+    input.trigger('focus')
+    input.trigger('keydown.backspace')
+
+    expect(wrapper.vm.selectedIndex).toBe(-1)
+  })
+
+  it('should close menu when append icon is clicked', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['foo', 'bar'],
+      },
+    })
+
+    const append = wrapper.find('.v-input__append-inner')
+    const slot = wrapper.find('.v-input__slot')
+    slot.trigger('click')
+    expect(wrapper.vm.isMenuActive).toBe(true)
+    append.trigger('mousedown')
+    append.trigger('mouseup')
+    append.trigger('click')
+    await nextTick()
+    expect(wrapper.vm.isMenuActive).toBe(false)
+  })
+
+  it('should open menu when append icon is clicked', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['foo', 'bar'],
+      },
+    })
+
+    const append = wrapper.find('.v-input__append-inner')
+
+    append.trigger('mousedown')
+    append.trigger('mouseup')
+    append.trigger('click')
+    await nextTick()
+    expect(wrapper.vm.isMenuActive).toBe(true)
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9489
+  it('should emit search-input update only once', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['foo', 'bar'],
+        modelValue: 'foo',
+      },
+    })
+
+    expect(wrapper.emitted('update:search-input')).toBeFalsy()
+
+    wrapper.setProps({ searchInput: 'bar' })
+
+    await nextTick()
+
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
+
+    wrapper.setProps({ searchInput: 'foo' })
+
+    await nextTick()
+
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
+
+    wrapper.setProps({ searchInput: 'foo' })
+
+    await nextTick()
+
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
+  })
+
+  it('should reset selected item when text-field is cleared if not multiple', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['foo', 'bar'],
+        modelValue: 'foo',
+      },
+    })
+
+    const input = wrapper.find('input')
+
+    input.element.value = ''
+    input.trigger('input')
+
+    expect(wrapper.vm.internalValue).toBeNull()
+  })
+
+  it('should update visual chips when model changes (props, mutation, replacement)', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { name: 'Sandra Adams', group: 'Group 1', avatar: 'avatar1.jpg' },
+          { name: 'Ali Connors', group: 'Group 1', avatar: 'avatar2.jpg' },
+          { name: 'Trevor Hansen', group: 'Group 1', avatar: 'avatar3.jpg' },
+        ],
+        modelValue: ['Sandra Adams', 'Ali Connors'],
+        multiple: true,
+        chips: true,
+        itemText: 'name',
+        itemValue: 'name',
+      },
+    })
+
+    await nextTick()
+
+    let chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(2)
+    expect(wrapper.vm.internalValue).toEqual(['Sandra Adams', 'Ali Connors'])
+
+    wrapper.setProps({ modelValue: ['Ali Connors'] })
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+
+    wrapper.setProps({ modelValue: ['Sandra Adams', 'Ali Connors'] })
+    await nextTick()
+    const friends = wrapper.vm.internalValue as string[]
+    const index = friends.indexOf('Sandra Adams')
+    if (index >= 0) friends.splice(index, 1)
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+
+    wrapper.setProps({ modelValue: ['Sandra Adams', 'Ali Connors'] })
+    await nextTick()
+    const newFriends = ['Ali Connors']
+    wrapper.vm.setValue(newFriends)
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+  })
+})

package/src/components/VAutocomplete/_variables.scss

@@ -0,0 +1,5 @@
+@import '../../styles/styles.sass';
+
+$autocomplete-enclosed-input-margin-top: 24px !default;
+$autocomplete-dense-enclosed-input-margin-top: 20px !default;
+$autocomplete-focused-input: 64px !default;

package/src/components/VAutocomplete/index.ts

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

package/src/components/VAvatar/VAvatar.sass

@@ -0,0 +1,22 @@
+@import './_variables.scss'
+
+.v-avatar
+  align-items: center
+  border-radius: $avatar-border-radius
+  display: inline-flex
+  justify-content: center
+  line-height: normal
+  position: relative
+  text-align: center
+  vertical-align: middle
+  overflow: hidden
+
+  img,
+  svg,
+  .v-icon,
+  .v-image,
+  .v-responsive__content
+    border-radius: inherit
+    display: inline-flex
+    height: inherit
+    width: inherit

package/src/components/VAvatar/VAvatar.ts

@@ -0,0 +1,60 @@
+import {h} from 'vue'
+import './VAvatar.sass'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Measurable from '../../mixins/measurable'
+import Roundable from '../../mixins/roundable'
+
+// Utilities
+import { convertToUnit, getSlot } from '../../util/helpers'
+
+// Types
+import { VNode } from 'vue'
+import mixins from '../../util/mixins'
+
+export default mixins(
+  Colorable,
+  Measurable,
+  Roundable,
+  /* @vue/component */
+).extend({
+  name: 'v-avatar',
+
+  props: {
+    left: Boolean,
+    right: Boolean,
+    size: {
+      type: [Number, String],
+      default: 48,
+    },
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        'v-avatar--left': this.left,
+        'v-avatar--right': this.right,
+        ...this.roundedClasses,
+      }
+    },
+    styles (): object {
+      return {
+        height: convertToUnit(this.size),
+        minWidth: convertToUnit(this.size),
+        width: convertToUnit(this.size),
+        ...this.measurableStyles,
+      }
+    },
+  },
+
+  render (): VNode {
+    const data = {
+      class: ['v-avatar', this.classes],
+      style: this.styles,
+      ...this.$listeners,
+    }
+
+    return h('div', this.setBackgroundColor(this.color, data), getSlot(this))
+  },
+})

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

@@ -0,0 +1,97 @@
+// Libraries
+import { h } from 'vue'
+
+// Components
+import VAvatar from '../VAvatar'
+
+// Utilities
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VAvatar', () => {
+  type Instance = InstanceType<typeof VAvatar>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            // Мокаем только необходимые свойства Vuetify
+            $vuetify: {
+              lang: {
+                t: (val: string) => val,
+              },
+              icons: {
+                component: 'mdi',
+              },
+            },
+          },
+        },
+      }
+
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
+        ...options,
+        global: {
+          ...defaultOptions.global,
+          ...options?.global,
+        },
+      }
+
+      return mount(VAvatar, mergedOptions)
+    }
+  })
+
+  it('should have an v-avatar class', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.classes()).toContain('v-avatar')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with custom size', () => {
+    const wrapper = mountFunction({
+      props: {
+        size: 64,
+      },
+    })
+
+    expect(wrapper.attributes('style')).toContain('width: 64px')
+    expect(wrapper.attributes('style')).toContain('height: 64px')
+  })
+
+  it('should render with left class when left prop is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('v-avatar--left')
+  })
+
+  it('should render with right class when right prop is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        right: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('v-avatar--right')
+  })
+
+  it('should render slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [h('span', 'Avatar Content')],
+      },
+    })
+
+    expect(wrapper.text()).toContain('Avatar Content')
+  })
+})

package/src/components/VAvatar/__tests__/__snapshots__/VAvatar.spec.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VAvatar should have an v-avatar class 1`] = `
+<div class="v-avatar"
+     style="height: 48px; min-width: 48px; width: 48px;"
+>
+</div>
+`;

package/src/components/VAvatar/_variables.scss

@@ -0,0 +1,3 @@
+@import '../../styles/styles.sass';
+
+$avatar-border-radius: 50% !default;

package/src/components/VAvatar/index.ts

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

package/src/components/VBadge/VBadge.sass

@@ -0,0 +1,108 @@
+// Imports
+@import './_variables.scss'
+
++theme(v-badge) using ($material)
+  .v-badge__badge::after
+    border-color: map-get($material, 'cards')
+
+.v-badge
+  display: inline-block
+  line-height: $badge-line-height
+  position: relative
+
+  &__badge
+    border-radius: $badge-border-radius
+    color: $badge-color
+    display: inline-block
+    font-size: $badge-font-size
+    height: $badge-height
+    letter-spacing: $badge-letter-spacing
+    line-height: 1
+    min-width: $badge-min-width
+    padding: $badge-padding
+    pointer-events: auto
+    position: absolute
+    text-align: center
+    text-indent: 0
+    top: $badge-top
+    transition: $primary-transition
+    white-space: nowrap
+
+    +ltr()
+      right: $badge-right
+
+    +rtl()
+      left: $badge-right
+
+    .v-icon
+      color: inherit
+      font-size: $badge-font-size
+      height: $badge-font-size
+      margin: $badge-icon-margin
+      width: $badge-font-size
+
+    .v-img
+      height: $badge-font-size
+      width: $badge-font-size
+
+  &__wrapper
+    flex: 0 1
+    height: 100%
+    left: 0
+    pointer-events: none
+    position: absolute
+    top: 0
+    width: 100%
+
+  &--avatar
+    .v-badge__badge
+      padding: 0
+
+      .v-avatar
+        height: $badge-height !important
+        min-width: 0 !important
+        max-width: $badge-min-width !important
+
+  &--bordered
+    .v-badge__badge::after
+      border-radius: inherit
+      border-width: $badge-bordered-width
+      border-style: solid
+      bottom: 0
+      content: ''
+      left: 0
+      position: absolute
+      right: 0
+      top: 0
+      transform: scale(1.15)
+
+  &--dot
+    .v-badge__badge
+      border-radius: $badge-dot-border-radius
+      height: $badge-dot-height
+      min-width: 0
+      padding: 0
+      width: $badge-dot-width
+
+      &::after
+        border-width: $badge-dot-border-width
+
+  &--icon
+    .v-badge__badge
+      padding: $badge-icon-padding
+
+  &--inline
+    align-items: center
+    display: inline-flex
+    justify-content: center
+
+    .v-badge__badge,
+    .v-badge__wrapper
+      position: relative
+
+    .v-badge__wrapper
+      margin: $badge-wrapper-margin
+
+  &--tile
+    .v-badge__badge
+      border-radius: 0