Merge branch 'master' into dev

Author: J-Sek

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "4.0.2"
+  "version": "4.0.4"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/docs/src/components/home/Sponsors.vue

@@ -48,6 +48,7 @@
           v-bind="hoverProps"
           :append-icon="isHovering ? 'mdi-heart' : 'mdi-heart-outline'"
           :text="t('home.sponsors.become-sponsor')"
+          :to="rpath('/introduction/sponsors-and-backers/')"
           class="text-none mt-9"
           color="primary"
           rounded="lg"

packages/docs/src/data/new-in.json

@@ -341,7 +341,7 @@
       "closable": "4.0.0",
       "closeText": "4.0.0",
       "gap": "4.0.0",
-      "totalVisible": "3.11.0"
+      "totalVisible": "4.0.0"
     }
   },
   "VStepper": {

packages/docs/src/examples/v-chip/prop-colored.vue

@@ -42,5 +42,3 @@
     </v-chip>
   </div>
 </template>
-<script setup lang="ts">
-</script>

packages/docs/src/examples/v-chip/prop-sizes.vue

@@ -69,5 +69,3 @@
     </v-chip>
   </div>
 </template>
-<script setup lang="ts">
-</script>

packages/docs/src/examples/v-infinite-scroll/usage.vue

@@ -47,7 +47,6 @@
   const props = computed(() => {
     return {
       height: 300,
-      items: 'items',
       onLoad: 'load',
     }
   })
@@ -63,7 +62,7 @@
   })
 
   const code = computed(() => {
-    return `<v-infinite-scroll>${slots.value}</v-infinite-scroll>`
+    return `<v-infinite-scroll${propsToString(props.value)}>${slots.value}</v-infinite-scroll>`
   })
 
   const script = computed(() => {

packages/docs/src/examples/v-menu/misc-gliding-nav.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-layout>
+    <v-app-bar density="compact" title="My Website">
+      <v-btn
+        v-for="group in groups"
+        :key="group.name"
+        :text="group.name"
+        append-icon="mdi-chevron-down"
+        @focus="activate($event, group)"
+        @mouseenter="activate($event, group)"
+        @mouseleave="delayedClose()"
+      ></v-btn>
+    </v-app-bar>
+
+    <v-menu
+      v-model="menu"
+      :activator="activator"
+      :content-class="{ 'menu-move-transition': menuMoving }"
+      location="bottom end"
+      offset="4"
+      viewport-margin="0"
+    >
+      <v-list
+        :items="menuItems"
+        class="py-1"
+        density="compact"
+        rounded="lg"
+        border
+        @mouseenter="onListEnter()"
+        @mouseleave="delayedClose()"
+      >
+        <template v-slot:append>
+          <v-icon icon="mdi-arrow-top-right"></v-icon>
+        </template>
+      </v-list>
+    </v-menu>
+
+    <v-main>
+      <!-- Main Content -->
+    </v-main>
+  </v-layout>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const menu = ref(false)
+  const activator = ref()
+  const menuItems = ref([])
+  const menuMoving = ref(false)
+
+  const groups = [
+    {
+      name: 'Home',
+      submenu: [
+        { title: 'Welcome', value: 'welcome' },
+        { title: 'Updates', value: 'latest' },
+      ],
+    },
+    {
+      name: 'About Me',
+      submenu: [
+        { title: 'Bio', value: 'bio' },
+        { title: 'Resume', value: 'resume' },
+        { title: 'Skills', value: 'skills' },
+      ],
+    },
+    {
+      name: 'Blog',
+      submenu: [
+        { title: 'All Posts', value: 'all-posts' },
+        { title: 'Tech', value: 'tech-posts' },
+        { title: 'Life', value: 'life-posts' },
+      ],
+    },
+  ]
+
+  let closeTimeout = -1
+  let movingTimeout = -1
+  function activate ({ currentTarget }, group) {
+    clearTimeout(closeTimeout)
+
+    clearTimeout(movingTimeout)
+    if (menu.value) {
+      menuMoving.value = true
+      movingTimeout = window.setTimeout(() => menuMoving.value = false, 300)
+    }
+
+    activator.value = currentTarget
+    menuItems.value = group.submenu
+    menu.value = true
+  }
+
+  function onListEnter () {
+    clearTimeout(closeTimeout)
+  }
+
+  function delayedClose () {
+    clearTimeout(closeTimeout)
+    closeTimeout = window.setTimeout(() => menu.value = false, 600)
+  }
+</script>
+
+<style>
+  .menu-move-transition {
+    transition: 0.2s ease-out;
+    transition-property: left, top;
+  }
+</style>

packages/docs/src/examples/v-navigation-drawer/prop-rail-variant.vue

@@ -4,6 +4,8 @@
       <v-navigation-drawer
         v-model="drawer"
         :rail="rail"
+        :rail-width="wider ? 80 : undefined"
+        color="indigo"
         permanent
         @click="rail = false"
       >
@@ -12,8 +14,15 @@
             prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
             title="John Leider"
           >
+            <template v-slot:prepend>
+              <v-avatar
+                :class="{ 'mx-1': wider }"
+                :size="(wider && rail) ? 40 : undefined"
+              ></v-avatar>
+            </template>
             <template v-slot:append>
               <v-btn
+                :inert="rail"
                 icon="mdi-chevron-left"
                 variant="text"
                 @click.stop="rail = !rail"
@@ -26,23 +35,25 @@
 
         <v-list density="compact" nav>
           <v-list-item
-            prepend-icon="mdi-home-city"
-            title="Home"
-            value="home"
-          ></v-list-item>
-          <v-list-item
-            prepend-icon="mdi-account"
-            title="My Account"
-            value="account"
-          ></v-list-item>
-          <v-list-item
-            prepend-icon="mdi-account-group-outline"
-            title="Users"
-            value="users"
+            v-for="item in items"
+            :key="item.value"
+            :class="{ 'pl-5': wider }"
+            :prepend-icon="item.icon"
+            :title="item.title"
+            :value="item.value"
           ></v-list-item>
         </v-list>
       </v-navigation-drawer>
-      <v-main style="height: 250px"></v-main>
+
+      <v-main style="height: 250px">
+        <div class="ml-16">
+          <v-switch
+            v-model="wider"
+            color="success"
+            label="Wider (80px)"
+          ></v-switch>
+        </div>
+      </v-main>
     </v-layout>
   </v-card>
 </template>
@@ -52,6 +63,12 @@
 
   const drawer = ref(true)
   const rail = ref(true)
+  const wider = ref(false)
+  const items = [
+    { icon: 'mdi-home-city', title: 'Home', value: 'home' },
+    { icon: 'mdi-account', title: 'My Account', value: 'account' },
+    { icon: 'mdi-account-group-outline', title: 'Users', value: 'users' },
+  ]
 </script>
 
 <script>
@@ -60,6 +77,12 @@
       return {
         drawer: true,
         rail: true,
+        wider: true,
+        items: [
+          { icon: 'mdi-home-city', title: 'Home', value: 'home' },
+          { icon: 'mdi-account', title: 'My Account', value: 'account' },
+          { icon: 'mdi-account-group-outline', title: 'Users', value: 'users' },
+        ],
       }
     },
   }