feat: in place editor

index.js

@@ -0,0 +1,39 @@
+class Calculator {
+  expr;
+  operator;
+
+  constructor(expr) {
+    this.expr = expr;
+
+    this.operator = ['+', '-', '*', '/'].find(operator =>
+      expr.includes(operator),
+    );
+  }
+
+  count() {
+    const [num1, num2] = this.expr.split(this.operator).map(v => parseInt(v));
+
+    switch (this.operator) {
+      case '+': {
+        return num1 + num2;
+      }
+      case '-': {
+        return num1 - num2;
+      }
+      case '*': {
+        return num1 * num2;
+      }
+      case '/': {
+        return num1 / num2;
+      }
+    }
+  }
+
+  get result() {
+    return this.count();
+  }
+}
+
+const calculator = new Calculator('1*8');
+
+console.log(calculator.result);

src/editable/editable.component.html

@@ -0,0 +1,35 @@
+<div [class]="bem.block()">
+  <div
+    [class]="bem.element('viewer-container')"
+    *ngIf="$$mode() === EditableMode.View"
+  >
+    <ng-container [ngTemplateOutlet]="viewer"> </ng-container>
+    <button
+      aui-button="text"
+      [square]="true"
+      (click)="$$mode.set(EditableMode.Edit)"
+    >
+      <aui-icon icon="pencil"></aui-icon>
+    </button>
+  </div>
+  <ng-container *ngIf="$$mode() === EditableMode.Edit">
+    <div [class]="bem.element('editor-container')">
+      <ng-container [ngTemplateOutlet]="editor"> </ng-container>
+
+      <button
+        aui-button="text"
+        [square]="true"
+        (click)="saveEdit()"
+      >
+        <aui-icon icon="check"></aui-icon>
+      </button>
+      <button
+        aui-button="text"
+        [square]="true"
+        (click)="cancelEdit()"
+      >
+        <aui-icon icon="xmark"></aui-icon>
+      </button>
+    </div>
+  </ng-container>
+</div>

src/editable/editable.component.scss

@@ -0,0 +1,22 @@
+@import '../theme/var';
+@import '../theme/mixin';
+
+.aui-editable {
+  .aui-button--text {
+    color: use-rgb(main-text);
+
+    &:first-of-type {
+      margin-left: 8px;
+    }
+
+    &:hover {
+      color: use-rgb(primary);
+    }
+  }
+
+  &__view-container,
+  &__editor-container {
+    display: flex;
+    align-items: center;
+  }
+}

src/editable/editable.component.ts

@@ -0,0 +1,72 @@
+import { AsyncPipe, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Output,
+  TemplateRef,
+  effect,
+  signal,
+} from '@angular/core';
+
+import { ButtonModule } from '../button';
+import { IconComponent } from '../icon';
+import { buildBem } from '../internal/utils';
+
+import {
+  EditableEditorDirective,
+  EditableViewerDirective,
+} from './editable.directive';
+import { EditableMode } from './editable.type';
+
+const bem = buildBem('aui-editable');
+
+@Component({
+  selector: 'aui-editable',
+  templateUrl: 'editable.component.html',
+  styleUrls: ['editable.component.scss'],
+  standalone: true,
+  imports: [
+    NgIf,
+    NgFor,
+    AsyncPipe,
+    NgTemplateOutlet,
+    IconComponent,
+    ButtonModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditableComponent {
+  @Output() save: EventEmitter<void> = new EventEmitter<void>();
+  @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
+  @Output() modeChange: EventEmitter<EditableMode> =
+    new EventEmitter<EditableMode>();
+
+  @ContentChild(EditableViewerDirective, { read: TemplateRef })
+  viewer: TemplateRef<unknown>;
+
+  @ContentChild(EditableEditorDirective, { read: TemplateRef })
+  editor: TemplateRef<unknown>;
+
+  EditableMode = EditableMode;
+  bem = bem;
+
+  $$mode = signal(EditableMode.View);
+
+  constructor() {
+    effect(() => {
+      this.modeChange.emit(this.$$mode());
+    });
+  }
+
+  saveEdit() {
+    this.$$mode.set(EditableMode.View);
+    this.save.emit();
+  }
+
+  cancelEdit() {
+    this.$$mode.set(EditableMode.View);
+    this.cancel.emit();
+  }
+}

src/editable/editable.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '*[auiEditableViewer]',
+  standalone: true,
+})
+export class EditableViewerDirective {}
+
+@Directive({
+  selector: '*[auiEditableEditor]',
+  standalone: true,
+})
+export class EditableEditorDirective {}

src/editable/editable.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+
+import { EditableComponent } from './editable.component';
+import {
+  EditableEditorDirective,
+  EditableViewerDirective,
+} from './editable.directive';
+
+@NgModule({
+  imports: [
+    EditableComponent,
+    EditableViewerDirective,
+    EditableEditorDirective,
+  ],
+  exports: [
+    EditableComponent,
+    EditableViewerDirective,
+    EditableEditorDirective,
+  ],
+})
+export class EditableModule {}

src/editable/editable.type.ts

@@ -0,0 +1,4 @@
+export enum EditableMode {
+  View = 'view',
+  Edit = 'edit',
+}

src/editable/index.ts

@@ -0,0 +1,3 @@
+export * from './editable.component';
+export * from './editable.directive';
+export * from './editable.module';

src/index.ts

@@ -11,6 +11,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown';
+export * from './editable';
 export * from './form';
 export * from './i18n';
 export * from './icon';