Merge c53e6cb into cdabcd1

taiga-family · Mar 23, 2021 · db55f73 · db55f73
2 parents cdabcd1 + c53e6cb
commit db55f73
Show file tree

Hide file tree

Showing 27 changed files with 607 additions and 83 deletions.
diff --git a/projects/addon-table/components/reorder/reorder.component.ts b/projects/addon-table/components/reorder/reorder.component.ts
@@ -1,15 +1,23 @@
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
-import {Component, EventEmitter, Inject, Input, Output} from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    HostListener,
+    Inject,
+    Input,
+    Output,
+} from '@angular/core';
 import {TUI_TABLE_SHOW_HIDE_MESSAGE} from '@taiga-ui/addon-table/tokens';
 import {tuiDefaultProp} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
 
+// @bad TODO: a11y
 @Component({
     selector: 'tui-reorder',
     templateUrl: './reorder.template.html',
     styleUrls: ['./reorder.style.less'],
 })
-export class TuiReorderComponent<T = string> {
+export class TuiReorderComponent<T> {
     @Input()
     @tuiDefaultProp()
     items: readonly T[] = [];
@@ -28,12 +36,15 @@ export class TuiReorderComponent<T = string> {
         @Inject(TUI_TABLE_SHOW_HIDE_MESSAGE) readonly showHideText$: Observable<string>,
     ) {}
 
+    @HostListener('focusout.stop')
+    noop() {}
+
     isEnabled(item: T): boolean {
         return this.enabled.indexOf(item) !== -1;
     }
 
     getIcon(item: T): string {
-        return this.isEnabled(item) ? 'tuiIconEyeClosed' : 'tuiIconEyeOpen';
+        return this.isEnabled(item) ? 'tuiIconEyeOpen' : 'tuiIconEyeClosed';
     }
 
     toggle(toggled: T) {

diff --git a/projects/addon-table/components/reorder/reorder.module.ts b/projects/addon-table/components/reorder/reorder.module.ts
@@ -1,11 +1,18 @@
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {TuiPreventDefaultModule} from '@taiga-ui/cdk';
 import {TuiButtonModule, TuiSvgModule} from '@taiga-ui/core';
 import {TuiReorderComponent} from './reorder.component';
 
 @NgModule({
-    imports: [CommonModule, DragDropModule, TuiSvgModule, TuiButtonModule],
+    imports: [
+        CommonModule,
+        DragDropModule,
+        TuiSvgModule,
+        TuiButtonModule,
+        TuiPreventDefaultModule,
+    ],
     declarations: [TuiReorderComponent],
     exports: [TuiReorderComponent],
 })

diff --git a/projects/addon-table/components/reorder/reorder.style.less b/projects/addon-table/components/reorder/reorder.style.less
@@ -14,6 +14,7 @@
     padding: 0 12px;
     cursor: ns-resize;
     background: var(--tui-base-01);
+    outline: none;
 
     &:hover {
         background: var(--tui-base-02);
@@ -22,6 +23,10 @@
             opacity: 1;
         }
     }
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
 }
 
 .icon {
@@ -33,6 +38,10 @@
     .transition(opacity);
     margin-left: auto;
     opacity: 0;
+
+    &_hidden {
+        opacity: 1;
+    }
 }
 
 .cdk-drag-placeholder {

diff --git a/projects/addon-table/components/reorder/reorder.template.html b/projects/addon-table/components/reorder/reorder.template.html
@@ -1,13 +1,15 @@
 <div cdkDropList class="wrapper" (cdkDropListDropped)="drop($event)">
-    <div *ngFor="let item of items" class="item" cdkDrag>
+    <div *ngFor="let item of items" class="item" tabindex="-1" cdkDrag>
         <tui-svg src="tuiIconDrag" class="icon"></tui-svg>
         {{item}}
         <button
             type="button"
             tuiIconButton
             appearance="icon"
-            class="button"
             size="xs"
+            tuiPreventDefault="mousedown"
+            class="button"
+            [class.button_hidden]="!isEnabled(item)"
             [title]="showHideText$ | async"
             [icon]="getIcon(item)"
             (click)="toggle(item)"

diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts
@@ -21,6 +21,7 @@ import {TUI_TABLE_PROVIDERS} from '../providers/table.providers';
     host: {
         '($.data-mode.attr)': 'mode$',
         '($.class._stuck)': 'stuck$',
+        style: 'border-collapse: separate',
     },
 })
 export class TuiTableDirective<T> extends TuiController {
@@ -35,7 +36,7 @@ export class TuiTableDirective<T> extends TuiController {
 
     @Input()
     @tuiDefaultProp()
-    sorter: TuiComparator<T> | null = null;
+    sorter: TuiComparator<T> = () => 0;
 
     @Input()
     @tuiDefaultProp()

diff --git a/projects/addon-table/components/table/tbody/tbody.component.ts b/projects/addon-table/components/table/tbody/tbody.component.ts
@@ -66,9 +66,9 @@ export class TuiTbodyComponent<T> {
     @tuiPure
     private sort(
         data: readonly T[],
-        sorter: TuiComparator<T> | null,
+        sorter: TuiComparator<T>,
         direction: -1 | 1,
     ): readonly T[] {
-        return sorter ? [...data].sort((a, b) => direction * sorter(a, b)) : data;
+        return [...data].sort((a, b) => direction * sorter(a, b));
     }
 }
diff --git a/projects/addon-table/components/table/tbody/tbody.style.less b/projects/addon-table/components/table/tbody/tbody.style.less
@@ -47,6 +47,7 @@
     font: var(--tui-font-text-s);
     padding: 0;
     background: var(--tui-base-02);
+    border-bottom: 1px solid var(--tui-base-04);
     border-color: inherit;
 
     :host-context(table[data-tui-host-size='l']) & {
@@ -75,22 +76,3 @@
         transform: rotate(180deg);
     }
 }
-
-.footer {
-    td {
-        position: sticky;
-        bottom: 0;
-        padding: 0;
-        z-index: 15;
-        border: inherit;
-
-        &:after {
-            position: absolute;
-            content: '';
-            width: 100%;
-            bottom: 0;
-            border-top: 1px solid;
-            border-color: inherit;
-        }
-    }
-}
diff --git a/projects/addon-table/components/table/tbody/tbody.template.html b/projects/addon-table/components/table/tbody/tbody.template.html
@@ -4,7 +4,7 @@
         <button class="expand" type="button" (click)="onClick()">
             <span polymorpheus-outlet class="name" [content]="heading"></span>
             <tui-svg
-                src="tuiIconChevronUpLarge"
+                src="tuiIconChevronDownLarge"
                 class="chevron"
                 [class.chevron_rotated]="open"
             ></tui-svg>
@@ -18,6 +18,3 @@
         [ngTemplateOutletContext]="item | tuiMapper : toContext : index"
     ></ng-container>
 </ng-container>
-<tr class="footer">
-    <td [colSpan]="table.columns.length"></td>
-</tr>
diff --git a/projects/addon-table/components/table/td/td.style.less b/projects/addon-table/components/table/td/td.style.less
@@ -7,34 +7,19 @@
     text-align: left;
     padding: 0 12px;
     background: var(--tui-base-01);
-    border-color: var(--tui-base-04);
+    border: 1px solid var(--tui-base-04);
+    border-top: none;
 
-    &:before {
-        .fullsize(absolute, inset);
-        top: -1px;
-        left: -1px;
-        content: '';
-        box-sizing: border-box;
-        pointer-events: none;
-        border: 1px solid;
-        border-color: inherit;
-    }
-
-    &:first-child,
-    &:first-child:before {
+    &:first-child {
         left: 0;
     }
 
     &:not(:first-child) {
-        border-left: 1px solid transparent;
+        border-left: none;
     }
 
     &._editable:focus-within {
         z-index: 1;
-
-        &:before {
-            border: 0;
-        }
     }
 
     &._editable {
@@ -97,5 +82,5 @@
 }
 
 .wrapper {
-    margin: -1px 0 0 -1px;
+    margin: -1px -1px -1px 0;
 }
diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts
@@ -30,7 +30,9 @@ import {TuiTableDirective} from '../directives/table.directive';
 export class TuiThComponent<T> {
     @Input()
     @tuiDefaultProp()
-    sorter: TuiComparator<T> | null = (a, b) => defaultSort(a[this.key], b[this.key]);
+    sorter: TuiComparator<T> | null = this.head
+        ? (a, b) => defaultSort(a[this.key], b[this.key])
+        : null;
 
     @Input()
     @tuiDefaultProp()
@@ -45,7 +47,9 @@ export class TuiThComponent<T> {
     width: number | null = null;
 
     constructor(
-        @Optional() @Inject(TuiHeadDirective) readonly head: TuiHeadDirective<T> | null,
+        @Optional()
+        @Inject(TuiHeadDirective)
+        private readonly head: TuiHeadDirective<T> | null,
         @Optional()
         @Inject(forwardRef(() => TuiTableDirective))
         readonly table: TuiTableDirective<T> | null,

diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less
@@ -15,20 +15,14 @@
     padding: 0 12px;
     box-sizing: border-box;
     box-shadow: 0 5px rgba(237, 237, 237, 0);
-    border-color: var(--tui-base-04);
-
-    &:before {
-        .fullsize(absolute, inset);
-        left: 0;
-        bottom: -1px;
-        content: '';
-        box-sizing: border-box;
-        pointer-events: none;
-        border: 1px solid;
-        border-color: inherit;
+    border: 1px solid var(--tui-base-04);
+
+    &:not(:first-child) {
+        border-left: none;
     }
 
     &._sticky {
+        position: sticky;
         z-index: 30;
 
         &:first-child {
@@ -39,7 +33,7 @@
             .transition(opacity);
             content: '';
             position: absolute;
-            top: 1px;
+            top: 0;
             left: 100%;
             bottom: 0;
             width: 5px;
@@ -50,6 +44,10 @@
     }
 }
 
+:host-context(tr:not(:first-child)) {
+    border-top: none;
+}
+
 :host-context(table[data-tui-host-size='l']) {
     height: var(--tui-height-l);
     font: var(--tui-font-text-m);

diff --git a/projects/addon-table/components/table/th/th.template.html b/projects/addon-table/components/table/th/th.template.html
@@ -1,5 +1,5 @@
 <button
-    *ngIf="head && sorter && table else content"
+    *ngIf="sorter && table else content"
     type="button"
     class="sort"
     [class.sort_sorted]="isCurrent"

diff --git a/projects/cdk/constants/matcher.ts b/projects/cdk/constants/matcher.ts
@@ -11,7 +11,7 @@ export const TUI_DEFAULT_MATCHER = <T>(
     item: T,
     search: string,
     stringify: TuiHandler<T, string> = TUI_DEFAULT_STRINGIFY,
-) => stringify(item).toLowerCase().includes(search.toLowerCase());
+) => !!search && stringify(item).toLowerCase().includes(search.toLowerCase());
 
 /**
  * Default handler for strict matching stringified version of an item and a search query

diff --git a/projects/cdk/directives/active-zone/active-zone.directive.ts b/projects/cdk/directives/active-zone/active-zone.directive.ts
@@ -85,7 +85,7 @@ export class TuiActiveZoneDirective implements OnDestroy {
                         !skipNextFocusOut &&
                         this.contains(actualTarget) &&
                         !isNativeFocused(actualTarget) &&
-                        (event.relatedTarget === null ||
+                        (!event.relatedTarget ||
                             !this.contains(event.relatedTarget as Node))
                     );
                 }),
@@ -95,7 +95,11 @@ export class TuiActiveZoneDirective implements OnDestroy {
                 map(event => this.contains(getActualTarget(event))),
             ),
             typedFromEvent(windowRef, 'mousedown').pipe(
-                filter(event => !isNativeFocused(getActualTarget(event))),
+                filter(
+                    event =>
+                        documentRef.body === event.target ||
+                        !isNativeFocused(getActualTarget(event)),
+                ),
                 switchMap(event => {
                     const actualTarget = getActualTarget(event);
                     const targetInZone = this.contains(actualTarget);
@@ -116,10 +120,9 @@ export class TuiActiveZoneDirective implements OnDestroy {
                     // If mouseDown happened inside the zone and focus is outside we
                     // return true if target is not focusable or wait for focusIn
                     if (targetInZone && !focusInZone && actualTarget instanceof Element) {
-                        // TODO: Remove generic after TypeScript uprade
                         return !isNativeMouseFocusable(actualTarget)
                             ? of(true)
-                            : typedFromEvent<FocusEvent>(windowRef, 'focusin').pipe(
+                            : typedFromEvent(windowRef, 'focusin').pipe(
                                   take(1),
                                   mapTo(targetInZone),
                               );

diff --git a/projects/core/components/data-list/option/option.style.less b/projects/core/components/data-list/option/option.style.less
@@ -30,6 +30,10 @@
         background-color: var(--tui-base-02);
     }
 
+    &::-moz-focus-inner {
+        border: 0;
+    }
+
     &[data-size='xs'] {
         font: var(--tui-font-text-s);
         min-height: 32px + 16px;

diff --git a/projects/demo/src/modules/app/home/examples/app-module.txt b/projects/demo/src/modules/app/home/examples/app-module.txt
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {TuiRootModule} from '@taiga-ui/core';
-import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 
 @NgModule({
@@ -10,8 +10,9 @@ import {AppComponent} from './app.component';
     ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         TuiRootModule,
-        AppRoutingModule,
+        // ...
     ],
     bootstrap: [AppComponent],
 })

diff --git a/projects/demo/src/modules/tables/table/examples/3/index.html b/projects/demo/src/modules/tables/table/examples/3/index.html
@@ -37,7 +37,9 @@
                 </th>
             </tr>
             <tr tuiThGroup>
-                <th *tuiHead="'quantity'" tuiTh class="number">Quantity</th>
+                <th *tuiHead="'quantity'" tuiTh class="number border">
+                    Quantity
+                </th>
                 <th *tuiHead="'unit'" tuiTh>Units</th>
             </tr>
         </thead>