@veritree/ui 0.6.0 → 0.8.0

package/index.js

@@ -1,59 +1,74 @@
-import VTAvatar from './src/Avatar/VTAvatar.vue';
-import VTAvatarImage from './src/Avatar/VTAvatarImage.vue';
-import VTAvatarText from './src/Avatar/VTAvatarText.vue';
-import VTImage from './src/Image/VTImage.vue';
-import VTImageCounter from './src/Image/VTImageCounter.vue';
-import VTImageHover from './src/Image/VTImageHover.vue';
+import VTAvatar from "./src/Avatar/VTAvatar.vue";
+import VTAvatarImage from "./src/Avatar/VTAvatarImage.vue";
+import VTAvatarText from "./src/Avatar/VTAvatarText.vue";
+import VTImage from "./src/Image/VTImage.vue";
+import VTImageCounter from "./src/Image/VTImageCounter.vue";
+import VTImageHover from "./src/Image/VTImageHover.vue";
+import VTDropdownMenu from "./src/DropdownMenu/VTDropdownMenu.vue";
+import VTDropdownMenuContent from "./src/DropdownMenu/VTDropdownMenuContent.vue";
+import VTDropdownMenuDivider from "./src/DropdownMenu/VTDropdownMenuDivider.vue";
+import VTDropdownMenuGroup from "./src/DropdownMenu/VTDropdownMenuGroup.vue";
+import VTDropdownMenuItem from "./src/DropdownMenu/VTDropdownMenuItem.vue";
+import VTDropdownMenuLabel from "./src/DropdownMenu/VTDropdownMenuLabel.vue";
+import VTDropdownMenuTrigger from "./src/DropdownMenu/VTDropdownMenuTrigger.vue";
+import VTPopover from "./src/Popover/VTPopover.vue";
+import VTPopoverContent from "./src/Popover/VTPopoverContent.vue";
+import VTPopoverDivider from "./src/Popover/VTPopoverDivider.vue";
+import VTPopoverGroup from "./src/Popover/VTPopoverGroup.vue";
+import VTPopoverItem from "./src/Popover/VTPopoverItem.vue";
+import VTPopoverTrigger from "./src/Popover/VTPopoverTrigger.vue";
+import VTFormFeedback from "./src/Form/VTFormFeedback.vue";
+import VTFormGroup from "./src/Form/VTFormGroup.vue";
 
-import VTAlert from './src/Alerts/VTAlert.vue';
+import VTAlert from "./src/Alerts/VTAlert.vue";
 
-import VTSpinner from './src/Spinner/VTSpinner.vue';
+import VTSpinner from "./src/Spinner/VTSpinner.vue";
 
-import VTButton from './src/Button/VTButton.vue';
+import VTButton from "./src/Button/VTButton.vue";
 // import VTButtonSave from './src/Button/VTButtonSave.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 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 VTTextarea from './src/Textarea/VTTextarea.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';
+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 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';
+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";
 
-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 VTDialogTitle from './src/Dialog/VTDialogTitle.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 VTDialogTitle from "./src/Dialog/VTDialogTitle.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 VTDrawerTitle from './src/Drawer/VTDrawerTitle.vue';
-import VTDrawerMain from './src/Drawer/VTDrawerMain.vue';
-import VTDrawerOverlay from './src/Drawer/VTDrawerOverlay.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 VTDrawerTitle from "./src/Drawer/VTDrawerTitle.vue";
+import VTDrawerMain from "./src/Drawer/VTDrawerMain.vue";
+import VTDrawerOverlay from "./src/Drawer/VTDrawerOverlay.vue";
 
 export {
   VTAvatar,
@@ -64,6 +79,21 @@ export {
   VTImageHover,
   VTAlert,
   VTSpinner,
+  VTDropdownMenu,
+  VTDropdownMenuContent,
+  VTDropdownMenuDivider,
+  VTDropdownMenuGroup,
+  VTDropdownMenuItem,
+  VTDropdownMenuLabel,
+  VTDropdownMenuTrigger,
+  VTPopover,
+  VTPopoverContent,
+  VTPopoverDivider,
+  VTPopoverGroup,
+  VTPopoverItem,
+  VTPopoverTrigger,
+  VTFormFeedback,
+  VTFormGroup,
   VTButton,
   // VTButtonSave,
   VTInput,
@@ -101,5 +131,4 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
-}
-
+};

package/nuxt.js

@@ -0,0 +1,20 @@
+import { join } from 'path';
+
+const components = [
+  'src/Avatar',
+  'src/Drawer',
+  'src/Dialog',
+  'src/DropdownMenu',
+  'src/Form',
+  'src/Image',
+  'src/Tabs',
+]
+
+export default function () {
+  this.nuxt.hook('components:dirs', dirs => {
+    // Add ./components dir to the list
+    components.forEach((component) => {
+      dirs.push(join(__dirname, component))
+    });
+  })
+}

