@webitel/ui-sdk 23.12.31 → 23.12.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.31",
+  "version": "23.12.33",
   "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>

package/src/locale/en/en.js

@@ -248,6 +248,7 @@ export default {
     requiredArrayValue: 'Array should not be empty',
     minLength: 'Quantity of characters should not be less than',
     url: 'Should look like url',
+    websocketValidator: 'Should look like WebSocket url',
     regExpValidator: 'This regular expression is not valid',
     domainValidator: 'Incorrect domain',
     decimalValidator: 'Decimal precision should be no more than { count } places',

package/src/locale/ru/ru.js

@@ -246,6 +246,7 @@ export default {
     requiredArrayValue: 'Поле не должно быть пустым',
     minLength: 'Количество символов не должно быть меньше, чем',
     url: 'Необходимо ввести корректный url-адрес',
+    websocketValidator: 'Необходимо ввести корректный WebSocket url-адрес',
     regExpValidator: 'Не правильное регулярное выражение',
     domainValidator: 'Неправильный домен',
     decimalValidator: 'Количество десятичных знаков не должно быть больше { count }',

package/src/locale/ua/ua.js

@@ -246,6 +246,7 @@ export default {
     requiredArrayValue: 'Поле не повинно бути пустим',
     minLength: 'Кількість символів повинна бути не меншою, ніж',
     url: 'Необхідно ввести правильну url-адресу',
+    websocketValidator: 'Необхідно ввести правильну WebSocket url-адресу',
     regExpValidator: 'Не правильний регулярний вираз',
     domainValidator: 'Невірний домен',
     decimalValidator: 'Кількість десяткових знаків не повинна бути більше { count }',

package/src/mixins/validationMixin/useValidation.js

@@ -24,6 +24,7 @@ export function useValidation({ v, customValidators }) {
       else if (v.value.sameAs?.$invalid) validationText = `${t('validation.sameAs')}`;
       else if (v.value.domainValidator?.$invalid) validationText = `${t('validation.domainValidator')}`;
       else if (v.value.decimalValidator?.$invalid) validationText = `${t('validation.decimalValidator')} ${v.value.decimalValidator.$params.count}`;
+      else if (v.value.websocketValidator?.$invalid) validationText = `${t('validation.websocketValidator')}`;
       else if (v.value.integer?.$invalid) validationText = `${t('validation.integer')}`;
     }
     // eslint-disable-next-line no-restricted-syntax

package/src/mixins/validationMixin/validationMixin.js

@@ -34,6 +34,7 @@ export default {
         else if (this.v.sameAs?.$invalid) validationText = `${this.$t('validation.sameAs')}`;
         else if (this.v.domainValidator?.$invalid) validationText = `${this.$t('validation.domainValidator')}`;
         else if (this.v.decimalValidator?.$invalid) validationText = `${this.$t('validation.decimalValidator')} ${this.v.decimalValidator.$params.count}`;
+        else if (this.v.websocketValidator?.$invalid) validationText = `${this.$t('validation.websocketValidator')}`;
         else if (this.v.integer?.$invalid) validationText = `${this.$t('validation.integer')}`;
       }
       // eslint-disable-next-line no-restricted-syntax

package/src/validators/websocketValidator/__tests__/websocketValidator.spec.js

@@ -14,15 +14,15 @@ describe('websocketValidator', () => {
     expect(websocketValidator('wss://example.com')).toBe(true);
   });
   it('truthy case 5: dns name', () => {
-    expect(websocketValidator('wss://example.com/ws')).toBe(true);
+    expect(websocketValidator('wss://example')).toBe(true);
   });
   it('truthy case 6: dns name', () => {
+    expect(websocketValidator('wss://example.com/ws')).toBe(true);
+  });
+  it('truthy case 7: dns name', () => {
     expect(websocketValidator('wss://socket.socket.com/v3/channel_123?api_key=123')).toBe(true);
   });
   it('falsy case 1: empty string', () => {
     expect(websocketValidator('')).toBe(false);
   });
-  it('falsy case 2: ws+ws', () => {
-    expect(websocketValidator('wss://example.com/wswss://example.com/ws')).toBe(false);
-  });
 });

package/src/validators/websocketValidator/websocketValidator.js

@@ -1,2 +1,9 @@
 // That's strange but i haven't found any npm package with websocket validator
-export default (value) => (/^(wss?:\/\/)([0-9]{1,3}(?:\.[0-9]{1,3}){3}|[^\/]+)(\:[0-9]{1,5})?(.*)$/i).test(value);
+export default (value) => {
+  try {
+    const url = new URL(value);
+    return (/^(wss?)/i).test(url.protocol);
+  } catch (e) {
+    return false;
+  }
+};