@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

package/src/components/VCarousel/__tests__/VCarouselItem.spec.ts

@@ -1,7 +1,8 @@
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import VCarouselItem from '../VCarouselItem'
 
@@ -10,16 +11,19 @@ const warning = '[Vuetify] The v-window-item component must be used inside a v-w
 
 describe('VCarouselItem.ts', () => {
   type Instance = InstanceType<typeof VCarouselItem>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VCarouselItem, options)
     }
   })
 
   it('should throw warning when not used inside v-carousel', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: imageSrc,
       },
     })

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

@@ -22,7 +22,7 @@ exports[`VCarousel.ts should generate vertical delimiters 2`] = `
   <div class="v-window__container">
   </div>
   <div class="v-carousel__controls"
-       style="left: 0px;"
+       style="left: 0px; right: 0px;"
   >
     <div class="v-item-group theme--dark">
     </div>

package/src/components/VCheckbox/VCheckbox.ts

@@ -8,6 +8,10 @@ import VInput from '../VInput'
 
 // Mixins
 import Selectable from '../../mixins/selectable'
+
+// Utilities
+import { breaking } from '../../util/console'
+
 import { defineComponent, h } from 'vue'
 
 /* @vue/component */
@@ -31,6 +35,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['click', 'focus', 'blur', 'update:indeterminate', 'update:modelValue', 'change'],
+
   data () {
     return {
       inputIndeterminate: this.indeterminate,
@@ -75,28 +81,35 @@ export default defineComponent({
     inputIndeterminate (val) {
       this.$emit('update:indeterminate', val)
     },
-    isActive () {
-      if (!this.indeterminate) return
-      this.inputIndeterminate = false
-    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['inputValue', 'model-value'],
+      ['input-value', 'model-value'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   methods: {
     genCheckbox () {
-      const { title, ...checkboxAttrs } = this.attrs$
+      const { title, class: parentClass, ...checkboxAttrs } = this.$attrs
+      const ariaChecked = this.inputIndeterminate ? 'mixed' : this.isActive.toString()
       return h('div', {
         class: 'v-input--selection-controls__input',
       }, [
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.dense,
           dark: this.dark,
-          light: this.light
-        }), this.computedIcon),
+          light: this.light,
+        }), () => this.computedIcon),
         this.genInput('checkbox', {
           ...checkboxAttrs,
-          'aria-checked': this.inputIndeterminate
-            ? 'mixed'
-            : this.isActive.toString(),
+          'aria-checked': ariaChecked,
         }),
         this.genRipple(this.setTextColor(this.rippleState)),
       ])

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -2,8 +2,7 @@ import './VSimpleCheckbox.sass'
 
 import Ripple from '../../directives/ripple'
 
-import { VNode, VNodeDirective, h } from 'vue'
-import {defineComponent} from 'vue'
+import { VNode, h, defineComponent, withDirectives } from 'vue'
 
 import { VIcon } from '../VIcon'
 
@@ -14,15 +13,11 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import mergeData from '../../util/mergeData'
 import { wrapInArray } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-  functional: true,
-
-  directives: {
-    Ripple,
-  },
 
   props: {
     ...Colorable.props,
@@ -32,7 +27,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    value: Boolean,
+    modelValue: Boolean,
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
@@ -48,49 +43,106 @@ export default defineComponent({
     },
   },
 
+  emits: ['input', 'update:modelValue'],
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  methods: {
+    getIcon (): string {
+      const { indeterminate, modelValue, indeterminateIcon, onIcon, offIcon } = this.$props
+
+      if (indeterminate) return indeterminateIcon
+      if (modelValue) return onIcon
+      return offIcon
+    },
+
+    createIcon (): VNode {
+      const { modelValue, disabled, dark, light, color } = this.$props
+
+      return h(
+        VIcon,
+        Colorable.methods.setTextColor(modelValue && color, {
+          disabled,
+          dark,
+          light,
+        }),
+        () => this.getIcon()
+      )
+    },
+
+    createRipple (): VNode | null {
+      const { ripple, disabled, color } = this.$props
+
+      if (!ripple || disabled) return null
+
+      return withDirectives(
+        h(
+          'div',
+          Colorable.methods.setTextColor(color, {
+            class: 'v-input--selection-controls__ripple',
+          })
+        ),
+        [
+          [Ripple, { center: true }],
+        ]
+      )
+    },
+
+    handleClick (e: MouseEvent): void {
+      e.stopPropagation()
+
+      if (this.$props.disabled) return
+
+      const newValue = !this.modelValue
+      const attrs = this.$attrs
+
+
+      this.$emit("input", newValue);
+      this.$emit('update:modelValue', newValue)
+    },
+
+    createChildren (): VNode[] {
+      const children = [this.createIcon()]
+
+      const ripple = this.createRipple()
+      if (ripple) {
+        children.push(ripple)
+      }
+
+      return children
+    },
+  },
+
   render (): VNode {
-    const props = this.$props
+    const { disabled } = this.$props
     const data = this.$attrs
 
-    const children = []
-    let icon = props.offIcon
-    if (props.indeterminate) icon = props.indeterminateIcon
-    else if (props.value) icon = props.onIcon
-
-    children.push(h(VIcon, Colorable.methods.setTextColor(props.value && props.color, {
-      disabled: props.disabled,
-      dark: props.dark,
-      light: props.light
-    }), icon))
-
-    if (props.ripple && !props.disabled) {
-      const ripple = h('div', Colorable.methods.setTextColor(props.color, {
-        class: 'v-input--selection-controls__ripple',
-        directives: [{
-          def: Ripple,
-          name: 'ripple',
-          value: { center: true },
-        }] as VNodeDirective[],
-      }))
-
-      children.push(ripple)
-    }
-
-    return h('div',
+    return h(
+      'div',
       mergeData(data, {
         class: {
           'v-simple-checkbox': true,
-          'v-simple-checkbox--disabled': props.disabled,
-        },
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-
-          if (data.on && data.on.input && !props.disabled) {
-            data.onInput && data.onInput(!props.value)
-          }
+          'v-simple-checkbox--disabled': disabled,
         },
-      }), [
-        h('div', { class: 'v-input--selection-controls__input' }, children),
-      ])
+        onClick: this.handleClick,
+      }),
+      [
+        h(
+          'div',
+          { class: 'v-input--selection-controls__input' },
+          this.createChildren()
+        )
+      ]
+    )
   },
 })