Before repair nav components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
This commit is contained in:
743
docs/quick.md
743
docs/quick.md
@@ -1,227 +1,610 @@
|
||||
# SigPro-UI Quick Reference
|
||||
# SigPro Components – Quick Reference
|
||||
|
||||
**Status:** Active / WIP
|
||||
All simple components use the pattern `ComponentName(props, children?)` and accept any additional HTML attributes.
|
||||
|
||||
## Accordion
|
||||
`Accordion(props)`
|
||||
|
||||
## Global Initialization
|
||||
|
||||
```javascript
|
||||
import "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
// All components (Button, Input, Table, Toast, etc.) are now globally available.
|
||||
```
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | `[]` | Array of items. Each item: `{ title, content?, open? }` or a string. |
|
||||
| `type` | `'radio'` \| `'details'` | `'radio'` | Collapse mode |
|
||||
| `variant` | string | `''` | `'arrow'` or `'plus'` for an icon variant |
|
||||
| `name` | string | auto‑generated | Group name for radio inputs |
|
||||
| `class` | string | - | Extra classes merged with `collapse` |
|
||||
|
||||
---
|
||||
|
||||
## Core Components
|
||||
## Alert
|
||||
`Alert(props, children)`
|
||||
|
||||
| Component | Purpose | Basic Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Button** | Styled button with DaisyUI | `button({ class: "btn-primary" }, "Submit")` |
|
||||
| **Input** | Reactive text field with validation | `input({ value: $name, validate: (v) => !v ? "Required" : "" })` |
|
||||
| **Select** | Dropdown selection menu | `Select({ options: ["Admin", "User"], value: $role })` |
|
||||
| **Checkbox** | Binary toggle (boolean) | `Checkbox({ label: "Active", checked: $isActive })` |
|
||||
| **Table** | Data grid with column rendering | `Table({ items: $data, columns: [...] })` |
|
||||
| **Modal** | Overlay dialog controlled by a Signal | `Modal({ open: $show, title: "Alert" }, "Message")` |
|
||||
| **Badge** | Small status indicator or tag | `Badge({ class: "badge-outline" }, "Beta")` |
|
||||
| **Alert** | Contextual notification | `Alert({ type: "info" }, "Update available")` |
|
||||
| **Dropdown** | Contextual overlay menu | `Dropdown({ label: "Menu" }, [Link1, Link2])` |
|
||||
| **Tabs** | Reactive tab-based navigation | `Tabs({ items: ["Home", "Settings"], active: $index })` |
|
||||
| **Stat** | Statistical data block (KPIs) | `Stat({ label: "Sales", value: "$400" })` |
|
||||
| **Toast** | Temporary floating notification | `Toast("Done!", "alert-success", 3000)` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `alert` |
|
||||
|
||||
---
|
||||
|
||||
## Forms & Inputs
|
||||
## Autocomplete
|
||||
`Autocomplete(props)`
|
||||
|
||||
| Component | Description | Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Input** | Text input with floating label, validation, password toggle | `input({ label: "Email", type: "email", value: $email, validate: validateEmail })` |
|
||||
| **Select** | Dropdown selector | `Select({ label: "Role", options: ["Admin", "User"], value: $role })` |
|
||||
| **Autocomplete** | Searchable dropdown with filtering | `autocomplete({ label: "Country", options: countryList, value: $country })` |
|
||||
| **Datepicker** | Date picker (single or range mode) | `Datepicker({ label: "Date", value: $date, range: false })` |
|
||||
| **Colorpicker** | Visual color picker with palette | `Colorpicker({ label: "Theme", value: $color })` |
|
||||
| **Checkbox** | Checkbox or toggle switch | `Checkbox({ label: "Remember me", value: $remember })` |
|
||||
| **Radio** | Radio button | `Radio({ label: "Option 1", value: $selected, name: "group" })` |
|
||||
| **Range** | Slider control | `Range({ label: "Volume", min: 0, max: 100, value: $volume })` |
|
||||
| **Rating** | Star rating component | `Rating({ value: $stars, count: 5 })` |
|
||||
| **Swap** | Toggle between two states (sun/moon) | `Swap({ on: "🌞", off: "🌙", value: $isDark })` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | `[]` | Autocomplete items |
|
||||
| `value` | signal | - | Selected value |
|
||||
| `onselect` | function | - | Called when an item is selected |
|
||||
| `placeholder` | string | `'Buscar...'` | Input placeholder |
|
||||
| `class` | string | - | Extra classes |
|
||||
| `...props` | | | All other props are passed to the internal `Input` |
|
||||
|
||||
---
|
||||
|
||||
## Input Validation
|
||||
## Badge
|
||||
`Badge(props, children)`
|
||||
|
||||
The `Input` component supports real-time validation via the `validate` prop:
|
||||
|
||||
```javascript
|
||||
const email = $('');
|
||||
|
||||
input({
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
icon: 'icon-[lucide--mail]',
|
||||
validate: (value) => {
|
||||
if (!value) return '';
|
||||
if (!value.includes('@')) return 'Email must contain @';
|
||||
if (!value.includes('.')) return 'Email must contain .';
|
||||
return '';
|
||||
},
|
||||
oninput: (e) => email(e.target.value)
|
||||
})
|
||||
```
|
||||
|
||||
**How it works:**
|
||||
- Returns `''` or `null` → no error
|
||||
- Returns a string → shows error message and adds `input-error` class
|
||||
- Validates on every keystroke
|
||||
- No external state needed for error messages
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `badge` |
|
||||
|
||||
---
|
||||
|
||||
## Data Display
|
||||
## Button
|
||||
`Button(props, children)`
|
||||
|
||||
| Component | Description | Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Table** | Reactive data grid with columns | `Table({ items: $users, columns: [{ label: "Name", key: "name" }] })` |
|
||||
| **List** | Vertical list with custom rendering | `List({ items: $items, render: (item) => item.name })` |
|
||||
| **Badge** | Small status indicators | `Badge({ class: "badge-primary" }, "New")` |
|
||||
| **Stat** | Statistical data blocks (KPIs) | `Stat({ label: "Total", value: "1.2k", desc: "Monthly" })` |
|
||||
| **Timeline** | Vertical/horizontal timeline | `Timeline({ items: [{ title: "Step 1", detail: "Completed" }] })` |
|
||||
| **Stack** | Stacked elements | `Stack({}, [Card1, Card2, Card3])` |
|
||||
| **Indicator** | Badge on corner of element | `Indicator({ value: () => count() }, button(...))` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `button` |
|
||||
| `disabled` | boolean | - | Standard HTML attribute |
|
||||
| *any* | | | All other standard `<button>` attributes |
|
||||
|
||||
---
|
||||
|
||||
## Feedback & Overlays
|
||||
## Calendar
|
||||
`Calendar(props)`
|
||||
|
||||
| Component | Description | Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Alert** | Inline contextual notification | `Alert({ type: "success" }, "Changes saved!")` |
|
||||
| **Modal** | Dialog overlay | `Modal({ open: $isOpen, title: "Confirm" }, "Are you sure?")` |
|
||||
| **Toast** | Floating notification (auto-stacking) | `Toast("Action completed", "alert-info", 3000)` |
|
||||
| **Tooltip** | Hover tooltip wrapper | `Tooltip({ tip: "Help text", ui: "tooltip-top" }, button(...))` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | signal \| string \| object | - | Selected date(s) |
|
||||
| `range` | signal \| boolean | `false` | Enable range mode |
|
||||
| `hour` | boolean | `false` | Show hour sliders |
|
||||
| `onChange` | function | - | Called when selection changes |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
---
|
||||
|
||||
## Navigation & Layout
|
||||
## Card
|
||||
`Card(props, children)`
|
||||
|
||||
| Component | Description | Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Navbar** | Top navigation bar | `Navbar({}, [Logo, Menu, Avatar])` |
|
||||
| **Menu** | Vertical navigation menu | `Menu({ items: [{ label: "Home", onclick: goHome }] })` |
|
||||
| **Drawer** | Side drawer (off-canvas) | `Drawer({ id: "my-drawer", open: $isOpen, content: Main, side: SideMenu })` |
|
||||
| **Tabs** | Content switching | `Tabs({ items: [{ label: "Tab1", content: Panel1 }] })` |
|
||||
| **Accordion** | Collapsible sections | `Accordion({ title: "Details" }, "Hidden content")` |
|
||||
| **Dropdown** | Contextual menus | `Dropdown({ label: "Options" }, [MenuLink("Edit")])` |
|
||||
| **Fieldset** | Form grouping with legend | `Fieldset({ legend: "Personal Info" }, [input(...)])` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `card` |
|
||||
|
||||
---
|
||||
|
||||
## Interaction & Utilities
|
||||
## CardActions
|
||||
`CardActions(props, children)`
|
||||
|
||||
| Component | Description | Example |
|
||||
| :--- | :--- | :--- |
|
||||
| **Fab** | Floating Action Button with actions | `Fab({ icon: "+", actions: [{ label: "Add", onclick: add }] })` |
|
||||
| **Indicator** | Badge indicator wrapper | `Indicator({ value: () => unread() }, button(...))` |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `card-actions` |
|
||||
|
||||
---
|
||||
|
||||
## Internationalization (i18n)
|
||||
## CardBody
|
||||
`CardBody(props, children)`
|
||||
|
||||
Built-in locale system with Spanish and English support.
|
||||
|
||||
```javascript
|
||||
// Set global UI language
|
||||
Locale("en");
|
||||
|
||||
// Get translated string (returns a reactive signal)
|
||||
const closeText = tt("close"); // "Close" or "Cerrar"
|
||||
|
||||
```
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `card-body` |
|
||||
|
||||
---
|
||||
|
||||
## Implementation Notes
|
||||
## CardTitle
|
||||
`CardTitle(props, children)`
|
||||
|
||||
1. **Atomic Reactivity**: Components accepting `value` or `checked` bind directly to **SigPro Signals**. Updates happen instantly without full page re-renders.
|
||||
|
||||
2. **DaisyUI v5**: Pass any daisyUI styling via the `class` attribute.
|
||||
|
||||
```javascript
|
||||
button({ class: "btn-primary btn-sm rounded-full shadow-lg" }, "Click")
|
||||
```
|
||||
|
||||
3. **Zero Imports (Global Mode)**: After calling `UI()`, all components are attached to `window`. No manual imports needed.
|
||||
|
||||
4. **Self-Cleaning**: Components internally manage `_cleanups` to destroy observers and event listeners when removed from the DOM.
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `card-title` |
|
||||
|
||||
---
|
||||
|
||||
## Advanced Examples
|
||||
## Carousel
|
||||
`Carousel(props, children)`
|
||||
|
||||
### Reactive Form with Validation
|
||||
|
||||
```javascript
|
||||
const name = $("");
|
||||
|
||||
input({
|
||||
value: name,
|
||||
placeholder: "Name",
|
||||
validate: (value) => {
|
||||
if (!value) return "Name is required";
|
||||
if (value.length < 3) return "Name too short";
|
||||
return "";
|
||||
},
|
||||
oninput: (e) => name(e.target.value)
|
||||
})
|
||||
```
|
||||
|
||||
### API Request Pattern
|
||||
|
||||
```javascript
|
||||
const userId = $("123");
|
||||
const userData = $(null);
|
||||
|
||||
watch(userId, async (id) => {
|
||||
loading(true);
|
||||
userData(await fetch(`/api/user/${id}`).then(r => r.json()));
|
||||
loading(false);
|
||||
});
|
||||
|
||||
// In template
|
||||
when(() => userData(), () => Alert({ type: "success" }, userData()?.name))
|
||||
```
|
||||
|
||||
### Modal with Confirm Action
|
||||
|
||||
```javascript
|
||||
const showModal = $(false);
|
||||
|
||||
Modal({
|
||||
open: showModal,
|
||||
title: "Delete Item",
|
||||
buttons: [
|
||||
button({ class: "btn-error", onclick: () => { deleteItem(); showModal(false); } }, "Delete")
|
||||
]
|
||||
}, "Are you sure you want to delete this item?");
|
||||
```
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `carousel` |
|
||||
|
||||
---
|
||||
|
||||
## Component Props Quick Reference
|
||||
## CarouselItem
|
||||
`CarouselItem(props, children)`
|
||||
|
||||
| Component | Key Props |
|
||||
| :--- | :--- |
|
||||
| `Button` | `class`, `disabled`, `loading`, `icon` |
|
||||
| `Input` | `value`, `validate`, `type`, `placeholder`, `icon`, `disabled` |
|
||||
| `Select` | `label`, `options`, `value`, `disabled` |
|
||||
| `Modal` | `open`, `title`, `buttons` |
|
||||
| `Table` | `items`, `columns`, `zebra`, `pinRows`, `empty` |
|
||||
| `Alert` | `type` (info/success/warning/error), `soft`, `actions` |
|
||||
| `Toast` | `message`, `type`, `duration` |
|
||||
| `Datepicker` | `value`, `range`, `label`, `placeholder` |
|
||||
| `Autocomplete` | `options`, `value`, `onselect`, `label` |
|
||||
| `Indicator` | `value` (function that returns number/string) |
|
||||
| `Tooltip` | `tip`, `ui` (tooltip-top/bottom/left/right) |
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `carousel-item` |
|
||||
|
||||
---
|
||||
|
||||
## Chat
|
||||
`Chat(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `chat` |
|
||||
|
||||
---
|
||||
|
||||
## ChatBubble
|
||||
`ChatBubble(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `chat-bubble` |
|
||||
|
||||
---
|
||||
|
||||
## ChatFooter
|
||||
`ChatFooter(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `chat-footer` |
|
||||
|
||||
---
|
||||
|
||||
## ChatHeader
|
||||
`ChatHeader(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `chat-header` |
|
||||
|
||||
---
|
||||
|
||||
## ChatImage
|
||||
`ChatImage(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `chat-image avatar` |
|
||||
| *(children)* | string \| node | - | If a string, used as `src` of an `<img>` inside a rounded `div`; otherwise passed as content. |
|
||||
|
||||
---
|
||||
|
||||
## Checkbox
|
||||
`Checkbox(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `checkbox` |
|
||||
| `checked` | boolean \| signal | - | Checked state (can be a signal) |
|
||||
| `onchange` | function | - | Change handler |
|
||||
| *any* | | | All standard `<input>` attributes |
|
||||
|
||||
---
|
||||
|
||||
## Colorpicker
|
||||
`Colorpicker(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | signal \| string | `'#000000'` | Selected color |
|
||||
| `label` | string | - | Optional label inside the trigger |
|
||||
| `onchange` | function | - | Called when a color is picked (if `value` is not a signal) |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
---
|
||||
|
||||
## Datepicker
|
||||
`Datepicker(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | signal | - | Selected date(s) |
|
||||
| `range` | signal \| boolean | `false` | Range mode |
|
||||
| `hour` | boolean | `false` | Enable hour selection |
|
||||
| `onChange` | function | - | Change handler (if `value` is not a signal) |
|
||||
| `placeholder` | string | auto | Placeholder text |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
---
|
||||
|
||||
## Divider
|
||||
`Divider(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `divider` |
|
||||
|
||||
---
|
||||
|
||||
## Drawer
|
||||
`Drawer(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `open` | signal \| boolean | - | Drawer open state |
|
||||
| `side` | node \| signal | - | Sidebar content (can be a signal) |
|
||||
| `id` | string | auto‑generated | Drawer ID |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
**children** – Main content (`.drawer-content`).
|
||||
|
||||
---
|
||||
|
||||
## Dropdown
|
||||
`Dropdown(props, children?)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `trigger` | node | `'Dropdown'` | Summary content |
|
||||
| `items` | array \| signal | - | Dropdown items: `{ label, onclick? }` |
|
||||
| `class` | string | - | Extra classes merged with `dropdown` |
|
||||
|
||||
If `children` is provided, it replaces the auto‑generated menu.
|
||||
|
||||
---
|
||||
|
||||
## Fab
|
||||
`Fab(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `fab` |
|
||||
|
||||
---
|
||||
|
||||
## Fieldset
|
||||
`Fieldset(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `legend` | string | - | Legend text (rendered as `<legend>`) |
|
||||
| `class` | string | - | Extra classes merged with `fieldset` |
|
||||
|
||||
---
|
||||
|
||||
## Fileinput
|
||||
`Fileinput(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `max` | number | `2` | Max file size in MB |
|
||||
| `accept` | string | `'*'` | Accepted file types |
|
||||
| `onselect` | function | - | Called when files change (receives array) |
|
||||
| `value` | signal | - | Alternative to `onselect` for signal binding |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
---
|
||||
|
||||
## Icon
|
||||
`Icon(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | If the value starts with `icon-`, used as class; otherwise becomes content |
|
||||
|
||||
---
|
||||
|
||||
## Indicator
|
||||
`Indicator(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | node | - | Content of the indicator badge |
|
||||
| `class` | string | - | Extra classes merged with `indicator` |
|
||||
|
||||
---
|
||||
|
||||
## Input
|
||||
`Input(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `label` | string | - | Label text |
|
||||
| `float` | boolean | `false` | Floating label |
|
||||
| `left` | node | - | Element on the left |
|
||||
| `right` | node | - | Element on the right |
|
||||
| `hint` | string | - | Validation hint |
|
||||
| `content` | node \| function | - | Content shown when focused (can be a function receiving `isFocused`) |
|
||||
| `rule` | string | - | Validation pattern |
|
||||
| `type` | string | `'text'` | Input type (`text`, `password`, etc.) |
|
||||
| `value` | signal \| string | - | Input value |
|
||||
| `class` | string | - | Extra classes |
|
||||
| *any* | | | All other props are passed to the `<input>` |
|
||||
|
||||
---
|
||||
|
||||
## Kbd
|
||||
`Kbd(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `kbd` |
|
||||
|
||||
---
|
||||
|
||||
## LabelFloat
|
||||
`LabelFloat(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `floating-label` |
|
||||
|
||||
---
|
||||
|
||||
## LabelInput
|
||||
`LabelInput(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `input` |
|
||||
|
||||
---
|
||||
|
||||
## LabelSelect
|
||||
`LabelSelect(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `select` |
|
||||
|
||||
---
|
||||
|
||||
## Loading
|
||||
`Loading(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `loading loading-spinner` |
|
||||
|
||||
---
|
||||
|
||||
## Menu
|
||||
`Menu(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | `[]` | Menu items: `{ label, href?, onclick?, children? }` |
|
||||
| `keyFn` | function | `(it, idx) => it?.id ?? idx` | Key function for reactivity |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
If `children` is provided, manual mode.
|
||||
|
||||
---
|
||||
|
||||
## Navbar
|
||||
`Navbar(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `navbar` |
|
||||
|
||||
---
|
||||
|
||||
## Progress
|
||||
`Progress(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `progress` |
|
||||
|
||||
---
|
||||
|
||||
## Radial
|
||||
`Radial(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | number | `0` | Progress value (sets CSS `--value` and default text) |
|
||||
| `style` | string | - | Additional inline styles appended to the defaults |
|
||||
| `class` | string | - | Extra classes merged with `radial-progress` |
|
||||
|
||||
---
|
||||
|
||||
## Radio
|
||||
`Radio(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `radio` |
|
||||
| `checked` | boolean | - | Checked state |
|
||||
| `onchange` | function | - | Change handler |
|
||||
|
||||
---
|
||||
|
||||
## Range
|
||||
`Range(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `range` |
|
||||
| `min` | number | - | Standard range attribute |
|
||||
| `max` | number | - | Standard range attribute |
|
||||
| `value` | number | - | Standard range attribute |
|
||||
|
||||
---
|
||||
|
||||
## Rating
|
||||
`Rating(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | number \| signal | - | Selected rating |
|
||||
| `count` | number | `5` | Number of stars |
|
||||
| `mask` | string | `'mask-star'` | Shape class (e.g., `'mask-heart'`) |
|
||||
| `onchange` | function | - | Called when a star is clicked |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
---
|
||||
|
||||
## Select
|
||||
`Select(props, children?)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | - | Options list |
|
||||
| `placeholder` | string | - | Placeholder option text |
|
||||
| `placeholderDisabled` | boolean | `true` | Whether the placeholder is disabled |
|
||||
| `label` | string | - | Label text |
|
||||
| `float` | boolean | `false` | Floating label style |
|
||||
| `left` | node | - | Element left of select |
|
||||
| `right` | node | - | Element right of select |
|
||||
| `hint` | string | - | Validation hint |
|
||||
| `value` | signal \| string | - | Selected value |
|
||||
| `keyFn` | function | auto | Key function for reactivity |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
If `children` is provided, manual mode.
|
||||
|
||||
---
|
||||
|
||||
## Skeleton
|
||||
`Skeleton(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `skeleton` |
|
||||
|
||||
---
|
||||
|
||||
## SkeletonText
|
||||
`SkeletonText(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `skeleton skeleton-text` |
|
||||
|
||||
---
|
||||
|
||||
## Stack
|
||||
`Stack(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `stack` |
|
||||
|
||||
---
|
||||
|
||||
## Step
|
||||
`Step(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `dataContent` | string | - | Value for the `data-content` attribute |
|
||||
| `class` | string | - | Extra classes merged with `step` |
|
||||
|
||||
---
|
||||
|
||||
## Steps
|
||||
`Steps(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `steps` |
|
||||
|
||||
---
|
||||
|
||||
## Swap
|
||||
`Swap(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | signal \| boolean | - | Checked state (can be a signal) |
|
||||
| `on` | node | - | Content for the “on” state |
|
||||
| `off` | node | - | Content for the “off” state |
|
||||
| `class` | string | - | Extra classes merged with `swap` |
|
||||
|
||||
---
|
||||
|
||||
## Table
|
||||
`Table(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | `[]` | Data rows |
|
||||
| `columns` | array | `[]` | Column definitions: `{ key?, label?, class?, render? }` |
|
||||
| `header` | boolean | `true` | Show header row |
|
||||
| `keyFn` | function | `(item, idx) => item?.id ?? idx` | Key function for reactivity |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
If `children` is provided, manual mode (ignores `items`).
|
||||
|
||||
---
|
||||
|
||||
## Tabs
|
||||
`Tabs(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `items` | array \| signal | `[]` | Tab items: `{ label, content, closable?, class?, contentClass?, onclick? }` |
|
||||
| `activeIndex` | signal | - | Index of the active tab |
|
||||
| `onClose` | function | - | Called when a closable tab is closed: `(idx, item)` |
|
||||
| `class` | string | - | Extra classes |
|
||||
|
||||
If `children` is provided, manual mode.
|
||||
|
||||
---
|
||||
|
||||
## TextRotate
|
||||
`TextRotate(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `words` | array \| string | - | Array of words or comma‑separated string |
|
||||
| `class` | string | - | Extra classes merged with `text-rotate` |
|
||||
|
||||
---
|
||||
|
||||
## Textarea
|
||||
`Textarea(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `textarea` |
|
||||
| *any* | | | All standard `<textarea>` attributes |
|
||||
|
||||
---
|
||||
|
||||
## Timeline
|
||||
`Timeline(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `vertical` | boolean | `true` | If `false`, horizontal layout |
|
||||
| `compact` | boolean | `false` | Compact mode |
|
||||
| `class` | string | - | Extra classes merged with `timeline` |
|
||||
|
||||
---
|
||||
|
||||
## Toast
|
||||
`Toast(message, type?, duration?)`
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| `message` | string \| signal | - | Toast text |
|
||||
| `type` | string | `'alert-success'` | Alert type class |
|
||||
| `duration` | number | `3500` | Auto‑close time in ms (0 for manual close) |
|
||||
|
||||
Returns a `close` function.
|
||||
|
||||
---
|
||||
|
||||
## Toggle
|
||||
`Toggle(props)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `class` | string | - | Extra classes merged with `toggle` |
|
||||
| `checked` | boolean \| signal | - | Checked state |
|
||||
| `onchange` | function | - | Change handler |
|
||||
|
||||
---
|
||||
|
||||
## Tooltip
|
||||
`Tooltip(props, children)`
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `tip` | string | - | Tooltip text (sets `data-tip`) |
|
||||
| `class` | string | - | Extra classes merged with `tooltip` |
|
||||
Reference in New Issue
Block a user