vuetify 2.0.19 → 2.1.0

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

@@ -27,7 +27,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -44,7 +44,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -60,7 +60,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -76,7 +76,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -92,7 +92,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
   </tr>
@@ -126,7 +126,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -143,7 +143,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -159,7 +159,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -175,7 +175,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -191,7 +191,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span class="v-data-table-header__sort-badge">
         1
@@ -231,7 +231,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span>
         group
@@ -251,7 +251,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span>
         group
@@ -270,7 +270,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span>
         group
@@ -289,7 +289,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span>
         group
@@ -308,7 +308,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
       <span>
         group
@@ -345,7 +345,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -362,7 +362,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -378,7 +378,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -394,7 +394,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -410,7 +410,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
   </tr>
@@ -444,7 +444,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -461,7 +461,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -477,7 +477,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -493,7 +493,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
     <th role="columnheader"
@@ -509,7 +509,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
          class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
          style="font-size: 18px;"
       >
-        $vuetify.icons.sort
+        $sort
       </i>
     </th>
   </tr>
@@ -548,7 +548,7 @@ exports[`VDataTableHeader.ts mobile should render 1`] = `
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>
@@ -580,7 +580,7 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
             <i aria-hidden="true"
                class="v-icon notranslate material-icons theme--light"
             >
-              $vuetify.icons.checkboxOff
+              $checkboxOff
             </i>
           </div>
         </div>
@@ -611,7 +611,7 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>
@@ -660,7 +660,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                            class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
                            style="font-size: 18px;"
                         >
-                          $vuetify.icons.sort
+                          $sort
                         </i>
                       </div>
                     </span>
@@ -676,7 +676,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>
@@ -728,7 +728,7 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>
@@ -777,7 +777,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                            class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
                            style="font-size: 18px;"
                         >
-                          $vuetify.icons.sort
+                          $sort
                         </i>
                       </div>
                     </span>
@@ -793,7 +793,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>
@@ -842,7 +842,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                            class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
                            style="font-size: 18px;"
                         >
-                          $vuetify.icons.sort
+                          $sort
                         </i>
                       </div>
                     </span>
@@ -858,7 +858,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                     <i aria-hidden="true"
                        class="v-icon notranslate material-icons theme--light"
                     >
-                      $vuetify.icons.dropdown
+                      $dropdown
                     </i>
                   </div>
                 </div>

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

@@ -8,7 +8,7 @@ exports[`VDataTable/header.ts should generate select 1`] = `
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
     >
-      $vuetify.icons.checkboxOff
+      $checkboxOff
     </i>
   </div>
 </div>
@@ -22,7 +22,7 @@ exports[`VDataTable/header.ts should generate select 2`] = `
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
     >
-      $vuetify.icons.checkboxOn
+      $checkboxOn
     </i>
   </div>
 </div>
@@ -36,7 +36,7 @@ exports[`VDataTable/header.ts should generate select 3`] = `
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
     >
-      $vuetify.icons.checkboxIndeterminate
+      $checkboxIndeterminate
     </i>
   </div>
 </div>

package/src/components/VDataTable/mixins/header.ts

