Merge branch 'master' into dev

.github/workflows/crowdin-uploads.yml

@@ -29,7 +29,7 @@ jobs:
       uses: actions/checkout@v2
 
     - name: Upload
-      uses: crowdin/github-action@1.1.2
+      uses: crowdin/github-action@v1.7.0
       with:
         config: crowdin.yml
         crowdin_branch_name: ${{ env.CROWDIN_BRANCH }}

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.1.8",
+  "version": "3.1.11",
   "useWorkspaces": true
 }

package.json

@@ -70,13 +70,15 @@
     "jest-environment-jsdom": "^28.1.3",
     "jest-serializer-html": "^7.1.0",
     "lerna": "^3.22.1",
+    "magic-string": "^0.30.0",
     "mkdirp": "^1.0.4",
     "moment": "^2.29.4",
     "patch-package": "^6.5.1",
     "sass": "^1.58.0",
     "semver": "^6.2.0",
     "shelljs": "^0.8.5",
     "typescript": "^4.9.5",
+    "upath": "^2.0.1",
     "vite-plugin-inspect": "^0.6.1",
     "vue": "^3.2.47",
     "vue-analytics": "^5.16.1",

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.1.8",
+  "version": "3.1.11",
   "private": true,
   "description": "",
   "scripts": {
@@ -18,7 +18,7 @@
     "rimraf": "^3.0.2",
     "ts-morph": "^16.0.0",
     "vue": "^3.2.47",
-    "vuetify": "^3.1.8"
+    "vuetify": "^3.1.11"
   },
   "devDependencies": {
     "@babel/node": "^7.20.7"

packages/api-generator/src/index.ts

@@ -1,5 +1,5 @@
 import fs from 'fs/promises'
-import path from 'path'
+import path from 'upath'
 import { components } from 'vuetify/dist/vuetify-labs.js'
 import importMap from 'vuetify/dist/json/importMap.json' assert { type: 'json' }
 import importMapLabs from 'vuetify/dist/json/importMap-labs.json' assert { type: 'json' }
@@ -15,6 +15,7 @@ import { createWebTypesApi } from './web-types'
 import inspector from 'inspector'
 import yargs from 'yargs'
 import { execSync } from 'child_process'
+import { fileURLToPath } from 'url'
 
 type TranslationData = {
   [type in 'props' | 'events' | 'slots' | 'exposed']?: {
@@ -63,7 +64,7 @@ const run = async () => {
     )
   }
 
-  const outPath = new URL('../../docs/src/api/data/', import.meta.url).pathname
+  const outPath = fileURLToPath(new URL('../../docs/src/api/data/', import.meta.url))
 
   const componentData = await Promise.all(
     Object.entries(components).map(([componentName, componentInstance]) => {

packages/api-generator/src/locale/en/v-defaults-provider.json

@@ -1,8 +1,9 @@
 {
   "props": {
     "defaults": "Specify new default prop values for components. Keep in mind that this will be merged with previously defined values",
-    "reset": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-defaults-provider.json))",
-    "root": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-defaults-provider.json))",
-    "scoped": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-defaults-provider.json))"
+    "disabled": "Turns off all calcuations of new default values for improved performance in situations where defaults propagation isn't necessary",
+    "reset": "Reset the default values up the nested chain by {n} amount",
+    "root": "Force current defaults to match the application root defaults",
+    "scoped": "Prevents the ability for default values to be inherited from parent components"
   }
 }

packages/api-generator/src/locale/en/v-overlay.json

@@ -6,12 +6,12 @@
     "opacity": "Sets the overlay opacity",
     "zIndex": "The z-index used for the component",
     "contentProps": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))",
-    "noClickAnimation": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))",
-    "persistent": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))",
-    "scrim": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))"
+    "noClickAnimation": "Disables the bounce effect when clicking outside of the content element when using the persistent prop.",
+    "persistent": "Clicking outside of the element or pressing esc key will not deactivate it.",
+    "scrim": "Accepts true/false to enable background, and string to define color."
   },
   "events": {
-    "click:outside": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))",
+    "click:outside": "Event that fires when clicking outside an active overlay.",
     "afterLeave": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-overlay.json))"
   },
   "exposed": {

packages/api-generator/src/locale/en/v-table.json

@@ -3,6 +3,6 @@
     "fixedHeader": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-table.json))",
     "fixedFooter": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-table.json))",
     "height": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-table.json))",
-    "hover": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-table.json))"
+    "hover": "Will add a hover effect to a table's row when the mouse is over it."
   }
 }

packages/api-generator/src/utils.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'url'
 import stringifyObject from 'stringify-object'
 import type { Definition, ObjectDefinition } from './types'
 
