@veritree/ui 0.19.2 → 0.20.0-0

package/src/components/Popover/VTPopoverTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @keydown.esc.prevent="onEsc">
+  <div :id="id" @keydown.esc.prevent="onKeyEsc">
     <slot></slot>
   </div>
 </template>
@@ -8,43 +8,148 @@
 export default {
   name: 'VTPopoverTrigger',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
+
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+      controls: null,
+      trigger: null,
+    };
+  },
 
   computed: {
-    content() {
-      return this.api().content;
+    id() {
+      return `popover-trigger-${this.apiPopover().id}`;
+    },
+
+    componentContent() {
+      return this.apiPopover().componentContent;
     },
   },
 
   mounted() {
-    this.api().registerButton(this);
-    this.handleSlotTrigger();
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiPopover().registerTrigger(trigger);
+
+    this.setTrigger();
+    this.addTriggerEvents();
+  },
+
+  destroyed() {
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
-    handleSlotTrigger() {
-      const slot = this.$slots.default;
-      const trigger = slot[0].elm;
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
 
-      if (slot.length > 1) {
-        console.error('VTPopoverButton only accepts one item in its slot');
+    /**
+     * Add event listener to slot element
+     *
+     * The click event has to be added to the slot child element
+     * since we are not setting the onclick on the component
+     * itself.
+     *
+     * Slot must have only one child element. It avoids
+     * errors related to adding the event listener.
+     */
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', (e) => {
+        this.onClick(e);
+      });
+    },
+
+    init(e) {
+      if (!this.componentContent) {
         return;
       }
 
-      trigger.addEventListener('click', (e) => {
-        this.onClick();
-        e.stopPropagation();
-      });
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
+      this.expanded = true;
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
     },
 
-    onClick() {
-      if (this.content.visible) this.content.hide();
-      else this.content.show();
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+
+      this.hideComponentContent();
+    },
+
+    focus() {
+      if (this.trigger) this.trigger.focus();
+    },
+
+    showComponentContent() {
+      this.componentContent.show();
+    },
+
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
+
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
+
+        return;
+      }
+
+      this.hasPopup = null;
+      this.controls = null;
+    },
+
+    onClick(e) {
+      this.init(e);
+    },
+
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
+
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
+
+      // settimeout here is delaying the focusing the element
+      // since it is not rendered yet. All items will only
+      // be available when the content is fully visible.
+      this.$nextTick(() => {
+        setTimeout(() => this[listItemPosition].focus(), 100);
+      });
     },
 
-    onEsc() {
-      if (!this.content) return;
-      this.content.hide();
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/ProgressBar/VTProgressBar.vue

@@ -7,7 +7,7 @@
     ]"
     role="progressbar"
     aria-valuemin="0"
-    aria-valuemax="100"
+    :aria-valuemax="max"
     :aria-valuenow="value"
     :aria-label="label"
   >
@@ -15,9 +15,9 @@
       :class="[
         headless
           ? 'progress-bar__indicator'
-          : 'absolute left-0 h-full bg-secondary-300 transition-all',
+          : 'bg-secondary-200 absolute left-0 h-full transition-all',
       ]"
-      :style="{ width: `${value}%` }"
+      :style="{ width: `${percentageComputed}%` }"
     ></div>
   </div>
 </template>
@@ -37,6 +37,24 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    max: {
+      type: [String, Number],
+      default: 100,
+    },
+    percentage: {
+      type: [String, Number],
+      default: null,
+    },
+  },
+
+  computed: {
+    percentageComputed() {
+      if (typeof this.percentage !== 'undefined' && this.percentage !== null) {
+        return this.percentage;
+      }
+
+      return (this.value / this.max) * 100;
+    },
   },
 };
 </script>

package/src/components/Skeleton/VTSkeleton.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="animate-pulse">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTSkeleton',
+};
+</script>

package/src/components/Skeleton/VTSkeletonItem.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-gray-300" />
+</template>
+
+<script>
+export default {
+  name: 'VTSkeletonItem',
+};
+</script>

package/src/components/Tabs/VTTab.vue

@@ -18,11 +18,11 @@
     ]"
     role="tab"
     type="button"
-    @click.stop="onClick"
+    @click.prevent.stop="onClick"
     @keydown="onKeyDown"
     @blur="onBlur"
   >
-    <slot></slot>
+    <slot :selected="selected"></slot>
   </button>
 </template>
 
@@ -60,7 +60,7 @@ export default {
     this.api.registerTab(this);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.api.unregisterTab(this.index);
   },
 
