@kokoccc/vuetify 1.0.1

package/src/components/VStepper/__tests__/VStepperContent.spec.ts

@@ -0,0 +1,311 @@
+// Components
+import VStepperContent from '../VStepperContent'
+import {
+  VTabTransition,
+  VTabReverseTransition,
+} from '../../transitions'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { wait } from '../../../../test'
+
+const tip = '[Vuetify] The v-stepper-content component must be used inside a v-stepper'
+
+describe('VStepperContent.ts', () => {
+  type Instance = InstanceType<typeof VStepperContent>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VStepperContent, {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should set height to auto', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: { step: 0 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    expect(wrapper.vm.isActive).toBeNull()
+    expect(wrapper.vm.height).toBe(0)
+
+    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(true)
+    expect(wrapper.vm.height).toBe('auto')
+  })
+
+  it('should use reverse transition', async () => {
+    const wrapper = mountFunction({
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+    expect(wrapper.vm.computedTransition).toBe(VTabTransition)
+
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
+  })
+
+  it('should use opposite of reverse transition in rtl', async () => {
+    const wrapper = mountFunction({
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+          },
+        },
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+      props: { step: 1 },
+    })
+    expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
+
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.computedTransition).toBe(VTabTransition)
+  })
+
+  it('should accept a custom height', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: {
+        step: 1,
+      },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    const enter = jest.fn()
+    const leave = jest.fn()
+    wrapper.vm.enter = enter
+    wrapper.vm.leave = leave
+
+    await wrapper.setData({
+      isActive: true,
+      isVertical: true,
+    })
+    await wrapper.vm.$nextTick()
+
+    const stepWrapper = wrapper.find('.v-stepper__wrapper')
+
+    expect(stepWrapper.element.style.height).toBe('auto')
+
+    // should call leave() -- total so far: 1
+    await wrapper.setData({ isActive: false })
+    await wrapper.vm.$nextTick()
+
+    // should call enter() -- total so far: 1
+    await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
+
+    expect(enter).toHaveBeenCalled()
+    expect(leave).toHaveBeenCalled()
+    expect(enter.mock.calls).toHaveLength(1)
+    expect(leave.mock.calls).toHaveLength(1)
+
+    // setting vertical and isActive at the same time causes
+    // isActive watcher to fire enter/leave methods
+    await wrapper.setData({
+      isVertical: false,
+    })
+    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false })
+    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
+    expect(enter.mock.calls).toHaveLength(1)
+    expect(leave.mock.calls).toHaveLength(1)
+  })
+
+  it('should toggle isActive state', async () => {
+    const wrapper = mountFunction({
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    wrapper.vm.toggle(1, false)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isActive).toBe(true)
+    expect(wrapper.vm.isReverse).toBe(false)
+
+    wrapper.vm.toggle('1', false)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isActive).toBe(true)
+    expect(wrapper.vm.isReverse).toBe(false)
+
+    wrapper.vm.toggle(2, true)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.vm.isReverse).toBe(true)
+  })
+
+  it('should set height', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    await wrapper.setData({ isActive: false, isVertical: true })
+
+    await wrapper.setData({ isActive: true })
+
+    expect(wrapper.vm.height).toBe(0)
+
+    await wait(450)
+
+    expect(wrapper.vm.height).toBe('auto')
+
+    await wrapper.setData({ isActive: false })
+
+    await wait(10)
+
+    expect(wrapper.vm.height).toBe(0)
+  })
+
+  it('should set height only if isActive', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    await wrapper.setData({ isActive: false, isVertical: true })
+
+    await wrapper.setData({ isActive: true })
+
+    expect(wrapper.vm.height).toBe(0)
+
+    await wrapper.setData({ isActive: false })
+
+    await wait(450)
+
+    expect(wrapper.vm.height).toBe(0)
+  })
+
+  it('should reset height', async () => {
+    const wrapper = mountFunction({
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    const stepWrapper = wrapper.find('.v-stepper__wrapper')
+
+    expect(wrapper.vm.height).toBe(0)
+
+    expect(wrapper.vm.onTransition()).toBeUndefined()
+
+    await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.height).toBe('auto')
+
+    await wrapper.setData({ height: 0 })
+    await wrapper.vm.$nextTick()
+
+    wrapper.vm.onTransition({ propertyName: 'foo' })
+    expect(wrapper.vm.height).toBe(0)
+
+    wrapper.vm.onTransition({ propertyName: 'height' })
+    expect(wrapper.vm.height).toBe('auto')
+  })
+
+  it('should tip when not used with v-stepper', () => {
+    const wrapper = mountFunction({
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+        },
+      },
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    // Ожидаем предупреждение о том, что компонент должен использоваться внутри v-stepper
+    expect('[Vuetify] The v-stepper-content component must be used inside a v-stepper').toHaveBeenTipped()
+  })
+})

