@veritree/ui 0.27.0 → 0.28.0-1

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="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);
-  },
 
-  beforeDestroy() {
-    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);
+    },
 
-  beforeDestroy() {
-    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);
+      }
     },
   },
 };

package/src/components/Divider/VTDivider.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="border-b border-gray-200" />
+</template>
+
+<script>
+export default {
+  name: 'VTDivider',
+};
+</script>

package/src/components/Drawer/VTDrawer.vue

@@ -1,7 +1,7 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
       aria-modal="true"
@@ -9,23 +9,18 @@
     >
       <slot></slot>
     </div>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDrawer',
 
-  components: {
-    Portal,
-  },
-
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;
@@ -58,12 +53,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -117,7 +108,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

package/src/components/Drawer/VTDrawerClose.vue

@@ -20,19 +20,19 @@ export default {
 
   components: { IconLeft, VTButton },
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDrawer().isRight;
     },
 
     // temporary till button theme is implemented
@@ -43,7 +43,7 @@ export default {
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDrawer().hide();
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     :enter-active-class="activeClass"
-    :enter-class="enterClass"
+    :enter-from-class="enterClass"
     :enter-to-class="enterToClass"
     :leave-active-class="activeClass"
-    :leave-class="leaveClass"
+    :leave-from-class="leaveClass"
     :leave-to-class="leaveToClass"
     @after-leave="hideDrawer"
   >
@@ -12,7 +12,7 @@
       v-show="visible"
       :class="{
         'Drawer-content': headless,
-        'fixed z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
+        'absolute z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
           !headless,
         'bg-white text-gray-600': !dark,
         'bg-fd-600': dark,
@@ -22,7 +22,7 @@
         'bottom-0': position === 'bottom',
       }"
       tabindex="-1"
-      @keydown.esc.stop="hide"
+      @keyup.esc="hide"
     >
       <slot></slot>
     </div>
@@ -33,7 +33,7 @@
 export default {
   name: 'VTDrawerContent',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -43,15 +43,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     position() {
-      return this.api().position;
+      return this.apiDrawer().position;
     },
 
     activeClass() {
@@ -132,7 +132,7 @@ export default {
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDrawer().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -148,7 +148,7 @@ export default {
     },
 
     hideDrawer() {
-      this.api().emit();
+      this.apiDrawer().emit();
     },
   },
 };

package/src/components/Drawer/VTDrawerFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="{ 'dialog-footer': headless }">
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
     <slot></slot>
   </component>
 </template>
@@ -8,7 +8,7 @@
 export default {
   name: 'VTDrawerFooter',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -19,11 +19,11 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
   },
 };

package/src/components/Drawer/VTDrawerHeader.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerHeader',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-header`;
+      return `${this.apiDrawer().id}-header`;
     },
   },
 };

package/src/components/Drawer/VTDrawerMain.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -23,15 +23,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +42,7 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-describedby', this.id);

package/src/components/Drawer/VTDrawerOverlay.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -29,21 +29,21 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-overlay`;
+      return `${this.apiDrawer().id}-overlay`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDrawer().registerOverlay(this);
   },
 
   methods: {

package/src/components/Drawer/VTDrawerTitle.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerTitle',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDrawer().id}-title`;
     },
   },
 
@@ -45,7 +45,7 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-labelledby', this.id);

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -83,11 +83,5 @@ export default {
       floatingUiMinWidth: 200,
     };
   },
-
-  computed: {
-    id() {
-      return `dropdown-menu-${this.componentId}`;
-    },
-  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -3,7 +3,6 @@
     :id="id"
     :visible="visible"
     :headless="headless"
-    :portal-class="$vnode.data.staticClass"
     component="dropdown"
   >
     <slot></slot>
@@ -46,5 +45,15 @@ export default {
 
     this.apiDropdownMenu().registerContent(content);
   },
+
+  methods: {
+    hidden() {
+      this.$emit('hidden');
+    },
+
+    shown() {
+      this.$emit('shown');
+    },
+  },
 };
 </script>