custom-uikit-svelte

Unofficial Svelte Component Library for the UIkit framework

 

Install from npm

npm i custom-uikit-svelte

You can find the published package here

 

Demo with examples

The demo included in this repo shows some components in action with examples

You can have a look at it here: custom-uikit-svelte demo

The demo files can be found in src/

 

Components

• Alert
• Article
• AsyncDataTable
• Badge
• Breadcrumb
• Button
• Card
• Comment
• DataTable
• DescriptionList
• Divider
• Dropdown
• Form
• FormModal
• Loader
• LoaderOverlay
• LoaderOverlayScoped
• LoaderWrapper
• Modal
• Nav
• Offcanvas
• OrderableList
• Pagination
• ScrollableNav
• Switcher
• Tab
• Table
• Accordion
• AccordionItem
• AsyncAutocomplete
• Autocomplete
• Checkbox
• DatePicker
• EmailInput
• Field
• FixedPointInput
• MonthPicker
• NumberInput
• PasswordInput
• PasswordInputAlt
• PercentageInput
• Radio
• SearchInput
• Select
• TelInput
• TextInput
• Textarea
• TimePicker
• WeekPicker          

  Alert

  This alert can be used to display success, warning and error messages      

  Slots

  name	description
  -	The content of the alert

 

Custom Events

name	type	description
hide	Array	Fires after the alert is hidden
beforehide	Array	Fires before hiding the alert. If preventDefault is called on this event, the alert will not be hidden

 

Props

name	type	default	description
closable	boolean	true	Whether the alert is dismissible
variant	'primary'|'success'|'danger'|'warning'|undefined	undefined	Specifies the look of the component
animation	boolean|string	true	Fade out or use the uikit Animation component
animationDuration	number	150	Animation duration in milliseconds
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined	A string containing any additional classes to apply to the component
ref (readonly)	HTMLDivElement	undefined	The HTML reference of the component

     

Article

Useful to display content such as blog entries or articles      

Slots

name	description
-	The content of the article

 

Props

name	type	default	description
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
titleAsHtml	string|undefined	""	A string that can contain HTML content which represents the title of the article. If omitted, the space dedicated to the title won't be displayed
articleMetaAsHtml	string|undefined	""	A string that can contain HTML content with meta information about the article. If omitted, the space dedicated to the meta content won't be displayed
ref (readonly)	HTMLElement	undefined	The HTML reference of the component

     

AsyncDataTable

     

Props

name	type	default	description
columns	Array.<{label: string, key: string, className: (string|undefined), textAlign: ('center'|'right'|'left'|undefined), orderable: (boolean|undefined), searchable: (boolean|undefined), render: (DataTableRenderer|undefined)}>	[]
size	undefined|'small'	undefined
className	undefined|string	undefined
style	string|undefined	undefined	A string specifying custom style properties for the component
appearance	'divider'|'striped'	"divider"
searchButtonVariant	'default'|'primary'|'secondary'|'danger'|'text'|'link'	"default"
stickyHeader	boolean	false
placeholder	string	""
noResultText	string|undefined	undefined
ref	HTMLTableElement	undefined
instantSearch	boolean	true
query	string	""
orderBy	Array.<{key: string, direction: ('desc'|'asc')}>	[]
horizontalScroll	boolean	true
dataProvider	AsyncDataTableDataProvider	-
dataProviderErrorHandler	CallableFunction	(err) => console.error(err)
recordsPerPage	number	25
numbersPerSide	number	4
pageIndex	number	0
total	number	0	@readonly
filtered	number	0	@readonly
loading	boolean	false	@readonly
debounceMs	number	200
rows	Array.<Record.<string, any>>|null	null	Contains the current visible rows

     

Badge

This component can be used as a notification badge or as a general purpose chip      

Slots

name	description
-	The content of the badge

 

Forwarded Events

name	source
click	HTMLSpanElement

 

Props

name	type	default	description
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
ref (readonly)	HTMLSpanElement	undefined	The HTML reference of the component

     

Breadcrumb

A breadcrumb can be added to the page to help the user find where they are in the website and easily go back and forth between pages      

Props

