Merge pull request #43 from alvarosaburido/feature/material-theme

Feature/material theme

Author: alvarosabu

dev/nuxt/nuxt.config.js

@@ -52,7 +52,7 @@ export default {
    */
   modules: [['@asigloo/vue-dynamic-forms/nuxt']],
   dynamicForms: {
-    theme: 'default',
+    theme: 'material',
   },
   /*
    ** Build configuration

dev/nuxt/package-lock.json

@@ -137,6 +137,14 @@ const data = () => ({
         inline: false,
         customClass: 'col-12',
       }),
+      new FormField({
+        type: 'checkbox',
+        label: 'Disabled',
+        name: 'disabled',
+        value: true,
+        disabled: true,
+        customClass: 'col-12',
+      }),
       new FormField({
         type: 'radio',
         label: 'Prefered Animal',

dev/vue/App.vue

@@ -4,5 +4,6 @@
 // Customize default theme
 /* $input-bg: #e9ecef;
 $input-border-radius: 50px; */
+// @import '../../src/styles/themes/default.scss';
 
-@import '../../src/styles/themes/default.scss';
+@import '../../src/styles/themes/material.scss';

dev/vue/styles/_vendors.scss

@@ -68,7 +68,7 @@ You can select directly the theme trough `dynamicForms` options like this
 module.exports = {
   modules: ['@asigloo/vue-dynamic-forms/nuxt'],
   dynamicForms: {
-    theme: 'materialize',
+    theme: 'default',
   },
 };
 ```

docs/guide/install.md

@@ -4,8 +4,7 @@ The components are unstyled by default, so you can customize them with your own
 @import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
 ```
 
-For now, only default theme (similar to bootstrap) is available. More themes are in progress.
-
+More themes are in progress.
 
 ## Defaul Theme
 
@@ -14,7 +13,18 @@ Similar to default bootstrap theme for forms.
 ### Import to your app
 
 ```scss
-@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss';
+```
+
+or with Nuxt Module options in `nuxt.config.js`:
+
+```javascript [nuxt.config.js]
+module.exports = {
+  modules: ['@asigloo/vue-dynamic-forms/nuxt'],
+  dynamicForms: {
+    theme: 'default',
+  },
+};
 ```
 
 ### Customize your variables
@@ -23,7 +33,7 @@ Similar to default bootstrap theme for forms.
 $input-bg: #e2eb5d52;
 $input-border-color: #aec64c;
 
-@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss';
 ```
 
 ### Variables available
@@ -54,8 +64,8 @@ $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
 $input-placeholder-color: #6c757d !default;
 $input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
 $input-height: calc(
-  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
-    2}
+  #{$input-line-height * 1em} + #{$input-padding-y * 2} +
+    #{$input-border-width * 2}
 );
 
 $input-focus-bg: $input-bg !default;
@@ -71,4 +81,64 @@ $input-error-color: #dc3545 !default;
 
 ## Material Theme
 
-Work in progress [[#3](https://github.com/alvarosaburido/vue-dynamic-forms/issues/3)]
+### Import to your app
+
+```scss
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/material.scss';
+```
+
+or with Nuxt Module options in `nuxt.config.js`:
+
+```javascript [nuxt.config.js]
+module.exports = {
+  modules: ['@asigloo/vue-dynamic-forms/nuxt'],
+  dynamicForms: {
+    theme: 'material',
+  },
+};
+```
+
+### Variables available
+
+You have all this variables to customize your form inputs.
+
+Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](./models.md).
+
+```scss
+$theme-color: #6200ee;
+$base-color: #ced4da;
+$text-color: #202020;
+$light: #fefefe;
+
+$font-size: 1rem !default;
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-family: $font-family-sans-serif !default;
+
+$line-height: 1.5;
+
+$input-padding-y: 0.375rem;
+$input-padding-x: 0.75rem;
+$input-border-width: 1px;
+$input-border-color: $base-color;
+$input-border-radius: 0;
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+$input-placeholder-color: #6c757d;
+
+$input-error-color: #dc3545;
+```
+
+### Customize your variables
+
+```scss
+$theme-color: #6200ee;
+$base-color: #ced4da;
+
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/material.scss';
+```
+
+## Submit you own theme
+
+If you have a great custom theme and you want it to be on the library submit a propose via PR [here](https://github.com/alvarosaburido/vue-dynamic-forms/pulls). 👩‍🎤👨‍🎤

docs/guide/theming.md

@@ -1,6 +1,6 @@
 const path = require('path');
 
-const THEMES = ['default'];
+const THEMES = ['default', 'material'];
 
 module.exports = function nuxtDynamicForms(moduleOptions) {
   const options = Object.assign({}, this.options.dynamicForms, moduleOptions);

nuxt/index.js

@@ -1,12 +1,5 @@
 <template>
   <div :class="getClasses">
-    <label
-      class="form-label"
-      :for="formControl.name"
-      v-if="formControl.type !== 'checkbox'"
-    >
-      {{ formControl.label }}
-    </label>
     <input-text
       v-if="
         formControl.type === 'text' ||
@@ -39,12 +32,21 @@
       @change="valueChange"
     />
     <slot
+      v-if="formControl.type === 'custom-field'"
       :name="'custom-field'"
       :control="formControl"
       :valueChange="valueChange"
       :onFocus="onFocus"
       :onBlur="onBlur"
     />
+    <label
+      class="form-label"
+      :for="formControl.name"
+      v-if="formControl.type !== 'checkbox'"
+    >
+      {{ formControl.label }}
+    </label>
+    <span class="form-bar"></span>
     <p class="form-hint" v-if="formControl.helper">
       {{ formControl.helper }}
     </p>

src/components/dynamic-input/DynamicInput.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="form-check">
+  <div class="input-checkbox">
     <input
-      class="form-check-input"
+      class="input-checkbox__input"
       type="checkbox"
       :id="formControl.name"
       v-model="formControl.value"
       :disabled="formControl.disabled"
     />
-    <label class="form-check-label" :for="formControl.name">
+    <label class="input-checkbox__label" :for="formControl.name">
       {{ formControl.label }}
     </label>
   </div>

src/components/input-checkbox/InputCheckbox.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="input-radio">
+  <div
+    class="input-radio"
+    :class="{ 'input-radio--inline': formControl.inline }"
+  >
     <div
-      class="form-check"
-      :class="{ 'form-check-inline': formControl.inline }"
+      class="input-radio__base"
       v-for="opt in formControl.options"
       :key="opt.name"
     >
       <input
-        class="form-check-input"
+        class="input-radio__input"
         type="radio"
         :id="opt.value"
         v-model="formControl.value"
         :value="opt.value"
         :disabled="opt.disabled"
       />
-      <label class="form-check-label" :for="opt.value">
+      <label class="input-radio__label" :for="opt.value">
         {{ opt.text }}
       </label>
     </div>