npm package: @solidk-tech/schema-to-component
Description: This is a react component helper to easily describes your components based on a class.
Author: Diego Paiva
Latest version: 0.0.2

# Schema to Component

This is a helper library used to make it easier to render components on you project.

<p align="center">
  <img alt="Schema To Component" src="https://avatars.githubusercontent.com/u/112099862?s=400&u=6f508875b6c41b1f8a63735da1345e6af8396ab6&v=4" width="128" height="128">
  <br>
  <a href="https://www.npmjs.com/package/@solidk-tech/schema-to-component"><img src="https://img.shields.io/npm/v/@solidk-tech/schema-to-component.svg"></a>
  <a href="https://www.npmjs.com/package/@solidk-tech/schema-to-component"><img src="https://img.shields.io/npm/dt/@solidk-tech/schema-to-component.svg"></a>
  <a href="https://www.npmjs.com/package/@solidk-tech/schema-to-component"><img src="https://img.shields.io/npm/l/@solidk-tech/schema-to-component.svg"></a>
</p>

## Example of usage with multiples fields.

```typescript
// .src/classes/MyModel.ts
class MyModel extends MySchema {
	email: string | null = "";
	password: string | null = "";
}
```

```typescript
// .src/schema/MySchema.ts
import { MyModel } from "./MyModel";

export class MySchema extends Schema {
	translateFrom = (fieldName: string) => fieldName.toLocaleUpperCase();

	readonly fieldSet: FieldSet<MyModel> = {
		email: (schema): FieldComponent<MyModel, any> => ({
			component: "input",
			props: {
				id: "id-email",
				name: "name-email",
				type: "text",
				placeholder: "This is an input",
				className: "my-component-class",
				value: schema.model.email,
				onInput: (event: any) => (schema.model.email = event?.target.value),
			},
		}),
		password: (schema): FieldComponent<MyModel, any> => ({
			component: "input",
			props: {
				id: "id-password",
				name: "name-password",
				type: "password",
				placeholder: "*****",
				className: "my-component-class",
				onInput: (event: any) => (schema.model.password = event?.target.value),
			},
		}),
	};
}
```

```typescript
// .src/App.vue
<script setup lang="ts">
import { reactive } from "vue";
import { MyModel } from "./classes/MyModel";

const data = reactive(new MyModel());

function clg(val: any) {
	console.log(val);
}
</script>

<template>
	<form @submit.prevent="clg">
		<RenderSchema
			v-for="(item, index) in data.allFields"
			:key="index"
			:model="data"
			:fieldName="item"
		/>
		<button type="submit">Send</button>
	</form>
</template>

```

## Alternative you can render only a specific field of the class.

```typescript
// .src/App.vue
<script setup lang="ts">
import { reactive } from "vue";
import { MyModel } from "./classes/MyModel";

const data = reactive(new MyModel());

function clg(val: any) {
	console.log(val);
}
</script>

<template>
	<form @submit.prevent="clg">
		<RenderSchema :model="data" :fieldName="email" />
		<RenderSchema :model="data" :fieldName="password" />
		<button type="submit">Send</button>
	</form>
</template>

```

### This is how the component is gone look like:

```html
<!-- index.html Rendered -->
<div id="app">
	<form>
		<input
			id="id-email"
			name="name-email"
			type="text"
			placeholder="This is an input"
			class="my-component-class"
		/><input
			id="id-password"
			name="name-password"
			type="password"
			placeholder="*****"
			class="my-component-class"
		/><button type="submit">Send</button>
	</form>
</div>
```