diff --git a/packages/grid/src/components/cell-editors/cell-editor.scss b/packages/grid/src/components/cell-editors/cell-editor.scss index 7e9ff161..1b70a7d3 100644 --- a/packages/grid/src/components/cell-editors/cell-editor.scss +++ b/packages/grid/src/components/cell-editors/cell-editor.scss @@ -3,3 +3,12 @@ height: 100%; } } + +.text-cell-editor { + display: block; + + textarea { + min-height: 44px; + resize: none; + } +} diff --git a/packages/grid/src/components/cell-editors/text/text-editor.component.ts b/packages/grid/src/components/cell-editors/text/text-editor.component.ts index b452c38a..ca2606c8 100644 --- a/packages/grid/src/components/cell-editors/text/text-editor.component.ts +++ b/packages/grid/src/components/cell-editors/text/text-editor.component.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, Renderer2 } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ThyInputDirective } from 'ngx-tethys/input'; import { ThyAutofocusDirective, ThyEnterDirective } from 'ngx-tethys/shared'; @@ -8,13 +8,54 @@ import { AbstractEditCellEditor } from '../abstract-cell-editor.component'; @Component({ selector: 'text-cell-editor', template: ` - + `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective] + imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective], + host: { + class: 'd-block' + } }) -export class TextCellEditorComponent extends AbstractEditCellEditor { +export class TextCellEditorComponent extends AbstractEditCellEditor implements AfterViewInit { + private elementRef = inject(ElementRef); + + private render2 = inject(Renderer2); + + private maxHeight = 148; + + constructor() { + super(); + } + + ngAfterViewInit() { + setTimeout(() => { + this.updateStyle(); + }); + } + + updateStyle() { + const textarea = this.elementRef.nativeElement.querySelector('textarea'); + const height = textarea.scrollHeight <= this.maxHeight ? textarea.scrollHeight : this.maxHeight; + + this.render2.setStyle(textarea, 'height', `${height}px`); + this.render2.setStyle(textarea, 'min-height', `44px`); + this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`); + this.render2.setStyle(textarea, 'resize', 'none'); + } + + valueChange() { + this.updateStyle(); + } + updateValue() { this.updateFieldValue(); this.closePopover(); diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts index 33aca06e..c3a609d0 100644 --- a/packages/grid/src/grid.component.ts +++ b/packages/grid/src/grid.component.ts @@ -26,6 +26,7 @@ import { ThyProgress } from 'ngx-tethys/progress'; import { ThyRate } from 'ngx-tethys/rate'; import { ThyStopPropagationDirective } from 'ngx-tethys/shared'; import { ThyTag } from 'ngx-tethys/tag'; +import { mergeWith } from 'rxjs/operators'; import { ProgressEditorComponent } from './components'; import { FieldMenu } from './components/field-menu/field-menu.component'; import { AITableFieldPropertyEditor } from './components/field-property-editor/field-property-editor.component'; @@ -178,11 +179,12 @@ export class AITableGrid implements OnInit { this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { this.dblClick(event); }); - this.aiTableGridEventService.mousedownEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { - if ((event as MouseEvent)?.target) { - this.aiTableGridSelectionService.updateSelect(event as MouseEvent); - } - }); + this.aiTableGridEventService.mousedownEvent$ + .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef)) + .subscribe((event) => { + this.aiTableGridSelectionService.updateSelect(event); + }); + this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { this.mouseoverHandle(event); }); diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts index 918753ff..f75c15f7 100644 --- a/packages/grid/src/services/event.service.ts +++ b/packages/grid/src/services/event.service.ts @@ -21,6 +21,8 @@ export class AITableGridEventService { globalMouseoverEvent$ = new Subject(); + globalMousedownEvent$ = new Subject(); + private destroyRef = inject(DestroyRef); private thyPopover = inject(ThyPopover); @@ -54,6 +56,12 @@ export class AITableGridEventService { .subscribe((event) => { this.mousedownEvent$.next(event); }); + + fromEvent(document, 'mousedown') + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((event) => { + this.globalMousedownEvent$.next(event as MouseEvent); + }); } private getEditorComponent(type: AITableFieldType) { @@ -92,7 +100,8 @@ export class AITableGridEventService { outsideClosable: false, hasBackdrop: false, manualClosure: true, - animationDisabled: true + animationDisabled: true, + autoAdaptive: true }); return ref; } diff --git a/packages/grid/src/services/selection.servive.ts b/packages/grid/src/services/selection.servive.ts index d909f6b1..25caba82 100644 --- a/packages/grid/src/services/selection.servive.ts +++ b/packages/grid/src/services/selection.servive.ts @@ -52,7 +52,11 @@ export class AITableGridSelectionService { } updateSelect(event: MouseEvent) { - const target = event.target as HTMLElement; + const target = event?.target as HTMLElement; + if (!target) { + return; + } + const cellDom = target.closest('.grid-cell'); const colDom = target.closest('.grid-field'); if (cellDom) { @@ -64,5 +68,8 @@ export class AITableGridSelectionService { const fieldId = colDom.getAttribute('fieldId'); fieldId && this.selectField(fieldId); } + if (!cellDom && !colDom) { + this.clearSelection(); + } } }