Fix setting Et2DateDuration.value programmatically did not update UI

This commit is contained in:
nathan 2024-09-11 10:57:32 -06:00
parent e156ea8f64
commit 66093ae038
2 changed files with 19 additions and 2 deletions

View File

@ -17,6 +17,7 @@ import {dateStyles} from "./DateStyles";
import shoelace from "../Styles/shoelace"; import shoelace from "../Styles/shoelace";
import {customElement} from "lit/decorators/custom-element.js"; import {customElement} from "lit/decorators/custom-element.js";
import {property} from "lit/decorators/property.js"; import {property} from "lit/decorators/property.js";
import {live} from "lit/directives/live.js";
export interface formatOptions export interface formatOptions
{ {
@ -363,6 +364,18 @@ export class Et2DateDuration extends Et2InputWidget(LitElement)
set value(_value) set value(_value)
{ {
this._display = this._convert_to_display(this.emptyNot0 && ""+_value === "" ? '' : parseFloat(_value)); this._display = this._convert_to_display(this.emptyNot0 && ""+_value === "" ? '' : parseFloat(_value));
// Update values
(typeof this._display.value == "string" ? this._display.value.split(":") : [this._display.value])
.forEach((v, index) =>
{
if(!this._durationNode[index])
{
return;
}
const old = this._durationNode[index]?.value;
this._durationNode[index].value = v;
this._durationNode[index].requestUpdate("value", old);
});
this.requestUpdate(); this.requestUpdate();
} }
@ -578,7 +591,7 @@ export class Et2DateDuration extends Et2InputWidget(LitElement)
step=${this.step} step=${this.step}
precision=${typeof input.precision === "number" ? input.precision : nothing} precision=${typeof input.precision === "number" ? input.precision : nothing}
title=${input.title || nothing} title=${input.title || nothing}
value=${input.value} value=${live(input.value)}
@sl-change=${this.handleInputChange} @sl-change=${this.handleInputChange}
></et2-number>` ></et2-number>`
)} )}

View File

@ -218,6 +218,7 @@ export class Et2Number extends Et2Textbox
@property({type: String}) @property({type: String})
set value(val) set value(val)
{ {
const old = this.value;
if("" + val !== "") if("" + val !== "")
{ {
// Remove separator so parseFloat works // Remove separator so parseFloat works
@ -238,6 +239,7 @@ export class Et2Number extends Et2Textbox
if(isNaN(val)) if(isNaN(val))
{ {
super.value = val; super.value = val;
this.requestUpdate("value", old);
return; return;
} }
if(this.max && val > this.max) if(this.max && val > this.max)
@ -249,6 +251,8 @@ export class Et2Number extends Et2Textbox
val = this.min; val = this.min;
} }
super.value = formatNumber(val, this.decimalSeparator, this.thousandsSeparator, this.precision); super.value = formatNumber(val, this.decimalSeparator, this.thousandsSeparator, this.precision);
this.requestUpdate("value", old);
} }
get value() : string get value() : string
@ -337,7 +341,7 @@ export class Et2Number extends Et2Textbox
// The initial options need to match an actual number // The initial options need to match an actual number
radix: this.decimalSeparator, radix: this.decimalSeparator,
thousandsSeparator: this.thousandsSeparator, thousandsSeparator: this.thousandsSeparator,
mask: this.mask ?? Number, // mask: this.mask ?? Number,
lazy: false, lazy: false,
padFractionalZeros: (typeof this.precision !== "undefined"), padFractionalZeros: (typeof this.precision !== "undefined"),
definitions: { definitions: {