@veritree/ui 0.19.2 → 0.20.0-0

package/index.js

@@ -1,67 +1,65 @@
-import VTAlert from "./src/components/Alert/VTAlert.vue";
-import VTAvatar from "./src/components/Avatar/VTAvatar.vue";
-import VTAvatarImage from "./src/components/Avatar/VTAvatarImage.vue";
-import VTAvatarText from "./src/components/Avatar/VTAvatarText.vue";
-import VTButton from "./src/components/Button/VTButton.vue";
-import VTImage from "./src/components/Image/VTImage.vue";
-import VTImageCounter from "./src/components/Image/VTImageCounter.vue";
-import VTImageHover from "./src/components/Image/VTImageHover.vue";
-import VTDropdownMenu from "./src/components/DropdownMenu/VTDropdownMenu.vue";
-import VTDropdownMenuContent from "./src/components/DropdownMenu/VTDropdownMenuContent.vue";
-import VTDropdownMenuDivider from "./src/components/DropdownMenu/VTDropdownMenuDivider.vue";
-import VTDropdownMenuGroup from "./src/components/DropdownMenu/VTDropdownMenuGroup.vue";
-import VTDropdownMenuItem from "./src/components/DropdownMenu/VTDropdownMenuItem.vue";
-import VTDropdownMenuLabel from "./src/components/DropdownMenu/VTDropdownMenuLabel.vue";
-import VTDropdownMenuTrigger from "./src/components/DropdownMenu/VTDropdownMenuTrigger.vue";
-import VTPopover from "./src/components/Popover/VTPopover.vue";
-import VTPopoverContent from "./src/components/Popover/VTPopoverContent.vue";
-import VTPopoverDivider from "./src/components/Popover/VTPopoverDivider.vue";
-import VTPopoverGroup from "./src/components/Popover/VTPopoverGroup.vue";
-import VTPopoverItem from "./src/components/Popover/VTPopoverItem.vue";
-import VTPopoverTrigger from "./src/components/Popover/VTPopoverTrigger.vue";
-import VTFormFeedback from "./src/components/Form/VTFormFeedback.vue";
-import VTFormGroup from "./src/components/Form/VTFormGroup.vue";
-import VTListbox from "./src/components/Listbox/VTListbox.vue";
-import VTListboxContent from "./src/components/Listbox/VTListboxContent.vue";
-import VTListboxItem from "./src/components/Listbox/VTListboxItem.vue";
-import VTListboxLabel from "./src/components/Listbox/VTListboxLabel.vue";
-import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
-import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
-import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
-import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
-import VTInput from "./src/components/Input/VTInput.vue";
-import VTInputDate from "./src/components/Input/VTInputDate.vue";
-import VTInputFile from "./src/components/Input/VTInputFile.vue";
-import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
-import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
-import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
-import VTModal from "./src/components/Modal/VTModal.vue";
-import VTTab from "./src/components/Tabs/VTTab.vue";
-import VTTabGroup from "./src/components/Tabs/VTTabGroup.vue";
-import VTTabList from "./src/components/Tabs/VTTabList.vue";
-import VTTabPanel from "./src/components/Tabs/VTTabPanel.vue";
-import VTTabPanels from "./src/components/Tabs/VTTabPanels.vue";
-import VTDialog from "./src/components/Dialog/VTDialog.vue";
-import VTDialogClose from "./src/components/Dialog/VTDialogClose.vue";
-import VTDialogContent from "./src/components/Dialog/VTDialogContent.vue";
-import VTDialogFooter from "./src/components/Dialog/VTDialogFooter.vue";
-import VTDialogHeader from "./src/components/Dialog/VTDialogHeader.vue";
-import VTDialogMain from "./src/components/Dialog/VTDialogMain.vue";
-import VTDialogOverlay from "./src/components/Dialog/VTDialogOverlay.vue";
-import VTDialogTitle from "./src/components/Dialog/VTDialogTitle.vue";
-import VTDrawer from "./src/components/Drawer/VTDrawer.vue";
-import VTDrawerClose from "./src/components/Drawer/VTDrawerClose.vue";
-import VTDrawerContent from "./src/components/Drawer/VTDrawerContent.vue";
-import VTDrawerFooter from "./src/components/Drawer/VTDrawerFooter.vue";
-import VTDrawerHeader from "./src/components/Drawer/VTDrawerHeader.vue";
-import VTDrawerTitle from "./src/components/Drawer/VTDrawerTitle.vue";
-import VTDrawerMain from "./src/components/Drawer/VTDrawerMain.vue";
-import VTDrawerOverlay from "./src/components/Drawer/VTDrawerOverlay.vue";
-import VTDisclosure from "./src/components/Disclosure/VTDisclosure.vue";
-import VTDisclosureDetails from "./src/components/Disclosure/VTDisclosureDetails.vue";
-import VTDisclosureHeader from "./src/components/Disclosure/VTDisclosureHeader.vue";
-import VTDisclosureIcon from "./src/components/Disclosure/VTDisclosureIcon.vue";
-import VTDisclosureContent from "./src/components/Disclosure/VTDisclosureContent.vue";
+import VTAlert from './src/components/Alert/VTAlert.vue';
+import VTAvatar from './src/components/Avatar/VTAvatar.vue';
+import VTAvatarImage from './src/components/Avatar/VTAvatarImage.vue';
+import VTAvatarText from './src/components/Avatar/VTAvatarText.vue';
+import VTButton from './src/components/Button/VTButton.vue';
+import VTImage from './src/components/Image/VTImage.vue';
+import VTImageCounter from './src/components/Image/VTImageCounter.vue';
+import VTImageHover from './src/components/Image/VTImageHover.vue';
+import VTDropdownMenu from './src/components/DropdownMenu/VTDropdownMenu.vue';
+import VTDropdownMenuContent from './src/components/DropdownMenu/VTDropdownMenuContent.vue';
+import VTDropdownMenuDivider from './src/components/DropdownMenu/VTDropdownMenuDivider.vue';
+import VTDropdownMenuGroup from './src/components/DropdownMenu/VTDropdownMenuGroup.vue';
+import VTDropdownMenuItem from './src/components/DropdownMenu/VTDropdownMenuItem.vue';
+import VTDropdownMenuLabel from './src/components/DropdownMenu/VTDropdownMenuLabel.vue';
+import VTDropdownMenuTrigger from './src/components/DropdownMenu/VTDropdownMenuTrigger.vue';
+import VTPopover from './src/components/Popover/VTPopover.vue';
+import VTPopoverContent from './src/components/Popover/VTPopoverContent.vue';
+import VTPopoverDivider from './src/components/Popover/VTPopoverDivider.vue';
+import VTPopoverGroup from './src/components/Popover/VTPopoverGroup.vue';
+import VTPopoverItem from './src/components/Popover/VTPopoverItem.vue';
+import VTPopoverTrigger from './src/components/Popover/VTPopoverTrigger.vue';
+import VTFormFeedback from './src/components/Form/VTFormFeedback.vue';
+import VTFormGroup from './src/components/Form/VTFormGroup.vue';
+import VTListbox from './src/components/Listbox/VTListbox.vue';
+import VTListboxContent from './src/components/Listbox/VTListboxContent.vue';
+import VTListboxItem from './src/components/Listbox/VTListboxItem.vue';
+import VTListboxLabel from './src/components/Listbox/VTListboxLabel.vue';
+import VTListboxList from './src/components/Listbox/VTListboxList.vue';
+import VTListboxSearch from './src/components/Listbox/VTListboxSearch.vue';
+import VTListboxTrigger from './src/components/Listbox/VTListboxTrigger.vue';
+import VTSpinner from './src/components/Spinner/VTSpinner.vue';
+import VTInput from './src/components/Form/VTInput.vue';
+import VTProgressBar from './src/components/ProgressBar/VTProgressBar.vue';
+import VTTextarea from './src/components/Textarea/VTTextarea.vue';
+import VTTab from './src/components/Tabs/VTTab.vue';
+import VTTabGroup from './src/components/Tabs/VTTabGroup.vue';
+import VTTabList from './src/components/Tabs/VTTabList.vue';
+import VTTabPanel from './src/components/Tabs/VTTabPanel.vue';
+import VTTabPanels from './src/components/Tabs/VTTabPanels.vue';
+import VTDialog from './src/components/Dialog/VTDialog.vue';
+import VTDialogClose from './src/components/Dialog/VTDialogClose.vue';
+import VTDialogContent from './src/components/Dialog/VTDialogContent.vue';
+import VTDialogFooter from './src/components/Dialog/VTDialogFooter.vue';
+import VTDialogHeader from './src/components/Dialog/VTDialogHeader.vue';
+import VTDialogMain from './src/components/Dialog/VTDialogMain.vue';
+import VTDialogOverlay from './src/components/Dialog/VTDialogOverlay.vue';
+import VTDialogTitle from './src/components/Dialog/VTDialogTitle.vue';
+import VTDrawer from './src/components/Drawer/VTDrawer.vue';
+import VTDrawerClose from './src/components/Drawer/VTDrawerClose.vue';
+import VTDrawerContent from './src/components/Drawer/VTDrawerContent.vue';
+import VTDrawerFooter from './src/components/Drawer/VTDrawerFooter.vue';
+import VTDrawerHeader from './src/components/Drawer/VTDrawerHeader.vue';
+import VTDrawerTitle from './src/components/Drawer/VTDrawerTitle.vue';
+import VTDrawerMain from './src/components/Drawer/VTDrawerMain.vue';
+import VTDrawerOverlay from './src/components/Drawer/VTDrawerOverlay.vue';
+import VTDisclosure from './src/components/Disclosure/VTDisclosure.vue';
+import VTDisclosureDetails from './src/components/Disclosure/VTDisclosureDetails.vue';
+import VTDisclosureHeader from './src/components/Disclosure/VTDisclosureHeader.vue';
+import VTDisclosureIcon from './src/components/Disclosure/VTDisclosureIcon.vue';
+import VTDisclosureContent from './src/components/Disclosure/VTDisclosureContent.vue';
+import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
+import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
 
 export {
   VTAvatar,
@@ -96,12 +94,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
   VTProgressBar,
   VTTextarea,
-  VTModal,
   VTTab,
   VTTabGroup,
   VTTabList,
@@ -128,4 +122,6 @@ export {
   VTDisclosureHeader,
   VTDisclosureIcon,
   VTDisclosureContent,
+  VTSkeleton,
+  VTSkeletonItem,
 };

package/mixins/floating-ui-content.js

@@ -0,0 +1,81 @@
+import FloatingUi from '../src/components/Utils/FloatingUi.vue';
+
+export const floatingUiContentMixin = {
+  components: {
+    FloatingUi,
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      el: null,
+      visible: false,
+    };
+  },
+
+  mounted() {
+    document.addEventListener('click', this.onDocumentClick);
+  },
+
+  destroyed() {
+    document.removeEventListener('click', this.onDocumentClick);
+  },
+
+  methods: {
+    show() {
+      if (this.visible) {
+        return;
+      }
+
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.component.setActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('shown');
+        }, 100);
+      });
+    },
+
+    hide() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.visible = false;
+
+      this.$nextTick(() => {
+        this.component.clearActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('hidden');
+        }, 100);
+      });
+    },
+
+    onDocumentClick(e) {
+      if (!e) {
+        return;
+      }
+
+      e.stopPropagation();
+
+      if (this.visible && !this.el.contains(e.target)) {
+        this.componentTrigger.cancel();
+      }
+    },
+
+    setActiveDescedant(id) {
+      this.activeDescedant = id;
+    },
+  },
+}

