@veritree/ui 0.6.1 → 0.9.0

package/index.js

@@ -1,59 +1,76 @@
-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 VTListbox from "./src/Listbox/VTListbox.vue";
+import VTListboxContent from "./src/Listbox/VTListboxContent.vue";
+import VTListboxItem from "./src/Listbox/VTListboxItem.vue";
+import VTListboxLabel from "./src/Listbox/VTListboxLabel.vue";
+import VTListboxList from "./src/Listbox/VTListboxList.vue";
+import VTListboxSearch from "./src/Listbox/VTListboxSearch.vue";
+import VTListboxTrigger from "./src/Listbox/VTListboxTrigger.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 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 +81,28 @@ export {
   VTImageHover,
   VTAlert,
   VTSpinner,
+  VTDropdownMenu,
+  VTDropdownMenuContent,
+  VTDropdownMenuDivider,
+  VTDropdownMenuGroup,
+  VTDropdownMenuItem,
+  VTDropdownMenuLabel,
+  VTDropdownMenuTrigger,
+  VTPopover,
+  VTPopoverContent,
+  VTPopoverDivider,
+  VTPopoverGroup,
+  VTPopoverItem,
+  VTPopoverTrigger,
+  VTFormFeedback,
+  VTFormGroup,
+  VTListbox,
+  VTListboxContent,
+  VTListboxItem,
+  VTListboxLabel,
+  VTListboxList,
+  VTListboxSearch,
+  VTListboxTrigger,
   VTButton,
   // VTButtonSave,
   VTInput,
@@ -71,10 +110,6 @@ export {
   VTInputFile,
   VTInputUpload,
   VTTextarea,
-  VTListbox,
-  VTListboxButton,
-  VTListboxOption,
-  VTListboxOptions,
   VTModal,
   VTAccordion,
   VTAccordionButton,
@@ -101,5 +136,4 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
-}
-
+};

package/nuxt.js

@@ -0,0 +1,21 @@
+import { join } from 'path';
+
+const components = [
+  'src/Avatar',
+  'src/Drawer',
+  'src/Dialog',
+  'src/DropdownMenu',
+  'src/Form',
+  'src/Listbox',
+  '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.1",
+  "version": "0.9.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

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>