svelte-schema-forms

Schema Forms to Json for Svelte

Requirements

This package work with bootstrap

Install

1npm i svelte-schema-forms

Example

1<script>
2    import {SchemaForm} from 'svelte-schema-forms'
3    let configFormRow = [3,2,2,2,2,2,2]
4    let configFieldRow = [3,3,3,3,3,3,3]
5    let schema = {
6      "title": {
7        "label" : "Title",
8        "type": "text",
9        "class" : "form-control-plaintext",
10        "placeholder" : "Ingrese titulo",
11        "hidden" : false
12      },
13      "description": {
14        "label" : "Description",
15        "type": "text",
16        "placeholder" : "Ingrese Descripción"
17      },
18      "seleccion": {
19        "label" : "Seleccion",
20        "type": "select",
21        "data": [
22          {
23            "valor1" : "SOLTERO",
24            "valor2" : "1"
25          },
26          {
27            "valor1" : "CASADO",
28            "valor2" : "2"
29          },
30          {
31            "valor1" : "VIUDO",
32            "valor2" : "3"
33          },
34          {
35            "valor1" : "DIVORCIADO",
36            "valor2" : "4"
37          }
38        ],
39        "valueData" : "valor2",
40        "textData" : "valor1"
41      },
42      "radio": {
43        "label" : "radio",
44        "type": "radio",
45        "data": [
46          {
47            "valor1" : "SOLTERO",
48            "valor2" : "1"
49          },
50          {
51            "valor1" : "CASADO",
52            "valor2" : "2"
53          },
54          {
55            "valor1" : "VIUDO",
56            "valor2" : "3"
57          },
58          {
59            "valor1" : "DIVORCIADO",
60            "valor2" : "4"
61          }
62        ],
63        "valueData" : "valor2",
64        "textData" : "valor1"
65      },
66      "description4": {
67        "label" : "Description4",
68        "type": "textarea"
69      },
70      "array": {
71        "label" : "Array",
72        "type": "array",
73        "contentArray" : {
74          "texto1" : {
75            "label" : "TextoArray1",
76            "type" : "text"
77          },
78          "texto2" : {
79            "label" : "TextoArray2",
80            "type" : "textarea"
81          },
82          "seleccion": {
83            "label" : "Seleccion",
84            "type": "select",
85            "data": [
86              {
87                "valor1" : "SOLTERO",
88                "valor2" : "1"
89              },
90              {
91                "valor1" : "CASADO",
92                "valor2" : "2"
93              },
94              {
95                "valor1" : "VIUDO",
96                "valor2" : "3"
97              },
98              {
99                "valor1" : "DIVORCIADO",
100                "valor2" : "4"
101              }
102            ],
103            "valueData" : "valor2",
104            "textData" : "valor1"
105          },
106          "radioArray":{
107            "label" : "radioArray",
108            "type" : "radio",
109            "data" : [
110              {
111                "valor1" : "Masculino",
112                "valor2" : "1"
113              },
114              {
115                "valor1" : "Femenino",
116                "valor2" : "2"
117              }
118            ],
119            "valueData" : "valor2",
120            "textData" : "valor1"
121          },
122        },
123      },
124      "description6": {
125        "label" : "Description",
126        "type": "textarea",
127        "hidden" : true
128      },
129      "Lista" : {
130        "label" : "Lista",
131        "type" : "list",
132        "data" : [
133          {
134            "codigo" : "001",
135            "departamento" : "LIMA",
136            "ubigeo" : "015244"
137          },
138          {
139            "codigo" : "002",
140            "departamento" : "JUNIN",
141            "ubigeo" : "11111"
142          },
143          {
144            "codigo" : "003",
145            "departamento" : "HUANCAVELICA",
146            "ubigeo" : "22221"
147          }
148        ],
149        "posValue" : "0",
150        "posText" : "1",
151        "valueData" : "codigo"
152      },
153      "Lista2" : {
154        "label" : "Lista2",
155        "type" : "list",
156        "data" : [
157          {
158            "codigo" : "005",
159            "provincia" : "CHOSICA",
160            "ubigeo" : "333333"
161          },
162          {
163            "codigo" : "008",
164            "provincia" : "HUANCAYO",
165            "ubigeo" : "44444"
166          },
167          {
168            "codigo" : "004",
169            "provincia" : "HUANCAVELICA",
170            "ubigeo" : "4444"
171          }
172        ],
173        "posValue" : "0",
174        "posText" : "1",
175        "valueData" : "codigo"
176      }
177    }
178  
179    const handleSubmit = (data) => {
180      // Handle Submit here.
181      console.log(data)
182    }
183  
184    const handleChange = (data) => {
185      // Handle Change here.
186    }
187
188    let formData = {}
189
190    $: console.log(formData)
191
192  </script>
193        <SchemaForm
194        {schema}
195        {configFormRow}
196        {configFieldRow}
197        bind:formData={formData}
198        txtSubmit = "Siguiente"
199        txtBack = "Atras"
200        displayBack = true
201
202        onSubmit={handleSubmit}
203        onBack={handleChange}
204/>
205