@veritree/ui 0.8.0 → 0.11.0

package/index.js

@@ -19,6 +19,13 @@ import VTPopoverItem from "./src/Popover/VTPopoverItem.vue";
 import VTPopoverTrigger from "./src/Popover/VTPopoverTrigger.vue";
 import VTFormFeedback from "./src/Form/VTFormFeedback.vue";
 import VTFormGroup from "./src/Form/VTFormGroup.vue";
+import VTListbox from "./src/Listbox/VTListbox.vue";
+import VTListboxContent from "./src/Listbox/VTListboxContent.vue";
+import VTListboxItem from "./src/Listbox/VTListboxItem.vue";
+import VTListboxLabel from "./src/Listbox/VTListboxLabel.vue";
+import VTListboxList from "./src/Listbox/VTListboxList.vue";
+import VTListboxSearch from "./src/Listbox/VTListboxSearch.vue";
+import VTListboxTrigger from "./src/Listbox/VTListboxTrigger.vue";
 
 import VTAlert from "./src/Alerts/VTAlert.vue";
 
@@ -34,11 +41,6 @@ import VTInputUpload from "./src/Input/VTInputUpload.vue";
 
 import VTTextarea from "./src/Textarea/VTTextarea.vue";
 
-import VTListbox from "./src/Listbox/VTListbox.vue";
-import VTListboxButton from "./src/Listbox/VTListboxButton.vue";
-import VTListboxOption from "./src/Listbox/VTListboxOption.vue";
-import VTListboxOptions from "./src/Listbox/VTListboxOptions.vue";
-
 import VTModal from "./src/Modal/VTModal.vue";
 
 import VTAccordion from "./src/Accordion/VTAccordion.vue";
