@veritree/ui 0.0.1 → 0.1.1

package/index.js

@@ -1,12 +1,47 @@
-import vtAccordion from './src/vtAccordion/vtAccordion.vue';
-import vtAccordionButton from './src/vtAccordion/vtAccordionButton.vue';
-import vtAccordionGroup from './src/vtAccordion/vtAccordionGroup.vue';
-import vtAccordionPanel from './src/vtAccordion/vtAccordionPanel.vue';
+import VTButton from './src/Button/VTButton.vue';
+
+import VTInput from './src/Input/VTInput.vue';
+import VTInputDate from './src/Input/VTInputDate.vue';
+import VTInputFile from './src/Input/VTInputFile.vue';
+// import VTInputUpload from './src/Input/VTInputUpload.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';
+import VTAccordionButton from './src/Accordion/VTAccordionButton.vue';
+import VTAccordionGroup from './src/Accordion/VTAccordionGroup.vue';
+import VTAccordionPanel from './src/Accordion/VTAccordionPanel.vue';
+
+import VTTab from './src/Tabs/VTTab.vue';
+import VTTabGroup from './src/Tabs/VTTabGroup.vue';
+import VTTabList from './src/Tabs/VTTabList.vue';
+import VTTabPanel from './src/Tabs/VTTabPanel.vue';
+import VTTabPanels from './src/Tabs/VTTabPanels.vue';
 
 export {
-  vtAccordion,
-  vtAccordionButton,
-  vtAccordionGroup,
-  vtAccordionPanel,
+  VTButton,
+  VTInput,
+  VTInputDate,
+  VTInputFile,
+  // VTInputUpload,
+  // VTListbox,
+  // VTListboxButton,
+  // VTListboxOption,
+  // VTListboxOptions,
+  // VTModal,
+  VTAccordion,
+  VTAccordionButton,
+  VTAccordionGroup,
+  VTAccordionPanel,
+  VTTab,
+  VTTabGroup,
+  VTTabList,
+  VTTabPanel,
+  VTTabPanels,
 }
 

package/package.json

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

