@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,213 @@
+// Components
+import VBreadcrumbs from '../VBreadcrumbs'
+import VBreadcrumbsItem from '../VBreadcrumbsItem'
+
+// Utilities
+import { h } from 'vue'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VBreadcrumbs.ts', () => {
+  type Instance = InstanceType<typeof VBreadcrumbs>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
+      return mount(VBreadcrumbs, {
+        ...options,
+      })
+    }
+  })
+
+  it('should have breadcrumbs classes', () => {
+    const wrapper = mount(VBreadcrumbs)
+
+    expect(wrapper.classes('v-breadcrumbs')).toBe(true)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render items without slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'a' },
+          { text: 'b' },
+          { text: 'c' },
+          { text: 'd' },
+        ],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should not complain about identical keys', () => {
+    mountFunction({
+      props: {
+        items: [
+          { text: 'a' },
+          { text: 'a' },
+        ],
+      },
+    })
+
+    expect(`Duplicate keys detected: 'a'`).not.toHaveBeenWarned()
+  })
+
+  it('should use slot to render items if present', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'a' },
+          { text: 'b' },
+          { text: 'c' },
+          { text: 'd' },
+        ],
+      },
+      slots: {
+        item (props) {
+          return h(VBreadcrumbsItem, {
+            key: props.item.text,
+          }, props.item.text.toUpperCase())
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should use a custom divider slot', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'a' },
+          { text: 'b' },
+          { text: 'c' },
+          { text: 'd' },
+        ],
+      },
+      slots: {
+        divider: () => '/divider/',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should pass HTML attributes from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', 'data-testid': 'home-link', 'aria-label': 'Go to home' },
+          { text: 'About', 'data-testid': 'about-link', 'aria-label': 'Go to about' },
+        ],
+      },
+    })
+
+    const homeItem = wrapper.find('[data-testid="home-link"]')
+    const aboutItem = wrapper.find('[data-testid="about-link"]')
+
+    expect(homeItem.exists()).toBe(true)
+    expect(homeItem.attributes('aria-label')).toBe('Go to home')
+    expect(aboutItem.exists()).toBe(true)
+    expect(aboutItem.attributes('aria-label')).toBe('Go to about')
+  })
+
+  it('should pass routable props from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', to: '/home', disabled: true, ripple: false },
+          { text: 'About', href: '/about', activeClass: 'custom-active' },
+        ],
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': true,
+        },
+      },
+    })
+
+    const homeItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    const aboutItem = wrapper.findAllComponents({ name: 'v-breadcrumbs-item' })[1]
+
+    expect(homeItem.props('to')).toBe('/home')
+    expect(homeItem.props('disabled')).toBe(true)
+    expect(homeItem.props('ripple')).toBe(false)
+    expect(aboutItem.props('href')).toBe('/about')
+    expect(aboutItem.props('activeClass')).toBe('custom-active')
+  })
+
+  it('should handle mixed props and attributes correctly', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Dashboard',
+            to: '/dashboard',
+            'data-testid': 'dashboard-link',
+            'aria-current': 'page',
+            class: 'custom-class',
+            style: 'color: red;'
+          },
+        ],
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': true,
+        },
+      },
+    })
+
+    const dashboardItem = wrapper.find('[data-testid="dashboard-link"]')
+
+    expect(dashboardItem.exists()).toBe(true)
+    expect(dashboardItem.attributes('aria-current')).toBe('page')
+    expect(dashboardItem.classes()).toContain('custom-class')
+    expect(dashboardItem.attributes('style')).toBe('color: red;')
+
+    // Проверяем, что routable пропс тоже передался
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    expect(breadcrumbItem.props('to')).toBe('/dashboard')
+  })
+
+  it('should not pass invalid props to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Home',
+            invalidProp: 'should-not-be-passed',
+            someRandomValue: 123,
+            'data-valid': 'this-should-be-passed'
+          },
+        ],
+      },
+    })
+
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+
+    // Проверяем, что валидные пропсы передались
+    expect(breadcrumbItem.props('text')).toBe('Home')
+
+    // Проверяем, что HTML атрибуты передались
+    const homeItem = wrapper.find('[data-valid="this-should-be-passed"]')
+    expect(homeItem.exists()).toBe(true)
+
+    // Проверяем, что невалидные пропсы не передались
+    expect(breadcrumbItem.props('invalidProp')).toBeUndefined()
+    expect(breadcrumbItem.props('someRandomValue')).toBeUndefined()
+  })
+})

package/src/components/VBreadcrumbs/__tests__/VBreadcrumbsItem.spec.ts

