@veritree/ui 0.5.2 → 0.7.0

package/index.js

@@ -1,56 +1,95 @@
-import VTAlert from './src/Alerts/VTAlert.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 VTSpinner from './src/Spinner/VTSpinner.vue';
+import VTAlert from "./src/Alerts/VTAlert.vue";
 
-import VTButton from './src/Button/VTButton.vue';
+import VTSpinner from "./src/Spinner/VTSpinner.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,
+  VTAvatarImage,
+  VTAvatarText,
+  VTImage,
+  VTImageCounter,
+  VTImageHover,
   VTAlert,
-  // VTSpinner,
+  VTSpinner,
+  VTDropdownMenu,
+  VTDropdownMenuContent,
+  VTDropdownMenuDivider,
+  VTDropdownMenuGroup,
+  VTDropdownMenuItem,
+  VTDropdownMenuLabel,
+  VTDropdownMenuTrigger,
+  VTPopover,
+  VTPopoverContent,
+  VTPopoverDivider,
+  VTPopoverGroup,
+  VTPopoverItem,
+  VTPopoverTrigger,
   VTButton,
   // VTButtonSave,
   VTInput,
@@ -88,5 +127,4 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
-}
-
+};

package/package.json

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

package/src/Avatar/VTAvatar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    :class="{
+      Avatar: headless,
+      'flex items-center justify-center overflow-hidden rounded-full':
+        !headless,
+      'h-10 w-10': !small,
+      'h-8 w-8': small,
+      'border border-solid': !dark,
+      'bg-white text-fd-500': dark,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTAvatar',
+
+  provide() {
+    return {
+      api: () => {
+        const { dark: isDark, headless: isHeadless, light: isLight } = this;
+
+        return {
+          isDark,
+          isHeadless,
+          isLight,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/Avatar/VTAvatarImage.vue

@@ -0,0 +1,38 @@
+<template>
+  <VTImage v-if="src" :src="src" v-bind="attrs" width="40" />
+  <VTImage v-else-if="cdnSrc" :cdn-src="cdnSrc" v-bind="attrs" width="40" />
+</template>
+
+<script>
+import VTImage from "../Image/VTImage.vue";
+
+export default {
+  name: "VTAvatarImage",
+
+  components: { VTImage },
+
+  props: {
+    alt: {
+      type: String,
+      required: true,
+    },
+    src: {
+      type: String,
+      default: "",
+    },
+    cdnSrc: {
+      type: [String, Object],
+      default: null,
+    },
+  },
+
+  computed: {
+    attrs() {
+      return {
+        alt: this.alt,
+        class: "h-auto w-full",
+      };
+    },
+  },
+};
+</script>

package/src/Avatar/VTAvatarText.vue

@@ -0,0 +1,9 @@
+<template>
+  <span class="font-semibold"><slot></slot></span>
+</template>
+
+<script>
+export default {
+  name: 'VTAvatarText',
+};
+</script>

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/Image/VTImage.vue

@@ -0,0 +1,74 @@
+<template>
+  <img
+    :src="srcComputed"
+    :class="{ 'animate-pulse': !isLoaded }"
+    v-bind="$attrs"
+    @load="onLoad"
+    @error="onError"
+  />
+</template>
+
+<script>
+import { specifyImageWidth } from "~/utils/images";
+
+export default {
+  name: "VTImage",
+
+  props: {
+    src: {
+      type: String,
+      default: "",
+    },
+    cdnSrc: {
+      type: [String, Object],
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E`,
+    },
+  },
+
+  data() {
+    return {
+      canLoad: true,
+      isLoaded: false,
+    };
+  },
+
+  computed: {
+    srcComputed() {
+      if (!this.isLoaded) {
+        return this.placeholder;
+      } else {
+        if (!this.canLoad) {
+          return this.placeholder;
+        }
+
+        if (this.cdnSrc) {
+          return this.specifyImageWidth(this.cdnSrc, this.$attrs.width);
+        }
+
+        if (this.src) {
+          return this.src;
+        }
+      }
+
+      return null;
+    },
+  },
+
+  methods: {
+    specifyImageWidth,
+
+    onLoad() {
+      this.isLoaded = true;
+    },
+
+    onError() {
+      this.canLoad = false;
+      this.$emit("error");
+    },
+  },
+};
+</script>

package/src/Image/VTImageCounter.vue

@@ -0,0 +1,6 @@
+<template>
+  <span
+    class="absolute inset-0 grid place-content-center bg-gray-500/75 font-semibold text-white no-underline transition-all hover:bg-gray-600/50"
+    >+ <slot></slot> images</span
+  >
+</template>

package/src/Image/VTImageHover.vue

@@ -0,0 +1,5 @@
+<template>
+  <span
+    class="before:absolute before:inset-0 before:bg-transparent before:transition-all before:content-[''] before:hover:bg-gray-600/50"
+  ></span>
+</template>

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>

package/src/Spinner/VTSpinner.vue

@@ -8,7 +8,7 @@
   >
     <path
       d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-      fill="currentFill"
+      fill="currentColor"
     />
   </svg>
 </template>