@veritree/ui 0.27.0-2 → 0.27.0-3

package/package.json

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

package/src/components/Disclosure/VTDisclosure.vue

@@ -11,11 +11,8 @@ export default {
   provide() {
     return {
       apiDisclosure: () => {
-        const details = this.details;
-        const contents = this.contents;
         const accordion = this.accordion;
-        const headers = this.headers;
-        const icons = this.icons;
+        const details = this.details;
 
         const register = (objKey, item) => {
           if (!item) return;
@@ -28,11 +25,8 @@ export default {
         };
 
         return {
-          details,
-          contents,
-          headers,
-          icons,
           accordion,
+          details,
           register,
           unregister,
         };
@@ -50,9 +44,6 @@ export default {
   data() {
     return {
       details: [],
-      contents: [],
-      headers: [],
-      icons: [],
     };
   },
 };

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -4,12 +4,19 @@
     :class="[
       headless
         ? 'details-content'
-        : 'overflow-hidden transition-[height] duration-300 ease-linear',
-      invisible ? 'absolute opacity-0' : 'h-[var(--height)]',
+        : 'grid transition-[grid-template-rows] duration-300 ease-linear',
+      headless
+        ? isVisible
+          ? 'details-content--expanded'
+          : null
+        : isVisible
+          ? 'grid-rows-[1fr]'
+          : 'grid-rows-[0fr]',
     ]"
-    :style="`--height: ${height};`"
   >
-    <slot></slot>
+    <div :class="[headless ? 'detail-content__overflow' : 'overflow-hidden']">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -24,14 +31,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
       idGroup: this.apiDetails().idGroup,
-      expanded: false,
-      expandedHeight: null,
-      invisible: false,
     };
   },
 
@@ -40,56 +48,22 @@ export default {
       return `disclosure-content-${this.idGroup}`;
     },
 
-    height() {
-      return this.expanded ? this.expandedHeight : 0;
+    isVisible() {
+      return this.apiDetails().isVisible();
     },
   },
 
-  mounted() {
-    this.handleVisibleHeight();
-
-    const content = {
-      id: this.id,
-      idGroup: this.idGroup,
-      collapse: this.collapse,
-      expand: this.expand,
-      isVisible: this.isVisible,
-    };
-
-    this.apiDisclosure().register('contents', content);
-  },
-
-  beforeUnmount() {
-    this.apiDisclosure().unregister('contents', this.id);
-  },
-
-  methods: {
-    handleVisibleHeight() {
-      // make panel position absolute and opacity 0,
-      // to have it fully opened but not visible
-      this.invisible = true;
-
-      setTimeout(() => {
-        // get computed height now since its fully opened
-        // this height will be used by a css custom property to enable the transition
-        this.expandedHeight = window.getComputedStyle(this.$el).height;
-
-        // make invisible false once the full height is set
-        this.invisible = false;
-      }, 500);
-    },
-
-    expand() {
-      this.expanded = true;
-    },
-
-    collapse() {
-      this.expanded = false;
+  watch: {
+    open(value) {
+      this.apiDetails().setVisible(value);
+      this.expand = value;
     },
+  },
 
-    isVisible() {
-      return this.expanded;
-    },
+  mounted() {
+    if (this.open) {
+      this.apiDetails().setVisible(this.open);
+    }
   },
 };
 </script>

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      headless ? 'disclosure-details' : 'group relative',
+      headless ? 'disclosure-details' : 'relative',
       headless ? (visible ? 'is-open' : null) : null,
     ]"
   >
@@ -26,6 +26,7 @@ export default {
         const idContent = `details-content-${idGroup}`;
 
         const isVisible = () => this.isVisible();
+        const setVisible = (visible) => this.setVisible(visible);
 
         return {
           idGroup,
@@ -33,6 +34,8 @@ export default {
           idIcon,
           idContent,
           isVisible,
+          setVisible,
+          visible: this.visible,
         };
       },
     };
@@ -52,6 +55,22 @@ export default {
     };
   },
 
+  watch: {
+    visible(value) {
+      if (value && this.apiDisclosure().accordion) {
+        this.apiDisclosure().details.forEach((detail) => {
+          if (detail.idGroup !== this.idGroup) {
+            detail.hide();
+          }
+
+          if (detail.idGroup === this.idGroup) {
+            detail.show();
+          }
+        });
+      }
+    },
+  },
+
   mounted() {
     const detail = {
       idGroup: this.idGroup,
@@ -63,22 +82,28 @@ export default {
     this.apiDisclosure().register('details', detail);
   },
 
-  beforeUnmount() {
+  beforeDestroy() {
     this.apiDisclosure().unregister('details', this.id);
   },
 
   methods: {
     show() {
+      this.$emit('toggle', true);
       this.visible = true;
     },
 
     hide() {
+      this.$emit('toggle', false);
       this.visible = false;
     },
 
     isVisible() {
       return this.visible;
     },
+
+    setVisible(visible) {
+      this.visible = visible;
+    },
   },
 };
-</script>
+</script>

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -1,17 +1,11 @@
 <template>
   <header
     :id="id"
-    :class="[
-      headless
-        ? 'details-header'
-        : 'text-body flex cursor-pointer justify-between gap-3 font-semibold',
-    ]"
-    :aria-controls="ariaControls"
-    :aria-expanded="String(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,112 +18,85 @@ 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,
     },
   },
 