@@ -97,7 +98,7 @@ export function stringifyProps (props: any) {
 
 async function loadLocale (componentName: string, locale: string, fallback = {}): Promise<Record<string, string | Record<string, string>>> {
   try {
-    const data = await import(new URL(`../src/locale/${locale}/${componentName}.json`, import.meta.url).pathname, {
+    const data = await import(`../src/locale/${locale}/${componentName}.json`, {
       assert: { type: 'json' },
     })
     return Object.assign(fallback, data.default)

packages/docs/build/markdown-it.ts

@@ -67,6 +67,7 @@ const validate = ajv.compile({
       items: { type: 'string' },
     },
     disabled: { type: 'boolean' },
+    emphasized: { type: 'boolean' },
   },
 })
 

packages/docs/package.json

@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.1.8",
+  "version": "3.1.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.3.0-beta.16",
     "vue-instantsearch": "^4.8.3",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.1.8"
+    "vuetify": "^3.1.11"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.10.0",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^0.1.2",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/compiler-sfc": "^3.2.47",
-    "@vuetify/api-generator": "^3.1.8",
+    "@vuetify/api-generator": "^3.1.11",
     "@vuetify/vite-ssg": "^0.20.2",
     "ajv": "^8.12.0",
     "date-fns": "^2.29.3",

packages/docs/src/components/Backmatter.vue

@@ -1,5 +1,8 @@
 <template>
-  <section id="ready-for-more">
+  <section
+    id="ready-for-more"
+    class="mt-16"
+  >
     <app-heading
       :content="t('ready')"
       level="2"

packages/docs/src/components/app/BackToTop.vue

@@ -1,7 +1,7 @@
 <template>
   <v-layout-item
     v-scroll="onScroll"
-    class="text-end"
+    class="text-end pointer-events-none"
     model-value
     position="bottom"
     size="88"
@@ -10,7 +10,7 @@
       <v-fab-transition>
         <v-btn
           v-show="model"
-          class="mt-auto"
+          class="mt-auto pointer-events-initial"
           color="primary"
           elevation="8"
           icon="mdi-chevron-up"
@@ -38,3 +38,13 @@
     })
   }
 </script>
+
+<style scoped>
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .pointer-events-initial {
+    pointer-events: initial;
+  }
+</style>

packages/docs/src/components/app/Toc.vue

@@ -83,10 +83,6 @@
               <small class="text-disabled">Your logo here</small>
             </v-card>
           </v-col>
-
-          <v-col cols="12">
-            <carbon />
-          </v-col>
         </v-row>
       </v-container>
     </template>

packages/docs/src/components/app/V2Banner.vue

@@ -37,15 +37,10 @@
 <script setup>
   import { useUserStore } from '@/store/user'
   import { computed } from 'vue'
-  import { differenceInHours } from 'date-fns'
 
   const user = useUserStore()
 
-  const showBanner = computed(() => {
-    const now = Date.now()
-
-    return differenceInHours(now, Number(user.notifications.last.v2banner)) > 1
-  })
+  const showBanner = computed(() => !user.notifications.last.v2banner)
 
   function onClose () {
     user.notifications.last.v2banner = Date.now()

packages/docs/src/components/app/list/List.vue

@@ -17,6 +17,18 @@
       />
     </template>
 
+    <template #title="{ item }">
+      {{ item.title }}
+
+      <v-badge
+        v-if="item.emphasized"
+        class="ms-n1"
+        color="success"
+        dot
+        inline
+      />
+    </template>
+
     <template #subheader="{ props: subheaderProps }">
       <slot
         name="subheader"
@@ -77,6 +89,7 @@
 
       return {
         title: route?.meta?.nav ?? route?.meta?.title ?? item,
+        emphasized: route?.meta?.emphasized ?? false,
         to: route?.path,
         disabled: !route,
       }

packages/docs/src/components/examples/Example.vue

@@ -34,6 +34,7 @@
               </v-btn>
             </div>
           </v-fade-transition>
+
           <v-spacer />
 
           <v-tooltip
@@ -108,6 +109,7 @@
 
   const props = defineProps({
     inline: Boolean,
+    hideInvert: Boolean,
     file: {
       type: String,
       required: true,
@@ -186,29 +188,37 @@
 
   const { Codepen, openCodepen } = useCodepen({ code, sections, component })
 
-  const actions = computed(() => [
-    {
-      icon: 'mdi-theme-light-dark',
-      path: 'invert-example-colors',
-      onClick: toggleTheme,
-    },
-    {
-      icon: 'mdi-codepen',
-      path: 'edit-in-codepen',
-      onClick: openCodepen,
-    },
-    {
-      icon: 'mdi-github',
-      path: 'view-in-github',
-      href: `https://github.com/vuetifyjs/vuetify/tree/${getBranch()}/packages/docs/src/examples/${props.file}.vue`,
-      target: '_blank',
-    },
-    {
-      icon: !showCode.value ? 'mdi-code-tags' : 'mdi-chevron-up',
-      path: !showCode.value ? 'view-source' : 'hide-source',
-      onClick: () => {
-        showCode.value = !showCode.value
+  const actions = computed(() => {
+    const array = []
+
+    if (!props.hideInvert) {
+      array.push({
+        icon: 'mdi-theme-light-dark',
+        path: 'invert-example-colors',
+        onClick: toggleTheme,
+      })
+    }
+
+    return [
+      ...array,
+      {
+        icon: 'mdi-codepen',
+        path: 'edit-in-codepen',
+        onClick: openCodepen,
       },
-    },
-  ])
+      {
+        icon: 'mdi-github',
+        path: 'view-in-github',
+        href: `https://github.com/vuetifyjs/vuetify/tree/${getBranch()}/packages/docs/src/examples/${props.file}.vue`,
+        target: '_blank',
+      },
+      {
+        icon: !showCode.value ? 'mdi-code-tags' : 'mdi-chevron-up',
+        path: !showCode.value ? 'view-source' : 'hide-source',
+        onClick: () => {
+          showCode.value = !showCode.value
+        },
+      },
+    ]
+  })
 </script>