@veritree/ui 0.82.0 → 0.83.1

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -8,11 +8,7 @@
     :disabled="isDisabled"
     :class="[
       // default styles
-      headless
-        ? 'button'
-        : isIcon
-          ? 'relative inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
-          : 'button-base',
+      headless ? 'button' : isIcon ? null : 'button-base',
       // variant styles
       headless
         ? `button--${variant}`
@@ -23,11 +19,11 @@
               ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
               : 'button--secondary'
             : isTertiary
-              ? 'border-transparent text-gray-600 hover:text-gray-800 focus:text-gray-800 active:text-gray-800 disabled:text-gray-400'
+              ? 'button--tertiary'
               : isDark
-                ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
+                ? 'button--dark'
                 : isIcon
-                  ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400'
+                  ? 'button--icon'
                   : null,
       // sizes styles
       headless

package/src/components/Disclosure/VTDisclosure.vue

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

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -6,10 +6,10 @@
         ? 'details-content'
         : 'grid transition-[grid-template-rows] duration-300 ease-linear',
       headless
-        ? expanded
+        ? isVisible
           ? 'details-content--expanded'
           : null
-        : expanded
+        : isVisible
           ? 'grid-rows-[1fr]'
           : 'grid-rows-[0fr]',
     ]"
@@ -40,9 +40,6 @@ export default {
   data() {
     return {
       idGroup: this.apiDetails().idGroup,
-      expanded: this.open,
-      expandedHeight: null,
-      invisible: false,
     };
   },
 
@@ -50,40 +47,23 @@ export default {
     id() {
       return `disclosure-content-${this.idGroup}`;
     },
-  },
 
-  mounted() {
-    if (this.expanded) {
-      this.apiDetails().setVisible(this.expanded);
-    }
-
-    const content = {
-      id: this.id,
-      idGroup: this.idGroup,
-      collapse: this.collapse,
-      expand: this.expand,
-      isVisible: this.isVisible,
-    };
-
-    this.apiDisclosure().register('contents', content);
-  },
-
-  beforeDestroy() {
-    this.apiDisclosure().unregister('contents', this.id);
-  },
-
-  methods: {
-    expand() {
-      this.expanded = true;
+    isVisible() {
+      return this.apiDetails().isVisible();
     },
+  },
 
-    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

@@ -55,6 +55,18 @@ export default {
     };
   },
 
+  watch: {
+    visible(value) {
+      if (value && this.apiDisclosure().accordion) {
+        this.apiDisclosure().details.forEach((detail) => {
+          if (detail.idGroup !== this.idGroup) {
+            detail.hide();
+          }
+        });
+      }
+    },
+  },
+
   mounted() {
     const detail = {
       idGroup: this.idGroup,

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -7,7 +7,7 @@
         : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
     ]"
     :aria-controls="ariaControls"
-    :aria-expanded="String(ariaExpanded)"
+    :aria-expanded="ariaExpanded"
     role="button"
     tabindex="0"
     @click.prevent="toggle"
@@ -30,97 +30,26 @@ export default {
     },
   },
 
-  data() {
-    return {
-      ariaExpanded: false,
-    };
-  },
-
   computed: {
     id() {
       return this.apiDetails().idSummary;
     },
-
-    idGroup() {
-      return this.apiDetails().idGroup;
-    },
-
     ariaControls() {
       return this.apiDetails().idContent;
     },
 
-    details() {
-      return this.apiDisclosure().details;
-    },
-
-    headers() {
-      return this.apiDisclosure().headers;
+    isVisible() {
+      return this.apiDetails().isVisible();
     },
 
-    contents() {
-      return this.apiDisclosure().contents;
+    ariaExpanded() {
+      return String(this.isVisible);
     },
   },
 
-  mounted() {
-    this.isExpanded();
-
-    const header = {
-      id: this.id,
-      idGroup: this.idGroup,
-      isExpanded: this.isExpanded,
-    };
-
-    this.apiDisclosure().register('headers', header);
-  },
-
-  beforeDestroy() {
-    this.apiDisclosure().unregister('headers', this.id);
-  },
-
   methods: {
     toggle() {
-      this.toggleDetails();
-      this.toggleHeaders();
-      this.toggleContents();
-    },
-
-    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 (isAccordion && !isSameGroup) {
-          content.collapse();
-        }
-      });
-    },
-
-    toggleHeaders() {
-      this.headers.forEach((summary) => summary.isExpanded());
+      this.apiDetails().setVisible(!this.isVisible);
     },
   },
 };