name	type	default	description
path	Array.<{href: string, label: string}>	[]	An array containing the various steps composing the path of the current page. Each step should have an href property, which is the URL to which the user will be redirected, and a label property, which is displayed. The last element of the array represents the current page and its href property will be ignored
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
ref (readonly)	HTMLUListElement	undefined	The HTML reference of the component

     

Button

This component represents a general purpose button, which can be customized according to its usage      

Slots

name	description
-	The content of the button

 

Forwarded Events

name	source
click	HTMLButtonElement

 

Props

name	type	default	description
id	string|undefined	undefined
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
type	'button'|'submit'	"button"	The type property of the native HTML button
disabled	boolean	false	The disabled property of the native HTML button
loading	boolean	false	Whether the button has been used to retrieve some content that is still being loaded. If true, an icon with a spinner will appear next to the text and the button will also be temporarily disabled
variant	'default'|'primary'|'secondary'|'danger'|'text'|'link'	type === "submit" ? "primary" : "default"	This property is used to style the button with one of the base uikit classes for button appearance
icon	string|undefined	type === "submit" ? "newline" : undefined	If present, the uikit icon with the given name will be added next to the text of the button
iconPosition	'right'|'left'	'right'	If the icon is set, this property let you decide its position, left or right
size	undefined|'small'|'large'	undefined	Specifies the size of the button. If undefined, the button will be of regular size
tooltip	string|undefined	undefined	Specifies the uk-tooltip attribute. If undefined, no tooltip will be added to the button
ref (readonly)	HTMLButtonElement	undefined	The HTML reference of the component

     

Card

The card component allows you to create nice box layouts      

Slots

name	description
header	The content to be put inside the header ('uk-card-header') of the card. Leave empty if no header is wanted
media-top	The content to be put inside the 'uk-card-media-top' class. This is useful if you want to add an image to your card which is supposed to take up the top half of the card. Leave empty if you don't want the card to have this layout
horizontal-media	For more complex layouts (e.g. an horizontal card with an image to the right/left) you can use this slot, which is placed before the card body. Leave empty if this is not needed
-	The content of the card
media-bottom	The content to be put inside the 'uk-card-media-bottom' class. This is useful if you want to add an image to your card which is supposed to take up the bottom half of the card. Leave empty if you don't want the card to have this layout
footer	Fill this slot if you want your card to have a footer. The content will be put inside the 'uk-card-footer' section

 

Props

name	type	default	description
variant	'default'|'primary'|'secondary'|'hover'	"default"	Used to style the card. If set to hover, the card will appear flat unless it's being hovered
className	string|undefined	undefined	A string containing any additional classes to apply to the component
hover	boolean	false	Add a hover animation to the card
size	'small'|'large'|undefined	undefined	Defines the padding of the card. In undefined, default values will be applied
title	string|undefined	undefined	The title of the card. This will be represented inside the body of the card. If you have defined a custom header slot, you should manually specify the title inside it and not use this property
badge	string|undefined	undefined	The text content of the card badge, which is displayed in the top right angle of the card. If undefined no badge will be added
style	string|undefined	undefined	A string specifying custom style properties for the component
ref (readonly)	HTMLDivElement	undefined	The HTML reference of the component

     

Comment

     

Props

