@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -1,394 +0,0 @@
-<template>
-  <div
-    class="wt-select"
-    :class="{
-      'wt-select--disabled': disabled,
-      'wt-select--invalid': invalid,
-    }"
-  >
-    <wt-label
-      class="wt-select__label"
-      :disabled="disabled"
-      :invalid="invalid"
-    >
-      {{label}}
-    </wt-label>
-    <vue-multiselect
-      class="wt-select__select"
-      :value="value"
-      :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"
-    >
-      <template slot="caret">
-        <wt-icon class="wt-select__arrow-caret" icon="arrow-down"></wt-icon>
-      </template>
-
-      <template slot="tag" slot-scope="{ option }">
-        <span class="multiselect__custom-tag">{{option[optionLabel]}}</span>
-      </template>
-
-      <template slot="clear" slot-scope="{}">
-        <wt-icon-btn
-          class="wt-select__clear"
-          :class="{ 'hidden': !isValue }"
-          icon="remove-rounded"
-          size="sm"
-          @click.native="clearValue"
-        ></wt-icon-btn>
-      </template>
-    </vue-multiselect>
-    <wt-input-info
-      v-if="isValidation"
-      :invalid="invalid"
-    >{{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,
-      },
-
-      trackBy: {
-        type: String,
-        default: 'id',
-      },
-
-      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,
-      },
-    },
-
-    data: () => ({
-      isLoading: false,
-      fetchedOptions: [],
-    }),
-
-    created() {
-      this.fetch();
-      this.fetch = debounce(this.fetch);
-    },
-
-    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;
-      },
-    },
-
-    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';
-
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
-    .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);
-            }
-          }
-
-          &--selected {
-            font-weight: normal;
-            background: var(--select-option--active-color)
-          }
-        }
-      }
-    }
-
-    .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);
-        }
-      }
-    }
-
-    &--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);
-          }
-        }
-      }
-    }
-  }
-
-  .wt-select--invalid,
-  .wt-select--invalid:hover {
-    .wt-label {
-      color: var(--false-color);
-    }
-
-    .multiselect {
-      ::v-deep {
-        .multiselect__tags {
-          border-color: var(--false-color);
-          outline: none; // prevent outline overlapping false color
-        }
-      }
-    }
-  }
-
-  .wt-select--disabled {
-    pointer-events: none;
-
-    .multiselect--disabled {
-       background: none;
-       opacity: 1;
-    }
-
-    .wt-select__arrow-caret ::v-deep .wt-icon__icon,
-    .wt-select__clear ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
-    }
-
-    .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);
-          }
-        }
-      }
-    }
-  }
-</style>

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

