@veritree/ui 0.14.0 → 0.16.0

package/index.js

@@ -34,22 +34,17 @@ import VTInputDate from "./src/components/Input/VTInputDate.vue";
 import VTInputFile from "./src/components/Input/VTInputFile.vue";
 import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
 import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
-
 import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
-
 import VTModal from "./src/components/Modal/VTModal.vue";
-
 import VTAccordion from "./src/components/Accordion/VTAccordion.vue";
 import VTAccordionButton from "./src/components/Accordion/VTAccordionButton.vue";
 import VTAccordionGroup from "./src/components/Accordion/VTAccordionGroup.vue";
 import VTAccordionPanel from "./src/components/Accordion/VTAccordionPanel.vue";
-
 import VTTab from "./src/components/Tabs/VTTab.vue";
 import VTTabGroup from "./src/components/Tabs/VTTabGroup.vue";
 import VTTabList from "./src/components/Tabs/VTTabList.vue";
 import VTTabPanel from "./src/components/Tabs/VTTabPanel.vue";
 import VTTabPanels from "./src/components/Tabs/VTTabPanels.vue";
-
 import VTDialog from "./src/components/Dialog/VTDialog.vue";
 import VTDialogClose from "./src/components/Dialog/VTDialogClose.vue";
 import VTDialogContent from "./src/components/Dialog/VTDialogContent.vue";
@@ -58,7 +53,6 @@ import VTDialogHeader from "./src/components/Dialog/VTDialogHeader.vue";
 import VTDialogMain from "./src/components/Dialog/VTDialogMain.vue";
 import VTDialogOverlay from "./src/components/Dialog/VTDialogOverlay.vue";
 import VTDialogTitle from "./src/components/Dialog/VTDialogTitle.vue";
-
 import VTDrawer from "./src/components/Drawer/VTDrawer.vue";
 import VTDrawerClose from "./src/components/Drawer/VTDrawerClose.vue";
 import VTDrawerContent from "./src/components/Drawer/VTDrawerContent.vue";
@@ -67,6 +61,11 @@ import VTDrawerHeader from "./src/components/Drawer/VTDrawerHeader.vue";
 import VTDrawerTitle from "./src/components/Drawer/VTDrawerTitle.vue";
 import VTDrawerMain from "./src/components/Drawer/VTDrawerMain.vue";
 import VTDrawerOverlay from "./src/components/Drawer/VTDrawerOverlay.vue";
+import VTDisclosure from "./src/components/Disclosure/VTDisclosure.vue";
+import VTDisclosureDetails from "./src/components/Disclosure/VTDisclosureDetails.vue";
+import VTDisclosureHeader from "./src/components/Disclosure/VTDisclosureHeader.vue";
+import VTDisclosureIcon from "./src/components/Disclosure/VTDisclosureIcon.vue";
+import VTDisclosureContent from "./src/components/Disclosure/VTDisclosureContent.vue";
 
 export {
   VTAvatar,
@@ -132,4 +131,9 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
+  VTDisclosure,
+  VTDisclosureDetails,
+  VTDisclosureHeader,
+  VTDisclosureIcon,
+  VTDisclosureContent,
 };

package/nuxt.js

@@ -6,6 +6,7 @@ const components = [
   'src/components/Button',
   'src/components/Drawer',
   'src/components/Dialog',
+  'src/components/Disclosure',
   'src/components/DropdownMenu',
   'src/components/Form',
   'src/components/Listbox',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.19.0"
-  }
+  },
+  "devDependencies": {}
 }

package/src/components/Dialog/VTDialog.vue

@@ -1,23 +1,30 @@
 <template>