name	type	default	description
avatarSource	string|undefined	undefined	The path to the avatar that will be added to the comment. For optimal results, use a square image. Only specify this property if you are not using a custom header, otherwise it will be ignored
avatarSize	number	80	Change the size of the avatar.
avatarAlt	string	""	The alt property of the avatar image
commentTitleAsHtml	string	""	The title of the comment that will be added to the header. It can contain HTML tags. Do not use this property if you are specifying a custom header
primary	boolean	false	True to add a different style to this comment (e.g. if it's made by the author)
ref (readonly)	HTMLElement	undefined	The HTML reference of the component
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined	A string containing any additional classes to apply to the component

     

DataTable

     

Props

name	type	default	description
columns	Array.<{label: string, key: string, className: (string|undefined), textAlign: ('center'|'right'|'left'|undefined), orderable: (boolean|Comparator|undefined), searchable: (boolean|DataTableSearchCallback|undefined), render: (DataTableRenderer|undefined)}>	[]
rows	Array.<Record.<string, any>>	[]
visibleRows	Array.<Record.<string, any>>	[]
size	undefined|'small'	undefined
className	undefined|string	undefined
style	string|undefined	undefined	A string specifying custom style properties for the component
appearance	'divider'|'striped'	"divider"
searchButtonVariant	'default'|'primary'|'secondary'|'danger'|'text'|'link'	"default"
stickyHeader	boolean	false
placeholder	string	""
noResultText	string|undefined	undefined
ref	HTMLTableElement	undefined
instantSearch	boolean	true
query	string	""
orderBy	Array.<{key: string, direction: ('desc'|'asc')}>	[]
horizontalScroll	boolean	true
recordsPerPage	number	25
numbersPerSide	number	4
pageIndex	number	0
total	number	0	@readonly
filtered	number	0	@readonly

     

DescriptionList

Create an already styled description list, perfect for describing key-value properties      

Slots

name	description
-	If you need to add components in the titles or descriptions, use the default slot to specify the content of the description terms and description details

 

Props

name	type	default	description
showDivider	boolean	false	If true a divider will be shown between two items
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
ref (readonly)	HTMLDListElement	undefined	The HTML reference of the component
termsAreHtml	boolean	false	Whether the terms of your list should be treated as HTML
detailsAreHtml	boolean	false	Whether the details of your list should be treated as HTML
list	Array.<{term: string, details: string}>	[]	An array containing the term-details pairs of the description list. Can be text only or html

     

Divider

     

Props

name	type	default	description
withIcon	boolean	false
small	boolean	false
vertical	boolean	false
ref	HTMLHRElement	undefined
style	string|undefined	undefined
className	string|undefined	undefined

     

Dropdown

     

Props

name	type	default	description
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
mode	'click'|'hover'	"hover"
label	string	""
isLabelHtml	boolean	false
variant	'default'|'primary'|'secondary'|'danger'|'text'|'link'|null	"default"	This property is used to style the button with one of the base uikit classes for button appearance. Setting this to null will hide the button
ref	HTMLDivElement	undefined

     

Form

     

Props

name	type	default	description
submitAsync	FormSubmitCallback	-
disabled	boolean	false
state	'initial'|'invalid'|'valid'|'loading'|'error'|'success'	"initial"
valid	boolean	true	Indicates the validity of this form. Its value is updated using formRef.checkValdity(), that gets called each time an element inside this form triggers a bubbling 'change' event
ref	HTMLFormElement	undefined
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
variant	'stacked'|'horizontal'	"stacked"

     

FormModal

     

Props

name	type	default	description
id	string|undefined	undefined
style	string|undefined	undefined
className	string|undefined	undefined
title	string|undefined	undefined
expand	boolean	false
fullScreen	boolean	false
closeable	boolean	true
closeButton	'default'|'outside'	"default"
verticallyCentered	boolean	true
ref	HTMLDivElement	undefined
show	boolean	false
shown	boolean	false	@readonly
stack	boolean	true
formSubmitAsync	FormSubmitCallback	-
formDisabled	boolean	false
formState	'initial'|'invalid'|'valid'|'loading'|'error'|'success'	"initial"
formValid	boolean	true
formRef	HTMLFormElement	undefined
formStyle	string|undefined	undefined	A string specifying custom style properties for the component
formClassName	string|undefined	''
formVariant	'stacked'|'horizontal'	"stacked"

     

Loader

     

Props

name	type	default	description
className	string|undefined	undefined
ratio	number	1
style	string|undefined	undefined
ref	HTMLDivElement	undefined

     

LoaderOverlay

     

Props

name	type	default	description
className	string|undefined	undefined
ratio	number	1
style	string|undefined	undefined
ref	HTMLDivElement	undefined
opacity	number	0.8
loading	boolean	true
background	'default'|'muted'|'primary'|'secondary'	"default"
backgroundClassName	string|undefined	undefined
backgroundStyle	string|undefined	undefined
slotPosition	'bottom'|'right'|'top'|'left'	"bottom"

     

LoaderOverlayScoped

     

Props

name	type	default	description
className	string|undefined	undefined
ratio	number	1
style	string|undefined	undefined
ref	HTMLDivElement	undefined
opacity	number	0.8
loading	boolean	true
background	'default'|'muted'|'primary'|'secondary'	'default'
backgroundClassName	string|undefined	undefined
backgroundStyle	string|undefined	undefined
slotPosition	'bottom'|'right'|'top'|'left'	"bottom"

     

LoaderWrapper

     

Props

name	type	default	description
loading	boolean	true
className	string|undefined	undefined
ratio	number	1
style	string|undefined	undefined
ref	HTMLDivElement	undefined
center	boolean	true
slotPosition	'bottom'|'right'|'top'|'left'	"bottom"

     

Modal

     

Props

name	type	default	description
id	string|undefined	undefined
style	string|undefined	undefined
className	string|undefined	undefined
title	string|undefined	undefined
expand	boolean	false
fullScreen	boolean	false
closeable	boolean	true
closeButton	'default'|'outside'	"default"
verticallyCentered	boolean	true
ref	HTMLDivElement	undefined
show	boolean	false
shown	boolean	false	@readonly
stack	boolean	true

     

Nav

     

Props

name	type	default	description
ref (readonly)	HTMLDivElement	undefined	The HTML reference of the component
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined	A string containing any additional classes to apply to the component

     

Offcanvas

     

Props

name	type	default	description
id	string	generateId()
show	boolean	false
shown	boolean	false	@readonly
ref	HTMLDivElement	undefined
side	'left'|'right'	"left"

     

OrderableList

     

Props

name	type	default	description
items	Array.<{text: (string|undefined), html: (string|undefined), props: (Record.<string, any>|undefined), component: (SvelteComponent|undefined)}>	[]
component	SvelteComponent|undefined	undefined
ref	HTMLUListElement	undefined	@readonly
animationDuration	number	200
moveToBoundaries	boolean	false	Whether to show or hide the move-to-top and move-to-bottom buttons
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined	A string containing any additional classes to apply to the component

     

Pagination

     

Props

name	type	default	description
className	string|undefined	""
style	string|undefined	undefined
center	boolean	true
pageIndex	number	0
numberOfPages	number	0
numbersPerSide	number	4

     

ScrollableNav

     

Props

name	type	default	description
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined	A string containing any additional classes to apply to the component
navStyle	string|undefined	undefined	A string specifying custom style properties for the contained Nav component
navClassName	string|undefined	undefined	A string containing any additional classes to apply to the contained Nav component
ref (readonly)	HTMLDivElement	undefined	The HTML reference of the component
height (readonly)	number	0	The current height of this component
spacer	boolean	true	Whether to add a spacer underneath this component or not

     

Switcher

     

Props

name	type	default	description
connect	string	"~.uk-switcher"
toggle	string	"> * > :first-child"
animation	string|false	false
duration	number	200
swiping	boolean	true
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
titles	Array.	[]
htmlTitle	boolean	false
ref	HTMLUListElement	undefined
index	number	0

     

Tab

     

Props

name	type	default	description
connect	string	"~.uk-switcher"
toggle	string	"> *"
animation	string|false	false
duration	number	200
swiping	boolean	true
media	number|string	200
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
titles	Array.	[]
htmlTitle	boolean	false
ref	HTMLDivElement	undefined
index	number	0

     

Table

     

Props

name	type	default	description
heading	Array.<(string|{label: string, className: (string|undefined), textAlign: ('center'|'right'|'left'|undefined)})>	[]
size	'small'|undefined	undefined
className	string|undefined	undefined
style	string|undefined	undefined
appearance	'divider'|'striped'|undefined	undefined
stickyHeader	boolean	false
ref	HTMLTableElement	undefined
caption	string|undefined	undefined

     

Accordion

     

Props

name	type	default	description
animation	boolean	true
collapsible	boolean	true
duration	number	200
multi	boolean	false
index	number|false|Array.	multi ? [] : false
transition	string	"ease"
ref	HTMLUListElement	undefined
className	string|undefined	undefined
style	string|undefined	undefined

     

AccordionItem

   

     

AsyncAutocomplete

     

Props

name	type	default	description
id	string	generateId()
multi	boolean	false	Whether or not the autocomplete supports multiple values selected at the same time
value	any|null|Array.	!multi ? null : []	If not in multi-mode (default): the current selected value or null if no value is selected Else: the list of currently selected values
label	string	""	Label of this component
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
textIfNoResult	string	""	Text to show when the applied filter doesn't return any result
textIfInvalid	string	""	Text to show when the field is required but no value has been chosen
disabled	boolean	false	Control whether the component is disabled or not
tooltip	string|undefined	undefined	UIkit tooltip
placeholder	string|undefined	undefined	Input placeholder
optional	boolean	false
ref	HTMLDivElement	undefined	Reference to the div that wraps this component
autocapitalize	string|undefined	undefined	Autocapitalize setting of the input tag
autocomplete	string|undefined	"off"	Autocomplete setting of the input tag
autocorrect	string|undefined	undefined	Autocorrect setting of the input tag
spellcheck	string|undefined	undefined
animationDuration	number	100	In/Out fly animation duration (in milliseconds)
state	'initial'|'valid'|'invalid'	"initial"
query	string	""	The current search string
selectedOptions	Array.<{label: string, value: any}>	[]	Currently selected options
dataProvider	AsyncAutocompleteDataProvider	-
dataProviderErrorHandler	CallableFunction	(err) => console.error(err)
loading	boolean	false	@readonly
debounceMs	number	200
maxSuggestions	number	5
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined

     

Autocomplete

     

Props

name	type	default	description
id	string	generateId()
options	Array.<{label: string, value: any}>	[]	Autocomplete options, the value must be unique
multi	boolean	false	Whether or not the autocomplete supports multiple values selected at the same time
value	any|null|Array.	!multi ? null : []	If not in multi-mode (default): the current selected value or null if no value is selected Else: the list of currently selected values
label	string	""	Label of this component
className	string|undefined	undefined	A string containing any additional classes to apply to the component
style	string|undefined	undefined	A string specifying custom style properties for the component
textIfNoResult	string	""	Text to show when the applied filter doesn't return any result
textIfInvalid	string	""	Text to show when the field is required but no value has been chosen
disabled	boolean	false	Control whether the component is disabled or not
tooltip	string|undefined	undefined	UIkit tooltip
placeholder	string|undefined	undefined	Input placeholder
optional	boolean	false
ref	HTMLDivElement	undefined	Reference to the div that wraps this component
autocapitalize	string|undefined	undefined	Autocapitalize setting of the input tag
autocomplete	string|undefined	"off"	Autocomplete setting of the input tag
autocorrect	string|undefined	undefined	Autocorrect setting of the input tag
spellcheck	string|undefined	undefined
animationDuration	number	100	In/Out fly animation duration (in milliseconds)
state	'initial'|'valid'|'invalid'	"initial"
query	string	""	The current search string
selectedOptions	Array.<{label: string, value: any}>	[]	Currently selected options
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined

     

Checkbox

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
optional	boolean	false
value	boolean	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

DatePicker

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
min	string|undefined	undefined
max	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

EmailInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	'off'
autocomplete	string|undefined	undefined
autocorrect	string|undefined	'off'
spellcheck	string|undefined	'off'
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

Field

     

Props

name	type	default	description
style	string|undefined	undefined	A string specifying custom style properties for the component
state	'initial'|'valid'|'invalid'	"initial"
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined

     

FixedPointInput

     

Props

name	type	default	description
id	string	generateId()
decimalPlaces	number	2
inhibitDecimalSeparatorKey	boolean	false
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
optional	boolean	false
value	string	-
min	string|number	undefined
max	string|number	undefined
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
icon	string|undefined	undefined
iconPosition	'left'|'right'	"left"
state	'initial'|'valid'|'invalid'	"initial"

     

MonthPicker

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

NumberInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
min	number|string	undefined
max	number|string	undefined
step	number|string	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
icon	string|undefined	undefined
iconPosition	'left'|'right'	"left"
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

PasswordInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	"off"
autocomplete	string|undefined	undefined
autocorrect	string|undefined	"off"
spellcheck	string|undefined	"off"
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

PasswordInputAlt

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	"off"
autocomplete	string|undefined	undefined
autocorrect	string|undefined	"off"
spellcheck	string|undefined	"off"
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

PercentageInput

     

Props

name	type	default	description
style	string|undefined	undefined	A string specifying custom style properties for the component
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined

     

Radio

     

Props

name	type	default	description
id	string	generateId()
label	string|undefined	undefined
name	string|undefined	undefined
value	any|undefined	undefined
options	Array.<{value: any, label: string, disabled: (boolean|undefined)}>	[]
disabled	boolean	false
optional	boolean	false
tooltip	string|undefined	undefined
ref	HTMLDivElement	undefined
size	undefined|'small'|'large'	undefined
className	string|undefined	undefined
variant	'primary'|'secondary'|'danger'	"primary"	This property is used to style the button corresponding to the selected value with one of the base uikit classes for button appearance
style	string|undefined	undefined	A string specifying custom style properties for the component
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined

     

SearchInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
icon	string|undefined	undefined
iconPosition	'left'|'right'	"left"
inputmode	string|undefined	undefined
pattern	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

Select

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	any	-	Current value of the select. Setting it to undefined sets the selected index to 0, choosing the first option, whether it's disabled, the placeholder, or a valid option
options	Array.<{label: string, value: any, disabled: (boolean|undefined)}>	[]
ref	HTMLSelectElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

TelInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

TextInput

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
icon	string|undefined	undefined
iconPosition	'left'|'right'	"left"
inputmode	string|undefined	undefined
pattern	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

Textarea

     

Props

name	type	default	description
id	string	generateId()
label	string	""
name	string|undefined	undefined
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLTextAreaElement	undefined
rows	number	5
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
minlength	number|undefined	undefined
maxlength	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

TimePicker

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

     

WeekPicker

     

Props

name	type	default	description
id	string	generateId()
label	string	""
style	string|undefined	undefined	A string specifying custom style properties for the component
className	string|undefined	undefined
name	string|undefined	undefined
textIfInvalid	string|undefined	undefined
textIfValid	string|undefined	undefined
helperText	string|undefined	undefined
placeholder	string	""
optional	boolean	false
value	string	-
ref	HTMLInputElement	undefined
disabled	boolean	false
tooltip	string|undefined	undefined
autocapitalize	string|undefined	undefined
autocomplete	string|undefined	undefined
autocorrect	string|undefined	undefined
spellcheck	string|undefined	undefined
requiredMarker	string|undefined	undefined
optionalMarker	string|undefined	undefined
state	'initial'|'valid'|'invalid'	"initial"

 

Special Types

/**
 * Compares two values
 */
export type Comparator = (v1: any, v2: any) => number;

/**
 * Returns a Promise that will contain an array of options (label + value) given a query string
 */
export type AsyncAutocompleteDataProvider = (query: string) => Promise<Array<{ label: string, value: any }>>;


/**
 * Returns a Promise that will contain an object describing the result given a query string
 */
export type AsyncDataTableDataProvider =
    (query: string, orderBy: Array<{ key: string, direction: 'asc' | 'desc' }>, recordsPerPage: number, pageIndex: number) => Promise<AsyncDataTableDataProviderResult>;

export interface AsyncDataTableDataProviderResult {
    /** (optional) the number of available records */
    total: number|undefined,
    /** the number of records, filtered by the given query. This is used to create the pagination buttons of the table */
    filtered: number,
    /** the chunk of records to display */
    records: Array<Record<string, any>>
}


/**
 * Given the column value and its current row object, this function returns a representation of that cell
 */
export type DataTableRenderer = (value: any, row: Record<string, any>) => string | DataTableRenderWithComponent
export interface DataTableRenderWithComponent {
    /** The Svelte component that will render the cell */
    component: SvelteComponent,
    /** Props passed to the Svelte component */
    props: Record<string, any> | undefined,
    /** An "on:click" handler. Note that this handler will stop the propagation of the click event to the entire row */
    onClick: (e) => any,
    /** The text content that will be passed to the default slot of the Svelte component */
    textContent: string | undefined
}


/**
 * Given the current query, the column value and the entire row that column is part of, returns a boolean indicating
 * whether or not the current row should be displayed
 */
export type DataTableSearchCallback = (query: string, columnValue: any, row: Record<string, any>) => boolean;


/**
 * Once called, returns a Promise. While waiting for the Promise to settle (either by resolving or rejecting) the form will show a loading state
 */
export type FormSubmitCallback = () => Promise<any>;