@avento-space/ts-ui 1.2.1 → 1.2.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 +123 -213
- package/dist/{form.wc-CwjVsdUu.d.ts → card.wc-pFLgjfwm.d.ts} +78 -1
- package/dist/{chunk-PRZASPFU.js → chunk-ICB6OBEZ.js} +469 -112
- package/dist/chunk-ICB6OBEZ.js.map +1 -0
- package/dist/{chunk-DO3PEBDS.js → chunk-QTANS5ZS.js} +6 -4
- package/dist/chunk-QTANS5ZS.js.map +1 -0
- package/dist/{chunk-42QSY3LJ.js → chunk-RATTHYIP.js} +3 -3
- package/dist/{chunk-42QSY3LJ.js.map → chunk-RATTHYIP.js.map} +1 -1
- package/dist/{chunk-NJAZMTMT.js → chunk-RQZ7KDYP.js} +354 -58
- package/dist/chunk-RQZ7KDYP.js.map +1 -0
- package/dist/chunk-T7QLIHHU.js +3 -0
- package/dist/{chunk-MFONNOJU.js.map → chunk-T7QLIHHU.js.map} +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +3 -3
- package/dist/define.js +4 -4
- package/dist/icons/index.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -5
- package/dist/react/index.d.ts +4 -3
- package/dist/react/index.js +19 -4
- package/dist/react/index.js.map +1 -1
- package/package.json +3 -3
- package/dist/chunk-DO3PEBDS.js.map +0 -1
- package/dist/chunk-MFONNOJU.js +0 -3
- package/dist/chunk-NJAZMTMT.js.map +0 -1
- package/dist/chunk-PRZASPFU.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,38 +1,22 @@
|
|
|
1
1
|
# Avento TS UI
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Web Components UI library — framework-agnostic, signal-driven, tree-shakeable.**
|
|
4
4
|
|
|
5
|
-
Build reactive
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Philosophy
|
|
10
|
-
|
|
11
|
-
Avento TS UI is built on a strict separation of concerns:
|
|
12
|
-
|
|
13
|
-
- **Core** — abstract UI model (VNodes), reactive primitives (signals/computed/effects), context, store, lifecycle, and plugin system. Zero platform dependencies.
|
|
14
|
-
- **Render** — generic `Renderer<T, THost>` interface that decouples UI definition from output strategy.
|
|
15
|
-
- **Adapters** — platform-specific renderers (DOM with reconciliation and hydration, SSR with streaming).
|
|
16
|
-
- **Components** — pure functional components consuming `(props, children?) => VNode`, fully portable across all adapters.
|
|
17
|
-
|
|
18
|
-
No layer depends on the internals of another. The same component function works unchanged in the browser and on the server.
|
|
5
|
+
Build reactive UIs with native web components. Works with any framework (React, Vue, Angular, or vanilla JS) or no framework at all.
|
|
19
6
|
|
|
20
7
|
---
|
|
21
8
|
|
|
22
9
|
## Features
|
|
23
10
|
|
|
24
|
-
- **
|
|
25
|
-
- **
|
|
26
|
-
- **
|
|
27
|
-
- **
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
30
|
-
- **
|
|
31
|
-
- **
|
|
32
|
-
|
|
33
|
-
- **JSX transform** — `jsx`/`jsxs`/`jsxDEV` functions for compiler integration
|
|
34
|
-
- **Strong TypeScript** — full type inference for signals, components, and renderers
|
|
35
|
-
- **Zero runtime dependencies** — only TypeScript
|
|
11
|
+
- **50+ production-ready components** — buttons, modals, tables, forms, overlays, and more
|
|
12
|
+
- **Shadow DOM** — encapsulated styles, no leaks
|
|
13
|
+
- **Signal-based reactivity** — fine-grained updates without virtual DOM
|
|
14
|
+
- **Tree-shakeable** — import only what you use
|
|
15
|
+
- **Framework-agnostic** — use directly as HTML tags or via React wrappers
|
|
16
|
+
- **Accessible** — WAI-ARIA patterns, keyboard navigation, focus management
|
|
17
|
+
- **Icon system** — 3000+ SVG icons built in
|
|
18
|
+
- **Zero dependencies** — only TypeScript
|
|
19
|
+
|
|
36
20
|
---
|
|
37
21
|
|
|
38
22
|
## Quick Start
|
|
@@ -40,235 +24,161 @@ No layer depends on the internals of another. The same component function works
|
|
|
40
24
|
### Install
|
|
41
25
|
|
|
42
26
|
```bash
|
|
43
|
-
npm install @avento/ts-ui
|
|
27
|
+
npm install @avento-space/ts-ui
|
|
44
28
|
```
|
|
45
29
|
|
|
46
|
-
###
|
|
30
|
+
### Usage (vanilla JS / any framework)
|
|
47
31
|
|
|
48
32
|
```typescript
|
|
49
|
-
import {
|
|
33
|
+
import { defineComponents } from '@avento-space/ts-ui';
|
|
50
34
|
|
|
51
|
-
|
|
52
|
-
|
|
35
|
+
// Register all components (prefix: u-)
|
|
36
|
+
defineComponents();
|
|
53
37
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
h('h1', null, ['Avento Counter']),
|
|
57
|
-
h('p', null, [`Count: `, count]),
|
|
58
|
-
h('p', null, [`Doubled: `, doubled]),
|
|
59
|
-
h('button', { onClick: () => count.set(count.get() + 1) }, ['+']),
|
|
60
|
-
h('button', { onClick: () => count.set(count.get() - 1) }, ['-']),
|
|
61
|
-
]);
|
|
62
|
-
}
|
|
38
|
+
// Components are now available as HTML tags
|
|
39
|
+
```
|
|
63
40
|
|
|
64
|
-
|
|
41
|
+
```html
|
|
42
|
+
<u-button variant="primary">Click me</u-button>
|
|
43
|
+
<u-modal title="Hello" open>
|
|
44
|
+
<p>Modal content</p>
|
|
45
|
+
</u-modal>
|
|
65
46
|
```
|
|
66
47
|
|
|
67
|
-
|
|
48
|
+
### Usage with React
|
|
68
49
|
|
|
69
|
-
|
|
50
|
+
```tsx
|
|
51
|
+
import { defineComponents } from '@avento-space/ts-ui';
|
|
52
|
+
import { Button, Modal } from '@avento-space/ts-ui/react';
|
|
70
53
|
|
|
71
|
-
|
|
72
|
-
import { h, renderToString } from '@avento/ts-ui';
|
|
54
|
+
defineComponents();
|
|
73
55
|
|
|
74
|
-
function
|
|
75
|
-
return
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<Button variant="primary" onClick={() => alert('Hi!')}>
|
|
59
|
+
Click me
|
|
60
|
+
</Button>
|
|
61
|
+
);
|
|
79
62
|
}
|
|
80
|
-
|
|
81
|
-
const html = renderToString(h(Page));
|
|
82
|
-
console.log(html);
|
|
83
|
-
// <div class="page"><h1>Hello from SSR</h1><p>This was rendered on the server.</p></div>
|
|
84
63
|
```
|
|
85
64
|
|
|
86
65
|
---
|
|
87
66
|
|
|
88
|
-
##
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
67
|
+
## Components
|
|
68
|
+
|
|
69
|
+
| Component | Tag | Description |
|
|
70
|
+
|-----------|-----|-------------|
|
|
71
|
+
| Accordion | `<u-accordion>` | Collapsible sections |
|
|
72
|
+
| Badge | `<u-badge>` | Status indicators, labels |
|
|
73
|
+
| Box | `<u-box>` | Semantic layout wrapper |
|
|
74
|
+
| Breadcrumb | `<u-breadcrumb>` | Navigation trail |
|
|
75
|
+
| Button | `<u-button>` | Primary, secondary, ghost, danger, link |
|
|
76
|
+
| Calendar | `<u-calendar>` | Date picker |
|
|
77
|
+
| Card | `<u-card>` | Content container with header/footer |
|
|
78
|
+
| Checkbox | `<u-checkbox>` | Toggle option |
|
|
79
|
+
| Collection | `<u-collection>` | Managed item selection |
|
|
80
|
+
| Combobox | `<u-combobox>` | Autocomplete input |
|
|
81
|
+
| CommandPalette | `<u-command-palette>` | ⌘K command menu |
|
|
82
|
+
| Container | `<u-container>` | Max-width layout wrapper |
|
|
83
|
+
| ContextMenu | `<u-context-menu>` | Right-click menu |
|
|
84
|
+
| DataTable | `<u-data-table>` | Sortable, filterable table |
|
|
85
|
+
| DialogRoot | `<u-dialog-root>` | Dialog base behavior |
|
|
86
|
+
| DismissableLayer | `<u-dismissable-layer>` | Click-outside handler |
|
|
87
|
+
| Drawer | `<u-drawer>` | Slide-in panel |
|
|
88
|
+
| Dropdown | `<u-dropdown>` | Menu button |
|
|
89
|
+
| Field | `<u-field>` | Label + input wrapper |
|
|
90
|
+
| FocusManager | `<u-focus-manager>` | Keyboard focus orchestration |
|
|
91
|
+
| FocusScope | `<u-focus-scope>` | Isolated focus zone |
|
|
92
|
+
| FocusTrap | `<u-focus-trap>` | Tab cycle trapping |
|
|
93
|
+
| Form | `<u-form>` | Form validation wrapper |
|
|
94
|
+
| Grid | `<u-grid>` | CSS Grid layout |
|
|
95
|
+
| Hoverable | `<u-hoverable>` | Hover state behavior |
|
|
96
|
+
| Input | `<u-input>` | Text input |
|
|
97
|
+
| KeyboardNavigation | `<u-keyboard-navigation>` | Arrow key navigation |
|
|
98
|
+
| Label | `<u-label>` | Form label |
|
|
99
|
+
| Link | `<u-link>` | Styled anchor |
|
|
100
|
+
| List | `<u-list>` | Keyed list renderer |
|
|
101
|
+
| LiveRegion | `<u-live-region>` | Screen reader announcements |
|
|
102
|
+
| Modal | `<u-modal>` | Dialog overlay |
|
|
103
|
+
| Overlay | `<u-overlay>` | Backdrop layer |
|
|
104
|
+
| Popover | `<u-popover>` | Hover/focus tooltip-like |
|
|
105
|
+
| Popper | `<u-popper>` | Positioning utility |
|
|
106
|
+
| Portal | `<u-portal>` | Teleport to another node |
|
|
107
|
+
| Presence | `<u-presence>` | Mount/unmount animation |
|
|
108
|
+
| Pressable | `<u-pressable>` | Press interaction behavior |
|
|
109
|
+
| RadioGroup | `<u-radio-group>` | Radio button group |
|
|
110
|
+
| RouterView | `<u-router-view>` | Router outlet |
|
|
111
|
+
| Select | `<u-select>` | Native select replacement |
|
|
112
|
+
| Slot | `<u-slot>` | Named slot content |
|
|
113
|
+
| Sortable | `<u-sortable>` | Drag-to-reorder list |
|
|
114
|
+
| Spacer | `<u-spacer>` | Flex spacing utility |
|
|
115
|
+
| Stack / HStack | `<u-stack>` / `<u-hstack>` | Flexbox layouts |
|
|
116
|
+
| Switch | `<u-switch>` | Toggle control |
|
|
117
|
+
| Table | `<u-table>` | Data table |
|
|
118
|
+
| Tabs | `<u-tabs>` | Tabbed interface |
|
|
119
|
+
| Text | `<u-text>` | Typography with size/weight/color |
|
|
120
|
+
| Textarea | `<u-textarea>` | Multi-line input |
|
|
121
|
+
| Toast | `<u-toast>` | Notification popup |
|
|
122
|
+
| TooltipRoot | `<u-tooltip-root>` | Hover tooltip |
|
|
123
|
+
| Transition | `<u-transition>` | CSS transition behavior |
|
|
124
|
+
| Tree | `<u-tree>` | Hierarchical list |
|
|
125
|
+
| VisuallyHidden | `<u-visually-hidden>` | Screen reader-only content |
|
|
126
|
+
| Icon | `<u-icon>` | 3000+ SVG icons |
|
|
117
127
|
|
|
118
128
|
---
|
|
119
129
|
|
|
120
|
-
##
|
|
121
|
-
|
|
122
|
-
### VNode
|
|
130
|
+
## Styling
|
|
123
131
|
|
|
124
|
-
|
|
132
|
+
All components use **Shadow DOM** for style encapsulation. Override styles via:
|
|
125
133
|
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
children: VNodeChild[];
|
|
131
|
-
key?: string | number;
|
|
132
|
-
}
|
|
134
|
+
```css
|
|
135
|
+
/* CSS parts */
|
|
136
|
+
u-button::part(button) { font-weight: 700; }
|
|
137
|
+
u-modal::part(modal-wrapper) { border-radius: 16px; }
|
|
133
138
|
```
|
|
134
139
|
|
|
135
|
-
|
|
140
|
+
Design tokens are available as CSS custom properties:
|
|
136
141
|
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
- `type` — element tag name, component function, or `Fragment`
|
|
145
|
-
- `props` — attributes, properties, event listeners (`onClick`, etc.), signals
|
|
146
|
-
- `children` — VNodes, strings, numbers, booleans, `null`, or signals
|
|
147
|
-
|
|
148
|
-
### Signals
|
|
149
|
-
|
|
150
|
-
```typescript
|
|
151
|
-
import { signal, computed, effect, batch, untrack } from '@avento/ts-ui';
|
|
152
|
-
|
|
153
|
-
const name = signal('World');
|
|
154
|
-
const greeting = computed(() => `Hello, ${name.get()}!`);
|
|
155
|
-
|
|
156
|
-
effect(() => {
|
|
157
|
-
console.log(greeting.get()); // logs whenever name changes
|
|
158
|
-
});
|
|
159
|
-
|
|
160
|
-
batch(() => {
|
|
161
|
-
name.set('Agnostic');
|
|
162
|
-
name.set('UI'); // only one notification after batch
|
|
163
|
-
});
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
### Context
|
|
167
|
-
|
|
168
|
-
```typescript
|
|
169
|
-
import { createContext, useContext, h, mount } from '@avento/ts-ui';
|
|
170
|
-
|
|
171
|
-
const Theme = createContext('light');
|
|
172
|
-
|
|
173
|
-
function Panel() {
|
|
174
|
-
const theme = useContext(Theme);
|
|
175
|
-
return h('div', { class: `theme-${theme}` }, ['Themed content']);
|
|
142
|
+
```css
|
|
143
|
+
:root {
|
|
144
|
+
--u-color-primary: #3b82f6;
|
|
145
|
+
--u-color-text: #111827;
|
|
146
|
+
--u-color-text-muted: #4b5563;
|
|
147
|
+
--u-radius-2xl: 12px;
|
|
176
148
|
}
|
|
177
149
|
```
|
|
178
150
|
|
|
179
151
|
---
|
|
180
152
|
|
|
181
|
-
##
|
|
153
|
+
## React Wrappers
|
|
182
154
|
|
|
183
|
-
```
|
|
184
|
-
import {
|
|
185
|
-
|
|
186
|
-
const instance = mount(h(App), document.getElementById('root')!);
|
|
187
|
-
// instance.render(newVNode) — re-render
|
|
188
|
-
// instance.hydrate(vnode) — attach to existing DOM
|
|
189
|
-
// instance.destroy() — unmount and clean up
|
|
155
|
+
```tsx
|
|
156
|
+
import { Button, Modal, Tabs, Text, Badge, Card } from '@avento-space/ts-ui/react';
|
|
190
157
|
```
|
|
191
158
|
|
|
192
|
-
|
|
159
|
+
Each web component has a React wrapper that forwards props and refs.
|
|
193
160
|
|
|
194
161
|
---
|
|
195
162
|
|
|
196
|
-
##
|
|
197
|
-
|
|
198
|
-
```typescript
|
|
199
|
-
import { renderToString, renderToStream } from '@avento/ts-ui';
|
|
163
|
+
## Icons
|
|
200
164
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
// Streaming
|
|
205
|
-
for await (const chunk of renderToStream(h(Page))) {
|
|
206
|
-
res.write(chunk);
|
|
207
|
-
}
|
|
165
|
+
```html
|
|
166
|
+
<u-icon name="heart"></u-icon>
|
|
167
|
+
<u-icon name="settings" size="32" stroke-width="1.5"></u-icon>
|
|
208
168
|
```
|
|
209
169
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
---
|
|
213
|
-
|
|
214
|
-
## Built-in Components
|
|
215
|
-
|
|
216
|
-
Avento TS UI provides a set of highly optimized, platform-agnostic UI components:
|
|
217
|
-
|
|
218
|
-
- **Button**: Custom styled interactive button.
|
|
219
|
-
- **Input**: Reactive text input control with controlled states.
|
|
220
|
-
- **List**: Keyed child element list wrapper.
|
|
221
|
-
- **VirtualList**: Zero-overhead windowed list virtualization (scrolling requires external scroll bindings).
|
|
222
|
-
- **Portal**: Renders children outside the standard DOM hierarchy.
|
|
223
|
-
|
|
224
|
-
For complete API details and scroll state implementation examples, see the [Components Documentation](docs/components.md).
|
|
170
|
+
3000+ icons available. See the icon registry for all names.
|
|
225
171
|
|
|
226
172
|
---
|
|
227
173
|
|
|
228
|
-
##
|
|
229
|
-
|
|
230
|
-
```typescript
|
|
231
|
-
import { registerPlugin, createRouter } from '@avento/ts-ui';
|
|
232
|
-
|
|
233
|
-
const router = createRouter({ mode: 'history' });
|
|
234
|
-
registerPlugin(router);
|
|
235
|
-
|
|
236
|
-
router.navigate('/dashboard');
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
The plugin system uses named hooks. Custom plugins receive a `PluginAPI` to register and invoke hooks.
|
|
240
|
-
|
|
241
|
-
---
|
|
242
|
-
|
|
243
|
-
## JSX Support
|
|
244
|
-
|
|
245
|
-
Configure your TypeScript `tsconfig.json`:
|
|
246
|
-
|
|
247
|
-
```json
|
|
248
|
-
{
|
|
249
|
-
"compilerOptions": {
|
|
250
|
-
"jsx": "react-jsx",
|
|
251
|
-
"jsxImportSource": "@avento/ts-ui"
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
The compiler module exports `jsx`, `jsxs`, and `jsxDEV` for the automatic JSX runtime.
|
|
257
|
-
|
|
258
|
-
---
|
|
174
|
+
## Scripts
|
|
259
175
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
|
263
|
-
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
| DOM Adapter | `src/adapters/dom/` | mount(), hydrate(), signal bindings |
|
|
267
|
-
| SSR Adapter | `src/adapters/ssr/` | renderToString(), renderToStream() |
|
|
268
|
-
| Components | `src/components/` | Button, Input, List, Portal |
|
|
269
|
-
| Plugins | `src/plugins/` | Router plugin |
|
|
270
|
-
| Compiler | `src/compiler/` | JSX transform functions |
|
|
271
|
-
| DevTools | `src/devtools/` | Inspector, state logger |
|
|
176
|
+
| Command | Description |
|
|
177
|
+
|---------|-------------|
|
|
178
|
+
| `npm run build` | Build with tsup (ESM + .d.ts) |
|
|
179
|
+
| `npm test` | Run vitest |
|
|
180
|
+
| `npm run typecheck` | TypeScript check |
|
|
181
|
+
| `npm run lint` | ESLint |
|
|
272
182
|
|
|
273
183
|
---
|
|
274
184
|
|
|
@@ -598,6 +598,7 @@ declare class UDialogRoot extends UElement {
|
|
|
598
598
|
connectedCallback(): void;
|
|
599
599
|
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
600
600
|
private _sync;
|
|
601
|
+
private _synced;
|
|
601
602
|
private _updateOpenState;
|
|
602
603
|
private _injectOverlay;
|
|
603
604
|
private _removeOverlay;
|
|
@@ -890,6 +891,8 @@ declare class UBreadcrumb extends UElement {
|
|
|
890
891
|
interface TabsProps {
|
|
891
892
|
value?: string;
|
|
892
893
|
orientation?: 'horizontal' | 'vertical';
|
|
894
|
+
variant?: 'underline' | 'pills' | 'buttons';
|
|
895
|
+
fullWidth?: boolean;
|
|
893
896
|
class?: string;
|
|
894
897
|
onChange?: (value: string) => void;
|
|
895
898
|
}
|
|
@@ -897,12 +900,23 @@ declare class UTabs extends UElement {
|
|
|
897
900
|
static get observedAttributes(): string[];
|
|
898
901
|
private _value;
|
|
899
902
|
private _orientation;
|
|
903
|
+
private _variant;
|
|
904
|
+
private _fullWidth;
|
|
905
|
+
private _tablistEl;
|
|
906
|
+
private _panelsContainer;
|
|
907
|
+
private _indicatorEl;
|
|
908
|
+
private _triggers;
|
|
900
909
|
constructor();
|
|
901
910
|
get value(): string;
|
|
902
911
|
set value(val: string);
|
|
912
|
+
get variant(): string;
|
|
913
|
+
set variant(val: string);
|
|
914
|
+
get fullWidth(): boolean;
|
|
915
|
+
set fullWidth(val: boolean);
|
|
903
916
|
connectedCallback(): void;
|
|
904
917
|
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
905
918
|
private _sync;
|
|
919
|
+
private _updateIndicator;
|
|
906
920
|
_mount(): void;
|
|
907
921
|
}
|
|
908
922
|
|
|
@@ -1055,6 +1069,7 @@ declare class UAnimate extends UElement {
|
|
|
1055
1069
|
|
|
1056
1070
|
interface ModalProps {
|
|
1057
1071
|
open?: boolean;
|
|
1072
|
+
title?: string;
|
|
1058
1073
|
closeOnEscape?: boolean;
|
|
1059
1074
|
closeOnOverlay?: boolean;
|
|
1060
1075
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
@@ -1064,6 +1079,7 @@ interface ModalProps {
|
|
|
1064
1079
|
declare class UModal extends UElement {
|
|
1065
1080
|
static get observedAttributes(): string[];
|
|
1066
1081
|
private _open;
|
|
1082
|
+
private _title;
|
|
1067
1083
|
private _size;
|
|
1068
1084
|
private _closeOnEscape;
|
|
1069
1085
|
private _closeOnOverlay;
|
|
@@ -1072,11 +1088,15 @@ declare class UModal extends UElement {
|
|
|
1072
1088
|
constructor();
|
|
1073
1089
|
get open(): boolean;
|
|
1074
1090
|
set open(val: boolean);
|
|
1091
|
+
get title(): string;
|
|
1092
|
+
set title(val: string);
|
|
1075
1093
|
openModal(): void;
|
|
1076
1094
|
closeModal(): void;
|
|
1077
1095
|
connectedCallback(): void;
|
|
1078
1096
|
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
1079
1097
|
private _sync;
|
|
1098
|
+
private _updateTitle;
|
|
1099
|
+
private _updateSize;
|
|
1080
1100
|
private _updateOpenState;
|
|
1081
1101
|
private _focusFirst;
|
|
1082
1102
|
_mount(): void;
|
|
@@ -1515,4 +1535,61 @@ declare class UForm extends UElement {
|
|
|
1515
1535
|
_mount(): void;
|
|
1516
1536
|
}
|
|
1517
1537
|
|
|
1518
|
-
|
|
1538
|
+
type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
1539
|
+
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
1540
|
+
interface BadgeProps {
|
|
1541
|
+
variant?: BadgeVariant;
|
|
1542
|
+
size?: BadgeSize;
|
|
1543
|
+
dot?: boolean;
|
|
1544
|
+
pill?: boolean;
|
|
1545
|
+
class?: string;
|
|
1546
|
+
}
|
|
1547
|
+
declare class UBadge extends UElement {
|
|
1548
|
+
static get observedAttributes(): string[];
|
|
1549
|
+
private _variant;
|
|
1550
|
+
private _size;
|
|
1551
|
+
private _dot;
|
|
1552
|
+
private _pill;
|
|
1553
|
+
constructor();
|
|
1554
|
+
get variant(): BadgeVariant;
|
|
1555
|
+
set variant(val: BadgeVariant);
|
|
1556
|
+
get size(): BadgeSize;
|
|
1557
|
+
set size(val: BadgeSize);
|
|
1558
|
+
get dot(): boolean;
|
|
1559
|
+
set dot(val: boolean);
|
|
1560
|
+
get pill(): boolean;
|
|
1561
|
+
set pill(val: boolean);
|
|
1562
|
+
connectedCallback(): void;
|
|
1563
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
1564
|
+
private _sync;
|
|
1565
|
+
_mount(): void;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
type CardVariant = 'default' | 'outlined' | 'elevated';
|
|
1569
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
1570
|
+
interface CardProps {
|
|
1571
|
+
variant?: CardVariant;
|
|
1572
|
+
padding?: CardPadding;
|
|
1573
|
+
hoverable?: boolean;
|
|
1574
|
+
as?: string;
|
|
1575
|
+
class?: string;
|
|
1576
|
+
}
|
|
1577
|
+
declare class UCard extends UElement {
|
|
1578
|
+
static get observedAttributes(): string[];
|
|
1579
|
+
private _variant;
|
|
1580
|
+
private _padding;
|
|
1581
|
+
private _hoverable;
|
|
1582
|
+
constructor();
|
|
1583
|
+
get variant(): CardVariant;
|
|
1584
|
+
set variant(val: CardVariant);
|
|
1585
|
+
get padding(): CardPadding;
|
|
1586
|
+
set padding(val: CardPadding);
|
|
1587
|
+
get hoverable(): boolean;
|
|
1588
|
+
set hoverable(val: boolean);
|
|
1589
|
+
connectedCallback(): void;
|
|
1590
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
1591
|
+
private _sync;
|
|
1592
|
+
_mount(): void;
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
export { type TreeProps as $, type AccordionProps as A, type BadgeProps as B, type CalendarProps as C, type DataTableProps as D, type RouterViewProps as E, type FieldProps as F, type GridProps as G, type HoverableProps as H, type InputProps as I, type SelectProps as J, type KeyboardNavigationProps as K, type LabelProps as L, type ModalProps as M, type SortableProps as N, type OverlayProps as O, type PopoverProps as P, type SpacerProps as Q, type RadioGroupProps as R, type StackProps as S, type SwitchProps as T, type TableProps as U, type TabsProps as V, type TextProps as W, type TextareaProps as X, type ToastProps as Y, type TooltipRootProps as Z, type TransitionProps as _, type AnimateProps as a, UModal as a$, type VirtualListProps as a0, type VisuallyHiddenProps as a1, type AccordionItemProps as a2, type AnimatePreset as a3, type BadgeSize as a4, type BadgeVariant as a5, type BoxAs as a6, type BreadcrumbItem as a7, type CardPadding as a8, type CardVariant as a9, UCalendar as aA, UCard as aB, UCheckbox as aC, UCollection as aD, UCombobox as aE, UCommandPalette as aF, UContainer as aG, UContextMenu as aH, UDataTable as aI, UDialogRoot as aJ, UDismissableLayer as aK, UDrawer as aL, UDropdown as aM, UField as aN, UFocusManager as aO, UFocusScope as aP, UFocusTrap as aQ, UForm as aR, UGrid as aS, UHStack as aT, UHoverable as aU, UInput as aV, UKeyboardNavigation as aW, ULabel as aX, ULink as aY, UList as aZ, ULiveRegion as a_, type CollectionSelection as aa, type ComboboxOption as ab, type CommandItem as ac, type ContextMenuItem as ad, type DataTableColumn as ae, type DrawerSide as af, type DropdownItem as ag, type LiveRegionPoliteness as ah, type PopperPlacement as ai, type PresenceAnimation as aj, type RadioProps as ak, type SelectOption as al, type TableColumn as am, type TextColor as an, type TextSize as ao, type TextWeight as ap, type ToastOptions as aq, type TransitionType as ar, type TreeNodeData as as, UAccordion as at, UAccordionItem as au, UAnimate as av, UBadge as aw, UBox as ax, UBreadcrumb as ay, UButton as az, type BoxProps as b, UOverlay as b0, UPopover as b1, UPopper as b2, UPortal as b3, UPresence as b4, UPressable as b5, URadio as b6, URadioGroup as b7, URouterView as b8, USelect as b9, USortable as ba, USpacer as bb, UStack as bc, USwitch as bd, UTable as be, UTabs as bf, UText as bg, UTextarea as bh, UToast as bi, UTooltipRoot as bj, UTransition as bk, UTree as bl, UVirtualList as bm, UVisuallyHidden as bn, createControlledInput as bo, setPortalRoot as bp, type BreadcrumbProps as c, type ButtonProps as d, type CardProps as e, type CheckboxProps as f, type CollectionProps as g, type ComboboxProps as h, type CommandPaletteProps as i, type ContainerProps as j, type ContextMenuProps as k, type DialogRootProps as l, type DismissableLayerProps as m, type DrawerProps as n, type DropdownProps as o, type FocusManagerProps as p, type FocusScopeProps as q, type FocusTrapProps as r, type FormProps as s, type LinkProps as t, type ListProps as u, type LiveRegionProps as v, type PopperProps as w, type PortalProps as x, type PresenceProps as y, type PressableProps as z };
|