vuetify 2.1.0-beta.1 → 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

@@ -53,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,12 +72,12 @@ 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,

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/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/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/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,

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

@@ -7,7 +7,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -41,7 +41,7 @@ exports[`VFileInput.ts should display file size 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -60,7 +60,7 @@ exports[`VFileInput.ts should display file size 1`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -85,7 +85,7 @@ exports[`VFileInput.ts should display file size 2`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -104,7 +104,7 @@ exports[`VFileInput.ts should display file size 2`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -129,7 +129,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -148,7 +148,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -176,7 +176,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -195,7 +195,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -223,7 +223,7 @@ exports[`VFileInput.ts should render 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -265,7 +265,7 @@ exports[`VFileInput.ts should render chips 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -288,7 +288,7 @@ exports[`VFileInput.ts should render chips 1`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -313,7 +313,7 @@ exports[`VFileInput.ts should render counter 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -332,7 +332,7 @@ exports[`VFileInput.ts should render counter 1`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>
@@ -360,7 +360,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
       <i role="button"
          class="v-icon notranslate v-icon--link material-icons theme--light"
       >
-        $vuetify.icons.file
+        $file
       </i>
     </div>
   </div>
@@ -383,7 +383,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
           <i role="button"
              class="v-icon notranslate v-icon--link material-icons theme--light"
           >
-            $vuetify.icons.clear
+            $clear
           </i>
         </div>
       </div>

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

@@ -178,15 +178,15 @@ describe('VIcon', () => {
       }
     })
 
-    it('should render MD left icon from $vuetify.icons.checkboxOn', () => {
-      const wrapper = mountFunction({}, '$vuetify.icons.checkboxOn')
+    it('should render MD left icon from $checkboxOn', () => {
+      const wrapper = mountFunction({}, '$checkboxOn')
 
       expect(wrapper.text()).toBe('check_box')
       expect(wrapper.element.className).toBe('v-icon notranslate material-icons theme--light')
     })
 
-    it('should render MD left icon from $vuetify.icons.prev', () => {
-      const wrapper = mountFunction({}, '$vuetify.icons.prev')
+    it('should render MD left icon from $prev', () => {
+      const wrapper = mountFunction({}, '$prev')
 
       expect(wrapper.text()).toBe('chevron_left')
       expect(wrapper.element.className).toBe('v-icon notranslate material-icons theme--light')
@@ -231,7 +231,7 @@ describe('VIcon', () => {
     })
 
     it('should render component', () => {
-      const wrapper = mountFunction({}, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({}, '$testIcon')
 
       expect(wrapper.text()).toBe('test icon')
       expect(wrapper.element.className).toBe('v-icon notranslate test-component v-icon--is-component theme--light')
@@ -239,14 +239,14 @@ describe('VIcon', () => {
     })
 
     it('should render a colored component', () => {
-      const wrapper = mountFunction({ props: { color: 'green lighten-1' } }, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({ props: { color: 'green lighten-1' } }, '$testIcon')
 
       expect(wrapper.element.classList).toContain('green--text')
       expect(wrapper.element.classList).toContain('text--lighten-1')
     })
 
     it('should render a disabled component', () => {
-      const wrapper = mountFunction({ props: { disabled: true } }, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({ props: { disabled: true } }, '$testIcon')
 
       expect(wrapper.element.classList).toContain('v-icon--disabled')
     })
@@ -254,7 +254,7 @@ describe('VIcon', () => {
     it('should set font size from helper prop', async () => {
       const iconFactory = size => mountFunction({
         props: { [size]: true },
-      }, '$vuetify.icons.testIcon')
+      }, '$testIcon')
 
       const small = iconFactory('small')
       expect(small.html()).toMatchSnapshot()
@@ -270,20 +270,20 @@ describe('VIcon', () => {
     })
 
     it('should render a left aligned component', () => {
-      const wrapper = mountFunction({ props: { left: true } }, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({ props: { left: true } }, '$testIcon')
 
       expect(wrapper.element.classList).toContain('v-icon--left')
     })
 
     it('should render a right aligned component', () => {
-      const wrapper = mountFunction({ props: { right: true } }, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({ props: { right: true } }, '$testIcon')
 
       expect(wrapper.element.classList).toContain('v-icon--right')
     })
 
     it('should be an accessible link', () => {
       const clickHandler = jest.fn()
-      const wrapper = mountFunction({ on: { click: clickHandler } }, '$vuetify.icons.testIcon')
+      const wrapper = mountFunction({ on: { click: clickHandler } }, '$testIcon')
       wrapper.trigger('click')
 
       expect(wrapper.element.classList).toContain('v-icon--link')

package/src/components/VInput/VInput.sass

@@ -100,6 +100,9 @@
     transition: $primary-transition
     width: 100%
 
+  &--dense > .v-input__control > .v-input__slot
+    margin-bottom: 4px
+
   &--is-disabled:not(.v-input--is-readonly)
     pointer-events: none
 

package/src/components/VInput/VInput.ts

@@ -228,6 +228,9 @@ export default baseMixins.extend<options>().extend({
           light: this.light,
           value: (this.hasMessages || this.hasHint) ? messages : [],
         },
+        attrs: {
+          role: this.hasMessages ? 'alert' : null,
+        },
       })
     },
     genSlot (