@veritree/ui 0.8.0 → 0.11.0

package/src/Listbox/VTListboxLabel.vue

@@ -0,0 +1,38 @@
+<template>
+  <component
+    :is="as"
+    :class="{
+      ListboxLabel: headless,
+      'mb-2 block text-xs font-normal uppercase': !headless,
+      'text-inherit': !dark && !headless,
+      'text-white': dark && !headless,
+    }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxLabel',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'span',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+  },
+};
+</script>

package/src/Listbox/VTListboxList.vue

@@ -0,0 +1,63 @@
+<template>
+  <ul
+    :id="id"
+    :class="{
+      ListboxList: headless,
+      '-mx-3 max-h-[160px] w-auto overflow-y-auto': !headless,
+    }"
+  >
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTListboxList',
+
+  inject: ['api'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `listboxlist-${genId()}`,
+      isMousemove: false,
+    };
+  },
+
+  mounted() {
+    const list = {
+      el: this.$el,
+      getMousemove: this.getMousemove,
+      setMousemove: this.setMousemove,
+      unsetMousemove: this.unsetMousemove,
+    };
+
+    this.api().registerList(list);
+  },
+
+  methods: {
+    // Mousemove instead of mouseover to support keyboard navigation.
+    // The problem with mouseover is that when scrolling (scrollIntoView),
+    // mouseover event gets triggered.
+    setMousemove() {
+      this.isMousemove = true;
+    },
+
+    unsetMousemove() {
+      this.isMousemove = false;
+    },
+
+    getMousemove() {
+      return this.isMousemove;
+    },
+  },
+};
+</script>

package/src/Listbox/VTListboxSearch.vue

@@ -0,0 +1,138 @@
+<template>
+  <input
+    v-model="search"
+    :class="{ ListboxList: headless, 'form-control mb-1': !headless }"
+    type="text"
+    @input="onChange"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
+    @keydown.home.prevent="focusFirstItem"
+    @keydown.end.prevent="focusLastItem"
+    @keydown.enter.prevent="onKeyEnter"
+    @keydown.esc.stop="hide"
+    @keydown.tab.prevent="hide"
+  />
+</template>
+
+<script>
+export default {
+  name: 'VTListboxSearch',
+
+  inject: ['api'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      search: '',
+      index: -1,
+    };
+  },
+
+  computed: {
+    content() {
+      return this.api().content;
+    },
+
+    trigger() {
+      return this.api().trigger;
+    },
+
+    list() {
+      return this.api().list;
+    },
+
+    items() {
+      return this.api().items;
+    },
+
+    item() {
+      return this.items[this.index];
+    },
+  },
+
+  mounted() {
+    const search = {
+      el: this.$el,
+    };
+
+    this.api().registerSearch(search);
+  },
+
+  beforeDestroy() {
+    this.search = '';
+    this.$emit('change', this.search.trim());
+  },
+
+  methods: {
+    focusNextItem() {
+      if (this.index !== -1) {
+        this.unselectItem();
+      }
+
+      this.index++;
+
+      if (this.index > this.items.length - 1) {
+        this.index = 0;
+      }
+
+      if (this.item) this.item.select();
+    },
+
+    focusPreviousItem() {
+      this.unselectItem();
+
+      this.index--;
+
+      if (this.index < 0) {
+        this.index = this.items.length - 1;
+      }
+
+      this.item.select();
+    },
+
+    focusFirstItem() {
+      this.unselectItem();
+      this.index = 0;
+      this.item.select();
+    },
+
+    focusLastItem() {
+      this.unselectItem();
+      this.index = this.items.length - 1;
+      this.item.select();
+    },
+
+    unselectItem() {
+      const isMousemove = this.list.getMousemove();
+
+      if (isMousemove) {
+        this.list.unsetMousemove();
+        this.items.forEach((item) => item.unselect());
+      }
+
+      if (this.item) this.item.unselect();
+    },
+
+    onChange() {
+      this.index = 0;
+      if (this.item) this.item.select();
+
+      this.$emit('change', this.search.trim());
+    },
+
+    onKeyEnter() {
+      if (this.item) this.item.onClick();
+    },
+
+    hide() {
+      if (this.content) this.content.hide();
+    },
+  },
+};
+</script>

package/src/Listbox/VTListboxTrigger.vue

@@ -0,0 +1,158 @@
+<template>
+  <button
+    :aria-expanded="expanded"
+    :aria-haspopup="hasPopup"
+    :class="{
+      'Listbox-button': headless,
+      'flex w-full justify-between rounded-md border border-solid py-2 px-3':
+        !headless,
+      'border-gray-300 text-gray-500': !dark && !headless,
+      'border-white/70 text-white focus-visible:ring-2 focus-visible:ring-white':
+        dark && !headless,
+    }"
+    type="button"
+    @click.stop.prevent="onClick"
+    @keydown.down.prevent="onKeyArrowDown"
+    @keydown.up.prevent="onKeyArrowUp"
+    @keydown.esc.stop="onKeyEsc"
+  >
+    <span class="Listbox-button__text"><slot></slot></span>
+    <span class="Listbox-button__icon">
+      <IconChevronDown
+        class="transition-transform"
+        :class="{ 'rotate-180': expanded }"
+      />
+    </span>
+  </button>
+</template>
+
+<script>
+import { IconChevronDown } from '@veritree/icons';
+
+export default {
+  name: 'VTListboxTrigger',
+
+  components: { IconChevronDown },
+
+  inject: ['api'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    content() {
+      return this.api().content;
+    },
+
+    items() {
+      return this.api().items;
+    },
+
+    firstMenuItem() {
+      return this.items[0];
+    },
+
+    lastMenuItem() {
+      return this.items[this.items.length - 1];
+    },
+  },
+
+  mounted() {
+    const trigger = {
+      el: this.$el,
+      focus: this.focus,
+      onClick: this.onClick,
+      contract: this.contract,
+    };
+
+    this.api().registerTrigger(trigger);
+  },
+
+  methods: {
+    /**
+     * Shows content/menu if not already visible
+     */
+    showContent() {
+      this.expanded = true;
+      this.content.show();
+    },
+
+    focus() {
+      this.$el.focus();
+    },
+
+    contract() {
+      if (!this.expanded) return;
+      this.expanded = false;
+    },
+
+    /**
+     * On click, do the following:
+     *
+     * 1. Toggle aria expanded attribute/state
+     * 2. Open the menu if it's closed
+     * 3. Close the menu if it's open
+     */
+    onClick() {
+      if (!this.content) return;
+      this.expanded ? this.content.hide() : this.showContent();
+    },
+
+    /**
+     * On key arrow down, do the following:
+     *
+     * 1. if the menu is not expanded, expand it and focus the first menu item
+     * 2. if the menu is expanded, focus the first menu item
+     */
+    onKeyArrowDown() {
+      if (!this.content) return;
+
+      this.showContent();
+
+      this.$nextTick(() => {
+        this.firstMenuItem.focus();
+      });
+    },
+
+    /**
+     * On key arrow up, do the following:
+     *
+     * 1. if the menu is not expanded, expand it and focus the last menu item
+     * 2. if the menu is expanded, focus the last menu item
+     */
+    onKeyArrowUp() {
+      if (!this.content) return;
+
+      this.showContent();
+
+      this.$nextTick(() => {
+        this.lastMenuItem.focus();
+      });
+    },
+
+    onKeyEsc() {
+      if (!this.content) return;
+
+      if (this.expanded) {
+        this.toggleExpanded();
+        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>