up

.eslintrc.cjs

@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   extends: ['@nuxt/eslint-config'],
   rules: {
+    'semi': ['error', 'never'],
     'comma-dangle': ['error', 'never'],
     'space-before-function-paren': ['error', 'always'],
     'vue/multi-word-component-names': 0,

docs/content/2.elements/1.avatar.md

@@ -10,10 +10,6 @@ description: Display an image that represents a resource or a group of resources
 props:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'
-  chipText: '12'
-  chipColor: 'primary'
-  chipPosition: 'top-right'
-  size: 'md'
 ---
 ::
 
@@ -39,9 +35,9 @@ Use the `chip-color`, `chip-text` and `chip-position` props to display a chip on
 ---
 props:
   chipColor: 'primary'
-  chipText: '23'
+  chipText: ''
   chipPosition: 'top-right'
-  size : 'xl'
+  size : 'sm'
 extraColors:
   - gray
 baseProps:

src/runtime/app.config.ts

@@ -75,8 +75,7 @@ const avatar = {
     '3xl': 'h-20 w-20 text-2xl'
   },
   chip: {
-    base: 'absolute block rounded-full ring-1 ring-white dark:ring-gray-900 text-center',
-    text: 'rounded-full p-1 text-{color}-500 bg-{color}-100',
+    base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
     background: 'bg-{color}-500 dark:bg-{color}-400',
     position: {
       'top-right': 'top-0 right-0',
@@ -85,15 +84,15 @@ const avatar = {
       'bottom-left': 'bottom-0 left-0'
     },
     size: {
-      '3xs': 'h-1 w-1',
-      '2xs': 'h-1 w-1',
-      xs: 'h-1.5 w-1.5',
-      sm: 'h-2 w-2',
-      md: 'h-2.5 w-2.5',
-      lg: 'h-3 w-3',
-      xl: 'h-3.5 w-3.5',
-      '2xl': 'h-3.5 w-3.5',
-      '3xl': 'h-4 w-4'
+      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
     }
   },
   default: {

src/runtime/components/elements/Avatar.vue

@@ -4,7 +4,7 @@
     <span v-else-if="text || placeholder" :class="ui.placeholder">{{ text || placeholder }}</span>
 
     <span v-if="chipColor" :class="chipClass">
-        <sup v-if="chipText" :class="chipTextClass">{{ chipText }}</sup>
+      {{ chipText }}
     </span>
     <slot />
   </span>
@@ -57,13 +57,13 @@ export default defineComponent({
         return Object.keys(appConfig.ui.avatar.chip.position).includes(value)
       }
     },
-    ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.avatar>>,
-      default: () => appConfig.ui.avatar
-    },
     chipText: {
       type: [String, Number],
       default: null
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.avatar>>,
+      default: () => appConfig.ui.avatar
     }
   },
   setup (props) {
@@ -89,23 +89,14 @@ export default defineComponent({
     })
 
     const chipClass = computed(() => {
-      // Conditionally handling background of chip When chipText is provided
       return classNames(
         ui.value.chip.base,
         ui.value.chip.size[props.size],
         ui.value.chip.position[props.chipPosition],
-        props.chipText ?  '' : 
-        ui.value.chip.background.replaceAll('{color}', props.chipColor),
+        ui.value.chip.background.replaceAll('{color}', props.chipColor)
       )
     })
 
-    const chipTextClass = computed( () => {
-      if(props.chipText){
-        return classNames(
-          ui.value.chip.text.replaceAll('{color}', props.chipColor)
-        )
-      }else return ''
-    });
     const url = computed(() => {
       if (typeof props.src === 'boolean') {
         return null
@@ -136,8 +127,7 @@ export default defineComponent({
       url,
       placeholder,
       error,
-      onError,
-      chipTextClass
+      onError
     }
   }
 })