feat(experimental): SwipeActions add new component (#6526)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Jan 31, 2024 · 63792e7 · 63792e7
1 parent a803d64
commit 63792e7
Show file tree

Hide file tree

Showing 35 changed files with 834 additions and 15 deletions.
diff --git a/projects/addon-doc/components/internal/header/header.component.ts b/projects/addon-doc/components/internal/header/header.component.ts
@@ -6,10 +6,10 @@ import {
     TUI_DOC_MENU_TEXT,
     TuiDocIcons,
 } from '@taiga-ui/addon-doc/tokens';
-import {ALWAYS_FALSE_HANDLER, TuiSwipeService} from '@taiga-ui/cdk';
+import {ALWAYS_FALSE_HANDLER} from '@taiga-ui/cdk';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {merge, Subject} from 'rxjs';
-import {distinctUntilChanged, filter, map, startWith} from 'rxjs/operators';
+import {distinctUntilChanged, map, startWith} from 'rxjs/operators';
 
 @Component({
     selector: 'header[tuiDocHeader]',
@@ -23,18 +23,13 @@ export class TuiDocHeaderComponent {
     readonly open$ = merge(
         this.router.events.pipe(map(ALWAYS_FALSE_HANDLER)),
         this.stream$,
-        this.swipes$.pipe(
-            filter(swipe => swipe.direction === 'left' || swipe.direction === 'right'),
-            map(swipe => swipe.direction === 'right'),
-        ),
     ).pipe(startWith(false), distinctUntilChanged());
 
     constructor(
         @Inject(TUI_DOC_ICONS) readonly icons: TuiDocIcons,
         @Inject(TUI_DOC_LOGO) readonly logo: PolymorpheusContent,
         @Inject(TUI_DOC_MENU_TEXT) readonly menu: string,
         @Inject(Router) private readonly router: Router,
-        @Inject(TuiSwipeService) private readonly swipes$: TuiSwipeService,
     ) {}
 
     onClick(): void {

diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
@@ -407,9 +407,7 @@
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {
-        background: transparent;
-        width: 0;
-        height: 0;
+        display: none;
     }
 }
 

diff --git a/projects/demo/src/modules/app/app.providers.ts b/projects/demo/src/modules/app/app.providers.ts
@@ -30,7 +30,6 @@ import {
     TUI_DIALOG_CLOSES_ON_BACK,
     TUI_IS_E2E,
     TUI_IS_PLAYWRIGHT,
-    TUI_SWIPE_OPTIONS,
     TUI_TAKE_ONLY_TRUSTED_EVENTS,
     tuiAssert,
 } from '@taiga-ui/cdk';
@@ -146,10 +145,6 @@ export const APP_PROVIDERS: Provider[] = [
         provide: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,
         useValue: exampleContentProcessor,
     },
-    {
-        provide: TUI_SWIPE_OPTIONS,
-        useValue: {timeout: 300, threshold: 60},
-    },
     {
         provide: TUI_HINT_OPTIONS,
         useFactory: () =>

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -427,6 +427,15 @@ export const ROUTES: Routes = [
             title: 'Surface',
         },
     },
+    {
+        path: 'experimental/swipe-actions',
+        loadChildren: async () =>
+            (await import('../experimental/swipe-action/swipe-actions.module'))
+                .ExampleTuiSwipeActionsModule,
+        data: {
+            title: 'SwipeActions',
+        },
+    },
     {
         path: 'experimental/thumbnail-card',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -979,6 +979,12 @@ export const pages: TuiDocPages = [
         keywords: 'card, container, wrapper, image, blur, overlay',
         route: '/experimental/surface',
     },
+    {
+        section: 'Experimental',
+        title: 'SwipeActions',
+        keywords: 'swipe, action, свайп, card, действие',
+        route: '/experimental/swipe-actions',
+    },
     {
         section: 'Experimental',
         title: 'Title',

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html
@@ -0,0 +1,101 @@
+<tui-swipe-actions>
+    <div tuiSurface="elevated">
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconDollarSignLarge"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+                <div tuiSubtitle>Dollar account</div>
+            </div>
+        </div>
+    </div>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
+
+<tui-swipe-actions>
+    <div tuiSurface="elevated">
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconGift"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Goal</div>
+            </div>
+        </div>
+    </div>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
+
+<tui-swipe-actions
+    [style.--tui-action-gap]="16"
+    [style.--tui-item-size]="32"
+>
+    <div tuiSurface="elevated">
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconBriefcase"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Vacations</div>
+            </div>
+        </div>
+    </div>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="destructive"
+        iconLeft="tuiIconTrash"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less
@@ -0,0 +1,19 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 20rem;
+    margin: 2rem 0;
+}
+
+[tuiSurface] {
+    margin: 1.5rem 1rem;
+}
+
+tui-swipe-actions {
+    margin: -1.5rem -1rem;
+}
+
+button[tuiSwipeAction] {
+    border-radius: 100%;
+}
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.ts b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-swipe-action-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSwipeActionExample1 {}
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.html
@@ -0,0 +1,34 @@
+<tui-swipe-actions [style.--tui-actions-padding.rem]="0.5">
+    <div
+        tuiMode="onDark"
+        tuiSurface
+        class="blur"
+    >
+        <tui-avatar src="/assets/images/avatar.jpg"></tui-avatar>
+        <h3 tuiTitle="m">Alex Inkin</h3>
+        <button
+            appearance="glass"
+            iconLeft="tuiIconMailLarge"
+            size="m"
+            tuiIconButton
+            class="button"
+        >
+            Message
+        </button>
+    </div>
+
+    <input
+        tuiSwipeAction
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="checkbox"
+    />
+    <button
+        appearance="destructive"
+        iconLeft="tuiIconTrash"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+        [style.borderRadius.%]="100"
+    ></button>
+</tui-swipe-actions>
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less
@@ -0,0 +1,17 @@
+:host {
+    width: 20rem;
+}
+
+.blur {
+    background-image: url('/assets/images/restaurant-2.jpg');
+    border-radius: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--tui-text-01-night);
+    z-index: 1;
+
+    &:before {
+        backdrop-filter: blur(1rem);
+    }
+}
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.ts b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-swipe-action-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSwipeActionExample2 {
+    checkbox = false;
+}
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/3/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/3/index.html
@@ -0,0 +1,69 @@
+<tui-swipe-actions [autoClose]="true">
+    <div tuiSurface="elevated">
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconDollarSignLarge"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+                <div tuiSubtitle>Dollar account</div>
+            </div>
+        </div>
+    </div>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
+
+<tui-swipe-actions [autoClose]="true">
+    <div tuiSurface="elevated">
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconGift"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Goal</div>
+            </div>
+        </div>
+    </div>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/3/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/3/index.less
@@ -0,0 +1,19 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 20rem;
+    margin: 1rem 0;
+}
+
+tui-swipe-actions {
+    margin: -1.5rem -1rem;
+}
+
+[tuiSurface] {
+    margin: 1.5rem 1rem;
+}
+
+button[tuiSwipeAction] {
+    border-radius: 100%;
+}
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/3/index.ts b/projects/demo/src/modules/experimental/swipe-action/examples/3/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-swipe-action-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSwipeActionExample3 {}