@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -1,11 +1,11 @@
 <template>
   <div class="wt-table-column-select">
     <wt-tooltip>
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="column-select"
           @click="openPopup"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableColumnSelect.title') }}
     </wt-tooltip>
@@ -14,18 +14,18 @@
       class="wt-table-column-select__popup"
       @close="close"
     >
-      <template v-slot:title>
+      <template #title>
         {{ $t('webitelUI.tableColumnSelect.title') }}
       </template>
-      <template v-slot:main>
+      <template #main>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
             class="wt-table-column-select__popup-list"
             :class="{
-            'wt-table-column-select__popup-list--md':
-            changeableDraft.length > 10 && changeableDraft.length <= 20,
-            'wt-table-column-select__popup-list--lg':
-            changeableDraft.length > 20
+              'wt-table-column-select__popup-list--md':
+                changeableDraft.length > 10 && changeableDraft.length <= 20,
+              'wt-table-column-select__popup-list--lg':
+                changeableDraft.length > 20
             }"
           >
             <li
@@ -35,22 +35,25 @@
               @click.capture.prevent="column.show = !column.show"
             >
               <wt-checkbox
-                v-model="column.show"
+                :selected="column.show"
                 :label="shownColLabel(column)"
-              ></wt-checkbox>
+                @change="column.show = $event"
+              />
             </li>
           </ul>
         </div>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <wt-button
           @click="setShownColumns"
-        >{{ $t('reusable.add') }}
+        >
+          {{ $t('reusable.add') }}
         </wt-button>
         <wt-button
           color="secondary"
           @click="close"
-        >{{ $t('reusable.cancel') }}
+        >
+          {{ $t('reusable.cancel') }}
         </wt-button>
       </template>
     </wt-popup>
