@veritree/ui 0.19.2-9 → 0.20.0-0

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,20 +3,14 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="{
-      MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-3 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"
+    :class="classComputed"
     :aria-disabled="disabled"
+    :tabindex="tabIndex"
+    class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
-    @keydown.down.prevent="focusPreviousItem"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.prevent="onKeyEsc"
@@ -28,11 +22,13 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
+  mixins: [floatingUiItemMixin],
+
   inject: ['apiDropdownMenu'],
 
   props: {
@@ -44,138 +40,18 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      id: `menuitem-${genId()}`,
-      index: null,
-      tabIndex: 0,
+      apiInjected: this.apiDropdownMenu,
+      componentName: 'dropdown-menu-item',
     };
   },
 
   computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
-    headless() {
-      return this.apiDropdownMenu().isHeadless;
-    },
-
     as() {
-      return this.href
-        ? 'a'
-        : this.to
-        ? resolveComponent('NuxtLink')
-        : 'button';
-    },
-
-    items() {
-      return this.apiDropdownMenu().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    trigger() {
-      return this.apiDropdownMenu().trigger;
-    },
-
-    content() {
-      return this.apiDropdownMenu().content;
-    },
-  },
-
-  mounted() {
-    const item = {
-      focus: this.focus,
-      el: this.el,
-    };
-
-    this.apiDropdownMenu().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(ev) {
-      if (this.disabled) return;
-
-      // Nuxtlink doesn't understand enter as a click
-      // so, we need to force it here
-      if (ev.key === 'Enter') {
-        ev.target.click();
-        return;
-      }
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -1,11 +1,6 @@
 <template>
   <span
-    :class="{
-      MenuLabel: headless,
-      'mb-2 block text-xs uppercase': !headless,
-      'text-inherit': !dark,
-      'text-white': dark,
-    }"
+    :class="[headless ? 'dropdown-menu-label' : 'mb-2 block text-xs uppercase']"
   >
     <slot></slot>
   </span>
@@ -15,15 +10,11 @@
 export default {
   name: 'VTDropdownMenuLabel',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -1,11 +1,12 @@
 <template>
   <div
+    :id="id"
     :aria-haspopup="hasPopup"
     :aria-expanded="expanded"
     :aria-controls="controls"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
-    @keydown.esc.prevent="onKeyesc"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
+    @keydown.esc.stop="onKeyEsc"
   >
     <slot></slot>
   </div>
@@ -19,17 +20,20 @@ export default {
 
   data() {
     return {
-      trigger: null,
       expanded: false,
-      controls: null,
       hasPopup: false,
+      controls: null,
+      trigger: null,
     };
   },
 
   computed: {
-    // gets slot element
-    content() {
-      return this.apiDropdownMenu().content;
+    id() {
+      return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
+    },
+
+    componentContent() {
+      return this.apiDropdownMenu().componentContent;
     },
 
     items() {
@@ -45,14 +49,28 @@ export default {
     },
   },
 
+  watch: {
+    expanded() {
+      this.toggleAriaHasPopup();
+    },
+  },
+
   mounted() {
-    this.apiDropdownMenu().registerTrigger(this);
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiDropdownMenu().registerTrigger(trigger);
+
     this.setTrigger();
     this.addTriggerEvents();
   },
 
   destroyed() {
-    this.trigger.removeEventListener('click', this.onClick());
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
@@ -60,140 +78,102 @@ export default {
       this.trigger = this.$el.querySelector(':first-child');
     },
 
-    addTriggerEvents() {
-      this.trigger.addEventListener('click', (e) => {
-        if (this.expanded) {
-          this.onClick();
-          return;
-        }
-
-        // delay stop propagation to close other visible
-        // dropdowns and delay click event to control
-        // this dropdown visibility
-        setTimeout(() => e.stopImmediatePropagation(), 50);
-        setTimeout(() => this.onClick(), 100);
-      });
-    },
-
     /**
-     * Shows content/menu if not already visible
+     * 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.
      */
-    showContent() {
-      if (!this.expanded) {
-        this.toggleExpanded();
-        this.content.show();
-      }
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', this.onClick);
     },
 
-    /**
-     * Focus slot element if it exists and toggle expanded
-     */
-    focus() {
-      if (!this.trigger) return;
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
 
-      this.trigger.focus();
-      this.toggleExpanded();
-    },
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
 
-    /**
-     * Toggles aria expanded attribute/state
-     */
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
+      this.expanded = true;
 
-    /**
-     * Sets aria expanded attribute/state to false
-     */
-    hideExpanded() {
-      this.expanded = false;
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
     },
 
-    /**
-     * Toggles aria popup/controls attribute/state
-     */
-    toggleHasPopup() {
-      if (!this.content) return;
-
-      this.hasPopup = !this.hasPopup;
-
-      if (!this.hasPopup) {
-        this.controls = null;
+    cancel() {
+      if (!this.componentContent) {
         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.expanded = false;
 
-      this.toggleExpanded();
+      this.hideComponentContent();
+    },
 
-      this.$nextTick(() => {
-        if (this.expanded) this.content.show();
-        else this.content.hide();
-      });
+    focus() {
+      if (this.trigger) this.trigger.focus();
     },
 
-    /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
-     */
-    hide() {
-      this.hideExpanded();
+    showComponentContent() {
+      this.componentContent.show();
+    },
 
-      this.$nextTick(() => {
-        this.content.hide();
-      });
+    hideComponentContent() {
+      this.componentContent.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;
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
 
-      this.showContent();
+        return;
+      }
 
-      this.$nextTick(() => {
-        this.firstMenuItem.focus();
-      });
+      this.hasPopup = null;
+      this.controls = null;
     },
 
-    /**
-     * 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;
+    onClick(e) {
+      this.init(e);
+    },
 
-      this.showContent();
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
 
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
+
+      // settimeout here is delaying the focusing the element
+      // since it is not rendered yet. All items will only
+      // be available when the content is fully visible.
       this.$nextTick(() => {
-        this.lastMenuItem.focus();
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
-    onKeyesc() {
-      if (!this.content) return;
-
-      if (this.expanded) {
-        this.toggleExpanded();
-        this.content.hide();
-      }
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/Form/VTFormFeedback.vue

@@ -1,7 +1,33 @@
 <template>
-  <div class="form-feedback" :class="classes">
-    <component :is="icon" v-if="showIcon" />
-    <span class="text-gray-500"><slot></slot></span>
+  <div
+    :class="[
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
+      // variant styles
+      headless ? `form-feedback--${variant}` : null,
+    ]"
+  >
+    <component
+      v-if="showIcon"
+      :is="icon"
+      :class="[
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
+        // variant styles
+        headless
+          ? `form-feedback__icon--${variant}`
+          : isError
+          ? 'text-error-500'
+          : null,
+      ]"
+    />
+    <span
+      :class="[
+        headless
+          ? 'form-feedback--text'
+          : 'text-sm lowercase text-gray-500 first-letter:uppercase',
+      ]"
+    >
+      <slot />
+    </span>
   </div>
 </template>
 
@@ -17,32 +43,23 @@ export default {
   },
 
   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,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+    },
   },
 
   computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-feedback--${this.variant}`] = true;
-      }
-
-      return classes;
+    isError() {
+      return this.variant === 'error';
     },
 
     icon() {

package/src/components/Form/VTFormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="classes" class="form-group">
+  <component :is="as" :class="[headless ? 'form-control' : 'mt-3']">
     <slot></slot>
   </component>
 </template>
@@ -11,12 +11,10 @@ export default {
       type: String,
       default: 'div',
     },
-  },
-
-  data() {
-    return {
-      classes: {},
-    };
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

package/src/components/Form/VTFormLabel.vue

@@ -0,0 +1,22 @@
+<template>
+  <label
+    :class="[
+      headless
+        ? 'form-label'
+        : 'mb-1 flex justify-between gap-3 text-sm font-semibold',
+    ]"
+  >
+    <slot />
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Form/VTFormRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+    <slot />
+  </div>
+</template>

package/src/components/Form/VTInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <input
+    :class="classComputed"
+    :value="modelValue"
+    :disabled="disabled"
+    v-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+export default {
+  mixins: [formControlMixin, formControlStyleMixin],
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  opacity: 0;
+} */
+input[type='number'] {
+  appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+</style>

package/src/components/Form/VTInputIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      v-bind="attrsComputed"
+    />
+    <div :class="classComputedWrapperIcon">
+      <component :is="icon" class="h-5 w-5" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputIcon',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    icon: {
+      type: String,
+      default: null,
+      required: true,
+    },
+    iconPlacement: {
+      type: String,
+      default: 'left',
+    },
+  },
+};
+</script>