@veritree/ui 0.21.1-8 → 0.22.0-0

package/src/components/Drawer/VTDrawerOverlay.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -29,21 +29,21 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-overlay`;
+      return `${this.apiDrawer().id}-overlay`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDrawer().registerOverlay(this);
   },
 
   methods: {

package/src/components/Drawer/VTDrawerTitle.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerTitle',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDrawer().id}-title`;
     },
   },
 
@@ -45,7 +45,7 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-labelledby', this.id);

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -16,8 +16,6 @@ export default {
   provide() {
     return {
       apiDropdownMenu: () => {
-        const { dark: isDark, headless: isHeadless } = this;
-
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
@@ -33,8 +31,9 @@ export default {
           this.items.push(item);
         };
 
-        const unregisterItems = () => {
-          this.items = [];
+        const unregisterItem = (id) => {
+          const index = this.items.findIndex((item) => item.id === id);
+          this.items.splice(index, 1);
         };
 
         return {
@@ -46,7 +45,7 @@ export default {
           registerTrigger,
           registerContent,
           registerItem,
-          unregisterItems,
+          unregisterItem,
         };
       },
     };
@@ -57,12 +56,31 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   data() {
     return {
       componentId: genId(),
       items: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
 

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,10 +1,9 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'dropdown-menu-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    component="dropdown"
   >
     <slot></slot>
   </FloatingUi>
@@ -16,6 +15,8 @@ import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 export default {
   name: 'VTDropdownMenuContent',
 
+  inheritAttrs: false,
+
   mixins: [floatingUiContentMixin],
 
   inject: ['apiDropdownMenu'],
@@ -39,9 +40,20 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
+      setActiveDescedant: this.setActiveDescedant,
     };
 
     this.apiDropdownMenu().registerContent(content);
   },
+
+  methods: {
+    hidden() {
+      this.$emit('hidden');
+    },
+
+    shown() {
+      this.$emit('shown');
+    },
+  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -1,9 +1,8 @@
 <template>
   <div
-    :class="{
-      PopoverDivider: headless,
-      '-mx-3 my-2 h-[1px]': !headless,
-    }"
+    :class="[
+      headless ? 'dropdown-menu-divider' : '-mx-3 my-2 h-[1px] bg-gray-200',
+    ]"
   ></div>
 </template>
 
@@ -13,18 +12,10 @@ export default {
 
   inject: ['apiDropdownMenu'],
 
-  headless: {
-    type: Boolean,
-    default: false,
-  },
-
-  computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
-    headless() {
-      return this.apiDropdownMenu().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,34 +3,14 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="[
-      // default styles
-      headless
-        ? 'dropdown-menu-item'
-        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
-      // disabled state styles
-      headless
-        ? disabled
-          ? 'listbox-item--disabled'
-          : null
-        : disabled
-        ? 'pointer-events-none opacity-75'
-        : null,
-      // selected state styles
-      headless
-        ? selected
-          ? 'lisbox-item--selected'
-          : null
-        : selected
-        ? 'bg-secondary-200/10'
-        : null,
-    ]"
-    :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"
@@ -42,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: {
@@ -58,139 +40,19 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      apiInjected: this.apiDropdownMenu,
+      componentName: 'dropdown-menu-item',
     };
   },
 
   computed: {
-    id() {
-      return `dropdown-menu-item-${this.apiDropdownMenu().id}-${genId()}`;
-    },
-
     as() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
-
-    items() {
-      return this.apiDropdownMenu().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    componentTrigger() {
-      return this.apiDropdownMenu().componentTrigger;
-    },
-  },
-
-  mounted() {
-    const item = {
-      select: this.select,
-      unselect: this.unselect,
-      focus: this.focus,
-    };
-
-    this.apiDropdownMenu().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  methods: {
-    select() {
-      this.selected = true;
-    },
-
-    unselect() {
-      this.selected = false;
-    },
-
-    focus() {
-      if (!this.el) return;
-
-      this.tabIndex = -1;
-      this.selected = true;
-      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.selected = false;
-
-      // set all selected to false
-      this.items.forEach((item) => item.unselect());
-
-      // focus item
-      this.items[goToIndex].focus();
-    },
-
-    leaveMenu() {
-      if (this.componentTrigger) {
-        this.componentTrigger.cancel();
-        this.componentTrigger.focus();
-      }
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
-    },
   },
 };
 </script>

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>
@@ -18,10 +13,6 @@ export default {
   inject: ['apiDropdownMenu'],
 
   computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
     headless() {
       return this.apiDropdownMenu().isHeadless;
     },

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -89,9 +89,7 @@ export default {
      * errors related to adding the event listener.
      */
     addTriggerEvents() {
-      this.trigger.addEventListener('click', (e) => {
-        this.onClick(e);
-      });
+      this.trigger.addEventListener('click', this.onClick);
     },
 
     init(e) {

package/src/components/Form/VTFormFeedback.vue

@@ -1,25 +1,31 @@
 <template>
   <div
     :class="[
-      headless ? 'form-feedback' : 'flex gap-2 mt-1 items-baseline',
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
       // variant styles
-      headless ? `form-feedback--{$variant}` : null,
+      headless ? `form-feedback--${variant}` : null,
     ]"
   >
     <component
       v-if="showIcon"
       :is="icon"
       :class="[
-        headless ? 'form-feedback__icon' : 'relative top-1 shrink-0 h-4 w-4',
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
         // variant styles
         headless
-          ? `form-feedback__icon--{$variant}`
+          ? `form-feedback__icon--${variant}`
           : isError
           ? 'text-error-500'
           : null,
       ]"
     />
-    <span :class="[headless ? 'form-feedback--text' : 'text-gray-500 text-sm']">
+    <span
+      :class="[
+        headless
+          ? 'form-feedback--text'
+          : 'text-sm lowercase text-gray-500 first-letter:uppercase',
+      ]"
+    >
       <slot />
     </span>
   </div>

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

@@ -1,52 +1,40 @@
 <template>
   <input
-    v-bind="$attrs"
-    :class="[
-      headless
-        ? 'form-control'
-        : 'border border-solid py-2 px-3 rounded text-inherit max-w-full',
-      headless
-        ? `form-control--${variant}`
-        : isError
-        ? 'border-error-300'
-        : 'border-gray-300',
-    ]"
-    :value="value"
-    @input="$emit('input', $event.target.value)"
-    @blur="$emit('blur')"
+    :class="classComputed"
+    :value="modelValue"
+    :disabled="disabled"
+    v-bind="attrsComputed"
   />
 </template>
 
 <script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 export default {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-  },
-
-  computed: {
-    isError() {
-      return this.variant === 'error';
-    },
+  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>