@veritree/ui 0.0.1 → 0.1.1

package/src/Listbox/VTListboxOption.vue

@@ -0,0 +1,121 @@
+<template>
+  <li
+    :id="id"
+    :aria-selected="selected"
+    class="Listbox-option"
+    role="option"
+    @mousedown.prevent="onMouseDown"
+    @mousemove="onMousemove"
+    @mouseout="onMouseleave"
+  >
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+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,
+    },
+  },
+
+  data() {
+    return {
+      api: this.api(),
+      id: `listbox-option-${genId()}`,
+      selected: false,
+      focused: false,
+      isMousemove: false,
+    };
+  },
+
+  watch: {
+    focused(newValue) {
+      if (newValue) {
+        if (!this.isMousemove) {
+          this.$el.scrollIntoView({ block: 'nearest' });
+        }
+
+        const listbox = this.api.getListbox();
+        listbox.updateActiveDescendant(this.id);
+      }
+    },
+  },
+
+  mounted() {
+    this.api.registerOption(this);
+
+    // 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.selected = true;
+    },
+
+    unselect() {
+      this.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

@@ -0,0 +1,120 @@
+<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 {
+      api: this.api(),
+      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 = '';
+        }, 300);
+      }
+
+      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>

package/src/Modal/VTModal.vue

@@ -0,0 +1,69 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-300 ease-in"
+    leave-class="opacity-100"
+    leave-to-class="transform opacity-0"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave"
+  >
+    <div
+      v-if="visible"
+      class="fixed inset-0 z-50 flex flex-col justify-center bg-fd-700/75 px-4 sm:px-6 md:px-8"
+      tabindex="-1"
+      @keyup.esc="close"
+      @click="close"
+    >
+      <div
+        class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white p-20"
+        @click.stop
+      >
+        <div class="absolute right-4 top-4">
+          <VTButton variant="icon" @click.prevent="close"
+            ><IconClose class="h-4 w-4"
+          /></VTButton>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { IconClose } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
+
+export default {
+  name: 'VTModal',
+
+  components: { IconClose, VTButton },
+
+  model: {
+    prop: 'visible',
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('input', false);
+    },
+
+    afterEnter() {
+      this.$emit('shown');
+      this.$nextTick(() => this.$el.focus());
+    },
+
+    afterLeave() {
+      this.$emit('hidden');
+    },
+  },
+};
+</script>

package/src/Tabs/VTTab.vue

