@veritree/ui 0.6.1 → 0.9.0

package/src/Popover/VTPopoverContent.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition
+    enter-active-class="duration-200 ease-out"
+    enter-class="translate-y-[15px] opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="duration-200 ease-in"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-[15px] opacity-0"
+    @after-leave="hide"
+  >
+    <div
+      v-show="visible"
+      :id="id"
+      :class="{
+        PopoverPanel: headless,
+        'absolute top-full mt-3 rounded-md shadow-300 ':
+          !headless,
+        'bg-white': !dark,
+        'border-gray-700 bg-forest-default shadow-gray-700': dark,
+        'left-0': !right,
+        'right-0': right,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTPopoverContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      id: `popover-panel-${genId()}`,
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+
+    // TODO: Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.visible && !this.$el.contains(e.target)) this.hide();
+    });
+  },
+
+  destroyed() {
+    // TODO: Create a directive or mixin for this
+    document.removeEventListener('click', this.hide());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverDivider.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="{
+      PopoverDivider: headless,
+      'h-[1px]': !headless,
+      'bg-white': !dark,
+      'bg-fd-500': dark,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverDivider',
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid">
+    <slot></slot>
+  </div>
+</template>

package/src/Popover/VTPopoverItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="as"
+    :class="{
+      PopoverItem: headless,
+      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 no-underline':
+        !headless,
+      'text-fd-500': !dark,
+      'text-white hover:bg-fd-450': dark,
+    }"
+    @click="onClick"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverItem',
+
+  inject: ['api'],
+
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    href: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    as() {
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (this.href || this.to) return;
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverTrigger.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @keydown.esc.prevent="onEsc">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverTrigger',
+
+  inject: ['api'],
+
+  computed: {
+    content() {
+      return this.api().content;
+    },
+  },
+
+  mounted() {
+    this.api().registerButton(this);
+    this.handleSlotTrigger();
+  },
+
+  methods: {
+    handleSlotTrigger() {
+      const slot = this.$slots.default;
+      const trigger = slot[0].elm;
+
+      if (slot.length > 1) {
+        console.error('VTPopoverButton only accepts one item in its slot');
+        return;
+      }
+
+      trigger.addEventListener('click', (e) => {
+        this.onClick();
+        e.stopPropagation();
+      });
+    },
+
+    onClick() {
+      if (this.content.visible) this.content.hide();
+      else this.content.show();
+    },
+
+    onEsc() {
+      if (!this.content) return;
+      this.content.hide();
+    },
+  },
+};
+</script>

package/src/Listbox/VTListboxButton.vue

@@ -1,81 +0,0 @@
-<template>
-  <button
-    :aria-expanded="expanded"
-    aria-haspopup="listbox"
-    class="Listbox-button"
-    :data-theme="theme"
-    type="button"
-    @click.prevent="onClick"
-    @keydown="onKeyDown"
-  >
-    <span class="Listbox-button__text"><slot></slot></span>
-    <span class="Listbox-button__icon">
-      <IconChevronUp v-if="expanded" />
-      <IconChevronDown v-else />
-    </span>
-  </button>
-</template>
-
-<script>
-import { IconChevronDown, IconChevronUp } from '@veritree/icons';
-import { keys } from '../utils/keyboard';
-
-export default {
-  name: 'VTListboxButton',
-
-  components: { IconChevronDown, IconChevronUp },
-
-  inject: ['api'],
-
-  props: {
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-  },
-
-  data() {
-    return {
-      expanded: false,
-    };
-  },
-
-  mounted() {
-    this.api().registerListboxButton(this);
-  },
-
-  methods: {
-    focus() {
-      this.$el.focus();
-      this.toggleExpanded();
-    },
-
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-
-    onClick() {
-      const listbox = this.api().getListbox();
-      this.expanded ? listbox.hide() : listbox.show();
-
-      this.toggleExpanded();
-    },
-
-    onKeyDown(event) {
-      const key = event.key;
-      const listbox = this.api().getListbox();
-
-      switch (key) {
-        case keys.down:
-          event.preventDefault();
-          listbox.show();
-          this.toggleExpanded();
-          break;
-      }
-    },
-  },
-};
-</script>

package/src/Listbox/VTListboxOption.vue