-  data() {
-    return {
-      ariaExpanded: false,
-    };
-  },
-
   computed: {
-    id() {
-      return this.apiDetails().idSummary;
-    },
+    headerClasses() {
+      if (this.headless) {
+        return 'details-header';
+      }
 
-    idGroup() {
-      return this.apiDetails().idGroup;
-    },
+      const classes = ['flex justify-between gap-3 text-body font-semibold'];
+      classes.push(this.actionless ? 'cursor-default' : 'cursor-pointer');
 
-    ariaControls() {
-      return this.apiDetails().idContent;
+      return classes;
     },
 
-    details() {
-      return this.apiDisclosure().details;
+    ariaAttributes() {
+      if (this.actionless) {
+        return {};
+      }
+
+      return {
+        'aria-controls': this.ariaControls,
+        'aria-expanded': this.ariaExpanded,
+        'role': 'button',
+        'tabindex': '0',
+      };
     },
 
-    headers() {
-      return this.apiDisclosure().headers;
+    id() {
+      return this.apiDetails().idSummary;
     },
 
-    icons() {
-      return this.apiDisclosure().icons;
+    ariaControls() {
+      return this.apiDetails().idContent;
     },
 
-    contents() {
-      return this.apiDisclosure().contents;
+    isVisible() {
+      return this.apiDetails().visible;
     },
-  },
-
-  mounted() {
-    this.isExpanded();
-
-    const header = {
-      id: this.id,
-      idGroup: this.idGroup,
-      isExpanded: this.isExpanded,
-    };
-
-    this.apiDisclosure().register('headers', header);
-  },
 
-  beforeUnmount() {
-    this.apiDisclosure().unregister('headers', this.id);
+    ariaExpanded() {
+      return String(this.isVisible);
+    },
   },
 
   methods: {
     toggle() {
-      this.toggleDetails();
-      this.toggleHeaders();
-      this.toggleContents();
-      this.toggleIcons();
-    },
-
-    isExpanded() {
-      this.ariaExpanded = this.apiDetails().isVisible();
-    },
-
-    toggleDetails() {
-      this.details.forEach((detail) => {
-        const isSameGroup = detail.idGroup === this.idGroup;
-        const isAccordion = this.apiDisclosure().accordion;
-
-        if (isSameGroup) {
-          detail.isVisible() ? detail.hide() : detail.show();
-        }
-
-        if (isAccordion && !isSameGroup) {
-          detail.hide();
-        }
-      });
-    },
-
-    toggleContents() {
-      this.contents.forEach((content) => {
-        const isSameGroup = content.idGroup === this.idGroup;
-        const isAccordion = this.apiDisclosure().accordion;
-
-        if (isSameGroup) {
-          content.isVisible() ? content.collapse() : content.expand();
-        }
+      if (this.actionless) {
+        return;
+      }
 
-        if (isAccordion && !isSameGroup) {
-          content.collapse();
-        }
-      });
+      this.apiDetails().setVisible(!this.isVisible);
     },
 
-    toggleHeaders() {
-      this.headers.forEach((summary) => summary.isExpanded());
+    handleClick() {
+      if (!this.actionless) {
+        this.toggle();
+      }
     },
 
-    toggleIcons() {
-      this.icons.forEach((icon) => icon.isExpanded());
+    handleKeydown() {
+      if (!this.actionless) {
+        this.toggle();
+      }
     },
   },
 };

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,43 +22,52 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      expanded: false,
-    };
+    as: {
+      type: String,
+      default: 'span',
+      validator(value) {
+        return ['span', 'button', 'div', 'a'].includes(value);
+      },
+    },
   },
 
   computed: {
-    id() {
-      return this.apiDetails().idIcon;
-    },
+    ariaAttributes() {
+      if (this.as !== 'button') {
+        return {};
+      }
 
-    idGroup() {
-      return this.apiDetails().idGroup;
+      return {
+        'aria-expanded': String(this.expanded),
+        'aria-controls': this.apiDetails().idContent,
+      };
     },
-  },
 
-  mounted() {
-    this.isExpanded();
+    iconClasses() {
+      const classes = [];
 
-    const icon = {
-      id: this.id,
-      idGroup: this.idGroup,
-      isExpanded: this.isExpanded,
-    };
+      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');
+      }
 
-    this.apiDisclosure().register('icons', icon);
-  },
+      return classes.filter(Boolean);
+    },
 
-  beforeUnmount() {
-    this.apiDisclosure().unregister('icons', this.id);
+    expanded() {
+      return this.apiDetails().visible;
+    },
   },
 
   methods: {
-    isExpanded() {
-      this.expanded = this.apiDetails().isVisible();
+    onClick() {
+      // Only handle click if rendered as a button
+      if (this.as === 'button') {
+        this.apiDetails().setVisible(!this.expanded);
+      }
     },
   },
 };