Merge branch 'master' into VList-accessibility

.github/actions/yarn-install/action.yml

@@ -1,6 +1,11 @@
 name: Yarn install
 description: Restore node_modules and cache, then run yarn install
 
+inputs:
+  npm-token:
+    description: 'NPM token'
+    required: true
+
 runs:
   using: composite
   steps:

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
   CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
 jobs:
   pre_job:

.npmrc

@@ -0,0 +1,2 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+@vuetify:registry=https://registry.npmjs.org/

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

@@ -4,6 +4,7 @@
     "flat": "Removes the button box shadow. This is different than using the 'flat' variant.",
     "icon": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.",
     "plain": "Removes the default background change applied when hovering over the button.",
-    "stacked": "Displays the button as a flex-column."
+    "stacked": "Displays the button as a flex-column.",
+    "slim": "Reduces padding to 0 8px."
   }
 }

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

@@ -5,6 +5,7 @@
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.",
-    "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you."
+    "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you.",
+    "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation."
   }
 }

packages/docs/package.json

@@ -23,6 +23,7 @@
     "@cosmicjs/sdk": "^1.0.10",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@vuetify/one": "^0.0.6",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",

packages/docs/src/App.vue

@@ -10,8 +10,7 @@
   import { useTheme } from 'vuetify'
 
   // Stores
-  import { useAuthStore } from '@/store/auth'
-  import { useUserStore } from '@/store/user'
+  import { useAuthStore, useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue'

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

@@ -71,7 +71,7 @@
   // Stores
   import { useAppStore } from '@/store/app'
   import { useLocaleStore } from '@/store/locale'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   const props = defineProps({
     headers: {

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

@@ -40,7 +40,7 @@
   // Composables
   import { useI18n } from 'vue-i18n'
   import { useRoute } from 'vue-router'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed, onBeforeMount, ref } from 'vue'

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

@@ -77,7 +77,7 @@
   import { useDisplay } from 'vuetify'
   import { useGtag } from 'vue-gtag-next'
   import { useRoute } from 'vue-router'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed, onBeforeMount } from 'vue'

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

@@ -71,7 +71,7 @@
   // Composables
   import { useI18n } from 'vue-i18n'
   import { useTheme } from 'vuetify'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { ComponentPublicInstance, computed, ref, watchEffect } from 'vue'

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

@@ -103,14 +103,17 @@
             />
           </v-col>
 
-          <v-col cols="12">
+          <v-col
+            v-if="!user.disableAds && spot.spot"
+            cols="12"
+          >
             <a
-              href="https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=7"
+              :href="spot.spot.href"
               target="_blank"
               rel="noopener noreferrer sponsored"
-              @click="gtagClick('toc', 'promotion', 'adminmart')"
+              @click="gtagClick('toc', 'promotion', spot.spot.sponsor)"
             >
-              <v-img src="https://cdn.vuetifyjs.com/docs/images/promotions/wp-nov-23/wp-nov-23.png" />
+              <v-img :src="spot.spot.image.url" />
             </a>
           </v-col>
         </v-row>
@@ -125,15 +128,19 @@
 
   // Composables
   import { useRoute, useRouter } from 'vue-router'
-  import { storeToRefs } from 'pinia'
+  import { useTheme } from 'vuetify'
+
+  // Stores
   import { useAppStore } from '@/store/app'
+  import { useUserStore } from '@vuetify/one'
   import { useSponsorsStore } from '@/store/sponsors'
-  import { useTheme } from 'vuetify'
+  import { useSpotStore } from '@/store/spot'
 
   // Utilities
   import { computed, nextTick, onMounted, onScopeDispose, ref, watch } from 'vue'
   import { gtagClick } from '@/util/analytics'
   import { rpath } from '@/util/routes'
+  import { storeToRefs } from 'pinia'
 
   type TocItem = {
     to: string;
@@ -145,7 +152,9 @@
 
   const route = useRoute()
   const router = useRouter()
+  const spot = useSpotStore()
   const theme = useTheme()
+  const user = useUserStore()
 
   const routeToc = computed(() => route.meta.toc as TocItem[] | undefined)
 

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

@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
   import { computed } from 'vue'
 
   const user = useUserStore()

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

@@ -67,8 +67,7 @@
   import { useI18n } from 'vue-i18n'
 
   // Stores
-  import { useAuthStore } from '@/store/auth'
-  import { useUserStore } from '@/store/user'
+  import { useAuthStore, useUserStore } from '@vuetify/one'
 
   // Utilities
   import { rpath } from '@/util/routes'

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

@@ -48,14 +48,13 @@
 
       <app-vertical-divider v-if="lgAndUp" class="ms-2 me-3" />
 
-      <app-bar-auth-dialog />
+      <vo-auth-dialog @click:dashboard="onClickDashboard" />
     </template>
   </v-app-bar>
 </template>
 
 <script setup>
   // Components
-  import AppBarAuthDialog from './AuthDialog.vue'
   import AppBarEcosystemMenu from './EcosystemMenu.vue'
   import AppBarEnterpriseLink from './EnterpriseLink.vue'
   import AppBarJobsLink from './JobsLink.vue'
@@ -74,23 +73,29 @@
   // Composables
   import { useAppStore } from '@/store/app'
   import { useDisplay, useTheme } from 'vuetify'
-  import { useRoute } from 'vue-router'
+  import { useRoute, useRouter } from 'vue-router'
 
   // Stores
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed } from 'vue'
+  import { rpath } from '@/util/routes'
 
   const app = useAppStore()
   const user = useUserStore()
   const { smAndUp, mdAndUp, lgAndUp, mdAndDown } = useDisplay()
   const route = useRoute()
+  const router = useRouter()
   const theme = useTheme()
 
   const image = computed(() => {
     if (['dark', 'light'].includes(theme.name.value)) return undefined
 
     return `https://cdn.vuetifyjs.com/docs/images/themes/${theme.name.value}-app-bar.png`
   })
+
+  function onClickDashboard () {
+    router.push(rpath('/user/dashboard/'))
+  }
 </script>

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

@@ -120,7 +120,7 @@
   import { useI18n } from 'vue-i18n'
 
   // Stores
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed, onMounted, ref } from 'vue'
@@ -184,7 +184,7 @@
   }
   function toggle ({ slug }: Notification) {
     user.notifications.read = user.notifications.read.includes(slug)
-      ? user.notifications.read.filter(n => n !== slug)
+      ? user.notifications.read.filter((n: any) => n !== slug)
       : [...user.notifications.read, slug]
   }
 

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