-  <div
-    v-if="visible"
-    :id="id"
-    :class="{
-      Dialog: headless,
-      'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-    }"
-    aria-modal="true"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
+  <Portal>
+    <div
+      v-if="visible"
+      :id="id"
+      :class="{
+        Dialog: headless,
+        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
+      }"
+      aria-modal="true"
+      @click="onClick"
+    >
+      <slot></slot>
+    </div>
+  </Portal>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { Portal } from '@linusborg/vue-simple-portal';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDialog",
+  name: 'VTDialog',
+
+  components: {
+    Portal,
+  },
 
   provide() {
     return {
@@ -56,7 +63,7 @@ export default {
   },
 
   model: {
-    prop: "visible",
+    prop: 'visible',
   },
 
   props: {
@@ -115,8 +122,8 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit("input", false);
-        this.$emit("hidden");
+        this.$emit('input', false);
+        this.$emit('hidden');
       });
     },
 

package/src/components/Disclosure/VTDisclosure.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTDisclosure',
+
+  provide() {
+    return {
+      apiDisclosure: () => {
+        const details = this.details;
+        const contents = this.contents;
+        const accordion = this.accordion;
+        const headers = this.headers;
+        const icons = this.icons;
+
+        const register = (objKey, item) => {
+          if (!item) return;
+          this[objKey].push(item);
+        };
+
+        const unregister = (objKey, id) => {
+          const index = this[objKey].findIndex((item) => item.id === id);
+          this[objKey].splice(index, 1);
+        };
+
+        return {
+          details,
+          contents,
+          headers,
+          icons,
+          accordion,
+          register,
+          unregister,
+        };
+      },
+    };
+  },
+
+  props: {
+    accordion: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      details: [],
+      contents: [],
+      headers: [],
+      icons: [],
+    };
+  },
+};
+</script>

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    :id="id"
+    :class="[
+      headless
+        ? 'details-content'
+        : 'overflow-hidden transition-[height] duration-300 ease-linear',
+      invisible ? 'absolute opacity-0' : 'h-[var(--height)]',
+    ]"
+    :style="`--height: ${height};`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTDisclosureContent',
+
+  inject: ['apiDisclosure', 'apiDetails'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      idGroup: this.apiDetails().idGroup,
+      expanded: false,
+      expandedHeight: null,
+      invisible: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `disclosure-content-${this.idGroup}`;
+    },
+
+    height() {
+      return this.expanded ? this.expandedHeight : 0;
+    },
+  },
+
+  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);
+  },
+
+  beforeDestroy() {
+    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;
+    },
+
+    isVisible() {
+      return this.expanded;
+    },
+  },
+};
+</script>

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    :class="[
+      headless ? 'disclosure-details' : 'group relative',
+      headless ? (visible ? 'is-open' : null) : null,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '@/utils/ids';
+
+export default {
+  name: 'VTDisclosureDetails',
+
+  inject: ['apiDisclosure'],
+
+  provide() {
+    return {
+      apiDetails: () => {
+        const idGroup = this.idGroup;
+        const idHeader = `details-header-${idGroup}`;
+        const idIcon = `details-icon-${idGroup}`;
+        const idContent = `details-content-${idGroup}`;
+
+        const isVisible = () => this.isVisible();
+
+        return {
+          idGroup,
+          idHeader,
+          idIcon,
+          idContent,
+          isVisible,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      idGroup: genId(),
+      visible: false,
+    };
+  },
+
+  mounted() {
+    const detail = {
+      idGroup: this.idGroup,
+      show: this.show,
+      hide: this.hide,
+      isVisible: this.isVisible,
+    };
+
+    this.apiDisclosure().register('details', detail);
+  },
+
+  beforeDestroy() {
+    this.apiDisclosure().unregister('details', this.id);
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+
+    isVisible() {
+      return this.visible;
+    },
+  },
+};
+</script>

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -0,0 +1,136 @@
+<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"
+  >
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'VTDisclosureHeader',
+
+  inject: ['apiDisclosure', 'apiDetails'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  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;
+    },
+
+    icons() {
+      return this.apiDisclosure().icons;
+    },
+
+    contents() {
+      return this.apiDisclosure().contents;
+    },
+  },
+
+  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();
+      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 (isAccordion && !isSameGroup) {
+          content.collapse();
+        }
+      });
+    },
+
+    toggleHeaders() {
+      this.headers.forEach((summary) => summary.isExpanded());
+    },
+
+    toggleIcons() {
+      this.icons.forEach((icon) => icon.isExpanded());
+    },
+  },
+};
+</script>

