Skip to content

Commit 4f71d3e

Browse files
splincodesplincode
committed
feat(experimental): add tuiFile 
1 parent 011c91f commit 4f71d3e

18 files changed

Lines changed: 532 additions & 0 deletions

File tree

‎projects/demo/src/pages/app/app.routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,11 @@ export const ROUTES: Routes = [
482482
loadComponent: async () => import('../components/input-year'),
483483
title: 'InputYear',
484484
}),
485+
route({
486+
path: DemoRoute.File,
487+
loadComponent: async () => import('../components/file'),
488+
title: 'File',
489+
}),
485490
route({
486491
path: DemoRoute.ItemsWithMore,
487492
loadComponent: async () => import('../components/items-with-more'),

‎projects/demo/src/pages/app/demo-routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export const DemoRoute = {
9393
InputPhoneInternational: '/components/input-phone-international',
9494
InputPin: '/components/input-pin',
9595
InputYear: '/components/input-year',
96+
File: '/components/file',
9697
ItemsWithMore: '/components/items-with-more',
9798
Label: '/components/label',
9899
LineClamp: '/components/line-clamp',

‎projects/demo/src/pages/app/pages.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,12 @@ export const pages: DocRoutePages = [
465465
},
466466
],
467467
},
468+
{
469+
section: 'Components',
470+
title: 'File',
471+
keywords: 'File, uploader',
472+
route: DemoRoute.File,
473+
},
468474
{
469475
section: 'Components',
470476
title: 'ItemsWithMore',

‎projects/demo/src/pages/components/file/examples/1/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<h3>Image preview</h3>
2+
3+
@for (size of sizes; track $index) {
4+
<label [tuiFile]="size">
5+
<img
6+
alt=""
7+
src="assets/images/avatar.jpg"
8+
/>
9+
10+
<div tuiTitle>
11+
filename.png
12+
<div tuiSubtitle>30 Mb</div>
13+
</div>
14+
15+
<button
16+
appearance=""
17+
size="xs"
18+
tabindex="0"
19+
tuiButtonX
20+
>
21+
Close
22+
</button>
23+
</label>
24+
}
25+
26+
<h3>Icon preview</h3>
27+
28+
@for (size of sizes; track $index) {
29+
<label [tuiFile]="size">
30+
<tui-icon
31+
icon="@tui.image"
32+
[style.color]="'var(--tui-chart-categorical-16)'"
33+
/>
34+
35+
<div tuiTitle>
36+
filename.png
37+
<div tuiSubtitle>30 Mb</div>
38+
</div>
39+
40+
<button
41+
appearance=""
42+
size="xs"
43+
tabindex="0"
44+
tuiButtonX
45+
>
46+
Close
47+
</button>
48+
</label>
49+
}

‎projects/demo/src/pages/components/file/examples/1/index.less‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.5rem;
5+
align-items: flex-start;
6+
min-inline-size: 25rem;
7+
}
8+
9+
[tuiFile] {
10+
inline-size: 18.75rem;
11+
}

‎projects/demo/src/pages/components/file/examples/1/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component} from '@angular/core';
2+
import {changeDetection} from '@demo/emulate/change-detection';
3+
import {encapsulation} from '@demo/emulate/encapsulation';
4+
import {TuiButtonX, TuiIcon, TuiTitle} from '@taiga-ui/core';
5+
import {TuiFile} from '@taiga-ui/experimental';
6+
7+
@Component({
8+
imports: [TuiButtonX, TuiFile, TuiIcon, TuiTitle],
9+
templateUrl: './index.html',
10+
styleUrl: './index.less',
11+
encapsulation,
12+
changeDetection,
13+
})
14+
export default class Example {
15+
protected readonly sizes = ['l', 'm', 's'] as const;
16+
}

‎projects/demo/src/pages/components/file/examples/2/index.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<h3>Image preview</h3>
2+
3+
@for (size of sizes; track $index) {
4+
<label
5+
orientation="vertical"
6+
[tuiFile]="size"
7+
>
8+
<img
9+
alt=""
10+
src="assets/images/avatar.jpg"
11+
/>
12+
13+
<div tuiTitle>
14+
filename.png
15+
<div tuiSubtitle>30 Mb</div>
16+
</div>
17+
18+
<button
19+
appearance="glass"
20+
size="xs"
21+
tabindex="0"
22+
tuiButtonX
23+
>
24+
Close
25+
</button>
26+
</label>
27+
}
28+
29+
<h3>Icon preview</h3>
30+
31+
@for (size of sizes; track $index) {
32+
<label
33+
orientation="vertical"
34+
[tuiFile]="size"
35+
>
36+
<tui-icon
37+
icon="@tui.image"
38+
[style.color]="'var(--tui-chart-categorical-16)'"
39+
/>
40+
41+
<div tuiTitle>
42+
filename.png
43+
<div tuiSubtitle>30 Mb</div>
44+
</div>
45+
46+
<button
47+
appearance="glass"
48+
size="xs"
49+
tabindex="0"
50+
tuiButtonX
51+
>
52+
Close
53+
</button>
54+
</label>
55+
}
56+
57+
<label
58+
orientation="vertical"
59+
tuiFile
60+
>
61+
<label tuiProgressLabel>
62+
<tui-progress-circle
63+
size="xxs"
64+
[max]="100"
65+
[style.--tui-thickness]="'0.175rem'"
66+
[value]="60"
67+
/>
68+
69+
<button
70+
appearance=""
71+
iconStart="@tui.x"
72+
size="xs"
73+
tuiIconButton
74+
type="button"
75+
[style.border-radius.%]="100"
76+
[style.color]="'var(--tui-background-accent-1)'"
77+
>
78+
Cancel
79+
</button>
80+
</label>
81+
82+
<div tuiTitle>
83+
filename.png
84+
<div tuiSubtitle>30 Mb</div>
85+
</div>
86+
87+
<button
88+
appearance="glass"
89+
size="xs"
90+
tabindex="0"
91+
tuiButtonX
92+
>
93+
Close
94+
</button>
95+
</label>

‎projects/demo/src/pages/components/file/examples/2/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
}

‎projects/demo/src/pages/components/file/examples/2/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from '@angular/core';
2+
import {changeDetection} from '@demo/emulate/change-detection';
3+
import {encapsulation} from '@demo/emulate/encapsulation';
4+
import {TuiButton, TuiButtonX, TuiIcon, TuiTitle} from '@taiga-ui/core';
5+
import {TuiFile} from '@taiga-ui/experimental';
6+
import {TuiProgress} from '@taiga-ui/kit';
7+
8+
@Component({
9+
imports: [TuiButtonX, TuiFile, TuiIcon, TuiTitle, TuiProgress, TuiButton],
10+
templateUrl: './index.html',
11+
styleUrl: './index.less',
12+
encapsulation,
13+
changeDetection,
14+
})
15+
export default class Example {
16+
protected readonly sizes = ['l', 'm', 's'] as const;
17+
}

‎projects/demo/src/pages/components/file/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<tui-doc-page
2+
header="File"
3+
package="EXPERIMENTAL"
4+
type="components"
5+
>
6+
<ng-template pageTab>
7+
@for (example of examples; track example) {
8+
<tui-doc-example
9+
[component]="$index + 1 | tuiComponent"
10+
[content]="$index + 1 | tuiExample"
11+
[heading]="example"
12+
/>
13+
}
14+
</ng-template>
15+
</tui-doc-page>

0 commit comments

Comments
 (0)