Input file type implementation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Button/SButton.vue

@@ -218,24 +218,16 @@ export default class SButton extends Vue {
   }
   background-color: $color-neutral-placeholder;
   border-color: $color-neutral-placeholder;
-  &:hover, &:active, &:focus, &:disabled { // TODO: ux designers will create this state
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
-  }
-  &:disabled:hover {
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
+  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    background-color: $color-neutral-hover;
+    border-color: $color-neutral-hover;
   }
   &.alternative {
     background-color: $color-basic-white;
     border-color: $color-neutral-border;
-    &:hover, &:active, &:focus, &:disabled { // TODO: ux designers will create this state
-      background-color: $color-basic-white;
-      border-color: $color-neutral-border;
-    }
-    &:disabled:hover {
-      background-color: $color-basic-white;
-      border-color: $color-neutral-border;
+    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+      background-color: $color-neutral-placeholder;
+      border-color: $color-neutral-placeholder;
     }
   }
 }

src/components/Card/SCard.vue

@@ -48,6 +48,7 @@ export default class SCard extends Vue {
   .el-card__header {
     border-bottom-color: $color-basic-white;
     padding-bottom: 0;
+    text-align: left;
   }
   .el-card__body {
     padding: 18px 20px;

src/components/Collapse/SCollapseItem.vue

@@ -33,7 +33,7 @@ export default class SCollapseItem extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
+// @import "../../styles/icons.scss";
 
 .el-collapse-item__ {
   &wrap {
@@ -45,18 +45,24 @@ export default class SCollapseItem extends Vue {
     &.is-active {
       border-bottom-color: transparent;
     }
+    // TODO: fix it. @extend doesn't work in the current implementation
     .el-icon-arrow-right {
-      @extend .s-icon-arrow-top;
-      padding: 8px;
+      // @extend .s-icon-arrow-top;
+      padding: 10px;
+      // padding: 8px;
       width: 32px;
       height: 32px;
       background-color: $color-neutral-placeholder;
       border-radius: 50%;
       &::before {
-        content: '';
+        // content: '';
+        color: $color-basic-black; // TODO: remove these lines
+        font-weight: bold;
       }
+      transform: rotate(90deg); // TODO: remove it
       &.is-active {
-        transform: rotate(180deg);
+        // transform: rotate(180deg);
+        transform: rotate(270deg);
       }
     }
   }

src/components/Dropdown/SDropdown.vue

@@ -27,7 +27,7 @@
         <slot></slot>
         <i class="el-icon-arrow-down el-icon--right"></i>
       </s-button>
-      <el-tooltip v-else :disabled="willTooltipBeDisabled">
+      <el-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
         <i class="s-icon-more"></i>
         <template slot="content">
           <slot></slot>

src/components/Form/SForm.vue

@@ -13,6 +13,7 @@
     :size="size"
     :label-position="labelPosition"
     @validate="handleValidate"
+    @focusout.native="updateIfFormValidated"
   >
     <slot></slot>
   </el-form>
@@ -90,10 +91,30 @@ export default class SForm extends Vue {
 
   @Ref('form') form!: ElForm
 
+  isDirty = false
+
   handleValidate (propNameIfSuccessOrError: string): void {
     this.$emit('validate', propNameIfSuccessOrError)
   }
 
+  // TODO: think about event when we can change dirty state
+  updateIfFormValidated (): void {
+    const fields = (this.$refs.form as any).fields
+    if (fields.find((f) => f.validateState === 'validating')) {
+      setTimeout(() => { this.updateIfFormValidated() }, 100)
+    } else {
+      this.isDirty = !fields.reduce((acc, f) => {
+        const valid = (f.isRequired && f.validateState === 'success')
+        const notErroring = (!f.isRequired && f.validateState !== 'error')
+        return acc && (valid || notErroring)
+      }, true)
+    }
+  }
+
+  public get dirty (): boolean {
+    return this.isDirty
+  }
+
   public validate (): Promise<boolean> {
     return this.form.validate()
   }

src/components/Form/SFormItem.vue

@@ -13,9 +13,7 @@
   >
     <slot slot="label" name="label"></slot>
     <slot></slot>
-    <slot slot="error" name="error">
-      <i v-if="isError" class="s-icon-error"></i>
-    </slot>
+    <i v-if="errorState" class="s-icon-error"></i>
   </el-form-item>
 </template>
 
@@ -81,6 +79,16 @@ export default class SFormItem extends Vue {
 
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
 
+  errorState = false
+
+  mounted (): void {
+    this.$nextTick(() => {
+      this.$watch('$refs.formItem.validateState', (state) => {
+        this.errorState = state === 'error'
+      }, { deep: true })
+    })
+  }
+
   get computedRules (): object {
     const rules = (this.rules || (this.elForm.rules || {})[this.prop]) as any
     if (!rules) {
@@ -113,7 +121,6 @@ export default class SFormItem extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
 
 .el-form-item {
   margin-bottom: 26px;
@@ -123,54 +130,59 @@ export default class SFormItem extends Vue {
       width: 100%;
     }
   }
-}
-.is-error {
-  > .el-form-item__content {
-    > .el-form-item__error {
-      padding-top: 8px;
-      color: $color-basic-black;
-      &::before {
-        @extend .s-icon-error;
-        content: '000';
-        background-repeat: no-repeat;
-        color: transparent;
+  &.is-error {
+    margin-bottom: 6px;
+    > .el-form-item__content {
+      > .el-form-item__error {
         position: relative;
-      }
-    }
-    > [class^="s-input"]:not(.disabled) {
-      .placeholder {
-        color: $color-error;
-        background-color: $color-main-base;
-      }
-      input, textarea {
-        background-color: $color-main-base;
-        &::placeholder {
-          color: $color-error;
+        padding-top: 8px;
+        padding-left: 30px;
+        color: $color-basic-black;
+        &::before {
+          content: '';
         }
       }
-      &:hover {
-        .placeholder,
-        .el-input > input,
-        .el-textarea > textarea {
-          background-color: $color-main-hover-light;
+      > [class^="s-input"]:not(.disabled) {
+        .placeholder {
+          color: $color-error;
+          background-color: $color-main-base;
         }
-        .el-input > input,
-        .el-textarea > textarea {
-          border-color: $color-error;
+        input, textarea {
+          background-color: $color-main-base;
+          &::placeholder {
+            color: $color-error;
+          }
         }
-      }
-      &.focused {
-        .placeholder,
-        .el-input > input,
-        .el-textarea > textarea {
-          background-color: $color-basic-white;
+        &:hover {
+          .placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: $color-main-hover-light;
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: $color-error;
+          }
         }
-        .el-input > input,
-        .el-textarea > textarea {
-          border-color: $color-error;
+        &.focused {
+          .placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: $color-basic-white;
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: $color-error;
+          }
         }
       }
     }
+    .s-icon-error {
+      position: absolute;
+      width: 21px;
+      height: 21px;
+      background-position: 4px bottom;
+    }
   }
 }
 </style>