@@ -1,126 +0,0 @@
-<template>
-  <li
-    :id="id"
-    class="Listbox-option"
-    role="option"
-    @mousedown.prevent="onMouseDown"
-    @mousemove="onMousemove"
-    @mouseout="onMouseleave"
-  >
-    <slot></slot>
-  </li>
-</template>
-
-<script>
-import { scrollElementIntoView } from '../utils/components';
-import { genId } from '../utils/ids';
-import { areObjsEqual, isObj } from '../utils/objects';
-
-export default {
-  name: 'VTListboxOption',
-
-  inject: ['api'],
-
-  props: {
-    value: {
-      type: [String, Number, Object],
-      required: true,
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      id: `listbox-option-${genId()}`,
-      focused: false,
-      isMousemove: false,
-      parent: null,
-    };
-  },
-
-  watch: {
-    focused(newValue) {
-      if (!newValue) return;
-
-      if (!this.parent) this.parent = this.api().getListbox();
-      if (!this.isMousemove) scrollElementIntoView(this.$el, this.parent.$el);
-      this.parent.updateActiveDescendant(this.id);
-    },
-  },
-
-  mounted() {
-    this.api().registerOption(this);
-
-    if (this.selected) {
-      this.select();
-      this.focus();
-    }
-
-    // todo: make sure it works with other values than objects
-    const listboxOptionSelected = this.api().getListboxValue();
-
-    if (!listboxOptionSelected) {
-      return;
-    }
-
-    if (isObj(this.value)) {
-      if (areObjsEqual(this.value, listboxOptionSelected)) {
-        this.select();
-        this.focus();
-      }
-
-      return;
-    }
-
-    if (this.value === listboxOptionSelected) {
-      this.select();
-      this.focus();
-    }
-  },
-
-  beforeDestroy() {
-    this.api().unregisterOption(this.id);
-  },
-
-  methods: {
-    focus() {
-      this.focused = true;
-      this.$el.classList.add('is-focused');
-    },
-
-    unfocus() {
-      this.focused = false;
-      this.$el.classList.remove('is-focused');
-    },
-
-    select() {
-      this.$el.setAttribute('aria-selected', true);
-    },
-
-    unselect() {
-      this.$el.setAttribute('aria-selected', false);
-    },
-
-    onMouseDown(event) {
-      if (event.buttons === 1) this.api().selectOption(this);
-    },
-
-    // Mousemove instead of mouseover to support keyboard navigation.
-    // The problem with mouseover is that when scrolling (scrollIntoView),
-    // mouseover event gets triggered.
-    onMousemove() {
-      this.isMousemove = true;
-      this.api().unfocusOptions();
-      this.focus();
-    },
-
-    onMouseleave() {
-      this.isMousemove = false;
-      this.unfocus();
-    },
-  },
-};
-</script>

package/src/Listbox/VTListboxOptions.vue

@@ -1,119 +0,0 @@
-<template>
-  <ul
-    v-if="visible"
-    aria-orientation="vertical"
-    role="listbox"
-    class="Listbox-options"
-    tabindex="-1"
-    @keydown="onKeyDown"
-    @blur="onBlur"
-  >
-    <slot></slot>
-  </ul>
-</template>
-
-<script>
-import { keys } from '../utils/keyboard';
-let timer = null;
-
-export default {
-  name: 'VTListboxOptions',
-
-  inject: ['api'],
-
-  data() {
-    return {
-      visible: false,
-      filter: '',
-    };
-  },
-
-  watch: {
-    visible(newValue) {
-      if (newValue) {
-        this.$nextTick(() => {
-          this.$el.focus();
-          this.handleOptionFocus();
-        });
-      } else {
-        const listboxButton = this.api().getListboxButton();
-
-        this.$nextTick(() => {
-          listboxButton.focus();
-        });
-      }
-    },
-  },
-
-  mounted() {
-    this.api().registerListbox(this);
-  },
-
-  methods: {
-    show() {
-      this.visible = true;
-    },
-
-    hide() {
-      this.visible = false;
-    },
-
-    handleOptionFocus() {
-      const selectedIndex = this.api().getFocusedIndex();
-      if (!selectedIndex) this.api().focusFirstOption();
-    },
-
-    updateActiveDescendant(id) {
-      this.$el.setAttribute('aria-activedescendant', id);
-    },
-
-    onKeyDown(event) {
-      const key = event.key;
-      const code = event.code;
-
-      if (code.includes('Key')) {
-        this.filter += code.replace('Key', '');
-
-        clearTimeout(timer);
-
-        timer = setTimeout(() => {
-          this.api().focusOptionByFilter(this.filter);
-          this.filter = '';
-        }, 100);
-      }
-
-      switch (key) {
-        case keys.up:
-          event.preventDefault();
-          this.api().focusPreviousOption();
-          break;
-        case keys.down:
-          event.preventDefault();
-          this.api().focusNextOption();
-          break;
-        case keys.home:
-          event.preventDefault();
-          this.api().focusFirstOption();
-          break;
-        case keys.end:
-          event.preventDefault();
-          this.api().focusLastOption();
-          break;
-        case keys.enter:
-          event.preventDefault();
-          this.api().selectOption();
-          break;
-        case keys.escape:
-          this.hide();
-          break;
-        default:
-          break;
-      }
-    },
-
-    onBlur() {
-      this.hide();
-    },
-  },
-};
-</script>