From 45085b371bce3949dbc232944c070ea1a5a0880e Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Thu, 24 Oct 2024 14:36:11 -0300 Subject: [PATCH] feat!: move search button to light dom --- package.json | 2 +- src/vcf-lookup-field.d.ts | 1 + src/vcf-lookup-field.d.ts.map | 2 +- src/vcf-lookup-field.js | 53 +++++++++++++++++++++++------------ 4 files changed, 38 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 7dfd85b..a27b390 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vaadin-component-factory/vcf-lookup-field", - "version": "24.0.0", + "version": "5.0.0", "description": "Vaadin Lookup field component", "main": "theme/lumo/vcf-lookup-field.js", "author": "Vaadin Ltd", diff --git a/src/vcf-lookup-field.d.ts b/src/vcf-lookup-field.d.ts index 9a1566a..c9d9824 100644 --- a/src/vcf-lookup-field.d.ts +++ b/src/vcf-lookup-field.d.ts @@ -158,6 +158,7 @@ export class LookupField extends LookupField_base { _filterValue: any; _forceFooterRerender: boolean; _forceHeaderRerender: boolean; + _createSearchButton(): void; focus(): void; __onSelectItem(event: any): void; __onSelectChanged(event: any): void; diff --git a/src/vcf-lookup-field.d.ts.map b/src/vcf-lookup-field.d.ts.map index 301486d..63a2c5e 100644 --- a/src/vcf-lookup-field.d.ts.map +++ b/src/vcf-lookup-field.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"vcf-lookup-field.d.ts","sourceRoot":"","sources":["vcf-lookup-field.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH;IACE,2CAsIC;IAsVD,wBAEC;IAED,6BAEC;IAED;;;;QAMI;;;;WAIG;eADQ,MAAM,MAAM,CAAC,GAAG,SAAS;;;;QAWpC;;;;;;;;;;;;WAYG;uBADO,MAAM;QAOhB;;;;;;;;;WASG;uBADO,MAAM;QAOhB;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;;;;;QAUH;;WAEG;;;;;;;;;;QAgBH;;WAEG;;QAGH;;WAEG;;;;;;;;;;QAgBH;;WAEG;;QAMH;;WAEG;;QAMH;;;;WAIG;;;;;;;;;;;;;;MAiBN;IAxfC,kCAAqE;IACrE,iCAAiE;IACjE,kCAEE;IAGJ,cA0GC;IAvGG,WAA+C;IAK/C,aAAmD;IAKnD,YAAiD;IAMjD,eAAuD;IAYrD,kBAAkC;IAQpC,8BAAiC;IAejC,8BAAiC;IAsDrC,cAKC;IAED,iCAGC;IAED,oCAOC;IANC,uBAAgD;IAE9C,+BAAkC;IAMtC,oBAuCC;IAjCK,cAAoB;IAmC1B,kEAYC;IAVG,2BAA8B;IAYlC,eAAe;IACf,sBA6BC;IAZO,mBAAyB;IAGzB,mBAAyB;IAWjC,mFAEC;IAED,wDAEC;IAED,yDAEC;IAED,+BAQC;IAED,8CAUC;IAED,eAAe;IACf,wBAYC;IAED,eAAe;IACf,eAqBC;IAVG,iBAAiD;IAWrD,eAAe;IACf,gBAEC;IACD,eAAe;IACf,iBAEC;IACD,eAAe;IACf,iBAiBC;IAED,8BAOC;IAED,sBAIC;CAyKF"} \ No newline at end of file +{"version":3,"file":"vcf-lookup-field.d.ts","sourceRoot":"","sources":["vcf-lookup-field.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH;IACE,2CAqIC;IAiXD,wBAEC;IAED,6BAEC;IAED;;;;QAMI;;;;WAIG;eADQ,MAAM,MAAM,CAAC,GAAG,SAAS;;;;QAWpC;;;;;;;;;;;;WAYG;uBADO,MAAM;QAOhB;;;;;;;;;WASG;uBADO,MAAM;QAOhB;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;QAGH;;WAEG;;;;;;QAUH;;WAEG;;;;;;;;;;QAgBH;;WAEG;;QAGH;;WAEG;;;;;;;;;;QAgBH;;WAEG;;QAMH;;WAEG;;QAMH;;;;WAIG;;;;;;;;;;;;;;MAiBN;IAnhBC,kCAAqE;IACrE,iCAAiE;IACjE,kCAEE;IAGJ,cA6GC;IAvGG,WAA+C;IAK/C,aAAmD;IAKnD,YAAiD;IAMjD,eAAuD;IAYrD,kBAAkC;IAQpC,8BAAiC;IAejC,8BAAiC;IAsDrC,4BAsBC;IAED,cAKC;IAED,iCAGC;IAED,oCAOC;IANC,uBAAgD;IAE9C,+BAAkC;IAMtC,oBAuCC;IAjCK,cAAoB;IAmC1B,kEAYC;IAVG,2BAA8B;IAYlC,eAAe;IACf,sBA6BC;IAZO,mBAAyB;IAGzB,mBAAyB;IAWjC,mFAEC;IAED,wDAEC;IAED,yDAEC;IAED,+BAQC;IAED,8CAUC;IAED,eAAe;IACf,wBAYC;IAED,eAAe;IACf,eAqBC;IAVG,iBAAiD;IAWrD,eAAe;IACf,gBAEC;IACD,eAAe;IACf,iBAEC;IACD,eAAe;IACf,iBAiBC;IAED,8BAOC;IAED,sBAIC;CAyKF"} \ No newline at end of file diff --git a/src/vcf-lookup-field.js b/src/vcf-lookup-field.js index 15538e2..7732b70 100644 --- a/src/vcf-lookup-field.js +++ b/src/vcf-lookup-field.js @@ -60,7 +60,7 @@ export class LookupField extends ElementMixin(ThemableMixin(PolymerElement)) { width: 100%; min-width: 0; } - vaadin-button.search-button { + ::slotted(vaadin-button.search-button) { margin-left: var(--lumo-space-xs); flex: 0 0 auto; } @@ -70,24 +70,24 @@ export class LookupField extends ElementMixin(ThemableMixin(PolymerElement)) { :host([theme~='integrated']) vaadin-combo-box::part(input-field) { border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s); } - :host([theme~='integrated']) .search-button { + :host([theme~='integrated']) ::slotted(.search-button) { margin-left: 0; border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0; } :host([theme~='full-width']) vaadin-combo-box::part(input-field) { margin-inline-end: var(--lumo-size-m); } - :host([theme~='full-width']) vaadin-button.search-button { + :host([theme~='full-width']) ::slotted(vaadin-button.search-button) { margin-inline-start: calc(var(--lumo-space-xs) + (var(--lumo-size-m) * -1)); } - :host([theme~='integrated'][theme~='full-width']) vaadin-button.search-button { + :host([theme~='integrated'][theme~='full-width']) ::slotted(vaadin-button.search-button) { margin-inline-start: calc((var(--lumo-size-m) * -1)); } - :host([readonly]) vaadin-button.search-button { + :host([readonly]) ::slotted(vaadin-button.search-button) { background-color: transparent; border: 1px dashed var(--lumo-contrast-30pct); } - :host([invalid]) vaadin-button.search-button { + :host([invalid]) ::slotted(vaadin-button.search-button) { color: var(--lumo-error-text-color); background-color: var(--lumo-error-color-10pct); } @@ -106,17 +106,7 @@ export class LookupField extends ElementMixin(ThemableMixin(PolymerElement)) { > - - - + { + this.__open(); + }); + button.addEventListener('keydown', () => { + this.__searchKeydown(); + }); + + button.appendChild(icon); + this.appendChild(button); + } + focus() { setTimeout(() => { this._field.focusElement.focus(); @@ -535,7 +552,7 @@ export class LookupField extends ElementMixin(ThemableMixin(PolymerElement)) { } static get version() { - return '24.0.0'; + return '5.0.0'; } static get properties() {