sprintify-ui 0.10.66 → 0.10.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.66",
+  "version": "0.10.67",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseBadge.stories.js

@@ -94,6 +94,8 @@ export const Sizes = (args) => ({
     <BaseBadge v-bind="args" :size="size">
       Administrator
     </BaseBadge>
+    <BaseBadge v-bind="args" :size="size">
+    </BaseBadge>
   </div>
   `,
 });
@@ -127,4 +129,4 @@ export const Wrap = (args) => ({
     </BaseBadge>
   </div>
   `,
-});
+});

package/src/components/BaseBadge.vue

@@ -67,31 +67,52 @@ const sizeInternal = computed(() => {
   return props.size;
 });
 
+const slots = useSlots();
+
+const hasDefaultSlot = computed(() => !!(slots.default));
+
 const classes = computed(() => {
   const base = 'inline-flex items-center rounded leading-tight';
-  const size = {
-    xs: 'px-1 py-px text-[9px]',
-    sm: 'px-1.5 py-px text-[10px]',
-    md: 'px-1.5 py-0.5 text-xs',
-    lg: 'px-1.5 py-0.5 text-sm',
-    xl: 'px-2.5 py-1.5 text-sm',
+
+  const fontSize = {
+    xs: 'text-[9px]',
+    sm: 'text-[10px]',
+    md: 'text-xs',
+    lg: 'text-sm',
+    xl: 'text-sm',
+  }[sizeInternal.value];
+
+  const padding = {
+    xs: hasDefaultSlot.value ? 'px-1 py-px' : 'p-[3.7px]',
+    sm: hasDefaultSlot.value ? 'px-1.5 py-px' : 'p-[3.7px]',
+    md: hasDefaultSlot.value ? 'px-1.5 py-0.5' : 'p-1',
+    lg: hasDefaultSlot.value ? 'px-1.5 py-0.5' : 'p-1',
+    xl: hasDefaultSlot.value ? 'px-2.5 py-1.5' : 'p-1.5',
   }[sizeInternal.value];
 
   const wrap = props.wrap ? '' : 'whitespace-nowrap';
 
-  return twMerge(base, wrap, size, props.class);
+  return twMerge(base, wrap, fontSize, padding, props.class);
 })
 
 const iconSizeClasses = computed(() => {
 
   const size = {
-    xs: 'h-2 w-2 mr-1',
-    sm: 'h-2.5 w-2.5 mr-1',
-    md: 'h-3 w-3 mr-1',
-    lg: 'h-4 w-4 mr-1',
-    xl: 'h-5 w-5 mr-1.5',
+    xs: 'h-2 w-2',
+    sm: 'h-2.5 w-2.5',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+    xl: 'h-5 w-5',
+  }[sizeInternal.value];
+
+  const margin = {
+    xs: hasDefaultSlot.value ? 'mr-1' : '',
+    sm: hasDefaultSlot.value ? 'mr-1' : '',
+    md: hasDefaultSlot.value ? 'mr-1' : '',
+    lg: hasDefaultSlot.value ? 'mr-1' : '',
+    xl: hasDefaultSlot.value ? 'mr-1.5' : '',
   }[sizeInternal.value];
 
-  return size;
+  return twMerge(size, margin);
 });
 </script>