@dimailn/vuetify 2.7.2-alpha31 → 2.7.2-alpha33

package/src/components/VCheckbox/VCheckbox.ts

@@ -35,7 +35,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['click', 'focus', 'blur', 'update:indeterminate'],
+  emits: ['click', 'focus', 'blur', 'update:indeterminate', 'update:modelValue', 'change'],
 
   data () {
     return {
@@ -81,10 +81,6 @@ export default defineComponent({
     inputIndeterminate (val) {
       this.$emit('update:indeterminate', val)
     },
-    isActive () {
-      if (!this.indeterminate) return
-      this.inputIndeterminate = false
-    },
   },
 
   created () {
@@ -101,7 +97,8 @@ export default defineComponent({
 
   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',
       }, [
@@ -112,9 +109,7 @@ export default defineComponent({
         }), () => 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/__tests__/VCheckbox.spec.ts

@@ -92,6 +92,9 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
 
     await wrapper.setProps({ indeterminate: true } as any)
     await wrapper.vm.$nextTick()
+    // Wait for an additional tick to ensure DOM is fully updated
+    await wrapper.vm.$nextTick()
+
     expect(input.element.getAttribute('aria-checked')).toBe('mixed')
   })
 
@@ -347,8 +350,10 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         modelValue: true,
-        class: 'shrink mr-2 mt-0',
       } as any,
+      attrs: {
+        class: 'shrink mr-2 mt-0',
+      },
     })
 
     const rootElement = wrapper.element
@@ -369,5 +374,6 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     expect(input.element.classList.contains('shrink')).toBe(false)
     expect(input.element.classList.contains('mr-2')).toBe(false)
     expect(input.element.classList.contains('mt-0')).toBe(false)
+    expect(wrapper.html()).toMatchSnapshot()
   })
 })

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

@@ -1,12 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VCheckbox.ts should apply classes to root element 1`] = `
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-input--selection-controls v-input--checkbox shrink mr-2 mt-0 primary--text">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-input--selection-controls__input">
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-marked primary--text"
+           aria-hidden="true"
+        >
+        </i>
+        <input aria-checked="true"
+               id="input-134"
+               role="checkbox"
+               type="checkbox"
+               checked
+        >
+        <div class="v-input--selection-controls__ripple">
+        </div>
+      </div>
+    </div>
+    <div class="v-messages theme--light primary--text">
+      <div class="v-messages__wrapper">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VCheckbox.ts should be disabled 1`] = `
 <input aria-checked="false"
-       disabled="disabled"
-       id="input-101"
+       disabled
+       id="input-122"
        role="checkbox"
        type="checkbox"
-       value
 >
 `;
 
@@ -15,27 +41,22 @@ exports[`VCheckbox.ts should be render colored checkbox 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+           aria-hidden="true"
         >
-          $checkboxOff
         </i>
         <input aria-checked="false"
-               id="input-106"
+               id="input-128"
                role="checkbox"
                type="checkbox"
-               value
         >
         <div class="v-input--selection-controls__ripple">
         </div>
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -46,27 +67,22 @@ exports[`VCheckbox.ts should render themed component 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+           aria-hidden="true"
         >
-          $checkboxOff
         </i>
         <input aria-checked="false"
-               id="input-96"
+               id="input-116"
                role="checkbox"
                type="checkbox"
-               value
         >
         <div class="v-input--selection-controls__ripple">
         </div>
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -77,13 +93,12 @@ exports[`VCheckbox.ts should use custom icons 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -93,11 +108,8 @@ exports[`VCheckbox.ts should use custom icons 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -108,13 +120,12 @@ exports[`VCheckbox.ts should use custom icons 2`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -124,11 +135,8 @@ exports[`VCheckbox.ts should use custom icons 2`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -139,13 +147,12 @@ exports[`VCheckbox.ts should use custom icons 3`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -155,11 +162,8 @@ exports[`VCheckbox.ts should use custom icons 3`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

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

@@ -150,8 +150,8 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -299,8 +299,8 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -500,8 +500,8 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -612,8 +612,8 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -773,8 +773,8 @@ exports[`VColorPicker.ts should render color picker 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -934,8 +934,8 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -1095,8 +1095,8 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -1256,8 +1256,8 @@ exports[`VColorPicker.ts should show swatches 1`] = `
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>
@@ -2235,8 +2235,8 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
               type="button"
       >
         <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </i>
         </span>

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap

@@ -50,8 +50,8 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
           type="button"
   >
     <span class="v-btn__content">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
       >
       </i>
     </span>
@@ -109,8 +109,8 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
           type="button"
   >
     <span class="v-btn__content">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
       >
       </i>
     </span>
@@ -132,8 +132,8 @@ exports[`VColorPickerEdit.ts should change mode 3`] = `
           type="button"
   >
     <span class="v-btn__content">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
       >
       </i>
     </span>
@@ -191,8 +191,8 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
           type="button"
   >
     <span class="v-btn__content">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
       >
       </i>
     </span>
@@ -304,8 +304,8 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
           disabled
   >
     <span class="v-btn__content">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
       >
       </i>
     </span>