@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/components/molecules/wt-select/wt-select.vue

@@ -1,394 +1,274 @@
 <template>
   <div
-    class="wt-select"
     :class="{
       'wt-select--disabled': disabled,
       'wt-select--invalid': invalid,
+      'wt-select--multiple': multiple,
+      'wt-select--clearable': clearable,
+      'wt-select--loading': isLoading,
     }"
+    class="wt-select"
   >
     <wt-label
-      class="wt-select__label"
+      v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
+      class="wt-select__label"
+      v-bind="labelProps"
     >
-      {{label}}
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
     </wt-label>
     <vue-multiselect
-      class="wt-select__select"
-      :value="value"
+      ref="vue-multiselect"
+      :allow-empty="allowEmpty"
+      :disabled="disabled"
+      :internal-search="!searchMethod"
+      :label="trackBy ? optionLabel : null"
+      :limit="1"
+      :loading="false"
+      :multiple="multiple"
       :options="selectOptions"
       :placeholder="placeholder || label"
-      :multiple="multiple"
-      :close-on-select="closeOnSelect"
-      :limit="1"
-      :label="optionLabel"
       :track-by="trackBy"
-      :limitText="limitText"
-      :loading="false"
-      :internal-search="internalSearch"
-      :disabled="disabled"
-      :allow-empty="allowEmpty"
-      :searchable="searchable"
-      @input="input"
-      @search-change="fetch"
-      @close="close"
+      :model-value="selectValue"
+      class="wt-select__select"
+      v-bind="$attrs"
+      @close="isOpened = false"
+      @open="isOpened = true"
+      v-on="listeners"
     >
-      <template slot="caret">
-        <wt-icon class="wt-select__arrow-caret" icon="arrow-down"></wt-icon>
+      <template v-if="!isOpened" v-slot:limit>
+        <wt-chip class="multiselect__limit">+{{ value.length - 1 }}</wt-chip>
       </template>
 
-      <template slot="tag" slot-scope="{ option }">
-        <span class="multiselect__custom-tag">{{option[optionLabel]}}</span>
+      <!--      Slot that is used for all selected options (tags)-->
+      <template v-slot:tag="{ option }">
+        <span class="multiselect__custom-tag">
+            {{ getOptionLabel({ option, optionLabel }) }}
+        </span>
       </template>
 
-      <template slot="clear" slot-scope="{}">
+      <!--      Slot for custom label template for single select-->
+      <template v-slot:singleLabel="{ option }">
+        <slot name="singleLabel" v-bind="{ option, optionLabel }">
+          <span class="multiselect__single-label">
+            {{ getOptionLabel({ option, optionLabel }) }}
+          </span>
+        </slot>
+      </template>
+
+      <!--      Slot for custom option template -->
+      <template v-slot:option="{ option }">
+        <slot name="option" v-bind="{ option, optionLabel }">
+          {{ getOptionLabel({ option, optionLabel }) }}
+        </slot>
+      </template>
+
+      <!--      Element for opening and closing the dropdown -->
+      <template v-slot:caret="{ toggle }">
+        <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
-          class="wt-select__clear"
+          :disabled="disabled"
+          class="multiselect__select"
+          icon="arrow-down"
+          @mousedown.native.prevent.stop="toggle"
+        ></wt-icon-btn>
+      </template>
+
+      <!--      Slot located before the tags -->
+      <template v-slot:clear="{}">
+        <wt-icon-btn
+          v-if="clearable"
           :class="{ 'hidden': !isValue }"
-          icon="remove-rounded"
-          size="sm"
-          @click.native="clearValue"
+          :disabled="disabled"
+          class="multiselect__clear"
+          icon="close"
+          @click="clearValue"
         ></wt-icon-btn>
       </template>
+
+      <template v-slot:beforeList>
+        <div v-show="isLoading" class="multiselect__loading-wrapper">
+          <wt-loader size="sm"></wt-loader>
+        </div>
+      </template>
+
+      <template v-if="showIntersectionObserver" slot="afterList">
+        <div v-observe-visibility="handleAfterListIntersect"></div>
+      </template>
     </vue-multiselect>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{validationText}}
+    >{{ validationText }}
     </wt-input-info>
   </div>
 </template>
 
 <script>
