@webitel/ui-sdk 23.12.32 → 23.12.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.32",
+  "version": "23.12.34",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

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

@@ -8,22 +8,22 @@
     class="wt-input"
   >
     <wt-label
-      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :for="name"
       :invalid="invalid"
       :outline="outline"
+      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-input__wrapper">
       <input
-        v-bind="$attrs"
         :id="name"
         ref="wt-input"
         :class="{
@@ -36,6 +36,7 @@
         :type="inputType"
         :value="inputValue"
         class="wt-input__input"
+        v-bind="$attrs"
         @input="inputHandler"
         @keyup="$emit('keyup', $event)"
       >
@@ -47,16 +48,16 @@
           name="after-input"
         ></slot>
         <slot
+          v-if="isPassword"
+          name="show-password"
           v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
-          v-if="isPassword"
-          name="show-password"
         >
           <wt-icon-btn
+            :disabled="disabled"
             :icon="showPasswordIcon"
-            class="wt-input__password-button"
             @click="switchVisibilityPassword"
           ></wt-icon-btn>
         </slot>
@@ -237,7 +238,7 @@ export default {
       const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
       const inputEl = this.$refs['wt-input'];
       const defaultInputPadding = getComputedStyle(document.documentElement)
-        .getPropertyValue('--input-padding');
+      .getPropertyValue('--input-padding');
       if (afterWrapperWidth >= inputEl.offsetWidth) return; // fixes https://my.webitel.com/browse/WTEL-2635
       inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
     },
@@ -328,16 +329,5 @@ export default {
   transform: translateY(-50%);
   pointer-events: auto; // override --disabled p-events none
   gap: var(--input-after-wrapper-gap);
-
-  .wt-input__password-button {
-    .wt-input--disabled & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color-disabled);
-    }
-
-    .wt-input:hover & ::v-deep .wt-icon__icon,
-    .wt-input:focus-within & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
-    }
-  }
 }
 </style>

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -29,9 +29,9 @@
       <div class="wt-search-bar__icon-controls">
         <wt-icon-btn
           :class="{ 'hidden': !value }"
+          :color="invalidColorProvider"
           class="wt-search-bar__reset-icon-btn"
           icon="close"
-          :color="invalidColorProvider"
           @click="handleInput('')"
         ></wt-icon-btn>
         <wt-hint
@@ -50,8 +50,8 @@
 
 <script setup>
 import { computed, toRefs } from 'vue';
-import debounce from '../../scripts/debounce';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import debounce from '../../scripts/debounce';
 
 const props = defineProps({
   v: {
@@ -94,9 +94,7 @@ const { v, customValidators } = toRefs(props);
 
 const { invalid } = useValidation({ v, customValidators });
 
-const invalidColorProvider = computed(() => {
-  return invalid.value ? 'error' : null;
-});
+const invalidColorProvider = computed(() => (invalid.value ? 'error' : 'default'));
 
 const search = debounce((value) => {
   emit('search', value);
@@ -132,18 +130,19 @@ function handleKeyup(event) {
       border-color: var(--false-color);
       outline: none; // prevent outline overlapping false color
     }
+
     .wt-search-bar__input {
       color: var(--false-color);
     }
   }
 
   .wt-search-bar__wrapper {
+    display: flex;
+    align-items: center;
+    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
     border: var(--input-border);
     border-color: var(--form-border-color);
     border-radius: var(--border-radius);
-    display: flex;
-    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
-    align-items: center;
     gap: var(--spacing-xs);
   }
 
@@ -186,12 +185,6 @@ function handleKeyup(event) {
     }
   }
 
-  /* make icons black */
-  .wt-search-bar:hover ::v-deep .wt-icon__icon,
-  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-
   /* clears the 'X' from Internet Explorer */
   .wt-search-bar__input::-ms-clear {
     display: none;

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

@@ -1,41 +1,42 @@
 <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">
+      <div ref="after-wrapper" class="wt-textarea__after-wrapper">
         <slot name="after-input"></slot>
         <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>
@@ -174,16 +175,16 @@ export default {
   @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);
+  resize: none;
+  transition: var(--transition);
   color: var(--form-input-color);
   border: var(--input-border);
   border-color: var(--form-border-color);
   border-radius: var(--border-radius);
-  transition: var(--transition);
-  resize: none;
 
   &:focus {
     @include wt-placeholder('focus');
@@ -194,8 +195,8 @@ export default {
   .wt-textarea--disabled & {
     @include wt-placeholder('disabled');
 
-    background: var(--form-border--disabled-color);
     border-color: var(--form-border--disabled-color);
+    background: var(--form-border--disabled-color);
   }
 
   .wt-textarea--invalid &,
@@ -205,19 +206,13 @@ export default {
   }
 }
 
-/* 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>