open-index/open-npm huggingface dataset:
npm package: @stacktics/cloudcode-svelte-forms
Description: A repository for forms, for use by the Cloudcode framework.
Latest version: 0.1.1


# Svelte Forms

A repository for forms, for use by the Cloudcode framework.

## Summary

This is for rendering forms the way that they are often described
in the framework.

## Usage

### Installation

```
npm i --save @stacktics/cloudcode-svelte-forms
```

### Form Definition

A from defintion looks like this:

```javascript
  let formFields = [
		{ Key: "stringField", Label: "String Field", Type: "string", DefaultValue: "default string" },
		{ Key: "intField", Label: "Integer Field", Type: "int", Help: "This should be a number." },
		{ Type: "_message", Label: "Note", Message: "This is a message." },
		{ Key: "passwordField", Label: "Password Field", Type: "password" },
		{ Key: "booleanField", Label: "Boolean Checkbox", Type: "boolean", DefaultValue: true },
		{ Key: "datetimeField", Label: "Date & Time", Type: "datetime" },
		{ Key: "dateField", Label: "Date Only", Type: "date" },
		{ Key: "timeField", Label: "Time Only", Type: "time" },
		{ Key: "optionsField", Label: "Options", Type: "choice", DefaultValue: "2", Choices: [
				{ Label: "Option 1", Value: "1" },
				{ Label: "Option 2", Value: "2" },
				{ Label: "Option 3", Value: "3" }
			]
		},
		{ Key: "multiField", Label: "Multiple Choice", Type: "multi-choice", DefaultValue: [], Choices: [
				{ Label: "Option 1", Value: "1" },
				{ Label: "Option 2", Value: "2" },
				{ Label: "Option 3", Value: "3" }
			]
		},
		{ Key: "textField", Label: "String", Type: "text", Rows: 5 },
		{ Key: "jsonField", Label: "Formatted String", Type: "text", Rows: 5, Format: true }
	];
```

More details on forms will be provided in upcoming Cloudcode framework
documentation. This repository will conform to that.

### Form Usage

```svelte
<script>
  import { Form } from '@stacktics/cloudcode-svelte-forms';
  
  function submitHandlerFunction(e) {
    console.log(e.detail);
  }
</script>


<Form
  fields={formFields}
  on:submit={submitHandlerFunction}
  on:cancel={cancelHandlerFunction}
  showSubmitButton={true}
  showCancelButton={true}
  submitButtonText="Submit"
  cancelButtonText="Cancel"
/>
```
npm package: @stacktics/cloudcode-svelte-ui
Description: A project with some shareable UI components for use by the Cloudcode framework.
Latest version: 1.0.3


# Cloudcode Svelte UI

A project with some shareable UI components for use by the Cloudcode framework.

## Summary

This repository defines components.

## Usage

This module can be included in a [Svelte](https://svelte.dev/) project.

### Installation

```
npm i --save @stacktics/cloudcode-svelte-ui
```

## Components

### Button

```svelte
<script>
  import { Button } from '@stacktics/cloudcode-svelte-ui';
  
  function handleClick() {
    // handle click
  }
</script>

<Button color="blue" text="Submit" on:click={handleClick} />
```

Color can be: red, yellow, green, cyan, blue, magenta, gray.

### Navbar

```svelte
<script>

  import { Navbar } from '@stacktics/cloudcode-svelte-ui';
  
  
  let title = { Text: "Title", Link: "/" };
  let menu = [
	  { Link: "/1", Text: "Link One" },
	  { Link: "/2", Text: "Link Two" }
  ];
	
</script>

<Navbar
  title={title}
  menu={menu}
/>

```