package/package.json

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

package/src/Avatar/VTAvatarImage.vue

@@ -4,10 +4,10 @@
 </template>
 
 <script>
-import VTImage from '~/components/Image/VTImage.vue';
+import VTImage from "../Image/VTImage.vue";
 
 export default {
-  name: 'VTAvatarImage',
+  name: "VTAvatarImage",
 
   components: { VTImage },
 
@@ -18,7 +18,7 @@ export default {
     },
     src: {
       type: String,
-      default: '',
+      default: "",
     },
     cdnSrc: {
       type: [String, Object],
@@ -30,7 +30,7 @@ export default {
     attrs() {
       return {
         alt: this.alt,
-        class: 'h-auto w-full',
+        class: "h-auto w-full",
       };
     },
   },

package/src/DropdownMenu/VTDropdownMenu.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="relative">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDropdownMenu',
+
+  provide() {
+    return {
+      api: () => {
+        const { dark: isDark, headless: isHeadless, right: isRight } = this;
+        const { id, trigger, content, items } = this;
+
+        const registerTrigger = (trigger) => {
+          this.trigger = trigger;
+        };
+
+        const registerContent = (content) => {
+          this.content = content;
+        };
+
+        const registerItem = (item) => {
+          this.items.push(item);
+        };
+
+        const unregisterItems = () => {
+          this.items = [];
+        };
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          isRight,
+          trigger,
+          content,
+          items,
+          registerTrigger,
+          registerContent,
+          registerItem,
+          unregisterItems,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `menu-${genId()}`,
+      trigger: null,
+      content: null,
+      items: [],
+    };
+  },
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuContent.vue

@@ -0,0 +1,92 @@
+<template>
+  <transition
+    enter-active-class="duration-200 ease-out"
+    enter-class="translate-y-[15px] opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="duration-200 ease-in"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-[15px] opacity-0"
+    @after-leave="hide"
+  >
+    <div
+      v-if="visible"
+      :id="id"
+      :class="{
+        MenuList: headless,
+        'absolute top-full mt-3 grid min-w-[222px] overflow-hidden rounded border border-solid py-2 px-3 transition-all':
+          !headless,
+        'border-gray-100 bg-white shadow-300': !dark,
+        'bg-forest-default border-gray-700 shadow-gray-700': dark,
+        'left-0': !right,
+        'right-0': right,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDropdownMenuContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      id: `menucontent-${genId()}`,
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    trigger() {
+      return this.api().trigger;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+
+    this.$nextTick(() => {
+      if (this.trigger) this.trigger.toggleHasPopup();
+    });
+
+    // TODO: Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
+    });
+  },
+
+  destroyed() {
+    // TODO: Create a directive or mixin for this
+    document.removeEventListener('click', this.trigger.onClick());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+      this.api().unregisterItems();
+    },
+  },
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuDivider.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="{
+      PopoverDivider: headless,
+      '-mx-3 my-2 h-[1px]': !headless,
+      'bg-gray-200': !dark,
+      'bg-fd-500': dark,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTDropdownMenuDivider',
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuGroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <div role="group"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'VTDropdownMenuGroup',
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuItem.vue

