fix: (avatar) type error

any-design · Jun 5, 2024 · 4b9c54d · 4b9c54d
1 parent db5e492
commit 4b9c54d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/packages/avatar/AAvatar.vue b/src/packages/avatar/AAvatar.vue
@@ -8,13 +8,13 @@
 import type { StyleValue } from 'vue';
 import { computed } from 'vue';
 
-import { PREDEFINED_SIZE, type AvatarSize } from './types';
+import { AvatarSize, PREDEFINED_SIZE } from './types';
 
 import type { EnumValues } from '@/utils/types';
 
 const props = defineProps<{
   src: string;
-  size: EnumValues<typeof AvatarSize>;
+  size?: EnumValues<typeof AvatarSize>;
   width?: number | string;
   round?: boolean;
 }>();
@@ -26,7 +26,7 @@ const handleError = (event: Event) => {
 };
 
 const styles = computed<StyleValue>(() => {
-  const sizeValue = PREDEFINED_SIZE[props.size];
+  const sizeValue = PREDEFINED_SIZE[props.size || AvatarSize.Medium];
   const widthValue = props.width ?? `${sizeValue}px`;
 
   return {

diff --git a/src/testground/sections/avatar.vue b/src/testground/sections/avatar.vue
@@ -2,17 +2,17 @@
   <div class="testground-content__item">
     <p class="testground-content-title">Avatar</p>
     <div class="container">
-      <a-avatar src="https://0.gravatar.com/avatar/" size="xlarge" round />
-      <a-avatar src="https://0.gravatar.com/avatar/" size="large" />
-      <a-avatar src="https://0.gravatar.com/avatar/" size="medium" :width="40" />
-      <a-avatar src="https://0.gravatar.com/avatar/" size="small" width="50px" round />
-      <a-avatar src="https://0.gravatar.com/avatar/" size="xsmall" />
+      <a-avatar src="https://0.gravatar.com/avatar/" :size="AvatarSize.Large" round />
+      <a-avatar src="https://0.gravatar.com/avatar/" :size="AvatarSize.Medium" />
+      <a-avatar src="https://0.gravatar.com/avatar/" :width="40" />
+      <a-avatar src="https://0.gravatar.com/avatar/" width="50px" round />
+      <a-avatar src="https://0.gravatar.com/avatar/" :size="AvatarSize.XSmall" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Avatar as AAvatar } from '../../';
+import { Avatar as AAvatar, AvatarSize } from '../../';
 </script>
 
 <style lang="scss" scoped>