vuetify 2.3.11 → 2.3.15

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

@@ -397,160 +397,6 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
 </div>
 `;
 
-exports[`VColorPicker.ts should not hide alpha if given initial value of null 1`] = `
-<div class="v-color-picker v-sheet theme--light theme--light"
-     style="max-width: 300px;"
->
-  <div class="v-color-picker__canvas"
-       style="width: 300px; height: 150px;"
-  >
-    <canvas width="300"
-            height="150"
-    >
-    </canvas>
-    <div class="v-color-picker__canvas-dot"
-         style="width: 10px; height: 10px; transform: translate(295px, -5px);"
-    >
-    </div>
-  </div>
-  <div class="v-color-picker__controls">
-    <div class="v-color-picker__preview">
-      <div class="v-color-picker__dot">
-        <div style="background: rgb(255, 0, 0);">
-        </div>
-      </div>
-      <div class="v-color-picker__sliders">
-        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-slider v-slider--horizontal theme--light">
-                <input value="0"
-                       id="input-109"
-                       readonly="readonly"
-                       tabindex="-1"
-                >
-                <div class="v-slider__track-container">
-                  <div class="v-slider__track-background primary lighten-3"
-                       style="right: 0px;"
-                  >
-                  </div>
-                  <div class="v-slider__track-fill primary"
-                       style="left: 0px; width: 0%;"
-                  >
-                  </div>
-                </div>
-                <div role="slider"
-                     tabindex="0"
-                     aria-valuemin="0"
-                     aria-valuemax="360"
-                     aria-valuenow="0"
-                     aria-readonly="false"
-                     aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 0%;"
-                >
-                  <div class="v-slider__thumb grey lighten-2">
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-slider v-slider--horizontal theme--light">
-                <input value="1"
-                       id="input-110"
-                       readonly="readonly"
-                       tabindex="-1"
-                >
-                <div class="v-slider__track-container">
-                  <div class="v-slider__track-background primary lighten-3"
-                       style="right: 0px;"
-                  >
-                  </div>
-                  <div class="v-slider__track-fill primary"
-                       style="left: 0px; width: 100%;"
-                  >
-                  </div>
-                </div>
-                <div role="slider"
-                     tabindex="0"
-                     aria-valuemin="0"
-                     aria-valuemax="1"
-                     aria-valuenow="1"
-                     aria-readonly="false"
-                     aria-orientation="horizontal"
-                     class="v-slider__thumb-container grey--text text--lighten-2"
-                     style="left: 100%;"
-                >
-                  <div class="v-slider__thumb grey lighten-2">
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-color-picker__edit">
-      <div class="v-color-picker__input">
-        <input type="number"
-               min="0"
-               max="255"
-               step="1"
-        >
-        <span>
-          R
-        </span>
-      </div>
-      <div class="v-color-picker__input">
-        <input type="number"
-               min="0"
-               max="255"
-               step="1"
-        >
-        <span>
-          G
-        </span>
-      </div>
-      <div class="v-color-picker__input">
-        <input type="number"
-               min="0"
-               max="255"
-               step="1"
-        >
-        <span>
-          B
-        </span>
-      </div>
-      <div class="v-color-picker__input">
-        <input type="number"
-               min="0"
-               max="1"
-               step="0.01"
-        >
-        <span>
-          A
-        </span>
-      </div>
-      <button type="button"
-              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
-          >
-            $unfold
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`VColorPicker.ts should not show alpha controls if given hex value without alpha 1`] = `
 <div class="v-color-picker v-sheet theme--light theme--light"
      style="max-width: 300px;"

package/src/components/VCombobox/VCombobox.ts

@@ -230,7 +230,7 @@ export default VAutocomplete.extend({
     onPaste (event: ClipboardEvent) {
       if (!this.multiple || this.searchIsDirty) return
 
-      const pastedItemText = event.clipboardData!.getData('text/vnd.vuetify.autocomplete.item+plain')
+      const pastedItemText = event.clipboardData?.getData('text/vnd.vuetify.autocomplete.item+plain')
       if (pastedItemText && this.findExistingIndex(pastedItemText as any) === -1) {
         event.preventDefault()
         VSelect.options.methods.selectItem.call(this, pastedItemText as any)

package/src/components/VData/VData.ts

@@ -172,7 +172,7 @@ export default Vue.extend({
       return this.isGrouped ? this.groupItems(this.computedItems) : null
     },
     scopedProps (): DataScopeProps {
-      const props = {
+      return {
         sort: this.sort,
         sortArray: this.sortArray,
         group: this.group,
@@ -183,8 +183,6 @@ export default Vue.extend({
         groupedItems: this.groupedItems,
         originalItemsLength: this.items.length,
       }
-
-      return props
     },
     computedOptions (): DataOptions {
       return { ...this.options } as DataOptions

package/src/components/VDataIterator/VDataIterator.ts

@@ -216,7 +216,7 @@ export default mixins(
     },
     genEmpty (originalItemsLength: number, filteredItemsLength: number) {
       if (originalItemsLength === 0 && this.loading) {
-        const loading = this.$slots['loading'] || this.$vuetify.lang.t(this.loadingText)
+        const loading = this.$slots.loading || this.$vuetify.lang.t(this.loadingText)
         return this.genEmptyWrapper(loading)
       } else if (originalItemsLength === 0) {
         const noData = this.$slots['no-data'] || this.$vuetify.lang.t(this.noDataText)

package/src/components/VDataTable/VDataTable.sass

@@ -21,20 +21,21 @@
 .v-data-table
   border-radius: $data-table-border-radius
 
-  tbody
-    tr
-      &.v-data-table__expanded
-        border-bottom: 0
+  > .v-data-table__wrapper
+    tbody
+      tr
+        &.v-data-table__expanded
+          border-bottom: 0
 
-      &.v-data-table__expanded__content
-        box-shadow: $data-table-expanded-content-box-shadow
+        &.v-data-table__expanded__content
+          box-shadow: $data-table-expanded-content-box-shadow
 
-  .v-data-table__mobile-table-row
-    display: initial
+    .v-data-table__mobile-table-row
+      display: initial
 
-  .v-data-table__mobile-row
-    height: initial
-    min-height: $data-table-mobile-row-min-height
+    .v-data-table__mobile-row
+      height: initial
+      min-height: $data-table-mobile-row-min-height
 
 .v-data-table__empty-wrapper
   text-align: center
@@ -46,6 +47,12 @@
 
   &__header
     font-weight: $data-table-mobile-row-header-font-weight
+    
+    +ltr()
+      padding-right: 16px
+
+    +rtl()
+      padding-left: 16px
 
   &__cell
     +ltr()

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -79,7 +79,7 @@ export default mixins(header).extend({
       )
 
       if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
-        data.on['click'] = () => this.$emit('sort', header.value)
+        data.on.click = () => this.$emit('sort', header.value)
 
         const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
         const beingSorted = sortIndex >= 0

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

@@ -965,6 +965,8 @@ describe('VDataTable.ts', () => {
 
     wrapper.find('th').trigger('click')
     await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should hide group button when column is not groupable', async () => {

package/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts

@@ -39,7 +39,7 @@ describe('VDataTableHeader.ts', () => {
   let mountFunction: (options?: MountOptions<Instance>, isMobile?: boolean) => Wrapper<Instance>
 
   ;[false, true].forEach(isMobile => {
-    describe(isMobile ? 'mobile' : 'desktop', () => { // eslint-disable-line jest/valid-describe
+    describe(isMobile ? 'mobile' : 'desktop', () => { // eslint-disable-line jest/valid-title
       beforeEach(() => {
         document.body.setAttribute('data-app', 'true')
 

package/src/components/VDataTable/__tests__/VEditDialog.spec.ts

@@ -40,7 +40,7 @@ describe('VEditDialog.ts', () => {
   it('should render custom button texts', () => {
     const wrapper = mountFunction({
       propsData: {
-        cancelText: 'I don\'t want to modify that!',
+        cancelText: `I don't want to modify that!`,
         saveText: 'Save it!',
       },
     })

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

