feature(next): added render functions for inputs

Author: alvarosabu

.npmignore

@@ -7,6 +7,7 @@ jest.config.js
 babel.config.js
 vue.config.js
 postcss.config.js
+tailwind.config.js
 .prettierrc
 .git
 **/.git/

dev/vue/App.vue

@@ -1,17 +1,27 @@
 <template>
   <div id="app">
-    <dynamic-form :form="form" />
-    <pre>{{ form }}</pre>
+    <div class="page container">
+      <h1 class="title m-4">{{ title }}</h1>
+      <div class="flex justify-between">
+        <div class="card p-6">
+          <dynamic-form :form="form" />
+        </div>
+        <div class="card p-6">
+          <pre>{{ form }}</pre>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 import { TextInput, SelectInput, DynamicForm } from '../../src/index';
 
 export default defineComponent({
   name: 'app',
   setup() {
+    const title = ref('Vue Dynamic Forms');
     const form = reactive<DynamicForm>({
       id: 'form',
       fields: [
@@ -38,6 +48,7 @@ export default defineComponent({
       ],
     });
     return {
+      title,
       form,
     };
   },

dev/vue/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 
 import App from './App.vue';
+import './styles/main.scss';
 
 import { createDynamicForms } from '../../src/index';
 

dev/vue/styles/_vendors.scss

@@ -1,12 +1,14 @@
-//@import 'bootstrap/scss/bootstrap.scss';
-@import 'bootstrap/scss/bootstrap-grid.scss';
+@import 'tailwindcss/base';
 
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';
 // Customize default theme
 /* $input-bg: #e9ecef;
 $input-border-radius: 50px; */
 // @import '../../src/styles/themes/default.scss';
 
-@import '@/styles/themes/material.scss';
+@import '@/styles/themes/default.scss';
 
 // Third-party
 

dev/vue/styles/base.scss

@@ -1,47 +1,21 @@
-body {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  margin-top: 60px;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;1,400&family=Roboto:wght@300;500;700&display=swap');
+
+.card {
+  @apply max-w-lg w-full rounded-lg shadow-lg;
 }
 
-pre {
-  font-family: FiraCode, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
-    monospace;
-  font-size: 12px;
-  color: #fefefe;
-  background: #2c3e50;
-  border-radius: 4px;
-  padding: 0.2rem 0.5rem;
-  overflow: auto;
+.container {
+  @apply mx-auto px-4;
 }
 
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  color: #212529;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+.page {
+  @apply pt-16 overflow-hidden  min-h-screen;
 }
 
-.btn-primary {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+.title {
+  @apply font-serif font-bold text-gray-800 text-2xl;
+}
 
-  &:hover {
-    background-color: darken(#007bff, 5);
-    border-color: darken(#007bff, 5);
-  }
+pre {
+  @apply bg-gray-900 text-white text-xs p-4 rounded-md;
 }