package/src/{vtAccordion/vtAccordion.vue → Accordion/VTAccordion.vue}

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'vtAccordion',
+  name: 'VTAccordion',
   props: {
       multiple: {
           type: Boolean,

package/src/{vtAccordion/vtAccordionButton.vue → Accordion/VTAccordionButton.vue}

@@ -22,7 +22,7 @@ import IconChevronDown from '../icons/IconChevronDown.vue';
 import IconChevronUp from '../icons/IconChevronUp.vue';
 
 export default {
-  name: 'vtAccordionButton',
+  name: 'VTAccordionButton',
   components: { IconChevronDown, IconChevronUp },
   inject: ['api'],
   

package/src/{vtAccordion/vtAccordionGroup.vue → Accordion/VTAccordionGroup.vue}

@@ -11,7 +11,7 @@
 import { genId } from '../utils/genId';
 
 export default {
-  name: 'vtAccordionGroup',
+  name: 'VTAccordionGroup',
   inject: ['api'],
 
   data() {

package/src/{vtAccordion/vtAccordionPanel.vue → Accordion/VTAccordionPanel.vue}

@@ -11,10 +11,8 @@
 </template>
 
 <script>
-// import { keys } from '@/utils/keyboard';
-
 export default {
-  name: 'vtAccordionPanel',
+  name: 'VTAccordionPanel',
   inject: ['api'],
 
   data() {

package/src/Button/VTButton.vue

@@ -0,0 +1,86 @@
+<template>
+  <component
+    :is="tag"
+    :class="classes"
+    :data-theme="theme"
+    :to="to"
+    class="Button"
+    type="button"
+    v-on="$listeners"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTButton',
+
+  props: {
+    variant: {
+      type: String,
+      default: 'primary',
+      validator(value) {
+        return [
+          'primary',
+          'secondary',
+          'tertiary',
+          'danger',
+          'custom',
+          'icon',
+        ].includes(value);
+      },
+    },
+    size: {
+      type: String,
+      default: 'large',
+      validator(value) {
+        return ['large', 'small'].includes(value);
+      },
+    },
+    pill: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: null,
+      validator(value) {
+        return ['dark'].includes(value);
+      },
+    },
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = {};
+
+      if (this.variant) {
+        classes[`Button--${this.variant}`] = true;
+      }
+
+      if (this.size) {
+        classes[`Button--${this.size}`] = true;
+      }
+
+      if (this.pill) {
+        classes['Button--pill'] = true;
+      }
+
+      return classes;
+    },
+
+    tag() {
+      if (this.to) {
+        return 'NuxtLink';
+      }
+
+      return 'button';
+    },
+  },
+};
+</script>

package/src/Input/VTInput.vue

@@ -0,0 +1,82 @@
+<template>
+  <input
+    :class="classes"
+    class="form-control"
+    :data-theme="theme"
+    :type="type"
+    :value="value"
+    v-on="listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'VTInput',
+
+  props: {
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    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, Array],
+      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>

package/src/Input/VTInputDate.vue

@@ -0,0 +1,36 @@
+<template>
+  <VTInput v-model="date" type="date" />
+</template>
+
+<script>
+import VTInput from './VTInput.vue';
+
+export default {
+  name: 'VTInputDate',
+
+  components: { VTInput },
+
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    date: {
+      get() {
+        return this.$date.format(this.value, 'YYYY-MM-DD');
+      },
+      set(newDate) {
+        this.$emit('input', newDate);
+      },
+    },
+  },
+};
+</script>

package/src/Input/VTInputFile.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex items-stretch gap-2">
+    <VTInput
+      ref="input"
+      type="file"
+      :value="value"
+      :theme="theme"
+      v-bind="$attrs"
+      @change="onChange"
+    />
+    <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
+  </div>
+</template>
+
+<script>
+import VTButton from '../Button/VTButton.vue';
+import VTInput from './VTInput.vue';
+
+export default {
+  name: 'VTInputFile',
+
+  components: {
+    VTInput,
+    VTButton,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator(value) {
+        return ['dark'].includes(value);
+      },
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      value: null,
+    };
+  },
+
+  methods: {
+    onChange(event) {
+      this.value = this.$refs.input.$el.value;
+      this.$emit('change', event);
+    },
+
+    onButtonClick() {
+      this.$refs.input.$el.click();
+    },
+  },
+};
+</script>

package/src/Input/VTInputUpload.vue

@@ -0,0 +1,54 @@
+<template>
+  <label
+    class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
+    :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
+    @drop.prevent="onDrop"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+  >
+    <IconImagePlaceholder class="mb-3" />
+    <span>Drop your images here, or click to browse</span>
+    <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
+  </label>
+</template>
+
+<script>
+import { IconImagePlaceholder } from '@veritree/icons';
+import VTInput from './VTInput.vue';
+
+export default {
+  name: 'VTInputFile',
+
+  components: {
+    VTInput,
+    IconImagePlaceholder,
+  },
+
+  inheritAttrs: false,
+
+  data() {
+    return {
+      isDraggingOver: false,
+    };
+  },
+
+  methods: {
+    onDrop(event) {
+      this.isDraggingOver = false;
+      this.$emit('drop', event);
+    },
+
+    onDragOver() {
+      this.isDraggingOver = true;
+    },
+
+    onDragLeave() {
+      this.isDraggingOver = false;
+    },
+
+    onChange(event) {
+      this.$emit('change', event);
+    },
+  },
+};
+</script>

package/src/Listbox/VTListbox.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="Listbox"><slot></slot></div>
+</template>
+
+<script>
+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 unregisterOption = (id) => {
+          _unregister(this.listboxOptions, id);
+        };
+
+        // Register helper functions
+        const _register = (arr, item) => {
+          arr.push(item);
+        };
+
+        const _unregister = (arr, id) => {
+          const index = _getIndex(arr, id);
+          arr.splice(index, 1);
+        };
+
+        // 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 unfocusOptions = () => {
+          this.listboxOptions.forEach((option) => {
+            option.unfocus();
+          });
+        };
+
+        const _focusOption = (index) => {
+          unfocusOptions();
+          this.listboxOptions[index].focus();
+        };
+
+        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();
+          this.$emit('input', value);
+          this.$emit('change');
+        };
+
+        // Index helper functions
+        const _getIndex = (arr, id) => {
+          return arr.findIndex((item) => item.id === id);
+        };
+
+        return {
+          getListbox,
+          getListboxButton,
+          registerListboxButton,
+          registerListbox,
+          registerOption,
+          unregisterOption,
+          focusOptionByFilter,
+          focusFirstOption,
+          focusLastOption,
+          focusPreviousOption,
+          focusNextOption,
+          unfocusOptions,
+          selectOption,
+          getFocusedIndex,
+          getListboxValue,
+        };
+      },
+    };
+  },
+
+  props: {
+    value: {
+      type: [String, Number, Object],
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      listbox: null,
+      listboxButton: null,
+      listboxOptions: [],
+    };
+  },
+};
+</script>

package/src/Listbox/VTListboxButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    :aria-expanded="expanded"
+    aria-haspopup="listbox"
+    class="Listbox-button debugger"
+    :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 {
+      api: this.api(),
+      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>