@@ -10842,6 +10842,244 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
 </div>
 `;
 
+exports[`VDataTable.ts should respect mustSort property on options 1`] = `
+<div class="v-data-table theme--light">
+  <div class="v-data-table__wrapper">
+    <table>
+      <colgroup>
+        <col class>
+      </colgroup>
+      <thead class="v-data-table-header v-data-table-header-mobile">
+        <tr>
+          <th>
+            <div class="v-data-table-header-mobile__wrapper">
+              <div class="v-input v-input--hide-details theme--light v-text-field v-select">
+                <div class="v-input__control">
+                  <div role="button"
+                       aria-haspopup="listbox"
+                       aria-expanded="false"
+                       aria-owns="list-700"
+                       class="v-input__slot"
+                  >
+                    <div class="v-select__slot">
+                      <label for="input-700"
+                             class="v-label theme--light"
+                             style="left: 0px; position: absolute;"
+                      >
+                        Sort by
+                      </label>
+                      <div class="v-select__selections">
+                        <input id="input-700"
+                               readonly="readonly"
+                               type="text"
+                               aria-readonly="false"
+                               autocomplete="off"
+                        >
+                      </div>
+                      <div class="v-input__append-inner">
+                        <div class="v-input__icon v-input__icon--append">
+                          <i aria-hidden="true"
+                             class="v-icon notranslate material-icons theme--light"
+                          >
+                            $dropdown
+                          </i>
+                        </div>
+                      </div>
+                      <input type="hidden">
+                    </div>
+                    <div class="v-menu">
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Frozen Yogurt
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Ice cream sandwich
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Eclair
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Cupcake
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Gingerbread
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Jelly bean
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Lollipop
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Honeycomb
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              Donut
+            </div>
+          </td>
+        </tr>
+        <tr class="v-data-table__mobile-table-row">
+          <td class="v-data-table__mobile-row">
+            <div class="v-data-table__mobile-row__header">
+              Dessert (100g serving)
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              KitKat
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="v-data-footer">
+    <div class="v-data-footer__select">
+      Rows per page:
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+        <div class="v-input__control">
+          <div role="button"
+               aria-haspopup="listbox"
+               aria-expanded="false"
+               aria-owns="list-704"
+               class="v-input__slot"
+          >
+            <div class="v-select__slot">
+              <div class="v-select__selections">
+                <div class="v-select__selection v-select__selection--comma">
+                  10
+                </div>
+                <input aria-label="$vuetify.dataTable.itemsPerPageText"
+                       id="input-704"
+                       readonly="readonly"
+                       type="text"
+                       aria-readonly="false"
+                       autocomplete="off"
+                >
+              </div>
+              <div class="v-input__append-inner">
+                <div class="v-input__icon v-input__icon--append">
+                  <i aria-hidden="true"
+                     class="v-icon notranslate material-icons theme--light"
+                  >
+                    $dropdown
+                  </i>
+                </div>
+              </div>
+              <input type="hidden"
+                     value="10"
+              >
+            </div>
+            <div class="v-menu">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-data-footer__pagination">
+      1-10 of 10
+    </div>
+    <div class="v-data-footer__icons-before">
+      <button type="button"
+              disabled="disabled"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              aria-label="Previous page"
+      >
+        <span class="v-btn__content">
+          <i aria-hidden="true"
+             class="v-icon notranslate material-icons theme--light"
+          >
+            $prev
+          </i>
+        </span>
+      </button>
+    </div>
+    <div class="v-data-footer__icons-after">
+      <button type="button"
+              disabled="disabled"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              aria-label="Next page"
+      >
+        <span class="v-btn__content">
+          <i aria-hidden="true"
+             class="v-icon notranslate material-icons theme--light"
+          >
+            $next
+          </i>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VDataTable.ts should search group-by column 1`] = `
 <div class="v-data-table theme--light">
   <div class="v-data-table__wrapper">

