Merge branch 'master' into dev

vuetifyjs · Jul 9, 2024 · b1b9632 · b1b9632
2 parents cb6b5ff + 61eb22d
commit b1b9632
Show file tree

Hide file tree

Showing 45 changed files with 251 additions and 126 deletions.
diff --git a/.github/actions/download-locales/action.yml b/.github/actions/download-locales/action.yml
@@ -20,6 +20,16 @@ runs:
         push_translations: false
         export_only_approved: false
         crowdin_branch_name: ${{ inputs.crowdin-branch }}
+    - name: Download ja-JP
+      uses: crowdin/[email protected]
+      with:
+        download_language: ja
+        config: crowdin.yml
+        upload_sources: false
+        download_translations: true
+        push_translations: false
+        export_only_approved: false
+        crowdin_branch_name: ${{ inputs.crowdin-branch }}
     - name: Download zh-CN
       uses: crowdin/[email protected]
       with:

diff --git a/README.md b/README.md
@@ -205,6 +205,14 @@ Vuetify supports all **modern browsers**, including Safari 13+ (using [polyfills
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>
+        <a href="https://snips.vuetifyjs.com">
+          ✂️&nbsp;Vuetify&nbsp;Snips
+        </a>
+      </td>
+      <td>Pre-built code snippets for Vuetify components that you can use in your projects</td>
+    </tr>
     <tr>
       <td>
         <a href="https://support.vuetifyjs.com/?ref=github">

diff --git a/lerna.json b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.11",
+  "version": "3.6.12",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.11",
+  "version": "3.6.12",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.12"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

diff --git a/packages/api-generator/src/locale/en/VField.json b/packages/api-generator/src/locale/en/VField.json
@@ -2,7 +2,7 @@
   "props": {
     "appendInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
     "baseColor": "Sets the color of the input when it is not focused.",
-    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
+    "centerAffix": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** under the hood, and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.",
     "clearIcon": "The icon used when the **clearable** prop is set to true.",
     "dirty": "Manually apply the dirty state styling.",
     "disabled": "Removes the ability to click or target the input.",

diff --git a/packages/api-generator/src/locale/en/VInput.json b/packages/api-generator/src/locale/en/VInput.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "backgroundColor": "Changes the background-color of the input.",
-    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
+    "centerAffix": "Vertically align **append** and **prepend** in the center.",
     "direction": "Changes the direction of the input.",
     "hideDetails": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.",
     "hideSpinButtons": "Hides spin buttons on the input when type is set to `number`.",

diff --git a/packages/api-generator/src/locale/en/VListItem.json b/packages/api-generator/src/locale/en/VListItem.json
@@ -4,6 +4,9 @@
     "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),",
     "contained": "Changes the component style by changing how color is applied to the background.",
     "title": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead.",
-    "value": "The value used for selection."
+    "value": "The value used for selection.",
+    "lines": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.",
+    "nav": "Reduces the width v-list-item takes up as well as adding a border radius.",
+    "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation."
   }
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.6.11",
+  "version": "3.6.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.8.1",
+    "@vuetify/one": "^1.9.1",
     "algoliasearch": "^4.23.3",
     "fflate": "^0.8.2",
     "isomorphic-fetch": "^3.0.0",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.12"
   },
   "devDependencies": {
     "@emailjs/browser": "^4.3.3",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.4.27",
-    "@vuetify/api-generator": "^3.6.11",
+    "@vuetify/api-generator": "^3.6.12",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^3.6.0",

diff --git a/packages/docs/src/components/app/CommitBtn.vue b/packages/docs/src/components/app/CommitBtn.vue
@@ -1,10 +1,10 @@
 <template>
   <v-btn
-    v-if="commits.latest"
     :href="`https://github.com/vuetifyjs/vuetify/commit/${commits.latest?.sha}`"
+    :prepend-icon="commits.latest ? 'mdi-source-commit' : undefined"
+    :readonly="!commits.latest"
     :text="commits.latest?.sha.slice(0, 7)"
     class="text-caption"
-    prepend-icon="mdi-source-commit"
     rel="noopener noreferrer"
     size="small"
     target="_blank"

diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue
@@ -2,6 +2,7 @@
   <VoAppBar
     id="app-bar"
     border="b"
+    class="px-md-3"
     logo="vuetify"
     flat
   >

diff --git a/packages/docs/src/components/app/bar/EcosystemMenu.vue b/packages/docs/src/components/app/bar/EcosystemMenu.vue
@@ -24,7 +24,7 @@
     {
       title: 'Discord',
       href: 'https://community.vuetifyjs.com/',
-      appendIcon: 'mdi-discord',
+      appendIcon: '$discord',
     },
     {
       title: 'github',
@@ -68,6 +68,16 @@
       to: rpath('/resources/jobs-for-vue/'),
       appendIcon: 'mdi-briefcase-variant-outline',
     },
+    {
+      title: 'snips',
+      href: 'https://snips.vuetifyjs.com/',
+      appendIcon: [
+        [
+          'M18.3252 15.9618C17.4833 16.375 16.9265 17.0615 16.6685 17.8346L15.0662 15.7153C14.7199 15.2554 14.815 14.609 15.2835 14.2691L15.4328 14.1624L5.47931 1C3.8566 2.18628 3.51712 4.43889 4.71888 6.03171L12.4929 16.3084C12.9614 15.9685 13.62 16.0618 13.9663 16.5217L17.0759 20.6403C18.1147 22.0132 20.0905 22.4398 21.5435 21.4867C23.2884 20.3471 23.5328 17.8812 21.9101 16.4417C20.9392 15.582 19.493 15.3954 18.3252 15.9618ZM20.9392 20.4004C20.0565 21.0469 18.8073 20.8669 18.1487 20.0005C17.4901 19.1342 17.6802 17.9079 18.5628 17.2614C19.4455 16.615 20.6948 16.7949 21.3534 17.6613C22.0119 18.5277 21.8218 19.754 20.9392 20.4004Z', 1,
+        ],
+        ['M3.08175 16.4865C1.45983 17.9295 1.71879 20.3898 3.47701 21.5202C4.9013 22.4311 6.95255 21.9923 7.96114 20.6491L11.0619 16.5264C11.4094 16.0676 12.0705 15.9679 12.5407 16.307L20.2891 6.01368C21.4885 4.41781 21.1341 2.1703 19.4986 1L9.57624 14.1725L9.72616 14.2789C10.1964 14.6181 10.2986 15.263 9.95105 15.7152L8.34958 17.843C8.0838 17.0717 7.52499 16.3935 6.67996 15.9878C5.501 15.4226 4.04945 15.6221 3.08175 16.4865ZM3.64738 17.6967C4.3016 16.8257 5.55552 16.6395 6.44825 17.2778C7.34099 17.9162 7.5318 19.1397 6.87759 20.0107C6.22337 20.8818 4.96944 21.068 4.07671 20.4297C3.18397 19.7913 2.99316 18.5678 3.64738 17.6967Z', 1],
+      ],
+    },
     {
       title: 'themes',
       to: rpath('/resources/themes/'),

diff --git a/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue b/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue
@@ -1,10 +1,10 @@
 <template>
   <v-data-table :items="consoles">
     <template v-slot:item.exclusive="{ item }">
-      <v-checkbox
+      <v-checkbox-btn
         v-model="item.exclusive"
         readonly
-      ></v-checkbox>
+      ></v-checkbox-btn>
     </template>
   </v-data-table>
 </template>

diff --git a/packages/docs/src/i18n/locales.json b/packages/docs/src/i18n/locales.json
@@ -8,7 +8,7 @@
     "title": "日本語",
     "locale": "ja-JP",
     "alternate": "ja",
-    "enabled": false
+    "enabled": true
   },
   {
     "title": "简体中文",

diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
@@ -296,6 +296,7 @@
   "slash-search": "Use / for Search hotkey",
   "slash-search-message": "This option sets the bound search key to '/' from Cmd/Ctrl+K.",
   "small": "Small",
+  "snips": "Snips",
   "social": "Social",
   "sponsor": "Sponsor",
   "sponsors": "Sponsors",

diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
@@ -364,7 +364,7 @@ These components are used to display data and information in a variety of ways.
 
 </ComponentsListItem>
 
-<ComponentsListItem name="Sparkline component" src="sparkline">
+<ComponentsListItem name="Sparkline component" src="sparklines">
 
   The sparkline component creates beautiful and expressive simple graphs for displaying numerical data
 

diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md
@@ -119,7 +119,7 @@ bun install
 
 :::
 
-and then install the required Vuefity modules as dependencies:
+and then install the required Vuetify modules as dependencies:
 
 ::: tabs
 
@@ -263,6 +263,51 @@ const app = createApp()
 app.use(vuetify).mount('#app')
 ```
 
+## Using Vitepress
+
+You can use Vuetify's components in your Vitepress static site.
+
+First, add vuetify to your dependencies
+
+::: tabs
+
+```bash [yarn]
+yarn create vuetify
+```
+
+```bash [npm]
+npm create vuetify@latest
+```
+
+```bash [pnpm]
+pnpm create vuetify
+```
+
+```bash [bun]
+bun create vuetify
+```
+
+:::
+
+Then, in your `.vitepress/theme/index.ts`
+
+```ts
+import DefaultTheme from 'vitepress/theme'
+import 'vuetify/styles'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { createVuetify } from 'vuetify'
+
+const vuetify = createVuetify({ components, directives })
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.use(vuetify)
+  },
+}
+```
+
 ## Existing projects
 
 Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.

diff --git a/packages/docs/src/pages/en/styles/content.md b/packages/docs/src/pages/en/styles/content.md
@@ -36,7 +36,3 @@ Example of an inline `<code>` element.
 ## Variables
 
 <var>v</var> = <var>u</var> * <var>e</var>
-
-## User input
-
-To install Vuetify, type <kbd>npm install vuetify</kbd> into your console. Once complete, type <kbd>cd `<project name>`</kbd> and run <kbd>npm install</kbd>
diff --git a/packages/docs/src/plugins/vuetify.ts b/packages/docs/src/plugins/vuetify.ts
@@ -12,6 +12,7 @@ import { fa } from 'vuetify/iconsets/fa'
 import { md } from 'vuetify/iconsets/md'
 import { mdi } from 'vuetify/iconsets/mdi-svg'
 import * as mdiSvg from './icons'
+import { aliases } from '@vuetify/one'
 
 // Locales
 import { en, sv } from 'vuetify/locale'
@@ -112,11 +113,7 @@ export function installVuetify (app: App) {
           },
         },
       },
-      aliases: {
-        /* eslint-disable max-len */
-        x: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
-        /* eslint-enable max-len */
-      },
+      aliases,
     },
     theme: {
       themes: {

diff --git a/packages/docs/src/stores/commits.ts b/packages/docs/src/stores/commits.ts
@@ -4,7 +4,6 @@ import type { components as octokitComponents } from '@octokit/openapi-types'
 export type Commit = octokitComponents['schemas']['commit']
 
 export type State = {
-  latest: Commit | null
   commits: Commit[]
   isLoading: boolean
 }
@@ -13,7 +12,6 @@ const url = import.meta.env.VITE_API_SERVER_URL
 
 export const useCommitsStore = defineStore('commits', {
   state: (): State => ({
-    latest: null,
     commits: [] as Commit[],
     isLoading: false,
   }),
@@ -23,7 +21,7 @@ export const useCommitsStore = defineStore('commits', {
       this.isLoading = true
 
       try {
-        this.latest = await fetch(`${url}/github/commits`, {
+        this.commits = await fetch(`${url}/github/commits`, {
           method: 'GET',
           credentials: 'include',
         }).then(res => res.json())
@@ -34,4 +32,10 @@ export const useCommitsStore = defineStore('commits', {
       this.isLoading = false
     },
   },
+
+  getters: {
+    latest (state) {
+      return state.commits[0]
+    },
+  },
 })
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.11",
+  "version": "3.6.12",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
@@ -7,6 +7,7 @@ import { VSelect } from '@/components/VSelect'
 
 // Composables
 import { usePagination } from './composables/paginate'
+import { IconValue } from '@/composables/icons'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
@@ -18,19 +19,19 @@ import type { PropType } from 'vue'
 
 export const makeVDataTableFooterProps = propsFactory({
   prevIcon: {
-    type: String,
+    type: IconValue,
     default: '$prev',
   },
   nextIcon: {
-    type: String,
+    type: IconValue,
     default: '$next',
   },
   firstIcon: {
-    type: String,
+    type: IconValue,
     default: '$first',
   },
   lastIcon: {
-    type: String,
+    type: IconValue,
     default: '$last',
   },
   itemsPerPageText: {