feat(VToolbar/VAppBar): update to md2 spec (#6701)

* refactor(VToolbar): simplify usage, move out app-bar related features * feat(VAppBar): create new component * chore(VToolbar/VAppBar): add backwards compat and deprecations * chore(VToolbar): add more deprecations * style(VToolbar): fix typings * chore: finish unit tests, type cleanup * test(VAppBar): expand coverage * feat(VAppBar): add **shrink-on-scroll** prop converts a prominent toolbar to a dense/short toolbar on scroll * refactor(VAppBar): improve scroll-target functionality * chore: remove component, improve interaction of buttons in toolbar * fix(VToolbar): switch psuedo selector for btn icons * docs(VAppBar/Toolbar): add documentation pages for app-bar * fix(VToolbar): use correct comparison for deprecation * refactor(VToolbar): revert psuedo selector, better scope margin styles * test: fix tests * feat(VToolbar/VAppBar): add collapse support * refactor(VToolbar): improve collapse behavior * feat(VToolbar): add img support * feat(VAppBar): add **fade-img-on-scroll** prop * docs(VAppBar): add docs example for image * docs(VAppBar): add imgProps to example * docs(VAppBar): add an example for fade-img-on-scroll property * style(docs): fix code style * refactor: improve scrolling height calculations, improve image support * docs(VAppBar): updated texts * test(VAppBar): improve coverage * feat(VAppBar): match scroll with shrinking bar * fix(VAppBar): only fade img when using the prop * fix(VAppBar): only shrink when prop provided * fix(VTabs): adjust align-with-title location * test(VAppBar): fix test * fix(VAppBar): fix negative opacity * test(VAppBar): add test for computedOpacity * refactor(VToolbar): add color transition * docs(VToolbar): add new example * docs(VAppBar): add hide-on-scroll example * docs(VAppBar): add example for scroll threshold * fix(VToolbarTitle): only apply padding if after a v-btn.icon * docs(VToolbar/VAppBar): update examples * docs(VAppBar): update example * docs(VToolbar/VAppBar): update lots of examples * docs(VAppBar): add **elevate-on-scroll** example * docs(VAppBar): add example for **inverted-scroll** * fix(VAppBar): bind scroll conditionally * fix(VToolbar): add missing **floating** prop functionality * docs(VToolbar/VAppBar): add missing api information * refactor: cleanup * refactor(VAppBar): remove redundant even listener bind * fix(VAppBar): update canScroll directive conditional * test(VAppBar): fix tests * perf(VAppBar): reduce computed property recalculation * perf(VAppBar): improve perf on slower cpus * test(VAppBar): fix unit tests * docs(VAppBar): add dense example * fix(VAppBar): fix inverted scrolling * docs(VAppBar): typo * refactor(VAppBar): split out transition to a variable * fix(VAppBar): import globals first * docs(VAppBar): add more examples to kitchen * docs(kitchen): split out VAppBar examples to a new pan * docs(VAppBar): add image examples to kitchen * docs(kitchen): use VAppBar in kitchen * docs(VAppBar): use text VBtn * style(VAppBar pan): minor style * docs(VAppBar): add more examples to kitchen * revert: "fix(VAppBar): fix inverted scrolling" This reverts commit 2c79275 * perf(VAppBar): use scoped slots and CSS contain * refactor(VToolbar/VAppBar): remove deprecated code, cleanup comment, alpha order stuff * refactor(VSystemBar): update to new structure * docs(VSystemBar): add a new docs page * docs(VSystemBar): add more examples * docs(kitchen): migrate VSystemBar examples to a separate pan * docs(VToolbar): update example * docs(VToolbar): add new example, clean up existing ones * feat(VAppBarNavIcon): create new component deprecate `v-toolbar-side-icon` * feat(VToolbar): add **bottom** prop support * fix(VToolbar): set correct margins when in RTL mode * test: fix unit tests * docs(VBtnToggle): update example * refactor(VToolbar): move style explicity for selection controls * docs(VBtnToggle): fix example * fix(VTabs): adjust align-with-title padding * fix(VAppBar): give toolbar higher index now that we use left/right instead of padding, can apply a fixed z-index fixes #5369 * fix(VToolbar): rtl scoped styles * refactor: move computed property to correct component * refactor(VToolbar/VAppBar): enable non-number extension-height values resolves #3938 * fix(VAppBar): use correct transform with extended and **scroll-off-screen** prop fixes #4985 * refactor(VToolbarSideIcon): remove unit tests and fix deprecation notice * docs(VToolbar/VAppBar): add missing prop definitions * test(VAppBarNavIcon): add a unit test * test(VToolbarSideIcon): add unit tests * docs: add meta for new pages * docs(sitemap.xml): update for new pages * fix(VAppBar): hide shadow when scroll-off-screen and hide-on-scroll when used with extended should hide shadow once entire bar is transformed * style(VToolbar/VAppBar): clean up styles * docs(VToolbar/VAppBar): update examples to use v-slot * docs(VToolbar): update deprecated prop references * fix(VToolbar): correct broken style
vuetifyjs · Mar 11, 2019 · fc8c2ed · fc8c2ed
1 parent 1226e00
commit fc8c2ed
Show file tree

Hide file tree

Showing 129 changed files with 2,924 additions and 1,346 deletions.
diff --git a/packages/api-generator/src/map.js b/packages/api-generator/src/map.js
@@ -438,6 +438,15 @@ module.exports = {
   'v-app': {
     slots: ['default']
   },
+  'v-app-bar': {
+    slots: ['default', 'extension'],
+    scopedSlots: [{
+      name: 'img',
+      props: {
+        props: '{ height: string, src: string | srcObject }'
+      }
+    }]
+  },
   'v-alert': {
     slots: ['default'],
     events: [
@@ -1225,7 +1234,19 @@ module.exports = {
     ]
   },
   'v-toolbar': {
-    slots: ['default', 'extension']
+    slots: ['default', 'extension'],
+    scopedSlots: [{
+      name: 'img',
+      props: {
+        props: '{ height: string, src: string | srcObject }'
+      }
+    }]
+  },
+  'v-toolbar-title': {
+    slots: ['default']
+  },
+  'v-toolbar-items': {
+    slots: ['default']
   },
   'v-tooltip': {
     slots: ['activator', 'default']

diff --git a/packages/docs/src/components/core/Toolbar.vue b/packages/docs/src/components/core/Toolbar.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-toolbar
+  <v-app-bar
     id="app-toolbar"
-    :class="`elevation-${isHome ? 0 : 6}`"
+    :elevate-on-scroll="isHome"
     app
     clipped-left
     clipped-right
@@ -10,7 +10,7 @@
     fixed
     height="58"
   >
-    <v-toolbar-side-icon
+    <v-app-bar-nav-icon
       v-if="!isHome"
       :aria-label="$t('Vuetify.AppToolbar.menu')"
       class="hidden-lg-and-up"
@@ -55,7 +55,7 @@
       <core-versions />
       <core-locales />
     </v-toolbar-items>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <script>

diff --git a/packages/docs/src/components/doc/Api.vue b/packages/docs/src/components/doc/Api.vue
@@ -7,8 +7,8 @@
         :slider-color="computedTabs.length ? 'primary' : 'transparent'"
       >
         <v-tab
-          v-for="(tab, i) in computedTabs"
-          :key="`tab-${i}`"
+          v-for="(tab) in computedTabs"
+          :key="`tab-${tab}`"
           :href="`#${tab}`"
         >
           {{ tab.replace(/([A-Z])/g, ' $1') }}

diff --git a/packages/docs/src/components/doc/Example.vue b/packages/docs/src/components/doc/Example.vue
@@ -1,7 +1,6 @@
 <template>
   <v-card class="mb-5">
     <v-toolbar
-      card
       dense
       flat
     >

diff --git a/packages/docs/src/data/drawerItems.json b/packages/docs/src/data/drawerItems.json
@@ -74,6 +74,15 @@
       { "text": "avatars", "to": "avatars" },
       { "text": "badges", "to": "badges" },
       { "text": "banners", "to": "banners", "new": true },
+      {
+        "group": "components",
+        "text": "bars",
+        "children": [
+          { "text": "appBars", "to": "app-bars", "new": true },
+          { "text": "toolbars", "to": "toolbars", "updated": true },
+          { "text": "systemBars", "to": "system-bars", "updated": true }
+        ]
+      },
       { "text": "bottomNavigation", "to": "bottom-navigation" },
       { "text": "bottomSheets", "to": "bottom-sheets" },
       { "text": "breadcrumbs", "to": "breadcrumbs" },
@@ -141,7 +150,6 @@
       { "text": "subheaders", "to": "subheaders" },
       { "text": "tabs", "to": "tabs" },
       { "text": "timelines", "to": "timelines" },
-      { "text": "toolbars", "to": "toolbars" },
       { "text": "tooltips", "to": "tooltips" },
       { "text": "treeview", "to": "treeview", "updated": true }
     ]

diff --git a/packages/docs/src/data/pages/components/AppBars.json b/packages/docs/src/data/pages/components/AppBars.json
@@ -0,0 +1,62 @@
+{
+  "title": "header",
+  "titleText": "headerText",
+  "mdSpec": {
+    "version": "2",
+    "link": "https://material.io/design/components/app-bars-top.html"
+  },
+  "children": [
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "usage",
+          "value": "usage"
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "api",
+          "value": [
+            "v-app-bar"
+          ]
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "examples",
+          "value": [
+            "dense",
+            "prominent",
+            "img",
+            "img-fade",
+            "hide",
+            "scroll-threshold",
+            "collapse",
+            "elevate-on-scroll",
+            "inverted-scroll"
+          ]
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "up-next",
+          "value": [
+            "components/toolbars",
+            "components/buttons",
+            "components/icons"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/docs/src/data/pages/components/SystemBars.json b/packages/docs/src/data/pages/components/SystemBars.json
@@ -0,0 +1,56 @@
+{
+  "title": "header",
+  "titleText": "headerText",
+  "mdSpec": {
+    "version": "1",
+    "link": "https://material.io/archive/guidelines/components/toolbars.html"
+  },
+  "children": [
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "usage",
+          "value": "usage"
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "api",
+          "value": [
+            "v-system-bar"
+          ]
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "examples",
+          "value": [
+            "window",
+            "themes",
+            "lights-out"
+          ]
+        }
+      ]
+    },
+    {
+      "type": "section",
+      "children": [
+        {
+          "type": "up-next",
+          "value": [
+            "components/buttons",
+            "components/toolbar",
+            "components/tabs"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/docs/src/data/pages/components/Toolbars.json b/packages/docs/src/data/pages/components/Toolbars.json
@@ -2,8 +2,8 @@
   "title": "header",
   "titleText": "headerText",
   "mdSpec": {
-    "version": "2",
-    "link": "https://material.io/design/components/app-bars-top.html"
+    "version": "1",
+    "link": "https://material.io/archive/guidelines/components/toolbars.html"
   },
   "children": [
     {
@@ -22,7 +22,8 @@
           "type": "api",
           "value": [
             "v-toolbar",
-            "v-system-bar"
+            "v-toolbar-title",
+            "v-toolbar-items"
           ]
         }
       ]
@@ -33,18 +34,14 @@
         {
           "type": "examples",
           "value": [
-            "appBar",
-            "appBarItems",
-            "appBarExtension",
             "columnWidthWithHierarchy",
             "flexibleAndCard",
             "floatingWithSearch",
             "variations",
             "prominent",
             "dense",
-            "scrolling",
-            "appBarMenu",
-            "systemBarsStatusWindow"
+            "contextualActionBar",
+            "background"
           ]
         }
       ]

diff --git a/packages/docs/src/examples/app-bars/collapse.vue b/packages/docs/src/examples/app-bars/collapse.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-card class="hide-overflow">
+    <v-app-bar
+      :collapse="!collapseOnScroll"
+      :collapse-on-scroll="collapseOnScroll"
+      absolute
+      color="deep-purple accent-4"
+      dark
+      scroll-target="#scrolling-techniques-6"
+    >
+      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+      <v-toolbar-title>Collapsing Bar</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <v-checkbox
+        v-model="collapseOnScroll"
+        color="white"
+        hide-details
+      ></v-checkbox>
+    </v-app-bar>
+    <v-sheet
+      id="scrolling-techniques-6"
+      class="scroll-y"
+      max-height="600"
+    >
+      <v-container style="height: 1000px;"></v-container>
+    </v-sheet>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      collapseOnScroll: true
+    })
+  }
+</script>
diff --git a/packages/docs/src/examples/app-bars/dense.vue b/packages/docs/src/examples/app-bars/dense.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-app-bar
+    color="deep-purple accent-4"
+    dense
+    dark
+  >
+    <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+    <v-toolbar-title>Page title</v-toolbar-title>
+
+    <v-spacer></v-spacer>
+
+    <v-btn icon>
+      <v-icon>mdi-heart</v-icon>
+    </v-btn>
+
+    <v-btn icon>
+      <v-icon>mdi-magnify</v-icon>
+    </v-btn>
+
+    <v-menu
+      left
+      bottom
+    >
+      <template #activator="{ on }">
+        <v-btn icon v-on="on">
+          <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-tile
+          v-for="n in 5"
+          :key="n"
+          @click="() => {}"
+        >
+          <v-list-tile-title>Option {{ n }}</v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+    </v-menu>
+  </v-app-bar>
+</template>
diff --git a/packages/docs/src/examples/app-bars/elevate-on-scroll.vue b/packages/docs/src/examples/app-bars/elevate-on-scroll.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-card class="hide-overflow">
+    <v-app-bar
+      absolute
+      color="white"
+      elevate-on-scroll
+      scroll-target="#scrolling-techniques-7"
+    >
+      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+      <v-toolbar-title>Title</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <v-btn icon>
+        <v-icon>search</v-icon>
+      </v-btn>
+
+      <v-btn icon>
+        <v-icon>favorite</v-icon>
+      </v-btn>
+
+      <v-btn icon>
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+    </v-app-bar>
+    <v-sheet
+      id="scrolling-techniques-7"
+      class="scroll-y"
+      max-height="600"
+    >
+      <v-container style="height: 1500px;">
+
+      </v-container>
+    </v-sheet>
+  </v-card>
+</template>