chore: add icons for versions

vuejs · Oct 11, 2023 · 35b77c8 · 35b77c8
1 parent b097a1a
commit 35b77c8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/packages/online-playground/public/logo-ts.svg b/packages/online-playground/public/logo-ts.svg
diff --git a/packages/online-playground/public/logo-vue.svg b/packages/online-playground/public/logo-vue.svg
diff --git a/packages/online-playground/src/Header.vue b/packages/online-playground/src/Header.vue
@@ -57,11 +57,11 @@ function toggleDark() {
       <span>Pinia Playground</span>
     </h1>
     <div class="links">
-      <VersionSelect
-        v-model="store.state.typescriptVersion"
-        pkg="typescript"
-        label="TypeScript"
-      />
+      <VersionSelect v-model="store.state.typescriptVersion" pkg="typescript">
+        <template #label>
+          <img src="/logo-ts.svg" alt="TypeScript" class="version-logo" />
+        </template>
+      </VersionSelect>
       <!-- <VersionSelect
         :model-value="vueVersion"
         @update:model-value="setVueVersion"
@@ -83,8 +83,11 @@ function toggleDark() {
         :model-value="store.vueVersion || 'latest'"
         @update:model-value="setVueVersion"
         pkg="vue"
-        label="Vue"
-      />
+      >
+        <template #label>
+          <img src="/logo-vue.svg" alt="Vue" class="version-logo" />
+        </template>
+      </VersionSelect>
       <button
         title="Toggle development production mode"
         class="toggle-dev"
@@ -269,4 +272,9 @@ h1 img {
 .links > * + * {
   margin-left: 4px;
 }
+
+.version-logo {
+  height: 1.2em;
+  margin-right: 4px;
+}
 </style>
diff --git a/packages/online-playground/src/VersionSelect.vue b/packages/online-playground/src/VersionSelect.vue
@@ -7,7 +7,7 @@ const versions = ref<string[]>()
 const version = defineModel()
 const props = defineProps<{
   pkg: string
-  label: string
+  label?: string
 }>()
 
 async function toggle() {
@@ -79,7 +79,9 @@ onMounted(() => {
 <template>
   <div class="version" @click.stop>
     <span class="active-version" @click="toggle">
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
       <span class="number">{{ version }}</span>
     </span>