@veritree/ui 0.7.0 → 0.8.0

package/index.js

@@ -17,6 +17,8 @@ import VTPopoverDivider from "./src/Popover/VTPopoverDivider.vue";
 import VTPopoverGroup from "./src/Popover/VTPopoverGroup.vue";
 import VTPopoverItem from "./src/Popover/VTPopoverItem.vue";
 import VTPopoverTrigger from "./src/Popover/VTPopoverTrigger.vue";
+import VTFormFeedback from "./src/Form/VTFormFeedback.vue";
+import VTFormGroup from "./src/Form/VTFormGroup.vue";
 
 import VTAlert from "./src/Alerts/VTAlert.vue";
 
@@ -90,6 +92,8 @@ export {
   VTPopoverGroup,
   VTPopoverItem,
   VTPopoverTrigger,
+  VTFormFeedback,
+  VTFormGroup,
   VTButton,
   // VTButtonSave,
   VTInput,

package/nuxt.js

@@ -0,0 +1,20 @@
+import { join } from 'path';
+
+const components = [
+  'src/Avatar',
+  'src/Drawer',
+  'src/Dialog',
+  'src/DropdownMenu',
+  'src/Form',
+  'src/Image',
+  'src/Tabs',
+]
+
+export default function () {
+  this.nuxt.hook('components:dirs', dirs => {
+    // Add ./components dir to the list
+    components.forEach((component) => {
+      dirs.push(join(__dirname, component))
+    });
+  })
+}

package/package.json

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

package/src/Form/VTFormFeedback.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="form-feedback" :class="classes">
+    <component :is="icon" v-if="showIcon" />
+    <span class="text-gray-500"><slot></slot></span>
+  </div>
+</template>
+
+<script>
+import { IconCheck, IconWarning } from '@veritree/icons';
+
+export default {
+  name: 'VTFormFeedback',
+
+  components: {
+    IconWarning,
+    IconCheck,
+  },
+
+  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,
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = {};
+
+      if (this.variant) {
+        classes[`form-feedback--${this.variant}`] = true;
+      }
+
+      return classes;
+    },
+
+    icon() {
+      if (this.variant === 'success') return IconCheck;
+      return IconWarning;
+    },
+
+    showIcon() {
+      return !this.hideIcon;
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/Form/VTFormGroup.vue

@@ -0,0 +1,22 @@
+<template>
+  <component :is="as" :class="classes" class="form-group">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  data() {
+    return {
+      classes: {},
+    };
+  },
+};
+</script>