extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-28 16:12:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get Date widget to use slots for better styling, also fixes re-initializing when not needed

Browse Source
This commit is contained in:
nathan 2022-03-07 13:33:13 -07:00
parent 0eaae8e5f1
commit 734401c6cd
1 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
api/js/etemplate/Et2Date/Et2Date.ts
View File

@ -9,7 +9,7 @@
*/ */
import {css, html} from "@lion/core"; import {css} from "@lion/core";
import {FormControlMixin, ValidateMixin} from "@lion/form-core"; import {FormControlMixin, ValidateMixin} from "@lion/form-core";
import 'lit-flatpickr'; import 'lit-flatpickr';
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
@ -292,6 +292,19 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
} }
} }
get slots()
{
return {
...super.slots,
input: () =>
{
const text = document.createElement('input');
text.type = "text";
return text;
}
}
}
constructor() constructor()
{ {
super(); super();
@ -301,7 +314,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
connectedCallback() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
this._onChange = this._onChange.bind(this); this._updateValueOnChange = this._updateValueOnChange.bind(this);
} }
disconnectedCallback() disconnectedCallback()
@ -321,11 +334,15 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
{ {
// await loadLocale(this.locale); // await loadLocale(this.locale);
} }
this.initializeComponent(); if(typeof this._instance === "undefined")
{
this.initializeComponent();
// This has to go in init() rather than connectedCallback() because flatpickr creates its nodes in // This has to go in init() rather than connectedCallback() because flatpickr creates its nodes in
// initializeComponent() so this._inputNode is not available before this // initializeComponent() so this._inputNode is not available before this
this._inputNode.addEventListener('change', this._onChange); this._inputNode.setAttribute("slot", "input");
this._inputNode.addEventListener('change', this._updateValueOnChange);
}
} }
/** /**
@ -349,7 +366,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
options.plugins = [new scrollPlugin()]; options.plugins = [new scrollPlugin()];
// Listen for flatpickr change so we can update internal value, needed for validation // Listen for flatpickr change so we can update internal value, needed for validation
options.onChange = options.onReady = () => {this.modelValue = this._inputNode.value;}; options.onChange = options.onReady = this._updateValueOnChange;
return options; return options;
} }
@ -404,13 +421,9 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
* @param _ev * @param _ev
* @returns * @returns
*/ */
_onChange(_ev : Event) : boolean _updateValueOnChange(_ev : Event)
{ {
const ret = super._onChange(_ev);
this.modelValue = this.getValue(); this.modelValue = this.getValue();
return ret;
} }
/** /**
@ -431,18 +444,6 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
this.maxDate = max; this.maxDate = max;
} }
_inputGroupInputTemplate()
{
return html`
<div class="input-group__input">
<slot name="input">
<input class="lit-flatpickr flatpickr flatpickr-input"
placeholder=${this.placeholder}/>
</slot>
</div>
`;
}
/** /**
* Override from flatpickr * Override from flatpickr
* @returns {any} * @returns {any}
@ -458,7 +459,7 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(ValidateMixin(LitFl
*/ */
get _inputNode() get _inputNode()
{ {
return /** @type {HTMLElementWithValue} */ (this.shadowRoot.querySelector('input')); return /** @type {HTMLElementWithValue} */ (this.querySelector('input[type="text"]'));
} }
} }