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>;