docs(Releases): add release reactions to selection display

vuetifyjs · May 24, 2023 · 0c47292 · 0c47292
1 parent d35c1ce
commit 0c47292
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/docs/src/components/doc/Releases.vue b/packages/docs/src/components/doc/Releases.vue
@@ -14,6 +14,24 @@
       prepend-inner-icon="mdi-text-box-search-outline"
       return-object
     >
+      <template #selection>
+        <div class="d-flex align-center">
+          <div class="me-1">{{ search?.tag_name }}</div>
+
+          &mdash;
+
+          <template v-for="(value, key) in reactions" :key="key">
+            <template v-if="search?.reactions?.[key]">
+              <span class="d-inline-flex align-center text-body-2 me-2">
+                {{ value }}
+
+                <span class="text-caption">{{ search.reactions[key] }}</span>
+              </span>
+            </template>
+          </template>
+        </div>
+      </template>
+
       <template #item="{ item, props: itemProps }">
         <v-list-item
           v-if="item?.title"
@@ -42,7 +60,7 @@
       >
         <v-list-item v-if="publishedOn" lines="two">
           <v-list-item-title class="d-flex align-center">
-            <i18n-t keypath="published-on">
+            <i18n-t keypath="published">
               <template #date>
                 <v-chip
                   :text="publishedOn"
@@ -103,6 +121,15 @@
   import { version } from 'vuetify'
   import { wait } from '@/util/helpers'
 
+  const reactions = {
+    '+1': '👍',
+    hooray: '🎉',
+    rocket: '🚀',
+    laugh: '😂',
+    heart: '❤️',
+    eyes: '👀',
+  }
+
   const { t } = useI18n()
   const date = useDate()
   const route = useRoute()

diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
@@ -170,7 +170,7 @@
   "professional-support": "Professional support",
   "progress": "Progress",
   "providers": "Providers",
-  "published-on": "Published on {date}",
+  "published": "Published: {date}",
   "pwa": {
     "install": "Install Vuetify Documentation",
     "new-content-available": "New content is available. Click **Refresh** to update.",