field types

templates/react/field-types/Enum/Select/edit/render.hbs

@@ -1,5 +1,10 @@
-<mwc-select outlined helper="{{label}}" {{#if required}}required{{/if}}>
-{{#each field_type.variants}}
-  <mwc-list-item {{#if ../variable_to_read}}selected={ {{../variable_to_read}}.type === '{{pascal_case this}}' }{{/if}} on:request-selected={() => { {{../variable_to_change}} = { type: '{{pascal_case this}}' }; } }>{{title_case this}}</mwc-list-item>
-{{/each}}
-</mwc-select>
+<div>
+  <label for="{{label}}">{{label}}:</label>
+  <select name="{{label}}" id="{{label}}" onChange={ (e) => set{{pascal_case ../variable_to_change}}(e.target.value) }>
+    {{#each field_type.variants}}
+    <option {{#if ../variable_to_read}}selected={ {{../variable_to_read}}.type === '{{pascal_case this}}' }{{/if}} value="{{this}}">
+      {{title_case this}}
+    </option>
+    {{/each}}
+  </select>
+</div>

templates/react/field-types/String/TextArea/edit/render.hbs

@@ -1 +1,10 @@
-<mwc-textarea outlined label="{{label}}" {{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}} on:input={e => { {{variable_to_change}} = e.target.value;} } {{#if required}}required{{/if}}></mwc-textarea>
+<div>
+	<label for="{{label}}">{{label}}</label>
+	<textarea 
+		id="{{label}}"
+		name="{{label}}"
+		{{#if variable_to_read}}value={ {{variable_to_read}} }
+		onChange={(e) => set{{pascal_case variable_to_change}}(e.target.value)} 
+		{{#if required}}required{{/if}}
+	/>
+</div>

templates/react/field-types/String/input/edit/render.hbs

@@ -0,0 +1,11 @@
+<mwc-textfield outlined label="{{label}}" {{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}} on:input={e => { {{variable_to_change}} = e.target.value; } } {{#if required}}required{{/if}}></mwc-textfield>
+<div>
+	<label for="{{label}}">{{label}}</label>
+	<input 
+		id="{{label}}"
+		type="text" 
+		name="{{label}}"
+		{{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}}
+		onChange={(e) => set{{pascal_case variable_to_change}}(e.target.value)} 
+	/>
+</div>

templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs

@@ -1,2 +1,11 @@
-<vaadin-date-time-picker label="{{label}}" {{#if variable_to_read}}value={new Date({{variable_to_read}} / 1000).toISOString()}{{/if}} on:change={e => { {{variable_to_change}} = new Date(e.target.value).valueOf() * 1000;} } {{#if required}}required{{/if}}></vaadin-date-time-picker>
-
+<div>
+	<label for="{{label}}">{{label}}</label>
+	<input 
+		id="{{label}}"
+		name="{{label}}"
+		type="datetime-local" 
+		 {{#if variable_to_read}}value={new Date({{variable_to_read}}).toISOString()}{{/if}}
+		onChange={(e) => set{{pascal_case variable_to_change}}(e.target.value)}
+		{{#if required}}required{{/if}}
+	/>
+</div>

templates/react/field-types/Vec/detail/render.hbs

@@ -1,7 +1,6 @@
-<div style="display: flex; flex-direction: column; margin-bottom: 16px">
-  <span><strong>{{title_case field_name}}</strong></span>
-
+<div>
+  <h4>{{title_case field_name}}</h4>
   {#each {{variable_to_read}} as el}
-    <span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") variable_to_read="el"}}</span>
+    <span>{{> (concat field_type.type "/" widget "/detail/render") variable_to_read="el"}}</span>
   {/each}
 </div>

templates/react/field-types/Vec/edit/render.hbs

@@ -1,9 +1,9 @@
-<div style="display: flex; flex-direction: column" >
-  <span>{{title_case field_name}}</span>
-
+<div>
+  <h4>{{title_case field_name}}</h4>
   {#each {{camel_case field_name}} as el, i}
-  {{> (concat field_type.type "/" widget "/edit/render") label="" variable_to_read="el" variable_to_change=(concat (camel_case field_name) "[i]" ) }} }`)}
+    {{> (concat field_type.type "/" widget "/edit/render") label="" variable_to_read="el" variable_to_change=(concat (camel_case field_name) "[i]" ) }} }`)}
   {/each}
-
-  <mwc-button icon="add" label="Add {{title_case field_name}}" on:click={() => { {{camel_case field_name}} = [...{{camel_case field_name}}, {{> (concat field_type.type "/" widget "/initial-value") field_type=field_type}}]; } }></mwc-button>
+  <button onClick={() => set{{pascal_case field_name}}([...{{camel_case field_name}}, {{> (concat field_type.type "/" widget "/initial-value") field_type=field_type}}])}>
+    Add {{title_case field_name}}
+  </button>
 </div>

templates/react/field-types/bool/Checkbox/edit/render.hbs

@@ -1,3 +1,4 @@
-<mwc-formfield label="{{label}}">
-  <mwc-checkbox {{#if variable_to_read}}checked={ {{variable_to_read}} }{{/if}} on:change={e => { {{variable_to_change}} = e.target.checked;} }></mwc-checkbox>
-</mwc-formfield>
+<div>
+  <label for="{{label}}">{{label}}</label>
+  <input type="checkbox" name="{{label}}" checked={ {{variable_to_read}} } />
+</div>

templates/react/field-types/f32/input/edit/render.hbs

@@ -0,0 +1,4 @@
+<div>
+  <label for="{{label}}">{{label}}</label>
+  <input type="number" id="{{label}}" name="{{label}}" {{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}} onChange={e => set{{pascal_case variable_to_change}}}(e.target.value) />
+</div>

templates/react/field-types/i32/input/edit/render.hbs

@@ -0,0 +1,4 @@
+<div>
+  <label for="{{label}}">{{label}}</label>
+  <input type="number" id="{{label}}" name="{{label}}" {{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}} onChange={e => set{{pascal_case variable_to_change}}}(e.target.value) />
+</div>

templates/react/field-types/u32/input/edit/render.hbs

@@ -0,0 +1,4 @@
+<div>
+  <label for="{{label}}">{{label}}</label>
+  <input type="number" id="{{label}}" name="{{label}}" {{#if variable_to_read}}value={ {{variable_to_read}} }{{/if}} onChange={e => set{{pascal_case variable_to_change}}}(e.target.value) />
+</div>