package/mixins/floating-ui-item.js

@@ -0,0 +1,266 @@
+export const floatingUiItemMixin = {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `${this.componentName}-${this.apiInjected().id}-${this.index}`;
+    },
+
+    items() {
+      return this.apiInjected().items;
+    },
+
+    componentContent() {
+      return this.apiInjected().componentContent;
+    },
+
+    componentTrigger() {
+      return this.apiInjected().componentTrigger;
+    },
+
+    classComputed() {
+      return [
+        // default styles
+        this.headless
+          ? `${this.componentName}`
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
+        // disabled state styles
+        this.headless
+          ? this.disabled
+            ? `${this.componentName}--disabled`
+            : null
+          : this.disabled
+          ? 'pointer-events-none opacity-75'
+          : null,
+        // selected state styles
+        this.headless
+          ? this.selected
+            ? `${this.componentName}--selected`
+            : null
+          : this.selected
+          ? 'bg-gray-200'
+          : null,
+      ];
+    },
+  },
+
+  data() {
+    return {
+      index: null,
+      selected: false,
+      tabIndex: 0,
+      eventType: null,
+    };
+  },
+
+  watch: {
+    selected(newValue) {
+      if (!newValue || !this.componentContent) {
+        return;
+      }
+
+      this.componentContent.setActiveDescedant(this.id);
+
+      // do not scroll into view if it's a mouse event
+      if (this.eventType && this.eventType.includes('mouse')) {
+        return;
+      }
+
+      this.$el.scrollIntoView({ block: 'nearest' });
+    },
+  },
+
+  mounted() {
+    this.init();
+    this.addMouseEventListeners();
+  },
+
+  beforeUnmount() {
+    this.apiInjected().unregisterItem(this.id);
+    this.removeMouseEventListeners();
+  },
+
+  methods: {
+    init() {
+      this.index = this.items.length;
+
+      const item = {
+        id: this.id,
+        text: '',
+        select: this.select,
+        unselect: this.unselect,
+        isSelected: this.isSelected,
+        focus: this.focus,
+        onClick: this.onClick,
+      };
+
+      this.apiInjected().registerItem(item);
+    },
+
+    /**
+     * mousemove and mouseleave events will be attached to
+     * the element here instead of using vue @mousemove
+     * and @mouseleave in the element since they did
+     * not worker properly
+     */
+    addMouseEventListeners() {
+      this.$el.addEventListener('mousemove', this.onMousemove);
+      this.$el.addEventListener('mouseleave', this.onMouseleave);
+    },
+
+    /**
+     * remove the mousemove and mouseleave added for
+     * avoiding memory leaks, if @mousemove and
+     * @mouseleave were in the element, this
+     * wound't be needed
+     */
+    removeMouseEventListeners() {
+      this.$el.removeEventListener('mousemove', this.onMousemove);
+      this.$el.removeEventListener('mouseleave', this.onMouseleave);
+    },
+
+    select(eventType) {
+      this.eventType = eventType;
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    isSelected() {
+      return this.selected;
+    },
+
+    focus() {
+      if (!this.$el) return;
+
+      this.tabIndex = -1;
+      this.selected = true;
+      this.$el.focus();
+    },
+
+    focusFirstItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = 0;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    focusLastItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = this.items.length - 1;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
+     */
+    focusNextItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isLast = selectedIndex === this.items.length - 1;
+      const firstItemIndex = 0;
+      const nextItemIndex = selectedIndex + 1;
+      const newSelectedIndex = isLast ? firstItemIndex : nextItemIndex;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
+     */
+    focusPreviousItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isFirst = selectedIndex === 0;
+      const lastItemIndex = this.items.length - 1;
+      const previousItemIndex = selectedIndex - 1;
+      const newSelectedIndex = isFirst ? lastItemIndex : previousItemIndex;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus/select item by removing its tabindex and calling
+     * focus to the element.
+     *
+     * @param {Number, String} selectedIndex
+     * @param {Number, String} newSelectedIndex
+     */
+    setFocusToItem(selectedIndex, newSelectedIndex) {
+      this.tabIndex = 0;
+
+      // before focusing, let's unselect selected
+      // item that were previously focused
+      if (selectedIndex >= 0) {
+        this.items[selectedIndex].unselect();
+      }
+
+      // focus new item
+      if (this.items[newSelectedIndex]) {
+        this.items[newSelectedIndex].focus();
+      }
+    },
+
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
+    },
+
+    leaveMenu() {
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
+    },
+
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+
+      this.$nextTick(() => this.leaveMenu());
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onMousemove(event) {
+      if (this.selected) {
+        return;
+      }
+
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        item.unselect();
+      }
+
+      /**
+       * Select item passing the event type to decide if
+       * scrolling will be disabled or not. It is
+       * expected that on mouse move event, the scroll
+       * doesn't happen automatically.
+       */
+      this.select(event.type);
+    },
+
+    onMouseleave() {
+      this.unselect();
+    },
+  },
+};