@@ -1,157 +0,0 @@
-<template>
-  <div
-    class="wt-switcher"
-    :class="{
-      'wt-switcher--active': value,
-      'wt-switcher--disabled': disabled,
-    }"
-  >
-    <wt-label
-      class="wt-switcher__wrapper"
-      :class="{'wt-switcher__wrapper--label-left': labelLeft}"
-    >
-      <input
-        class="wt-switcher__input"
-        type="checkbox"
-        :checked="value"
-        :disabled="disabled"
-        @change="inputHandler"
-      >
-      <span class="wt-switcher__checkmark"></span>
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label, value, disabled }">
-        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
-      </slot>
-    </wt-label>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-switcher',
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      label: {
-        type: String,
-        default: '',
-      },
-      labelLeft: {
-        type: Boolean,
-        default: false,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-    methods: {
-      inputHandler() {
-        this.$emit('change', !this.value);
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-switcher {
-    @include width-fit-content;
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  .wt-switcher__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-
-    &.wt-switcher__wrapper--label-left {
-      flex-direction: row-reverse;
-    }
-  }
-
-  .wt-switcher__label {
-    margin-left: var(--switcher-icon-margin);
-    transition: var(--transition);
-
-    .wt-switcher__wrapper--label-left & {
-      margin-left: 0;
-      margin-right: var(--switcher-icon-margin);
-    }
-  }
-
-  .wt-switcher__input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .wt-switcher__checkmark {
-    position: relative;
-    display: block;
-    width: var(--switcher-width);
-    height: var(--switcher-height);
-    background: var(--switcher-bg-color);
-    border-radius: var(--switcher-border-radius);
-    transition: var(--transition);
-
-    &:before {
-      content: '';
-      position: absolute;
-      bottom: var(--switcher-checkmark-margin);
-      left: var(--switcher-checkmark-margin);
-      height: var(--switcher-checkmark-size);
-      width: var(--switcher-checkmark-size);
-      background: var(--switcher-checkmark-color);
-      border-radius: 50%;
-      transition: var(--transition);
-    }
-  }
-
-  .wt-switcher:hover {
-    .wt-switcher__label {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-switcher__checkmark {
-      background: var(--switcher-checkmark--hover-color);
-    }
-  }
-
-  .wt-switcher--active, .wt-switcher--active:hover {
-    .wt-switcher__label {
-      color: var(--form-label--active-color);
-    }
-
-    .wt-switcher__checkmark {
-      background: var(--switcher-checkmark--active-color);
-
-      /* Show the indicator (dot/circle) when checked */
-      &:before {
-        transform: translateX(var(--switcher-checkmark-translateX));
-      }
-    }
-  }
-
-  .wt-switcher--disabled {
-    pointer-events: none;
-
-    .wt-switcher__label {
-      color: var(--form-label--disabled-color);
-    }
-
-    .wt-switcher__checkmark {
-      background: var(--icon--disabled-color);
-    }
-  }
-</style>

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

@@ -1,125 +0,0 @@
-<template>
-  <nav class="wt-tabs">
-    <button
-      class="wt-tab"
-      :class="{
-        'wt-tab--highlight': tab.value === current.value
-      }"
-      v-for="(tab) in tabs"
-      :value="tab.text"
-      :key="tab.value"
-      type="button"
-      @click="open(tab)"
-    >
-      <slot :name="tab.value" v-bind="{ tab, current }">
-        {{tab.text}}
-      </slot>
-    </button>
-
-    <div class="wt-tabs__underline">
-      <div
-        class="wt-tab__underline--highlight"
-        :style="{
-          width: `${activeLineWidth}px`,
-          transform: `translateX(${activeLineOffset}px)`
-        }"
-      ></div>
-    </div>
-  </nav>
-</template>
-
-<script>
-  export default {
-    name: 'wt-tabs',
-    props: {
-      current: {
-        type: Object,
-        default: () => {},
-      },
-      tabs: {
-        type: Array,
-        default: () => [],
-      },
-    },
-
-    model: {
-      prop: 'current',
-      event: 'change',
-    },
-
-    data: () => ({
-      activeLineWidth: 0,
-      activeLineOffset: 0,
-    }),
-
-    methods: {
-      open(value) {
-        this.$emit('change', value);
-        this.moveActiveLine(value);
-      },
-
-      moveActiveLine(newValue) {
-        if (!this.current) return;
-        if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
-        const element = this.$refs[newValue][0];
-        this.activeLineWidth = element.clientWidth;
-        this.activeLineOffset = element.offsetLeft;
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-tabs {
-    position: relative;
-  }
-
-  .wt-tab {
-    @extend %typo-body-lg;
-    position: relative;
-    display: inline-block;
-    padding: var(--tab-padding);
-    margin: var(--tab-margin);
-    color: var(--tab-color);
-    background: transparent;
-    border: none;
-    border-bottom: var(--tab-border);
-    border-bottom-color: transparent;
-    transition: var(--transition);
-    cursor: pointer;
-    z-index: var(--tab-z-index);
-
-    &:hover {
-      @extend %typo-strong-lg;
-      color: var(--tab--hover-color);
-    }
-
-    &.wt-tab--highlight {
-      @extend %typo-strong-lg;
-      color: var(--tab--active-color);
-      border-bottom-color: var(--tab--active-border-color);
-    }
-
-    // disables bold font resize on hover
-    &:after {
-      display: block;
-      content: attr(value);
-      font-family: 'Montserrat Semi', monospace;
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
-  }
-
-  // all tabs underline
-  .wt-tabs__underline {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: var(--tabs-underiline-height);
-    background: var(--tabs-underiline-color);
-    z-index: 0;
-  }
-
-</style>