@veritree/ui 0.48.2 → 0.49.1

package/mixins/floating-ui-content.js

@@ -69,7 +69,7 @@ export const floatingUiContentMixin = {
 
       e.stopPropagation();
 
-      if (this.visible && !this.el.contains(e.target)) {
+      if (this.visible && !this.el?.contains(e.target)) {
         this.componentTrigger.cancel();
       }
     },

package/mixins/form-control.js

@@ -48,6 +48,10 @@ export const formControlMixin = {
     isError() {
       return this.variant === 'error';
     },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
   },
 };
 
@@ -63,6 +67,8 @@ export const formControlStyleMixin = {
           ? `${this.name}--${this.variant}`
           : this.isError
           ? 'border-error-300'
+          : this.isSuccess
+          ? 'border-success-300'
           : 'border-gray-300',
         // height styles
         this.headless

package/package.json

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

package/src/components/Form/VTFormFeedback.vue

@@ -6,19 +6,7 @@
       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,
-      ]"
-    />
+    <component v-if="showIcon" :is="icon" :class="iconClassComputed" />
     <span
       :class="[headless ? 'form-feedback--text' : 'text-caption text-gray-500']"
     >
@@ -54,18 +42,38 @@ export default {
   },
 
   computed: {
-    isError() {
-      return this.variant === 'error';
-    },
-
     icon() {
       if (this.variant === 'success') return IconCheck;
       return IconWarning;
     },
 
+    iconClassComputed() {
+      return [
+        this.headless
+          ? 'form-feedback__icon'
+          : 'relative top-1 h-4 w-4 shrink-0',
+        // variant styles
+        this.headless
+          ? `form-feedback__icon--${this.variant}`
+          : this.isError
+          ? 'text-error-500'
+          : this.isSuccess
+          ? 'text-success-500'
+          : null,
+      ];
+    },
+
     showIcon() {
       return !this.hideIcon;
     },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
   },
 
   methods: {

package/src/components/Form/VTFormRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
     <slot />
   </div>
 </template>

package/src/components/Input/VTInputDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTInput v-model="date" type="date" />
+  <VTInput v-model="date" type="date" @change="$emit('change')" />
 </template>
 
 <script>