package/src/components/VDatePicker/VDatePicker.ts

@@ -269,9 +269,10 @@ export default mixins(
       this.checkMultipleProp()
       this.setInputDate()
 
-      if (!this.isMultiple && this.value && !this.pickerDate) {
-        this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
-      } else if (this.isMultiple && this.multipleValue.length && (!oldValue || !(oldValue as string[]).length) && !this.pickerDate) {
+      if (
+        (!this.isMultiple && this.value && !this.pickerDate) ||
+        (this.isMultiple && this.multipleValue.length && (!oldValue || !oldValue.length) && !this.pickerDate)
+      ) {
         this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
       }
     },

package/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts

@@ -51,11 +51,13 @@ describe('VDatePicker.ts', () => { // eslint-disable-line max-statements
   })
 
   it('should work with year < 1000', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        value: '0005-11-01',
-      },
-    })
+    expect(() => {
+      mountFunction({
+        propsData: {
+          value: '0005-11-01',
+        },
+      })
+    }).not.toThrow()
   })
 
   it('should display the correct year when model is null', () => {

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

@@ -159,6 +159,7 @@ describe('VDialog.ts', () => {
         disabled: true,
       },
       scopedSlots: {
+        // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
           return this.$createElement('div', {
             staticClass: 'activator',
@@ -237,6 +238,7 @@ describe('VDialog.ts', () => {
         disabled: true,
       },
       scopedSlots: {
+        // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
           return this.$createElement('div', {
             staticClass: 'activator',
@@ -258,6 +260,7 @@ describe('VDialog.ts', () => {
     const clickOutside = jest.fn()
     const wrapper = mountFunction({
       scopedSlots: {
+        // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
           return this.$createElement('div', {
             staticClass: 'activator',
@@ -326,6 +329,7 @@ describe('VDialog.ts', () => {
         hideOverlay: true,
       },
       scopedSlots: {
+        // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
           return this.$createElement('div', {
             staticClass: 'activator',

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

@@ -74,12 +74,12 @@ describe('VExpansionPanel', () => {
 
   // Ensures smooth transition when using the lazy prop
   // TODO: move to PanelContent tests
-  /* it('should boot expansion panel item', async () => {
+  it.skip('should boot expansion panel item', async () => {
     const change = jest.fn()
     const wrapper = mountFunction({
       propsData: {
-        lazy: true
-      }
+        lazy: true,
+      },
     })
 
     wrapper.vm.$on('change', change)
@@ -93,7 +93,7 @@ describe('VExpansionPanel', () => {
     await wrapper.vm.$nextTick()
 
     expect(change).toHaveBeenCalled()
-  }) */
+  })
 
   it('should hide actions and match snapshot', async () => {
     const wrapper = mountFunction({