feat: textarea/div component in nwui

.gitignore

@@ -40,3 +40,5 @@ Thumbs.db
 
 .nx/cache
 .angular
+
+*.nps

nwaifu-ui/src/lib/components/button/button.component.scss

@@ -7,7 +7,7 @@ button {
   color: #f5f6fa;
   border-radius: 15px;
   transition: ease-in-out 0.2s;
-  margin: 2rem;
+  width: 100%;
   &:hover,
   &:active {
     transform: scale(1.2);

nwaifu-ui/src/lib/components/button/button.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ButtonComponent {
+export class NWUIButtonComponent {
   @Input() disabled = false;
-  @Input() type: string | undefined;
+  @Input() type = 'button';
 }

nwaifu-ui/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './textarea';

nwaifu-ui/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.component';

nwaifu-ui/src/lib/components/textarea/textarea.component.html

@@ -0,0 +1,5 @@
+<div [attr.contenteditable]="contenteditable" [className]="className" #ref (blur)="leaveFn()">
+  @if(!value) {
+  <ng-content></ng-content>
+  }
+</div>

nwaifu-ui/src/lib/components/textarea/textarea.component.scss

@@ -0,0 +1,20 @@
+.nwui-textarea {
+  border-radius: 8px;
+  height: auto;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  word-wrap: break-word;
+}

nwaifu-ui/src/lib/components/textarea/textarea.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'nwui-textarea',
+  imports: [CommonModule],
+  standalone: true,
+  styleUrls: ['./textarea.component.scss'],
+  templateUrl: './textarea.component.html',
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUITextAreaComponent implements AfterViewInit {
+  @Input() disabled = false;
+  @Input() value = '';
+  @Input() contenteditable = true;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  @Output() leave = new EventEmitter<string>();
+  @ViewChild('ref') ref: ElementRef<HTMLDivElement> | null = null;
+
+  get className(): string {
+    return `nwui-textarea ${this.disabled && !this.contenteditable ? 'disabled' : ''}`;
+  }
+
+  leaveFn() {
+    if (this.ref) {
+      const target = this.ref.nativeElement;
+      const text = target.textContent || '';
+      if (this.leave) this.leave.emit(text);
+      target.textContent = text;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.ref && this.value) this.ref.nativeElement.textContent = this.value;
+  }
+}

src/app/app.component.html

@@ -8,4 +8,3 @@
   </nwui-button>
 </div>
 <app-text-list [elements]="elements"></app-text-list>
-<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,9 @@
+.btns {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  nwui-button {
+    margin: 2rem;
+  }
+}

src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NWUIButtonComponent } from '@nwaifu-ui';
-import { ButtonComponent } from '@nwaifu-ui';
 import { TextListComponent } from './components/text_list/text_list.component';
 import { TranslateData } from './dto/translate_data.dto';
 import { parse } from './lib/parser';
 @Component({
   standalone: true,
-  imports: [RouterModule, TextListComponent, ButtonComponent],
+  imports: [TextListComponent, NWUIButtonComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -33,7 +32,7 @@ export class AppComponent implements OnInit {
   submitFile($event: Event) {
     const target = $event.target as HTMLInputElement;
     if (target.files) {
-      const file = target.files?.[0];
+      const file = target.files[0];
       if (file) {
         const reader = new FileReader();
         reader.onload = () => {

src/app/app.config.ts

@@ -1,8 +1,6 @@
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideRouter(appRoutes)],
+  providers: [provideHttpClient()],
 };

src/app/components/translate_block/translate_block.component.html

@@ -1,12 +1,18 @@
 <div class="element">
   <h2>{{ index + 1 }}</h2>
   <div class="fields">
-    <div class="english-text">{{ item.english_text }}</div>
+    <nwui-textarea [contenteditable]="false">{{ item.english_text }}</nwui-textarea>
-    <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
+    <nwui-textarea
+      #translatedText
+      [contenteditable]="isEditing"
+      (leave)="saveTranslate($event)"
+      [disabled]="!isEditing"
+      >{{ item.translated_text }}</nwui-textarea
+    >
   </div>
   <div class="btns">
-    <nwui-button (click)="sendToGoogleTranslate()">Translate</nwui-button>
+    <nwui-button (click)="sendToGoogleTranslate()" [disabled]="translateLoading">Translate</nwui-button>
-    <button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
+    <nwui-button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</nwui-button>
-    <button (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
+    <nwui-button (click)="clear()" [disabled]="!item.translated_text.length">Clear</nwui-button>
   </div>
 </div>

src/app/components/translate_block/translate_block.component.scss

@@ -1,34 +1,3 @@
-.translated-text {
-  border-radius: 8px;
-  height: auto;
-  color: #efdee0;
-  outline: none;
-  padding-inline: 2rem 1rem;
-  background-color: transparent;
-  border: 2px solid #e4bdc3;
-  font-size: 1rem;
-  font-weight: inherit;
-  min-height: 3rem;
-  line-height: 3rem;
-  &:focus {
-    border: 2px solid #efdee0;
-  }
-  &:read-only {
-    opacity: 0.5;
-  }
-  word-wrap: break-word;
-}
-
-.english-text {
-  color: #efdee0;
-  border: 2px solid #e4bdc3;
-  word-wrap: break-word;
-  border-radius: 8px;
-  padding-inline: 2rem 1rem;
-  line-height: 3rem;
-  background-color: transparent;
-}
-
 .element {
   display: flex;
   background-color: #413738;
@@ -62,24 +31,9 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  .btn {
+  align-items: center;
-    outline: none;
+  padding-inline: 1rem;
-    border: none;
+  nwui-button {
-    cursor: pointer;
+    width: 100%;
-    background-color: #5b3f45;
-    padding: 1em 1.5em;
-    color: #f5f6fa;
-    border-radius: 15px;
-    transition: ease-in-out 0.2s;
-    &:hover {
-      transform: scale(1.2);
-    }
-    &:disabled {
-      opacity: 0.5;
-      &:hover {
-        cursor: not-allowed;
-        transform: scale(1);
-      }
-    }
   }
 }

src/app/components/translate_block/translate_block.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ButtonComponent } from '@nwaifu-ui';
+import { NWUIButtonComponent, NWUITextAreaComponent } from '@nwaifu-ui';
 import { TranslateData } from '../../dto/translate_data.dto';
 import { ETranslateService } from '../../services/translate.enums';
 import { TranslateService } from '../../services/translate.service';
@@ -10,13 +10,14 @@ import { TranslateService } from '../../services/translate.service';
   templateUrl: './translate_block.component.html',
   styleUrls: ['./translate_block.component.scss'],
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
+  imports: [CommonModule, NWUIButtonComponent, NWUITextAreaComponent],
   providers: [TranslateService],
 })
-export class TranslateBlockComponent implements OnInit, AfterViewInit {
+export class TranslateBlockComponent implements OnInit {
   @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
-  @Input() item: TranslateData = { english_text: '', translated_text: '' };
+  @Input({ required: true }) item: TranslateData = { english_text: '', translated_text: '' };
-  @Input() index = 0;
+  @Input({ required: true }) index = 0;
+  translateLoading = false;
   isEditing = false;
 
   saveChanges() {
@@ -34,11 +35,13 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
   }
 
   constructor(private translateService: TranslateService) {}
+
   private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
+    this.translateLoading = true;
     this.translateService.translate(this.item.english_text, service).subscribe((text) => {
       this.item.translated_text = text;
-      if (this.translatedText) this.translatedText.nativeElement.textContent = text;
       this.isEditing = false;
+      this.translateLoading = false;
       this.saveChanges();
     });
   }
@@ -55,23 +58,14 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
     this.sendToTranslate(ETranslateService.PROMPT);
   }
 
-  saveTranslate() {
+  saveTranslate(text: string) {
     this.isEditing = false;
-    if (this.translatedText) {
+    this.item.translated_text = text;
-      this.item.translated_text = this.translatedText.nativeElement.textContent || '';
-      this.translatedText.nativeElement.textContent = '';
-      this.translatedText.nativeElement.textContent = this.item.translated_text;
-    }
     this.saveChanges();
   }
   clear() {
     this.item.translated_text = '';
-    if (this.translatedText) this.translatedText.nativeElement.textContent = '';
     this.isEditing = true;
     this.saveChanges();
   }
-
-  ngAfterViewInit(): void {
-    if (this.translatedText) this.translatedText.nativeElement.textContent = this.item.translated_text;
-  }
 }

src/app/pipes/translate.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from '../services/translate.service';
-
-@Pipe({ name: 'translate', standalone: true, pure: false })
-export class TranslatePipe implements PipeTransform {
-  constructor(private translateService: TranslateService) {}
-  transform(text: string) {
-    return this.translateService.translate(text);
-  }
-}