refactor(core): Appearance switch to signals and data-mode

Signed-off-by: waterplea <alexander@inkin.ru>
taiga-family · Jun 6, 2024 · 4ae59cf · 4ae59cf
1 parent 8dee38b
commit 4ae59cf
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/projects/cdk/classes/signal-control.ts b/projects/cdk/classes/signal-control.ts
@@ -64,7 +64,7 @@ export abstract class TuiControl<T> implements ControlValueAccessor {
 
     public readonly mode = computed(() =>
         // eslint-disable-next-line no-nested-ternary
-        this.readOnly() ? 'readonly' : this.invalid() ? 'invalid' : null,
+        this.readOnly() ? 'readonly' : this.invalid() ? 'invalid' : 'valid',
     );
 
     constructor() {

diff --git a/projects/cdk/directives/hovered/hovered.service.ts b/projects/cdk/directives/hovered/hovered.service.ts
@@ -1,8 +1,8 @@
 import type {Signal} from '@angular/core';
-import {inject, Injectable, NgZone} from '@angular/core';
+import {ChangeDetectorRef, inject, Injectable, NgZone} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER} from '@taiga-ui/cdk/constants';
-import {tuiTypedFromEvent, tuiZoneOptimized} from '@taiga-ui/cdk/observables';
+import {tuiTypedFromEvent, tuiWatch, tuiZoneOptimized} from '@taiga-ui/cdk/observables';
 import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import {tuiInjectElement, tuiIsElement} from '@taiga-ui/cdk/utils';
 import {distinctUntilChanged, filter, map, merge, Observable, of} from 'rxjs';
@@ -36,7 +36,12 @@ export class TuiHoveredService extends Observable<boolean> {
 }
 
 export function tuiHovered(): Signal<boolean> {
-    return toSignal(inject(TUI_IS_MOBILE) ? of(false) : inject(TuiHoveredService), {
-        initialValue: false,
-    });
+    return toSignal(
+        inject(TUI_IS_MOBILE)
+            ? of(false)
+            : inject(TuiHoveredService).pipe(tuiWatch(inject(ChangeDetectorRef))),
+        {
+            initialValue: false,
+        },
+    );
 }
diff --git a/projects/core/components/textfield/textfield.directive.ts b/projects/core/components/textfield/textfield.directive.ts
@@ -14,8 +14,7 @@ import {TUI_TEXTFIELD_OPTIONS} from './textfield.options';
         '[id]': 'el.id || id',
         '[readOnly]': 'readOnly',
         '[class._empty]': 'el.value === ""',
-        '[attr.data-mode]': 'readOnly ? "readonly" : null',
-        '[attr.data-invalid]': 'invalid',
+        '[attr.data-mode]': 'mode',
         '(input)': '0',
         '(focusin)': '0',
         '(focusout)': '0',
@@ -42,6 +41,22 @@ export class TuiTextfieldDirective implements DoCheck {
     @Input()
     public state: TuiInteractiveState | null = null;
 
+    public get mode(): string | null {
+        if (this.readOnly) {
+            return 'readonly';
+        }
+
+        if (this.invalid === false) {
+            return 'valid';
+        }
+
+        if (this.invalid) {
+            return 'invalid';
+        }
+
+        return null;
+    }
+
     public ngDoCheck(): void {
         this.appearance.tuiAppearance = this.options.appearance;
         this.appearance.tuiAppearanceFocus = this.focused ?? this.textfield.focused;

diff --git a/projects/core/components/textfield/textfield.style.less b/projects/core/components/textfield/textfield.style.less
@@ -177,8 +177,8 @@
                 transform: translateY(-0.7em);
             }
 
-            &:not(:disabled):not([data-mode='readonly'])[data-invalid='true'] ~ label,
-            &:invalid:not(:disabled):not([data-mode='readonly']):not([data-invalid='false']) ~ label {
+            &:not(:disabled)[data-mode='invalid'] ~ label,
+            &:invalid:not(:disabled):not([data-mode]) ~ label {
                 color: var(--tui-negative);
             }
 

diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -25,8 +25,8 @@
         box-shadow: none;
     });
 
-    &:valid[data-invalid='true'],
-    &:invalid:not([data-invalid='false']) {
+    &[data-mode='invalid'],
+    &:invalid:not([data-mode]) {
         outline-color: var(--tui-negative);
     }