@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -1,20 +1,21 @@
-
-:root {
-  --datepicker-padding: 9px 44px;
-  --datepicker-icon-margin: 10px;
-  --datepicker-border: 1px solid;
-
-  --datepicker-cell-size: 38px;
-  --datepicker-cell-margin: 1px;
-  --datepicker-calendar-padding: 10px;
-  --datepicker-calendar-header-margin: 20px;
-  --datepicker-width: calc(
-          7 * var(--datepicker-cell-size)
-          + 2 * var(--datepicker-calendar-padding)
-          + 2px
-          + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
-
-  --datepicker-selected-cell-text-color: var(--main-primary-color);
-  --datepicker-selected-cell-bg-color: var(--main-accent-color);
-  --datepicker-cell--hover-color: #F9F9F9;
-}
+
+:root {
+  --datepicker-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+    + var(--icon-md-size)
+    + var(--spacing-xs)
+    );
+  --datepicker-icon-margin: var(--spacing-xs);
+  --datepicker-border: 1px solid;
+
+  --datepicker-cell-size: var(--spacing-lg);
+  --datepicker-cell-gap: var(--spacing-xs);
+  --datepicker-calendar-padding: var(--spacing-xs);
+  --datepicker-calendar-header-margin: var(--spacing-xs);
+
+  --datepicker-selected-cell-text-color: var(--main-color);
+  --datepicker-selected-cell-bg-color: var(--accent-color);
+  --datepicker-cell--hover-color: var(--secondary-color-50);
+}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -1,100 +1,90 @@
-.vdp-datepicker__calendar {
-  width: var(--datepicker-width);
-  right: 0;
-  padding: var(--datepicker-calendar-padding);
-  line-height: var(--datepicker-cell-size);
-  border-radius: var(--border-radius);
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-content: flex-end;
-    margin-bottom: var(--datepicker-calendar-header-margin);
-    line-height: 0;
-
-    .day__month_btn {
-      @extend %typo-strong-lg;
-      padding-top: 5px;
-    }
-
-    .prev, .next {
-      float: none;
-      text-indent: 0;
-      color: transparent;
-      cursor: pointer;
-
-      &:hover {
-        background-color: transparent !important;
-      }
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: 5px;
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/icons/arrow-down--md.svg") center center;
-        background-size: contain;
-        border: none !important; // hide default arrows
-        transform: translateX(-50%) rotate(90deg);
-      }
-
-      &:hover:after {
-        background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
-      }
-    }
-
-    .next:after {
-      transform: translateX(-50%) rotate(-90deg);
-    }
-  }
-
-  .cell {
-    @extend %typo-body-lg;
-    width: var(--datepicker-cell-size);
-    height: var(--datepicker-cell-size);
-    padding: 0;
-    line-height: var(--datepicker-cell-size);
-    transition: var(--transition);
-
-    &.day-header {
-      @extend %typo-body-sm;
-      height: auto;
-      letter-spacing: 0.4px;
-      color: var(--form-label-color);
-    }
-
-    &.day {
-      border-radius: var(--border-radius);
-      margin: 1px;
-
-      &.selected {
-        @extend %typo-strong-lg;
-        color: var(--datepicker-selected-cell-text-color);
-        background: var(--datepicker-selected-cell-bg-color) !important;
-        line-height: var(--datepicker-cell-size);
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-cell--hover-color);
-        border-color: transparent;
-      }
-    }
-
-    &.month {
-      &.selected {
-        &:hover {
-          background: var(--datepicker-selected-cell-bg-color) !important;
-        }
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-selected-cell-bg-color) !important;
-      }
-    }
-  }
-}
+.vdp-datepicker__calendar {
+  width: fit-content;
+  right: 0;
+  padding: var(--datepicker-calendar-padding);
+  border-radius: var(--border-radius);
+  box-shadow: var(-elevation-1);
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-content: flex-end;
+    margin-bottom: var(--datepicker-calendar-header-margin);
+    line-height: 0;
+
+    .day__month_btn {
+      @extend %typo-body-1;
+    }
+
+    .prev, .next {
+      float: none;
+      text-indent: 0;
+      color: transparent;
+      cursor: pointer;
+      //background: red !important;
+      border: none !important; // hide default arrows
+
+      &:hover {
+        background: none;
+      }
+
+      &:before, &:after {
+        display: none;
+      }
+    }
+  }
+
+  // cells wrapper
+  & > div:last-child {
+    display: grid;
+    grid-template-columns: repeat(7, 32px);
+    grid-gap: var(--datepicker-cell-gap);
+  }
+
+  .cell {
+    @extend %typo-body-1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--datepicker-cell-size);
+    height: var(--datepicker-cell-size);
+    padding: 0;
+    border: none !important;
+    transition: var(--transition);
+
+    &.day-header {
+      @extend %typo-caption;
+      color: var(--form-label-color);
+    }
+
+    &.day {
+      border-radius: var(--border-radius);
+
+      &.selected {
+        color: var(--datepicker-selected-cell-text-color);
+        background: var(--datepicker-selected-cell-bg-color) !important;
+      }
+
+      &:not(.blank):not(.disabled).day:hover,
+      &:not(.blank):not(.disabled).month:hover,
+      &:not(.blank):not(.disabled).year:hover {
+        background: var(--datepicker-cell--hover-color);
+        border-color: transparent;
+      }
+    }
+
+    &.month {
+      &.selected {
+        &:hover {
+          background: var(--datepicker-selected-cell-bg-color) !important;
+        }
+      }
+
+      &:not(.blank):not(.disabled).day:hover,
+      &:not(.blank):not(.disabled).month:hover,
+      &:not(.blank):not(.disabled).year:hover {
+        background: var(--datepicker-selected-cell-bg-color) !important;
+      }
+    }
+  }
+}