@@ -61,7 +64,12 @@
 import deepCopy from 'deep-copy';
 
 export default {
-  name: 'wt-table-column-select',
+  name: 'WtTableColumnSelect',
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
   props: {
     headers: {
       type: Array,
@@ -74,24 +82,13 @@ export default {
       description: 'Header values to exclude from selection',
     },
   },
-
-  model: {
-    prop: 'headers',
-    event: 'change',
-  },
-
+  emits: [
+    'change',
+  ],
   data: () => ({
     draft: [], // headers draft
     isColumnSelectPopup: false,
   }),
-
-  watch: {
-    isColumnSelectPopup: {
-      handler() {
-        this.fillHeadersDraft();
-      },
-    },
-  },
   computed: {
     changeableDraft() {
       return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
@@ -100,6 +97,14 @@ export default {
       });
     },
   },
+
+  watch: {
+    isColumnSelectPopup: {
+      handler() {
+        this.fillHeadersDraft();
+      },
+    },
+  },
   methods: {
     shownColLabel({ text, locale }) {
       if (!text && locale) {

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(--accent-color);
+  --wt-tabs-underline-active-color: var(--primary-color);
   --tab-z-index: 1;
 }

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

@@ -26,14 +26,19 @@
           transform: `translateX(${activeLineOffset}px)`
         }"
         class="wt-tab__underline--highlight"
-      ></div>
+      />
     </div>
   </nav>
 </template>
 
 <script>
 export default {
-  name: 'wt-tabs',
+  name: 'WtTabs',
+
+  model: {
+    prop: 'current',
+    event: 'change',
+  },
   props: {
     current: {
       type: Object,
@@ -44,12 +49,9 @@ export default {
       default: () => [],
     },
   },
-
-  model: {
-    prop: 'current',
-    event: 'change',
-  },
-
+  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

@@ -8,8 +8,8 @@
     class="wt-tags-input"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
+      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-tags-input__label"
@@ -18,7 +18,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ requiredLabel }}</slot>
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
 
     <vue-multiselect
@@ -38,21 +40,21 @@
       multiple
       v-on="listeners"
     >
-
       <!--      Slot that is used for all selected options (tags)-->
-      <template v-slot:tag="{ option, remove }">
+      <template #tag="{ option, remove }">
         <wt-chip class="multiselect__custom-tag">
           {{ getTagOptionLabel({ option, optionLabel }) }}
           <wt-icon-btn
             icon="close--filled"
             size="sm"
+            color="on-primary"
             @click="remove(option)"
-          ></wt-icon-btn>
+          />
         </wt-chip>
       </template>
 
       <!--      Slot for custom option template -->
-      <template v-slot:option="{ option }">
+      <template #option="{ option }">
         <slot
           v-bind="{ option, optionLabel }"
           name="option"
@@ -62,7 +64,7 @@
       </template>
 
       <!--      Element for opening and closing the dropdown -->
-      <template v-slot:caret="{ toggle }">
+      <template #caret="{ toggle }">
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
           :disabled="disabled"
@@ -70,24 +72,31 @@
           color="active"
           icon="arrow-down"
           @mousedown.prevent.stop="toggle"
-        ></wt-icon-btn>
+        />
       </template>
 
-      <template v-slot:beforeList>
-        <div v-show="isLoading" class="multiselect__loading-wrapper">
-          <wt-loader size="sm"></wt-loader>
+      <template #beforeList>
+        <div
+          v-show="isLoading"
+          class="multiselect__loading-wrapper"
+        >
+          <wt-loader size="sm" />
         </div>
       </template>
 
-      <template v-if="showIntersectionObserver" v-slot:afterList>
-        <div v-observe-visibility="handleAfterListIntersect"></div>
+      <template
+        v-if="showIntersectionObserver"
+        #afterList
+      >
+        <div v-observe-visibility="handleAfterListIntersect" />
       </template>
     </vue-multiselect>
 
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -96,7 +105,7 @@
 import multiselectMixin from '../wt-select/mixins/multiselectMixin';
 
 export default {
-  name: 'wt-tags-input',
+  name: 'WtTagsInput',
   mixins: [multiselectMixin],
   props: {
     value: {
@@ -161,10 +170,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import './variables.scss';
-</style>
-
 <style lang="scss" scoped>
 @import '../wt-select/multiselect.scss';
 
@@ -172,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%;
@@ -194,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

@@ -1,49 +1,55 @@
 <template>
   <div
-    class="wt-textarea"
     :class="{
       'wt-textarea--disabled': disabled,
       'wt-textarea--invalid': invalid,
     }"
+    class="wt-textarea"
   >
     <wt-label
-      v-bind="labelProps"
-      :for="name"
       :disabled="disabled"
+      :for="name"
       :invalid="invalid"
+      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label }"
         name="label"
-      >{{ requiredLabel }}</slot>
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea
         :id="name"
         ref="wt-textarea"
-        class="wt-textarea__textarea"
-        :value="value"
-        :placeholder="placeholder || label"
         :disabled="disabled"
+        :placeholder="placeholder || label"
+        :value="value"
+        class="wt-textarea__textarea"
         v-on="listeners"
-      ></textarea>
-      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
-        <slot name="after-input"></slot>
+      />
+      <div
+        ref="after-wrapper"
+        class="wt-textarea__after-wrapper"
+      >
+        <slot name="after-input" />
         <wt-icon-btn
-          class="wt-textarea__reset-icon-btn"
           :class="{ 'hidden': !value }"
+          :disabled="disabled"
+          class="wt-textarea__reset-icon-btn"
           icon="close--filled"
           size="sm"
-          :disabled="disabled"
           @click="$emit('input', '')"
-        ></wt-icon-btn>
+        />
       </div>
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -52,7 +58,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'wt-textarea',
+  name: 'WtTextarea',
   mixins: [validationMixin],
   props: {
     /**
@@ -113,6 +119,9 @@ export default {
       return this.required ? `${this.label}*` : this.label;
     },
   },
+  mounted() {
+    this.updateInputPaddings();
+  },
 
   methods: {
     handleKeypress(event) {
@@ -132,9 +141,6 @@ export default {
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
   },
-  mounted() {
-    this.updateInputPaddings();
-  },
 };
 </script>
 
@@ -156,68 +162,45 @@ 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(--label--invalid-color);
-  }
-}
-
 .wt-textarea__textarea {
   @extend %typo-body-1;
   @extend %wt-scrollbar;
   @include wt-placeholder;
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   min-height: var(--textarea-min-height);
-  box-sizing: border-box;
   padding: var(--textarea-padding);
-  color: var(--form-input-color);
+  resize: none;
+  transition: var(--transition);
   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);
-  resize: none;
-
-  &:focus {
-    @include wt-placeholder('focus');
-
-    border-color: var(--form-border--hover-color);
-  }
 
   .wt-textarea--disabled & {
     @include wt-placeholder('disabled');
 
-    background: var(--form-border--disabled-color);
-    border-color: 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
   }
 }
 
-/* make icons black */
-.wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
-.wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
-  fill: var(--icon-color--hover);
-}
-
 .wt-textarea__after-wrapper {
-  display: flex;
-  gap: var(--input-after-wrapper-gap);
-  align-items: center;
   position: absolute;
   top: var(--input-icon-margin);
   right: var(--input-icon-margin);
+  display: flex;
+  align-items: center;
   pointer-events: auto; // override --disabled p-events none
+  gap: var(--input-after-wrapper-gap);
 }
 </style>

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

@@ -2,16 +2,13 @@
   <div
     class="wt-time-input"
     :class="{
-      'wt-time-input--outline': outline,
       'wt-time-input--disabled': disabled,
       'wt-time-input--invalid': invalid,
     }"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
-      :for="name"
-      :outline="outline"
+      v-bind="labelProps"
       :disabled="disabled"
       :invalid="invalid"
     >
@@ -19,11 +16,12 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ label }}</slot>
+      >
+        {{ label }}
+      </slot>
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input
-        :id="name"
         class="wt-time-input__input"
         :value="value"
         :min="0"
@@ -36,7 +34,8 @@
     <wt-input-info
       v-if="showInfo"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -45,7 +44,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'wt-time-input',
+  name: 'WtTimeInput',
   mixins: [validationMixin],
   props: {
     /**
@@ -62,13 +61,6 @@ export default {
       type: String,
       default: '',
     },
-    /**
-     * Form input name
-     */
-    name: {
-      type: String,
-      default: '',
-    },
     /**
      * Time type: day, minute, second
      */
@@ -91,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);
@@ -134,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(--label--invalid-color);
-  }
 }
 
 .wt-time-input__input {
@@ -153,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>