28 lines
1.2 KiB
JavaScript
28 lines
1.2 KiB
JavaScript
|
/**
|
||
|
|
* ColorPicker Component Module
|
||
|
|
*/
|
||
|
|
globalThis.Component.register('ColorPicker', container => {
|
||
|
|
container._thisObj = container;
|
||
|
|
container.state = globalThis.NewState({ value: '#000000' })
|
||
|
|
container.addEventListener('bind', e => {
|
||
|
|
container.state.value = e.detail || '#000000'
|
||
|
|
})
|
||
|
|
Object.defineProperty(container, 'value', {
|
||
|
|
get: () => container.state.value,
|
||
|
|
set: v => { container.state.value = v || '#000000'; }
|
||
|
|
})
|
||
|
|
container.updateValue = (val) => {
|
||
|
|
container.state.value = val
|
||
|
|
container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: val }))
|
||
|
|
}
|
||
|
|
}, globalThis.Util.makeDom(/*html*/`
|
||
|
|
<div class="d-flex align-items-center gap-2 w-100 h-100">
|
||
|
|
<input type="color" class="form-control form-control-color flex-shrink-0" style="width: 3rem; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
|
||
|
|
<input type="text" class="form-control" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">
|
||
|
|
</div>
|
||
|
|
`))
|
||
|
|
|
||
|
|
if (globalThis.AutoForm) {
|
||
|
|
globalThis.AutoForm.register('ColorPicker')
|
||
|
|
}
|