@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -1,9 +1,8 @@
 <template>
   <div
-    :class="{
-      'dropdown-menu-divider': 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/VTFieldset.vue

@@ -0,0 +1,5 @@
+<template>
+  <fieldset class="grid gap-3">
+    <slot />
+  </fieldset>
+</template>

package/src/components/Form/VTForm.vue

@@ -0,0 +1,11 @@
+<template>
+  <form class="grid gap-3" @submit.prevent="$emit('submit')">
+    <slot />
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'VTForm',
+};
+</script>

package/src/components/Form/VTFormCol.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="as" :class="[headless ? 'form-col' : null]">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

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/VTFormLabelHelper.vue

@@ -0,0 +1,22 @@
+<template>
+  <span
+    :class="[
+      headless
+        ? 'form-label-helper'
+        : 'font-normal text-xs self-end text-gray-500',
+    ]"
+  >
+    <slot />
+  </span>
+</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;
 }