@@ -0,0 +1,171 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :to="to"
+    :class="{
+      MenuItem: headless,
+      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 text-inherit no-underline':
+        !headless,
+      'hover:bg-secondary-200/10': !dark,
+      'text-white hover:bg-fd-450 focus:bg-fd-450': dark,
+      'pointer-events-none opacity-75': disabled,
+    }"
+    :tabindex="tabIndex"
+    :aria-disabled="disabled"
+    role="menuitem"
+    @click.stop="onClick"
+    @keydown.down.prevent="focusPreviousItem"
+    @keydown.up.prevent="focusNextItem"
+    @keydown.home.prevent="focusFirstItem"
+    @keydown.end.prevent="focusLastItem"
+    @keydown.esc.prevent="onKeyEsc"
+    @keydown.enter.prevent="onClick"
+    @keydown.tab.prevent
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDropdownMenuItem',
+
+  inject: ['api'],
+
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    href: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `menuitem-${genId()}`,
+      index: null,
+      tabIndex: 0,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    as() {
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+    },
+
+    items() {
+      return this.api().items;
+    },
+
+    el() {
+      return this.$el;
+    },
+
+    trigger() {
+      return this.api().trigger;
+    },
+
+    content() {
+      return this.api().content;
+    },
+  },
+
+  mounted() {
+    const item = {
+      focus: this.focus,
+      el: this.el,
+    };
+
+    this.api().registerItem(item);
+
+    this.index = this.items.length - 1;
+  },
+
+  methods: {
+    focus() {
+      if (!this.el) return;
+
+      this.tabIndex = -1;
+      this.el.focus();
+    },
+
+    focusFirstItem() {
+      this.setFocusToItem(0);
+    },
+
+    focusLastItem() {
+      this.setFocusToItem(this.items.length - 1);
+    },
+
+    /**
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
+     */
+    focusPreviousItem() {
+      const isLast = this.index === this.items.length - 1;
+      const goToIndex = isLast ? 0 : this.index + 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
+     */
+    focusNextItem() {
+      const isFirst = this.index === 0;
+      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus item by remove its tabindex and calling
+     * focus to the element.
+     *
+     * @param {Number, String} goToIndex
+     */
+    setFocusToItem(goToIndex) {
+      this.tabIndex = 0;
+      this.items[goToIndex].focus();
+    },
+
+    /**
+     * Hides content/menu and focus on trigger
+     */
+    leaveMenu() {
+      if (this.content) this.content.hide();
+      if (this.trigger) this.trigger.focus();
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onClick() {
+      if (this.disabled) return;
+
+      this.$emit('click');
+      this.$nextTick(() => this.leaveMenu());
+    },
+  },
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    :class="{
+      MenuLabel: headless,
+      'mb-2 block text-xs uppercase': !headless,
+      'text-inherit': !dark,
+      'text-white': dark,
+    }"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTDropdownMenuLabel',
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    :aria-haspopup="hasPopup"
+    :aria-expanded="expanded"
+    :aria-controls="controls"
+    @keydown.down.prevent="onKeyArrowDown"
+    @keydown.up.prevent="onKeyArrowUp"
+    @keydown.esc.prevent="onKeyesc"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTDropdownMenuTrigger',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+      controls: null,
+    };
+  },
+
+  computed: {
+    // gets slot element
+    slotElm() {
+      return this.$slots.default[0].elm;
+    },
+
+    slotLength() {
+      return this.$slots.default.length;
+    },
+
+    content() {
+      return this.api().content;
+    },
+
+    items() {
+      return this.api().items;
+    },
+
+    firstMenuItem() {
+      return this.items[0];
+    },
+
+    lastMenuItem() {
+      return this.items[this.items.length - 1];
+    },
+  },
+
+  mounted() {
+    this.api().registerTrigger(this);
+    this.addEventListenerToSlotElm();
+  },
+
+  destroyed() {
+    this.slotElm.removeEventListener('click', this.onClick());
+  },
+
+  methods: {
+    /**
+     * Add event listener to slot element
+     *
+     * The click event has to be added to the slot child element
+     * since we are not setting the onclick on the component
+     * itself.
+     *
+     * Slot must have only one child element. It avoids
+     * errors related to adding the event listener.
+     */
+    addEventListenerToSlotElm() {
+      if (!this.slotLength) return;
+
+      if (this.slotLength > 1) {
+        throw new Error('VTPopoverButton only accepts one item in its slot');
+      }
+
+      this.slotElm.addEventListener('click', (e) => {
+        e.stopImmediatePropagation();
+        this.onClick();
+      });
+    },
+
+    /**
+     * Shows content/menu if not already visible
+     */
+    showContent() {
+      if (!this.expanded) {
+        this.toggleExpanded();
+        this.content.show();
+      }
+    },
+
+    /**
+     * Focus slot element if it exists and toggle expanded
+     */
+    focus() {
+      if (!this.slotElm) return;
+
+      this.slotElm.focus();
+      this.toggleExpanded();
+    },
+
+    /**
+     * Toggles aria expanded attribute/state
+     */
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    },
+
+    /**
+     * Toggles aria popup/controls attribute/state
+     */
+    toggleHasPopup() {
+      if (!this.content) return;
+
+      this.hasPopup = !this.hasPopup;
+
+      if (!this.hasPopup) {
+        this.controls = null;
+        return;
+      }
+
+      this.controls = this.content.id;
+    },
+
+    /**
+     * On click, do the following:
+     *
+     * 1. Toggle aria expanded attribute/state
+     * 2. Open the menu if it's closed
+     * 3. Close the menu if it's open
+     */
+    onClick() {
+      if (!this.content) return;
+
+      this.toggleExpanded();
+
+      this.$nextTick(() => {
+        if (this.expanded) this.content.show();
+        else this.content.hide();
+      });
+    },
+
+    /**
+     * On key arrow down, do the following:
+     *
+     * 1. if the menu is not expanded, expand it and focus the first menu item
+     * 2. if the menu is expanded, focus the first menu item
+     */
+    onKeyArrowDown() {
+      if (!this.content) return;
+
+      this.showContent();
+
+      this.$nextTick(() => {
+        this.firstMenuItem.focus();
+      });
+    },
+
+    /**
+     * On key arrow up, do the following:
+     *
+     * 1. if the menu is not expanded, expand it and focus the last menu item
+     * 2. if the menu is expanded, focus the last menu item
+     */
+    onKeyArrowUp() {
+      if (!this.content) return;
+
+      this.showContent();
+
+      this.$nextTick(() => {
+        this.lastMenuItem.focus();
+      });
+    },
+
+    onKeyesc() {
+      if (!this.content) return;
+
+      if (this.expanded) {
+        this.toggleExpanded();
+        this.content.hide();
+      }
+    },
+  },
+};
+</script>