@@ -0,0 +1,126 @@
+<template>
+  <button
+    :id="id"
+    :aria-selected="selected"
+    :aria-controls="`tabpanel-${index}`"
+    role="tab"
+    type="button"
+    @click.stop="onClick"
+    @keydown="onKeyDown"
+    @blur="onBlur"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+import { keys } from '../utils/keyboard';
+
+export default {
+  name: 'VTTabItem',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      api: this.api(),
+      index: null,
+      indexFocus: null,
+      selected: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tab-${this.index}`;
+    },
+  },
+
+  mounted() {
+    this.api.registerTab(this);
+  },
+
+  beforeDestroy() {
+    this.api.unregisterTab(this.index);
+  },
+
+  methods: {
+    select() {
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    focus() {
+      this.$el.focus();
+    },
+
+    focusFirstTab() {
+      this.api.focusTab(0);
+    },
+
+    focusLastTab(lastTabIndex) {
+      this.api.focusTab(lastTabIndex);
+    },
+
+    focusPreviousTab(lastTabIndex) {
+      if (this.indexFocus === 0) {
+        this.focusLastTab(lastTabIndex);
+        return;
+      }
+
+      this.api.focusTab(this.indexFocus - 1);
+    },
+
+    focusNextTab(lastTabIndex) {
+      if (this.indexFocus === lastTabIndex) {
+        this.focusFirstTab();
+        return;
+      }
+
+      this.api.focusTab(this.indexFocus + 1);
+    },
+
+    onClick() {
+      this.api.selectTab(this.index);
+      this.$emit('change');
+    },
+
+    onKeyDown(event) {
+      const key = event.key;
+      const lastTabIndex = this.api.getTabsLength() - 1;
+
+      if (this.indexFocus === null) {
+        this.indexFocus = this.index;
+      }
+
+      switch (key) {
+        case keys.left:
+          event.preventDefault();
+          this.focusPreviousTab(lastTabIndex);
+          break;
+        case keys.right:
+          event.preventDefault();
+          this.focusNextTab(lastTabIndex);
+          break;
+        case keys.home:
+          event.preventDefault();
+          this.focusFirstTab();
+          break;
+        case keys.end:
+          event.preventDefault();
+          this.focusLastTab(lastTabIndex);
+          break;
+        default:
+          break;
+      }
+    },
+
+    onBlur() {
+      this.indexFocus = null;
+    },
+  },
+};
+</script>

package/src/Tabs/VTTabGroup.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="TabGroup">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTTabGroup',
+
+  provide() {
+    return {
+      api: () => {
+        const registerTab = (tab) => {
+          _register(this.tabs, tab);
+          if (tab.index === 0) tab.select();
+        };
+
+        const registerTabPanel = (tabPanel) => {
+          _register(this.tabPanels, tabPanel);
+          if (tabPanel.index === 0) tabPanel.show();
+        };
+
+        const unregisterTab = (id) => {
+          _unregister(this.tabs, id);
+        };
+
+        const unregisterTabPanel = (id) => {
+          _unregister(this.tabPanels, id);
+        };
+
+        const selectTab = (tabIndex) => {
+          this.tabs.forEach((tab, index) => {
+            index === tabIndex ? tab.select() : tab.unselect();
+            _handleTabPanels(tabIndex);
+          });
+        };
+
+        const focusTab = (tabIndex) => {
+          this.tabs[tabIndex].focus();
+        };
+
+        const getTabsLength = () => {
+          return this.tabsLength;
+        };
+
+        const _handleTabPanels = (tabIndex) => {
+          this.tabPanels.forEach((tabPanel, index) => {
+            index === tabIndex ? tabPanel.show() : tabPanel.hide();
+          });
+        };
+
+        const _register = (arr, item) => {
+          arr.push(item);
+          _index(arr);
+        };
+
+        const _unregister = (arr, id) => {
+          const index = _getIndex(arr, id);
+          arr.splice(index, 1);
+        };
+
+        // todo: alter index inside component
+        const _index = (arr) => {
+          arr.forEach((item, index) => {
+            if (!item.index) item.index = index;
+          });
+        };
+
+        const _getIndex = (arr, id) => {
+          return arr.findIndex((tab) => tab.id === id);
+        };
+
+        return {
+          unregisterTab,
+          registerTab,
+          unregisterTabPanel,
+          registerTabPanel,
+          selectTab,
+          focusTab,
+          getTabsLength,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      tabs: [],
+      tabPanels: [],
+    };
+  },
+
+  computed: {
+    tabsLength() {
+      return this.tabs.length;
+    },
+  },
+};
+</script>

package/src/Tabs/VTTabList.vue

@@ -0,0 +1,11 @@
+<template>
+  <div role="tablist" class="TabList">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTTabList',
+};
+</script>

package/src/Tabs/VTTabPanel.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-show="visible"
+    :id="id"
+    :aria-labelledby="`tab-${index}`"
+    role="tabpanel"
+    tabindex="0"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTTabPanel',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      api: this.api(),
+      index: null,
+      visible: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tabpabel-${this.index}`;
+    },
+  },
+
+  mounted() {
+    this.api.registerTabPanel(this);
+  },
+
+  beforeDestroy() {
+    this.api.unregisterTabPanel(this.id);
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

package/src/Tabs/VTTabPanels.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="TabPanels">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTTabPanels',
+};
+</script>

package/src/Textarea/VTTextarea.vue

@@ -0,0 +1,77 @@
+<template>
+  <textarea
+    :class="classes"
+    class="form-control"
+    :data-theme="theme"
+    :value="value"
+    v-on="listeners"
+  ></textarea>
+</template>
+
+<script>
+export default {
+  name: 'VTTextarea',
+
+  props: {
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: null,
+      validator(value) {
+        return ['dark'].includes(value);
+      },
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+      validator(value) {
+        if (value === '' || typeof value === 'object') {
+          return true;
+        }
+
+        return ['success', 'warning', 'error'].includes(value);
+      },
+    },
+    value: {
+      type: [String, Number, Object],
+      default: null,
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = {};
+
+      if (this.variant) {
+        classes[`form-control--${this.variant}`] = true;
+      }
+
+      return classes;
+    },
+
+    listeners() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: (event) => {
+            if (this.lazy) return;
+            this.$emit('input', event.target.value);
+          },
+          blur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+  },
+};
+</script>