First Attempt of Material Theme

Author: alvarosabu

dev/App.vue

@@ -80,10 +80,13 @@ const data = () => ({
         type: 'select',
         label: 'Category',
         name: 'category',
+        value: 'arduino',
         options: [
           { value: null, text: 'Please select an option' },
-          { value: 'arduino', text: 'Arduino' },
-          { value: 'transistors', text: 'Transistors' },
+          { value: 'actionfield', text: 'Action field' },
+          { value: 'advancedselect', text: 'Advanced select' },
+          { value: 'autocomplete', text: 'Autocomplete' },
+          { value: 'buttongroup', text: 'Button group' },
         ],
       }),
       new FormField({

dev/styles/_vendors.scss

@@ -1,3 +1,4 @@
 //@import 'bootstrap/scss/bootstrap.scss';
 @import 'bootstrap/scss/bootstrap-grid.scss';
 @import '../../src/styles/themes/default.scss';
+// @import '../../src/styles/themes/material.scss';

src/components/dynamic-input/DynamicInput.js

@@ -65,10 +65,6 @@ const watch = {
 };
 
 const computed = {
-  hasValue() {
-    const { value } = this.formControl;
-    return value !== null && value !== undefined;
-  },
   hasErrors() {
     return (
       this.formControl.errors &&

src/components/dynamic-input/DynamicInput.vue

@@ -3,13 +3,6 @@
     class="dynamic-input form-group"
     :class="{ 'form-group--error': hasErrors }"
   >
-    <label
-      class="form-label"
-      :for="formControl.name"
-      v-if="formControl.type !== 'checkbox'"
-    >
-      {{ formControl.label }}
-    </label>
     <input-text
       v-if="
         formControl.type === 'text' ||
@@ -40,6 +33,13 @@
       :formControl="formControl"
       @change="valueChange"
     />
+    <label
+      class="form-label"
+      :for="formControl.name"
+      v-if="formControl.type !== 'checkbox'"
+    >
+      {{ formControl.label }}
+    </label>
     <div v-if="hasErrors">
       <p
         v-for="(errorText, $index) in errorMessages"

src/components/input-select/InputSelect.vue

@@ -5,7 +5,11 @@
     :name="formControl.name"
     class="form-control"
   >
-    <option v-for="opt in formControl.options" :key="opt.value">
+    <option
+      v-for="opt in formControl.options"
+      :key="opt.value"
+      :value="opt.value"
+    >
       {{ opt.text }}
     </option>
   </select>

src/components/input-text/InputText.js

@@ -7,6 +7,13 @@ const props = {
   },
 };
 
+const computed = {
+  hasValue() {
+    const { value } = this.formControl;
+    return value !== null && value !== undefined;
+  },
+};
+
 const methods = {
   valueChange() {
     this.$emit('change', this.formControl.value);
@@ -24,6 +31,7 @@ const InputText = {
   name: 'asInputText',
   props,
   methods,
+  computed,
 };
 
 export default InputText;

src/components/input-text/InputText.vue

@@ -4,6 +4,8 @@
     v-model="formControl.value"
     :name="formControl.name"
     class="form-control"
+    :data-text="hasValue"
+    :class="{ 'form-control--value': hasValue }"
     :type="formControl.type"
     :placeholder="formControl.placeholder"
     :disabled="formControl.disabled"

src/styles/themes/material.scss

@@ -0,0 +1,107 @@
+$theme-color: #6200ee;
+$base-color: #ced4da;
+$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;
+
+.form-group {
+  position: relative;
+  margin-top: 35px;
+  margin-bottom: 20px;
+
+  .form-label {
+    position: absolute;
+    left: 0;
+    top: 7px;
+    font-size: 16px;
+    pointer-events: none;
+    color: $base-color;
+    transition: 0.2s ease all;
+  }
+}
+
+.form-control {
+  width: 100%;
+  padding: $input-padding-y $input-padding-x;
+  font-family: $font-family;
+  font-size: $font-size;
+  height: calc(
+    #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2}
+  );
+  border: 0;
+  border-bottom: $input-border-width solid $input-border-color;
+  border-radius: $input-border-radius;
+
+  // Placeholder
+  &::placeholder {
+    color: $input-border-color;
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+    border-bottom: $input-border-width * 2 solid $input-border-color;
+  }
+}
+
+/* active state */
+.form-control:focus ~ .form-label,
+.form-control--value ~ .form-label,
+.custom-select ~ .form-label,
+.checkbox-group ~ .form-label,
+.radio-group ~ .form-label,
+.datalist-input--searching ~ .form-label {
+  color: $theme-color;
+  top: -18px;
+  font-size: 12px;
+}
+
+.checkbox-group,
+.radio-group {
+  padding-top: 12px;
+}
+
+.form-control:focus {
+  border-bottom: 1px solid $theme-color;
+}
+
+.custom-select {
+  border-radius: 0;
+  background-image: unset;
+  border-bottom: 1px solid $theme-color;
+
+  &:focus {
+    box-shadow: unset;
+  }
+}
+
+.datalist-input {
+  border-bottom: 1px solid $theme-color;
+}
+
+.custom-checkbox .custom-control-label {
+  padding-left: 1rem;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $theme-color;
+}
+
+.custom-control-input:not(:checked) ~ .custom-control-label::before {
+  border-color: $theme-color;
+}