Select components

package.json

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

src/components/DatePicker/SDatePicker.vue

@@ -52,7 +52,6 @@ export default class SDatePicker extends Vue {
    * `"year"`/`"month"`/`"date"`/`"dates"`/`"datetime"`/`"week"`/`"datetimerange"`/`"daterange"`/`"monthrange"`
    */
   @Prop({ type: String, default: PickerTypes.DATE }) readonly type!: string
-
   /**
    * Input type of the datepicker component. Available values: `"input"`, `"select"`.
    * `"input"` can be set only when `type` is not range. Otherwise, `"select"` will be set automatically.
@@ -190,9 +189,12 @@ export default class SDatePicker extends Vue {
     this.$emit('change', value)
   }
 
+  get isRange (): boolean {
+    return ([PickerTypes.DATETIMERANGE, PickerTypes.DATERANGE, PickerTypes.MONTHRANGE] as Array<string>).includes(this.type)
+  }
+
   get isInputType (): boolean {
-    return !([PickerTypes.DATETIMERANGE, PickerTypes.DATERANGE, PickerTypes.MONTHRANGE] as Array<string>).includes(this.type) &&
-      this.inputType === InputTypes.INPUT
+    return !this.isRange && this.inputType === InputTypes.INPUT
   }
 
   get willHaveClearButton (): boolean {
@@ -221,7 +223,7 @@ export default class SDatePicker extends Vue {
     if (this.disabled) {
       cssClasses.push('disabled')
     }
-    if (this.model) {
+    if ((!this.isRange && this.model) || (this.isRange && this.model.length !== 0)) {
       cssClasses.push('has-value')
     }
     return cssClasses
@@ -339,6 +341,9 @@ export default class SDatePicker extends Vue {
   }
   &.select {
     .el-date-editor {
+      .el-input__inner, .el-range-input, .el-range-separator {
+        font-weight: bold;
+      }
       &.el-input__inner, & .el-input__inner {
         border-radius: 8px;
         padding-left: 12px;
@@ -347,6 +352,7 @@ export default class SDatePicker extends Vue {
         }
         &::placeholder, .el-range-input::placeholder {
           color: $color-neutral-tertiary;
+          font-weight: bold;
         }
       }
     }
@@ -365,6 +371,7 @@ export default class SDatePicker extends Vue {
       top: 30%;
       pointer-events: none;
       color: $color-neutral-tertiary;
+      transition: transform .3s;
     }
     &.has-value {
       .s-icon-chevron-bottom {

src/components/Pagination/SPagination.vue

@@ -77,13 +77,13 @@ export default class SPagination extends Vue {
    */
   @Prop({ default: '', type: String }) readonly popperClass!: string
   /**
-   * Custom class name for the total element of the pagination component
+   * Styles object for the total element of the pagination component
    */
-  @Prop({ default: '', type: String }) readonly totalClass!: string
+  @Prop() readonly totalStyle!: object
   /**
-   * Custom class name for the sizes element of the pagination component
+   * Styles object for the sizes element of the pagination component
    */
-  @Prop({ default: '', type: String }) readonly sizesClass!: string
+  @Prop() readonly sizesStyle!: object
   /**
    * Text of the previous button
    */
@@ -118,11 +118,15 @@ export default class SPagination extends Vue {
     const items = Array.from(this.pagination.$el.childNodes) as Array<any>
     this.totalItem = items.find(item => item.className === 'el-pagination__total')
     this.sizesItem = items.find(item => item.className === 'el-pagination__sizes')
-    if (this.totalItem && this.totalClass) {
-      (this.totalItem as Element).classList.add(this.totalClass)
+    if (this.totalItem && this.totalStyle) {
+      for (const styleProp in this.totalStyle) {
+        (this.totalItem as HTMLElement).style[styleProp] = this.totalStyle[styleProp]
+      }
     }
-    if (this.sizesItem && this.sizesClass) {
-      (this.sizesItem as Element).classList.add(this.sizesClass)
+    if (this.sizesItem && this.sizesStyle) {
+      for (const styleProp in this.sizesStyle) {
+        (this.sizesItem as HTMLElement).style[styleProp] = this.sizesStyle[styleProp]
+      }
     }
   }
 
@@ -239,6 +243,7 @@ export default class SPagination extends Vue {
   }
   .el-pagination__total, .per-page-text, .el-pagination__jump {
     color: $color-neutral-secondary;
+    font-weight: normal;
   }
   .el-pager li {
     color: $color-basic-black;

src/components/Select/SOption.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-option :value="value" :label="label" :disabled="disabled">
+    <slot></slot>
+  </el-option>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SOption extends Vue {
+  /**
+   * Value of the option group
+   */
+  @Prop({ default: '' }) readonly value!: string | number | object
+  /**
+   * Label of the option group, same as `value` if omitted
+   */
+  @Prop({ default: '' }) readonly label!: string | number | object
+  /**
+   * Disabled state of the option group.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+</style>

src/components/Select/SOptionGroup.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-option-group :label="label" :disabled="disabled">
+    <slot></slot>
+  </el-option-group>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SOptionGroup extends Vue {
+  /**
+   * Label of the option group
+   */
+  @Prop({ type: String, default: '' }) readonly label!: string
+  /**
+   * Disabled state of the option group.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-select-group__wrap:not(:last-of-type)::after {
+  background-color: $color-neutral-hover;
+}
+.el-select-group__title {
+  color: $color-neutral-tertiary;
+}
+</style>