762 lines
36 KiB
Plaintext
762 lines
36 KiB
Plaintext
# WRNexusJS 0.3.5 comprehensive documentation index
|
|
|
|
Status: Private Developer Preview. Runtime: Bun. UI language: .wrn.
|
|
This is the documentation application, not the framework monorepo.
|
|
|
|
- https://wrnexusjs.dev/
|
|
- https://wrnexusjs.dev/access
|
|
- https://wrnexusjs.dev/getting-started
|
|
- https://wrnexusjs.dev/tutorial
|
|
- https://wrnexusjs.dev/architecture
|
|
- https://wrnexusjs.dev/language
|
|
- https://wrnexusjs.dev/packages
|
|
- https://wrnexusjs.dev/components
|
|
- https://wrnexusjs.dev/guides/project-structure
|
|
- https://wrnexusjs.dev/guides/routing
|
|
- https://wrnexusjs.dev/guides/pages-and-components
|
|
- https://wrnexusjs.dev/guides/server-data
|
|
- https://wrnexusjs.dev/guides/api-routes
|
|
- https://wrnexusjs.dev/guides/middleware
|
|
- https://wrnexusjs.dev/guides/forms-and-validation
|
|
- https://wrnexusjs.dev/guides/authentication
|
|
- https://wrnexusjs.dev/guides/authorization
|
|
- https://wrnexusjs.dev/guides/security
|
|
- https://wrnexusjs.dev/guides/database
|
|
- https://wrnexusjs.dev/guides/uploads
|
|
- https://wrnexusjs.dev/guides/realtime
|
|
- https://wrnexusjs.dev/guides/pubsub
|
|
- https://wrnexusjs.dev/guides/queues
|
|
- https://wrnexusjs.dev/guides/testing
|
|
- https://wrnexusjs.dev/guides/workspaces-and-gateway
|
|
- https://wrnexusjs.dev/guides/deployment
|
|
- https://wrnexusjs.dev/guides/configuration-and-profiles
|
|
- https://wrnexusjs.dev/guides/i18n-and-themes
|
|
- https://wrnexusjs.dev/guides/mobile
|
|
- https://wrnexusjs.dev/guides/observability
|
|
- https://wrnexusjs.dev/guides/upgrading
|
|
- https://wrnexusjs.dev/guides/troubleshooting
|
|
- https://wrnexusjs.dev/examples
|
|
- https://wrnexusjs.dev/showcase
|
|
- https://wrnexusjs.dev/benchmarks
|
|
- https://wrnexusjs.dev/roadmap
|
|
- https://wrnexusjs.dev/changelog
|
|
- https://wrnexusjs.dev/releases/0.3.5
|
|
- https://wrnexusjs.dev/security
|
|
- https://wrnexusjs.dev/support
|
|
- https://wrnexusjs.dev/license
|
|
- https://wrnexusjs.dev/search
|
|
- https://wrnexusjs.dev/404
|
|
- https://wrnexusjs.dev/packages/ai
|
|
- https://wrnexusjs.dev/packages/authz
|
|
- https://wrnexusjs.dev/packages/cli
|
|
- https://wrnexusjs.dev/packages/compiler
|
|
- https://wrnexusjs.dev/packages/core
|
|
- https://wrnexusjs.dev/packages/csr
|
|
- https://wrnexusjs.dev/packages/db
|
|
- https://wrnexusjs.dev/packages/dev-server
|
|
- https://wrnexusjs.dev/packages/dev-toolbar
|
|
- https://wrnexusjs.dev/packages/encryption
|
|
- https://wrnexusjs.dev/packages/helpers
|
|
- https://wrnexusjs.dev/packages/i18n
|
|
- https://wrnexusjs.dev/packages/jwt
|
|
- https://wrnexusjs.dev/packages/mobile
|
|
- https://wrnexusjs.dev/packages/native
|
|
- https://wrnexusjs.dev/packages/oauth
|
|
- https://wrnexusjs.dev/packages/plugin
|
|
- https://wrnexusjs.dev/packages/pubsub
|
|
- https://wrnexusjs.dev/packages/queue
|
|
- https://wrnexusjs.dev/packages/reactive
|
|
- https://wrnexusjs.dev/packages/router
|
|
- https://wrnexusjs.dev/packages/ssr
|
|
- https://wrnexusjs.dev/packages/styles
|
|
- https://wrnexusjs.dev/packages/syntax
|
|
- https://wrnexusjs.dev/packages/test
|
|
- https://wrnexusjs.dev/packages/tracking
|
|
- https://wrnexusjs.dev/packages/ui
|
|
- https://wrnexusjs.dev/packages/uploader
|
|
- https://wrnexusjs.dev/packages/validation
|
|
- https://wrnexusjs.dev/components/accordion
|
|
- https://wrnexusjs.dev/components/advanced-date-picker
|
|
- https://wrnexusjs.dev/components/advanced-range-slider
|
|
- https://wrnexusjs.dev/components/advanced-select
|
|
- https://wrnexusjs.dev/components/alert
|
|
- https://wrnexusjs.dev/components/avatar
|
|
- https://wrnexusjs.dev/components/avatar-group
|
|
- https://wrnexusjs.dev/components/badge
|
|
- https://wrnexusjs.dev/components/blockquote
|
|
- https://wrnexusjs.dev/components/breadcrumb
|
|
- https://wrnexusjs.dev/components/button
|
|
- https://wrnexusjs.dev/components/button-group
|
|
- https://wrnexusjs.dev/components/card
|
|
- https://wrnexusjs.dev/components/carousel
|
|
- https://wrnexusjs.dev/components/chart
|
|
- https://wrnexusjs.dev/components/chat-bubble
|
|
- https://wrnexusjs.dev/components/checkbox
|
|
- https://wrnexusjs.dev/components/clipboard
|
|
- https://wrnexusjs.dev/components/collapse
|
|
- https://wrnexusjs.dev/components/color-picker
|
|
- https://wrnexusjs.dev/components/columns
|
|
- https://wrnexusjs.dev/components/combo-box
|
|
- https://wrnexusjs.dev/components/confetti
|
|
- https://wrnexusjs.dev/components/container
|
|
- https://wrnexusjs.dev/components/context-menu
|
|
- https://wrnexusjs.dev/components/copy-markup
|
|
- https://wrnexusjs.dev/components/custom-scrollbar
|
|
- https://wrnexusjs.dev/components/data-map
|
|
- https://wrnexusjs.dev/components/data-table
|
|
- https://wrnexusjs.dev/components/date-picker
|
|
- https://wrnexusjs.dev/components/device-frame
|
|
- https://wrnexusjs.dev/components/divider
|
|
- https://wrnexusjs.dev/components/drag-and-drop
|
|
- https://wrnexusjs.dev/components/drawer
|
|
- https://wrnexusjs.dev/components/dropdown
|
|
- https://wrnexusjs.dev/components/file-input
|
|
- https://wrnexusjs.dev/components/file-upload
|
|
- https://wrnexusjs.dev/components/file-upload-progress
|
|
- https://wrnexusjs.dev/components/grid
|
|
- https://wrnexusjs.dev/components/image
|
|
- https://wrnexusjs.dev/components/input
|
|
- https://wrnexusjs.dev/components/input-group
|
|
- https://wrnexusjs.dev/components/input-number
|
|
- https://wrnexusjs.dev/components/kbd
|
|
- https://wrnexusjs.dev/components/layout-splitter
|
|
- https://wrnexusjs.dev/components/legend-indicator
|
|
- https://wrnexusjs.dev/components/link
|
|
- https://wrnexusjs.dev/components/list
|
|
- https://wrnexusjs.dev/components/list-group
|
|
- https://wrnexusjs.dev/components/map
|
|
- https://wrnexusjs.dev/components/marquee
|
|
- https://wrnexusjs.dev/components/mega-menu
|
|
- https://wrnexusjs.dev/components/modal
|
|
- https://wrnexusjs.dev/components/nav
|
|
- https://wrnexusjs.dev/components/navbar
|
|
- https://wrnexusjs.dev/components/pagination
|
|
- https://wrnexusjs.dev/components/pin-input
|
|
- https://wrnexusjs.dev/components/popover
|
|
- https://wrnexusjs.dev/components/progress
|
|
- https://wrnexusjs.dev/components/radio
|
|
- https://wrnexusjs.dev/components/range-slider
|
|
- https://wrnexusjs.dev/components/rating
|
|
- https://wrnexusjs.dev/components/scrollspy
|
|
- https://wrnexusjs.dev/components/search-box
|
|
- https://wrnexusjs.dev/components/select
|
|
- https://wrnexusjs.dev/components/sidebar
|
|
- https://wrnexusjs.dev/components/skeleton
|
|
- https://wrnexusjs.dev/components/spinner
|
|
- https://wrnexusjs.dev/components/stepper
|
|
- https://wrnexusjs.dev/components/strong-password
|
|
- https://wrnexusjs.dev/components/styled-icon
|
|
- https://wrnexusjs.dev/components/switch
|
|
- https://wrnexusjs.dev/components/table
|
|
- https://wrnexusjs.dev/components/tabs
|
|
- https://wrnexusjs.dev/components/textarea
|
|
- https://wrnexusjs.dev/components/timeline
|
|
- https://wrnexusjs.dev/components/time-picker
|
|
- https://wrnexusjs.dev/components/toast
|
|
- https://wrnexusjs.dev/components/toast-notifications
|
|
- https://wrnexusjs.dev/components/toggle-count
|
|
- https://wrnexusjs.dev/components/toggle-password
|
|
- https://wrnexusjs.dev/components/tooltip
|
|
- https://wrnexusjs.dev/components/tree-view
|
|
- https://wrnexusjs.dev/components/typography
|
|
- https://wrnexusjs.dev/components/wysiwyg-editor
|
|
|
|
For exact APIs, use installed package README files followed by exported declarations.
|
|
|
|
# Complete @wrnexus/ui component reference
|
|
|
|
### Accordion
|
|
Mount: data-component="Accordion"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", items: string = [], multiple: boolean = false, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### AdvancedDatePicker
|
|
Mount: data-component="AdvancedDatePicker"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Advanced Date Picker", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### AdvancedRangeSlider
|
|
Mount: data-component="AdvancedRangeSlider"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Advanced Range Slider", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### AdvancedSelect
|
|
Mount: data-component="AdvancedSelect"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Advanced Select", name: string = "", value: string = "", values: string = [], options: string = [], groups: string = [], placeholder: string = "Select an option", placeholderIcon: string = "", searchPlaceholder: string = "Search options…", multiple: boolean = false, searchable: boolean = true, defaultOpen: boolean = false, clearable: boolean = true, allowEmpty: boolean = true, tags: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading options…", emptyLabel: string = "No options found", selectedOptionsLabel: string = "Selected options", clearLabel: string = "Clear selection", createLabel: string = "Create", loadMoreLabel: string = "Load more", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, maxSelections: number = 0, showCounter: boolean = false, counterTemplate: string = "{selected} selected", optionTemplate: string = "default", selectedTemplate: string = "default", closeOnSelect: boolean = true, scrollToSelected: boolean = true, fixed: boolean = false, placement: string = "bottom", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, class: string = ""
|
|
Slots: none
|
|
Events: search, select, change, clear, open, close, load, error
|
|
|
|
### Alert
|
|
Mount: data-component="Alert"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Alert", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Avatar
|
|
Mount: data-component="Avatar"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Avatar", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### AvatarGroup
|
|
Mount: data-component="AvatarGroup"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Avatar Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Badge
|
|
Mount: data-component="Badge"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Badge", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Blockquote
|
|
Mount: data-component="Blockquote"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Blockquote", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Breadcrumb
|
|
Mount: data-component="Breadcrumb"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Breadcrumb", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Button
|
|
Mount: data-component="Button"
|
|
Category: base
|
|
Props: label: string = "Button", loadingLabel: string = "Loading…", description: string = "", as: string = "", href: string = "", target: string = "", rel: string = "", type: string = "button", variant: string = "default", color: string = "primary", size: string = "default", disabled: boolean = false, loading: boolean = false, pill: boolean = false, fullWidth: boolean = false, icon: string = "", iconPosition: string = "start", ariaLabel: string = "", ariaPressed: string = "", ariaExpanded: string = "", ariaControls: string = "", title: string = "", autofocus: boolean = false, controlClass: string = "", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ButtonGroup
|
|
Mount: data-component="ButtonGroup"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Button Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Card
|
|
Mount: data-component="Card"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Card", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Carousel
|
|
Mount: data-component="Carousel"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Carousel", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Chart
|
|
Mount: data-component="Chart"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Chart", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ChatBubble
|
|
Mount: data-component="ChatBubble"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Chat Bubble", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Checkbox
|
|
Mount: data-component="Checkbox"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Checkbox", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Clipboard
|
|
Mount: data-component="Clipboard"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Clipboard", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Collapse
|
|
Mount: data-component="Collapse"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", items: string = [], multiple: boolean = false, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ColorPicker
|
|
Mount: data-component="ColorPicker"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Color Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "color", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Columns
|
|
Mount: data-component="Columns"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ComboBox
|
|
Mount: data-component="ComboBox"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "ComboBox", name: string = "", value: string = "", options: string = [], groups: string = [], placeholder: string = "Search or select an option", searchPlaceholder: string = "Start typing…", clearable: boolean = true, allowCustomValue: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading suggestions…", emptyLabel: string = "No matching options", clearLabel: string = "Clear value", toggleLabel: string = "Toggle suggestions", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, optionTemplate: string = "default", defaultOpen: boolean = false, closeOnSelect: boolean = true, fixed: boolean = false, placement: string = "bottom", autocomplete: string = "off", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, loadMoreLabel: string = "Load more", class: string = ""
|
|
Slots: none
|
|
Events: search, select, change, clear, open, close, load, error
|
|
|
|
### Confetti
|
|
Mount: data-component="Confetti"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Confetti", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Container
|
|
Mount: data-component="Container"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ContextMenu
|
|
Mount: data-component="ContextMenu"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Context Menu", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### CopyMarkup
|
|
Mount: data-component="CopyMarkup"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Copy Markup", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### CustomScrollbar
|
|
Mount: data-component="CustomScrollbar"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### DataMap
|
|
Mount: data-component="DataMap"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Data Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### DataTable
|
|
Mount: data-component="DataTable"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", caption: string = "Data Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### DatePicker
|
|
Mount: data-component="DatePicker"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", label: string = "Date Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "date", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### DeviceFrame
|
|
Mount: data-component="DeviceFrame"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Device Frame", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Divider
|
|
Mount: data-component="Divider"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", label: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### DragAndDrop
|
|
Mount: data-component="DragAndDrop"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Drag And Drop", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Drawer
|
|
Mount: data-component="Drawer"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Drawer", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Dropdown
|
|
Mount: data-component="Dropdown"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Dropdown", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### FileInput
|
|
Mount: data-component="FileInput"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "File Input", name: string = "", value: string = "", placeholder: string = "", type: string = "file", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### FileUpload
|
|
Mount: data-component="FileUpload"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "File Upload", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### FileUploadProgress
|
|
Mount: data-component="FileUploadProgress"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Grid
|
|
Mount: data-component="Grid"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Image
|
|
Mount: data-component="Image"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", src: string = "", alt: string = "", width: string = "", height: string = "", loading: string = "lazy", rounded: boolean = false, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Input
|
|
Mount: data-component="Input"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Input", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### InputGroup
|
|
Mount: data-component="InputGroup"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Input Group", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### InputNumber
|
|
Mount: data-component="InputNumber"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Input Number", name: string = "", value: string = "", placeholder: string = "", type: string = "number", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Kbd
|
|
Mount: data-component="Kbd"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", label: string = "⌘ K", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### LayoutSplitter
|
|
Mount: data-component="LayoutSplitter"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### LegendIndicator
|
|
Mount: data-component="LegendIndicator"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Legend Indicator", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Link
|
|
Mount: data-component="Link"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", label: string = "Link", href: string = "#", target: string = "", rel: string = "", external: boolean = false, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### List
|
|
Mount: data-component="List"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "List", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ListGroup
|
|
Mount: data-component="ListGroup"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "List Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Map
|
|
Mount: data-component="Map"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Marquee
|
|
Mount: data-component="Marquee"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Marquee", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### MegaMenu
|
|
Mount: data-component="MegaMenu"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Mega Menu", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Modal
|
|
Mount: data-component="Modal"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Modal", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Nav
|
|
Mount: data-component="Nav"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Nav", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Navbar
|
|
Mount: data-component="Navbar"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Navbar", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Pagination
|
|
Mount: data-component="Pagination"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Pagination", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### PinInput
|
|
Mount: data-component="PinInput"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Verification code", name: string = "pin", value: string = "", length: number = 4, pattern: string = "[0-9]", type: string = "text", inputMode: string = "numeric", placeholder: string = "○", autocomplete: string = "one-time-code", masked: boolean = false, disabled: boolean = false, readonly: boolean = false, required: boolean = false, autoFocus: boolean = false, autoSubmit: boolean = false, allowPaste: boolean = true, clearable: boolean = true, clearLabel: string = "Clear code", separator: string = "", groupSize: number = 0, helpText: string = "", invalid: boolean = false, validationMessage: string = "", class: string = ""
|
|
Slots: none
|
|
Events: input, change, complete, paste, clear, error
|
|
|
|
### Popover
|
|
Mount: data-component="Popover"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Popover", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Progress
|
|
Mount: data-component="Progress"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Radio
|
|
Mount: data-component="Radio"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Radio", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### RangeSlider
|
|
Mount: data-component="RangeSlider"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Range Slider", name: string = "", value: string = "", placeholder: string = "", type: string = "range", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Rating
|
|
Mount: data-component="Rating"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Rating", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Scrollspy
|
|
Mount: data-component="Scrollspy"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Scrollspy", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### SearchBox
|
|
Mount: data-component="SearchBox"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Search Box", name: string = "", value: string = "", placeholder: string = "", type: string = "search", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Select
|
|
Mount: data-component="Select"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Select", name: string = "", value: string = "", options: string = [], placeholder: string = "Select an option", multiple: boolean = false, disabled: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Sidebar
|
|
Mount: data-component="Sidebar"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Sidebar", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Skeleton
|
|
Mount: data-component="Skeleton"
|
|
Category: base
|
|
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Spinner
|
|
Mount: data-component="Spinner"
|
|
Category: base
|
|
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Stepper
|
|
Mount: data-component="Stepper"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Stepper", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### StrongPassword
|
|
Mount: data-component="StrongPassword"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Create a strong password", autocomplete: string = "new-password", minLength: number = 8, specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?", requireLowercase: boolean = true, requireUppercase: boolean = true, requireNumber: boolean = true, requireSpecialCharacter: boolean = true, showRequirements: boolean = true, presentation: string = "inline", hintText: string = "Use a unique password you do not use elsewhere.", emptyLabel: string = "Enter a password", weakLabel: string = "Weak", fairLabel: string = "Fair", goodLabel: string = "Good", strongLabel: string = "Strong", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", class: string = ""
|
|
Slots: none
|
|
Events: input, change, strength
|
|
|
|
### StyledIcon
|
|
Mount: data-component="StyledIcon"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Styled Icon", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Switch
|
|
Mount: data-component="Switch"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Switch", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Table
|
|
Mount: data-component="Table"
|
|
Category: tables
|
|
Props: size: string = "default", color: string = "primary", caption: string = "Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Tabs
|
|
Mount: data-component="Tabs"
|
|
Category: navigation
|
|
Props: size: string = "default", color: string = "primary", label: string = "Tabs", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Textarea
|
|
Mount: data-component="Textarea"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Textarea", name: string = "", value: string = "", placeholder: string = "", rows: number = 5, disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Timeline
|
|
Mount: data-component="Timeline"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Timeline", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### TimePicker
|
|
Mount: data-component="TimePicker"
|
|
Category: forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Time Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "time", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### Toast
|
|
Mount: data-component="Toast"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Toast", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ToastNotifications
|
|
Mount: data-component="ToastNotifications"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Toast Notifications", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### ToggleCount
|
|
Mount: data-component="ToggleCount"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Toggle Count", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
|
|
Slots: none
|
|
Events: none
|
|
|
|
### TogglePassword
|
|
Mount: data-component="TogglePassword"
|
|
Category: advanced-forms
|
|
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Enter your password", autocomplete: string = "current-password", minlength: string = "", maxlength: string = "", pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", fields: string = [], visible: boolean = false, toggleable: boolean = true, toggleMode: string = "button", checkboxLabel: string = "Show password", showLabel: string = "Show password", hideLabel: string = "Hide password", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, helpText: string = "", validationMessage: string = "", class: string = ""
|
|
Slots: none
|
|
Events: input, change, toggle
|
|
|
|
### Tooltip
|
|
Mount: data-component="Tooltip"
|
|
Category: overlays
|
|
Props: size: string = "default", color: string = "primary", title: string = "Tooltip", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### TreeView
|
|
Mount: data-component="TreeView"
|
|
Category: base
|
|
Props: size: string = "default", color: string = "primary", title: string = "Tree View", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### Typography
|
|
Mount: data-component="Typography"
|
|
Category: layout
|
|
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
|
|
Slots: default
|
|
Events: none
|
|
|
|
### WysiwygEditor
|
|
Mount: data-component="WysiwygEditor"
|
|
Category: integrations
|
|
Props: size: string = "default", color: string = "primary", title: string = "Wysiwyg Editor", description: string = "", items: string = [], variant: string = "default", class: string = ""
|
|
Slots: default
|
|
Events: none
|