@kokoccc/vuetify 1.0.1

package/src/components/VBtn/VBtn.ts

@@ -0,0 +1,223 @@
+// Styles
+import './VBtn.sass'
+
+// Extensions
+import VSheet from '../VSheet'
+
+// Components
+import VProgressCircular from '../VProgressCircular'
+
+// Mixins
+import { factory as GroupableFactory } from '../../mixins/groupable'
+import { factory as ToggleableFactory } from '../../mixins/toggleable'
+import Elevatable from '../../mixins/elevatable'
+import Positionable from '../../mixins/positionable'
+import Routable from '../../mixins/routable'
+import Sizeable from '../../mixins/sizeable'
+
+// Utilities
+import mixins, { ExtractVue } from '../../util/mixins'
+import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { VNode, withDirectives, h } from 'vue'
+import { PropValidator, PropType } from 'vue/types/options'
+import { RippleOptions } from '../../directives/ripple'
+
+const baseMixins = mixins(
+  VSheet,
+  Routable,
+  Positionable,
+  Sizeable,
+  GroupableFactory('btnToggle'),
+  ToggleableFactory()
+  /* @vue/component */
+)
+interface options extends ExtractVue<typeof baseMixins> {
+  $el: HTMLElement
+}
+
+export default baseMixins.extend({
+  name: 'v-btn',
+  props: {
+    activeClass: {
+      type: String,
+    } as any as PropValidator<string>,
+    block: Boolean,
+    depressed: Boolean,
+    fab: Boolean,
+    icon: Boolean,
+    loading: Boolean,
+    outlined: Boolean,
+    plain: Boolean,
+    retainFocusOnClick: Boolean,
+    rounded: Boolean,
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    text: Boolean,
+    tile: Boolean,
+    type: {
+      type: String,
+      default: 'button',
+    },
+    value: null as any as PropType<any>,
+  },
+
+  emits: ['click', 'change', 'update:modelValue'],
+
+  data: () => ({
+    proxyClass: 'v-btn--active',
+  }),
+
+  computed: {
+    classes (): any {
+      return {
+        'v-btn': true,
+        ...Routable.computed.classes.call(this),
+        'v-btn--absolute': this.absolute,
+        'v-btn--block': this.block,
+        'v-btn--bottom': this.bottom,
+        'v-btn--disabled': this.disabled,
+        'v-btn--is-elevated': this.isElevated,
+        'v-btn--fab': this.fab,
+        'v-btn--fixed': this.fixed,
+        'v-btn--has-bg': this.hasBg,
+        'v-btn--icon': this.icon,
+        'v-btn--left': this.left,
+        'v-btn--loading': this.loading,
+        'v-btn--outlined': this.outlined,
+        'v-btn--plain': this.plain,
+        'v-btn--right': this.right,
+        'v-btn--round': this.isRound,
+        'v-btn--rounded': this.rounded,
+        'v-btn--router': this.to,
+        'v-btn--text': this.text,
+        'v-btn--tile': this.tile,
+        'v-btn--top': this.top,
+        ...this.themeClasses,
+        ...this.groupClasses,
+        ...this.elevationClasses,
+        ...this.sizeableClasses,
+      }
+    },
+    computedElevation (): string | number | undefined {
+      if (this.disabled) return undefined
+
+      return this.elevation
+    },
+    computedRipple (): RippleOptions | boolean {
+      const defaultRipple = this.icon || this.fab ? { circle: true } : true
+      if (this.disabled) return false
+      else return this.ripple ?? defaultRipple
+    },
+    hasBg (): boolean {
+      return !this.text && !this.plain && !this.outlined && !this.icon
+    },
+    isElevated (): boolean {
+      return Boolean(
+        !this.icon &&
+        !this.text &&
+        !this.outlined &&
+        !this.depressed &&
+        !this.disabled &&
+        !this.plain &&
+        (this.elevation == null || Number(this.elevation) > 0)
+      )
+    },
+    isRound (): boolean {
+      return Boolean(
+        this.icon ||
+        this.fab
+      )
+    },
+    styles (): object {
+      return {
+        ...this.measurableStyles,
+      }
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['flat', 'text'],
+      ['outline', 'outlined'],
+      ['round', 'rounded'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  methods: {
+    click (e: MouseEvent): void {
+      // TODO: Remove this in v3
+      !this.retainFocusOnClick && !this.fab && e.detail && this.$el.blur()
+      this.$emit('click', e)
+      this.$emitLegacy('click', e)
+
+      this.btnToggle && this.toggle()
+    },
+    genContent (): VNode {
+      return h('span', {
+        class: 'v-btn__content',
+      }, getSlot(this))
+    },
+    genLoader (): VNode {
+      return h('span', {
+        class: 'v-btn__loader',
+      }, getSlot(this, 'loader') || [h(VProgressCircular, {
+        indeterminate: true,
+        size: 23,
+        width: 2,
+      })])
+    },
+  },
+
+  render (): VNode {
+    const children = [
+      this.genContent(),
+      this.loading && this.genLoader(),
+    ]
+    const { tag, data: linkData, directives } = this.generateRouteLink()
+    const setColor = this.hasBg
+      ? this.setBackgroundColor
+      : this.setTextColor
+
+    // Merge component classes with routable classes
+    const mergedClasses = {
+      ...this.classes,
+      ...linkData.class,
+    }
+
+    if (tag === 'button') {
+      linkData.type = this.type
+      linkData.disabled = this.disabled
+    }
+    linkData.value = ['string', 'number'].includes(typeof this.value)
+      ? this.value
+      : JSON.stringify(this.value)
+
+    const data = {
+      ...linkData,
+      class: mergedClasses,
+      style: this.styles,
+    }
+
+    // Apply color styling but preserve Vue's automatic attribute inheritance
+    const finalData = this.disabled ? data : setColor(this.color, data)
+
+    const vnode = typeof tag === 'string'
+      ? h(tag, finalData, children)
+      : h(tag, finalData, () => children)
+
+    return withDirectives(
+      vnode,
+      directives
+    )
+  },
+})

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

@@ -0,0 +1,306 @@
+/* eslint-disable max-statements */
+// Components
+import VBtn from '../VBtn'
+
+// Utilities
+import { mount, enableAutoUnmount, VueWrapper } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { nextTick } from 'vue'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
+
+// Auto cleanup after each test
+enableAutoUnmount(afterEach)
+
+describe('VBtn.ts', () => {
+  // eslint-disable-line max-statements
+  let mountFunction: (options?: object) => VueWrapper<any>
+  let router: any
+
+  beforeEach(() => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: '/', component: { template: '<div>Home</div>' } },
+        { path: '/foobar', component: { template: '<div>Foobar</div>' } },
+        { path: '/fizzbuzz', component: { template: '<div>Fizzbuzz</div>' } },
+        { path: '/foo', component: { template: '<div>Foo</div>' } },
+      ],
+    })
+
+    mountFunction = (options = {}) => {
+      return mount(VBtn, {
+        global: {
+          plugins: [router],
+          components: {
+            'router-link': Vue3RouterLinkStub,
+          },
+          ...options.global,
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and match snapshot', () => {
+    expect(mountFunction().html()).toMatchSnapshot()
+  })
+
+  it('should render component with color prop and match snapshot', () => {
+    expect(
+      mountFunction({
+        props: {
+          color: 'green darken-1',
+        },
+      }).html()
+    ).toMatchSnapshot()
+
+    expect(
+      mountFunction({
+        props: {
+          color: 'green darken-1',
+          text: true,
+        },
+      }).html()
+    ).toMatchSnapshot()
+  })
+
+  it('should render component with loader slot and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        loading: true,
+      },
+      slots: {
+        loader: '<span>loader</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should register and unregister', async () => {
+    const register = jest.fn()
+    const unregister = jest.fn()
+
+    const wrapper = mountFunction({
+      global: {
+        provide: {
+          btnToggle: {
+            register,
+            unregister,
+          },
+        },
+      },
+    })
+
+    expect(register).toHaveBeenCalled()
+    wrapper.unmount()
+    await nextTick()
+    expect(unregister).toHaveBeenCalled()
+  })
+  it('should use custom active-class', () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: true,
+        activeClass: 'foo',
+      },
+    })
+
+    expect(wrapper.classes('foo')).toBe(true)
+  })
+
+  it('should have v-btn--plain class when plain prop is set to true', () => {
+    const wrapper = mountFunction({
+      props: {
+        plain: true,
+      },
+    })
+
+    expect(wrapper.classes('v-btn--plain')).toBe(true)
+  })
+
+  it('should have the correct icon classes', async () => {
+    const wrapper = mountFunction({
+      props: {
+        icon: true,
+      },
+    })
+    expect(wrapper.classes('v-btn--icon')).toBe(true)
+
+    await wrapper.setProps({ icon: false })
+
+    expect(wrapper.classes('v-btn--icon')).toBe(false)
+  })
+
+  it('should have the correct elevation', async () => {
+    // eslint-disable-line max-statements
+    const wrapper = mountFunction()
+
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.classes('elevation-2')).toBe(false)
+    expect(wrapper.classes('v-btn--disabled')).toBe(true)
+
+    await wrapper.setProps({ disabled: false, elevation: 24 })
+    expect(wrapper.classes('elevation-24')).toBe(true)
+
+    await wrapper.setProps({ elevation: 2 })
+    expect(wrapper.classes('elevation-2')).toBe(true)
+  })
+
+  it('should stringify non string|number values', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 'foo',
+      },
+    })
+
+    expect(wrapper.attributes('value')).toBe('foo')
+
+    await wrapper.setProps({ value: 2 })
+    expect(wrapper.attributes('value')).toBe('2')
+
+    await wrapper.setProps({ value: { foo: 'bar' } })
+    expect(wrapper.attributes('value')).toBe('{"foo":"bar"}')
+  })
+
+  it('should not add color classes if disabled', async () => {
+    const wrapper = mountFunction({
+      props: {
+        color: 'primary darken-2',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({
+      disabled: true,
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it.skip('should retain focus when clicked', async () => {
+    const wrapper = mountFunction({
+      props: {
+        retainFocusOnClick: true,
+      },
+    })
+    const blur = jest.fn()
+
+    wrapper.element.blur = blur
+
+    // Create a click event with detail to trigger the blur logic
+    const clickEvent = new MouseEvent('click', { detail: 1 })
+    wrapper.element.dispatchEvent(clickEvent)
+    await wrapper.vm.$nextTick()
+
+    expect(blur).not.toHaveBeenCalled()
+
+    await wrapper.setProps({ retainFocusOnClick: false })
+    wrapper.element.dispatchEvent(clickEvent)
+    await wrapper.vm.$nextTick()
+
+    expect(blur).toHaveBeenCalled()
+  })
+
+  // Test attributes inheritance and merging
+  it('should handle attributes inheritance correctly', () => {
+    const wrapper = mount(VBtn, {
+      global: {
+        plugins: [router],
+      },
+      attrs: {
+        'data-test': 'my-button',
+        'aria-label': 'Test button',
+        id: 'custom-id',
+        class: 'custom-class another-class',
+      },
+      props: {
+        color: 'primary',
+      },
+    })
+
+    // Check that component receives attrs
+    expect(wrapper.vm.$attrs['data-test']).toBe('my-button')
+    expect(wrapper.vm.$attrs['aria-label']).toBe('Test button')
+    expect(wrapper.vm.$attrs.id).toBe('custom-id')
+
+    // Check class merging
+    expect(wrapper.classes()).toContain('custom-class')
+    expect(wrapper.classes()).toContain('another-class')
+    expect(wrapper.classes()).toContain('v-btn')
+  })
+
+  it('should render loader when loading prop is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        loading: true,
+      },
+    })
+
+    expect(wrapper.classes('v-btn--loading')).toBe(true)
+    expect(wrapper.find('.v-btn__loader').exists()).toBe(true)
+  })
+  it('should compute button states and classes correctly', () => {
+    // Test multiple button variants and their classes
+    const variants = [
+      { props: {}, classes: ['v-btn'], hasBg: true, isElevated: true, isRound: false },
+      { props: { text: true }, classes: ['v-btn--text'], hasBg: false, isElevated: false, isRound: false },
+      { props: { plain: true }, classes: ['v-btn--plain'], hasBg: false, isElevated: false, isRound: false },
+      { props: { outlined: true }, classes: ['v-btn--outlined'], hasBg: false, isElevated: false, isRound: false },
+      { props: { icon: true }, classes: ['v-btn--icon'], hasBg: false, isElevated: false, isRound: true },
+      { props: { fab: true }, classes: ['v-btn--fab'], hasBg: true, isElevated: true, isRound: true },
+      { props: { block: true }, classes: ['v-btn--block'], hasBg: true, isElevated: true, isRound: false },
+      { props: { rounded: true }, classes: ['v-btn--rounded'], hasBg: true, isElevated: true, isRound: false },
+      { props: { disabled: true }, classes: ['v-btn--disabled'], hasBg: true, isElevated: false, isRound: false },
+    ]
+
+    variants.forEach(({ props, classes, hasBg, isElevated, isRound }) => {
+      const wrapper = mountFunction({ props })
+
+      // Check classes
+      classes.forEach(className => {
+        expect(wrapper.classes(className)).toBe(true)
+      })
+
+      // Check computed properties
+      expect(wrapper.vm.hasBg).toBe(hasBg)
+      expect(wrapper.vm.isElevated).toBe(isElevated)
+      expect(wrapper.vm.isRound).toBe(isRound)
+    })
+  })
+
+  it('should compute ripple correctly', () => {
+    // Should have ripple by default
+    let wrapper = mountFunction()
+    expect(wrapper.vm.computedRipple).toBe(true)
+
+    // Should not have ripple when disabled
+    wrapper = mountFunction({
+      props: { disabled: true },
+    })
+    expect(wrapper.vm.computedRipple).toBe(false)
+
+    // Should have circle ripple for icon buttons
+    wrapper = mountFunction({
+      props: { icon: true },
+    })
+    expect(wrapper.vm.computedRipple).toEqual({ circle: true })
+
+    // Should have circle ripple for fab buttons
+    wrapper = mountFunction({
+      props: { fab: true },
+    })
+    expect(wrapper.vm.computedRipple).toEqual({ circle: true })
+  })
+  it('should add router class when to prop is provided', () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/test-route',
+      },
+      slots: {
+        default: () => 'Router Button',
+      },
+    })
+
+    expect(wrapper.classes('v-btn--router')).toBe(true)
+  })
+})

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VBtn.ts should not add color classes if disabled 1`] = `
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary darken-2"
+        type="button"
+>
+  <span class="v-btn__content">
+  </span>
+</button>
+`;
+
+exports[`VBtn.ts should not add color classes if disabled 2`] = `
+<button class="v-btn v-btn--disabled v-btn--has-bg theme--light v-size--default"
+        type="button"
+        disabled
+>
+  <span class="v-btn__content">
+  </span>
+</button>
+`;
+
+exports[`VBtn.ts should render component and match snapshot 1`] = `
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+        type="button"
+>
+  <span class="v-btn__content">
+  </span>
+</button>
+`;
+
+exports[`VBtn.ts should render component with color prop and match snapshot 1`] = `
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
+        type="button"
+>
+  <span class="v-btn__content">
+  </span>
+</button>
+`;
+
+exports[`VBtn.ts should render component with color prop and match snapshot 2`] = `
+<button class="v-btn v-btn--text theme--light v-size--default green--text text--darken-1"
+        type="button"
+>
+  <span class="v-btn__content">
+  </span>
+</button>
+`;
+
+exports[`VBtn.ts should render component with loader slot and match snapshot 1`] = `
+<button class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
+        type="button"
+>
+  <span class="v-btn__content">
+  </span>
+  <span class="v-btn__loader">
+    <span>
+      loader
+    </span>
+  </span>
+</button>
+`;

package/src/components/VBtn/_variables.scss

@@ -0,0 +1,73 @@
+@import '../../styles/styles.sass';
+@import '../../styles/tools/_functions.sass';
+
+$btn-active-opacity: 0.18 !default;
+$btn-border-radius: $border-radius-root !default;
+$btn-focus-opacity: 0.24 !default;
+$btn-font-weight: 500 !default;
+$btn-hover-opacity: 0.08 !default;
+$btn-icon-font-size: 18px !default;
+$btn-icon-padding: 12px !default;
+$btn-letter-spacing: .0892857143em !default;
+$btn-outline-border-width: thin !default;
+$btn-round-border-radius: 50% !default;
+$btn-rounded-border-radius: 28px !default;
+$btn-text-transform: uppercase !default;
+$btn-tile-border-radius: 0 !default;
+$btn-transition-duration: 0.28s !default;
+$btn-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
+$btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
+$btn-states: (
+  'states': (
+    'activated': $btn-active-opacity,
+    'focus': $btn-focus-opacity,
+    'hover': $btn-hover-opacity
+  )
+);
+$btn-sizes: () !default;
+$btn-sizes: map-deep-merge(
+  (
+    'x-small': 20,
+    'small': 28,
+    'default': 36,
+    'large': 44,
+    'x-large': 52
+  ),
+  $btn-sizes
+);
+
+$btn-font-sizes: () !default;
+$btn-font-sizes: map-deep-merge(
+  (
+    'x-small': .625rem,
+    'small': .75rem,
+    'default': .875rem,
+    'large': .875rem,
+    'x-large': 1rem
+  ),
+  $btn-font-sizes
+);
+
+$fab-sizes: () !default;
+$fab-sizes: map-deep-merge(
+  (
+    'x-small': 32,
+    'small': 40,
+    'default': 56,
+    'large': 64,
+    'x-large': 72
+  ),
+  $fab-sizes
+);
+
+$fab-icon-sizes: () !default;
+$fab-icon-sizes: map-deep-merge(
+  (
+    'x-small': 18,
+    'small': 24,
+    'default': 24,
+    'large': 28,
+    'x-large': 32
+  ),
+  $fab-icon-sizes
+);

package/src/components/VBtn/index.ts

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