fix(VAutocomplete, VSelect): merge upstream master

fixes vuetifyjs#18493

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     sourceType: 'module',
     project: './tsconfig.eslint.json',
     tsconfigRootDir: __dirname,
-    extraFileExtensions: ['.vue'],
+    extraFileExtensions: ['.vue', '.json'],
     suppressDeprecatedPropertyWarnings: true,
   },
   extends: [
@@ -239,5 +239,16 @@ module.exports = {
         'import/no-duplicates': 'off',
       },
     },
+    {
+      files: '**/*.json',
+      rules: {
+        quotes: ['error', 'double'],
+        'comma-dangle': ['error', 'never'],
+        'quote-props': ['error', 'always'],
+        'max-len': 'off',
+        'no-unused-expressions': 'off',
+        'no-template-curly-in-string': 'off',
+      },
+    },
   ],
 }

README.md

@@ -61,15 +61,15 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
   <tbody>
     <tr>
       <td>
-        <a href="https://github.com/sponsors/johnleider" target="_blank">
-          Your Logo Here
+        <a href="https://www.teamwork.com/" target="_blank">
+          <img height="35px" src="https://cdn.cosmicjs.com/4fbb7ab0-612e-11ed-af1a-0faa4245afee-teamwork.png">
         </a>
       </td>
     </tr>
   </tbody>
 </table>
 
-<h3 align="center"><b>Palladium Sponsors</b></h3>
+<h3 align="center"><b>Diamond Sponsors</b></h3>
 
 <table>
   <tbody>
@@ -116,11 +116,6 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
           <img height="30px" src="https://cdn.cosmicjs.com/e7d53ff0-4ca5-11ec-9940-53a088b36636-slim-ai.svg">
         </a>
       </td>
-      <td>
-        <a href="https://netticasinohex.com/">
-          <img height="30px" src="https://cdn.cosmicjs.com/4442ad40-1fdc-11ed-a5bd-ef15a2e468ca-hex-ca-light-sm.png">
-        </a>
-      </td>
       <td>
         <a href="https://crosswordanswers911.net/">
           <img height="30px" src="https://cdn.cosmicjs.com/ef6ea2a0-7ee1-11ed-8730-d9eebcd39d9f-crossword-answers-911.jpg">
@@ -131,6 +126,11 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
           <img height="40px" src="https://imgix.cosmicjs.com/af2ce530-eaa2-11ed-ba82-019c4666da06-itm-logo.png">
         </a>
       </td>
+      <td>
+        <a href="https://justanotherpanel.com/">
+          <img height="30px" src="https://cdn.cosmicjs.com/8d038320-6382-11ee-b975-cb0cfadd93ad-jap.png">
+        </a>
+      </td>
     </tr>
   </tbody>
 </table>

packages/api-generator/package.json

@@ -5,7 +5,7 @@
   "description": "",
   "scripts": {
     "build": "node --loader tsx --no-warnings src/index.ts",
-    "lint": "eslint --ext .ts src -f codeframe --max-warnings 0",
+    "lint": "eslint --ext .ts,.json src -f codeframe --max-warnings 0",
     "lint:fix": "yarn lint --fix"
   },
   "author": "",

packages/api-generator/src/locale/en/Slider.json

@@ -1 +1,18 @@
-{}
+{
+  "props": {
+    "max": "Sets the maximum allowed value.",
+    "min": "Sets the minimum allowed value.",
+    "reverse": "Reverses the slider direction.",
+    "showTicks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
+    "step": "If greater than 0, sets step interval for ticks.",
+    "thumbColor": "Sets the thumb and thumb label color.",
+    "thumbLabel": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label.",
+    "thumbSize": "Controls the size of the thumb label.",
+    "ticks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
+    "tickLabels": "When provided with Array<string>, will attempt to map the labels to each step in index order.",
+    "tickSize": "Controls the size of **ticks**",
+    "trackColor": "Sets the track's color",
+    "trackFillColor": "Sets the track's fill color",
+    "trackSize": "Sets the track's size (height)."
+  }
+}

packages/api-generator/src/locale/en/VFileInput.json

@@ -2,6 +2,7 @@
   "props": {
     "accept": "One or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) describing file types to allow.",
     "chips": "Changes display of selections to chips.",
+    "counter": "Displays the number of selected files.",
     "counterSizeString": "The text displayed when using the **counter** and **show-size** props. Can also be customized globally on the [internationalization page](/customization/internationalization).",
     "counterString": "The text displayed when using the **counter** prop. Can also be customized globally on the [internationalization page](/customization/internationalization).",
     "hideInput": "Display the icon only without the input (file names).",
@@ -12,6 +13,7 @@
     "value": "A single or array of [File objects](https://developer.mozilla.org/en-US/docs/Web/API/File)."
   },
   "slots": {
+    "counter": "Slot for the input’s counter text.",
     "selection": "Slot for defining a custom appearance for selected item(s). Provides the current **index**, **text** (truncated) and [file](https://developer.mozilla.org/en-US/docs/Web/API/File)."
   },
   "events": {

packages/api-generator/src/locale/en/VInput.json

@@ -8,6 +8,7 @@
     "dense": "Reduces the input height.",
     "height": "Sets the height of the input.",
     "hint": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.",
+    "id": "Sets the DOM id on the component.",
     "loading": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
     "persistentHint": "Forces [hint](#props-hint) to always be visible.",
     "placeholder": "Sets the input's placeholder text.",
@@ -24,5 +25,10 @@
     "click:prepend": "Emitted when prepended icon is clicked.",
     "mousedown": "Emitted when click is pressed.",
     "mouseup": "Emitted when click is released."
+  },
+  "exposed": {
+    "reset": "Resets the input value.",
+    "resetValidation": "Resets validation of the input without modifying its value.",
+    "validate": "Validates the input's value."
   }
 }

