angel-table 0.0.0-stage → 0.0.2
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 +368 -2
- package/dist/angel-table.css +2 -0
- package/dist/angel-table.js +919 -0
- package/dist/angel-table.umd.cjs +5 -0
- package/dist/lib/Table/Table.d.ts +2 -0
- package/dist/lib/Table/components/Select.d.ts +3 -0
- package/dist/lib/Table/components/SelectCheck.d.ts +3 -0
- package/dist/lib/Table/components/Sort.d.ts +3 -0
- package/dist/lib/Table/hook/useAngelCheck.d.ts +19 -0
- package/dist/lib/Table/hook/useAngelColumn.d.ts +33 -0
- package/dist/lib/Table/hook/useAngelData.d.ts +40 -0
- package/dist/lib/Table/hook/useAngelFilterSerchSort.d.ts +21 -0
- package/dist/lib/Table/hook/useAngelPagination.d.ts +17 -0
- package/dist/lib/Table/type.d.ts +83 -0
- package/dist/lib/main.d.ts +1 -0
- package/dist/src/App.d.ts +2 -0
- package/dist/src/main.d.ts +0 -0
- package/dist/src/utils/createFilter.d.ts +1 -0
- package/dist/src/utils/index.d.ts +1 -0
- package/package.json +42 -4
package/README.md
CHANGED
|
@@ -1,3 +1,369 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Angel Table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A flexible and customizable React Table component with built-in sorting, pagination, search, column visibility, row selection, and responsive card layout.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Responsive Layout** – Automatically adapts between table and card views.
|
|
8
|
+
- **Card View** – Display data as cards on smaller screens.
|
|
9
|
+
- **Sorting** – Sort columns in ascending and descending order.
|
|
10
|
+
- **Pagination** – Built-in pagination controls.
|
|
11
|
+
- **Search** – Search and filter table data.
|
|
12
|
+
- **Row Selection** – Select individual rows or multiple rows.
|
|
13
|
+
- **Column Visibility** – Show or hide columns dynamically.
|
|
14
|
+
- **Custom Rendering** – Customize cell content using render functions.
|
|
15
|
+
- **Remote Data** – Fetch data from an API using a URL.
|
|
16
|
+
- **Custom Styling** – Customize the appearance using CSS.
|
|
17
|
+
- **TypeScript Support** – Built-in TypeScript declarations.
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
Install the package using npm:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install angel-table
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Or using yarn:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add angel-table
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Or using pnpm:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
pnpm add angel-table
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Basic Usage
|
|
40
|
+
|
|
41
|
+
Import the `Table` component:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Table } from 'angel-table';
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<Table
|
|
49
|
+
columns={[
|
|
50
|
+
{
|
|
51
|
+
title: 'Name',
|
|
52
|
+
field: 'name',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
title: 'Email',
|
|
56
|
+
field: 'email',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
title: 'Age',
|
|
60
|
+
field: 'age',
|
|
61
|
+
},
|
|
62
|
+
]}
|
|
63
|
+
rows={[
|
|
64
|
+
{
|
|
65
|
+
id: 1,
|
|
66
|
+
name: 'John Doe',
|
|
67
|
+
email: 'john@example.com',
|
|
68
|
+
age: 25,
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
id: 2,
|
|
72
|
+
name: 'Jane Smith',
|
|
73
|
+
email: 'jane@example.com',
|
|
74
|
+
age: 28,
|
|
75
|
+
},
|
|
76
|
+
]}
|
|
77
|
+
/>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default App;
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## API Integration
|
|
85
|
+
|
|
86
|
+
Angel Table supports loading data from an API through `setup.url`.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { Table } from 'angel-table';
|
|
90
|
+
|
|
91
|
+
function App() {
|
|
92
|
+
return (
|
|
93
|
+
<Table
|
|
94
|
+
setup={{
|
|
95
|
+
keyObject: '_id',
|
|
96
|
+
url: 'https://fakestoreapi.noksha.dev/api/products',
|
|
97
|
+
}}
|
|
98
|
+
columns={[
|
|
99
|
+
{
|
|
100
|
+
title: 'Product',
|
|
101
|
+
field: 'title',
|
|
102
|
+
sort: true,
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
title: 'Category',
|
|
106
|
+
field: 'category',
|
|
107
|
+
sort: true,
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Price',
|
|
111
|
+
field: 'price',
|
|
112
|
+
sort: true,
|
|
113
|
+
},
|
|
114
|
+
]}
|
|
115
|
+
/>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export default App;
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Advanced Usage
|
|
123
|
+
|
|
124
|
+
The following example demonstrates custom columns, responsive card view, column visibility, sorting, and custom cell rendering.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
import { Table } from 'angel-table';
|
|
128
|
+
import './App.css';
|
|
129
|
+
|
|
130
|
+
function App() {
|
|
131
|
+
return (
|
|
132
|
+
<Table
|
|
133
|
+
className='e'
|
|
134
|
+
setup={{
|
|
135
|
+
viewDefault: 'card',
|
|
136
|
+
keyObject: '_id',
|
|
137
|
+
showColumns: true,
|
|
138
|
+
url: 'https://fakestoreapi.noksha.dev/api/products',
|
|
139
|
+
}}
|
|
140
|
+
columns={[
|
|
141
|
+
{
|
|
142
|
+
title: 'No.',
|
|
143
|
+
field: 'index_field',
|
|
144
|
+
width: '70px',
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
title: 'Image',
|
|
148
|
+
field: 'image',
|
|
149
|
+
width: '100px',
|
|
150
|
+
render: (row) => (
|
|
151
|
+
<img
|
|
152
|
+
src={row.image}
|
|
153
|
+
loading='lazy'
|
|
154
|
+
alt={row.title}
|
|
155
|
+
style={{
|
|
156
|
+
width: '50px',
|
|
157
|
+
height: '50px',
|
|
158
|
+
objectFit: 'cover',
|
|
159
|
+
borderRadius: '6px',
|
|
160
|
+
}}
|
|
161
|
+
/>
|
|
162
|
+
),
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
title: 'Product',
|
|
166
|
+
field: 'title',
|
|
167
|
+
width: '200px',
|
|
168
|
+
sort: true,
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
title: 'Category',
|
|
172
|
+
field: 'category',
|
|
173
|
+
sort: true,
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
title: 'Type',
|
|
177
|
+
field: 'type',
|
|
178
|
+
sort: true,
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
title: 'Brand',
|
|
182
|
+
field: 'brand',
|
|
183
|
+
sort: true,
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
title: 'Old Price',
|
|
187
|
+
field: 'oldPrice',
|
|
188
|
+
sort: true,
|
|
189
|
+
render: (row) => `$${row.oldPrice}`,
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
title: 'Price',
|
|
193
|
+
field: 'price',
|
|
194
|
+
sort: true,
|
|
195
|
+
render: (row) => `$${row.price}`,
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
title: 'Discounted Price',
|
|
199
|
+
field: 'discountedPrice',
|
|
200
|
+
sort: true,
|
|
201
|
+
render: (row) => `$${row.discountedPrice}`,
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
title: 'Stock',
|
|
205
|
+
field: 'stock',
|
|
206
|
+
sort: true,
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
title: 'Size',
|
|
210
|
+
field: 'size',
|
|
211
|
+
render: (row) => row.size?.join(', '),
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
title: 'New',
|
|
215
|
+
field: 'isNew',
|
|
216
|
+
render: (row) => (row.isNew ? 'Yes' : 'No'),
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
title: 'Description',
|
|
220
|
+
field: 'description',
|
|
221
|
+
show: false,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
title: 'Actions',
|
|
225
|
+
field: 'action_field',
|
|
226
|
+
width: '120px',
|
|
227
|
+
},
|
|
228
|
+
]}
|
|
229
|
+
/>
|
|
230
|
+
);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
export default App;
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
## Column Configuration
|
|
237
|
+
|
|
238
|
+
Each column supports the following properties:
|
|
239
|
+
|
|
240
|
+
| Property | Type | Description |
|
|
241
|
+
| ----------- | ---------- | --------------------------- |
|
|
242
|
+
| `title` | `string` | Column heading |
|
|
243
|
+
| `field` | `string` | Data field or special field |
|
|
244
|
+
| `width` | `string` | Column width |
|
|
245
|
+
| `className` | `string` | Custom CSS class |
|
|
246
|
+
| `sort` | `boolean` | Enable sorting |
|
|
247
|
+
| `sortLabel` | `object` | Custom sorting labels |
|
|
248
|
+
| `show` | `boolean` | Control column visibility |
|
|
249
|
+
| `render` | `function` | Custom cell rendering |
|
|
250
|
+
|
|
251
|
+
### Special Fields
|
|
252
|
+
|
|
253
|
+
Angel Table provides special fields for common table functionality:
|
|
254
|
+
|
|
255
|
+
| Field | Description |
|
|
256
|
+
| -------------- | ---------------------- |
|
|
257
|
+
| `index_field` | Display row index |
|
|
258
|
+
| `check_field` | Row selection checkbox |
|
|
259
|
+
| `action_field` | Action column |
|
|
260
|
+
|
|
261
|
+
### Custom Rendering
|
|
262
|
+
|
|
263
|
+
Use `render` to customize how cell values are displayed.
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
{
|
|
267
|
+
title: 'Status',
|
|
268
|
+
field: 'status',
|
|
269
|
+
render: (row) => (
|
|
270
|
+
<span className={`status status-${row.status}`}>
|
|
271
|
+
{row.status}
|
|
272
|
+
</span>
|
|
273
|
+
),
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
## Table Configuration
|
|
278
|
+
|
|
279
|
+
The `setup` property controls the table's behavior.
|
|
280
|
+
|
|
281
|
+
| Property | Type | Description |
|
|
282
|
+
| ------------- | --------- | ---------------------------------------- |
|
|
283
|
+
| `keyObject` | `string` | Unique identifier for each row |
|
|
284
|
+
| `url` | `string` | API endpoint for remote data |
|
|
285
|
+
| `viewDefault` | `string` | Default display mode (`table` or `card`) |
|
|
286
|
+
| `showColumns` | `boolean` | Enable column visibility controls |
|
|
287
|
+
|
|
288
|
+
Example:
|
|
289
|
+
|
|
290
|
+
```tsx
|
|
291
|
+
<Table
|
|
292
|
+
setup={{
|
|
293
|
+
keyObject: 'id',
|
|
294
|
+
viewDefault: 'table',
|
|
295
|
+
showColumns: true,
|
|
296
|
+
url: 'https://example.com/api/data',
|
|
297
|
+
}}
|
|
298
|
+
columns={columns}
|
|
299
|
+
/>
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
## Import Styles
|
|
303
|
+
|
|
304
|
+
Angel Table requires its stylesheet to be imported separately.
|
|
305
|
+
|
|
306
|
+
```tsx
|
|
307
|
+
import { Table } from 'angel-table';
|
|
308
|
+
import 'angel-table/style.css';
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
Make sure to import the stylesheet once in your application entry point or main component.
|
|
312
|
+
|
|
313
|
+
Without importing the stylesheet, the table may not display correctly.
|
|
314
|
+
|
|
315
|
+
For dark mode, the component supports theme styling through:
|
|
316
|
+
|
|
317
|
+
```tsx
|
|
318
|
+
<Table columns={columns} setup={{ mode: 'dark' }} />
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
You can also override the CSS variables to customize colors, borders, backgrounds, and other visual properties.
|
|
322
|
+
|
|
323
|
+
## TypeScript
|
|
324
|
+
|
|
325
|
+
Angel Table includes TypeScript type declarations, allowing you to get autocomplete and type checking when configuring columns and table data.
|
|
326
|
+
|
|
327
|
+
```tsx
|
|
328
|
+
import { Table } from 'angel-table';
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
## License
|
|
332
|
+
|
|
333
|
+
Mit
|
|
334
|
+
|
|
335
|
+
# React + TypeScript + Vite
|
|
336
|
+
|
|
337
|
+
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
|
338
|
+
|
|
339
|
+
Currently, two official plugins are available:
|
|
340
|
+
|
|
341
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
|
342
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
343
|
+
|
|
344
|
+
## React Compiler
|
|
345
|
+
|
|
346
|
+
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
|
347
|
+
|
|
348
|
+
Note: This will impact Vite dev & build performances.
|
|
349
|
+
You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin.
|
|
350
|
+
|
|
351
|
+
## Expanding the Oxlint configuration
|
|
352
|
+
|
|
353
|
+
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
|
|
354
|
+
|
|
355
|
+
```json
|
|
356
|
+
{
|
|
357
|
+
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
|
358
|
+
"plugins": ["react", "typescript", "oxc"],
|
|
359
|
+
"options": {
|
|
360
|
+
"typeAware": true
|
|
361
|
+
},
|
|
362
|
+
"rules": {
|
|
363
|
+
"react/rules-of-hooks": "error",
|
|
364
|
+
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.angel-table-container{--at-bg:#fff;--at-bg-secondary:#f9fafb;--at-bg-hover:#f3f4f6;--at-bg-selected:#eff6ff;--at-bg-disabled:#f9fafb;--at-bg-overlay:#ffffffbf;--at-border:#e5e7eb;--at-border-light:#f1f5f9;--at-border-hover:#d1d5db;--at-border-focus:#3b82f6;--at-border-selected:#bfdbfe;--at-text:#374151;--at-text-primary:#111827;--at-text-secondary:#6b7280;--at-text-muted:#9ca3af;--at-text-disabled:#cbd5e1;--at-text-inverse:#fff;--at-primary:#2563eb;--at-primary-hover:#1d4ed8;--at-primary-light:#eff6ff;--at-primary-border:#bfdbfe;--at-primary-shadow:#2563eb1f;--at-danger:#dc2626;--at-success:#16a34a;--at-success-bg:#f0fdf4;--at-success-border:#bbf7d0;--at-white:#fff;--at-shadow:0 1px 3px #0000000d;--at-radius:8px;--at-radius-sm:6px;--at-transition:.2s ease;width:100%;min-width:0;color:var(--at-text);background:var(--at-bg);font-family:inherit;font-size:14px}.angel-table-container[data-theme=dark]{--at-bg:#111827;--at-bg-secondary:#1f2937;--at-bg-hover:#283548;--at-bg-selected:#1e3a5f;--at-bg-disabled:#111827;--at-bg-overlay:#111827bf;--at-border:#374151;--at-border-light:#2d3748;--at-border-hover:#4b5563;--at-border-focus:#60a5fa;--at-border-selected:#1d4ed8;--at-text:#d1d5db;--at-text-primary:#f9fafb;--at-text-secondary:#9ca3af;--at-text-muted:#6b7280;--at-text-disabled:#4b5563;--at-text-inverse:#fff;--at-primary:#60a5fa;--at-primary-hover:#93c5fd;--at-primary-light:#1e3a5f;--at-primary-border:#1d4ed8;--at-primary-shadow:#60a5fa26;--at-danger:#f87171;--at-success:#4ade80;--at-success-bg:#14532d;--at-success-border:#166534;--at-white:#1f2937;--at-shadow:0 1px 3px #0003}.angel-table-container *,.angel-table-container :before,.angel-table-container :after{box-sizing:border-box}.angel-table-body{width:100%;min-width:0;position:relative}.angel-table{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg);width:100%;box-shadow:var(--at-shadow);overflow:auto}.angel-table table{border-collapse:separate;border-spacing:0;text-align:left;width:100%}.angel-table thead{z-index:10;background:var(--at-bg-secondary);position:sticky;top:0}.angel-table th{border-bottom:1px solid var(--at-border);background:var(--at-bg-secondary);color:var(--at-text-secondary);letter-spacing:.055em;text-align:left;text-transform:uppercase;white-space:nowrap;padding:14px 16px;font-size:11px;font-weight:700;line-height:1.4}.angel-table td{border-bottom:1px solid var(--at-border-light);background:var(--at-bg);color:var(--at-text);vertical-align:middle;padding:14px 16px;font-size:13px;line-height:1.6}.angel-table tbody tr{background:var(--at-bg);transition:background-color var(--at-transition)}.angel-table tbody tr:hover td{background:var(--at-bg-hover)}.angel-table tbody tr.is-selected td{background:var(--at-bg-selected)}.angel-table tbody tr:last-child td{border-bottom:none}.angel-table__check-cell{width:44px;min-width:44px;text-align:center!important}.angel-table__index-cell{width:60px;min-width:60px;color:var(--at-text-muted)!important;text-align:center!important}.angel-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--at-primary);vertical-align:middle;cursor:pointer;margin:0}.angel-table a{color:var(--at-primary);font-weight:500;text-decoration:none}.angel-table a:hover{color:var(--at-primary-hover);text-decoration:underline}.angel-table td button{cursor:pointer}.angel-table__toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.angel-table__toolbar-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.angel-table__label{color:var(--at-text-secondary);white-space:nowrap;align-items:center;gap:8px;font-size:13px;display:inline-flex}.angel-table__select{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg);max-width:220px;min-height:38px;color:var(--at-text);cursor:pointer;transition:border-color var(--at-transition), box-shadow var(--at-transition);outline:none;padding:8px 12px;font-family:inherit;font-size:13px}.angel-table__select:hover{border-color:var(--at-border-hover)}.angel-table__select:focus{border-color:var(--at-border-focus);box-shadow:0 0 0 3px var(--at-primary-shadow)}.angel-table__button{border-radius:var(--at-radius);white-space:nowrap;cursor:pointer;min-height:38px;transition:background-color var(--at-transition), border-color var(--at-transition), color var(--at-transition), transform .15s ease;border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;display:inline-flex}.angel-table__button svg{flex-shrink:0;width:16px;height:16px}.angel-table__button:active:not(:disabled){transform:scale(.97)}.angel-table__button:disabled{opacity:.45;cursor:not-allowed}.angel-table__button--primary{background:var(--at-primary);color:var(--at-text-inverse)}.angel-table__button--primary:hover:not(:disabled){background:var(--at-primary-hover)}.angel-table__button--secondary{border-color:var(--at-border);background:var(--at-bg-secondary);color:var(--at-text)}.angel-table__button--secondary:hover:not(:disabled){border-color:var(--at-border-hover);background:var(--at-bg-hover);color:var(--at-text-primary)}.angel-table__selection{border:1px solid var(--at-primary-border);border-radius:var(--at-radius);background:var(--at-primary-light);color:var(--at-primary);flex-wrap:wrap;align-items:center;gap:5px;padding:5px;font-size:13px;display:flex}.angel-table__selection strong{font-weight:700}.angel-table__selection button{color:var(--at-primary);font:inherit;cursor:pointer;background:0 0;border:none;margin-left:auto;padding:3px 6px;font-weight:600}.angel-table__selection button:hover{text-decoration:underline}.angel-table__search-box{border:1px solid var(--at-border);border-radius:var(--at-radius-sm);background:var(--at-bg);max-width:300px;transition:border-color var(--at-transition);align-items:center;gap:2px;padding:2px 8px;display:flex}.angel-table__search-box:focus-within{border-color:var(--at-border-focus)}.angel-table__search-box input{min-width:0;color:var(--at-text);background:0 0;border:none;outline:none;flex:1;padding:5px 12px;font-family:inherit;font-size:14px}.angel-table__search-box input::placeholder{color:var(--at-text-muted)}.angel-table__search-box button{border-radius:var(--at-radius-sm);background:var(--at-primary);color:var(--at-text-inverse);cursor:pointer;border:none;padding:5px 14px}.angel-table__search-box button:hover{background:var(--at-primary-hover)}.angel-table__sort{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:inline-flex}.angel-table__sort-icon{color:var(--at-text-muted);font-size:14px}.angel-table th:hover .angel-table__sort-icon{color:var(--at-text)}.angel-table__empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:260px;padding:32px 20px;display:flex}.angel-table__empty-icon{border:1px solid var(--at-border);background:var(--at-bg-secondary);width:58px;height:58px;color:var(--at-text-muted);border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.angel-table__empty-icon svg{width:28px;height:28px}.angel-table__empty-title{color:var(--at-text-primary);margin:0;font-size:15px;font-weight:700}.angel-table__empty-description{max-width:360px;color:var(--at-text-muted);margin:6px 0 18px;font-size:13px;line-height:1.6}.angel-table__loading,.angel-table__mobile-message{min-height:120px;color:var(--at-text-secondary);justify-content:center;align-items:center;gap:10px;padding:24px;font-size:13px;display:flex}.angel-table__spinner{border:2px solid var(--at-primary-light);border-top-color:var(--at-primary);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite angel-table-spin}@keyframes angel-table-spin{to{transform:rotate(360deg)}}.angel-table__loading-overlay{z-index:600;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:30px;left:0}.angel-table__loading-text{z-index:601;color:var(--at-text-primary);position:relative}.angel-table__loading-backdrop{background:var(--at-bg-overlay);border:1px solid var(--at-border);position:absolute;inset:0}.angel-table__error{color:var(--at-danger);text-align:center;padding:28px 16px}.angel-table__error p{margin:0 0 12px}.angel-table__footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}.angel-table__footer-info{color:var(--at-text-secondary);font-size:13px}.angel-table__footer-info strong{color:var(--at-text-primary);font-weight:700}.angel-table__pagination{align-items:center;gap:6px;display:flex}.angel-table__page-button{border:1px solid var(--at-border);background:var(--at-bg);min-height:36px;color:var(--at-text);cursor:pointer;transition:background-color var(--at-transition), border-color var(--at-transition), color var(--at-transition);border-radius:7px;justify-content:center;align-items:center;gap:5px;padding:7px 11px;font-family:inherit;font-size:12px;font-weight:600;display:inline-flex}.angel-table__page-button svg{width:15px;height:15px}.angel-table__page-button:hover:not(:disabled){border-color:var(--at-primary-border);background:var(--at-primary-light);color:var(--at-primary)}.angel-table__page-button:disabled{background:var(--at-bg-disabled);color:var(--at-text-disabled);cursor:not-allowed}.angel-table__page-number{border:1px solid var(--at-primary);background:var(--at-primary);width:36px;height:36px;color:var(--at-text-inverse);border-radius:7px;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex}.angel-table__desktop{width:100%;min-width:0;display:block}.angel-table__mobile{width:100%;display:none}.angel-table__cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.angel-table__card{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg-secondary);width:100%;color:var(--at-text);cursor:pointer;transition:border-color var(--at-transition), background-color var(--at-transition), box-shadow var(--at-transition);padding:12px;position:relative}.angel-table__card:hover{border-color:var(--at-primary);box-shadow:var(--at-shadow)}.angel-table__card .is-selected{border:1px solid var(--at-success-border);background:var(--at-success-bg);color:var(--at-success);border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600;position:absolute;top:10px;right:8px;transform:rotate(-5deg)}.angel-table__card_row{padding:4px 0;display:flex}.angel-table__card_column_left{width:40%;color:var(--at-text-secondary);word-break:break-word;overflow-wrap:anywhere;white-space:normal;padding:2px}.angel-table__card_column_right{width:60%;color:var(--at-text);word-break:break-word;overflow-wrap:anywhere;white-space:normal;padding:2px}@media (width<=1023px){.angel-table__desktop{display:none}.angel-table__mobile{display:block}}@media (width<=600px){.angel-table__toolbar{align-items:stretch}.angel-table__toolbar-left{width:100%}.angel-table__toolbar-left>.angel-table__select{flex:130px;min-width:0;max-width:100%}.angel-table__label{flex:100%;justify-content:flex-start}.angel-table__label .angel-table__select{flex:1;max-width:150px}.angel-table__toolbar>.angel-table__button{width:100%}.angel-table__footer{align-items:flex-start}.angel-table__pagination{justify-content:space-between;width:100%}.angel-table__page-button{flex:1}.angel-table__selection{align-items:flex-start}.angel-table__search-box{width:100%;max-width:100%}.angel-table__cards{grid-template-columns:1fr}}.angel-table-container :focus-visible{outline:2px solid var(--at-border-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){.angel-table-container *,.angel-table-container :before,.angel-table-container :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.angel-table__dropdown{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.angel-table__dropdown-trigger{justify-content:space-between;align-items:center;gap:10px;min-width:100px;display:inline-flex}.angel-table__dropdown-arrow{flex-shrink:0;transition:transform .2s}.angel-table__dropdown.is-open .angel-table__dropdown-arrow{transform:rotate(180deg)}.angel-table__dropdown-menu{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;align-items:stretch;min-width:100px;max-height:300px;padding:4px;animation:.15s angel-dropdown-show;display:flex;position:absolute;overflow-x:auto;box-shadow:0 4px 6px -1px #00000014,0 2px 4px -2px #00000014}.angel-table__dropdown[data-direction=bottom] .angel-table__dropdown-menu,.angel-table__dropdown:not([data-direction]) .angel-table__dropdown-menu{top:calc(100% + 4px);left:0}.angel-table__dropdown[data-direction=top] .angel-table__dropdown-menu{bottom:calc(100% + 4px);left:0}.angel-table__dropdown[data-direction=left] .angel-table__dropdown-menu{top:0;right:calc(100% + 4px)}.angel-table__dropdown[data-direction=right] .angel-table__dropdown-menu{top:0;left:calc(100% + 4px)}.angel-table__dropdown-item{color:#374151;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:5px;align-items:center;width:100%;padding:8px 12px;font-size:13px;font-weight:400;transition:background .15s,color .15s;display:inline-flex}.angel-table__dropdown-item.active{color:#d1d5db;background:#00f}.angel-table__dropdown-item .not-selected{opacity:.5}.angel-table__dropdown-item p{flex:1;font-weight:600}.angel-table__dropdown-item:hover{color:#111827;background:#f3f4f6}.angel-table__dropdown-item:active{background:#e5e7eb}@keyframes angel-dropdown-show{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.angel-table-container[data-theme=dark] .angel-table__dropdown-menu{background:#1f2937;border-color:#374151;box-shadow:0 4px 12px #00000040}.angel-table-container[data-theme=dark] .angel-table__dropdown-item{color:#d1d5db}.angel-table-container[data-theme=dark] .angel-table__dropdown-item.selected{color:#e7eaee;background:#1b1c1c}.angel-table-container[data-theme=dark] .angel-table__dropdown-item .not-selected{opacity:.5}.angel-table-container[data-theme=dark] .angel-table__dropdown-item:hover{color:#fff;background:#374151}.angel-table-container[data-theme=dark] .angel-table__dropdown-item:active{background:#4b5563}
|
|
2
|
+
/*$vite$:1*/
|