@@ -106,6 +106,7 @@ export default {
     onClick() {
       this.api.selectTab(this.index);
       this.$emit('change');
+      this.$emit('click');
     },
 
     onKeyDown(event) {

package/src/components/Tabs/VTTabGroup.vue

@@ -5,10 +5,10 @@
 </template>
 
 <style scoped>
-.TabGroup.vertical{
+.TabGroup.vertical {
   display: flex;
 }
-.TabGroup.vertical .TabList{
+.TabGroup.vertical .TabList {
   display: flex;
   flex-direction: column;
 }
@@ -17,15 +17,17 @@
 <script>
 export default {
   name: 'VTTabGroup',
+
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   provide() {
     return {
-      api: () => {
+      apiTabs: () => {
         const registerTab = (tab) => {
           _register(this.tabs, tab);
           if (tab.index === 0) tab.select();

package/src/components/Tabs/VTTabPanel.vue

@@ -14,11 +14,10 @@
 export default {
   name: 'VTTabPanel',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   data() {
     return {
-      api: this.api(),
       index: null,
       visible: false,
     };
@@ -31,11 +30,11 @@ export default {
   },
 
   mounted() {
-    this.api.registerTabPanel(this);
+    this.apiTabs().registerTabPanel(this);
   },
 
-  beforeDestroy() {
-    this.api.unregisterTabPanel(this.id);
+  beforeUnmount() {
+    this.apiTabs().unregisterTabPanel(this.id);
   },
 
   methods: {

package/src/components/Tooltip/VTTooltip.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
+
+export default {
+  name: 'VTTooltip',
+
+  mixins: [floatingUiMixin],
+
+  props: {
+    delayDuration: {
+      type: [String, Number],
+      default: 500,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+
+  data() {
+    return {
+      floatingUiMinWidth: 0,
+    };
+  },
+
+  provide() {
+    return {
+      apiTooltip: () => {
+        const registerTrigger = (trigger) => {
+          if (!trigger) return;
+          this.componentTrigger = trigger;
+        };
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.componentContent = content;
+        };
+
+        return {
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          delayDuration: this.delayDuration,
+          registerTrigger,
+          registerContent,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      componentId: genId(),
+    };
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipContent.vue

@@ -0,0 +1,59 @@
+<template>
+  <FloatingUi
+    :id="id"
+    :visible="visible"
+    :headless="headless"
+    component="tooltip"
+  >
+    <slot></slot>
+  </FloatingUi>
+</template>
+
+<script>
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
+
+export default {
+  name: 'VTTooltipContent',
+
+  inheritAttrs: false,
+
+  mixins: [floatingUiContentMixin],
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-content-${this.apiTooltip().id}`;
+    },
+
+    component() {
+      return this.apiTooltip().component;
+    },
+
+    componentTrigger() {
+      return this.apiTooltip().componentTrigger;
+    },
+
+    ariaLabelledby() {
+      if (!this.componentTrigger) return null;
+      return this.visible ? this.componentTrigger.id : null;
+    },
+  },
+
+  mounted() {
+    const content = {
+      id: this.id,
+      hide: this.hide,
+      show: this.show,
+    };
+
+    this.apiTooltip().registerContent(content);
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    :id="id"
+    :aria-describedby="ariaDescribedBy"
+    @mouseenter="onMouseenter"
+    @mouseleave="onmouseout"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+let tooltipTriggerTimeout = null;
+
+export default {
+  name: 'VTTooltipTrigger',
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-trigger-${this.apiTooltip().id}`;
+    },
+
+    componentContent() {
+      return this.apiTooltip().componentContent;
+    },
+
+    ariaDescribedBy() {
+      if (!this.componentContent) return null;
+      return this.expanded ? this.componentContent.id : null;
+    },
+  },
+
+  mounted() {
+    const trigger = {
+      cancel: this.cancel,
+      id: this.id,
+    };
+
+    this.apiTooltip().registerTrigger(trigger);
+  },
+
+  methods: {
+    onMouseenter(e) {
+      tooltipTriggerTimeout = setTimeout(() => {
+        this.init(e);
+      }, this.apiTooltip().delayDuration);
+    },
+
+    onmouseout() {
+      clearTimeout(tooltipTriggerTimeout);
+      this.cancel();
+    },
+
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
+
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
+      this.expanded = true;
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      this.showComponentContent();
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+      this.hideComponentContent();
+    },
+
+    showComponentContent() {
+      this.componentContent.show();
+    },
+
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
+  },
+};
+</script>

package/src/components/Transitions/FadeInOut.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
+    enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
     leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
+    leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
     @after-enter="afterEnter"
     @after-leave="afterLeave"

package/src/components/Utils/FloatingUi.vue

@@ -0,0 +1,93 @@
+<template>
+  <Teleport to="body">
+    <transition
+      enter-active-class="duration-200 ease-out"
+      :enter-from-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
+      leave-active-class="duration-200 ease-in"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
+      @after-leave="hidden"
+      @after-enter="shown"
+    >
+      <div
+        v-if="visible"
+        :class="[
+          headless
+            ? `${this.component}-content`
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
+        ]"
+        v-bind="$attrs"
+      >
+        <slot />
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+
+  props: {
+    component: {
+      type: String,
+      default: null,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    ariaActivedescendant: {
+      type: String,
+      default: null,
+    },
+    portalClass: {
+      type: [String, Function],
+      default: null,
+    },
+  },
+
+  computed: {
+    isTooltip() {
+      return this.component === 'tooltip';
+    },
+
+    classes() {
+      return this.isTooltip
+        ? 'bg-gray-800 text-sm text-white py-1 px-2'
+        : 'bg-white py-2 px-3';
+    },
+
+    transitionEnterClass() {
+      return this.isTooltip ? 'opacity-0' : 'translate-y-[15px] opacity-0';
+    },
+
+    transitionEnterToClass() {
+      return this.isTooltip ? 'opacity-100' : 'translate-y-0 opacity-100';
+    },
+
+    transitionLeaveClass() {
+      return this.transitionEnterToClass;
+    },
+
+    transitionLeaveToClass() {
+      return this.transitionEnterClass;
+    },
+  },
+
+  methods: {
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
+    },
+  },
+};
+</script>

package/package-lock.json

@@ -1,13 +0,0 @@
-{
-  "name": "@veritree/ui",
-  "version": "0.1.9",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@veritree/icons": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@veritree/icons/-/icons-0.12.0.tgz",
-      "integrity": "sha512-vunUKzvS9neslSf3R3y6RYQrcfRpxmp8PnhWWe2peYiyElLIJcb7zAsfCZ+I0Fg5PQ6GZG6StqWy0WF7MJ7VOg=="
-    }
-  }
-}