Merge branch 'master' into dev

Author: johnleider

MIGRATION.md

@@ -202,7 +202,7 @@ const opts = {
 }
 ```
 
-* Now defaults to use [mdi](https://materialdesignicons.com/) icons. For information on how to install please navigate [here](https://vuetifyjs.com/customization/icons#install-material-design-icons).
+* Now defaults to use [mdi](https://materialdesignicons.com/) icons. For information on how to install please navigate [here](https://vuetifyjs.com/customization/icons#install-material-design-icons)
 * Is now located under the **icons** property of the Vuetify options
 
 If you want to use a custom iconfont, you must set it up in the initial Vuetify options now.
@@ -330,11 +330,11 @@ All event names has been changed from camelCase to kebab-case:
 - `update:returnValue` → `update:return-value`
 
 ### Activators
-* Components with activators, `v-tooltip`, `v-menu`, `v-dialog`, `v-list-group` and `v-bottom-sheet` must now be bound using the new [v-slot](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) syntax.
+* Components with activators, `v-tooltip`, `v-menu`, `v-dialog`, `v-list-group` and `v-bottom-sheet` must now be bound using the new [v-slot](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) syntax
   * Requires [email protected]
-* We understand this is considerably more verbose than the v1.5 counterpart. We are still exploring ways to support the new **v-slot** in a more concise manner.
-  * You can find more information on the official Vue documentation for [Destructuring Slot Props](https://vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props).
-  * You can find more information on the official Vue documentation for [v-slot](https://vuejs.org/v2/guide/components-slots.html#Named-Slots).
+* We understand this is considerably more verbose than the v1.5 counterpart. We are still exploring ways to support the new **v-slot** in a more concise manner
+  * You can find more information on the official Vue documentation for [Destructuring Slot Props](https://vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props)
+  * You can find more information on the official Vue documentation for [v-slot](https://vuejs.org/v2/guide/components-slots.html#Named-Slots)
 * The upside to this change is it is easier to support nested activators and provide proper a11y support
 
 #### Regular activator
@@ -542,29 +542,29 @@ _Developer notes: Was never explicitly listed in API_
 Data table (and iterator) have been rewritten from the ground up to be both easier to use and to allow for more flexibilty in more advanced use cases. This has resulted in a number of breaking changes. Some of these are shared between both components while some are unique to each.
 
 #### Shared
-* **disable-initial-sort** has been removed. Neither component initially sorts data anymore. Use **sort-by** (or **options**) prop to sort.
-* **filter** prop has been removed. Instead use **custom-filter**. This was done in an effort to make custom filtering less confusing.
+* **disable-initial-sort** has been removed. Neither component initially sorts data anymore. Use **sort-by** (or **options**) prop to sort
+* **filter** prop has been removed. Instead use **custom-filter**. This was done in an effort to make custom filtering less confusing
   * The signature for **custom-filter** has changed from `(items: object[], search: string, filter: Filter): object[]` to `(value: any, search: string, item: any) => boolean`
-* **pagination** prop has been removed. Instead use the separate props such as **page**, **sort-by**, etc. If you want to provide a single object you can use the new **options** prop instead. **NOTE**: The **options** prop has a different object structure than **pagination**. Check API docs for details.
+* **pagination** prop has been removed. Instead use the separate props such as **page**, **sort-by**, etc. If you want to provide a single object you can use the new **options** prop instead. **NOTE**: The **options** prop has a different object structure than **pagination**. Check API docs for details
 * **total-items** prop has been renamed to **server-items-length**
 * **hide-actions** prop has been renamed to **hide-default-footer**. Also it no longer changes the visible items per page
 * Props related to the default footer have been move to the **footer-props** prop. These are:
   * **prev-icon**
   * **next-icon**
   * **rows-per-page-items** → **items-per-page-options**
   * **rows-per-page-text** → **items-per-page-text**
-* The **expand** prop has been removed.
+* The **expand** prop has been removed
 
 #### `v-data-iterator`
 * The **content-tag**, **content-props**, **content-class** props have been removed. Instead simply use the default scoped slot to implement your intended markup.
 
 #### `v-data-table`
 * **items** slot has been renamed to **item**
 * **headers** slot renamed to **header**
-* **item** slot (and **header**) now require you to define a `<tr>` element. Previously this was optional.
-* **expand** slot renamed to **expanded-item**. It no longer includes an expansion transition, and the slot is inside the `<tr>` element so that you can define your own `<td>` columns. To get back to a similar look as in 1.5, you will need a `<td>` with *colspan* equal to the number of columns in your header.
+* **item** slot (and **header**) now require you to define a `<tr>` element. Previously this was optional
+* **expand** slot renamed to **expanded-item**. It no longer includes an expansion transition, and the slot is inside the `<tr>` element so that you can define your own `<td>` columns. To get back to a similar look as in 1.5, you will need a `<td>` with *colspan* equal to the number of columns in your header
 * **hide-header** has been renamed to **hide-default-header**
-* **select-all** has been renamed to **show-select**. This will also render a checkbox on each item row as long as you are not defining a slot that overrides the internal row rendering (such as **item** or **body**).
+* **select-all** has been renamed to **show-select**. This will also render a checkbox on each item row as long as you are not defining a slot that overrides the internal row rendering (such as **item** or **body**)
 * Props related to the default header have been moved to the **header-props** prop. These are:
   * **sort-icon**
 
@@ -777,7 +777,7 @@ _Developer notes: The tabs-items component does not have to be provided and is o
 ```
 
 #### `v-toolbar`