package/src/css/components/molecules/wt-datetimepicker/_variables.scss

@@ -1,12 +1,11 @@
-
-:root {
-  --datetimepicker-padding: 9px 44px;
-  --datetimepicker-icon-margin: 10px;
-  --datetimepicker-border: 1px solid;
-
-  --datetimepicker-form-padding: 10px;
-  --datetimepicker-form-bg-color: var(--main-primary-color);
-  --datetimepicker-form-z-index: 1;
-
-  --datetimepicker-form-content-margin: 10px;
-}
+
+:root {
+  --datetimepicker-padding: var(--datepicker-padding);
+  --datetimepicker-icon-margin: var(--datepicker-icon-margin);
+  --datetimepicker-border: 1px solid;
+
+  --datetimepicker-form-padding: var(--spacing-xs);
+  --datetimepicker-form-bg-color: var(--main-color);
+
+  --datetimepicker-form-content-margin: var(--spacing-xs);
+}

package/src/css/components/molecules/wt-icon-btn/_variables.scss

@@ -1,3 +1,3 @@
-
-:root {
+
+:root {
 }

package/src/css/components/molecules/wt-input/_variables.scss

@@ -1,6 +1,8 @@
-
-:root {
-  --input-padding: 9px;
-  --input-border: 1px solid;
-  --input-icon-margin: 10px;
+
+:root {
+  --input-padding: calc(var(--spacing-xs) - 1px); // - border
+  --input-border: 1px solid;
+  --input-icon-margin: var(--spacing-xs);
+
+  --input-after-wrapper-gap: var(--spacing-2xs);
 }

package/src/css/components/molecules/wt-load-bar/_variables.scss

@@ -0,0 +1,6 @@
+
+:root {
+  --load-bar-height: 6px;
+  --load-bar-padding: 1px;
+  --load-bar-border-radius: 50px;
+}

package/src/css/components/molecules/wt-notification/_variables.scss

@@ -1,10 +1,10 @@
-
-:root {
-  --notification-min-width: 30vw;
-  --notification-max-width: 40vw;
-  --notification-padding: 10px;
-  --notification-icon-margin: 10px;
-
-  --notification-text-color: #000;
-  --notification-bg-color: #fff;
+
+:root {
+  --notification-min-width: 30vw;
+  --notification-max-width: 40vw;
+  --notification-padding: var(--spacing-xs);
+  --notification-icon-margin: var(--spacing-xs);
+
+  --notification-text-color: var(--text-primary-color);
+  --notification-bg-color: var(--main-color);
 }

package/src/css/components/molecules/wt-popup/_variables.scss

@@ -1,11 +1,20 @@
-
-:root {
-  --popup-wrapper-z-index: 110;
-  --popup-shadow-opacity: 0.8;
-  --popup-max-height: 80vh;
-  --popup-padding: 10px;
-  --popup-header-padding: 0;
-  --popup-main-padding: 10px 20px;
-  --popup-actions-padding: 10px 20px;
-  --popup-bg-color: var(--main-primary-color);
-}
+
+:root {
+  --popup-wrapper-z-index: 11;
+
+  --popup-shadow-opacity: 0.8;
+  --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
+
+  --popup-max-height: 90%;
+
+  --popup-bg-color: var(--main-color);
+  --popup-sections-gap: var(--spacing-sm);
+  --popup-padding: var(--popup-sections-gap);
+
+  --popup-header-padding: var(--spacing-xs);
+  --popup-header-bg-color: var(--secondary-color);
+
+  --popup-main-section-padding-right: var(--spacing-xs); // scroll offset
+
+  --popup-actions-padding: var(--spacing-xs);
+}

package/src/css/components/molecules/wt-progress-bar/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --progress-bar-height: 12px;
+  --progress-bar-padding: var(--spacing-3xs);
+  --progress-bar-border-radius: var(--progress-bar-padding);
+
+  --progress-bar-bg-color--primary: var(--accent-color);
+  --progress-bar-bg-color--secondary: var(--secondary-color);
+  --progress-bar-bg-color--success: var(--true-color);
+  --progress-bar-bg-color--danger: var(--false-color);
+}

package/src/css/components/molecules/wt-radio/_variables.scss

@@ -1,7 +1,7 @@
-
-:root {
-  --radio-icon-margin: 10px;
-  --radio-checkmark-size: 18px;
-  --radio-bullet-size: 8px;
-  --radio-border: 2px solid;
+
+:root {
+  --radio-icon-margin: var(--spacing-xs);
+  --radio-checkmark-size: 18px;
+  --radio-bullet-size: 8px;
+  --radio-border: 2px solid;
 }

package/src/css/components/molecules/wt-search-bar/_variables.scss

@@ -1,4 +1,8 @@
-
-:root {
-  --search-bar-padding: 9px 35px 9px 43px; // sides 10px + 24/16px icon + 10px margin
+
+:root {
+  --search-bar-padding:
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-sm-size) + var(--spacing-xs))
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-md-size) + var(--spacing-xs));
 }

