Fix widget class in .xet file was not showing up on webcomponent element

This commit is contained in:
nathan 2021-09-03 14:44:52 -06:00
parent 4cafdeb359
commit 968a2d03bb
2 changed files with 28 additions and 2 deletions

View File

@ -47,7 +47,7 @@ export class Et2Box extends Et2Widget(LitElement) implements et2_IDetachedDOM
render() render()
{ {
return html` return html`
<div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}> <div ${this.id ? html`id="${this.id}"` : ''}>
<slot></slot> <slot></slot>
</div> `; </div> `;
} }
@ -104,7 +104,7 @@ export class Et2HBox extends Et2Box
css` css`
:host > div { :host > div {
flex-direction: row; flex-direction: row;
}` }`
]; ];
} }
} }

View File

@ -72,6 +72,12 @@ const Et2WidgetMixin = (superClass) =>
return { return {
...super.properties, ...super.properties,
/**
* CSS Class. This class is applied to the _outside_, on the web component itself.
* Due to how WebComponents work, this might not change anything inside the component.
*/
class: {type: String, reflect: true},
/** /**
* Defines whether this widget is visible. * Defines whether this widget is visible.
* Not to be confused with an input widget's HTML attribute 'disabled'.", * Not to be confused with an input widget's HTML attribute 'disabled'.",
@ -187,6 +193,19 @@ const Et2WidgetMixin = (superClass) =>
this.requestUpdate('label', oldValue); this.requestUpdate('label', oldValue);
} }
set class(value : string)
{
let oldValue = this.classList.value;
this.classList.value = value;
this.requestUpdate('class', oldValue);
}
get class()
{
return this.classList.value;
}
/** /**
* Event handlers * Event handlers
*/ */
@ -579,6 +598,10 @@ const Et2WidgetMixin = (superClass) =>
addChild(child : et2_widget | Et2WidgetClass) addChild(child : et2_widget | Et2WidgetClass)
{ {
if(this._children.indexOf(child) >= 0)
{
return;
}
if(child instanceof et2_widget) if(child instanceof et2_widget)
{ {
child._parent = this; child._parent = this;
@ -642,6 +665,9 @@ const Et2WidgetMixin = (superClass) =>
// Create the copy // Create the copy
var copy = <Et2WidgetClass>this.cloneNode(); var copy = <Et2WidgetClass>this.cloneNode();
let widget_class = window.customElements.get(this.nodeName);
let properties = widget_class ? widget_class.properties() : {};
console.log(this, properties);
if(_parent) if(_parent)
{ {
copy.setParent(_parent); copy.setParent(_parent);