-  import VueMultiselect from 'vue-multiselect';
-  import debounce from '../../../scripts/debounce';
-  import validationMixin from '../../../mixins/validationMixin/validationMixin';
-
-  export default {
-    name: 'wt-select',
-    components: {
-      VueMultiselect,
-    },
-    mixins: [validationMixin],
-    props: {
-      value: {},
-
-      options: {
-        type: Array,
-        default: () => [],
-      },
-
-      label: {
-        type: String,
-      },
-
-      placeholder: {
-        type: String,
-      },
+import multiselectMixin from './mixins/multiselectMixin';
 
-      trackBy: {
-        type: String,
-        default: 'id',
-      },
+export default {
+  name: 'wt-select',
+  mixins: [multiselectMixin],
+  props: {
+    value: {},
 
-      multiple: {
-        type: Boolean,
-        default: false,
-      },
-
-      closeOnSelect: {
-        type: Boolean,
-        default: true,
-      },
-
-      optionLabel: {
-        type: String,
-        default: 'name',
-      },
-
-      internalSearch: {
-        type: Boolean,
-        default: true,
-      },
-
-      search: {
-        type: Function,
-      },
-
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-
-      searchable: {
-        type: Boolean,
-        default: true,
-      },
-
-      allowEmpty: {
-        type: Boolean,
-        default: true,
-      },
-
-      hideDetails: {
-        type: Boolean,
-        default: false,
-      },
+    multiple: {
+      type: Boolean,
+      default: false,
     },
 
-    data: () => ({
-      isLoading: false,
-      fetchedOptions: [],
-    }),
-
-    created() {
-      this.fetch();
-      this.fetch = debounce(this.fetch);
+    clearable: {
+      type: Boolean,
+      default: true,
     },
-
-    computed: {
-      selectOptions() {
-        if (!this.internalSearch) {
-          return this.fetchedOptions;
-        }
-        return this.options;
-      },
-
-      isValue() {
-        if (Array.isArray(this.value)) return !!this.value.length;
-        if (typeof this.value === 'object') return !!Object.keys(this.value).length;
-        return !!this.value;
-      },
+  },
+  data: () => ({
+    isOpened: false,
+  }),
+  methods: {
+    clearValue() {
+      let value = '';
+      if (Array.isArray(this.value)) value = [];
+      else if (typeof this.value === 'object' && this.value !== null) value = {};
+      this.input(value);
+      this.$emit('reset', value);
     },
-
-    methods: {
-      limitText: (count) => `${count}`,
-
-      async fetch(search) {
-        if (!this.internalSearch) {
-          const response = await this.search(search);
-          this.fetchedOptions = response.items;
-        }
-      },
-
-      clearValue() {
-        this.input('');
-      },
-
-      input(value) {
-        this.$emit('input', value);
-      },
-
-      close() {
-        this.$emit('closed');
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import '~vue-multiselect/dist/vue-multiselect.min.css';
-  @import '../../../css/components/atoms/wt-badge/wt-badge';
+@import '../../../css/components/molecules/wt-select/multiselect';
 
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
+.wt-select {
+  width: 100%;
+  min-width: 0;
+}
 
-    .wt-select:hover &,
-    .wt-select:focus-within & {
-      color: var(--form-label--hover-color);
-    }
+.wt-label {
+  .wt-select:hover &,
+  .wt-select:focus-within &, {
+    color: var(--form-label--hover-color);
   }
+}
 
-  .multiselect {
-    cursor: pointer;
-
-    .wt-select__arrow-caret {
-      position: absolute;
-      top: var(--select-caret-top-pos);
-      right: var(--select-caret-right-pos);
-      transform: rotate(0);
-      transition: var(--transition);
-      z-index: var(--select-caret-z-index);
-    }
-
-    ::v-deep .wt-select__clear {
-      position: absolute;
-      top: var(--select-clear-top-pos);
-      right: var(--select-clear-right-pos);
-      transform: rotate(0);
-      transition: var(--transition);
-      z-index: var(--select-clear-z-index);
-    }
-
-    ::v-deep {
-      .multiselect__tags {
-        display: flex;
-        align-items: center;
-        min-height: var(--select-tags-min-height); // reset original 20px style
-        box-sizing: border-box;
-        padding: var(--select-tags-padding);
-        color: var(--form-input-color);
-        border: var(--select-tags-border);
-        border-color: var(--form-border-color);
-        border-radius: var(--border-radius);
-
-        .multiselect__input,
-        .multiselect__single {
-          @extend %typo-body-lg;
-          min-height: var(--select-input-min-height); // reset original 20px style
-          padding: 0;
-          margin: 0;
-          background: transparent;
-        }
-
-        .multiselect__strong {
-          @extend %typo-body-lg;
-          @extend .wt-badge;
-          position: absolute;
-          right: var(--select-badge-right-pos);
-          min-height: var(--select-input-min-height); // reset original 20px style
-          margin: 0;
-          font-weight: normal;
-          z-index: var(--select-badge-z-index);
-
-          &:before {
-            content: '+';
-          }
-        }
-
-        .multiselect__custom-tag {
-          @extend %typo-body-lg;
-          color: var(--form-input-color);
-        }
-
-        .multiselect__placeholder {
-          color: var(--form-placeholder-color);
-          padding: 0;
-          margin: 0;
-        }
-      }
-
-      .multiselect__content-wrapper {
-        @extend %wt-distant-scrollbar;
-        border: var(--select-tags-border);
-        border-color: var(--form-border-color);
-        border-radius: var(--border-radius);
-        transition: var(--transition);
-
-        .multiselect__option {
-          padding: var(--select-options-padding);
-
-          & > span {
-            @extend %typo-body-lg;
-            color: var(--form-placeholder-color);
-          }
-
-          &:after {
-            display: none;
-          }
-
-          &--highlight {
-            background: var(--select-option--hover-color);
-           & > span {
-              color: var(--form-input-color);
-            }
-          }
+.wt-select--invalid,
+.wt-select--invalid:hover {
+  .wt-label {
+    color: var(--false-color);
+  }
+}
+
+.multiselect ::v-deep {
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    // text overflow 3 dots
+    display: block;
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
 
-          &--selected {
-            font-weight: normal;
-            background: var(--select-option--active-color)
-          }
-        }
-      }
+.multiselect--active ::v-deep {
+  .multiselect__tags-wrap,
+  .multiselect__strong {
+    display: none;
+  }
+}
+
+// right padding setup
+
+// default case
+.wt-select {
+  // all is fine
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      padding: var(--input-padding) calc(
+        var(--input-padding)
+        + var(--icon-md-size)
+        + var(--select-caret-right-pos)
+      ) var(--input-padding) var(--input-padding);
     }
-
-    .wt-select:hover & {
-      .wt-select__arrow-caret ::v-deep .wt-icon__icon {
-        fill: var(--icon--hover-color);
-      }
-
-      ::v-deep .wt-select__clear .wt-icon__icon {
-        fill: var(--icon--hover-color);
-      }
-
-      ::v-deep {
-        .multiselect__tags {
-          border-color: var(--form-border--hover-color);
-        }
-
-        .multiselect__placeholder {
-          color: var(--form-placeholder--hover-color);
-        }
-      }
+  }
+}
+
+// only chip
+.wt-select.wt-select--multiple:not(.wt-select--clearable) {
+  .multiselect ::v-deep {
+    $multiselect-limit-right-pos: calc(
+      var(--select-caret-right-pos) // caret offet from border
+      + var(--icon-md-size) // caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos
+        + 50px // chip
+        + var(--input-padding) // chip-to-content offset
+      );
     }
-
-    &--active {
-      .wt-select__arrow-caret {
-        transform: rotate(180deg);
-      }
-
-      .wt-select__arrow-caret ::v-deep .wt-icon__icon {
-        fill: var(--icon--hover-color);
-      }
-
-      ::v-deep {
-        .multiselect__tags {
-          border-color: var(--form-border--active-color);
-
-          .multiselect__tags-wrap,
-          .multiselect__strong {
-            display: none;
-          }
-
-          .multiselect__placeholder {
-            color: var(--form-placeholder--active-color);
-          }
-        }
-      }
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
     }
   }
-
-  .wt-select--invalid,
-  .wt-select--invalid:hover {
-    .wt-label {
-      color: var(--false-color);
+}
+
+// only clearable
+.wt-select.wt-select--clearable:not(.wt-select--multiple) {
+  .multiselect ::v-deep {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos) // caret offet from border
+      + var(--icon-md-size) // caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-clear-right-pos
+        + var(--icon-md-size) // clear
+        + var(--input-padding) // clear-to-content offset
+      );
     }
 
-    .multiselect {
-      ::v-deep {
-        .multiselect__tags {
-          border-color: var(--false-color);
-          outline: none; // prevent outline overlapping false color
-        }
-      }
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
     }
   }
-
-  .wt-select--disabled {
-    pointer-events: none;
-
-    .multiselect--disabled {
-       background: none;
-       opacity: 1;
+}
+
+.wt-select.wt-select--multiple.wt-select--clearable {
+  .multiselect ::v-deep {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos)// caret offet from border
+      + var(--icon-md-size)// caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+
+    $multiselect-limit-right-pos: calc(
+      $multiselect-clear-right-pos// clear offet from border
+      + var(--icon-md-size)// clear size
+      + var(--input-padding) // cleat-to-chip offset
+    );
+
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos
+        + 50px// chip
+        + var(--input-padding) // chip-to-content offset
+      );
     }
 
-    .wt-select__arrow-caret ::v-deep .wt-icon__icon,
-    .wt-select__clear ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
     }
 
-    .multiselect {
-      ::v-deep {
-        .multiselect__tags {
-          background: var(--form-border--disabled-color);
-          border-color: var(--form-border--disabled-color);
-
-          .multiselect__placeholder {
-            color: var(--form-placeholder--disabled-color);
-          }
-        }
-      }
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
     }
   }
+}
 </style>

package/src/components/molecules/wt-slider/__tests__/WtSlider.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSlider from '../wt-slider.vue';
+
+describe('WtSlider', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSlider, {});
+    expect(wrapper.classes('wt-slider')).toBe(true);
+  });
+});