package/src/components/Disclosure/VTDisclosureIcon.vue

@@ -0,0 +1,63 @@
+<template>
+  <span
+    :class="[
+      headless ? 'disclosure-icon' : 'shrink-0 transition-all',
+      headless ? null : expanded ? 'rotate-180' : 'rotate-0',
+    ]"
+  >
+    <slot><IconChevronDown /></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTDisclosureIcon',
+
+  inject: ['apiDisclosure', 'apiDetails'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return this.apiDetails().idIcon;
+    },
+
+    idGroup() {
+      return this.apiDetails().idGroup;
+    },
+  },
+
+  mounted() {
+    this.isExpanded();
+
+    const icon = {
+      id: this.id,
+      idGroup: this.idGroup,
+      isExpanded: this.isExpanded,
+    };
+
+    this.apiDisclosure().register('icons', icon);
+  },
+
+  beforeDestroy() {
+    this.apiDisclosure().unregister('icons', this.id);
+  },
+
+  methods: {
+    isExpanded() {
+      this.expanded = this.apiDetails().isVisible();
+    },
+  },
+};
+</script>

package/src/components/Drawer/VTDrawerHeader.vue

@@ -4,7 +4,7 @@
     :id="id"
     :class="{
       'Drawer-header': headless,
-      'flex items-center justify-between': !headless,
+      'mb-8 flex items-center justify-between gap-3': !headless,
     }"
   >
     <slot></slot>
@@ -13,14 +13,14 @@
 
 <script>
 export default {
-  name: "VTDrawerHeader",
+  name: 'VTDrawerHeader',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 

package/src/components/Drawer/VTDrawerTitle.vue

@@ -4,7 +4,7 @@
     :id="id"
     :class="{
       'Drawer-title': headless,
-      'mb-8 text-2xl font-semibold': !headless,
+      'text-2xl font-semibold': !headless,
     }"
   >
     <slot></slot>
@@ -13,14 +13,14 @@
 
 <script>
 export default {
-  name: "VTDrawerTitle",
+  name: 'VTDrawerTitle',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     as: {
       type: String,
-      default: "div",
+      default: 'div',
     },
   },
 