package/src/Form/VTFormFeedback.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="form-feedback" :class="classes">
+    <component :is="icon" v-if="showIcon" />
+    <span class="text-gray-500"><slot></slot></span>
+  </div>
+</template>
+
+<script>
+import { IconCheck, IconWarning } from '@veritree/icons';
+
+export default {
+  name: 'VTFormFeedback',
+
+  components: {
+    IconWarning,
+    IconCheck,
+  },
+
+  props: {
+    variant: {
+      type: [String, Object],
+      default: '',
+      validator(value) {
+        if (value === '' || typeof value === 'object') {
+          return true;
+        }
+
+        return ['success', 'warning', 'error'].includes(value);
+      },
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = {};
+
+      if (this.variant) {
+        classes[`form-feedback--${this.variant}`] = true;
+      }
+
+      return classes;
+    },
+
+    icon() {
+      if (this.variant === 'success') return IconCheck;
+      return IconWarning;
+    },
+
+    showIcon() {
+      return !this.hideIcon;
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/Form/VTFormGroup.vue

@@ -0,0 +1,22 @@
+<template>
+  <component :is="as" :class="classes" class="form-group">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  data() {
+    return {
+      classes: {},
+    };
+  },
+};
+</script>

package/src/Popover/VTPopover.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    :id="id"
+    class="relative"
+    :aria-haspopup="content ? 'true' : null"
+    :aria-controls="content ? content.id : null"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTPopover',
+
+  provide() {
+    return {
+      api: () => {
+        const { dark: isDark, headless: isHeadless, right: isRight } = this;
+        const { id, button, content } = this;
+
+        const registerButton = (button) => {
+          if (!button) return;
+          this.button = button;
+        };
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
+        };
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          isRight,
+          button,
+          content,
+          registerButton,
+          registerContent,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `popover-${genId()}`,
+      button: null,
+      content: null,
+    };
+  },
+};
+</script>

package/src/Popover/VTPopoverContent.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition
+    enter-active-class="duration-200 ease-out"
+    enter-class="translate-y-[15px] opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="duration-200 ease-in"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-[15px] opacity-0"
+    @after-leave="hide"
+  >
+    <div
+      v-show="visible"
+      :id="id"
+      :class="{
+        PopoverPanel: headless,
+        'absolute top-full mt-3 rounded-md shadow-300 ':
+          !headless,
+        'bg-white': !dark,
+        'border-gray-700 bg-forest-default shadow-gray-700': dark,
+        'left-0': !right,
+        'right-0': right,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTPopoverContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      id: `popover-panel-${genId()}`,
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+
+    // TODO: Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.visible && !this.$el.contains(e.target)) this.hide();
+    });
+  },
+
+  destroyed() {
+    // TODO: Create a directive or mixin for this
+    document.removeEventListener('click', this.hide());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverDivider.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="{
+      PopoverDivider: headless,
+      'h-[1px]': !headless,
+      'bg-white': !dark,
+      'bg-fd-500': dark,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverDivider',
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid">
+    <slot></slot>
+  </div>
+</template>

package/src/Popover/VTPopoverItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="as"
+    :class="{
+      PopoverItem: headless,
+      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 no-underline':
+        !headless,
+      'text-fd-500': !dark,
+      'text-white hover:bg-fd-450': dark,
+    }"
+    @click="onClick"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverItem',
+
+  inject: ['api'],
+
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    href: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    as() {
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (this.href || this.to) return;
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/Popover/VTPopoverTrigger.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @keydown.esc.prevent="onEsc">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTPopoverTrigger',
+
+  inject: ['api'],
+
+  computed: {
+    content() {
+      return this.api().content;
+    },
+  },
+
+  mounted() {
+    this.api().registerButton(this);
+    this.handleSlotTrigger();
+  },
+
+  methods: {
+    handleSlotTrigger() {
+      const slot = this.$slots.default;
+      const trigger = slot[0].elm;
+
+      if (slot.length > 1) {
+        console.error('VTPopoverButton only accepts one item in its slot');
+        return;
+      }
+
+      trigger.addEventListener('click', (e) => {
+        this.onClick();
+        e.stopPropagation();
+      });
+    },
+
+    onClick() {
+      if (this.content.visible) this.content.hide();
+      else this.content.show();
+    },
+
+    onEsc() {
+      if (!this.content) return;
+      this.content.hide();
+    },
+  },
+};
+</script>