-* All existing scrolling techniques and `app` functionality has been deprecated and moved to `v-app-bar`.
+* All existing scrolling techniques and `app` functionality has been deprecated and moved to `v-app-bar`
 
 <h2 id="i-need-help">🆘 I need help!</h2>
 

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "useWorkspaces": true
 }

package.json

@@ -14,7 +14,7 @@
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
     "start": "lerna run start --scope vuetifyjs.com --stream",
-    "lint": "lerna run lint --parallel",
+    "lint": "lerna run lint --parallel --stream",
     "lint:fix": "lerna run lint:fix --parallel",
     "version": "node scripts/confirm-npm-tag.js",
     "postinstall": "node scripts/post-install.js",

packages/api-generator/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "private": true,
   "description": "",
   "main": "dist/api.js",
   "scripts": {
     "debug": "babel-node inspect src/index.js",
     "build": "node src/index.js",
-    "lint": "eslint --ext .js src",
+    "lint": "eslint --ext .js src -f codeframe --max-warnings 0",
     "lint:fix": "yarn lint --fix"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "deepmerge": "^4.0.0",
     "vue": "^2.6.10",
-    "vuetify": "^2.1.9"
+    "vuetify": "^2.1.10"
   },
   "devDependencies": {
     "@babel/node": "^7.5.5",

packages/api-generator/src/maps/v-data-table.js

@@ -36,6 +36,17 @@ const DataTableHeaderScopedProps = {
   },
 }
 
+const DataTableFooterScopedProps = {
+  props: {
+    options: DataOptions,
+    pagination: DataDefaultScopedSlotProps.pagination,
+    itemsPerPageText: 'string',
+  },
+  on: '{}',
+  headers: 'TableHeader[]',
+  widths: '[]',
+}
+
 const DataTableHeaderColumnScopedProps = {
   header: 'TableHeader',
 }