packages/api-generator/src/locale/en/VLabel.json

@@ -1 +1,5 @@
-{}
+{
+  "props": {
+    "clickable": "Changes the cursor to a pointer when the mouse is over the element."
+  }
+}

packages/api-generator/src/locale/en/VRangeSlider.json

@@ -1 +1,14 @@
-{}
+{
+  "props": {
+    "strict": "Disallows dragging the ending thumb past the starting thumb and vice versa."
+
+  },
+  "slots": {
+    "thumb-label": "Slot for the thumb label.",
+    "tick-label": "Slot for the tick label."
+  },
+  "events": {
+    "end": "Slider value emitted at the end of slider movement.",
+    "start": "Slider value emitted at start of slider movement."
+  }
+}

packages/api-generator/src/locale/en/VRow.json

@@ -5,17 +5,20 @@
     "alignMd": "Changes the **align-items** property on medium and greater breakpoints.",
     "alignSm": "Changes the **align-items** property on small and greater breakpoints.",
     "alignXl": "Changes the **align-items** property on extra large and greater breakpoints.",
+    "alignXxl": "Changes the **align-items** property on extra extra large and greater breakpoints.",
     "alignContent": "Applies the [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) css property. Available options are: **start**, **center**, **end**, **space-between**, **space-around** and **stretch**.",
     "alignContentLg": "Changes the **align-content** property on large and greater breakpoints.",
     "alignContentMd": "Changes the **align-content** property on medium and greater breakpoints.",
     "alignContentSm": "Changes the **align-content** property on small and greater breakpoints.",
     "alignContentXl": "Changes the **align-content** property on extra large and greater breakpoints.",
+    "alignContentXxl": "Changes the **align-content** property on extra extra large and greater breakpoints.",
     "dense": "Reduces the gutter between `v-col`s.",
     "justify": "Applies the [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) css property. Available options are: **start**, **center**, **end**, **space-between** and **space-around**.",
     "justifyLg": "Changes the **justify-content** property on large and greater breakpoints.",
     "justifyMd": "Changes the **justify-content** property on medium and greater breakpoints.",
     "justifySm": "Changes the **justify-content** property on small and greater breakpoints.",
     "justifyXl": "Changes the **justify-content** property on extra large and greater breakpoints.",
+    "justifyXxl": "Changes the **justify-content** property on extra extra large and greater breakpoints.",
     "noGutters": "Removes the gutter between `v-col`s."
   }
 }

packages/api-generator/src/locale/en/VSlider.json

@@ -2,21 +2,11 @@
   "props": {
     "alwaysDirty": "When used with the **thumb-label** prop will always show the thumb label.",
     "inverseLabel": "Reverse the label position. Works with **rtl**.",
-    "max": "Sets the maximum allowed value.",
-    "min": "Sets the minimum allowed value.",
-    "step": "If greater than 0, sets step interval for ticks.",
-    "thumbColor": "Sets the thumb and thumb label color.",
-    "thumbLabel": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label.",
-    "thumbSize": "Controls the size of the thumb label.",
-    "ticks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
-    "tickLabels": "When provided with Array<string>, will attempt to map the labels to each step in index order.",
-    "tickSize": "Controls the size of **ticks**",
-    "trackColor": "Sets the track's color",
-    "trackFillColor": "Sets the track's fill color",
     "vertical": "Changes slider direction to vertical."
   },
   "slots": {
-    "thumbLabel": "Replaces the content inside the thumb label."
+    "thumb-label": "Slot for the thumb label.",
+    "tick-label": "Slot for the tick label."
   },
   "events": {
     "end": "Slider value emitted at the end of slider movement.",

packages/api-generator/src/locale/en/VTextField.json

@@ -27,6 +27,10 @@
     "click:prepend-inner": "Emitted when prepended inner icon is clicked.",
     "click:prependInner": "Emitted when prepended inner icon is clicked.",
     "focus": "Emitted when component is focused.",
-    "keydown": "Emitted when **any** key is pressed."
+    "keydown": "Emitted when **any** key is pressed.",
+    "mousedown:control": "Event that is emitted when using mousedown on the main control area."
+  },
+  "slots": {
+    "counter": "Slot for the input’s counter text."
   }
 }

packages/api-generator/src/locale/en/VTextarea.json