package/src/css/components/molecules/wt-select/_multiselect.scss

@@ -0,0 +1,198 @@
+@import '~vue-multiselect/dist/vue3-multiselect.css';
+
+.multiselect ::v-deep {
+  cursor: pointer;
+  position: relative;
+
+  .multiselect__select {
+    position: absolute;
+    top: var(--select-icon-top-pos);
+    right: var(--select-caret-right-pos);
+    padding: 0; // reset default
+    transition: var(--transition);
+    width: fit-content; // reset default
+    height: fit-content; // reset default
+
+    &:before {
+      display: none; // reset default
+    }
+  }
+
+  .multiselect__limit {
+    position: absolute;
+    top: var(--select-chip-top-pos);
+  }
+
+  .multiselect__clear {
+    position: absolute;
+    z-index: 1;
+    top: var(--select-icon-top-pos);
+  }
+
+
+  .multiselect__tags {
+    padding: calc(var(--spacing-xs) - 1px); // borders
+    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,
+  .multiselect__placeholder {
+    @extend %typo-body-1;
+    @include wt-placeholder;
+    background: transparent;
+    padding: 0; // reset default
+    margin: 0; // reset default
+  }
+
+  .multiselect__input:focus {
+    @include wt-placeholder('focus');
+  }
+
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    color: var(--form-input-color);
+  }
+
+  .multiselect__placeholder {
+    @extend %wt-placeholder;
+    overflow: hidden;
+    max-width: 100%;
+    display: block;
+
+    // text overflow 3 dots
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .multiselect__content-wrapper {
+    @extend %wt-distant-scrollbar;
+    transition: var(--transition);
+    border: var(--select-tags-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .multiselect__option {
+    @extend %typo-body-1;
+    padding: var(--select-options-padding);
+
+    &:after {
+      display: none;
+    }
+
+
+    &--highlight {
+      color: var(--form-input-color);
+      //background: var(--select-option--hover-color);
+      background: none;
+    }
+
+
+    &--selected {
+      font-weight: normal;
+      background: var(--select-option--active-color)
+    }
+  }
+}
+
+.multiselect--active ::v-deep {
+  .multiselect__select .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  .multiselect__tags {
+    border-color: var(--form-border--active-color);
+
+    .multiselect__placeholder {
+      @extend %wt-placeholder--focus;
+    }
+  }
+
+}
+
+.wt-select:hover,
+.wt-tags-input:hover {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--form-border--hover-color);
+    }
+
+    .multiselect__select,
+    .multiselect__clear {
+      .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
+    }
+  }
+}
+
+.wt-select--loading,
+.wt-tags-input--loading {
+  ::v-deep {
+    .multiselect__content-wrapper {
+      overflow-y: hidden;
+    }
+
+    .multiselect__loading-wrapper {
+      position: sticky;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 300px; // max dropdown panel height
+      backdrop-filter: blur(4px);
+    }
+  }
+}
+
+
+.wt-select.wt-select--invalid,
+.wt-tags-input.wt-tags-input--invalid {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+  }
+}
+
+.wt-select--disabled,
+.wt-tags-input--disabled {
+  pointer-events: none;
+
+  .multiselect--disabled {
+    opacity: 1;
+    background: none;
+  }
+
+  .multiselect__select {
+    background: transparent; // reset default
+  }
+
+  .multiselect__arrow-caret ::v-deep .wt-icon__icon,
+  .multiselect__clear ::v-deep .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+
+  .multiselect {
+    ::v-deep {
+      .multiselect__tags {
+        border-color: var(--form-border--disabled-color);
+        background: var(--form-border--disabled-color);
+
+        .multiselect__placeholder {
+          @extend %wt-placeholder--disabled;
+          //color: var(--form-placeholder--disabled-color);
+        }
+      }
+    }
+  }
+}

