@veritree/ui 0.19.2-1 → 0.19.2-11

package/src/components/Drawer/VTDrawerFooter.vue

@@ -8,7 +8,7 @@
 export default {
   name: 'VTDrawerFooter',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -19,11 +19,11 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
   },
 };

package/src/components/Drawer/VTDrawerHeader.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerHeader',
 
-  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}-header`;
+      return `${this.apiDrawer().id}-header`;
     },
   },
 };

package/src/components/Drawer/VTDrawerMain.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -23,15 +23,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}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +42,7 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-describedby', this.id);

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

@@ -5,14 +5,14 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDropdownMenu",
+  name: 'VTDropdownMenu',
 
   provide() {
     return {
-      api: () => {
+      apiDropdownMenu: () => {
         const { dark: isDark, headless: isHeadless, right: isRight } = this;
         const { id, trigger, content, items } = this;
 

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-200 ease-out"
-    enter-class="translate-y-[15px] opacity-0"
+    enter-from-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-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[15px] opacity-0"
     @after-leave="hide"
   >
@@ -32,7 +32,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDropdownMenuContent',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
@@ -43,30 +43,30 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDropdownMenu().isRight;
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiDropdownMenu().trigger;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDropdownMenu().registerContent(this);
 
     this.$nextTick(() => {
       if (this.trigger) this.trigger.toggleHasPopup();
     });
 
-    // TODO: Create a directive or mixin for this
+    // T-79 Create a directive or mixin for this
     document.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
@@ -87,7 +87,7 @@ export default {
     hide() {
       this.visible = false;
       this.$emit('hidden');
-      this.api().unregisterItems();
+      this.apiDropdownMenu().unregisterItems();
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -13,15 +13,15 @@
 export default {
   name: 'VTDropdownMenuDivider',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -33,7 +33,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDropdownMenuItem',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   props: {
     to: {
@@ -60,19 +60,23 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
 
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     el() {
@@ -80,11 +84,11 @@ export default {
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiDropdownMenu().trigger;
     },
 
     content() {
-      return this.api().content;
+      return this.apiDropdownMenu().content;
     },
   },
 
@@ -94,7 +98,7 @@ export default {
       el: this.el,
     };
 
-    this.api().registerItem(item);
+    this.apiDropdownMenu().registerItem(item);
 
     this.index = this.items.length - 1;
   },
@@ -160,9 +164,16 @@ export default {
       this.leaveMenu();
     },
 
-    onClick() {
+    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());
     },

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -15,32 +15,25 @@
 export default {
   name: 'VTDropdownMenuTrigger',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
+      trigger: null,
       expanded: false,
-      hasPopup: false,
       controls: null,
+      hasPopup: false,
     };
   },
 
   computed: {
     // gets slot element
-    slotElm() {
-      return this.$slots.default[0].elm;
-    },
-
-    slotLength() {
-      return this.$slots.default.length;
-    },
-
     content() {
-      return this.api().content;
+      return this.apiDropdownMenu().content;
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     firstMenuItem() {
@@ -53,35 +46,32 @@ export default {
   },
 
   mounted() {
-    this.api().registerTrigger(this);
-    this.addEventListenerToSlotElm();
+    this.apiDropdownMenu().registerTrigger(this);
+    this.setTrigger();
+    this.addTriggerEvents();
   },
 
   destroyed() {
-    this.slotElm.removeEventListener('click', this.onClick());
+    this.trigger.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();
+    setTrigger() {
+      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);
       });
     },
 
@@ -99,9 +89,9 @@ export default {
      * Focus slot element if it exists and toggle expanded
      */
     focus() {
-      if (!this.slotElm) return;
+      if (!this.trigger) return;
 
-      this.slotElm.focus();
+      this.trigger.focus();
       this.toggleExpanded();
     },
 

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,20 @@
+<template>
+  <label
+    :class="[
+      headless ? 'form-label' : 'font-semibold mb-1 flex justify-between gap-3',
+    ]"
+  >
+    <slot />
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

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 } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  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>

package/src/components/Form/VTInputPassword.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="modelValue"
+      :disabled="disabled"
+      :type="reveal ? 'text' : 'password'"
+      v-bind="attrsComputed"
+    />
+    <div :class="classComputedWrapperIcon">
+      <VTButton
+        v-show="modelValue.length"
+        variant="icon"
+        @click="reveal = !reveal"
+      >
+        <component :is="iconVisibility" class="h-5 w-5" />
+      </VTButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputPassword',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    iconPlacement: {
+      type: String,
+      default: 'right',
+    },
+  },
+
+  data() {
+    return {
+      reveal: false,
+    };
+  },
+
+  computed: {
+    iconVisibility() {
+      return this.reveal ? 'IconVisibilityOn' : 'IconVisibilityOff';
+    },
+  },
+};
+</script>

package/src/components/Form/VTTextarea.vue

@@ -0,0 +1,22 @@
+<template>
+  <textarea
+    :class="classComputed"
+    :value="value"
+    :disabled="disabled"
+    v-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import { formControlMixin } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'textarea',
+    };
+  },
+};
+</script>

package/src/components/Listbox/VTListbox.vue

@@ -5,14 +5,14 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListbox",
+  name: 'VTListbox',
 
   provide() {
     return {
-      api: () => {
+      apiListbox: () => {
         const { dark: isDark, right: isRight } = this;
         const { id, listbox, trigger, content, search, list, items } = this;
 
@@ -47,8 +47,8 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit("input", value);
-          this.$emit("change", value);
+          this.$emit('input', value);
+          this.$emit('change', value);
         };
 
         return {