@veritree/ui 0.90.0 → 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.90.0",
+  "version": "0.90.1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Disclosure/VTDisclosureDetails.vue

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

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,6 +37,30 @@ 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;
     },
@@ -40,7 +70,7 @@ export default {
     },
 
     isVisible() {
-      return this.apiDetails().isVisible();
+      return this.apiDetails().visible;
     },
 
     ariaExpanded() {
@@ -50,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

@@ -2,7 +2,7 @@
   <component
     :is="as"
     :class="iconClasses"
-    :aria-expanded="as === 'button' ? expanded : undefined"
+    v-bind="ariaAttributes"
     @click.stop="onClick"
     @keydown.enter="onClick"
     @keydown.space.prevent="onClick"
@@ -32,6 +32,17 @@ export default {
   },
 
   computed: {
+    ariaAttributes() {
+      if (this.as !== 'button') {
+        return {};
+      }
+
+      return {
+        'aria-expanded': String(this.expanded),
+        'aria-controls': this.apiDetails().idContent,
+      };
+    },
+
     iconClasses() {
       const classes = [];
 
@@ -40,6 +51,7 @@ export default {
       } 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);