@veritree/ui 0.19.2-17 → 0.19.2-19

package/mixins/form-control.js

@@ -40,11 +40,21 @@ export const formControlMixin = {
       );
     },
 
+    
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+
+export const formControlStyleMixin = {
+  computed: {
     classComputed() {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between gap-3 rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
+          : 'leading-0 flex outline-none w-full max-w-full appearance-none items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200 appearance-none',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`
@@ -59,9 +69,5 @@ export const formControlMixin = {
           : 'h-10',
       ];
     },
-
-    isError() {
-      return this.variant === 'error';
-    },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-17",
+  "version": "0.19.2-19",
   "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() {

package/src/components/Form/VTInput.vue

@@ -8,11 +8,12 @@
 </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,11 +28,9 @@ 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;