@@ -3,10 +3,17 @@
     "autoGrow": "Automatically grow the textarea depending on amount of text.",
     "counterValue": "Display the input length but do not provide any validation.",
     "noResize": "Remove resize handle.",
+    "persistentPlaceholder": "Forces placeholder to always be visible.",
+    "prefix": "Displays prefix text.",
     "rowHeight": "Height value for each row. Requires the use of the **auto-grow** prop.",
-    "rows": "Default row count."
+    "rows": "Default row count.",
+    "suffix": "Displays suffix text."
   },
   "events": {
-    "keydown": "Emitted when **any** key is pressed, textarea must be focused."
+    "keydown": "Emitted when **any** key is pressed, textarea must be focused.",
+    "mousedown:control": "Event that is emitted when using mousedown on the main control area."
+  },
+  "slots": {
+    "counter": "Slot for the input’s counter text."
   }
 }

packages/api-generator/src/locale/en/virtual.json

@@ -5,4 +5,4 @@
   "exposed": {
     "scrollToIndex": "Scrolls to the item at a given index."
   }
-}
+}

packages/api-generator/tsconfig.json

@@ -11,6 +11,9 @@
       "@/*": [
         "../vuetify/src/*"
       ]
-    }
-  }
+    },
+  },
+  "include": [
+    "./src/locale/**/*.json",
+  ],
 }

packages/docs/src/components/api/ApiTable.vue

@@ -66,6 +66,7 @@
 
   // Utilities
   import { computed, PropType } from 'vue'
+  import { camelCase } from 'lodash-es'
 
   // Stores
   import { useAppStore } from '@/store/app'
@@ -94,7 +95,7 @@
     })
     if (!appStore.apiSearch) return items
 
-    const query = appStore.apiSearch.toLowerCase()
+    const query = camelCase(appStore.apiSearch).toLowerCase()
 
     return items.filter((item: any) => {
       return item.name.toLowerCase().includes(query)

packages/docs/src/components/app/bar/AuthDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <app-btn
-    v-if="!auth.user"
+    v-if="!auth.user && !auth.isLoading"
     v-bind="{
       [`${lgAndUp ? 'append-' : ''}icon`]: 'mdi-login',
       text: lgAndUp ? 'login.login' : undefined,
@@ -35,21 +35,26 @@
     </v-dialog>
   </app-btn>
 
-  <app-menu
+  <v-btn
     v-else
-    :items="items"
-    :open-on-hover="false"
+    id="login-btn"
+    :loading="auth.isLoading"
+    class="ms-1"
+    icon
   >
-    <template #activator="{ props: activatorProps }">
-      <v-btn
-        v-bind="activatorProps"
-        class="ms-1"
-        icon
-      >
-        <v-avatar :image="user.avatar || auth.user.picture || ''" />
-      </v-btn>
+    <app-menu
+      :disabled="!auth.user || auth.isLoading"
+      :items="items"
+      :open-on-hover="false"
+      activator="parent"
+    />
+
+    <v-avatar :image="user.avatar || auth.user?.picture || ''" />
+
+    <template #loader>
+      <v-skeleton-loader type="avatar" />
     </template>
-  </app-menu>
+  </v-btn>
 </template>
 
 <script setup lang="ts">
@@ -93,3 +98,14 @@
     },
   ]
 </script>
+
+<style lang="sass">
+  #login-btn
+    .v-skeleton-loader__avatar
+      min-height: 40px
+      height: 40px
+      width: 40px
+      max-height: 40px
+      min-width: 40px
+      max-width: 40px
+</style>

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

@@ -18,6 +18,17 @@
       />
     </v-col>
   </v-row>
+
+  <div v-else class="mb-4">
+    <app-btn
+      text="become-a-sponsor"
+      href="https://github.com/sponsors/johnleider"
+      border
+      target="_blank"
+      rel="noopener"
+      append-icon="mdi-open-in-new"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

packages/docs/src/components/user/UserBadges.vue

@@ -1,12 +1,17 @@
 <template>
-  <user-admin-badge :size="size" />
+  <div class="d-flex ga-1 justify-center">
+    <user-admin-badge :size="size" />
 
-  <user-sponsor-badge :size="size" />
+    <user-sponsor-badge :size="size" />
+
+    <user-one-badge :size="size" />
+  </div>
 </template>
 
 <script setup>
   // Components
   import UserAdminBadge from '@/components/user/badges/UserAdminBadge.vue'
+  import UserOneBadge from '@/components/user/badges/UserOneBadge.vue'
   import UserSponsorBadge from '@/components/user/badges/UserSponsorBadge.vue'
 
   defineProps({ size: [Number, String] })

packages/docs/src/components/user/UserProfile.vue

@@ -64,9 +64,11 @@
   import UserBadges from '@/components/user/UserBadges.vue'
 
   // Composables
-  import { computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
+  // Utilities
+  import { computed } from 'vue'
+
   // Stores
   import { useAuthStore } from '@/store/auth'
   import { useUserStore } from '@/store/user'