package/mixins/floating-ui.js

@@ -0,0 +1,67 @@
+import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
+
+export const floatingUiMixin = {
+  data() {
+    return {
+      component: null,
+      componentTrigger: null,
+      componentContent: null,
+      active: false,
+    };
+  },
+
+  watch: {
+    active(newVal) {
+      if (newVal) this.$nextTick(() => this.positionContentToTrigger());
+    },
+  },
+
+  mounted() {
+    this.component = {
+      setActive: this.setActive,
+      clearActive: this.clearActive,
+    };
+  },
+
+  methods: {
+    setActive() {
+      this.active = true;
+    },
+
+    clearActive() {
+      this.active = null;
+    },
+
+    positionContentToTrigger() {
+      const trigger = document.getElementById(this.componentTrigger.id);
+      const content = document.getElementById(this.componentContent.id);
+      const minWidthLimit = Number(this.floatingUiMinWidth);
+
+      computePosition(trigger, content, {
+        placement: this.placement,
+        middleware: [
+          offset(5),
+          flip(),
+          shift({ padding: 5 }),
+          size({
+            apply({ rects }) {
+              if (!minWidthLimit) return;
+
+              const width = rects.reference.width;
+              const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
+              Object.assign(content.style, {
+                minWidth: `${minWidth}px`,
+              });
+            },
+          }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(content.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    },
+  },
+};

package/mixins/form-control-icon.js

@@ -0,0 +1,53 @@
+import { formControlMixin, formControlStyleMixin } from '../mixins/form-control';
+
+export const formControlIconMixin = {
+  inheritAttrs: false,
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+
+  computed: {
+    isLeft() {
+      return this.iconPlacement === 'left';
+    },
+
+    isRight() {
+      return this.iconPlacement === 'right';
+    },
+
+    classComputedWrapper() {
+      return [
+        this.headless ? 'form-control-wrapper' : 'relative',
+        // placement styles
+        this.headless
+          ? `form-control-icon--${this.placement}`
+          : this.isLeft
+          ? '[&_input]:pl-9'
+          : this.isRight
+          ? '[&_input]:pr-9'
+          : null,
+      ];
+    },
+
+    classComputedWrapperIcon() {
+      return [
+        this.headless
+          ? 'form-control-wrapper__icon'
+          : `absolute top-0 bottom-0 flex w-9 justify-center items-center text-gray-400`,
+        // placement styles
+        this.headless
+          ? null
+          : this.isLeft
+          ? 'left-1'
+          : this.isRight
+          ? 'right-1'
+          : null,
+      ];
+    },
+  },
+};