@veritree/ui 0.89.5 → 0.90.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.89.5",
+  "version": "0.90.0",
   "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/VTDisclosureDetails.vue

@@ -102,6 +102,7 @@ export default {
     },
 
     setVisible(visible) {
+      console.log('setVisible', visible);
       this.visible = visible;
     },
   },

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -34,6 +34,7 @@ export default {
     id() {
       return this.apiDetails().idSummary;
     },
+
     ariaControls() {
       return this.apiDetails().idContent;
     },

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"
+    :aria-expanded="as === 'button' ? expanded : undefined"
+    @click.stop="onClick"
+    @keydown.enter="onClick"
+    @keydown.space.prevent="onClick"
   >
     <slot><IconChevronDown /></slot>
-  </span>
+  </component>
 </template>
 
 <script>
@@ -20,12 +22,41 @@ export default {
       type: Boolean,
       default: false,
     },
+    as: {
+      type: String,
+      default: 'span',
+      validator(value) {
+        return ['span', 'button', 'div', 'a'].includes(value);
+      },
+    },
   },
 
   computed: {
+    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');
+      }
+
+      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>