@veritree/ui 0.7.0 → 0.10.0

package/src/Listbox/VTListboxItem.vue

@@ -0,0 +1,226 @@
+<template>
+  <li
+    :id="id"
+    :class="{
+      ListboxItem: headless,
+      'relative z-10 flex items-center gap-2 px-3 py-2 no-underline': !headless,
+      'hover:bg-secondary-200/10': !dark && !headless,
+      'text-white': dark && !headless,
+      'pointer-events-none opacity-75': disabled && !headless,
+      'bg-secondary-200/10': selected && !headless,
+    }"
+    :aria-disabled="disabled"
+    :aria-selected="String(selected)"
+    :tabindex="tabIndex"
+    role="option"
+    @click.stop="onClick"
+    @keydown.down.prevent="focusPreviousItem"
+    @keydown.up.prevent="focusNextItem"
+    @keydown.home.prevent="focusFirstItem"
+    @keydown.end.prevent="focusLastItem"
+    @keydown.esc.stop="onKeyEsc"
+    @keydown.enter.prevent="onClick"
+    @mousemove="onMousemove"
+    @mouseout="onMouseleave"
+    @keydown.tab.prevent
+  >
+    <span class="truncate"><slot></slot></span>
+  </li>
+</template>
+
+<script>
+import { scrollElementIntoView } from '~/utils/components';
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTListboxItem',
+
+  inject: ['api'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Object, Array],
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      id: `listboxitem-${genId()}`,
+      index: null,
+      selected: false,
+      tabIndex: 0,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    items() {
+      return this.api().items;
+    },
+
+    el() {
+      return this.$el;
+    },
+
+    trigger() {
+      return this.api().trigger;
+    },
+
+    content() {
+      return this.api().content;
+    },
+
+    list() {
+      return this.api().list;
+    },
+
+    search() {
+      return this.api().search;
+    },
+  },
+
+  watch: {
+    selected(newValue) {
+      if (!newValue || !this.list) return;
+
+      if (this.content) {
+        this.content.setActiveDescedant(this.id);
+      }
+
+      const isMousemove = this.list.getMousemove();
+
+      if (!isMousemove) {
+        scrollElementIntoView(this.el, this.list.el);
+      }
+    },
+  },
+
+  mounted() {
+    const item = {
+      id: this.id,
+      focus: this.focus,
+      select: this.select,
+      unselect: this.unselect,
+      onClick: this.onClick,
+    };
+
+    this.api().registerItem(item);
+
+    this.index = this.items.length - 1;
+  },
+
+  beforeDestroy() {
+    this.api().unregisterItem(this.id);
+  },
+
+  methods: {
+    select() {
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    focus() {
+      if (!this.el) return;
+
+      this.tabIndex = -1;
+      this.selected = true;
+      this.el.focus();
+    },
+
+    focusFirstItem() {
+      this.setFocusToItem(0);
+    },
+
+    focusLastItem() {
+      this.setFocusToItem(this.items.length - 1);
+    },
+
+    /**
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
+     */
+    focusPreviousItem() {
+      const isLast = this.index === this.items.length - 1;
+      const goToIndex = isLast ? 0 : this.index + 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
+     */
+    focusNextItem() {
+      const isFirst = this.index === 0;
+      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus item by remove its tabindex and calling
+     * focus to the element.
+     *
+     * @param {Number, String} goToIndex
+     */
+    setFocusToItem(goToIndex) {
+      this.tabIndex = 0;
+      this.selected = false;
+
+      const isMousemove = this.list.getMousemove();
+
+      if (isMousemove) {
+        this.list.unsetMousemove();
+        this.items.forEach((item) => item.unselect());
+      }
+
+      this.items[goToIndex].focus();
+    },
+
+    /**
+     * Hides content/menu and focus on trigger
+     */
+    leaveMenu() {
+      if (this.content) this.content.hide();
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onClick() {
+      if (this.disabled) return;
+
+      this.api().emit(this.value);
+      this.$nextTick(() => this.leaveMenu());
+    },
+
+    onMousemove() {
+      this.items.forEach((item) => item.unselect());
+
+      this.select();
+      this.list.setMousemove();
+    },
+
+    onMouseleave() {
+      this.unselect();
+      this.list.unsetMousemove();
+    },
+  },
+};
+</script>

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>