@@ -0,0 +1,44 @@
+// Components
+import VBreadcrumbsItem from '../VBreadcrumbsItem'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VBreadcrumbsItem.ts', () => {
+  type Instance = InstanceType<typeof VBreadcrumbsItem>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
+      return mount(VBreadcrumbsItem, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and match snapshot', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with active & link state and match snapshot', async () => {
+    const wrapper = mountFunction({
+      props: {
+        link: true,
+      },
+    })
+    await wrapper.setData({
+      isActive: true,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VBreadcrumbs.ts should have breadcrumbs classes 1`] = `
+<ul class="v-breadcrumbs theme--light">
+</ul>
+`;
+
+exports[`VBreadcrumbs.ts should render items without slot 1`] = `
+<ul class="v-breadcrumbs theme--light">
+  <li>
+    <div class="v-breadcrumbs__item">
+      a
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      b
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      c
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      d
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`VBreadcrumbs.ts should use a custom divider slot 1`] = `
+<ul class="v-breadcrumbs theme--light">
+  <li>
+    <div class="v-breadcrumbs__item">
+      a
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /divider/
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      b
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /divider/
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      c
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /divider/
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      d
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`VBreadcrumbs.ts should use slot to render items if present 1`] = `
+<ul class="v-breadcrumbs theme--light">
+  <li>
+    <div class="v-breadcrumbs__item">
+      A
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      B
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      C
+    </div>
+  </li>
+  <li class="v-breadcrumbs__divider">
+    /
+  </li>
+  <li>
+    <div class="v-breadcrumbs__item">
+      D
+    </div>
+  </li>
+</ul>
+`;

package/src/components/VBreadcrumbs/__tests__/__snapshots__/VBreadcrumbsItem.spec.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VBreadcrumbsItem.ts should render component and match snapshot 1`] = `
+<li>
+  <div class="v-breadcrumbs__item">
+  </div>
+</li>
+`;
+
+exports[`VBreadcrumbsItem.ts should render component with active & link state and match snapshot 1`] = `
+<li>
+  <div class="v-breadcrumbs__item"
+       aria-current="page"
+  >
+  </div>
+</li>
+`;

package/src/components/VBreadcrumbs/_variables.scss

@@ -0,0 +1,8 @@
+@import '../../styles/styles.sass';
+
+$breadcrumbs-flex: 0 1 auto !default;
+$breadcrumbs-padding: 18px 12px !default;
+$breadcrumbs-even-child-padding: 0 12px !default;
+$breadcrumbs-item-font-size: 14px !default;
+$breadcrumbs-item-large-font-size: 16px !default;
+$breadcrumbs-margin: 0 !default;

package/src/components/VBreadcrumbs/index.ts

@@ -0,0 +1,13 @@
+import VBreadcrumbs from './VBreadcrumbs'
+import VBreadcrumbsItem from './VBreadcrumbsItem'
+import VBreadcrumbsDivider from './VBreadcrumbsDivider'
+
+export { VBreadcrumbs, VBreadcrumbsItem, VBreadcrumbsDivider }
+
+export default {
+  $_vuetify_subcomponents: {
+    VBreadcrumbs,
+    VBreadcrumbsItem,
+    VBreadcrumbsDivider,
+  },
+}

package/src/components/VBtn/VBtn.sass

@@ -0,0 +1,249 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
+.v-btn:not(.v-btn--outlined)
+  &.primary,
+  &.secondary,
+  &.accent,
+  &.success,
+  &.error,
+  &.warning,
+  &.info
+    color: map-deep-get($material-dark, 'text', 'primary')
+
++theme(v-btn) using ($material)
+  color: map-deep-get($material, 'text', 'primary')
+
+  &.v-btn--disabled
+    color: map-deep-get($material, 'buttons', 'disabled') !important
+
+    .v-icon,
+    .v-btn__loading
+      color: map-deep-get($material, 'buttons', 'disabled') !important
+
+    &.v-btn--has-bg
+      background-color: map-deep-get($material, 'buttons', 'focused') !important
+
+  &.v-btn--has-bg
+    background-color: map-get($material, 'app-bar')
+
+  &.v-btn--outlined.v-btn--text
+    border-color: map-get($material, 'dividers')
+
+  &.v-btn--icon
+    color: map-deep-get($material, 'icons', 'active')
+
+  +states(map-deep-merge($material, $btn-states))
+
+// Block
+.v-btn
+  align-items: center
+  border-radius: $btn-border-radius
+  display: inline-flex
+  flex: 0 0 auto
+  font-weight: $btn-font-weight
+  letter-spacing: $btn-letter-spacing
+  justify-content: center
+  outline: 0
+  position: relative
+  text-decoration: none
+  text-indent: $btn-letter-spacing
+  text-transform: $btn-text-transform
+  transition-duration: $btn-transition-duration
+  transition-property: box-shadow, transform, opacity
+  transition-timing-function: $btn-transition-fn
+  user-select: none
+  vertical-align: middle
+  white-space: nowrap
+
+  @each $name, $size in $btn-font-sizes
+    &.v-size--#{$name}
+      font-size: $size
+
+  &:before
+    background-color: currentColor
+    border-radius: inherit
+    bottom: 0
+    color: inherit
+    content: ''
+    left: 0
+    opacity: 0
+    pointer-events: none
+    position: absolute
+    right: 0
+    top: 0
+    transition: $btn-transition
+
+  &:not(.v-btn--round)
+    @each $name, $size in $btn-sizes
+      &.v-size--#{$name}
+        height: #{$size}px
+        min-width: #{round($size * 1.777777777777778)}px // default ratio
+        padding: 0 #{$size / 2.25}px
+
+  > .v-btn__content .v-icon
+    color: inherit
+
+// Elements
+.v-btn__content
+  align-items: center
+  color: inherit
+  display: flex
+  // https://github.com/vuetifyjs/vuetify/issues/7580
+  flex: 1 0 auto
+  justify-content: inherit
+  line-height: normal
+  // Fixes bug where IE11 moves
+  // button content when clicked
+  // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
+  position: relative
+  transition: inherit
+  transition-property: opacity
+
+  // Increased specificity to overwrite in VIcon.sass
+  // iconfont css interference
+  .v-icon.v-icon--left,
+  .v-icon.v-icon--right
+    font-size: $btn-icon-font-size
+    height: $btn-icon-font-size
+    width: $btn-icon-font-size
+
+  .v-icon--left
+    +ltr()
+      margin-left: -4px
+      margin-right: 8px
+
+    +rtl()
+      margin-left: 8px
+      margin-right: -4px
+
+  .v-icon--right
+    +ltr()
+      margin-left: 8px
+      margin-right: -4px
+
+    +rtl()
+      margin-left: -4px
+      margin-right: 8px
+
+.v-btn__loader
+  align-items: center
+  display: flex
+  height: 100%
+  justify-content: center
+  left: 0
+  position: absolute
+  top: 0
+  width: 100%
+
+// Modifiers
+.v-btn--absolute,
+.v-btn--fixed
+  &.v-btn--right
+    right: map-get($grid-gutters, 'lg')
+
+  &.v-btn--left
+    left: map-get($grid-gutters, 'lg')
+
+  &.v-btn--top
+    top: map-get($grid-gutters, 'lg')
+
+  &.v-btn--bottom
+    bottom: map-get($grid-gutters, 'lg')
+
+.v-btn--absolute
+  position: absolute
+
+.v-btn--fixed
+  position: fixed
+
+.v-btn--block
+  display: flex
+  flex: 1 0 auto
+  min-width: 100% !important
+  max-width: none
+
+.v-btn--is-elevated
+  +elevation(2)
+
+  &:after
+    +elevation(4)
+
+  &:active
+    +elevation(8)
+
+  &.v-btn--fab
+    +elevation(6)
+
+    &:after
+      +elevation(8)
+
+    &:active
+      +elevation(12)
+
+.v-btn--disabled
+  pointer-events: none
+
+.v-btn--icon,
+.v-btn--fab
+  min-height: 0
+  min-width: 0
+  padding: 0
+
+  @each $name, $size in $fab-icon-sizes
+    &.v-size--#{$name}
+      .v-icon
+        height: #{$size}px
+        font-size: #{$size}px
+        width: #{$size}px
+
+.v-btn--icon
+  @each $name, $size in $btn-sizes
+    &.v-size--#{$name}
+      height: #{$size}px
+      width: #{$size}px
+
+.v-btn--fab
+  &.v-btn--absolute,
+  &.v-btn--fixed
+    z-index: 4
+
+  @each $name, $size in $fab-sizes
+    &.v-size--#{$name}
+      height: #{$size}px
+      width: #{$size}px
+
+      &.v-btn--absolute
+        &.v-btn--bottom
+          bottom: -#{$size / 2}px
+
+        &.v-btn--top
+          top: -#{$size / 2}px
+
+.v-btn--loading
+  pointer-events: none
+  transition: none
+
+  .v-btn__content
+    opacity: 0
+
+.v-btn--outlined
+  border: $btn-outline-border-width solid currentColor
+
+.v-btn--plain
+  &::before
+    display: none
+
+  &:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover)
+    .v-btn__content
+      opacity: .62
+
+.v-btn--round
+  +radius($btn-round-border-radius)
+
+.v-btn--rounded
+  +radius($btn-rounded-border-radius)
+
+.v-btn--tile
+  +radius($btn-tile-border-radius)