mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-06-25 20:31:31 +02:00
Fix Et2TreeDropDown did not properly handle required
This commit is contained in:
parent
296dda44f1
commit
d8d9847012
@ -77,6 +77,10 @@ export default css`
|
|||||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
|
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([required]) .tree-dropdown__combobox {
|
||||||
|
background-color: var(--background-required);
|
||||||
|
}
|
||||||
|
|
||||||
/* Trigger */
|
/* Trigger */
|
||||||
|
|
||||||
.tree-dropdown__expand-icon {
|
.tree-dropdown__expand-icon {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {LitElement, nothing, TemplateResult} from "lit";
|
import {LitElement, nothing, PropertyValues, TemplateResult} from "lit";
|
||||||
import {html, literal, StaticValue} from "lit/static-html.js";
|
import {html, literal, StaticValue} from "lit/static-html.js";
|
||||||
import {Et2Tree, TreeItemData, TreeSearchResult} from "./Et2Tree";
|
import {Et2Tree, TreeItemData, TreeSearchResult} from "./Et2Tree";
|
||||||
import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
|
import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
|
||||||
@ -13,6 +13,7 @@ import styles from "./Et2TreeDropdown.styles";
|
|||||||
import {Et2Tag} from "../Et2Select/Tag/Et2Tag";
|
import {Et2Tag} from "../Et2Select/Tag/Et2Tag";
|
||||||
import {SearchMixin, SearchResult, SearchResultsInterface} from "../Et2Widget/SearchMixin";
|
import {SearchMixin, SearchResult, SearchResultsInterface} from "../Et2Widget/SearchMixin";
|
||||||
import {Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
|
import {Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
|
||||||
|
import {Required} from "../Validators/Required";
|
||||||
|
|
||||||
|
|
||||||
interface TreeSearchResults extends SearchResultsInterface<TreeSearchResult>
|
interface TreeSearchResults extends SearchResultsInterface<TreeSearchResult>
|
||||||
@ -113,11 +114,37 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
|||||||
document.removeEventListener("click", this.handleDocumentClick);
|
document.removeEventListener("click", this.handleDocumentClick);
|
||||||
}
|
}
|
||||||
|
|
||||||
updated()
|
updated(changedProperties : PropertyValues)
|
||||||
{
|
{
|
||||||
|
super.updated(changedProperties);
|
||||||
|
|
||||||
|
// required changed, add / remove validator
|
||||||
|
if(changedProperties.has('required'))
|
||||||
|
{
|
||||||
|
// Remove all existing Required validators (avoids duplicates)
|
||||||
|
this.validators = (this.validators || []).filter((validator) => !(validator instanceof Required))
|
||||||
|
if(this.required)
|
||||||
|
{
|
||||||
|
this.validators.push(new Required());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(changedProperties.has("value"))
|
||||||
|
{
|
||||||
|
// Base off this.value, not this.getValue(), to ignore readonly
|
||||||
|
this.classList.toggle("hasValue", !(this.value == null || this.value == ""));
|
||||||
|
}
|
||||||
|
|
||||||
|
// pass aria-attributes to our input node
|
||||||
|
if(changedProperties.has('ariaLabel') || changedProperties.has('ariaDescription'))
|
||||||
|
{
|
||||||
|
this._setAriaAttributes();
|
||||||
|
}
|
||||||
|
|
||||||
// @ts-ignore Popup sometimes loses the anchor which breaks the sizing
|
// @ts-ignore Popup sometimes loses the anchor which breaks the sizing
|
||||||
this._popup.handleAnchorChange();
|
this._popup.handleAnchorChange();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Selected tree leaves */
|
/** Selected tree leaves */
|
||||||
@property()
|
@property()
|
||||||
set value(new_value : string | string[])
|
set value(new_value : string | string[])
|
||||||
@ -610,7 +637,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
|||||||
?disabled=${this.disabled}
|
?disabled=${this.disabled}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
part="combobox"
|
part="combobox control"
|
||||||
class="tree-dropdown__combobox"
|
class="tree-dropdown__combobox"
|
||||||
slot="anchor"
|
slot="anchor"
|
||||||
@keydown=${this.handleComboboxKeyDown}
|
@keydown=${this.handleComboboxKeyDown}
|
||||||
|
@ -5,7 +5,7 @@ export class Validator
|
|||||||
* @param {?} [param]
|
* @param {?} [param]
|
||||||
* @param {Object.<string,?>} [config]
|
* @param {Object.<string,?>} [config]
|
||||||
*/
|
*/
|
||||||
constructor(param, config)
|
constructor(param?, config?)
|
||||||
{
|
{
|
||||||
|
|
||||||
/** @type {?} */
|
/** @type {?} */
|
||||||
|
@ -2010,6 +2010,7 @@ img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
|
|||||||
/* selects */
|
/* selects */
|
||||||
[required]:not(.hasValue)::part(control) {
|
[required]:not(.hasValue)::part(control) {
|
||||||
background-color: #ffffd0;
|
background-color: #ffffd0;
|
||||||
|
--sl-input-background-color: #ffffd0;
|
||||||
}
|
}
|
||||||
|
|
||||||
td.et2_required {
|
td.et2_required {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user