@xui/upload 2.0.0-alpha.11 → 2.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -156
- package/fesm2022/xui-upload.mjs +24 -62
- package/fesm2022/xui-upload.mjs.map +1 -1
- package/package.json +5 -2
- package/types/xui-upload.d.ts +14 -5
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
package/fesm2022/xui-upload.mjs
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, booleanAttribute, model, output, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
4
|
+
import { matUploadRound, matInsertDriveFileRound, matCloseRound, matArrowUpwardRound } from '@ng-icons/material-icons/round';
|
|
5
|
+
import { createXConfigToken, xui } from '@xui/core';
|
|
6
|
+
import { XuiIcon } from '@xui/icon';
|
|
7
|
+
|
|
8
|
+
const [injectXuiUploadConfig, provideXuiUploadConfig] = createXConfigToken('XuiUploadConfig', {
|
|
9
|
+
type: 'select'
|
|
10
|
+
});
|
|
4
11
|
|
|
5
12
|
/**
|
|
6
13
|
* A file upload with a button or drag-and-drop zone and a file list showing
|
|
@@ -13,9 +20,10 @@ import { xui } from '@xui/core';
|
|
|
13
20
|
* ```
|
|
14
21
|
*/
|
|
15
22
|
class XuiUpload {
|
|
23
|
+
config = injectXuiUploadConfig();
|
|
16
24
|
class = input('', /* @ts-ignore */
|
|
17
25
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
18
|
-
type = input(
|
|
26
|
+
type = input(this.config.type, /* @ts-ignore */
|
|
19
27
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
20
28
|
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
21
29
|
accept = input('', /* @ts-ignore */
|
|
@@ -88,9 +96,9 @@ class XuiUpload {
|
|
|
88
96
|
}
|
|
89
97
|
computedClass = computed(() => xui('block', this.class()), /* @ts-ignore */
|
|
90
98
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
91
|
-
buttonClass = computed(() => xui('border-border text-foreground hover:bg-surface-inset inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm disabled:opacity-50'
|
|
99
|
+
buttonClass = computed(() => xui('border-border text-foreground hover:bg-surface-inset inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm disabled:opacity-50'), /* @ts-ignore */
|
|
92
100
|
...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
|
|
93
|
-
dropzoneClass = computed(() => xui('cursor-pointer rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors',
|
|
101
|
+
dropzoneClass = computed(() => xui('cursor-pointer rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors', this.dragging() ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/60', this.disabled() && 'pointer-events-none opacity-50'), /* @ts-ignore */
|
|
94
102
|
...(ngDevMode ? [{ debugName: "dropzoneClass" }] : /* istanbul ignore next */ []));
|
|
95
103
|
fileRowClass(file) {
|
|
96
104
|
return xui('bg-surface flex items-center gap-2 rounded-md px-2 py-1.5 text-sm', file.status === 'error' ? 'text-error' : 'text-foreground');
|
|
@@ -118,15 +126,7 @@ class XuiUpload {
|
|
|
118
126
|
(dragleave)="dragging.set(false)"
|
|
119
127
|
(drop)="onDrop($event)"
|
|
120
128
|
>
|
|
121
|
-
<
|
|
122
|
-
<path
|
|
123
|
-
d="M12 16V4m0 0-4 4m4-4 4 4M4 20h16"
|
|
124
|
-
stroke="currentColor"
|
|
125
|
-
stroke-width="2"
|
|
126
|
-
stroke-linecap="round"
|
|
127
|
-
stroke-linejoin="round"
|
|
128
|
-
/>
|
|
129
|
-
</svg>
|
|
129
|
+
<ng-icon xui size="lg" color="muted" name="matUploadRound" class="mx-auto" />
|
|
130
130
|
<p class="text-foreground mt-2 text-sm">Click or drag files here to upload</p>
|
|
131
131
|
@if (accept()) {
|
|
132
132
|
<p class="text-foreground-muted mt-1 text-xs">Accepted: {{ accept() }}</p>
|
|
@@ -134,15 +134,7 @@ class XuiUpload {
|
|
|
134
134
|
</div>
|
|
135
135
|
} @else {
|
|
136
136
|
<button type="button" [class]="buttonClass()" [disabled]="disabled()" (click)="openPicker()">
|
|
137
|
-
<
|
|
138
|
-
<path
|
|
139
|
-
d="M12 16V4m0 0-4 4m4-4 4 4"
|
|
140
|
-
stroke="currentColor"
|
|
141
|
-
stroke-width="2"
|
|
142
|
-
stroke-linecap="round"
|
|
143
|
-
stroke-linejoin="round"
|
|
144
|
-
/>
|
|
145
|
-
</svg>
|
|
137
|
+
<ng-icon xui size="sm" name="matArrowUpwardRound" />
|
|
146
138
|
Upload
|
|
147
139
|
</button>
|
|
148
140
|
}
|
|
@@ -151,15 +143,7 @@ class XuiUpload {
|
|
|
151
143
|
<ul class="mt-2 flex flex-col gap-1">
|
|
152
144
|
@for (file of files(); track file.uid) {
|
|
153
145
|
<li [class]="fileRowClass(file)">
|
|
154
|
-
<
|
|
155
|
-
<path
|
|
156
|
-
d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM13 2v7h7"
|
|
157
|
-
stroke="currentColor"
|
|
158
|
-
stroke-width="2"
|
|
159
|
-
stroke-linecap="round"
|
|
160
|
-
stroke-linejoin="round"
|
|
161
|
-
/>
|
|
162
|
-
</svg>
|
|
146
|
+
<ng-icon xui size="sm" name="matInsertDriveFileRound" class="shrink-0" />
|
|
163
147
|
<span class="min-w-0 flex-1">
|
|
164
148
|
<span class="flex items-center gap-2">
|
|
165
149
|
<span class="truncate">{{ file.name }}</span>
|
|
@@ -179,13 +163,13 @@ class XuiUpload {
|
|
|
179
163
|
(click)="remove(file)"
|
|
180
164
|
[attr.aria-label]="'Remove ' + file.name"
|
|
181
165
|
>
|
|
182
|
-
|
|
166
|
+
<ng-icon xui size="sm" name="matCloseRound" />
|
|
183
167
|
</button>
|
|
184
168
|
</li>
|
|
185
169
|
}
|
|
186
170
|
</ul>
|
|
187
171
|
}
|
|
188
|
-
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
172
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }], viewProviders: [provideIcons({ matArrowUpwardRound, matCloseRound, matInsertDriveFileRound, matUploadRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
189
173
|
}
|
|
190
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiUpload, decorators: [{
|
|
191
175
|
type: Component,
|
|
@@ -213,15 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
213
197
|
(dragleave)="dragging.set(false)"
|
|
214
198
|
(drop)="onDrop($event)"
|
|
215
199
|
>
|
|
216
|
-
<
|
|
217
|
-
<path
|
|
218
|
-
d="M12 16V4m0 0-4 4m4-4 4 4M4 20h16"
|
|
219
|
-
stroke="currentColor"
|
|
220
|
-
stroke-width="2"
|
|
221
|
-
stroke-linecap="round"
|
|
222
|
-
stroke-linejoin="round"
|
|
223
|
-
/>
|
|
224
|
-
</svg>
|
|
200
|
+
<ng-icon xui size="lg" color="muted" name="matUploadRound" class="mx-auto" />
|
|
225
201
|
<p class="text-foreground mt-2 text-sm">Click or drag files here to upload</p>
|
|
226
202
|
@if (accept()) {
|
|
227
203
|
<p class="text-foreground-muted mt-1 text-xs">Accepted: {{ accept() }}</p>
|
|
@@ -229,15 +205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
229
205
|
</div>
|
|
230
206
|
} @else {
|
|
231
207
|
<button type="button" [class]="buttonClass()" [disabled]="disabled()" (click)="openPicker()">
|
|
232
|
-
<
|
|
233
|
-
<path
|
|
234
|
-
d="M12 16V4m0 0-4 4m4-4 4 4"
|
|
235
|
-
stroke="currentColor"
|
|
236
|
-
stroke-width="2"
|
|
237
|
-
stroke-linecap="round"
|
|
238
|
-
stroke-linejoin="round"
|
|
239
|
-
/>
|
|
240
|
-
</svg>
|
|
208
|
+
<ng-icon xui size="sm" name="matArrowUpwardRound" />
|
|
241
209
|
Upload
|
|
242
210
|
</button>
|
|
243
211
|
}
|
|
@@ -246,15 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
246
214
|
<ul class="mt-2 flex flex-col gap-1">
|
|
247
215
|
@for (file of files(); track file.uid) {
|
|
248
216
|
<li [class]="fileRowClass(file)">
|
|
249
|
-
<
|
|
250
|
-
<path
|
|
251
|
-
d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM13 2v7h7"
|
|
252
|
-
stroke="currentColor"
|
|
253
|
-
stroke-width="2"
|
|
254
|
-
stroke-linecap="round"
|
|
255
|
-
stroke-linejoin="round"
|
|
256
|
-
/>
|
|
257
|
-
</svg>
|
|
217
|
+
<ng-icon xui size="sm" name="matInsertDriveFileRound" class="shrink-0" />
|
|
258
218
|
<span class="min-w-0 flex-1">
|
|
259
219
|
<span class="flex items-center gap-2">
|
|
260
220
|
<span class="truncate">{{ file.name }}</span>
|
|
@@ -274,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
274
234
|
(click)="remove(file)"
|
|
275
235
|
[attr.aria-label]="'Remove ' + file.name"
|
|
276
236
|
>
|
|
277
|
-
|
|
237
|
+
<ng-icon xui size="sm" name="matCloseRound" />
|
|
278
238
|
</button>
|
|
279
239
|
</li>
|
|
280
240
|
}
|
|
@@ -284,6 +244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
284
244
|
host: {
|
|
285
245
|
'[class]': 'computedClass()'
|
|
286
246
|
},
|
|
247
|
+
imports: [NgIcon, XuiIcon],
|
|
248
|
+
viewProviders: [provideIcons({ matArrowUpwardRound, matCloseRound, matInsertDriveFileRound, matUploadRound })],
|
|
287
249
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
288
250
|
encapsulation: ViewEncapsulation.None
|
|
289
251
|
}]
|
|
@@ -295,5 +257,5 @@ const XuiUploadImports = [XuiUpload];
|
|
|
295
257
|
* Generated bundle index. Do not edit.
|
|
296
258
|
*/
|
|
297
259
|
|
|
298
|
-
export { XuiUpload, XuiUploadImports };
|
|
260
|
+
export { XuiUpload, XuiUploadImports, injectXuiUploadConfig, provideXuiUploadConfig };
|
|
299
261
|
//# sourceMappingURL=xui-upload.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-upload.mjs","sources":["../../../../../../libs/ui/upload/xui/src/lib/upload.ts","../../../../../../libs/ui/upload/xui/src/index.ts","../../../../../../libs/ui/upload/xui/src/xui-upload.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\nexport type UploadStatus = 'uploading' | 'done' | 'error';\n\nexport interface XuiUploadFile {\n uid: string;\n name: string;\n size?: number;\n status?: UploadStatus;\n /** Upload progress 0–100 (shown while `status` is `uploading`). */\n percent?: number;\n}\n\n/**\n * A file upload with a button or drag-and-drop zone and a file list showing\n * per-file progress, status and a remove control. `files` is a two-way bindable\n * list; `selected` emits the raw `File`s so the host can perform the upload and\n * update each file's `status`/`percent`.\n *\n * ```html\n * <xui-upload type=\"drag\" multiple [(files)]=\"files\" (selected)=\"upload($event)\" />\n * ```\n */\n@Component({\n selector: 'xui-upload',\n template: `\n <input\n #picker\n type=\"file\"\n class=\"hidden\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() || null\"\n (change)=\"onPick($event)\"\n />\n\n @if (type() === 'drag') {\n <div\n [class]=\"dropzoneClass()\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"openPicker()\"\n (keydown.enter)=\"openPicker()\"\n (keydown.space)=\"openPicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"dragging.set(false)\"\n (drop)=\"onDrop($event)\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"text-foreground-muted mx-auto h-8 w-8\" fill=\"none\">\n <path\n d=\"M12 16V4m0 0-4 4m4-4 4 4M4 20h16\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class=\"text-foreground mt-2 text-sm\">Click or drag files here to upload</p>\n @if (accept()) {\n <p class=\"text-foreground-muted mt-1 text-xs\">Accepted: {{ accept() }}</p>\n }\n </div>\n } @else {\n <button type=\"button\" [class]=\"buttonClass()\" [disabled]=\"disabled()\" (click)=\"openPicker()\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M12 16V4m0 0-4 4m4-4 4 4\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n Upload\n </button>\n }\n\n @if (files().length) {\n <ul class=\"mt-2 flex flex-col gap-1\">\n @for (file of files(); track file.uid) {\n <li [class]=\"fileRowClass(file)\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 shrink-0\" fill=\"none\">\n <path\n d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM13 2v7h7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span class=\"min-w-0 flex-1\">\n <span class=\"flex items-center gap-2\">\n <span class=\"truncate\">{{ file.name }}</span>\n @if (file.size !== undefined) {\n <span class=\"text-foreground-muted shrink-0 text-xs\">{{ formatSize(file.size) }}</span>\n }\n </span>\n @if (file.status === 'uploading') {\n <span class=\"bg-surface-inset mt-1 block h-1 w-full overflow-hidden rounded-full\">\n <span class=\"bg-primary block h-full transition-all\" [style.width.%]=\"file.percent ?? 0\"></span>\n </span>\n }\n </span>\n <button\n type=\"button\"\n class=\"text-foreground-muted hover:text-error shrink-0 cursor-pointer leading-none\"\n (click)=\"remove(file)\"\n [attr.aria-label]=\"'Remove ' + file.name\"\n >\n ×\n </button>\n </li>\n }\n </ul>\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiUpload {\n readonly class = input<ClassValue>('');\n\n readonly type = input<'select' | 'drag'>('select');\n readonly multiple = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly accept = input<string>('');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly files = model<XuiUploadFile[]>([]);\n /** The raw files just chosen (for the host to upload). */\n readonly selected = output<File[]>();\n\n private readonly picker = viewChild.required<ElementRef<HTMLInputElement>>('picker');\n protected readonly dragging = signal(false);\n private uidCounter = 0;\n\n protected openPicker(): void {\n if (!this.disabled()) {\n this.picker().nativeElement.click();\n }\n }\n\n protected onPick(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.addFiles(input.files);\n input.value = '';\n }\n\n protected onDragOver(event: DragEvent): void {\n if (this.disabled()) {\n return;\n }\n event.preventDefault();\n this.dragging.set(true);\n }\n\n protected onDrop(event: DragEvent): void {\n if (this.disabled()) {\n return;\n }\n event.preventDefault();\n this.dragging.set(false);\n this.addFiles(event.dataTransfer?.files ?? null);\n }\n\n private addFiles(fileList: FileList | null): void {\n if (!fileList || fileList.length === 0) {\n return;\n }\n const raw = Array.from(fileList);\n const chosen = this.multiple() ? raw : raw.slice(0, 1);\n const entries: XuiUploadFile[] = chosen.map(file => ({\n uid: `f-${++this.uidCounter}`,\n name: file.name,\n size: file.size,\n status: 'done'\n }));\n this.files.set(this.multiple() ? [...this.files(), ...entries] : entries);\n this.selected.emit(chosen);\n }\n\n protected remove(file: XuiUploadFile): void {\n this.files.set(this.files().filter(f => f.uid !== file.uid));\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n const units = ['KB', 'MB', 'GB'];\n let size = bytes / 1024;\n let unit = 0;\n while (size >= 1024 && unit < units.length - 1) {\n size /= 1024;\n unit++;\n }\n return `${size.toFixed(1)} ${units[unit]}`;\n }\n\n protected readonly computedClass = computed(() => xui('block', this.class()));\n protected readonly buttonClass = computed(() =>\n xui(\n 'border-border text-foreground hover:bg-surface-inset inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm disabled:opacity-50',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus'\n )\n );\n protected readonly dropzoneClass = computed(() =>\n xui(\n 'cursor-pointer rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',\n this.dragging() ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/60',\n this.disabled() && 'pointer-events-none opacity-50'\n )\n );\n\n protected fileRowClass(file: XuiUploadFile): string {\n return xui(\n 'bg-surface flex items-center gap-2 rounded-md px-2 py-1.5 text-sm',\n file.status === 'error' ? 'text-error' : 'text-foreground'\n );\n }\n}\n","import { XuiUpload } from './lib/upload';\n\nexport * from './lib/upload';\n\nexport const XuiUploadImports = [XuiUpload] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"xui-upload.mjs","sources":["../../../../../../libs/ui/upload/xui/src/lib/upload.token.ts","../../../../../../libs/ui/upload/xui/src/lib/upload.ts","../../../../../../libs/ui/upload/xui/src/index.ts","../../../../../../libs/ui/upload/xui/src/xui-upload.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport { XuiUploadType } from './upload';\n\nexport interface XuiUploadConfig {\n type: XuiUploadType;\n}\n\nexport const [injectXuiUploadConfig, provideXuiUploadConfig] = createXConfigToken<XuiUploadConfig>('XuiUploadConfig', {\n type: 'select'\n});\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n matArrowUpwardRound,\n matCloseRound,\n matInsertDriveFileRound,\n matUploadRound\n} from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiUploadConfig } from './upload.token';\n\nexport type XuiUploadStatus = 'uploading' | 'done' | 'error';\n\n/** How files are picked: a plain button or a drag-and-drop zone. */\nexport type XuiUploadType = 'select' | 'drag';\n\nexport interface XuiUploadFile {\n uid: string;\n name: string;\n size?: number;\n status?: XuiUploadStatus;\n /** Upload progress 0–100 (shown while `status` is `uploading`). */\n percent?: number;\n}\n\n/**\n * A file upload with a button or drag-and-drop zone and a file list showing\n * per-file progress, status and a remove control. `files` is a two-way bindable\n * list; `selected` emits the raw `File`s so the host can perform the upload and\n * update each file's `status`/`percent`.\n *\n * ```html\n * <xui-upload type=\"drag\" multiple [(files)]=\"files\" (selected)=\"upload($event)\" />\n * ```\n */\n@Component({\n selector: 'xui-upload',\n template: `\n <input\n #picker\n type=\"file\"\n class=\"hidden\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() || null\"\n (change)=\"onPick($event)\"\n />\n\n @if (type() === 'drag') {\n <div\n [class]=\"dropzoneClass()\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"openPicker()\"\n (keydown.enter)=\"openPicker()\"\n (keydown.space)=\"openPicker(); $event.preventDefault()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"dragging.set(false)\"\n (drop)=\"onDrop($event)\"\n >\n <ng-icon xui size=\"lg\" color=\"muted\" name=\"matUploadRound\" class=\"mx-auto\" />\n <p class=\"text-foreground mt-2 text-sm\">Click or drag files here to upload</p>\n @if (accept()) {\n <p class=\"text-foreground-muted mt-1 text-xs\">Accepted: {{ accept() }}</p>\n }\n </div>\n } @else {\n <button type=\"button\" [class]=\"buttonClass()\" [disabled]=\"disabled()\" (click)=\"openPicker()\">\n <ng-icon xui size=\"sm\" name=\"matArrowUpwardRound\" />\n Upload\n </button>\n }\n\n @if (files().length) {\n <ul class=\"mt-2 flex flex-col gap-1\">\n @for (file of files(); track file.uid) {\n <li [class]=\"fileRowClass(file)\">\n <ng-icon xui size=\"sm\" name=\"matInsertDriveFileRound\" class=\"shrink-0\" />\n <span class=\"min-w-0 flex-1\">\n <span class=\"flex items-center gap-2\">\n <span class=\"truncate\">{{ file.name }}</span>\n @if (file.size !== undefined) {\n <span class=\"text-foreground-muted shrink-0 text-xs\">{{ formatSize(file.size) }}</span>\n }\n </span>\n @if (file.status === 'uploading') {\n <span class=\"bg-surface-inset mt-1 block h-1 w-full overflow-hidden rounded-full\">\n <span class=\"bg-primary block h-full transition-all\" [style.width.%]=\"file.percent ?? 0\"></span>\n </span>\n }\n </span>\n <button\n type=\"button\"\n class=\"text-foreground-muted hover:text-error shrink-0 cursor-pointer leading-none\"\n (click)=\"remove(file)\"\n [attr.aria-label]=\"'Remove ' + file.name\"\n >\n <ng-icon xui size=\"sm\" name=\"matCloseRound\" />\n </button>\n </li>\n }\n </ul>\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n imports: [NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matArrowUpwardRound, matCloseRound, matInsertDriveFileRound, matUploadRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiUpload {\n private readonly config = injectXuiUploadConfig();\n\n readonly class = input<ClassValue>('');\n\n readonly type = input<XuiUploadType>(this.config.type);\n readonly multiple = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly accept = input<string>('');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly files = model<XuiUploadFile[]>([]);\n /** The raw files just chosen (for the host to upload). */\n readonly selected = output<File[]>();\n\n private readonly picker = viewChild.required<ElementRef<HTMLInputElement>>('picker');\n protected readonly dragging = signal(false);\n private uidCounter = 0;\n\n protected openPicker(): void {\n if (!this.disabled()) {\n this.picker().nativeElement.click();\n }\n }\n\n protected onPick(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.addFiles(input.files);\n input.value = '';\n }\n\n protected onDragOver(event: DragEvent): void {\n if (this.disabled()) {\n return;\n }\n event.preventDefault();\n this.dragging.set(true);\n }\n\n protected onDrop(event: DragEvent): void {\n if (this.disabled()) {\n return;\n }\n event.preventDefault();\n this.dragging.set(false);\n this.addFiles(event.dataTransfer?.files ?? null);\n }\n\n private addFiles(fileList: FileList | null): void {\n if (!fileList || fileList.length === 0) {\n return;\n }\n const raw = Array.from(fileList);\n const chosen = this.multiple() ? raw : raw.slice(0, 1);\n const entries: XuiUploadFile[] = chosen.map(file => ({\n uid: `f-${++this.uidCounter}`,\n name: file.name,\n size: file.size,\n status: 'done'\n }));\n this.files.set(this.multiple() ? [...this.files(), ...entries] : entries);\n this.selected.emit(chosen);\n }\n\n protected remove(file: XuiUploadFile): void {\n this.files.set(this.files().filter(f => f.uid !== file.uid));\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n const units = ['KB', 'MB', 'GB'];\n let size = bytes / 1024;\n let unit = 0;\n while (size >= 1024 && unit < units.length - 1) {\n size /= 1024;\n unit++;\n }\n return `${size.toFixed(1)} ${units[unit]}`;\n }\n\n protected readonly computedClass = computed(() => xui('block', this.class()));\n protected readonly buttonClass = computed(() =>\n xui(\n 'border-border text-foreground hover:bg-surface-inset inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm disabled:opacity-50'\n )\n );\n protected readonly dropzoneClass = computed(() =>\n xui(\n 'cursor-pointer rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors',\n this.dragging() ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/60',\n this.disabled() && 'pointer-events-none opacity-50'\n )\n );\n\n protected fileRowClass(file: XuiUploadFile): string {\n return xui(\n 'bg-surface flex items-center gap-2 rounded-md px-2 py-1.5 text-sm',\n file.status === 'error' ? 'text-error' : 'text-foreground'\n );\n }\n}\n","import { XuiUpload } from './lib/upload';\n\nexport * from './lib/upload';\nexport * from './lib/upload.token';\n\nexport const XuiUploadImports = [XuiUpload] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/upload",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.12",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@
|
|
41
|
+
"@ng-icons/core": "34",
|
|
42
|
+
"@ng-icons/material-icons": "34",
|
|
43
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
44
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
42
45
|
"clsx": "^2.1.1"
|
|
43
46
|
},
|
|
44
47
|
"publishConfig": {
|
package/types/xui-upload.d.ts
CHANGED
|
@@ -2,12 +2,14 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
type XuiUploadStatus = 'uploading' | 'done' | 'error';
|
|
6
|
+
/** How files are picked: a plain button or a drag-and-drop zone. */
|
|
7
|
+
type XuiUploadType = 'select' | 'drag';
|
|
6
8
|
interface XuiUploadFile {
|
|
7
9
|
uid: string;
|
|
8
10
|
name: string;
|
|
9
11
|
size?: number;
|
|
10
|
-
status?:
|
|
12
|
+
status?: XuiUploadStatus;
|
|
11
13
|
/** Upload progress 0–100 (shown while `status` is `uploading`). */
|
|
12
14
|
percent?: number;
|
|
13
15
|
}
|
|
@@ -22,8 +24,9 @@ interface XuiUploadFile {
|
|
|
22
24
|
* ```
|
|
23
25
|
*/
|
|
24
26
|
declare class XuiUpload {
|
|
27
|
+
private readonly config;
|
|
25
28
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
26
|
-
readonly type: _angular_core.InputSignal<
|
|
29
|
+
readonly type: _angular_core.InputSignal<XuiUploadType>;
|
|
27
30
|
readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
28
31
|
readonly accept: _angular_core.InputSignal<string>;
|
|
29
32
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
@@ -48,7 +51,13 @@ declare class XuiUpload {
|
|
|
48
51
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiUpload, "xui-upload", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "files": { "alias": "files"; "required": false; "isSignal": true; }; }, { "files": "filesChange"; "selected": "selected"; }, never, never, true, never>;
|
|
49
52
|
}
|
|
50
53
|
|
|
54
|
+
interface XuiUploadConfig {
|
|
55
|
+
type: XuiUploadType;
|
|
56
|
+
}
|
|
57
|
+
declare const injectXuiUploadConfig: () => XuiUploadConfig;
|
|
58
|
+
declare const provideXuiUploadConfig: (config: Partial<XuiUploadConfig>) => _angular_core.ValueProvider;
|
|
59
|
+
|
|
51
60
|
declare const XuiUploadImports: readonly [typeof XuiUpload];
|
|
52
61
|
|
|
53
|
-
export { XuiUpload, XuiUploadImports };
|
|
54
|
-
export type {
|
|
62
|
+
export { XuiUpload, XuiUploadImports, injectXuiUploadConfig, provideXuiUploadConfig };
|
|
63
|
+
export type { XuiUploadConfig, XuiUploadFile, XuiUploadStatus, XuiUploadType };
|