viewof config = { const generators = [ {name: "increment", props:[]}, {name: "uuid", props:[]}, {name:"cpf", props:[ {name:"withDots", type:"boolean", default:false}, {name:"withValidator", type:"boolean", default:false}, ]}, {name:"dateISO", props: []}, {name:"dateDMY", props: []}, {name:"dateYMD", props: []}, {name:"date", props: []}, {name:"text", props: [ {name:"possibleValues", type:"array", default:[]} ]}, {name:"int", props: [ {name:"min", type:"number", default:0}, {name:"max", type:"number", default:100} ]}, {name:"float", props: [ {name:"min", type:"number", default:0}, {name:"max", type:"number", default:100} ]}, {name:"custom", props: [ {name: "jsCode", type:"text", default:"(i,j) => `id-${i}_${j}`"} ]} ] const div = html`

` const list = html`

` div.value = {size:15, columns:[]} const emitEvent = () => { div.dispatchEvent(new CustomEvent("input")) } const renderLine = (line, index) => { const divLine = html`

` const removeButton = html`` removeButton.onclick = () => { div.value.columns.splice(index, 1) renderList(); emitEvent() } const lineName = html`` lineName.oninput = () => { div.value.columns[index].name = lineName.value emitEvent() } const lineType = html`` lineType.oninput = () => { div.value.columns[index].type = lineType.value div.value.columns[index].propValues = ((generators.find(g => g.name == lineType.value) || {}).props || []).map( prop => prop.default ) renderList(); emitEvent() } const customizer = html`

`; ((generators.find(g => g.name == line.type) || {}).props || []).forEach((prop,i) => { const cProp = html`

` cProp.appendChild(html`${prop.name}: `) switch(prop.type) { case "boolean": const cbx = html`` cbx.oninput = () => { div.value.columns[index].propValues[i] = cbx.checked emitEvent() } cProp.appendChild(cbx) break; case "array": if (line.propValues[i] == null) { line.propValues[i] = [] } const arrList = html`

`; const arrListAdd = html`` arrListAdd.onclick = () => { div.value.columns[index].propValues[i].push("") renderList(); emitEvent() } cProp.appendChild(arrListAdd) line.propValues[i].forEach((val, j) => { const item = html`

` const itemInput = html`` itemInput.oninput = () => { div.value.columns[index].propValues[i][j] = itemInput.value emitEvent() } item.appendChild(itemInput) const itemRemove = html`` itemRemove.onclick = () => { div.value.columns[index].propValues[i].splice(j,1) renderList(); emitEvent() } item.appendChild(itemRemove) arrList.appendChild(item) }) cProp.appendChild(arrList) break; case "number": const numberInput = html`` numberInput.oninput = () => { div.value.columns[index].propValues[i] = numberInput.valueAsNumber emitEvent() } cProp.appendChild(numberInput) break; case "text": const txtInput = html`` txtInput.oninput = () => { div.value.columns[index].propValues[i] = txtInput.value emitEvent() } cProp.appendChild(txtInput) break; } customizer.appendChild(cProp) }) divLine.appendChild(lineName) divLine.appendChild(lineType) divLine.appendChild(removeButton) divLine.appendChild(customizer) return divLine } const renderList = () => { list.innerHTML = ""; div.value.columns.forEach((val,i) => { list.appendChild(renderLine(val, i)) }) } const addBtn = html`` addBtn.onclick = () => { div.value.columns.push({ name: "", type: null, propValues:[] }) renderList() emitEvent() } div.appendChild(addBtn) div.appendChild(html`

Name | Type | Type customizations | Remove

`) div.appendChild(list) div.appendChild(html`

`) const amountInput = html`` amountInput.oninput = () => { div.value.size = amountInput.value emitEvent() } div.appendChild(html`

Amount of rows:

`) div.appendChild(amountInput) div.value = { size: 15, columns: [ { name: "id", type: "uuid", propValues: [] }, { name: "name", type: "text", propValues: [["ana","bob","dave"]] }, { name: "birthDate", type: "dateYMD", propValues: [] }, { name: "cpf", type: "cpf", propValues: [true, true] }, { name: "purchases", type: "int", propValues: [0,15] }, { name: "totalSpent", type: "int", propValues: [0, 10000] }, { name: "socialClass", type: "text", propValues: [["A","B","C","D","E"]] }, { name: "purchaseCapacity", type: "custom", propValues: ["() => Math.floor( Math.min(10,Math.exp(Math.random()*2.41))/2 )"] }, ] } emitEvent() renderList() return div; }