@veritree/ui 0.19.2-17 → 0.19.2-18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-17",
+  "version": "0.19.2-18",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTFormFeedback.vue

@@ -1,7 +1,27 @@
 <template>
-  <div class="form-feedback" :class="classes">
-    <component :is="icon" v-if="showIcon" />
-    <span class="text-gray-500"><slot></slot></span>
+  <div
+    :class="[
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
+      // variant styles
+      headless ? `form-feedback--${variant}` : null,
+    ]"
+  >
+    <component
+      v-if="showIcon"
+      :is="icon"
+      :class="[
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
+        // variant styles
+        headless
+          ? `form-feedback__icon--${variant}`
+          : isError
+          ? 'text-error-500'
+          : null,
+      ]"
+    />
+    <span :class="[headless ? 'form-feedback--text' : 'text-sm text-gray-500']">
+      <slot />
+    </span>
   </div>
 </template>
 
@@ -17,32 +37,23 @@ export default {
   },
 
   props: {
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
     hideIcon: {
       type: Boolean,
       default: false,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+    },
   },
 
   computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-feedback--${this.variant}`] = true;
-      }
-
-      return classes;
+    isError() {
+      return this.variant === 'error';
     },
 
     icon() {