holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Et2Button: Fix hideOnReadonly still showed up when readonly

Browse Source
This commit is contained in:
nathan 2022-06-16 13:59:31 -06:00
parent d525918391
commit 45bdc86203
3 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
api/js/etemplate/Et2Button/Et2Button.ts
View File

@ -62,6 +62,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
max-width: 125px;
min-width: fit-content;
}
:host([hideonreadonly][disabled]) {
display:none;
}
/* Set size for icon */
::slotted(img.imageOnly) {
padding-right: 0px !important;
@ -93,8 +96,10 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
/**
* If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled
* (default)
* Something's not quite right here, as the attribute shows up as "hideonreadonly" instead of "hide" but
* it does not show up without the "attribute", and attribute:"hideonreadonly" does not show as an attribute
*/
hideOnReadonly: {type: Boolean},
hideOnReadonly: {type: Boolean, reflect: true, attribute: "hide"},
/**
* Button should submit the etemplate
@ -237,11 +242,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
render()
{
if(this.readonly && this.hideOnReadonly)
{
return '';
}
console.log(this, this.hideOnReadonly);
this._iconNode.src = this.__image || "";
if(!this.label)
{

28
api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
View File

@ -1,6 +1,6 @@
import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "../et2_core_interfaces";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {css, dedupeMixin, PropertyValues} from "@lion/core";
import {css, dedupeMixin, LitElement, PropertyValues} from "@lion/core";
import {ManualMessage} from "../Validators/ManualMessage";
import {Required} from "../Validators/Required";
@ -18,7 +18,7 @@ import {Required} from "../Validators/Required";
*/
export declare class Et2InputWidgetInterface
{
readOnly : boolean;
readonly : boolean;
protected value : string | number | Object;
public set_value(any) : void;
@ -36,10 +36,12 @@ export declare class Et2InputWidgetInterface
public isValid(messages : string[]) : boolean;
}
const Et2InputWidgetMixin = (superclass) =>
type Constructor<T = {}> = new (...args : any[]) => T;
const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T) =>
{
class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode, et2_ISubmitListener
{
private __readonly : boolean;
protected _oldValue : string | number | Object;
protected node : HTMLElement;
@ -69,12 +71,12 @@ const Et2InputWidgetMixin = (superclass) =>
readOnly: {
type: Boolean,
attribute: 'readonly',
reflect: true,
},
// readonly is what is in the templates
// I put this in here so loadWebComponent finds it when it tries to set it from the template
readonly: {
type: Boolean
type: Boolean,
reflect: true
},
required: {
@ -205,9 +207,23 @@ const Et2InputWidgetMixin = (superclass) =>
set_readonly(new_value)
{
this.readonly = this.readOnly = new_value;
this.readonly = new_value;
}
// Deal with Lion readOnly vs etemplate readonly
public set readonly(new_value)
{
debugger;
this.__readonly = super.__readOnly = new_value;
this.requestUpdate("readonly");
}
public get readonly() { return this.__readonly};
set readOnly(new_value) {this.readonly = new_value;}
get readOnly() { return this.readonly};
getValue()
{
return this.readOnly ? null : this.value;

6
api/js/etemplate/Et2Widget/Et2Widget.ts
View File

@ -37,8 +37,8 @@ function applyMixins(derivedCtor : any, baseCtors : any[])
});
}
type Constructor<T = {}> = new (...args : any[]) => T;
const Et2WidgetMixin = <T extends Constructor<LitElement>>(superClass : T) =>
type Constructor<T = LitElement> = new (...args : any[]) => T;
const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
{
class Et2WidgetClass extends superClass implements et2_IDOMNode
{
@ -1316,7 +1316,7 @@ export function loadWebComponent(_nodeName : string, _template_node : Element|{[
if (parent) widget.setParent(parent);
// Set read-only. Doesn't really matter if it's a ro widget, but otherwise it needs set
widget.readOnly = readonly;
widget.readonly = readonly;
widget.transformAttributes(attrs);