@veritree/ui 0.22.1 → 0.22.2-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

@@ -56,19 +56,32 @@ 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,
     };
   },
-
-  computed: {
-    id() {
-      return `dropdown-menu-${this.componentId}`;
-    },
-  },
 };
 </script>

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,13 +40,20 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       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

@@ -9,8 +9,8 @@
     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"
@@ -51,7 +51,11 @@ export default {
 
   computed: {
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('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>
@@ -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

@@ -57,7 +57,7 @@ export default {
 
   mounted() {
     const trigger = {
-      id: this.id,
+      id: this.$el.getAttribute('id'), // avoids issues with hydration
       el: this.$el,
       cancel: this.cancel,
       focus: this.focus,
@@ -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,18 +1,19 @@
 <template>
   <input
     :class="classComputed"
-    :value="value"
+    :value="modelValue"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
-
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 export default {
-  mixins: [formControlMixin],
-
+  mixins: [formControlMixin, formControlStyleMixin],
   data() {
     return {
       name: 'input',
@@ -27,7 +28,6 @@ input[type='date']::-webkit-calendar-picker-indicator {
   position: absolute;
   opacity: 0;
 } */
-
 input[type='number'] {
   appearance: textfield;
 }

package/src/components/Form/VTInputIcon.vue

@@ -4,8 +4,7 @@
       :class="classComputed"
       :value="value"
       :disabled="disabled"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
       <component :is="icon" class="h-5 w-5" />

package/src/components/Form/VTInputPassword.vue

@@ -2,21 +2,25 @@
   <div :class="classComputedWrapper">
     <input
       :class="classComputed"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
       :type="reveal ? 'text' : 'password'"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
-      <VTButton v-show="value.length" variant="icon" @click="reveal = !reveal">
-        <component :is="iconVisibility" class="h-5 w-5" />
+      <VTButton
+        v-show="modelValue.length"
+        variant="icon"
+        @click="reveal = !reveal"
+      >
+        <component :is="iconVisibility" class="h-5 w-5 text-gray-500" />
       </VTButton>
     </div>
   </div>
 </template>
 
 <script>
+import { IconVisibilityOn, IconVisibilityOff } from '@veritree/icons';
 import { formControlIconMixin } from '../../../mixins/form-control-icon';
 
 export default {
@@ -24,6 +28,11 @@ export default {
 
   mixins: [formControlIconMixin],
 
+  components: {
+    IconVisibilityOn,
+    IconVisibilityOff,
+  },
+
   props: {
     iconPlacement: {
       type: String,

package/src/components/Form/VTTextarea.vue

@@ -3,7 +3,7 @@
     :class="classComputed"
     :value="value"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 

package/src/components/Image/VTImage.vue

@@ -1,7 +1,14 @@
 <template>
   <img
     :src="srcComputed"
-    :class="{ 'animate-pulse': !isLoaded }"
+    :class="[
+      headless ? null : isLoaded ? null : 'animate-pulse',
+      headless
+        ? null
+        : hasObjectFit
+        ? `h-full w-full ${objectFitComputed}`
+        : null,
+    ]"
     v-bind="$attrs"
     @load="onLoad"
     @error="onError"
@@ -15,18 +22,26 @@ export default {
   name: 'VTImage',
 
   props: {
-    src: {
-      type: String,
-      default: '',
+    headless: {
+      type: Boolean,
+      default: false,
     },
     cdnSrc: {
       type: [String, Object],
       default: null,
     },
+    objectFit: {
+      type: String,
+      default: null,
+    },
     placeholder: {
       type: String,
       default: `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E`,
     },
+    src: {
+      type: String,
+      default: '',
+    },
   },
 
   data() {
@@ -56,6 +71,20 @@ export default {
 
       return null;
     },
+
+    hasObjectFit() {
+      return this.objectFit;
+    },
+
+    objectFitComputed() {
+      return this.hasObjectFit
+        ? this.objectFit === 'cover'
+          ? 'object-cover'
+          : this.objectFit === 'contain'
+          ? 'object-contain'
+          : null
+        : null;
+    },
   },
 
   methods: {