@@ -12,7 +12,7 @@
   // Composables
   import { useRoute } from 'vue-router'
   import { useTheme } from 'vuetify'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed } from 'vue'

packages/docs/src/components/app/drawer/Append.vue

@@ -36,7 +36,7 @@
   import DrawerToggleRail from '@/components/app/drawer/DrawerToggleRail.vue'
 
   // Stores
-  import { useAuthStore } from '@/store/auth'
+  import { useAuthStore } from '@vuetify/one'
   import { useCommitsStore } from '@/store/commits'
 
   // Utilities

packages/docs/src/components/app/drawer/Drawer.vue

@@ -35,7 +35,7 @@
 
   // Stores
   import { useAppStore } from '@/store/app'
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   const app = useAppStore()
   const user = useUserStore()

packages/docs/src/components/app/drawer/DrawerToggleRail.vue

@@ -11,7 +11,7 @@
 
 <script setup>
   // Stores
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Utilities
   import { computed } from 'vue'

packages/docs/src/components/app/search/Search.vue

@@ -50,20 +50,29 @@
         </template>
       </app-text-field>
 
-      <v-card-text :class="['px-4 py-0 d-flex justify-center', searchString ? 'align-start' : 'align-center']">
-        <div v-if="!searchString" class="text-center">
-          <v-icon
-            class="mb-6 mx-auto text-disabled"
-            icon="mdi-text-box-search-outline"
-            size="150"
-          />
-
-          <br>
-
-          <v-list-subheader class="d-inline-flex">
-            {{ t('search.results') }}
-          </v-list-subheader>
-        </div>
+      <v-card-text :class="['px-4 py-0 d-flex flex-wrap justify-center', searchString ? 'align-start' : 'align-center']">
+
+        <search-recent
+          v-if="searches.length && !searchString"
+          :searches="searches"
+          @click:delete="onClickDelete"
+        />
+
+        <template v-else-if="!searchString">
+          <div class="text-center">
+            <v-icon
+              class="mb-6 mx-auto text-disabled"
+              icon="mdi-text-box-search-outline"
+              size="150"
+            />
+
+            <br>
+
+            <v-list-subheader class="d-inline-flex">
+              {{ t('search.results') }}
+            </v-list-subheader>
+          </div>
+        </template>
 
         <ais-instant-search
           v-else
@@ -79,7 +88,11 @@
           />
 
           <ais-hits v-slot="{ items }">
-            <search-results ref="list" :groups="transformItems(items)" />
+            <search-results
+              ref="list"
+              :groups="transformItems(items)"
+              @click:result="onClickResult"
+            />
           </ais-hits>
         </ais-instant-search>
       </v-card-text>
@@ -93,6 +106,7 @@
 
 <script setup lang="ts">
   // Components
+  import SearchRecent from './SearchRecent.vue'
   import SearchResults from './SearchResults.vue'
 
   // Composables
@@ -102,11 +116,11 @@
 
   // Utilities
   import { AisConfigure, AisHits, AisInstantSearch, AisPoweredBy } from 'vue-instantsearch/vue3/es/src/instantsearch.js'
-  import { onBeforeUnmount, onMounted, ref } from 'vue'
+  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
   import algoliasearch from 'algoliasearch'
 
   // Stores
-  import { useUserStore } from '@/store/user'
+  import { useUserStore } from '@vuetify/one'
 
   // Types
   import type { AlgoliaSearchHelper } from 'algoliasearch-helper'
@@ -123,9 +137,14 @@
     'NHT6C0IV19', // docsearch app ID
     'ffa344297924c76b0f4155384aff7ef2' // vuetify API key
   )
+  const searches = ref(JSON.parse(localStorage.getItem('searches') || '[]'))
 
   const locale = 'en'
 
+  watch(searches, val => {
+    localStorage.setItem('searches', JSON.stringify(val))
+  })
+
   onMounted(() => {
     document.addEventListener('keydown', onDocumentKeydown)
     if (query?.search) {
@@ -198,6 +217,21 @@
       list.value?.rootEl?.focus()
     }
   }
+  function onClickDelete (index: number) {
+    const array = searches.value.slice(0, 6)
+
+    array.splice(index, 1)
+
+    searches.value = array
+  }
+
+  function onClickResult (result: any) {
+    const array = searches.value.slice(0, 6)
+
+    array.unshift(result)
+
+    searches.value = array
+  }
 </script>
 
 <style scoped>