@webitel/ui-sdk 23.12.41 → 23.12.43

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,20 @@
       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"
             @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 +63,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 +71,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 +104,7 @@
 import multiselectMixin from '../wt-select/mixins/multiselectMixin';
 
 export default {
-  name: 'wt-tags-input',
+  name: 'WtTagsInput',
   mixins: [multiselectMixin],
   props: {
     value: {

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

@@ -16,7 +16,8 @@
       <slot
         name="label"
         v-bind="{ label }"
-      >{{ requiredLabel }}
+      >
+        {{ requiredLabel }}
       </slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
@@ -28,9 +29,12 @@
         :value="value"
         class="wt-textarea__textarea"
         v-on="listeners"
-      ></textarea>
-      <div ref="after-wrapper" class="wt-textarea__after-wrapper">
-        <slot name="after-input"></slot>
+      />
+      <div
+        ref="after-wrapper"
+        class="wt-textarea__after-wrapper"
+      >
+        <slot name="after-input" />
         <wt-icon-btn
           :class="{ 'hidden': !value }"
           :disabled="disabled"
@@ -38,13 +42,14 @@
           icon="close--filled"
           size="sm"
           @click="$emit('input', '')"
-        ></wt-icon-btn>
+        />
       </div>
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -53,7 +58,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'wt-textarea',
+  name: 'WtTextarea',
   mixins: [validationMixin],
   props: {
     /**
@@ -114,6 +119,9 @@ export default {
       return this.required ? `${this.label}*` : this.label;
     },
   },
+  mounted() {
+    this.updateInputPaddings();
+  },
 
   methods: {
     handleKeypress(event) {
@@ -133,9 +141,6 @@ export default {
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
   },
-  mounted() {
-    this.updateInputPaddings();
-  },
 };
 </script>
 
@@ -165,7 +170,7 @@ export default {
 
   .wt-textarea--invalid:hover &,
   .wt-textarea--invalid:focus-within & {
-    color: var(--label--invalid-color);
+    color: var(--wt-label-error-color);
   }
 }
 

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

@@ -8,8 +8,8 @@
     }"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
+      v-bind="labelProps"
       :for="name"
       :outline="outline"
       :disabled="disabled"
@@ -19,7 +19,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ label }}</slot>
+      >
+        {{ label }}
+      </slot>
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input
@@ -36,7 +38,8 @@
     <wt-input-info
       v-if="showInfo"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -45,7 +48,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'wt-time-input',
+  name: 'WtTimeInput',
   mixins: [validationMixin],
   props: {
     /**
@@ -142,7 +145,7 @@ export default {
 
   .wt-time-input--invalid:hover &,
   .wt-time-input--invalid:focus-within & {
-    color: var(--label--invalid-color);
+    color: var(--wt-label-error-color);
   }
 }
 

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

@@ -1,8 +1,11 @@
 <template>
-  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+  <div
+    class="wt-timepicker"
+    :class="{'wt-timepicker--invalid': invalid}"
+  >
     <wt-label
-      v-bind="labelProps"
       v-if="label"
+      v-bind="labelProps"
       :invalid="invalid"
     >
       {{ `${label} (${format})` }}
@@ -13,36 +16,37 @@
         :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
-        :maxValue="dateMode ? null : 23"
+        :max-value="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
         @input="hour = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isMin"
         :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
-        :maxValue="59"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="min = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isSec"
         :value="sec"
         :v="v"
-        :label="label ? null :  $t('webitelUI.timepicker.sec')"
-        :maxValue="59"
+        :label="label ? null : $t('webitelUI.timepicker.sec')"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="sec = $event"
-      ></wt-time-input>
+      />
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -54,8 +58,12 @@ const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
 export default {
-  name: 'wt-timepicker',
+  name: 'WtTimepicker',
   mixins: [validationMixin],
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
     value: {
       type: [String, Number],
@@ -82,10 +90,6 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
 
   computed: {
     isHour() {
@@ -161,7 +165,7 @@ export default {
 
   .wt-timepicker--invalid:hover &,
   .wt-timepicker--invalid:focus-within & {
-    color: var(--label--invalid-color);
+    color: var(--wt-label-error-color);
   }
 }
 

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

@@ -1,9 +1,9 @@
 <template>
   <aside
-    class="wt-tooltip-floating"
     ref="floating"
+    class="wt-tooltip-floating"
   >
-    <slot></slot>
+    <slot />
   </aside>
 </template>
 

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

@@ -3,27 +3,27 @@
     :class="{
       'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
-     }"
+    }"
     class="wt-tooltip"
   >
     <div
       ref="activator"
       class="wt-tooltip__activator"
     >
-      <slot name="activator"></slot>
+      <slot name="activator" />
     </div>
     <wt-tooltip-floating
       v-if="isVisible"
       ref="floating"
-      class="wt-tooltip__floating"
       v-clickaway="hideTooltip"
+      class="wt-tooltip__floating"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
       @show="showTooltip"
       @hide="hideTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }"></slot>
+      <slot v-bind="{ hide: hideTooltip }" />
     </wt-tooltip-floating>
   </div>
 </template>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -1,14 +1,14 @@
 import { useCachedInterval } from '../useCachedInterval';
 
 describe('useCachedInterval', () => {
-  it('subscribe', (done) => {
-    const callback = jest.fn();
+  it('subscribe', async () => {
+    const callback = vi.fn();
     const { subscribe } = useCachedInterval({ timeout: 10 });
     subscribe(callback);
     expect(callback).toHaveBeenCalledTimes(1);
-    setTimeout(() => {
+    return await new Promise((resolve, reject) => setTimeout(() => {
       expect(callback).toHaveBeenCalledTimes(2);
-      done();
-    }, 10);
+      resolve();
+    }, 10));
   });
 });

package/src/css/styleguide/colors/_colors.scss

@@ -1,5 +1,6 @@
 @import './deprecated';
 @import './palette';
+@import './reusable/text-field';
 
 :root {
   // dp colors
@@ -84,10 +85,10 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-darken-3);
-  --main-text-disabled-color: var(--grey-lighten-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-darken-3);
+  --text-disabled-color: var(--grey-lighten-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }
 
 :root.theme--dark {
@@ -173,8 +174,8 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-lighten-3);
-  --main-text-disabled-color: var(--grey-darken-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-lighten-3);
+  --text-disabled-color: var(--grey-darken-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -0,0 +1,20 @@
+// shared text field colors
+
+:root {
+  // TODO: move to separate helper-text component
+  --wt-helper-text-color: var(--text-main-color);
+  --wt-helper-text-disabled-color: var(--text-disabled-color);
+
+  --wt-text-field-error-text-color: var(--error-color);
+  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-error-color: var(--error-color);
+  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
+
+  --wt-text-field-input-border-color: var(--grey-darken-1);
+  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
+  --wt-text-field-input-border-error-color: var(--error-color);
+}
+
+:root.theme--dark {
+  --wt-text-field-input-border-color: var(--grey-lighten-1);
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -15,12 +15,12 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
       font: inherit;
       transition: var(--transition);
 
-      @if ($style == 'focus') {
-        color: var(--form-placeholder-color--focus);
+      @if ($style == 'error') {
+        color: var(--wt-text-field-placeholder-error-color);
       } @else if ($style == 'disabled') {
-        color: var(--form-placeholder-color--disabled);
+        color: var(--wt-text-field-placeholder-disabled-color);
       } @else {
-        color: var(--form-placeholder-color);
+        color: var(--wt-text-field-placeholder-color);
       }
 
       @content;
@@ -35,15 +35,10 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
 %wt-placeholder {
   font: inherit;
   transition: var(--transition);
-  color: var(--form-placeholder-color);
-}
-
-%wt-placeholder--focus {
-  @extend %wt-placeholder;
-  color: var(--form-placeholder-color--focus);
+  color: var(--wt-text-field-placeholder-color);
 }
 
 %wt-placeholder--disabled {
   @extend %wt-placeholder;
-  color: var(--form-placeholder-color--disabled);
+  color: var(--wt-text-field-placeholder-disabled-color);
 }

package/src/locale/i18n.js

@@ -14,7 +14,7 @@ const messages = {
 };
 
 // eslint-disable-next-line new-cap
-export default new createI18n({
+export default createI18n({
   // legacy: false,
   locale: 'en',
   allowComposition: true,