gCubeSystem
/
web-components
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

support for boolean and number inputs

This commit is contained in:
dcore94 2023-10-09 13:25:47 +02:00
parent 6911ba7c9d
commit 22ea7a3d55
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ccp/js/inputwidgetcontroller.js
View File

@ -35,6 +35,12 @@ class CCPInputWidgetController extends HTMLElement {
}else if(this.isSecret()){
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
}else if(this.isBoolean()){
this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
}else if(this.isNumber()){
this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
}else{
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
}
@ -58,6 +64,20 @@ class CCPInputWidgetController extends HTMLElement {
return this.isEnum() && (this.#data.schema.format === "checklist")
}
isNumber(){
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "number")
}
isBoolean(){
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "boolean")
}
isEnum(){
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
}
@ -367,6 +387,43 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
constructor(){
super()
}
connectedCallback(){
this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
const index = Number(ev.target.getAttribute("data-index"))
this.value[index] = ev.target.checked
}
})
}
content(){
if(this.value.length <= 1){
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] === true ? 'checked' : ''} value="${ this.value[0]}"/>
</div>
`
}
var out =
this.value.map((c,i)=>{
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c === true ? 'checked' : ''} value="${this.value[i]}"/>
</div>
`
}).join("\n")
return out
}
}
window.customElements.define('d4s-ccp-input-boolean', CCPBooleanInputWidgetController);
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
constructor(){

4
ccp/js/inputwidgeteditorcontroller.js
View File

@ -119,9 +119,11 @@ class CCPInputWidgetEditorController extends HTMLElement{
<option value="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
<option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
<option value="dateTime" ${this.isSelectedFormat('dateTime') ? "selected" : ""}>Date time</option>
<option value="number" ${this.isSelectedFormat('number') ? "selected" : ""}>Number</option>
<option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
<option value="remotefile" ${this.isSelectedFormat('file') ? "selected" : ""}>Remote file</option>
<option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
</select>