package/src/css/components/molecules/wt-select/_variables.scss

@@ -1,23 +1,14 @@
-
-:root {
-  --select-caret-top-pos: 7px;
-  --select-caret-right-pos: 10px;
-  --select-caret-z-index: 1;
-
-  --select-clear-top-pos: 11px;
-  --select-clear-right-pos: calc(10px + (24px + 10px)); // 7px + arrow icon
-  --select-clear-z-index: var(--select-caret-z-index);
-
-  --select-tags-min-height: 38px;
-  --select-tags-padding: 9px 70px 9px 9px; // 66px = 10 + 24 + 10 + 16 + 10
-  --select-tags-border: var(--input-border);
-
-  --select-input-min-height: 18px;
-  --select-badge-right-pos: 70px;
-  --select-badge-z-index: 1;
-
-  --select-options-padding: var(--input-padding);
-
-  --select-option--hover-color: var(--main-secondary-accent-color);
-  --select-option--active-color: #FFF9E6;
-}
+
+:root {
+  --select-icon-top-pos: var(--spacing-xs);
+  --select-chip-top-pos: var(--spacing-xs);
+
+  --select-caret-right-pos: var(--input-padding);
+
+  --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
+
+  --select-options-padding: var(--input-padding);
+
+  --select-option--hover-color: var(--accent-secondary-color);
+  --select-option--active-color: var(--accent-secondary-color);
+}

package/src/css/components/molecules/wt-slider/_variables.scss

@@ -0,0 +1,15 @@
+
+:root {
+  --wt-slider-pointer-size: 16px;
+  --wt-slider-height: var(--wt-slider-pointer-size);
+
+  --wt-slider-width: 100%;
+  --wt-slider-input-height: 8px;
+  --wt-slider-border: 1px solid var(--secondary-color);
+
+  --wt-slider-pointer-radius: 50%;
+
+  --wt-slider-vertical-container-translation: translate(2px);
+  --wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
+  --wt-slider-vertical-transform-origin: 100% 0;
+}

package/src/css/components/molecules/wt-switcher/_variables.scss

@@ -1,14 +1,17 @@
-
-:root {
-  --switcher-icon-margin: 10px;
-  --switcher-width: 40px;
-  --switcher-height: 22px;
-  --switcher-checkmark-size: 14px;
-  --switcher-checkmark-margin: 4px;
-  --switcher-checkmark-translateX: 17px;
-  --switcher-bg-color: var(--icon-outline-color);
-  --switcher-checkmark-color: var(--main-primary-color);
-  --switcher-checkmark--hover-color: var(--icon-outline--hover-color);
-  --switcher-checkmark--active-color: var(--main-accent-color);
-  --switcher-border-radius: 24px;
-}
+
+:root {
+  --switcher-icon-margin: var(--spacing-xs);
+  --switcher-width: 40px;
+  --switcher-height: 22px;
+  --switcher-cicle-size: 14px;
+  --switcher-cicle-margin: 4px;
+  --switcher-cicle-translateX: 17px;
+  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
+  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
+  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
+  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
+  --switcher-circle-bg-color: var(--main-color);
+  --switcher-border-radius: 24px;
+}