cynx-lib 1.3.57 → 1.3.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.57",
+  "version": "1.3.58",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from "vue";
+import { computed, useSlots, type VNode } from "vue";
 import Spinner from "./Spinner.vue";
 
 const VARIANTS: Record<string, any> = {
@@ -116,6 +116,7 @@ const props = withDefaults(
     disabled?: boolean;
     loading?: boolean;
     type?: "button" | "submit" | "reset";
+    iconOnly?: boolean;
   }>(),
   {
     variant: "default",
@@ -123,6 +124,7 @@ const props = withDefaults(
     disabled: false,
     loading: false,
     type: "button",
+    iconOnly: false,
   }
 );
 
@@ -133,14 +135,31 @@ const emit = defineEmits<{
 const slots = useSlots();
 const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
 const s = computed(() => SIZES[props.size] || SIZES.md);
-const isIconOnly = computed(() => props.variant === "icon" || (!slots.default && (Boolean(slots.icon) || Boolean(slots.iconRight))));
+
+const hasDefaultText = computed(() => {
+  if (!slots.default) return false;
+  const nodes = slots.default();
+  if (!nodes || nodes.length === 0) return false;
+  return nodes.some((node: VNode) => {
+    if (node.type === Symbol.for("v-cmt")) return false;
+    if (typeof node.children === "string") return node.children.trim().length > 0;
+    if (Array.isArray(node.children)) return node.children.length > 0;
+    return Boolean(node.type);
+  });
+});
+
+const isIconOnly = computed(() => {
+  if (props.iconOnly || props.variant === "icon") return true;
+  const hasIconSlot = Boolean(slots.icon) || Boolean(slots.iconRight);
+  return hasIconSlot && !hasDefaultText.value;
+});
 </script>
 
 <template>
   <button
     :type="type"
     :disabled="disabled || loading"
-    :class="[`btn btn-${variant}`, 'inline-flex items-center justify-center gap-1.5 font-medium transition select-none']"
+    :class="[`btn btn-${variant}`, 'inline-flex items-center justify-center gap-1.5 font-medium transition select-none flex-shrink-0']"
     :style="{
       borderRadius: 'var(--rads, 8px)',
       fontFamily: 'var(--f, var(--sans, inherit))',
@@ -159,6 +178,7 @@ const isIconOnly = computed(() => props.variant === "icon" || (!slots.default &&
       height: `${s.height}px`,
       width: isIconOnly ? `${s.height}px` : undefined,
       minWidth: isIconOnly ? `${s.height}px` : undefined,
+      maxWidth: isIconOnly ? `${s.height}px` : undefined,
       ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
       ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
     }"