🎨 🔥 Removed default color on input (#38)

Input color will be active only when menu is visible

Author: mathieustan

Diff for: dist/vue-datepicker.esm.js

@@ -320,6 +320,7 @@ export default {
           disabled: this.disabled,
           id: this.componentId,
           isDateDefined: this.isDateDefined,
+          isMenuActive: this.isMenuActive,
           name: this.name,
           noCalendarIcon: this.noCalendarIcon,
           noInput: this.noInput,

Diff for: dist/vue-datepicker.min.js

@@ -13,22 +13,31 @@ export default {
   mixins: [colorable],
   directives: { ClickOutside },
   props: {
-    id: { type: String },
-    name: { type: String },
     clearable: { type: Boolean },
+    closeOnClickOutside: { type: Boolean, default: true },
+    color: { type: String },
     date: { type: [Object, Date, String] },
+    disabled: { type: Boolean, default: false },
+    id: { type: String },
     isDateDefined: { type: Boolean, default: false },
+    isMenuActive: { type: Boolean, default: false },
+    name: { type: String },
+    noCalendarIcon: { type: Boolean, default: false },
+    noInput: { type: Boolean, default: false },
     placeholder: { type: String },
-    color: { type: String },
-    disabled: { type: Boolean, default: false },
     tabindex: { type: [String, Number] },
-    noInput: { type: Boolean, default: false },
-    noCalendarIcon: { type: Boolean, default: false },
-    closeOnClickOutside: { type: Boolean, default: true },
   },
   computed: {
+    classes () {
+      return {
+        'datepicker__input--disabled': this.disabled,
+        'datepicker__input--is-active': this.isMenuActive,
+        'datepicker__input--no-date': !this.isDateDefined,
+      };
+    },
     computedColor () {
-      return this.isDateDefined && !this.disabled ? this.color : 'rgba(93, 106, 137, 0.5)';
+      if (this.disabled) return '';
+      return this.isMenuActive ? this.color : '';
     },
     isDirty () {
       return this.isDateDefined;
@@ -158,6 +167,7 @@ export default {
   render (h) {
     return h('div', this.setTextColor(this.computedColor, {
       staticClass: 'datepicker__input',
+      class: this.classes,
       directives: [{
         name: 'click-outside',
         value: {
@@ -183,10 +193,19 @@ export default {
     justify-content: flex-start;
     align-items: center;
     width: 100%;
+    color: currentColor;
 
     &--disabled {
       cursor: not-allowed;
       pointer-events: none;
+
+      input {
+        opacity: .38;
+      }
+    }
+
+    &--no-date:not(.datepicker__input--is-active) {
+      opacity: .6;
     }
 
     .datepicker__wrapper--rtl & {
@@ -236,7 +255,7 @@ export default {
       }
 
       @include input-placeholder {
-        color: transparentize(black, .6);
+        opacity: .6;
       }
     }
     }

Diff for: dist/vue-datepicker.umd.js

@@ -33,21 +33,21 @@ describe('DatePickerCustomInput', () => {
   describe('computed', () => {
     describe('computedColor', () => {
       [{
-        description: 'return disabled color if there is no color',
+        description: 'return empty by default',
         props: {},
-        expectedResult: 'rgba(93, 106, 137, 0.5)',
+        expectedResult: '',
       }, {
-        description: 'return disabled color if date isnt defined',
-        props: { color: '#ffffff' },
-        expectedResult: 'rgba(93, 106, 137, 0.5)',
+        description: 'return empty if disabled',
+        props: { disabled: true, color: '#ffffff', isMenuActive: true },
+        expectedResult: '',
       }, {
-        description: 'return color if date is defined',
-        props: { color: '#ffffff', isDateDefined: true },
-        expectedResult: '#ffffff',
+        description: 'return empty if menu is not active',
+        props: { color: '#ffffff', isMenuActive: false },
+        expectedResult: '',
       }, {
-        description: 'return disabled color if disabled',
-        props: { color: '#ffffff', disabled: true },
-        expectedResult: 'rgba(93, 106, 137, 0.5)',
+        description: 'return color if menu is active',
+        props: { color: '#ffffff', isMenuActive: true },
+        expectedResult: '#ffffff',
       }].forEach(({ description, props, expectedResult }) => {
         it(`should ${description}`, () => {
           const wrapper = mountComponent({ props });