@@ -85,7 +96,7 @@ const DataTableSlots = [
   { name: 'body.append', props: DataTableBodyScopedProps },
   { name: 'body.prepend', props: DataTableBodyScopedProps },
   { name: 'body', props: DataTableBodyScopedProps },
-  { name: 'footer', props: DataDefaultScopedSlotProps },
+  { name: 'footer', props: DataTableFooterScopedProps },
   { name: 'footer.page-text', props: DataFooterPageTextScopedProps },
   { name: 'header', props: DataTableHeaderScopedProps },
   { name: 'header.data-table-select', props: DataTableHeaderSelectScopedProps },

packages/api-generator/src/maps/v-snackbar.js

@@ -0,0 +1,10 @@
+module.exports = {
+  'v-snackbar': {
+    events: [
+      {
+        name: 'input',
+        value: 'boolean',
+      },
+    ],
+  },
+}

packages/docs/package.json

@@ -3,16 +3,16 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "scripts": {
     "dev": "cross-env node --max_old_space_size=4096 server",
     "start": "cross-env NODE_ENV=production node server",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js --no-progress --hide-modules",
-    "lint": "eslint --ext .js,.vue,.json src -f codeframe",
+    "lint": "eslint --ext .js,.vue,.json src -f codeframe --max-warnings 0",
     "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "@vuetify/api-generator": "^2.1.9",
+    "@vuetify/api-generator": "^2.1.10",
     "babel-polyfill": "^6.26.0",
     "chokidar": "^3.0.2",
     "compression": "^1.7.4",
@@ -39,7 +39,7 @@
     "vue-router": "^3.0.7",
     "vue-server-renderer": "^2.6.10",
     "vuelidate": "^0.7.4",
-    "vuetify": "^2.1.9",
+    "vuetify": "^2.1.10",
     "vuex": "^3.1.1",
     "vuex-pathify": "^1.4.0",
     "vuex-router-sync": "^5.0.0",

packages/docs/src/components/getting-started/Team.vue

@@ -59,6 +59,7 @@
           title: 'core',
           name: 'Andrew Henry',
           github: 'MajesticPotatoe',
+          linkedin: 'andrew-henry-01049830',
           avatar: 'avatarStyle=Transparent&topType=ShortHairShortRound&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=Hoodie&clotheColor=Heather&eyeType=Dizzy&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light',
         },
         {

packages/docs/src/data/pages/getting-started/QuickStart.json

@@ -166,6 +166,11 @@
           "type": "text",
           "lang": "cdnText"
         },
+        {
+          "type": "alert",
+          "lang": "cdnAlert",
+          "value": "info"
+        },
         {
           "type": "markup",
           "value": "html_cdn_quickstart"

packages/docs/src/examples/cards/complex/weather.vue

@@ -1,7 +1,6 @@
 <template>
   <v-card
     class="mx-auto"
-    color="#F9F9F9"
     max-width="400"
   >
     <v-list-item two-line>

packages/docs/src/examples/chips/complex/photos.vue

@@ -1,7 +1,6 @@
 <template>
   <v-card
     class="mx-auto"
-    color="white"
     max-width="500"
   >
     <v-toolbar

packages/docs/src/examples/data-tables/intermediate/expand.vue

@@ -10,7 +10,7 @@
     class="elevation-1"
   >
     <template v-slot:top>
-      <v-toolbar flat color="white">
+      <v-toolbar flat>
         <v-toolbar-title>Expandable Table</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>

packages/docs/src/examples/navigation-drawers/intermediate/combined.vue

@@ -8,7 +8,7 @@
       permanent
       width="100%"
     >
-      <v-row class="fill-height">
+      <v-row class="fill-height" no-gutters>
         <v-navigation-drawer
           dark
           mini-variant

packages/docs/src/examples/selection-controls/playground.vue

@@ -9,23 +9,29 @@
         <v-select v-model="color" :items="colors" label="Color"></v-select>
       </v-col>
       <v-col cols="12">
-        <header>Switches</header>
+        <header>Checkboxes</header>
       </v-col>
       <v-checkbox v-model="loading" class="mx-2" label="Loading"></v-checkbox>
       <v-checkbox v-model="flat" class="mx-2" label="Flat"></v-checkbox>
       <v-checkbox v-model="inset" class="mx-2" label="Inset"></v-checkbox>
       <v-col cols="12">
-        <header>Radios</header>
+        <header>Switches</header>
       </v-col>
       <v-switch v-model="mandatory" class="mx-2" label="Mandatory"></v-switch>
       <v-switch v-model="multiple" class="mx-2" label="Multiple"></v-switch>
       <v-switch v-model="row" class="mx-2" label="Row"></v-switch>
       <v-col cols="12">
-        <header>Checkboxes</header>
+        <header>Radios</header>
       </v-col>
-      <v-switch v-model="indeterminate" class="mx-2" label="Indeterminate"></v-switch>
+      <v-radio-group>
+        <v-radio
+          v-for="n in 3"
+          :key="n"
+          :label="`Radio ${n}`"
+          :value="n"
+        ></v-radio>
+      </v-radio-group>
     </v-row>
-
     <v-switch
       :disabled="disabled"
       :readonly="readonly"
@@ -51,6 +57,7 @@
       <v-radio label="I'm a radio button"></v-radio>
       <v-radio label="I'm a radio button"></v-radio>
     </v-radio-group>
+    <v-switch v-model="indeterminate" class="mx-2" label="Indeterminate"></v-switch>
     <v-checkbox
       :disabled="disabled"
       :readonly="readonly"

packages/docs/src/examples/text-fields/simple/password.vue

@@ -6,7 +6,7 @@
         <v-col cols="12" sm="6">
           <v-text-field
             v-model="password"
-            :append-icon="show1 ? 'visibility' : 'visibility_off'"
+            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.min]"
             :type="show1 ? 'text' : 'password'"
             name="input-10-1"
@@ -19,7 +19,7 @@
 
         <v-col cols="12" sm="6">
           <v-text-field
-            :append-icon="show2 ? 'visibility' : 'visibility_off'"
+            :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.min]"
             :type="show2 ? 'text' : 'password'"
             name="input-10-2"
@@ -33,7 +33,7 @@
 
         <v-col cols="12" sm="6">
           <v-text-field
-            :append-icon="show3 ? 'visibility' : 'visibility_off'"
+            :append-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.min]"
             :type="show3 ? 'text' : 'password'"
             name="input-10-2"
@@ -47,7 +47,7 @@
 
         <v-col cols="12" sm="6">
           <v-text-field
