@veritree/ui 0.1.8 → 0.3.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';
 
@@ -30,6 +30,22 @@ import VTTabList from './src/Tabs/VTTabList.vue';
 import VTTabPanel from './src/Tabs/VTTabPanel.vue';
 import VTTabPanels from './src/Tabs/VTTabPanels.vue';
 
+import VTDialog from './src/Dialog/VTDialog.vue';
+import VTDialogClose from './src/Dialog/VTDialogClose.vue';
+import VTDialogContent from './src/Dialog/VTDialogContent.vue';
+import VTDialogFooter from './src/Dialog/VTDialogFooter.vue';
+import VTDialogHeader from './src/Dialog/VTDialogHeader.vue';
+import VTDialogMain from './src/Dialog/VTDialogMain.vue';
+import VTDialogOverlay from './src/Dialog/VTDialogOverlay.vue';
+
+import VTDrawer from './src/Drawer/VTDrawer.vue';
+import VTDrawerClose from './src/Drawer/VTDrawerClose.vue';
+import VTDrawerContent from './src/Drawer/VTDrawerContent.vue';
+import VTDrawerFooter from './src/Drawer/VTDrawerFooter.vue';
+import VTDrawerHeader from './src/Drawer/VTDrawerHeader.vue';
+import VTDrawerMain from './src/Drawer/VTDrawerMain.vue';
+import VTDrawerOverlay from './src/Drawer/VTDrawerOverlay.vue';
+
 export {
   VTAlert,
   // VTSpinner,
@@ -40,10 +56,10 @@ export {
   VTInputFile,
   VTInputUpload,
   VTTextarea,
-  // VTListbox,
-  // VTListboxButton,
-  // VTListboxOption,
-  // VTListboxOptions,
+  VTListbox,
+  VTListboxButton,
+  VTListboxOption,
+  VTListboxOptions,
   VTModal,
   VTAccordion,
   VTAccordionButton,
@@ -54,5 +70,19 @@ export {
   VTTabList,
   VTTabPanel,
   VTTabPanels,
+  VTDrawer,
+  VTDrawerClose,
+  VTDrawerContent,
+  VTDrawerFooter,
+  VTDrawerHeader,
+  VTDrawerMain,
+  VTDrawerOverlay,
+  VTDialog,
+  VTDialogClose,
+  VTDialogContent,
+  VTDialogFooter,
+  VTDialogHeader,
+  VTDialogMain,
+  VTDialogOverlay,
 }
 

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.8",
+  "version": "0.3.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/Dialog/VTDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    v-if="visible"
+    :id="id"
+    :class="{
+      Dialog: headless,
+      'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
+    }"
+    aria-modal="true"
+    @click="hide"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDialog',
+
+  provide() {
+    return {
+      api: () => {
+        const id = this.id;
+        const isDark = this.dark;
+        const isHeadless = this.headless;
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
+        };
+
+        const registerOverlay = (overlay) => {
+          if (!overlay) return;
+          this.overlay = overlay;
+        };
+
+        const hide = () => this.hide();
+
+        const emit = () => this.emit();
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          hide,
+          emit,
+          registerContent,
+          registerOverlay,
+        };
+      },
+    };
+  },
+
+  model: {
+    prop: 'visible',
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `dialog-${genId()}`,
+      content: null,
+      overlay: null,
+    };
+  },
+
+  computed: {
+    hasContent() {
+      return this.content !== null;
+    },
+
+    hasOverlay() {
+      return this.overlay !== null;
+    },
+  },
+
+  watch: {
+    visible(isVisible) {
+      if (!isVisible) this.hide();
+    },
+  },
+
+  mounted() {
+    if (this.hasContent) this.content.show();
+    if (this.hasOverlay) this.overlay.show();
+  },
+
+  methods: {
+    hide() {
+      if (this.hasOverlay) this.overlay.hide();
+      if (this.hasContent) this.content.hide();
+    },
+
+    emit() {
+      this.$nextTick(() => {
+        this.$emit('input', false);
+        this.$emit('hidden');
+      });
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogClose.vue

@@ -0,0 +1,46 @@
+<template>
+  <VTButton
+    variant="icon"
+    :class="{
+      'Dialog-close': headless,
+      'absolute right-4 top-4': !headless,
+    }"
+    :theme="theme"
+    @click.prevent="hide"
+    ><slot><IconClose class="h-5 w-5" /></slot
+  ></VTButton>
+</template>
+
+<script>
+import { IconClose } from '@veritree/icons';
+import VTButton from '~/components/Button/VTButton.vue';
+
+export default {
+  name: 'VTDialogClose',
+
+  components: { IconClose, VTButton },
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    // temporary till button theme is implemented
+    theme() {
+      return this.dark ? 'dark' : null;
+    },
+  },
+
+  methods: {
+    hide() {
+      this.api().hide();
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogContent.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-class="translate-y-[50px] opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="duration-300 ease-out"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-[50px] opacity-0"
+    @after-leave="hideDialog"
+  >
+    <div
+      v-show="visible"
+      :class="{
+        'Dialog-content': headless,
+        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10':
+          !headless,
+        'bg-white': !dark,
+        'bg-fd-600': dark,
+      }"
+      tabindex="-1"
+      @keyup.esc="hide"
+      @click.stop
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+    this.show();
+
+    this.$nextTick(() => this.$el.focus());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+
+    hideDialog() {
+      this.api().emit();
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogFooter.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogFooter',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'footer',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{
+      'Dialog-header': headless,
+      'mb-8 text-2xl font-semibold': !headless,
+    }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogHeader',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'header',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-header`;
+    },
+  },
+
+  mounted() {
+    this.setDialogLabelledby();
+  },
+
+  methods: {
+    // In here because if there is no header, the dialog will not be labelled by
+    setDialogLabelledby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-labelledby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogMain.vue

@@ -0,0 +1,49 @@
+<template>
+  <component :is="as" :id="id" :class="{ 'Dialog-body': headless }">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogMain',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'main',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-desc`;
+    },
+  },
+
+  mounted() {
+    this.setDialogDescribedby();
+  },
+
+  methods: {
+    // In here because if there is no body, the dialog will not be described by
+    setDialogDescribedby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-describedby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogOverlay.vue

@@ -0,0 +1,52 @@
+<template>
+  <FadeInOut>
+    <div
+      v-if="visible"
+      :class="{
+        'Dialog-overlay': headless,
+        'fixed inset-0 bg-fd-450/80': !headless,
+      }"
+    ></div>
+  </FadeInOut>
+</template>
+
+<script>
+import FadeInOut from '~/components/Transitions/FadeInOut.vue';
+
+export default {
+  name: 'VTDialogOverlay',
+
+  components: {
+    FadeInOut,
+  },
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.visible = true;
+    this.api().registerOverlay(this);
+  },
+
+  methods: {
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawer.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    v-if="visible"
+    :id="id"
+    :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
+    aria-modal="true"
+    @click="hide"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDrawer',
+
+  provide() {
+    return {
+      api: () => {
+        const id = this.id;
+        const isDark = this.dark;
+        const isHeadless = this.headless;
+        const isRight = this.right;
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
+        };
+
+        const registerOverlay = (overlay) => {
+          if (!overlay) return;
+          this.overlay = overlay;
+        };
+
+        const hide = () => this.hide();
+
+        const emit = () => this.emit();
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          isRight,
+          hide,
+          emit,
+          registerContent,
+          registerOverlay,
+        };
+      },
+    };
+  },
+
+  model: {
+    prop: 'visible',
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `drawer-${genId()}`,
+      content: null,
+      overlay: null,
+    };
+  },
+
+  watch: {
+    visible(isVisible) {
+      if (!isVisible) this.hide();
+    },
+  },
+
+  mounted() {
+    if (!this.content) return;
+    this.content.show();
+  },
+
+  methods: {
+    hide() {
+      if (!this.content) return;
+      this.content.hide();
+      if (!this.overlay) return;
+      this.overlay.hide();
+    },
+
+    emit() {
+      this.$nextTick(() => {
+        this.$emit('input', false);
+        this.$emit('hidden');
+      });
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerClose.vue

@@ -0,0 +1,50 @@
+<template>
+  <VTButton
+    variant="icon"
+    :class="{
+      'Drawer-close': headless,
+      'ml-auto mb-4 text-inherit sm:mb-8': !headless,
+    }"
+    :theme="theme"
+    @click.prevent="hide"
+    ><slot><IconLeft :class="{ 'rotate-180': right }" /></slot
+  ></VTButton>
+</template>
+
+<script>
+import { IconLeft } from '@veritree/icons';
+import VTButton from '~/components/Button/VTButton.vue';
+
+export default {
+  name: 'VTDrawerClose',
+
+  components: { IconLeft, VTButton },
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    // temporary till button theme is implemented
+    theme() {
+      return this.dark ? 'dark' : null;
+    },
+  },
+
+  methods: {
+    hide() {
+      this.api().hide();
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerContent.vue

@@ -0,0 +1,97 @@
+<template>
+  <transition
+    :enter-active-class="activeClass"
+    :enter-class="enterClass"
+    :enter-to-class="enterToClass"
+    :leave-active-class="activeClass"
+    :leave-class="leaveClass"
+    :leave-to-class="leaveToClass"
+    @after-leave="hideDrawer"
+  >
+    <div
+      v-show="visible"
+      :class="{
+        'Drawer-content': headless,
+        'absolute z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
+          !headless,
+        'bg-white': !dark,
+        'bg-fd-600': dark,
+        'right-0': right,
+      }"
+      tabindex="-1"
+      @keyup.esc="hide"
+      @click.stop
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    activeClass() {
+      return 'transform transition duration-300 ease-in-out';
+    },
+
+    enterClass() {
+      return `opacity-0 ${this.right ? '' : '-'}translate-x-full`;
+    },
+
+    enterToClass() {
+      return `opacity-100 ${this.right ? '-' : ''}translate-x-0`;
+    },
+
+    leaveClass() {
+      return `opacity-100 ${this.right ? '-' : ''}translate-x-0`;
+    },
+
+    leaveToClass() {
+      return `opacity-0 ${this.right ? '' : '-'}translate-x-full`;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+    this.show();
+
+    this.$nextTick(() => this.$el.focus());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+
+    hideDrawer() {
+      this.api().emit();
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerFooter.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerFooter',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'footer',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{
+      'Drawer-header': headless,
+      'mb-8 text-2xl font-semibold': !headless,
+    }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerHeader',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'header',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-header`;
+    },
+  },
+
+  mounted() {
+    this.setDialogLabelledby();
+  },
+
+  methods: {
+    // In here because if there is no header, the dialog will not be labelled by
+    setDialogLabelledby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-labelledby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerMain.vue

@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{ 'Drawer-body': headless, 'flex-1': !headless }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerMain',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'main',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-desc`;
+    },
+  },
+
+  mounted() {
+    this.setDialogDescribedby();
+  },
+
+  methods: {
+    // In here because if there is no body, the dialog will not be described by
+    setDialogDescribedby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-describedby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerOverlay.vue

@@ -0,0 +1,50 @@
+<template>
+  <FadeInOut>
+    <div
+      v-if="visible"
+      :class="{
+        'Drawer-overlay': headless,
+        'fixed inset-0 z-10 bg-fd-450/80': !headless,
+      }"
+    ></div>
+  </FadeInOut>
+</template>
+
+<script>
+import FadeInOut from '~/components/Transitions/FadeInOut.vue';
+
+export default {
+  components: {
+    FadeInOut,
+  },
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.visible = true;
+    this.api().registerOverlay(this);
+  },
+
+  methods: {
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

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/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;
-};