@veritree/ui 0.24.0 → 0.25.0-0

package/src/components/Drawer/VTDrawerFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="{ 'dialog-footer': headless }">
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
     <slot></slot>
   </component>
 </template>
@@ -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

@@ -83,11 +83,5 @@ export default {
       floatingUiMinWidth: 200,
     };
   },
-
-  computed: {
-    id() {
-      return `dropdown-menu-${this.componentId}`;
-    },
-  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -3,7 +3,6 @@
     :id="id"
     :visible="visible"
     :headless="headless"
-    :portal-class="$vnode.data.staticClass"
     component="dropdown"
   >
     <slot></slot>
@@ -46,5 +45,15 @@ export default {
 
     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

@@ -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

@@ -19,7 +19,13 @@
           : null,
       ]"
     />
-    <span :class="[headless ? 'form-feedback--text' : 'text-sm text-gray-500']">
+    <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,9 +1,9 @@
 <template>
   <input
     :class="classComputed"
-    :value="value"
+    :value="modelValue"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 
@@ -12,10 +12,8 @@ import {
   formControlMixin,
   formControlStyleMixin,
 } from '../../../mixins/form-control';
-
 export default {
   mixins: [formControlMixin, formControlStyleMixin],
-
   data() {
     return {
       name: 'input',
@@ -30,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,18 +3,15 @@
     :class="classComputed"
     :value="value"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 
 <script>
-import {
-  formControlMixin,
-  formControlStyleMixin,
-} from '../../../mixins/form-control';
+import { formControlMixin } from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin, formControlStyleMixin],
+  mixins: [formControlMixin],
 
   data() {
     return {

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() {
@@ -45,17 +60,33 @@ export default {
           return this.placeholder;
         }
 
-        if (this.cdnSrc) {
-          return this.handleImageResizing(this.cdnSrc, this.$attrs.width);
+        if (this.src) {
+          return this.src.includes('cloudfront.net/')
+            ? handleImageResizing(this.src, this.$attrs.width)
+            : this.src;
         }
 
-        if (this.src) {
-          return this.src;
+        if (this.cdnSrc) {
+          return handleImageResizing(this.cdnSrc, this.$attrs.width);
         }
       }
 
       return null;
     },
+
+    hasObjectFit() {
+      return this.objectFit;
+    },
+
+    objectFitComputed() {
+      return this.hasObjectFit
+        ? this.objectFit === 'cover'
+          ? 'object-cover'
+          : this.objectFit === 'contain'
+          ? 'object-contain'
+          : null
+        : null;
+    },
   },
 
   methods: {