@philrwebb/component-library v0.0.14

@philrwebb/component-library

Overview

This is a component library for use in Svelte applications. The library currently contains 3 svelte components: 1. Tabs/Tab – A Tabs Container and Tab item. 2. List – A List view to display lists of data. 3. Tree – A Tree view (work in progress)

Installation from npm

# installing the component
npm install @philrwebb/component-library@latest

Usage

Tabs/Tab

Tabs accepts one property – selectedtab – allowing the user to pick which tab will be active.

Tab accepts two properties: 1. title – which defines the label of the tab. 2. id – which defines the unique id of each tab. This will be used by the selectedtab property to target the tab.

Example usage

<script>
	Import {Tabs, Tab} from @philrwebb/component-library@latest
</script>

<Tabs selectedtab=”1”>
	<Tab title=”First Tab” id=”1”>
		This is the content of tab 1
	</Tab>
	<Tab title=”Second Tab” id=”2”>
		This is the content of tab 2
	</Tab>
</Tabs>

List

List accepts three properties: 1. rowdata - an array of arrays containing the data to be listed. 2. columninfo - an array of column descriptors. Each column is described by an object {key, ctype, label, talign}:

• key has been included for future expansion allowing an array of objects to be passed and key will be used to pull object values into an array.
• ctype can be used to define the column type. At the moment only number is used to format the number.
• label is used to define the column title.
• talign is used to define the alignment within the column.

3. sortcol - the column that will be the default sort for the list (default is first column).

List propagates an event rowSelected which provides rowno and rowvalue - array of row contents.

<script>
	Import {List} from @philrwebb/component-library@latest
	const rowdata = [
		['4000', 'able', 'alpha'],
		['3000', 'baker', 'beta'],
		['2000', 'charlie', 'gamma']
	];
	const columninfo = [
		{ key: 'col1', ctype: 'number', label: 'Number Column', talign: 'right' },
		{ key: 'col2', ctype: 'string', label: 'String Column', talign: 'center' },
		{ key: 'col3', ctype: 'string', label: 'String Column 2', talign: 'left'},
	]; 
     const selectrow = (event) => {
         console.log(event.detail.rowno, event.detail.rowvalue, event.detail.rowType);
     }  
</script>

<List {rowdata} {columninfo} on:rowSelected={selectrow} />

Tree