@veritree/ui 0.1.6 → 0.2.0

package/index.js

@@ -12,10 +12,10 @@ 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 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';
 
@@ -40,10 +40,10 @@ export {
   VTInputFile,
   VTInputUpload,
   VTTextarea,
-  // VTListbox,
-  // VTListboxButton,
-  // VTListboxOption,
-  // VTListboxOptions,
+  VTListbox,
+  VTListboxButton,
+  VTListboxOption,
+  VTListboxOptions,
   VTModal,
   VTAccordion,
   VTAccordionButton,

package/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "@veritree/ui",
+  "version": "0.1.9",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@veritree/icons": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@veritree/icons/-/icons-0.12.0.tgz",
+      "integrity": "sha512-vunUKzvS9neslSf3R3y6RYQrcfRpxmp8PnhWWe2peYiyElLIJcb7zAsfCZ+I0Fg5PQ6GZG6StqWy0WF7MJ7VOg=="
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@veritree/icons": "^0.12.0"
+    "@veritree/icons": "^0.19.0"
   }
 }

package/src/Listbox/VTListbox.vue

@@ -88,7 +88,7 @@ export default {
 
         const unfocusOptions = () => {
           this.listboxOptions.forEach((option) => {
-            option.unfocus();
+            if (option.focused) option.unfocus();
           });
         };
 

package/src/Listbox/VTListboxButton.vue

@@ -2,7 +2,7 @@
   <button
     :aria-expanded="expanded"
     aria-haspopup="listbox"
-    class="Listbox-button debugger"
+    class="Listbox-button"
     :data-theme="theme"
     type="button"
     @click.prevent="onClick"
@@ -39,13 +39,12 @@ export default {
 
   data() {
     return {
-      api: this.api(),
       expanded: false,
     };
   },
 
   mounted() {
-    this.api.registerListboxButton(this);
+    this.api().registerListboxButton(this);
   },
 
   methods: {
@@ -59,7 +58,7 @@ export default {
     },
 
     onClick() {
-      const listbox = this.api.getListbox();
+      const listbox = this.api().getListbox();
       this.expanded ? listbox.hide() : listbox.show();
 
       this.toggleExpanded();
@@ -67,7 +66,7 @@ export default {
 
     onKeyDown(event) {
       const key = event.key;
-      const listbox = this.api.getListbox();
+      const listbox = this.api().getListbox();
 
       switch (key) {
         case keys.down:

package/src/Listbox/VTListboxOption.vue

@@ -1,7 +1,6 @@
 <template>
   <li
     :id="id"
-    :aria-selected="selected"
     class="Listbox-option"
     role="option"
     @mousedown.prevent="onMouseDown"
@@ -13,6 +12,7 @@
 </template>
 
 <script>
+import { scrollElementIntoView } from '../utils/components';
 import { genId } from '../utils/ids';
 import { areObjsEqual, isObj } from '../utils/objects';
 
@@ -26,36 +26,41 @@ export default {
       type: [String, Number, Object],
       required: true,
     },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
-      api: this.api(),
       id: `listbox-option-${genId()}`,
-      selected: false,
       focused: false,
       isMousemove: false,
+      parent: null,
     };
   },
 
   watch: {
     focused(newValue) {
-      if (newValue) {
-        if (!this.isMousemove) {
-          this.$el.scrollIntoView({ block: 'nearest' });
-        }
+      if (!newValue) return;
 
-        const listbox = this.api.getListbox();
-        listbox.updateActiveDescendant(this.id);
-      }
+      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);
+    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();
+    const listboxOptionSelected = this.api().getListboxValue();
 
     if (!listboxOptionSelected) {
       return;
@@ -77,7 +82,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.api.unregisterOption(this.id);
+    this.api().unregisterOption(this.id);
   },
 
   methods: {
@@ -92,15 +97,15 @@ export default {
     },
 
     select() {
-      this.selected = true;
+      this.$el.setAttribute('aria-selected', true);
     },
 
     unselect() {
-      this.selected = false;
+      this.$el.setAttribute('aria-selected', false);
     },
 
     onMouseDown(event) {
-      if (event.buttons === 1) this.api.selectOption(this);
+      if (event.buttons === 1) this.api().selectOption(this);
     },
 
     // Mousemove instead of mouseover to support keyboard navigation.
@@ -108,7 +113,7 @@ export default {
     // mouseover event gets triggered.
     onMousemove() {
       this.isMousemove = true;
-      this.api.unfocusOptions();
+      this.api().unfocusOptions();
       this.focus();
     },
 

package/src/Listbox/VTListboxOptions.vue

@@ -23,7 +23,6 @@ export default {
 
   data() {
     return {
-      api: this.api(),
       visible: false,
       filter: '',
     };
@@ -37,7 +36,7 @@ export default {
           this.handleOptionFocus();
         });
       } else {
-        const listboxButton = this.api.getListboxButton();
+        const listboxButton = this.api().getListboxButton();
 
         this.$nextTick(() => {
           listboxButton.focus();
@@ -47,7 +46,7 @@ export default {
   },
 
   mounted() {
-    this.api.registerListbox(this);
+    this.api().registerListbox(this);
   },
 
   methods: {
@@ -60,8 +59,8 @@ export default {
     },
 
     handleOptionFocus() {
-      const selectedIndex = this.api.getFocusedIndex();
-      if (!selectedIndex) this.api.focusFirstOption();
+      const selectedIndex = this.api().getFocusedIndex();
+      if (!selectedIndex) this.api().focusFirstOption();
     },
 
     updateActiveDescendant(id) {
@@ -78,31 +77,31 @@ export default {
         clearTimeout(timer);
 
         timer = setTimeout(() => {
-          this.api.focusOptionByFilter(this.filter);
+          this.api().focusOptionByFilter(this.filter);
           this.filter = '';
-        }, 300);
+        }, 100);
       }
 
       switch (key) {
         case keys.up:
           event.preventDefault();
-          this.api.focusPreviousOption();
+          this.api().focusPreviousOption();
           break;
         case keys.down:
           event.preventDefault();
-          this.api.focusNextOption();
+          this.api().focusNextOption();
           break;
         case keys.home:
           event.preventDefault();
-          this.api.focusFirstOption();
+          this.api().focusFirstOption();
           break;
         case keys.end:
           event.preventDefault();
-          this.api.focusLastOption();
+          this.api().focusLastOption();
           break;
         case keys.enter:
           event.preventDefault();
-          this.api.selectOption();
+          this.api().selectOption();
           break;
         case keys.escape:
           this.hide();

package/src/Modal/VTModal.vue

@@ -11,13 +11,13 @@
   >
     <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"
+      class="fixed inset-0 z-50 flex flex-col justify-center bg-fd-700/75"
       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"
+        class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white"
         @click.stop
       >
         <div class="absolute right-4 top-4">

package/src/Tabs/VTTabGroup.vue

@@ -4,14 +4,14 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .TabGroup.vertical{
-  .TabList{
-    display: flex;
-    flex-direction: column;
-  }
   display: flex;
 }
+.TabGroup.vertical .TabList{
+  display: flex;
+  flex-direction: column;
+}
 </style>
 
 <script>

package/src/utils/components.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {HTMLElement} el
+ * @param {HTMLElement} parent
+ */
+ export const scrollElementIntoView = (el, parent) => {
+  // this works better than scrollIntoView
+  if (parent.scrollHeight <= parent.clientHeight) return;
+
+  const scrollBottom = parent.clientHeight + parent.scrollTop;
+  const elBottom = el.offsetTop + el.offsetHeight;
+
+  if (elBottom > scrollBottom) {
+    parent.scrollTop = elBottom - parent.clientHeight;
+  } else if (el.offsetTop < parent.scrollTop) {
+    parent.scrollTop = el.offsetTop;
+  }
+};

package/src/utils/ids.js

@@ -11,24 +11,3 @@ export const genId = () => {
   if (!gen) gen = idMaker();
   return gen.next().value;
 };
-
-// Add leading zeros
-// export const pad = (num, size) => {
-//   let s = num + '';
-
-//   while (s.length < size) {
-//     s = '0' + s;
-//   }
-
-//   return s;
-// };
-
-export const addZerosToId = (id) => {
-  let formattedId = null;
-
-  if (id < 10) formattedId = '000' + id;
-  else if (id < 100) formattedId = '00' + id;
-  else if (id < 1000) formattedId = '0' + id;
-
-  return '#' + formattedId;
-};