23.12.51: fixed text-fields colors [WTEL-3902]

webitel · Nov 29, 2023 · c7128d9 · c7128d9
1 parent 9fe3f46
commit c7128d9
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.50-2",
+  "version": "23.12.51",
   "private": false,
   "scripts": {
     "dev": "vite",

diff --git a/src/components/wt-search-bar/wt-search-bar.vue b/src/components/wt-search-bar/wt-search-bar.vue
@@ -163,7 +163,7 @@ function handleKeyup(event) {
     width: 100%;
     padding: 0;
     transition: var(--transition);
-    color: var(--wt-text-field-placeholder-color);
+    color: var(--wt-text-field-text-color);
     border: none;
     outline: none;
   }

diff --git a/src/components/wt-select/_multiselect.scss b/src/components/wt-select/_multiselect.scss
@@ -52,7 +52,7 @@
 
   .multiselect__custom-tag,
   .multiselect__single-label {
-    color: var(--wt-text-field-placeholder-color);
+    color: var(--wt-text-field-text-color);
   }
 
   .multiselect__placeholder {

diff --git a/src/css/styleguide/colors/reusable/_text-field.scss b/src/css/styleguide/colors/reusable/_text-field.scss
@@ -6,9 +6,12 @@
   --wt-helper-text-color: var(--text-main-color);
   --wt-helper-text-disabled-color: var(--text-disabled-color);
 
+  // text
+  --wt-text-field-text-color: var(--black);
+
   // placeholder
   --wt-text-field-error-text-color: var(--error-color);
-  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-color: var(--grey-lighten-1);
   --wt-text-field-placeholder-error-color: var(--error-color);
   --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
 
@@ -32,5 +35,8 @@
 }
 
 :root.theme--dark {
+  // text
+  --wt-text-field-text-color: var(--white);
+
   --wt-text-field-input-border-color: var(--grey-lighten-1);
 }
diff --git a/src/mixins/validationMixin/useValidation.js b/src/mixins/validationMixin/useValidation.js
@@ -14,8 +14,6 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
   }
   // end
 
-  console.info(v, inputV, isRef(v), isReactive(inputV));
-
   const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
   const invalid = computed(() => isValidation.value && v.value.$error);
 
@@ -40,11 +38,14 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
       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
-    for (const { name, text } of customValidators.value) {
-      if (v.value[name]?.$invalid) validationText = text;
+
+    if (customValidators && customValidators.value) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const { name, text } of customValidators.value) {
+        if (v.value[name]?.$invalid) validationText = text;
+      }
+      return validationText;
     }
-    return validationText;
   });
 
   return {