@@ -13,6 +13,7 @@ export interface TableHeader {
   value: string
   align?: 'start' | 'center' | 'end'
   sortable?: boolean
+  filterable?: boolean
   divider?: boolean
   class?: string | string[]
   width?: string | number
@@ -52,7 +53,7 @@ export default mixins<options>().extend({
     },
     sortIcon: {
       type: String,
-      default: '$vuetify.icons.sort',
+      default: '$sort',
     },
     everyItem: Boolean,
     someItems: Boolean,

package/src/components/VDatePicker/VDatePicker.ts

@@ -72,13 +72,14 @@ export default mixins(
     multiple: Boolean,
     nextIcon: {
       type: String,
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     pickerDate: String,
     prevIcon: {
       type: String,
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
+    range: Boolean,
     reactive: Boolean,
     readonly: Boolean,
     scrollable: Boolean,
@@ -120,7 +121,7 @@ export default mixins(
           return this.pickerDate
         }
 
-        const date = (this.multiple ? (this.value as string[])[(this.value as string[]).length - 1] : this.value) ||
+        const date = (this.multiple || this.range ? (this.value as string[])[(this.value as string[]).length - 1] : this.value) ||
           `${now.getFullYear()}-${now.getMonth() + 1}`
         return sanitizeDateString(date as string, this.type === 'date' ? 'month' : 'year')
       })(),
@@ -128,13 +129,16 @@ export default mixins(
   },
 
   computed: {
+    isMultiple (): boolean {
+      return this.multiple || this.range
+    },
     lastValue (): string | null {
-      return this.multiple ? (this.value as string[])[(this.value as string[]).length - 1] : (this.value as string | null)
+      return this.isMultiple ? (this.value as string[])[(this.value as string[]).length - 1] : (this.value as string | null)
     },
     selectedMonths (): string | string[] | undefined {
       if (!this.value || !this.value.length || this.type === 'month') {
         return this.value
-      } else if (this.multiple) {
+      } else if (this.isMultiple) {
         return (this.value as string[]).map(val => val.substr(0, 7))
       } else {
         return (this.value as string).substr(0, 7)
@@ -173,7 +177,8 @@ export default mixins(
     formatters (): Formatters {
       return {
         year: this.yearFormat || createNativeLocaleFormatter(this.currentLocale, { year: 'numeric', timeZone: 'UTC' }, { length: 4 }),
-        titleDate: this.titleDateFormat || (this.multiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter),
+        titleDate: this.titleDateFormat ||
+          (this.isMultiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter),
       }
     },
     defaultTitleMultipleDateFormatter (): DatePickerMultipleFormatter {
@@ -230,9 +235,9 @@ export default mixins(
       this.checkMultipleProp()
       this.setInputDate()
 
-      if (!this.multiple && this.value && !this.pickerDate) {
+      if (!this.isMultiple && this.value && !this.pickerDate) {
         this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
-      } else if (this.multiple && (this.value as string[]).length && !(oldValue as string[]).length && !this.pickerDate) {
+      } else if (this.isMultiple && (this.value as string[]).length && !(oldValue as string[]).length && !this.pickerDate) {
         this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
       }
     },
@@ -240,10 +245,10 @@ export default mixins(
       this.activePicker = type.toUpperCase()
 
       if (this.value && this.value.length) {
-        const output = (this.multiple ? (this.value as string[]) : [this.value as string])
+        const output = (this.isMultiple ? (this.value as string[]) : [this.value as string])
           .map((val: string) => sanitizeDateString(val, type))
           .filter(this.isDateAllowed)
-        this.$emit('input', this.multiple ? output : output[0])
+        this.$emit('input', this.isMultiple ? output : output[0])
       }
     },
   },
@@ -259,6 +264,13 @@ export default mixins(
 
   methods: {
     emitInput (newInput: string) {
+      if (this.range && this.value) {
+        this.value.length === 2
+          ? this.$emit('input', [newInput])
+          : this.$emit('input', [...this.value, newInput])
+        return
+      }
+
       const output = this.multiple
         ? (
           (this.value as string[]).indexOf(newInput) === -1
@@ -273,9 +285,9 @@ export default mixins(
     checkMultipleProp () {
       if (this.value == null) return
       const valueType = this.value.constructor.name
-      const expected = this.multiple ? 'Array' : 'String'
+      const expected = this.isMultiple ? 'Array' : 'String'
       if (valueType !== expected) {
-        consoleWarn(`Value must be ${this.multiple ? 'an' : 'a'} ${expected}, got ${valueType}`, this)
+        consoleWarn(`Value must be ${this.isMultiple ? 'an' : 'a'} ${expected}, got ${valueType}`, this)
       }
     },
     isDateAllowed (value: string) {
@@ -289,7 +301,7 @@ export default mixins(
         this.tableDate = `${value}-${pad((this.tableMonth || 0) + 1)}`
       }
       this.activePicker = 'MONTH'
-      if (this.reactive && !this.readonly && !this.multiple && this.isDateAllowed(this.inputDate)) {
+      if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
         this.$emit('input', this.inputDate)
       }
     },
@@ -303,7 +315,7 @@ export default mixins(
 
         this.tableDate = value
         this.activePicker = 'DATE'
-        if (this.reactive && !this.readonly && !this.multiple && this.isDateAllowed(this.inputDate)) {
+        if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
           this.$emit('input', this.inputDate)
         }
       } else {
@@ -325,7 +337,7 @@ export default mixins(
           selectingYear: this.activePicker === 'YEAR',
           year: this.formatters.year(this.value ? `${this.inputYear}` : this.tableDate),
           yearIcon: this.yearIcon,
-          value: this.multiple ? (this.value as string[])[0] : this.value,
+          value: this.isMultiple ? (this.value as string[])[0] : this.value,
         },
         slot: 'title',
         on: {
@@ -356,6 +368,18 @@ export default mixins(
       })
     },
     genDateTable () {
+      let proxyValue = this.value
+
+      if (this.range && this.value && this.value.length === 2) {
+        proxyValue = []
+        const [rangeFrom, rangeTo] = [this.value[0], this.value[1]].map(x => new Date(`${x}T00:00:00+00:00`)).sort((a, b) => a > b ? 1 : -1)
+        const diffDays = Math.ceil((rangeTo.getTime() - rangeFrom.getTime()) / (1000 * 60 * 60 * 24))
+        for (let i = 0; i <= diffDays; i++) {
+          const current = new Date(+rangeFrom + i * 864e5)
+          proxyValue.push(current.toISOString().substring(0, 10))
+        }
+      }
+
       return this.$createElement(VDatePickerDateTable, {
         props: {
           allowedDates: this.allowedDates,
@@ -375,7 +399,7 @@ export default mixins(
           scrollable: this.scrollable,
           showWeek: this.showWeek,
           tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
-          value: this.value,
+          value: proxyValue,
           weekdayFormat: this.weekdayFormat,
         },
         ref: 'table',

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -33,11 +33,11 @@ export default mixins(
     max: String,
     nextIcon: {
       type: String,
-      default: '$vuetify.icons.next',
+      default: '$next',
     },
     prevIcon: {
       type: String,
-      default: '$vuetify.icons.prev',
+      default: '$prev',
     },
     readonly: Boolean,
     value: {

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

@@ -633,4 +633,24 @@ describe('VDatePicker.ts', () => { // eslint-disable-line max-statements
     wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('dblclick')
     expect(dblclick).toHaveBeenCalledWith('2013-05-05')
   })
+
+  it('should handle date range select', async () => {
+    const cb = jest.fn()
+    const wrapper = mountFunction({
+      propsData: {
+        range: true,
+        value: ['2019-01-01', '2019-01-02'],
+      },
+    })
+
+    wrapper.vm.$on('input', cb)
+    wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click')
+    expect(cb.mock.calls[0][0]).toEqual(
+      expect.arrayContaining(['2019-01-06'])
+    )
+
+    wrapper.findAll('.v-date-picker-table--date tbody tr+tr td button').at(2).trigger('click')
+    expect(cb.mock.calls[0][0][0]).toBe('2019-01-06')
+    expect(cb.mock.calls[1][0][0]).toBe('2019-01-08')
+  })
 })

package/src/components/VDialog/VDialog.sass

@@ -43,14 +43,11 @@
   z-index: 6
   outline: none
 
-.v-dialog__activator
-  cursor: pointer
-
-  *
-    cursor: pointer
-
 .v-dialog__container
-  display: inline
+  display: none
+
+  &--attached
+    display: inline
 
 // Modifier
 .v-dialog--animated

package/src/components/VDialog/VDialog.ts

@@ -314,6 +314,12 @@ export default baseMixins.extend({
 
     return h('div', {
       staticClass: 'v-dialog__container',
+      class: {
+        'v-dialog__container--attached':
+          this.attach === '' ||
+          this.attach === true ||
+          this.attach === 'attach',
+      },
       attrs: { role: 'dialog' },
     }, children)
   },

package/src/components/VDialog/_variables.scss

@@ -1 +1 @@
-$dialog-border-radius: 4px !default;
+$dialog-border-radius: $border-radius-root !default;

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -34,7 +34,7 @@ export default baseMixins.extend<options>().extend({
     disableIconRotate: Boolean,
     expandIcon: {
       type: String,
-      default: '$vuetify.icons.expand',
+      default: '$expand',
     },
     hideActions: Boolean,
     ripple: {

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

@@ -26,7 +26,7 @@ exports[`VExpansionPanel should hide actions and match snapshot 2`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $vuetify.icons.expand
+        $expand
       </i>
     </div>
   </button>

package/src/components/VExpansionPanel/_variables.scss

@@ -1,4 +1,4 @@
-$expansion-panel-border-radius: 4px !default;
+$expansion-panel-border-radius: $border-radius-root !default;
 $expansion-panel-active-margin: 16px !default;
 $expansion-panel-header-font-size: 0.9375rem !default;
 $expansion-panel-header-min-height: 48px !default;

package/src/components/VFileInput/VFileInput.sass

@@ -35,3 +35,7 @@
 .v-file-input.v-text-field--outlined
   .v-text-field__slot
     padding: 6px 0
+
+  &.v-input--dense
+    .v-text-field__slot
+      padding: 3px 0

package/src/components/VFileInput/VFileInput.ts

@@ -39,7 +39,7 @@ export default VTextField.extend({
     placeholder: String,
     prependIcon: {
       type: String,
-      default: '$vuetify.icons.file',
+      default: '$file',
     },
     readonly: {
       type: Boolean,