@stacktics/cloudcode-svelte-forms v0.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:

  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

<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"
/>