# svelte-carbonara

> Simple form rendering in Svelte and Carbon.

Latest version **0.1.9** (published 2023-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-carbonara
pnpm add svelte-carbonara
yarn add svelte-carbonara
bun add svelte-carbonara
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2023-06-13 |
| First published | 2023-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Karl I. Weidele |
| Maintainers | dkarl |

## Links

- npm: https://www.npmjs.com/package/svelte-carbonara
- npm.io page: https://npm.io/package/svelte-carbonara

## Recent versions

- 0.1.9 (latest) — 2023-06-13
- 0.1.8 — 2023-06-13
- 0.1.7 — 2023-06-13
- 0.1.6 — 2023-06-13
- 0.1.5 — 2023-06-13
- 0.1.4 — 2023-06-13
- 0.1.3 — 2023-06-13
- 0.1.2 — 2023-06-02
- 0.1.1 — 2023-06-02
- 0.1.0 — 2023-06-02
- 0.0.2 — 2023-06-02
- 0.0.1 — 2023-06-02

## README

# svelte-carbonara

Simple form rendering in Svelte and Carbon.

## Add to your project

`npm install -s svelte-carbonara`

## Example

```
<script lang="ts">
    import "carbon-components-svelte/css/g100.css";
    import {Grid, Row, Column, Form, Button} from "carbon-components-svelte";
    import {Carbonara, CarbonTextInput, CarbonTextArea, CarbonNumberInput, CarbonCheckbox, CarbonaraList} from "svelte-carbonara";


    class Role {

        @CarbonTextInput({labelText: "Title"})
        public title: string;

        @CarbonTextArea({labelText: "Description"})
        public description: string;
    }

    class Employee {

        @CarbonTextInput({labelText: "Name"})
        public name: string;

        @CarbonTextArea({labelText: "Background"})
        public occupation: string;

        @CarbonNumberInput({label: "Age"})
        public age: number = 0;

        @CarbonCheckbox({labelText: "Manager"})
        public manager: boolean;

        @CarbonaraList({
            labelText: "Role",
            labelProperty: "title",
            factory: () => new Role()
        })
        public roles: Role[] = [];

    }

    let employee = new Employee();
</script>

<Grid>
    <Row>
        <Column>
            <h1>Carbonara Sample Form</h1>
        </Column>
    </Row>
    <Row>
        <Column>
            <Form>
                <Carbonara bind:value={employee}/>
            </Form>
        </Column>
    </Row>
    <Row>
        <Column>
            <Button on:click={() => {
                alert(JSON.stringify(employee));
            }}>
                Save
            </Button>
        </Column>
    </Row>
    <Row style="margin-top: 100px;">
        <Column>
            <h4>{JSON.stringify(employee)}</h4>
        </Column>
    </Row>
</Grid>

```

---
_Source: https://npm.io/package/svelte-carbonara · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._