@@ -94,6 +96,13 @@ export {
   VTPopoverTrigger,
   VTFormFeedback,
   VTFormGroup,
+  VTListbox,
+  VTListboxContent,
+  VTListboxItem,
+  VTListboxLabel,
+  VTListboxList,
+  VTListboxSearch,
+  VTListboxTrigger,
   VTButton,
   // VTButtonSave,
   VTInput,
@@ -101,10 +110,6 @@ export {
   VTInputFile,
   VTInputUpload,
   VTTextarea,
-  VTListbox,
-  VTListboxButton,
-  VTListboxOption,
-  VTListboxOptions,
   VTModal,
   VTAccordion,
   VTAccordionButton,

package/nuxt.js

@@ -6,6 +6,7 @@ const components = [
   'src/Dialog',
   'src/DropdownMenu',
   'src/Form',
+  'src/Listbox',
   'src/Image',
   'src/Tabs',
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.8.0",
+  "version": "0.11.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/DropdownMenu/VTDropdownMenuContent.vue

@@ -85,6 +85,7 @@ export default {
 
     hide() {
       this.visible = false;
+      this.$emit('hidden');
       this.api().unregisterItems();
     },
   },

package/src/Listbox/VTListbox.vue

@@ -1,150 +1,73 @@
 <template>
-  <div class="Listbox"><slot></slot></div>
+  <div :class="{ Listbox: headless, relative: !headless, 'z-20': active }">
+    <slot></slot>
+  </div>
 </template>
 
 <script>
+import { genId } from '~/utils/ids';
+
 export default {
   name: 'VTListbox',
 
   provide() {
     return {
       api: () => {
-        // Get children components
-        const getListbox = () => this.listbox;
-        const getListboxValue = () => this.value;
-        const getListboxButton = () => this.listboxButton;
-
-        // Handle registering and unregistering
-        const registerListboxButton = (button) => {
-          if (!button) return;
-          this.listboxButton = button;
-        };
-
-        const registerListbox = (listbox) => {
-          if (!listbox) return;
-          this.listbox = listbox;
-        };
-
-        const registerOption = (option) => {
-          if (!option) return;
-          _register(this.listboxOptions, option);
-        };
+        const { dark: isDark, right: isRight } = this;
+        const { id, listbox, trigger, content, search, list, items } = this;
 
-        const unregisterOption = (id) => {
-          _unregister(this.listboxOptions, id);
+        const registerTrigger = (trigger) => {
+          if (!trigger) return;
+          this.trigger = trigger;
         };
 
-        // Register helper functions
-        const _register = (arr, item) => {
-          arr.push(item);
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
         };
 
-        const _unregister = (arr, id) => {
-          const index = _getIndex(arr, id);
-          arr.splice(index, 1);
+        const registerSearch = (search) => {
+          if (!search) return;
+          this.search = search;
         };
 
-        // Handle focus and unfocus
-        const getFocusedIndex = () => {
-          let index = 0;
-
-          this.listboxOptions.forEach((option, i) => {
-            if (option.focused) index = i;
-          });
-
-          return index;
-        };
-
-        const focusOptionByFilter = (filter) => {
-          const optionIndex = this.listboxOptions.findIndex((option) => {
-            const text = option.$el.innerText;
-            return text.toLowerCase().indexOf(filter.toLowerCase()) === 0;
-          });
-
-          if (optionIndex >= 0) _focusOption(optionIndex);
-        };
-
-        const focusFirstOption = () => {
-          _focusOption(0);
-        };
-
-        const focusLastOption = () => {
-          _focusOption(this.listboxOptions.length - 1);
-        };
-
-        const focusPreviousOption = () => {
-          const focusedIndex = getFocusedIndex();
-          const previousIndex = focusedIndex - 1;
-
-          if (previousIndex >= 0) _focusOption(previousIndex);
-        };
-
-        const focusNextOption = () => {
-          const focusedIndex = getFocusedIndex();
-          const nextIndex = focusedIndex + 1;
-
-          if (nextIndex < this.listboxOptions.length) _focusOption(nextIndex);
+        const registerList = (list) => {
+          if (!list) return;
+          this.list = list;
         };
 
-        const unfocusOptions = () => {
-          this.listboxOptions.forEach((option) => {
-            if (option.focused) option.unfocus();
-          });
+        const registerItem = (item) => {
+          if (!item) return;
+          this.items.push(item);
         };
 
-        const _focusOption = (index) => {
-          unfocusOptions();
-          this.listboxOptions[index].focus();
+        const unregisterItem = (id) => {
+          const index = this.items.findIndex((item) => item.id === id);
+          this.items.splice(index, 1);
         };
 
-        const _getFocusedOption = () => {
-          return this.listboxOptions.filter((option) => option.focused)[0];
-        };
-
-        // handle selecting and unselecting
-        const selectOption = () => {
-          const focusedOption = _getFocusedOption();
-
-          // do nothing if option is already selected
-          if (focusedOption.selected) return;
-
-          // unselect all options
-          this.listboxOptions.forEach((option) => option.unselect());
-
-          // select focused option
-          if (focusedOption) {
-            focusedOption.select();
-            _onSelectedOption(focusedOption.value);
-          }
-        };
-
-        const _onSelectedOption = (value) => {
-          this.listbox.hide();
+        const emit = (value) => {
           this.$emit('input', value);
-          this.$emit('change');
-        };
-
-        // Index helper functions
-        const _getIndex = (arr, id) => {
-          return arr.findIndex((item) => item.id === id);
+          this.$emit('change', value);
         };
 
         return {
-          getListbox,
-          getListboxButton,
-          registerListboxButton,
-          registerListbox,
-          registerOption,
-          unregisterOption,
-          focusOptionByFilter,
-          focusFirstOption,
-          focusLastOption,
-          focusPreviousOption,
-          focusNextOption,
-          unfocusOptions,
-          selectOption,
-          getFocusedIndex,
-          getListboxValue,
+          id,
+          isDark,
+          isRight,
+          listbox,
+          trigger,
+          search,
+          content,
+          list,
+          items,
+          registerTrigger,
+          registerContent,
+          registerSearch,
+          registerList,
+          registerItem,
+          unregisterItem,
+          emit,
         };
       },
     };
@@ -155,14 +78,48 @@ export default {
       type: [String, Number, Object],
       default: null,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
+      id: `listbox-${genId()}`,
       listbox: null,
-      listboxButton: null,
-      listboxOptions: [],
+      trigger: null,
+      content: null,
+      search: null,
+      list: null,
+      items: [],
+      active: false,
+    };
+  },
+
+  mounted() {
+    this.listbox = {
+      setActive: this.setActive,
+      clearActive: this.clearActive,
     };
   },
+
+  methods: {
+    setActive() {
+      this.active = true;
+    },
+
+    clearActive() {
+      this.active = null;
+    },
+  },
 };
 </script>

package/src/Listbox/VTListboxContent.vue

@@ -0,0 +1,151 @@
+<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-if="visible"
+      :id="id"
+      :aria-activedescendant="activeDescedant"
+      :class="{
+        MenuList: headless,
+        'absolute z-10 grid w-full min-w-[222px] overflow-hidden rounded-md py-2 px-3':
+          !headless,
+        'border-gray-100 bg-white shadow-300': !dark && !headless,
+        'bg-forest-default border border-solid border-gray-700 shadow-gray-700':
+          dark && !headless,
+        'left-0': !right && !headless,
+        'right-0': right && !headless,
+        'top-full mt-3': isTop && !headless,
+        'bottom-full mb-3': isBottom && !headless,
+      }"
+      role="listbox"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTListboxContent',
+
+  inject: ['api'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    top: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      id: `listboxcontent-${genId()}`,
+      activeDescedant: null,
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    listbox() {
+      return this.api().listbox;
+    },
+
+    trigger() {
+      return this.api().trigger;
+    },
+
+    search() {
+      return this.api().search;
+    },
+
+    // directions
+    isTop() {
+      return this.top && !this.bottom;
+    },
+
+    isBottom() {
+      return this.bottom;
+    },
+  },
+
+  mounted() {
+    const content = {
+      id: this.id,
+      show: this.show,
+      hide: this.hide,
+      setActiveDescedant: this.setActiveDescedant,
+    };
+
+    this.api().registerContent(content);
+
+    // TODO: Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
+    });
+  },
+
+  destroyed() {
+    // TODO: Create a directive or mixin for this
+    document.removeEventListener('click', this.trigger.onClick());
+  },
+
+  methods: {
+    show() {
+      if (this.visible) return;
+
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.listbox.setActive();
+
+        if (this.search) this.search.el.focus();
+      });
+    },
+
+    hide() {
+      if (!this.visible) return;
+
+      this.visible = false;
+
+      this.$nextTick(() => {
+        this.trigger.focus();
+
+        setTimeout(() => {
+          this.listbox.clearActive();
+          this.trigger.contract();
+        }, 100);
+      });
+    },
+
+    setActiveDescedant(id) {
+      this.activeDescedant = id;
+    },
+  },
+};
+</script>

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>