diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue index d0515fbf..c52b14ff 100644 --- a/src/runtime/components/elements/Avatar.vue +++ b/src/runtime/components/elements/Avatar.vue @@ -66,6 +66,10 @@ const props = defineProps({ placeholderClass: { type: String, default: () => $ui.avatar.placeholder + }, + roundedClass: { + type: String, + default: () => $ui.avatar.rounded } }) @@ -74,14 +78,14 @@ const wrapperClass = computed(() => { props.wrapperClass, props.backgroundClass, $ui.avatar.size[props.size], - props.rounded ? 'rounded-full' : 'rounded-md' + props.rounded ? 'rounded-full' : props.roundedClass ) }) const avatarClass = computed(() => { return classNames( $ui.avatar.size[props.size], - props.rounded ? 'rounded-full' : 'rounded-md' + props.rounded ? 'rounded-full' : props.roundedClass ) }) diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts index 46afa24c..833acdab 100644 --- a/src/runtime/presets/default.ts +++ b/src/runtime/presets/default.ts @@ -326,6 +326,7 @@ const pills = { const avatar = { wrapper: 'relative inline-flex items-center justify-center', background: 'u-bg-gray-100', + rounded: 'rounded-md', placeholder: 'text-xs font-medium leading-none u-text-black truncate', size: { xxxs: 'h-4 w-4 text-xs',