-            :append-icon="show4 ? 'visibility' : 'visibility_off'"
+            :append-icon="show4 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.emailMatch]"
             :type="show4 ? 'text' : 'password'"
             name="input-10-2"

packages/docs/src/lang/en/customization/SassVariables.json

@@ -7,5 +7,5 @@
   "sassAlert1": "Note: SCSS/SASS variables are only supported using [A-la-carte installation](/customization/a-la-carte). This is automatically setup when using the **vue-cli-plugin-vuetify** plugin.",
   "setupText3": "The next time you run **yarn run serve**, Vue CLI 3 will inject the variables file into your style files. Under the hood, Vuetify global styles will be hoisted to the top of the compiled styles and used to override the default behavior.",
   "webpackHeading": "## Webpack install",
-  "webpackText1": "This step is only necessary if you are modifying SASS Variables in a webpack project. If you are using vue-cli-3 with the **vue-cli-plugin-vuetify** plugin, this is handled automatically for you by creating a `variables.sass` or `variables.scss` file in the `src/sass` directory of your project. A detailed guide of how to setup the loader can be found on the [Quick start](/getting-started/quick-start#webpack-installation) page."
+  "webpackText1": "This step is only necessary if you are modifying SASS Variables in a webpack project. If you are using vue-cli-3 with the **vue-cli-plugin-vuetify** plugin, this is handled automatically for you by creating a `variables.sass` or `variables.scss` file in the `src/sass` directory of your project. A detailed guide of how to setup the loader can be found on the [Quick start](/getting-started/quick-start#webpack-install) page."
 }

packages/docs/src/lang/en/getting-started/QuickStart.json

@@ -24,5 +24,6 @@
   "webpackText5": "Vuetify uses [Google's Roboto font](https://material.io/design/typography/the-type-system.html) and [Material Design Icons](https://materialdesignicons.com/). The simplest way to install these are to include their CDN's in your main `index.html`.",
   "webpackText6": "For more information on different support iconfonts and advanced implementations, navigate to the [Icons](/customization/icons) page.",
   "cdnHeader": "## CDN usage",
-  "cdnText": "To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your `index.html`. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the [Vuetify starter](https://template.vuetifyjs.com) on codepen. While not recommended, if you need to utilize the cdn packages in a _production_ environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the [jsdelivr](https://www.jsdelivr.com/) website."
+  "cdnText": "To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your `index.html`. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the [Vuetify starter](https://template.vuetifyjs.com) on codepen. While not recommended, if you need to utilize the cdn packages in a _production_ environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the [jsdelivr](https://www.jsdelivr.com/) website.",
+  "cdnAlert": "In order for your application to work properly, you must wrap it in a v-app component. See the [Application](/components/application) component page for more details."
 }

packages/docs/src/layouts/documentation/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <core-system-bar />
+    <!-- <core-system-bar /> -->
 
     <documentation-app-bar />
 

packages/docs/src/layouts/frontend/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <core-system-bar />
+    <!-- <core-system-bar /> -->
 
     <frontend-app-bar />
 

packages/docs/src/layouts/layouts/Index.vue

@@ -3,7 +3,7 @@
     <component
       :is="component"
       v-if="component"
-      :source="`https://github.com/vuetifyjs/vuetify/blob/${branch}/packages/docs/src/examples/layouts/${page}.vue`"
+      :source="`https://github.com/vuetifyjs/vuetify/blob/${branch}/packages/docs/src/layouts/layouts/demos/${page}.vue`"
     />
   </div>
 </template>

packages/docs/src/layouts/layouts/demos/google-contacts.vue

@@ -82,11 +82,11 @@
       color="blue darken-3"
       dark
     >
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <v-toolbar-title
         style="width: 300px"
         class="ml-0 pl-4"
       >
-        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
         <span class="hidden-sm-and-down">Google Contacts</span>
       </v-toolbar-title>
       <v-text-field
@@ -178,15 +178,18 @@
           Create contact
         </v-card-title>
         <v-container>
-          <v-row>
+          <v-row class="mx-2">
             <v-col
               class="align-center justify-space-between"
               cols="12"
             >
-              <v-row align="center">
+              <v-row
+                align="center"
+                class="mr-0"
+              >
                 <v-avatar
                   size="40px"
-                  class="mr-4"
+                  class="mx-3"
                 >
                   <img
                     src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"

packages/docs/src/snippets/ts/create_translation.txt

@@ -15,6 +15,7 @@ export default {
     sortBy: 'Sort by',
   },
   dataFooter: {
+    pageText: '{0}-{1} of {2}',
     itemsPerPageText: 'Items per page:',
     itemsPerPageAll: 'All',
     nextPage: 'Next page',