natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
97f481e22facce65c09e128cb2f75ab7ec02a24a
sigpro-ui/docs/quick.md
natxocc 60483765c9
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details
Change translate function
2026-04-30 22:13:26 +02:00

794 lines
31 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# SigPro Components – Quick Reference
All components are exported as named exports from the library.
Simple wrapper components accept `(props, children?)` and spread any additional HTML attributes.
---
## Accordion
`Accordion(props)`
| Prop | Type | Default | Description |
|------|----------|------------------------|--------------------------------------|
| `items` | array \| signal | `[]` | Items: `{ title?, content?, open?, classTitle?, classContent? }` |
| `name` | string | auto‑generated (`"acc-…"`) | Radio group name |
| `class` | string | – | Merged with `collapse` |
---
## Alert
`Alert(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `alert` |
---
## Autocomplete
`Autocomplete(props)`
| Prop | Type | Default | Description |
|---------------|----------------|------------------|--------------------------------------------------|
| `items` | array \| signal | `[]` | List of items (string or `{ label, value }`) |
| `value` | signal | – | Selected value (two‑way binding) |
| `onselect` | function | – | Called when an item is chosen `(item)` |
| `placeholder` | string | `"..."` | Input placeholder |
| `class` | string | – | Extra classes (passed to inner `Input`) |
| `...props` | | | All other props forwarded to the internal `Input`|
---
## Avatar
`Avatar(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `avatar` |
---
## AvatarGroup
`AvatarGroup(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-------------------------------------|
| `class` | string | – | Merged with `avatar-group -space-x-6` |
---
## Badge
`Badge(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `badge` |
---
## Breadcrumbs
`Breadcrumbs(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------|
| `class` | string | – | Merged with `breadcrumbs` |
---
## Button
`Button(props, children)`
| Prop | Type | Default | Description |
|------------|---------|---------|-------------------------------------------|
| `class` | string | – | Merged with `btn` |
| `disabled` | boolean | – | Standard disabled attribute |
| *any* | | | All other native `<button>` properties |
---
## Calendar
`Calendar(props)`
| Prop | Type | Default | Description |
|------------|--------------------------|---------|-------------------------------------------------------------------|
| `value` | signal \| string \| object | – | Selected date (string `"YYYY-MM-DD"` or `{ start, end }` for range) |
| `range` | signal \| boolean | `false` | Enable date range selection |
| `hour` | boolean | `false` | Show hour sliders (0‑23) |
| `onChange` | function | – | Called when selection changes `(value)` |
| `class` | string | – | Extra classes |
---
## Card
`Card(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `card` |
---
## CardActions
`CardActions(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|----------------------------------|
| `class` | string | – | Merged with `card-actions` |
---
## CardBody
`CardBody(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------|
| `class` | string | – | Merged with `card-body` |
---
## CardTitle
`CardTitle(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|---------------------------------|
| `class` | string | – | Merged with `card-title` |
---
## Carousel
`Carousel(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `carousel` |
---
## CarouselItem
`CarouselItem(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `carousel-item` |
---
## Chat
`Chat(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `chat` |
---
## ChatBubble
`ChatBubble(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `chat-bubble` |
---
## ChatFooter
`ChatFooter(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `chat-footer` |
---
## ChatHeader
`ChatHeader(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `chat-header` |
---
## ChatImage
`ChatImage(props, children)`
| Prop | Type | Default | Description |
|------|--------------|---------|-------------------------------------------------------------------------------|
| `class` | string | – | Merged with `chat-image avatar` |
| *(children)* | string \| node | – | If a string, used as `src` of an `<img>` inside a rounded `div`; otherwise rendered as content |
---
## Checkbox
`Checkbox(props)`
| Prop | Type | Default | Description |
|-----------|-------------------|---------|------------------------------------------|
| `class` | string | – | Merged with `checkbox` |
| `checked` | boolean \| signal | – | Checked state (can be a signal) |
| `onchange`| function | – | Change handler |
| *any* | | | All standard `<input type="checkbox">` attributes |
---
## Colorpicker
`Colorpicker(props)`
| Prop | Type | Default | Description |
|------------|---------------------|--------------|-------------------------------------------------|
| `value` | signal \| string | `"#000000"` | Selected color |
| `label` | string | – | Optional text shown in the trigger button |
| `onchange` | function | – | Called when a color is picked `(color)` |
| `class` | string | – | Extra classes (applied to the dropdown trigger) |
---
## Datepicker
`Datepicker(props)`
| Prop | Type | Default | Description |
|---------------|--------------------------|---------|--------------------------------------------------------------------|
| `value` | signal | – | Selected date(s) – string or `{ start, end }` |
| `range` | signal \| boolean | `false` | Enable date range selection |
| `hour` | boolean | `false` | Enable hour selection |
| `onChange` | function | – | Change handler `(value)` (if `value` is not a signal) |
| `placeholder` | string | auto | Placeholder text shown when empty |
| `class` | string | – | Extra classes |
---
## Divider
`Divider(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `divider` |
---
## Drawer
`Drawer(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `drawer` |
Use together with `DrawerToggle`, `DrawerContent`, `DrawerSide`, and `DrawerOverlay` to build a responsive drawer.
---
## DrawerToggle
`DrawerToggle(props)`
| Prop | Type | Default | Description |
|-----------|-------------------|---------|-------------------------------------------|
| `checked` | boolean \| signal | – | Drawer open state (checkbox) |
| `class` | string | – | Merged with `drawer-toggle` |
---
## DrawerContent
`DrawerContent(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `drawer-content` |
---
## DrawerSide
`DrawerSide(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|---------------------------------|
| `class` | string | – | Merged with `drawer-side` |
---
## DrawerOverlay
`DrawerOverlay(props)`
| Prop | Type | Default | Description |
|-------|--------|---------|--------------------------------------|
| `for` | string | – | Associates with the drawer toggle id |
| `class`| string | – | Merged with `drawer-overlay` |
---
## Dropdown
`Dropdown(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `dropdown` |
Typically contains `DropdownButton` and `DropdownContent`.
---
## DropdownButton
`DropdownButton(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------------------------|
| `class` | string | – | Merged with `btn`, makes it a dropdown trigger |
---
## DropdownContent
`DropdownContent(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------------------|
| `class` | string | – | Merged with `dropdown-content`, holds menu |
---
## Editor (Rich Text)
`Editor(props)`
| Prop | Type | Default | Description |
|------------|-------------------|---------|------------------------------------------------------------|
| `value` | signal \| string | – | HTML content of the editor (reactive) |
| `onchange` | function | – | Called when content changes `(html)` (if not using signal) |
| `class` | string | – | Extra classes for the outer container |
---
## Fab
`Fab(props, children)`
| Prop | Type | Default | Description |
|--------|--------|---------|---------------------------------------------|
| `icon` | string | – | Icon (passed to `Icon`) for the main button |
| `class`| string | – | Merged with `btn` (the main button) |
---
## Fieldset
`Fieldset(props, children)`
| Prop | Type | Default | Description |
|---------|--------|---------|---------------------------------|
| `label` | string | – | Legend text |
| `class` | string | – | Merged with `fieldset` |
---
## Fileinput
`Fileinput(props)`
| Prop | Type | Default | Description |
|------------|-----------------|---------|------------------------------------------------------------------------------|
| `max` | number | `2` | Maximum file size in MB |
| `accept` | string | `"*"` | Accepted file types |
| `onselect` | function | – | Called when files change `(fileArray)` (use if not binding `value`) |
| `value` | signal | – | Reactive file array (two‑way binding) |
| `class` | string | – | Extra classes |
---
## Icon
`Icon(name)`
| Parameter | Type | Default | Description |
|-----------|--------|---------|-------------------------------------------------------------------------------------|
| `name` | string | – | If it starts with `icon-`, used as class; otherwise displayed as text content/emoji |
Examples: `Icon("icon-[lucide--bold]")` or `Icon("❤️")`
---
## Indicator
`Indicator(props, children)`
| Prop | Type | Default | Description |
|---------|--------|---------|-------------------------------------------------------|
| `value` | node | – | Content for the indicator badge (hidden if falsy) |
| `class` | string | – | Merged with `indicator` and the badge element |
---
## Input
`Input(props)`
| Prop | Type | Default | Description |
|---------------|-------------------|-----------|----------------------------------------------------------------|
| `label` | string | – | Label text |
| `float` | boolean | `false` | Enable floating label style |
| `placeholder` | string | `" "` | Placeholder (defaults to label if omitted) |
| `value` | signal \| string | – | Input value |
| `left` | node | – | Element inserted before the input |
| `right` | node | – | Element inserted after the input |
| `rule` | string | – | HTML validation `pattern` attribute |
| `hint` | string | – | Validation hint text (shown via `.validator-hint`) |
| `content` | node \| function | – | Content shown when input is focused (unused in current source) |
| `type` | string | `"search"`| HTML input type (e.g. `"text"`, `"password"`) |
| `class` | string | – | Merged with `input` |
| *any* | | | All other attributes forwarded to the `<input>` |
Password inputs automatically show an eye toggle.
---
## Kbd
`Kbd(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `kbd` |
---
## List
`List(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `list` |
---
## ListRows
`ListRows(props)`
| Prop | Type | Default | Description |
|---------|----------------|---------|-----------------------------------------------------------------|
| `items` | array \| signal | – | Data array |
| `render`| function | – | Render function: `(item, index) => node` (if omitted, item is used directly) |
| `class` | string | – | Merged with `list-row` on each `<li>` |
---
## Loading
`Loading(props)`
| Prop | Type | Default | Description |
|------|--------|---------|----------------------------------------------|
| `class` | string | – | Merged with `loading loading-spinner` |
---
## Menu
`Menu(props)`
| Prop | Type | Default | Description |
|------------|----------------|---------|---------------------------------------------------------------------|
| `items` | array \| signal | – | Menu items: `{ label, href?, onclick?, children? }` |
| `class` | string | – | Merged with `menu` |
| `children` | | | If provided, manual mode (ignores `items`) |
---
## Modal
`Modal(props, children?)`
| Prop | Type | Default | Description |
|-----------|-------------------|---------|--------------------------------------------|
| `open` | signal \| boolean | – | Controls visibility |
| `title` | string | – | Optional title rendered as `<h3>` |
| `actions` | node | – | Custom actions (replaces default close button) |
| `class` | string | – | Merged with `modal` |
| *children*| | | Modal body content |
---
## Navbar
`Navbar(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `navbar` |
---
## Progress
`Progress(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `progress` |
Standard `<progress>` attributes are supported.
---
## 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 generated styles |
| `class` | string | – | Merged with `radial-progress` |
---
## Radio
`Radio(props)`
| Prop | Type | Default | Description |
|-----------|-------------------|---------|-----------------------------------------|
| `class` | string | – | Merged with `radio` |
| `checked` | boolean | – | Checked state |
| `onchange`| function | – | Change handler |
| *any* | | | Standard `<input type="radio">` attributes |
---
## Range
`Range(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `range` |
All `<input type="range">` attributes are passed through.
---
## Rating
`Rating(props, children?)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------|
| `class` | string | – | Merged with `rating` |
Use with `RatingItems` to build star ratings.
---
## RatingItems
`RatingItems(props)`
| Prop | Type | Default | Description |
|------------|-------------------|---------|----------------------------------------------------------------|
| `count` | number | – | Number of rating items (e.g., stars) |
| `name` | string | – | Radio group name |
| `value` | signal \| number | – | Current rating (reactive) |
| `onchange` | function | – | Called with the selected index `(index)` if `value` is not a signal |
| `class` | string | – | Extra class for the mask (default `"mask"`) |
---
## Select
`Select(props, children?)`
| Prop | Type | Default | Description |
|----------------------|----------------|---------|-----------------------------------------------------------------------------|
| `items` | array \| signal | – | Options list (string or `{ label, value, disabled? }`) |
| `placeholder` | string | – | Placeholder option text |
| `placeholderDisabled`| boolean | `true` | Whether the placeholder is not selectable |
| `label` | string | – | Label text |
| `float` | boolean | `false` | Floating label style |
| `left` | node | – | Element before select |
| `right` | node | – | Element after select |
| `hint` | string | – | Validation hint |
| `value` | signal \| string| – | Selected value |
| `class` | string | – | Merged with `select` |
| *any* | | | All other props forwarded to the `<select>` element |
| `children` | | | If provided, manual mode (ignores `items`) |
---
## Skeleton
`Skeleton(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `skeleton` |
---
## SkeletonText
`SkeletonText(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------------------|
| `class` | string | – | Merged with `skeleton skeleton-text` |
---
## Stack
`Stack(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `stack` |
---
## Stats
`Stats(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------------|
| `class` | string | – | Merged with `stats shadow` |
---
## Stat
`Stat(props)`
| Prop | Type | Default | Description |
|---------|--------|---------|------------------------------|
| `title` | string | – | Stat title |
| `value` | string | – | Stat value |
| `desc` | string | – | Stat description |
| `class` | string | – | Merged with `stat` |
---
## Step
`Step(props, children)`
| Prop | Type | Default | Description |
|---------------|--------|---------|------------------------------------|
| `dataContent` | string | – | Value for the `data-content` attribute |
| `class` | string | – | Merged with `step` |
---
## Steps
`Steps(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `steps` |
---
## Swap
`Swap(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `swap` |
Used together with `SwapToggle`, `SwapOn`, and `SwapOff`.
---
## SwapToggle
`SwapToggle(props)`
| Prop | Type | Default | Description |
|---------|-------------------|---------|--------------------------------------|
| `value` | signal \| boolean | – | Toggle state (checkbox) |
| `class` | string | – | Extra classes on the hidden checkbox |
---
## SwapOn
`SwapOn(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------|
| `class` | string | – | Merged with `swap-on` |
---
## SwapOff
`SwapOff(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|--------------------------------|
| `class` | string | – | Merged with `swap-off` |
---
## Table
`Table(props, children?)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `table` |
*Manual mode* – pass children directly.
*Auto mode* – combine with `TableItems`.
---
## TableItems
`TableItems({ items, columns, header? })`
| Prop | Type | Default | Description |
|-----------|----------------|---------|-------------------------------------------------------------------|
| `items` | array \| signal | – | Data rows |
| `columns` | array | `[]` | Column definitions: `{ key, label?, class?, render? }` |
| `header` | boolean | `true` | Whether to render a `<thead>` with column labels |
---
## Tabs
`Tabs(props)`
| Prop | Type | Default | Description |
|---------------|----------------|---------|----------------------------------------------------------------------|
| `items` | array \| signal | – | Tabs: `{ label, content, closable?, class?, onclick? }` |
| `activeIndex` | signal | – | Index of the active tab (reactive) |
| `onClose` | function | – | Called when a closable tab is closed: `(index, item)` |
| `class` | string | – | Merged with `tabs` |
| *(children)* | | | If provided, manual mode |
---
## Textarea
`Textarea(props)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `textarea` |
| *any*| | | Standard `<textarea>` attributes |
---
## Textrotate
`Textrotate(props, children?)`
| Prop | Type | Default | Description |
|------|--------|---------|-----------------------------------|
| `class` | string | – | Merged with `text-rotate` |
---
## Timeline
`Timeline(props, children)`
| Prop | Type | Default | Description |
|------|--------|---------|------------------------------|
| `class` | string | – | Merged with `timeline` |
---
## Toast
`Toast(message, type?, duration?)`
| Parameter | Type | Default | Description |
|------------|---------------|-------------------|---------------------------------------------------------|
| `message` | string \| signal | – | Toast content (reactive) |
| `type` | string | `"alert-success"` | Alert type class (e.g., `alert-info`, `alert-error`) |
| `duration` | number | `3500` | Auto‑close time in ms (0 = manual close) |
Returns a `close()` function to dismiss the toast programmatically.
---
## Toggle
`Toggle(props)`
| Prop | Type | Default | Description |
|-----------|-------------------|---------|-----------------------------------------|
| `class` | string | – | 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 | – | Merged with `tooltip` |
---
## ColorPalette (internal, but exported)
`ColorPalette(props)`
| Prop | Type | Default | Description |
|------------|-------------------|---------|----------------------------------------|
| `value` | signal \| string | – | Currently selected colour |
| `onchange` | function | – | Called when a colour is chosen `(color)` |
Displays an 8×8 grid of preset colours.
---
## Utility Functions
- **`Locale(lang)`** – Signal to read/set the current language (`"en"` or `"es"`).
- **`t(key)`** – Returns a reactive translation string from the built‑in dictionary based on current locale.
```
Reference in New Issue View Git Blame Copy Permalink