X-ui-components-svelte NPM

Introduction

This library provides a suite of UI components designed specifically for Svelte. Both ready-to-use and customizable, these components are developed as part of a thesis project and are ideal for development and experimental environments, though they may not yet be suitable for production use.

Installation

To integrate these components into your Svelte project, use the following command to install:

npm install x-ui-components-svelte

Components

This library features five key components: modal, menu, select, multiselect, and accordion. For detailed documentation, code examples, and live demos, please visit the documentation site.

Usage Example

Below is a simple example demonstrating how to use the Menu component:

<script lang="ts">
import { Menu, MenuButton, MenuDropdown, MenuItem } from 'x-ui-components-svelte'
import type { Item } from '../../xui/menu/types';

let isOpen = false;

function toggleOpen() {
    isOpen = !isOpen;
}

function handleItemClick(item: Item) {
    isOpen = false; // Close the dropdown on item click
    window.alert('Item clicked ' + item.value)
}
</script>
  
<Menu>
    <MenuButton onMenuButtonClick={toggleOpen}>
    Composable
    </MenuButton>
    <MenuDropdown open={isOpen}>
    <MenuItem 
        onClick={handleItemClick}
        item={{ id: "1", value: "Action 1" }}
    >
        First Action
    </MenuItem>
    </MenuDropdown>
</Menu>

API

Accordion

Prop Name	Description	Type	Default
`component`	If the value is false only children of the main component will be rendered	`boolean`	`false`
`isStatic`	If true the component becomes a shell and ignores all the internal logic	`boolean`	`false`
`expanded`	Whether accordion is expanded	`boolean`	`false`
`title`	Title of the collapsible section	`string`	`""`
`onTitleClick`	Triggers when the title is clicked	`function`	`() => {}`

Accordion Button

Prop Name	Description	Type	Default
`onClick`	Triggers when the title is clicked	`function`	`() => {}`

Accordion Content

Prop Name	Description	Type	Default
`expanded`	Whether the content is visible	`boolean`	`false`

Prop Name	Description	Type	Default
`component`	If the value is false only children of the main component will be rendered	`boolean`	`false`
`isStatic`	If true, the component becomes a shell and ignores all the internal logic	`boolean`	`false`
`open`	Whether or not the menu is open	`boolean`	`false`
`items`	Menu items	`{ id: number \| string, value: string }[]`	`[]`
`disabledItems`	Disabled menu items	`number[] \| string[]`	`[]`
`onClose`	Triggers when the dropdown menu is closed	`function`	`() => {}`
`onItemClick`	Triggers when a menu item is clicked	`function`	`(id: string \| number) => {}`
`onButtonClick`	Triggers when the menu button is clicked	`function`	`() => {}`

Menu Button

Prop Name	Description	Type	Default
`onMenuButtonClick`	Triggers when the button is clicked	`function`	`() => {}`

Menu Dropdown

Prop Name	Description	Type	Default
`open`	Whether or not the dropdown is visible	`boolean`	`false`

Menu Item

Prop Name	Description	Type	Default
`item`	Menu item	`funcstion`	`{ id: number \| string, value: string }`
`isDisabled`	Whether the item is disabled	`boolean`	`false`
`onClick`	Triggers when the item is clicked	`function`	`(id: string \| number) => {}`

Modal

Prop Name	Description	Type	Default
`component`	If the value is false only children of the main component will be rendered	`boolean`	`false`
`isStatic`	If true the component becomes a shell and ignores all the internal logic	`boolean`	`false`
`isOpen`	Whether the modal is visible or not	`boolean`	`false`
`title`	Title of the modal	`string`	`""`
`onClose`	Triggers when the modal is closed	`function`	`() => {}`

Modal Button

Prop Name	Description	Type	Default
`onButtonClick`	Triggers when the button is clicked	`function`	`() => {}`

Multiselect

Prop Name	Description	Type	Default
`component`	If the value is false only children of the main component will be rendered	`boolean`	`false`
`isStatic`	If true the component becomes a shell and ignores all the internal logic	`boolean`	`false`
`options`	Select options	`{ id: string \| number, value: string }[]`	`[]`
`open`	Whether the select dropdown is visible or not	`boolean`	`false`
`disabled`	Whether the select is disabled	`boolean`	`false`
`value`	Selected value	`{ id: string \| number, value: string }`	`undefined`
`defaultValue`	Initial value	`{ id: string \| number, value: string }`	`undefined`
`onChange`	Triggers when the value is changed	`function`	`(value: { id: string \| number, value: string }) => {}`
`onInputClick`	Triggers when the input is clicked	`function`	`() => {}`
`enableSearch`	Whether searching the options is enabled	`boolean`	`false`
`onSearch`	Triggers on each search input change	`function`	`(value: string) => {}`
`clearAll`	Whether clear all selected options is enabled	`boolean`	`false`
`maxSelectedItems`	Number of maximum selected options allowed	`number`	`undefined`

Multiselect Input

Prop Name	Description	Type	Default
`disabled`	Whether the input is disabled	`boolean`	`false`
`enableSearch`	Whether searching the options is enabled	`boolean`	`false`
`searchValue`	Search value	`string`	`""`
`onClearAll`	Triggered when clear button is clicked	`function`	`() => {}`
`clearAll`	Whether clear all selected options is enabled	`boolean`	`false`

Multiselect Item

Prop Name	Description	Type	Default
`onClick`	Triggered when the item is clicked	`function`	`() => {}`

Multiselect Dropdown

Prop Name	Description	Type	Default
`areOptionsVisible`	Whether the options are visible	`boolean`	`false`

Multiselect Option

Prop Name	Description	Type	Default
`disabled`	Whether the input is disabled	`boolean`	`false`
`selected`	Whether the input is selected	`boolean`	`false`
`onClick`	Triggered when the option is clicked	`function`	`() => {}`

Select

Prop Name	Description	Type	Default
`component`	If the value is false only children of the main component will be rendered	`boolean`	`false`
`isStatic`	If true the component becomes a shell and ignores all the internal logic	`boolean`	`false`
`options`	Select options	`{ id: string \| number, value: string }[]`	`[]`
`open`	Whether the select dropdown is visible or not	`boolean`	`false`
`disabled`	Whether the select is disabled	`boolean`	`false`
`valueProp`	Selected value	`{ id: string \| number, value: string }`	`undefined`
`defaultValue`	Initial value	`{ id: string \| number, value: string }`	`undefined`
`onChange`	Triggers when the value is changed	`function`	`(value: { id: string \| number, value: string }) => {}`
`onInputClick`	Triggers when the input is clicked	`function`	`() => {}`

Select Input

Prop Name	Description	Type	Default
`value`	Selected value	`{ id: string \| number, value: string }`	`undefined`
`onClick`	Triggers when the input is clicked	`function`	`() => {}`
`disabled`	Whether the select is disabled	`boolean`	`false`

Select Dropdown

Prop Name	Description	Type	Default
`visible`	Whether the select dropdown is visible or not	`boolean`	`false`

Select Option

Prop Name	Description	Type	Default
`onClick`	Triggers when the item is clicked	`function`	`() => {}`
`selected`	Whether the option is selected	`boolean`	`false`

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago