feat(theme): add width/height props to <VPImage> (#475)

* feat(theme): add `width/height` props to `<VPImage>`

* chore: tweak

theme/src/client/components/VPImage.vue

@@ -1,11 +1,25 @@
 <script lang="ts" setup>
 import type { ThemeImage } from '../../shared/index.js'
+import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
+import { numToUnit } from '../utils/index.js'
 
-defineProps<{
+const props = defineProps<{
   image: ThemeImage
   alt?: string
 }>()
+
+const styles = computed(() => {
+  const image = props.image
+  if (!image || typeof image === 'string')
+    return ''
+  if (!image.width || !image.height)
+    return ''
+  return {
+    width: numToUnit(image.width),
+    height: numToUnit(image.height),
+  }
+})
 </script>
 
 <script lang="ts">
@@ -19,6 +33,7 @@ export default {
     <img
       v-if="typeof image === 'string' || 'src' in image"
       class="vp-image"
+      :style="styles"
       v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
       :src="withBase(typeof image === 'string' ? image : image.src)"
       :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"

theme/src/client/utils/shared.ts

@@ -36,3 +36,12 @@ export function isActive(
 export function normalize(path: string): string {
   return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
 }
+
+export function numToUnit(value?: string | number): string {
+  if (typeof value === 'undefined')
+    return ''
+  if (String(Number(value)) === String(value)) {
+    return `${value}px`
+  }
+  return value as string
+}

theme/src/shared/base.ts

@@ -9,8 +9,8 @@ export type LiteralUnion<Union extends Base, Base = string> =
 
 export type ThemeImage =
   | string
-  | { src: string, alt?: string }
-  | { dark: string, light: string, alt?: string }
+  | { src: string, alt?: string, width: string | number, height: string | number }
+  | { dark: string, light: string, alt?: string, width: string | number, height: string | number }
 
 export type ThemeIcon = string | { svg: string }