feat: add size prop to avatar component and update logo component for size handling (#5684)

Author: mynetfan

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -16,6 +16,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
   class?: ClassType;
   dot?: boolean;
   dotClass?: ClassType;
+  size?: number;
 }
 
 defineOptions({
@@ -32,10 +33,23 @@ const props = withDefaults(defineProps<Props>(), {
 const text = computed(() => {
   return props.alt.slice(-2).toUpperCase();
 });
+
+const rootStyle = computed(() => {
+  return props.size !== undefined && props.size > 0
+    ? {
+        height: `${props.size}px`,
+        width: `${props.size}px`,
+      }
+    : {};
+});
 </script>
 
 <template>
-  <div :class="props.class" class="relative flex flex-shrink-0 items-center">
+  <div
+    :class="props.class"
+    :style="rootStyle"
+    class="relative flex flex-shrink-0 items-center"
+  >
     <Avatar :class="props.class" class="size-full">
       <AvatarImage :alt="alt" :src="src" />
       <AvatarFallback>{{ text }}</AvatarFallback>

packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

@@ -52,7 +52,8 @@ withDefaults(defineProps<Props>(), {
         v-if="src"
         :alt="text"
         :src="src"
-        class="relative w-8 rounded-none bg-transparent"
+        :size="logoSize"
+        class="relative rounded-none bg-transparent"
       />
       <span
         v-if="!collapsed"