open-index/open-npm huggingface dataset:
npm package: @philrwebb/auto-form
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.19

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte

# create a new project in my-app
npm init svelte my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @philrwebb/component-library
Description: ## 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 prog
Latest version: 0.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

```bash
# 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

```javascript
<script>
	Import {Tabs, Tab} from @philrwebb/component-library@latest
</script>
```
```html
<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.
```javascript
<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>
```
```html
<List {rowdata} {columninfo} on:rowSelected={selectrow} />
```
### Tree