@webitel/ui-sdk 23.12.43 → 23.12.44

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

@@ -1,29 +1,30 @@
 <template>
   <div
-    class="wt-switcher"
     :class="{
       'wt-switcher--off': !value,
       'wt-switcher--on': value,
       'wt-switcher--disabled': disabled,
     }"
+    class="wt-switcher"
   >
     <wt-label
-      v-bind="labelProps"
-      class="wt-switcher__wrapper"
       :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      :disabled="disabled"
+      class="wt-switcher__wrapper"
+      v-bind="labelProps"
     >
       <input
-        class="wt-switcher__input"
-        type="checkbox"
         :checked="value"
         :disabled="disabled"
+        class="wt-switcher__input"
+        type="checkbox"
         @change="inputHandler"
       >
       <span class="wt-switcher__checkmark" />
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label, value, disabled }"
         name="label"
+        v-bind="{ label, value, disabled }"
       >
         <div
           v-if="label"
@@ -65,6 +66,9 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
+  emits: [
+    'change',
+  ],
   methods: {
     inputHandler() {
       this.$emit('change', !this.value);
@@ -93,8 +97,8 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  user-select: none;
   cursor: pointer;
+  user-select: none;
 
   &.wt-switcher__wrapper--label-left {
     flex-direction: row-reverse;
@@ -106,12 +110,8 @@ export default {
   transition: var(--transition);
 
   .wt-switcher__wrapper--label-left & {
-    margin-left: 0;
     margin-right: var(--switcher-icon-margin);
-  }
-
-  .wt-switcher:hover & {
-    color: var(--form-label--hover-color);
+    margin-left: 0;
   }
 }
 
@@ -119,8 +119,8 @@ export default {
   position: absolute;
   width: 0;
   height: 0;
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 .wt-switcher__checkmark {
@@ -129,68 +129,84 @@ export default {
   flex: 0 0 var(--switcher-width);
   width: var(--switcher-width);
   height: var(--switcher-height);
-  border-radius: var(--switcher-border-radius);
   transition: var(--transition);
+  border-radius: var(--switcher-border-radius);
 
   &:before {
-    content: '';
     position: absolute;
     bottom: var(--switcher-cicle-margin);
     left: var(--switcher-cicle-margin);
-    height: var(--switcher-cicle-size);
     width: var(--switcher-cicle-size);
-    background: var(--switcher-circle-bg-color);
-    border-radius: 50%;
+    height: var(--switcher-cicle-size);
+    content: '';
     transition: var(--transition);
+    border-radius: 50%;
   }
 }
 
 .wt-switcher--off {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--off);
+    background: var(--wt-switcher-background-color-off);
+
+    &:before {
+      background: var(--wt-switcher-circle-background-color-off);
+    }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--hover);
+      background: var(--wt-switcher-background-color-off-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--disabled);
+      background: var(--wt-switcher-background-color-off-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--on {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--on);
+    background: var(--wt-switcher-background-color-on);
 
     /* Show the indicator (dot/circle) when checked */
     &:before {
       transform: translateX(var(--switcher-cicle-translateX));
+      background: var(--wt-switcher-circle-background-color-on);
     }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--hover);
+      background: var(--wt-switcher-background-color-on-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--disabled);
+      background: var(--wt-switcher-background-color-on-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--disabled {
   pointer-events: none;
-
-  .wt-switcher__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>

package/src/components/wt-table/_variables.scss

@@ -4,13 +4,16 @@
 
   --table-head-sort-arrow-margin: var(--spacing-xs);
   --table-head-border: 1px solid;
-  --table-head-border-color: var(--secondary-color);
 
   --table-min-height: 24px; // 24px icon size or body-1 lh
   --table-column-gap: var(--spacing-xs);
   --table-row-padding: var(--spacing-xs);
 
-  --table-primary-color: var(--main-color);
-  --table--hover-color: var(--accent-secondary-color);
-  --table-secondary-color: var(--secondary-color-50); // zebra
-}
+  --wt-table-head-border-color: var(--grey-lighten-1);
+  --wt-table-primary-color: var(--content-wrapper-color);
+  --wt-table-zebra-color: var(--dp-18-surface-color);
+}
+
+:root.theme--dark {
+  --table-head-border-color: var(--grey-darken-1);
+}

package/src/components/wt-table/wt-table.vue

@@ -229,31 +229,26 @@ export default {
   border-collapse: collapse;
 }
 
-.wt-table__head {
-  display: block;
-  box-sizing: border-box;
-  background: var(--table-primary-color);
-  border: var(--table-head-border);
-  border-color: var(--table-head-border-color);
-  border-radius: var(--border-radius);
-}
-
-//.wt-table__head {
-//  display: block;
-//}
-
 .wt-table__tr {
   display: grid;
   padding: var(--table-row-padding);
   transition: var(--transition);
   grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   grid-column-gap: var(--table-column-gap);
+  background: var(--wt-table-primary-color);
 
   &:nth-child(2n) {
-    background: var(--table-secondary-color);
+    background: var(--wt-table-zebra-color);
   }
 }
 
+.wt-table__tr__head {
+  border: var(--table-head-border);
+  border-color: var(--wt-table-head-border-color);
+  border-radius: var(--border-radius);
+  background: transparent;
+}
+
 .wt-table__th,
 .wt-table__td {
   @extend %typo-body-1;
@@ -281,8 +276,8 @@ export default {
   &--sortable {
     cursor: pointer;
 
-    &:hover ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
+    &:hover :deep .wt-icon__icon {
+      fill: var(--icon-active-color);
     }
   }
 
@@ -301,7 +296,7 @@ export default {
 }
 
 .wt-table__foot {
-  border-color: var(--table-head-border-color);
-  border-top: var(--table-head-border);
+  border-color: var(--wt-table-head-border-color);
+  border-top: var(--wt-table-head-border-color);
 }
 </style>

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -35,8 +35,9 @@
               @click.capture.prevent="column.show = !column.show"
             >
               <wt-checkbox
-                v-model="column.show"
+                :selected="column.show"
                 :label="shownColLabel(column)"
+                @change="column.show = $event"
               />
             </li>
           </ul>
@@ -81,7 +82,9 @@ export default {
       description: 'Header values to exclude from selection',
     },
   },
-
+  emits: [
+    'change',
+  ],
   data: () => ({
     draft: [], // headers draft
     isColumnSelectPopup: false,

package/src/components/wt-tabs/_variables.scss

@@ -5,10 +5,10 @@
 
   --tab-padding: var(--spacing-2xs);
   --tab-gap: var(--spacing-2xs);
-  --tab-color: var(--text-outline-color);
-  --tab--hover-color: var(--text-primary-color);
-  --tab--active-color: var(--text-primary-color);
+  --wt-tabs-text-color: var(--text-main-color);
+  --wt-tabs-text-hover-color: var(--wt-tabs-text-color);
+  --wt-tabs-text-active-color: var(--wt-tabs-text-color);
   --tab-border: 4px solid;
-  --tab--active-border-color: var(--primary-color);
+  --wt-tabs-underline-active-color: var(--primary-color);
   --tab-z-index: 1;
 }

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

@@ -49,7 +49,9 @@ export default {
       default: () => [],
     },
   },
-
+  emits: [
+    'change',
+  ],
   data: () => ({
     activeLineWidth: 0,
     activeLineOffset: 0,
@@ -93,7 +95,7 @@ export default {
   padding-bottom: var(--tab-padding);
   cursor: pointer;
   transition: var(--transition);
-  color: var(--tab-color);
+  color: var(--wt-tabs-text-color);
   border: none;
   border-bottom: var(--tab-border);
   border-bottom-color: transparent;
@@ -102,13 +104,13 @@ export default {
 
   &:hover,
   &:focus, {
-    color: var(--tab--hover-color);
-    border-bottom-color: var(--tab--active-border-color);
+    color: var(--wt-tabs-text-hover-color);
+    border-bottom-color: var(--wt-tabs-underline-active-color);
   }
 
   &.wt-tab--highlight {
-    color: var(--tab--active-color);
-    border-bottom-color: var(--tab--active-border-color);
+    color: var(--wt-tabs-text-active-color);
+    border-bottom-color: var(--wt-tabs-underline-active-color);
   }
 
   //// disables bold font resize on hover

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -47,6 +47,7 @@
           <wt-icon-btn
             icon="close--filled"
             size="sm"
+            color="on-primary"
             @click="remove(option)"
           />
         </wt-chip>
@@ -169,10 +170,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import './variables.scss';
-</style>
-
 <style lang="scss" scoped>
 @import '../wt-select/multiselect.scss';
 
@@ -180,21 +177,6 @@ export default {
   width: 100%;
 }
 
-.wt-tags-input:hover,
-.wt-tags-input:focus-within {
-  .wt-label {
-    color: var(--form-label--hover-color);
-  }
-}
-
-.wt-tags-input--invalid,
-.wt-tags-input--invalid:hover,
-.wt-tags-input--invalid:focus-within, {
-  .wt-label {
-    color: var(--false-color);
-  }
-}
-
 .wt-tags-input--disabled {
   .wt-tags-input__tags-input {
     width: 100%;
@@ -202,7 +184,8 @@ export default {
   }
 }
 
-.wt-tags-input .multiselect ::v-deep {
+// paddings recalc
+.wt-tags-input .multiselect :deep {
   .multiselect__tags {
     padding-bottom: 0;
     padding-right: calc(

package/src/components/wt-textarea/wt-textarea.vue

@@ -162,18 +162,6 @@ export default {
   position: relative;
 }
 
-.wt-label {
-  .wt-textarea:hover &,
-  .wt-textarea:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-
-  .wt-textarea--invalid:hover &,
-  .wt-textarea--invalid:focus-within & {
-    color: var(--wt-label-error-color);
-  }
-}
-
 .wt-textarea__textarea {
   @extend %typo-body-1;
   @extend %wt-scrollbar;
@@ -186,27 +174,22 @@ export default {
   padding: var(--textarea-padding);
   resize: none;
   transition: var(--transition);
-  color: var(--form-input-color);
   border: var(--input-border);
-  border-color: var(--form-border-color);
+  border-color: var(--wt-text-field-input-border-color);
   border-radius: var(--border-radius);
 
-  &:focus {
-    @include wt-placeholder('focus');
-
-    border-color: var(--form-border--hover-color);
-  }
-
   .wt-textarea--disabled & {
     @include wt-placeholder('disabled');
 
-    border-color: var(--form-border--disabled-color);
-    background: var(--form-border--disabled-color);
+    border-color: var(--wt-text-field-input-border-disabled-color);
+    background: var(--wt-text-field-input-background-disabled-color);
   }
 
   .wt-textarea--invalid &,
   .wt-textarea--invalid:hover & {
-    border-color: var(--false-color);
+    @include wt-placeholder('error');
+    color: var(--wt-text-field-error-text-color);
+    border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
   }
 }

package/src/components/wt-time-input/wt-time-input.vue

@@ -2,7 +2,6 @@
   <div
     class="wt-time-input"
     :class="{
-      'wt-time-input--outline': outline,
       'wt-time-input--disabled': disabled,
       'wt-time-input--invalid': invalid,
     }"
@@ -10,8 +9,6 @@
     <wt-label
       v-if="hasLabel"
       v-bind="labelProps"
-      :for="name"
-      :outline="outline"
       :disabled="disabled"
       :invalid="invalid"
     >
@@ -25,7 +22,6 @@
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input
-        :id="name"
         class="wt-time-input__input"
         :value="value"
         :min="0"
@@ -65,13 +61,6 @@ export default {
       type: String,
       default: '',
     },
-    /**
-     * Form input name
-     */
-    name: {
-      type: String,
-      default: '',
-    },
     /**
      * Time type: day, minute, second
      */
@@ -94,22 +83,22 @@ export default {
       default: false,
       description: 'Native input disabled attribute',
     },
-
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
     },
-
     hideInputInfo: {
       type: Boolean,
       default: false,
     },
   },
+  emits: [
+    /**
+     * Emits on input value change
+     * @param {string} value
+     */
+    'input',
+  ],
   computed: {
     hasLabel() {
       return !!(this.label || this.$slots.label);
@@ -137,16 +126,6 @@ export default {
 
 .wt-label {
   text-align: center;
-
-  .wt-time-input:hover &,
-  .wt-time-input:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-
-  .wt-time-input--invalid:hover &,
-  .wt-time-input--invalid:focus-within & {
-    color: var(--wt-label-error-color);
-  }
 }
 
 .wt-time-input__input {
@@ -156,35 +135,23 @@ export default {
   width: 100%;
   box-sizing: border-box;
   padding: var(--input-padding);
-  color: var(--form-input-color);
   border: var(--input-border);
-  border-color: var(--form-border-color);
+  border-color: var(--wt-text-field-input-border-color);
   border-radius: var(--border-radius);
   transition: var(--transition);
 
-  .wt-time-input:hover &,
-  &:focus {
-    border-color: var(--form-border--hover-color);
-  }
-
-  .wt-time-input--outline & {
-    border-color: var(--form-outline-border-color);
-  }
-
-  .wt-time-input--outline:hover &,
-  .wt-time-input--outline &:focus {
-    border-color: var(--form-outline-border--hover-color);
-  }
-
-  .wt-time-input--disabled & {
-    background: var(--form-border--disabled-color);
-    border-color: var(--form-border--disabled-color);
-  }
-
   .wt-time-input--invalid &,
   .wt-time-input--invalid:hover & {
-    border-color: var(--false-color);
+    @include wt-placeholder('error');
+    color: var(--wt-text-field-error-text-color);
+    border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
   }
+
+  .wt-time-input--disabled & {
+    @include wt-placeholder('disabled');
+    border-color: var(--wt-text-field-input-border-disabled-color);
+    background: var(--wt-text-field-input-background-disabled-color);
+  }
 }
 </style>

package/src/components/wt-timepicker/wt-timepicker.vue

@@ -157,18 +157,6 @@ export default {
   flex-direction: column;
 }
 
-.wt-label {
-  .wt-timepicker:hover &,
-  .wt-timepicker:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-
-  .wt-timepicker--invalid:hover &,
-  .wt-timepicker--invalid:focus-within & {
-    color: var(--wt-label-error-color);
-  }
-}
-
 .wt-timepicker__wrapper {
   display: flex;
 }

package/src/components/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -17,14 +17,4 @@ describe('WtTooltip', () => {
     });
     expect(wrapper.find('.wt-tooltip').text()).toEqual(content);
   });
-
-  it('changed tooltip color, if prop is passed', () => {
-    const wrapper = shallowMount(WtTooltip, {
-      props: {
-        contrast: true,
-      },
-    });
-    expect(wrapper.find('.wt-tooltip').classes())
-      .toContain('wt-tooltip--contrast');
-  });
 });

package/src/components/wt-tooltip/_variables.scss

@@ -2,10 +2,8 @@
 :root {
   --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
 
-  --tooltip-light-text-color: var(--text-primary-color);
-  --tooltip-light-bg-color: var(--main-color);
-  --tooltip-dark-text-color: var(--text-contrast-color);
-  --tooltip-dark-bg-color: var(--contrast-color);
+  --wt-tooltip-text-color: var(--text-main-color);
+  --wt-tooltip-background-color: var(--dp-24-surface-color);
 
   --tooltip-elevation: var(--elevation-10);
 }

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :class="{
-      'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
     }"
     class="wt-tooltip"
@@ -43,10 +42,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  contrast: {
-    type: Boolean,
-    default: false,
-  },
   placement: {
     type: String,
     default: 'auto',
@@ -133,18 +128,11 @@ onMounted(() => {
   .wt-tooltip-floating {
     @extend %typo-body-2;
     padding: var(--spacing-2xs) var(--spacing-xs);
-    color: var(--contrast-color);
-    background: var(--main-color);
+    color: var(--wt-tooltip-text-color);
+    background: var(--wt-tooltip-background-color);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
   }
-
-  &--contrast {
-    .wt-tooltip-floating {
-      color: var(--main-color);
-      background: var(--contrast-color);
-    }
-  }
 }
 </style>