@@ -48,7 +48,7 @@ export default {
       const dialog = document.getElementById(this.api().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

package/src/components/Accordion/VTAccordion.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="accordion" :multiple="multiple"><slot></slot></div>
-</template>
-
-<script>
-export default {
-  name: 'VTAccordion',
-  props: {
-      multiple: {
-          type: Boolean,
-          default: false
-      }
-  },
-  provide() {
-    return {
-      api: () => {
-        // Get children components
-        const getAccordion = () => this.accordion;
-        const getAccordionGroup = () => this.accordionGroup;
-        const getAccordionPanel = () => this.accordionPanel;
-        const getAccordionButton = () => this.accordionButton;
-
-        // Handle registering and unregistering
-        const registerAccordion = (accordion) => {
-          if (!accordion) return;
-          this.accordion = accordion;
-        };        
-
-        const registerAccordionButton = (button) => {
-          if (!button) return;
-          this.accordionButton = button;
-        };
-
-        const registerAccordionGroup = (group) => {
-          if (!group) return;
-          _register(this.accordionGroup, group);
-        };
-
-        const registerAccordionPanel = (panel) => {
-          if (!panel) return;
-          _register(this.accordionPanel, panel);
-        };
-
-        const unregisterAccordionPanel = (id) => {
-          _unregister(this.accordionPanel, id);
-        };
-
-        const selectedPanel = (panelId) => {         
-          if (this.multiple) {
-            this.accordionPanel.forEach((item) => {
-              if(item.id === panelId) item.multipleActive();
-            })
-          } else{
-            this.accordionPanel.forEach((item) => {
-              item.id === panelId ? item.show() : item.hide();
-            })
-          }
-        };
-
-        // Register helper functions
-        const _register = (arr, item) => {
-          arr.push(item);
-          _index(arr);
-        };
-
-        const _unregister = (arr, id) => {
-          const index = _getIndex(arr, id);
-          arr.splice(index, 1);
-        };
-
-        // Index helper functions
-        const _index = (arr) => {
-          arr.forEach((item, index) => (item.index = index));
-        };
-
-        const _getIndex = (arr, id) => {
-          return arr.findIndex((item) => item.id === id);
-        };
-
-        return {
-          getAccordion,
-          getAccordionGroup,
-          getAccordionPanel,
-          getAccordionButton,
-          registerAccordionGroup,
-          registerAccordionButton,
-          registerAccordion,
-          registerAccordionPanel,
-          unregisterAccordionPanel,
-          selectedPanel,
-        };
-      },
-    };
-  },
-
-  data() {
-    return {
-      accordion: null,
-      accordionGroup: [],
-      accordionButton: null,
-      accordionPanel: [],
-    };
-  },
-};
-</script>

package/src/components/Accordion/VTAccordionButton.vue

@@ -1,56 +0,0 @@
-<template>
-  <h3>
-    <button
-      :id="id"
-      :aria-expanded="String(expanded)"
-      :aria-controls="id"
-      class="accordion-trigger"
-      type="button"
-      @click.prevent="onClick"
-    >
-      <span class="Accordion-button__text"><slot></slot></span>
-      <span class="Accordion-button__icon">
-        <IconChevronUp v-if="expanded" />
-        <IconChevronDown v-else />
-      </span>
-    </button>
-  </h3>
-</template>
-
-<script>
-import IconChevronDown from '../icons/IconChevronDown.vue';
-import IconChevronUp from '../icons/IconChevronUp.vue';
-
-export default {
-  name: 'VTAccordionButton',
-  components: { IconChevronDown, IconChevronUp },
-  inject: ['api'],
-  
-  data() {
-    return {
-      api: this.api(),
-      expanded: false,
-    };
-  },
-
-  computed: {
-    id() {
-      return this.$parent.id;
-    },
-  },
-
-  mounted() {
-    this.api.registerAccordionButton(this);
-  },
-
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-    onClick() {
-      const accordion = this.api.selectedPanel(this.id);
-      this.toggleExpanded();
-    },
-  },
-};
-</script>

package/src/components/Accordion/VTAccordionGroup.vue

@@ -1,25 +0,0 @@
-<template>
-  <div :id="id" class="accordion-group">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { genId } from "../../utils/genId";
-
-export default {
-  name: "VTAccordionGroup",
-  inject: ["api"],
-
-  data() {
-    return {
-      api: this.api(),
-      id: `group-${genId()}`,
-    };
-  },
-
-  mounted() {
-    this.api.registerAccordionGroup(this);
-  },
-};
-</script>

package/src/components/Accordion/VTAccordionPanel.vue

@@ -1,53 +0,0 @@
-<template>
-  <div
-    :id="id"
-    :aria-labelledby="id"
-    v-show="active"
-    class="accordion-panel"
-    role="region"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'VTAccordionPanel',
-  inject: ['api'],
-
-  data() {
-    return {
-      api: this.api(),
-      active: false,
-    };
-  },
-
-  computed: {
-    id() {
-      return this.$parent.id;
-    },
-  },
-
-  mounted() {
-    this.api.registerAccordionPanel(this);
-  },
-
-  methods: {
-    multipleActive(){
-      this.active = !this.active;
-    },
-
-    show() {
-      if(this.active) {
-        this.active = false
-        } else {
-        this.active = true
-      }
-    },
-
-    hide() {
-      this.active = false;
-    },
-  },
-};
-</script>

package/src/components/icons/IconChevronDown.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>

package/src/components/icons/IconChevronUp.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 8L6 14L7.41 15.41L12 10.83L16.59 15.41L18 14L12 8Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>