mejoras de UI 2

components/IconButton.client.vue

@@ -8,6 +8,7 @@
     :class="[
       'icon-button',
       {
+        'xsmall': size === 'xsmall',
         'large': size === 'large',
         'small': size === 'small'
       }
@@ -43,7 +44,7 @@ const props = defineProps({
   size: {
     type: String,
     default: 'normal',
-    validator: (value) => ['small', 'normal', 'large'].includes(value)
+    validator: (value) => ['xsmall', 'small', 'normal', 'large'].includes(value)
   },
   badge: {
     type: [String, Number],
@@ -55,6 +56,7 @@ defineEmits(['click'])
 
 const iconSize = computed(() => {
   switch (props.size) {
+    case 'xsmall': return 16
     case 'small': return 18
     case 'large': return 28
     default: return 20
@@ -67,6 +69,12 @@ const iconSize = computed(() => {
   position: relative;
 }
 
+.icon-button.xsmall {
+  width: 28px;
+  height: 28px;
+  font-size: 0.8rem;
+}
+
 .icon-button.small {
   width: 36px;
   height: 36px;
@@ -135,4 +143,4 @@ const iconSize = computed(() => {
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
 }
-</style>
+</style>