custom-uikit-svelte v2.6.1

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

Custom Events

Props

Article

Useful to display content such as blog entries or articles      

Slots

Props

AsyncDataTable

Props

Badge

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

Slots

Forwarded Events

Props

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

Button

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

Slots

Forwarded Events

Props

Card

The card component allows you to create nice box layouts      

Slots

Props

Comment

Props

DataTable

Props

DescriptionList

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

Slots

Props

Divider

Props

Dropdown

Props

Form

Props

FormModal

Props

Loader

Props

LoaderOverlay

Props

LoaderOverlayScoped

Props

LoaderWrapper

Props

Modal

Props

Nav

Props

Offcanvas

Props

OrderableList

Props

Pagination

Props

ScrollableNav

Props

Switcher

Props

Tab

Props

Table

Props

Accordion

Props

AccordionItem

AsyncAutocomplete

Props

Autocomplete

Props

Checkbox

Props

DatePicker

Props

EmailInput

Props

Field

Props

FixedPointInput

Props

MonthPicker

Props

NumberInput

Props

PasswordInput

Props

PasswordInputAlt

Props

PercentageInput

Props

Radio

Props

SearchInput

Props

Select

Props

TelInput

Props

TextInput

Props

Textarea

Props

TimePicker

Props

WeekPicker

Props

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