@dimailn/vuetify 2.7.2-alpha0

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

@@ -0,0 +1,424 @@
+// Components
+import VMenu from '../VMenu'
+import VCard from '../../VCard/VCard'
+import VListItem from '../../VList/VListItem'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+import { keyCodes } from '../../../util/helpers'
+import { waitAnimationFrame } from '../../../../test'
+
+describe('VMenu.ts', () => {
+  type Instance = InstanceType<typeof VMenu>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VMenu, {
+        // https://github.com/vuejs/vue-test-utils/issues/1130
+        sync: false,
+        ...options,
+        mocks: {
+          $vuetify: {
+            theme: {},
+          },
+        },
+      })
+    }
+  })
+
+  it('should work', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: false,
+        eager: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+      slots: {
+        default: [VCard],
+      },
+    })
+
+    const activator = wrapper.find('button')
+    const input = jest.fn()
+    wrapper.vm.$on('input', input)
+    activator.trigger('click')
+
+    await wrapper.vm.$nextTick()
+
+    expect(input).toHaveBeenCalledWith(true)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should render multiple content nodes', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+      slots: {
+        default: '<span>foo</span><span>bar</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should round dimensions', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: false,
+        eager: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+      slots: {
+        default: '<span class="content"></span>',
+      },
+    })
+
+    const content = wrapper.find('.v-menu__content')
+
+    const getBoundingClientRect = () => {
+      return {
+        width: 100.5,
+        height: 100.25,
+        top: 0.75,
+        left: 50.123,
+        right: 75.987,
+        bottom: 4,
+        x: 0,
+        y: 0,
+      }
+    }
+
+    wrapper.find('button').element.getBoundingClientRect = getBoundingClientRect
+    wrapper.vm.$refs.content.getBoundingClientRect = getBoundingClientRect
+
+    wrapper.setProps({ value: true })
+
+    await waitAnimationFrame()
+
+    expect(content.attributes('style')).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should not attach event handlers to the activator container if disabled', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        disabled: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+    })
+
+    const activator = wrapper.find('button')
+    activator.trigger('click')
+
+    expect(wrapper.vm.isActive).toBe(false)
+  })
+
+  it('should show the menu on mounted', () => {
+    const activate = jest.fn()
+    mountFunction({
+      methods: { activate },
+    })
+
+    expect(activate).not.toHaveBeenCalled()
+
+    mountFunction({
+      propsData: { value: true },
+      methods: { activate },
+    })
+    expect(activate).toHaveBeenCalled()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should update position dynamically', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        absolute: true,
+        value: true,
+        positionX: 100,
+        positionY: 200,
+      },
+    })
+
+    const content = wrapper.findAll('.v-menu__content').at(0)
+
+    // TODO replace with jest fakeTimers when it will support requestAnimationFrame: https://github.com/facebook/jest/pull/7776
+    // See https://github.com/vuetifyjs/vuetify/pull/6330#issuecomment-460083547 for details
+    expect(content.attributes('style')).toMatchSnapshot()
+
+    wrapper.setProps({
+      positionX: 110,
+      positionY: 220,
+    })
+    expect(content.attributes('style')).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should select next and previous tiles and skip non links/disabled', () => {
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+      scopedSlots: {
+        default () {
+          return h('div', [
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+            h(VListItem),
+            h(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.vm.getTiles()
+
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.nextTile()
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    wrapper.vm.nextTile()
+    expect(wrapper.vm.listIndex).toBe(1)
+
+    wrapper.vm.nextTile()
+    expect(wrapper.vm.listIndex).toBe(3)
+
+    wrapper.vm.nextTile()
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    wrapper.vm.prevTile()
+    expect(wrapper.vm.listIndex).toBe(3)
+
+    wrapper.vm.prevTile()
+    expect(wrapper.vm.listIndex).toBe(1)
+
+    wrapper.vm.prevTile()
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should accept a custom role or use default', () => {
+    expect(mountFunction({
+      propsData: { eager: true },
+    }).vm.$refs.content.getAttribute('role')).toBe('menu')
+    expect(mountFunction({
+      propsData: { eager: true },
+      attrs: { role: 'listbox' },
+    }).vm.$refs.content.getAttribute('role')).toBe('listbox')
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should select first or last item when opening menu with up or down key', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+      scopedSlots: {
+        default () {
+          return h('div', [
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+    expect(wrapper.vm.isActive).toBe(true)
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(3)
+
+    wrapper.setData({ isActive: false })
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+    expect(wrapper.vm.isActive).toBe(true)
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should be able to navigate the menu list with up and down keys', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+      scopedSlots: {
+        default () {
+          return h('div', [
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should select first or last item when pressing home or end on active menu', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+      scopedSlots: {
+        default () {
+          return h('div', [
+            h(VListItem),
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+            h(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.end))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(3)
+
+    wrapper.vm.onKeyDown(event(keyCodes.home))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should deactivate when escape is pressed', async () => {
+    jest.useFakeTimers()
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.esc))
+
+    await wrapper.vm.$nextTick()
+    jest.runAllTimers()
+
+    expect(wrapper.vm.isActive).toBe(false)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+    jest.useRealTimers()
+  })
+
+  it('should disable escape key when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.esc))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isActive).toBe(true)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should disable navigation keys when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+      scopedSlots: {
+        default () {
+          return h('div', [
+            h(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.end))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.home))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should not open menu on up or down press when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+    })
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+})

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VMenu.ts should render multiple content nodes 1`] = `
+<div class="v-menu">
+  <button>
+  </button>
+  <div role="menu"
+       class="v-menu__content theme--light "
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+  >
+    <span>
+      foo
+    </span>
+    <span>
+      bar
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`;
+
+exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;
+
+exports[`VMenu.ts should update position dynamically 2`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;
+
+exports[`VMenu.ts should work 1`] = `
+<div class="v-menu">
+  <button>
+  </button>
+  <div role="menu"
+       class="v-menu__content theme--light menuable__content__active "
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none; z-index: 8;"
+  >
+    <div class="v-card v-sheet theme--light">
+    </div>
+  </div>
+</div>
+`;

package/src/components/VMenu/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/styles.sass';
+
+$menu-content-border-radius: $border-radius-root !default;
+$menu-content-elevation: 8 !default;

package/src/components/VMenu/index.ts

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

package/src/components/VMessages/VMessages.sass

@@ -0,0 +1,25 @@
+@import './_variables.scss'
+
+/* Theme */
++theme(v-messages) using ($material)
+  color: map-deep-get($material, 'text', 'secondary')
+
+.v-messages
+  flex: 1 1 auto
+  font-size: $messages-font-size
+  min-height: $messages-min-height
+  min-width: 1px // Ensure takes up space with no messages and inside of flex
+  position: relative
+
+  +ltr()
+    text-align: left
+
+  +rtl()
+    text-align: right
+
+  &__message
+    line-height: $messages-line-height
+    word-break: break-word
+    overflow-wrap: break-word
+    word-wrap: break-word
+    hyphens: auto

package/src/components/VMessages/VMessages.ts

@@ -0,0 +1,48 @@
+// Styles
+import './VMessages.sass'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+
+// Types
+import { TransitionGroup, VNode, h } from 'vue'
+import { PropValidator } from 'vue/types/options'
+import mixins from '../../util/mixins'
+
+// Utilities
+import { getSlot } from '../../util/helpers'
+
+/* @vue/component */
+export default mixins(Colorable, Themeable).extend({
+  name: 'v-messages',
+
+  props: {
+    value: {
+      type: Array,
+      default: () => ([]),
+    } as PropValidator<string[]>,
+  },
+
+  methods: {
+    genChildren () {
+      return h(TransitionGroup, {
+        class: 'v-messages__wrapper',
+        name: 'message-transition',
+        tag: 'div',
+      }, this.value.map(this.genMessage))
+    },
+    genMessage (message: string, key: number) {
+      return h('div', {
+        class: 'v-messages__message',
+        key,
+      }, getSlot(this, 'default', { message, key }) || [message])
+    },
+  },
+
+  render (): VNode {
+    return h('div', this.setTextColor(this.color, {
+      class: ['v-messages', this.themeClasses],
+    }), [this.genChildren()])
+  },
+})

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

@@ -0,0 +1,78 @@
+// Components
+import VMessages from '../VMessages'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+
+// Types
+import { ExtractVue } from '../../../util/mixins'
+
+describe('VMessages.ts', () => {
+  type Instance = ExtractVue<typeof VMessages>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VMessages, {
+        ...options,
+      })
+    }
+  })
+
+  it('should have a default array', () => {
+    const wrapper = mountFunction()
+
+    expect(Array.isArray(wrapper.vm.value)).toBe(true)
+  })
+
+  it('should show messages', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: ['foo', 'bar'],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ value: [] })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should allow HTML', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: ['<a href="#">a link</a>'],
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9491
+  it('should not allow HTML', () => {
+    const wrapper = mount(VMessages, {
+      propsData: {
+        value: ['<a href="#">a link</a>'],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should accept a scoped slot', () => {
+    const wrapper = mount(VMessages, {
+      propsData: { value: ['Foo'] },
+      scopedSlots: {
+        default (props) {
+          return h('div', props.message)
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VMessages.ts should accept a scoped slot 1`] = `
+<div class="v-messages theme--light">
+  <span name="message-transition"
+        tag="div"
+        class="v-messages__wrapper"
+  >
+    <div class="v-messages__message">
+      <div>
+        Foo
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`VMessages.ts should allow HTML 1`] = `
+<div class="v-messages theme--light">
+  <span name="message-transition"
+        tag="div"
+        class="v-messages__wrapper"
+  >
+    <div class="v-messages__message">
+      &lt;a href="#"&gt;a link&lt;/a&gt;
+    </div>
+  </span>
+</div>
+`;
+
+exports[`VMessages.ts should not allow HTML 1`] = `
+<div class="v-messages theme--light">
+  <span name="message-transition"
+        tag="div"
+        class="v-messages__wrapper"
+  >
+    <div class="v-messages__message">
+      &lt;a href="#"&gt;a link&lt;/a&gt;
+    </div>
+  </span>
+</div>
+`;
+
+exports[`VMessages.ts should show messages 1`] = `
+<div class="v-messages theme--light">
+  <span name="message-transition"
+        tag="div"
+        class="v-messages__wrapper"
+  >
+    <div class="v-messages__message">
+      foo
+    </div>
+    <div class="v-messages__message">
+      bar
+    </div>
+  </span>
+</div>
+`;
+
+exports[`VMessages.ts should show messages 2`] = `
+<div class="v-messages theme--light">
+  <span name="message-transition"
+        tag="div"
+        class="v-messages__wrapper"
+  >
+  </span>
+</div>
+`;

package/src/components/VMessages/_variables.scss

@@ -0,0 +1,5 @@
+@import '../../styles/styles.sass';
+
+$messages-font-size: 12px !default;
+$messages-line-height: $messages-font-size !default;
+$messages-min-height: 14px !default;

package/src/components/VMessages/index.ts

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