@veritree/ui 0.20.0 → 0.21.0

package/package.json

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

package/src/components/Drawer/VTDrawerContent.vue

@@ -12,7 +12,7 @@
       v-show="visible"
       :class="{
         'Drawer-content': headless,
-        'absolute z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
+        'fixed z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
           !headless,
         'bg-white text-gray-600': !dark,
         'bg-fd-600': dark,

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' : 'flex gap-2 mt-1 items-baseline',
+      // variant styles
+      headless ? `form-feedback--{$variant}` : null,
+    ]"
+  >
+    <component
+      v-if="showIcon"
+      :is="icon"
+      :class="[
+        headless ? 'form-feedback__icon' : 'relative top-1 shrink-0 h-4 w-4',
+        // variant styles
+        headless
+          ? `form-feedback__icon--{$variant}`
+          : isError
+          ? 'text-error-500'
+          : null,
+      ]"
+    />
+    <span :class="[headless ? 'form-feedback--text' : 'text-gray-500 text-sm']">
+      <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

@@ -0,0 +1,52 @@
+<template>
+  <input
+    v-bind="$attrs"
+    :class="[
+      headless
+        ? 'form-control'
+        : 'border border-solid py-2 px-3 rounded text-inherit',
+      headless
+        ? `form-control--${variant}`
+        : isError
+        ? 'border-error-300'
+        : 'border-gray-300',
+    ]"
+    :value="value"
+    @input="$emit('input', $event.target.value)"
+    @blur="$emit('blur')"
+  />
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+</script>

package/package-lock.json

@@ -1,13 +0,0 @@
-{
-  "name": "@veritree/ui",
-  "version": "0.1.9",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@veritree/icons": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@veritree/icons/-/icons-0.12.0.tgz",
-      "integrity": "sha512-vunUKzvS9neslSf3R3y6RYQrcfRpxmp8PnhWWe2peYiyElLIJcb7zAsfCZ+I0Fg5PQ6GZG6StqWy0WF7MJ7VOg=="
-    }
-  }
-}