sprintify-ui 0.10.66 → 0.10.68

package/dist/types/components/BaseButton.vue.d.ts

@@ -39,6 +39,7 @@ type __VLS_Props = {
     to?: RouteLocationRaw;
     tooltip?: string | null | undefined;
 };
+declare const asInternal: import("vue").ComputedRef<string>;
 declare const classes: import("vue").ComputedRef<string>;
 declare const styles: import("vue").ComputedRef<{
     backgroundColor: string;
@@ -80,6 +81,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     BaseIcon: typeof BaseIcon;
+    asInternal: typeof asInternal;
     classes: typeof classes;
     styles: typeof styles;
     containerClass: typeof containerClass;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.66",
+  "version": "0.10.68",
   "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>

package/src/components/BaseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="as"
+    :is="asInternal"
     ref="buttonRef"
     :class="classes"
     :style="styles"
@@ -131,7 +131,7 @@ const props = withDefaults(defineProps<{
   to?: RouteLocationRaw;
   tooltip?: string | null | undefined;
 }>(), {
-  as: 'button',
+  as: undefined,
   disabled: false,
   class: '',
   loading: false,
@@ -149,6 +149,22 @@ const props = withDefaults(defineProps<{
 
 defineEmits(['click', 'mouseover', 'mouseleave', 'mouseenter']);
 
+const asInternal = computed(() => {
+  if (props.as) {
+    return props.as;
+  }
+
+  if (props.to) {
+    return 'RouterLink';
+  }
+
+  if (props.href) {
+    return 'a';
+  }
+
+  return 'button';
+});
+
 const sizeInternal = computed(() => {
 
   if (props.sizeBehavior == SizeBehavior.default) {