@veritree/ui 0.7.0 → 0.10.0

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>