package/src/components/VStepper/__tests__/VStepperStep.spec.ts

@@ -0,0 +1,162 @@
+// Components
+import VStepperStep from '../VStepperStep'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+  MountOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+const tip = '[Vuetify] The v-stepper-step component must be used inside a v-stepper'
+const warning = '[Vue warn]: Injection "stepClick" not found'
+
+describe('VStepperStep.ts', () => {
+  type Instance = InstanceType<typeof VStepperStep>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VStepperStep, {
+        global: {
+          mocks: {
+            $vuetify: {
+              icons: {
+                values: {
+                  complete: 'mdi-check',
+                },
+              },
+            },
+          },
+          provide: {
+            stepClick: jest.fn(),
+            stepper: {
+              register: jest.fn(),
+              unregister: jest.fn(),
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should accept a custom color', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: {
+        color: 'pink',
+        complete: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should accept a custom css color', async () => {
+    const wrapper = mountFunction({
+      attachTo: document.body,
+      props: {
+        color: '#aabbcc',
+        complete: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should emit event and invoke stepClick when clicked', async () => {
+    const stepClick = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        editable: true,
+      },
+      global: {
+        provide: {
+          stepClick,
+          stepper: {
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.v-stepper__step--editable').trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+    expect(stepClick).toHaveBeenCalledWith(wrapper.vm.step)
+  })
+
+  it('should render', async () => {
+    const wrapper = mountFunction({
+      props: {
+        step: 1,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render complete step', async () => {
+    const wrapper = mountFunction({
+      props: {
+        complete: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render step with error', async () => {
+    const wrapper = mountFunction({
+      props: {
+        rules: [() => 'Error message'],
+      },
+      global: {
+        provide: {
+          stepClick: jest.fn(),
+          stepper: {
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render editable step', async () => {
+    const wrapper = mountFunction({
+      props: {
+        editable: true,
+        complete: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should toggle', async () => {
+    const wrapper = mountFunction({
+      props: {
+        step: 3,
+      },
+    })
+
+    wrapper.vm.toggle(1)
+    expect(wrapper.vm.isActive).toBeFalsy()
+    expect(wrapper.vm.isInactive).toBeTruthy()
+
+    wrapper.vm.toggle(3)
+    expect(wrapper.vm.isActive).toBeTruthy()
+    expect(wrapper.vm.isInactive).toBeFalsy()
+
+    wrapper.vm.toggle(5)
+    expect(wrapper.vm.isActive).toBeFalsy()
+    expect(wrapper.vm.isInactive).toBeFalsy()
+  })
+})

package/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VStepperStep.ts should accept a custom color 1`] = `
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
+  <span class="v-stepper__step__step pink">
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
+    >
+    </i>
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;
+
+exports[`VStepperStep.ts should accept a custom css color 1`] = `
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
+  <span class="v-stepper__step__step"
+        style="background-color: rgb(170, 187, 204); border-color: #aabbcc;"
+  >
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
+    >
+    </i>
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;
+
+exports[`VStepperStep.ts should render 1`] = `
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive"
+>
+  <span class="v-stepper__step__step">
+    1
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;
+
+exports[`VStepperStep.ts should render complete step 1`] = `
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
+  <span class="v-stepper__step__step primary">
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
+    >
+    </i>
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;
+
+exports[`VStepperStep.ts should render editable step 1`] = `
+<div tabindex="0"
+     class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete"
+>
+  <span class="v-stepper__step__step primary">
+    <i class="v-icon notranslate theme--light material-icons"
+       aria-hidden="true"
+    >
+    </i>
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;
+
+exports[`VStepperStep.ts should render step with error 1`] = `
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text"
+>
+  <span class="v-stepper__step__step">
+    <i class="v-icon notranslate theme--light mdi mdi-alert"
+       aria-hidden="true"
+    >
+    </i>
+  </span>
+  <div class="v-stepper__label">
+  </div>
+</div>
+`;

package/src/components/VStepper/_variables.scss

@@ -0,0 +1,31 @@
+@import '../../styles/styles.sass';
+
+$stepper-alt-labels-flex-basis : 175px !default;
+$stepper-alt-labels-header-divider: 35px -67px 0 !default;
+$stepper-alt-labels-step-step-margin-bottom: 11px !default;
+$stepper-border-radius: $border-radius-root !default;
+$stepper-content-btn-margin: 24px 8px 8px 0 !default;
+$stepper-content-padding: 24px 24px 16px 24px !default;
+$stepper-elevation: 2 !default;
+$stepper-header-divider-margin: 0 -16px !default;
+$stepper-header-elevation: 2 !default;
+$stepper-header-height: 72px !default;
+$stepper-label-line-height: 1 !default;
+$stepper-label-small-font-size: map-deep-get($headings, 'caption', 'size') !default;
+$stepper-label-small-font-weight: 300 !default;
+$stepper-shaped-border-radius: map-get($rounded, 'xl') $stepper-border-radius !default;
+$stepper-step-error-icon-font-size: map-deep-get($headings, 'h5', 'size')  !default;
+$stepper-step-padding: 24px !default;
+$stepper-step-step-font-size: map-deep-get($headings, 'caption', 'size') !default;
+$stepper-step-step-height: 24px !default;
+$stepper-step-step-icon-font-size: map-deep-get($headings, 'h6', 'size') !default;
+$stepper-step-step-margin: 8px !default;
+$stepper-step-step-min-width: 24px !default;
+$stepper-step-step-width: 24px !default;
+$stepper-vertical-content-ltr-margin: -8px -36px -16px 36px !default;
+$stepper-vertical-content-rtl-margin: -8px 36px -16px -36px !default;
+$stepper-vertical-content-ltr-padding: 16px 60px 16px 23px !default;
+$stepper-vertical-content-rtl-padding: 16px 23px 16px 60px !default;
+$stepper-vertical-padding-bottom: 36px !default;
+$stepper-vertical-step-padding: 24px 24px 16px !default;
+$stepper-vertical-step-step-margin: 12px !default;

package/src/components/VStepper/index.ts

@@ -0,0 +1,25 @@
+import { createSimpleFunctional } from '../../util/helpers'
+import VStepper from './VStepper'
+import VStepperStep from './VStepperStep'
+import VStepperContent from './VStepperContent'
+
+const VStepperHeader = createSimpleFunctional('v-stepper__header')
+const VStepperItems = createSimpleFunctional('v-stepper__items')
+
+export {
+  VStepper,
+  VStepperContent,
+  VStepperStep,
+  VStepperHeader,
+  VStepperItems,
+}
+
+export default {
+  $_vuetify_subcomponents: {
+    VStepper,
+    VStepperContent,
+    VStepperStep,
+    VStepperHeader,
+    VStepperItems,
+  },
+}

package/src/components/VSubheader/VSubheader.sass

@@ -0,0 +1,15 @@
+@import './_variables.scss'
+
++theme(v-subheader) using ($material)
+  color: map-deep-get($material, 'text', 'secondary')
+
+.v-subheader
+  align-items: center
+  display: flex
+  height: $subheader-item-single-height
+  font-size: map-deep-get($headings, 'body-2', 'size')
+  font-weight: map-deep-get($headings, 'body-2', 'weight')
+  padding: 0 $subheader-right-padding 0 $subheader-left-padding
+
+  &--inset
+    margin-left: $subheader-inset-margin

package/src/components/VSubheader/VSubheader.ts

@@ -0,0 +1,33 @@
+import {h} from 'vue'
+// Styles
+import './VSubheader.sass'
+
+// Mixins
+import Themeable from '../../mixins/themeable'
+import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { VNode } from 'vue'
+
+export default mixins(
+  Themeable
+  /* @vue/component */
+).extend({
+  name: 'v-subheader',
+
+  props: {
+    inset: Boolean,
+  },
+
+  render (): VNode {
+    return h('div', {
+      ...this.$attrs,
+      class: ['v-subheader', {
+        'v-subheader--inset': this.inset,
+        ...this.themeClasses,
+      }],
+      ...this.$listeners
+    }, getSlot(this))
+  },
+})