extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-03 04:29:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2InputWidget: Split label around widget if it has %s in it

Browse Source
This commit is contained in:
nathan 2023-03-07 10:51:33 -07:00
parent 6003de2409
commit 5760c5049f
1 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import {css, dedupeMixin, LitElement, PropertyValues} from "@lion/core";
import {Required} from "../Validators/Required"; import {Required} from "../Validators/Required";
import {ManualMessage} from "../Validators/ManualMessage"; import {ManualMessage} from "../Validators/ManualMessage";
import {LionValidationFeedback, Validator} from "@lion/form-core"; import {LionValidationFeedback, Validator} from "@lion/form-core";
import {et2_csvSplit} from "../et2_core_common";
/** /**
* This mixin will allow any LitElement to become an Et2InputWidget * This mixin will allow any LitElement to become an Et2InputWidget
@ -96,6 +97,13 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
{ {
return { return {
...super.properties, ...super.properties,
/**
* The label of the widget
* Overridden from parent to use our accessors
*/
label: {
type: String, noAccessor: true
},
// readOnly is what the property is in Lion, readonly is the attribute // readOnly is what the property is in Lion, readonly is the attribute
readOnly: { readOnly: {
type: Boolean, type: Boolean,
@ -347,6 +355,40 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
return this.readonly || this.disabled ? null : this.value; return this.readonly || this.disabled ? null : this.value;
} }
/**
* Legacy support for labels with %s that get wrapped around the widget
*
* Not the best way go with webComponents - shouldn't modify their DOM like this
*
* @param new_label
*/
set label(new_label : string)
{
if(!new_label || !new_label.includes("%s"))
{
return super.label = new_label;
}
this.__label = new_label;
const [pre, post] = et2_csvSplit(new_label, 2, "%s");
this.label = pre;
if(post?.trim().length > 0)
{
const label = document.createElement("et2-description");
label.innerText = post;
// Put in suffix, if parent has a suffix slot
if(this.parentNode?.shadowRoot?.querySelector("slot[name='suffix']"))
{
label.slot = "suffix";
}
this.parentNode.append(label);
}
}
get label()
{
return this.__label;
}
isDirty() isDirty()
{ {