j-norwood-young / svelte-wordpress-components

Svelte Wordpress Components

This is a collection of Svelte components, primarily useful for Wordpress admin pages.

Usage

<script>
import { Button } from 'svelte-wordpress-components';
function handleClick() {
    alert('Clicked!');
}
</script>

<Button on:click={handleClick} primary={true} href="/">Click me!</Button>

Components

Name	Description	Individual Component
Alert	An alert.	Alert.svelte
Button	A button.	Button.svelte
FormInput	A form input.	FormInput.svelte
FormTable	A form table.	FormTable.svelte
ListTable	A list table.	ListTable.svelte

Missing a component? Ask for it, or send me a pull request.

Alert

<script>
import { Alert } from 'svelte-wordpress-components';
</script>

<Alert type="success">Success!</Alert>

Props

Name	Type	Default	Description
type	string	'info'	The type of alert. Can be 'info', 'success', 'warning', or 'error'.
dismissible	boolean	false	Whether the alert can be dismissed.
display_icon	boolean	true	Whether to display an icon.
class	string	null	The classes of the alert.

Button

<script>
import { Button } from 'svelte-wordpress-components';
</script>

<Button primary={true} href="/">Click me!</Button>

Props

Name	Type	Default	Description
primary	boolean	false	Whether the button is a primary button.
title	string	null	The title of the link.
type	string	'button'	The type of button. Can be 'button', 'submit', or 'reset'.
id	string	null	The ID of the button.
class	string	'button'	The classes of the button.
disabled	boolean	false	Whether the button is disabled.
aria_label	string	null	The aria-label of the button.
aria_hidden	boolean	false	Whether the button is aria-hidden.
large	boolean	false	Whether the button is large.
small	boolean	false	Whether the button is small.
warning	boolean	false	Whether the button is a warning button.
danger	boolean	false	Whether the button is a danger button.
link	boolean	false	Whether the button is a link.

FormInput

<script>
import { FormInput } from 'svelte-wordpress-components';
</script>

<FormInput label="Name" name="name" value="John Doe" />

Props

Name	Type	Default	Description
id	string	null	The ID of the input.
name	string	null	The name of the input.
label	string	null	The label of the input.
type	string	'text'	The type of input. Can be 'text', 'email', 'password', 'number', 'url', 'tel', 'date', 'time', 'datetime-local', 'month', 'week', 'color', 'checkbox', 'radio', 'textarea', 'select', 'file', or 'hidden'.
value	string	null	The value of the input.
values	array	[]	The values of radio and checkbox input.
description	string	null	A description of the input that will display below the input.
class	string	null	The classes of the alert.
placeholder	string	null	The placeholder of the input.
required	boolean	false	Whether the input is required.
readonly	boolean	false	Whether the input is readonly.
disabled	boolean	false	Whether the input is disabled.
options	array	[]	The options of a checkbox, radio or select input.
multiple	boolean	false	Whether a select input takes multiple options.
checked	boolean	false	Whether a checkbox input is checked.
min	string	null	The min of a number input.
max	string	null	The max of a number input.
step	string	null	The step of a number input.
pattern	string	null	The pattern of the input.
rows	string	null	The rows of a textarea input
cols	string	null	The cols of a textarea input.
wrap	string	null	Whether to wordwrap a textarea input.

Form Table

NOTE: Previously called Form

<script>
import { FormTable, FormInput } from 'svelte-wordpress-components';
</script>

<FormTable>
    <FormInput label="Name" name="name" value="John Doe" />
</FormTable>

Props

Name	Type	Default	Description
class	string	null	The classes of the alert.
id	string	null	The ID of the form.

ListTable

A list table creates a table similar to a WP_List_Table.

<script>
import { ListTable } from 'svelte-wordpress-components';
const headers = [
        {
            name: "select",
            key: "select",
            type: "select",
        },
        {
            name: "Name",
            key: "link_name",
            type: "unsafe",
        },
        {
            name: "Created",
            key: "createdAt",
            type: "date",
        },
        {
            name: "Active",
            key: "active",
            type: "boolean",
        },
    ]
const data = [
        {
            select: true,
            link_name: '<a href="#">John Doe</a>',
            createdAt: '2020-01-01',
            active: true,
        },
        {
            select: false,
            link_name: '<a href="#">Jane Doe</a>',
            createdAt: '2020-01-01',
            active: false,
        },
    ]

</script>

<ListTable {headers} {data} />

Props

Name	Type	Default	Description
headers	array	[]	The headers of the table.
data	array	[]	The data of the table.

Header

Name	Type	Default	Description
name	string	null	The name of the header.
key	string	null	The key of the header.
type	string	null	The type of the header. Can be 'select', 'image', 'text', 'link', 'date', 'number', 'boolean', or 'unsafe' (does not escape HTML).