@veritree/ui 0.89.5 → 0.90.1

package/mixins/floating-ui-content.js

@@ -44,14 +44,12 @@ export const floatingUiContentMixin = {
 
         setTimeout(() => {
           if (!this.id) {
-            console.log('No id provided');
             return;
           }
 
           this.el = document.getElementById(this.id);
 
           if (!this.el) {
-            console.log('Element not found', this.id);
             return;
           }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.89.5",
+  "version": "0.90.1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Button/VTButton.vue

@@ -1,53 +1,15 @@
 <template>
-  <!-- :href="href" -->
   <component
     :is="tag"
     :to="to"
     :href="href || to"
     :type="type"
     :disabled="isDisabled"
-    :class="[
-      // default styles
-      headless ? 'button' : isIcon ? null : 'button-base',
-      // variant styles
-      headless
-        ? `button--${variant}`
-        : isPrimary
-          ? 'button--primary'
-          : isSecondary
-            ? isGhost
-              ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
-              : 'button--secondary'
-            : isTertiary
-              ? 'button--tertiary'
-              : isDark
-                ? 'button--dark'
-                : isIcon
-                  ? 'button--icon'
-                  : null,
-      // sizes styles
-      headless
-        ? `button--${size}`
-        : isLarge
-          ? isIcon
-            ? 'h-8 w-8'
-            : 'button--large'
-          : isSmall
-            ? isIcon
-              ? 'h-6 w-6 p-1'
-              : 'button--small'
-            : null,
-      isDisabled ? (isIcon ? '[&_svg]:text-gray-400' : null) : null,
-    ]"
+    :class="buttonClasses"
     v-on="$listeners"
   >
     <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
-    <span
-      :class="[
-        headless ? null : 'mx-auto inline-flex items-center gap-2 self-center',
-        headless && busy ? 'button--busy' : busy ? 'invisible' : null,
-      ]"
-    >
+    <span :class="spanClasses">
       <!-- @slot Use this slot for the button content -->
       <slot></slot>
     </span>
@@ -78,6 +40,11 @@ export default {
     variant: {
       type: String,
       default: 'primary',
+      validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'dark', 'icon'].includes(
+          value,
+        );
+      },
     },
 
     /**
@@ -90,6 +57,9 @@ export default {
     size: {
       type: String,
       default: 'large',
+      validator(value) {
+        return ['small', 'large'].includes(value);
+      },
     },
 
     /**
@@ -156,37 +126,99 @@ export default {
 
     appearance: {
       type: String,
-      default: 'normal', // normal or ghost
+      default: 'normal',
+      validator(value) {
+        return ['normal', 'ghost'].includes(value);
+      },
+    },
+
+    version: {
+      type: String,
+      default: '1',
     },
   },
 
   computed: {
-    isPrimary() {
-      return this.variant === 'primary';
-    },
+    buttonClasses() {
+      const classes = [];
 
-    isSecondary() {
-      return this.variant === 'secondary';
-    },
+      if (this.headless) {
+        // Headless mode - use semantic classes
+        classes.push('button');
+        classes.push(`button--${this.variant}`);
+        classes.push(`button--${this.size}`);
+      } else {
+        // Default mode - use component styles
 
-    isTertiary() {
-      return this.variant === 'tertiary';
-    },
+        // Default styles
+        if (!this.isIcon) {
+          classes.push('button-base');
+        }
 
-    isDark() {
-      return this.variant === 'dark';
-    },
+        // Variant styles
+        if (this.variant === 'primary') {
+          classes.push('button--primary');
+        }
 
-    isIcon() {
-      return this.variant === 'icon';
+        if (this.variant === 'secondary') {
+          classes.push('button--secondary');
+        }
+
+        if (this.variant === 'tertiary') {
+          classes.push('button--tertiary');
+        }
+
+        if (this.variant === 'dark') {
+          classes.push('button--dark');
+        }
+
+        if (this.isIcon) {
+          classes.push('button--icon');
+        }
+
+        // Ghost appearance can be applied to any variant
+        if (this.isGhost) {
+          classes.push('button--ghost');
+        }
+
+        // Size styles
+        if (this.size === 'large') {
+          classes.push(this.isIcon ? 'h-8 w-8' : 'button--large');
+        } else if (this.size === 'small') {
+          classes.push(this.isIcon ? 'h-6 w-6 p-1' : 'button--small');
+        }
+
+        if (this.version && this.version !== '1') {
+          classes.push(`button--version-${this.version}`);
+        }
+      }
+
+      // Disabled state (applies to both headless and non-headless)
+      if (this.isDisabled && this.isIcon) {
+        classes.push('[&_svg]:text-gray-400');
+      }
+
+      return classes.filter(Boolean);
     },
 
-    isLarge() {
-      return this.size === 'large';
+    spanClasses() {
+      const classes = [];
+
+      if (!this.headless) {
+        classes.push('mx-auto inline-flex items-center gap-2 self-center');
+      }
+
+      if (this.headless && this.busy) {
+        classes.push('button--busy');
+      } else if (this.busy) {
+        classes.push('invisible');
+      }
+
+      return classes.filter(Boolean);
     },
 
-    isSmall() {
-      return this.size === 'small';
+    isIcon() {
+      return this.variant === 'icon';
     },
 
     isDisabled() {

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -1,17 +1,11 @@
 <template>
   <header
     :id="id"
-    :class="[
-      headless
-        ? 'details-header'
-        : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
-    ]"
-    :aria-controls="ariaControls"
-    :aria-expanded="ariaExpanded"
-    role="button"
-    tabindex="0"
-    @click.prevent="toggle"
-    @keydown.enter="toggle"
+    :class="headerClasses"
+    v-bind="ariaAttributes"
+    @click.prevent="handleClick"
+    @keydown.enter.prevent="handleKeydown"
+    @keydown.space.prevent="handleKeydown"
   >
     <slot></slot>
   </header>
@@ -24,6 +18,18 @@ export default {
   inject: ['apiDisclosure', 'apiDetails'],
 
   props: {
+    /**
+     * If true, the header will not toggle visibility of the content.
+     * Useful for headers that are purely informational.
+     */
+    actionless: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * If true, the header will not have any visual styles applied.
+     * Useful for headless implementations where you want to style it yourself.
+     */
     headless: {
       type: Boolean,
       default: false,
@@ -31,15 +37,40 @@ export default {
   },
 
   computed: {
+    headerClasses() {
+      if (this.headless) {
+        return 'details-header';
+      }
+
+      const classes = ['flex justify-between gap-3 text-body font-semibold'];
+      classes.push(this.actionless ? 'cursor-default' : 'cursor-pointer');
+
+      return classes;
+    },
+
+    ariaAttributes() {
+      if (this.actionless) {
+        return {};
+      }
+
+      return {
+        'aria-controls': this.ariaControls,
+        'aria-expanded': this.ariaExpanded,
+        'role': 'button',
+        'tabindex': '0',
+      };
+    },
+
     id() {
       return this.apiDetails().idSummary;
     },
+
     ariaControls() {
       return this.apiDetails().idContent;
     },
 
     isVisible() {
-      return this.apiDetails().isVisible();
+      return this.apiDetails().visible;
     },
 
     ariaExpanded() {
@@ -49,8 +80,24 @@ export default {
 
   methods: {
     toggle() {
+      if (this.actionless) {
+        return;
+      }
+
       this.apiDetails().setVisible(!this.isVisible);
     },
+
+    handleClick() {
+      if (!this.actionless) {
+        this.toggle();
+      }
+    },
+
+    handleKeydown() {
+      if (!this.actionless) {
+        this.toggle();
+      }
+    },
   },
 };
 </script>

package/src/components/Disclosure/VTDisclosureIcon.vue

@@ -1,12 +1,14 @@
 <template>
-  <span
-    :class="[
-      headless ? 'disclosure-icon' : 'shrink-0 transition-all',
-      headless ? null : expanded ? 'rotate-180' : 'rotate-0',
-    ]"
+  <component
+    :is="as"
+    :class="iconClasses"
+    v-bind="ariaAttributes"
+    @click.stop="onClick"
+    @keydown.enter="onClick"
+    @keydown.space.prevent="onClick"
   >
     <slot><IconChevronDown /></slot>
-  </span>
+  </component>
 </template>
 
 <script>
@@ -20,12 +22,53 @@ export default {
       type: Boolean,
       default: false,
     },
+    as: {
+      type: String,
+      default: 'span',
+      validator(value) {
+        return ['span', 'button', 'div', 'a'].includes(value);
+      },
+    },
   },
 
   computed: {
+    ariaAttributes() {
+      if (this.as !== 'button') {
+        return {};
+      }
+
+      return {
+        'aria-expanded': String(this.expanded),
+        'aria-controls': this.apiDetails().idContent,
+      };
+    },
+
+    iconClasses() {
+      const classes = [];
+
+      if (this.headless) {
+        classes.push('disclosure-icon');
+      } else {
+        classes.push('shrink-0 transition-all');
+        classes.push(this.expanded ? 'rotate-180' : 'rotate-0');
+        classes.push(this.as === 'button' ? null : 'pointer-events-none');
+      }
+
+      return classes.filter(Boolean);
+    },
+
     expanded() {
       return this.apiDetails().visible;
     },
   },
+
+  methods: {
+    onClick() {
+      // Only handle click if rendered as a button
+      if (this.as === 'button') {
+        this.apiDetails().setVisible(!this.expanded);
+      }
+    },
+  },
 };
 </script>