refactor(elements): remove ion tag

.gitignore

@@ -40,3 +40,5 @@ testem.log
 Thumbs.db
 
 *.env
+
+**/proxies-list.txt

angular.json

@@ -985,6 +985,11 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor/min",
                 "output": "./assets/monaco"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@aiao/elements/lib/aiao-elements/assets",
+                "output": "./assets"
               }
             ],
             "styles": [
@@ -1453,6 +1458,11 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor/min",
                 "output": "./assets/monaco"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@aiao/elements/lib/aiao-elements/assets",
+                "output": "./assets"
               }
             ],
             "styles": ["apps/dev-elements-react/src/theme/variables.scss", "apps/dev-elements-react/src/global.scss"],

apps/dev-elements-angular/src/app/app-routing.module.ts

@@ -14,6 +14,10 @@ const routes: Routes = [
     path: 'elements-preview',
     loadChildren: () => import('./elements-preview/elements-preview.module').then(_ => _.ElementsPreviewModule)
   },
+  {
+    path: 'text-editor',
+    loadChildren: () => import('./text-editor/text-editor.module').then(_ => _.TextEditorModule)
+  },
   {
     path: '',
     redirectTo: 'code-editor',

apps/dev-elements-angular/src/app/app.component.ts

@@ -28,6 +28,11 @@ export class AppComponent {
       title: 'Elements Preview',
       url: '/elements-preview',
       icon: 'link'
+    },
+    {
+      title: 'Text Editor',
+      url: '/text-editor',
+      icon: 'link'
     }
   ];
 }

apps/dev-elements-angular/src/app/text-editor/text-editor.component.html

@@ -0,0 +1,11 @@
+<ion-header translucent>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Elements Preview</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen>
+  <aiao-text-editor [value]="hello"></aiao-text-editor>
+</ion-content>

apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts

@@ -0,0 +1,28 @@
+import { AiaoElementsModule } from '@aiao/elements-angular';
+import { CommonModule } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { TextEditorComponent } from './text-editor.component';
+
+describe('TextEditorComponent', () => {
+  let component: TextEditorComponent;
+  let fixture: ComponentFixture<TextEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TextEditorComponent],
+      imports: [CommonModule, IonicModule, AiaoElementsModule]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-text-editor',
+  templateUrl: './text-editor.component.html',
+  styleUrls: ['./text-editor.component.scss']
+})
+export class TextEditorComponent implements OnInit {
+  hello = '<p>hello world</p>';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

apps/dev-elements-angular/src/app/text-editor/text-editor.module.ts

@@ -0,0 +1,20 @@
+import { AiaoElementsModule } from '@aiao/elements-angular';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { TextEditorComponent } from './text-editor.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TextEditorComponent
+  }
+];
+@NgModule({
+  declarations: [TextEditorComponent],
+  imports: [CommonModule, IonicModule, AiaoElementsModule, ReactiveFormsModule, RouterModule.forChild(routes)]
+})
+export class TextEditorModule {}

apps/dev-elements-react/src/app/app.tsx

@@ -9,6 +9,7 @@ import { IonReactRouter } from '@ionic/react-router';
 import CodeEditorPage from './code-editor/code-editor';
 import ElementsEditorPage from './elements-editor/ElementsEditor';
 import ElementsPreviewPage from './elements-preview/ElementsPreview';
+import TextEditorPage from './text-editor/TextEditor';
 import Menu from './menu/Menu';
 
 export const App: React.FunctionComponent = () => {
@@ -23,6 +24,7 @@ export const App: React.FunctionComponent = () => {
             <Route path="/code-editor" exact component={CodeEditorPage} />
             <Route path="/elements-editor" exact component={ElementsEditorPage} />
             <Route path="/elements-preview" exact component={ElementsPreviewPage} />
+            <Route path="/text-editor" exact component={TextEditorPage} />
             <Route exact path="/" render={() => <Redirect to="/code-editor" />} />
           </IonRouterOutlet>
         </IonSplitPane>

apps/dev-elements-react/src/app/menu/Menu.tsx

@@ -43,6 +43,11 @@ const appPages: IMenu[] = [
     title: 'Elements Preview',
     url: '/elements-preview',
     icon: link
+  },
+  {
+    title: 'Text Editor',
+    url: '/text-editor',
+    icon: link
   }
 ];
 

apps/dev-elements-react/src/app/text-editor/TextEditor.tsx

@@ -0,0 +1,29 @@
+import './TextEditor.scss';
+
+import React, { useState } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import { AiaoTextEditor } from '@aiao/elements-react';
+import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const ELementsPreviewPage: React.FC = () => {
+  const [hello, setHello] = useState('hello world');
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonTitle>elements editor</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <AiaoTextEditor value={hello}></AiaoTextEditor>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default withRouter(ELementsPreviewPage);

libs/elements-angular/src/lib/directives/proxies.ts

@@ -68,8 +68,8 @@ export class AiaoElementsForm {
 }
 
 export declare interface AiaoElementsView extends Components.AiaoElementsView {}
-@ProxyCmp({inputs: ['html']})
-@Component({ selector: 'aiao-elements-view', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['html'] })
+@ProxyCmp({inputs: ['css', 'html', 'js']})
+@Component({ selector: 'aiao-elements-view', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['css', 'html', 'js'] })
 export class AiaoElementsView {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -93,50 +93,30 @@ export class AiaoImg {
 }
 
 export declare interface AiaoTextEditor extends Components.AiaoTextEditor {}
-@ProxyCmp({inputs: ['defaultParagraphSeparator', 'disabled', 'edit', 'element', 'name', 'placeholder', 'value'], 'methods': ['bold', 'italic', 'underline', 'strikethrough', 'heading', 'paragraph', 'backColor', 'foreColor', 'quote', 'indent', 'outdent', 'olist', 'ulist', 'line', 'insertHTML', 'link', 'unlink', 'image', 'alginCenter', 'alginLeft', 'alginFull', 'alginRight', 'undo', 'redo', 'getSelectionElements', 'saveSelection', 'restoreSelection']})
-@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['defaultParagraphSeparator', 'disabled', 'edit', 'element', 'name', 'placeholder', 'value'] })
+@ProxyCmp({inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'value'], 'methods': ['getSelectionElements', 'saveSelection', 'restoreSelection', 'action']})
+@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'value'] })
 export class AiaoTextEditor {
-  mlabChange!: EventEmitter<CustomEvent>;
+  aiaoChange!: EventEmitter<CustomEvent>;
+  aiaoStateChange!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabChange']);
+    proxyOutputs(this, this.el, ['aiaoChange', 'aiaoStateChange']);
   }
 }
 
 export declare interface AiaoTree extends Components.AiaoTree {}
 @ProxyCmp({inputs: ['autoExpandParent', 'canDrag', 'checkable', 'config', 'data', 'defaultExpandLevel', 'defaultExpandParent', 'defaultExpandedKeys', 'defaultSelectedKeys', 'disabled', 'multiple', 'selectable', 'showIcon', 'showLine', 'showMode'], 'methods': ['canDrop', 'select', 'overElement', 'outElement', 'nodeRefMap']})
 @Component({ selector: 'aiao-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoExpandParent', 'canDrag', 'checkable', 'config', 'data', 'defaultExpandLevel', 'defaultExpandParent', 'defaultExpandedKeys', 'defaultSelectedKeys', 'disabled', 'multiple', 'selectable', 'showIcon', 'showLine', 'showMode'] })
 export class AiaoTree {
-  mlabChange!: EventEmitter<CustomEvent>;
-  mlabTreeNodeChange!: EventEmitter<CustomEvent>;
-  mlabTreeDrop!: EventEmitter<CustomEvent>;
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabChange', 'mlabTreeNodeChange', 'mlabTreeDrop']);
-  }
-}
-
-export declare interface AiaoTreeNode extends Components.AiaoTreeNode {}
-@ProxyCmp({inputs: ['canDrag', 'checkable', 'disabled', 'expanded', 'hover', 'icon', 'isLeaf', 'name', 'selectable', 'selected', 'showIcon', 'showLine', 'value']})
-@Component({ selector: 'aiao-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['canDrag', 'checkable', 'disabled', 'expanded', 'hover', 'icon', 'isLeaf', 'name', 'selectable', 'selected', 'showIcon', 'showLine', 'value'] })
-export class AiaoTreeNode {
-  mlabTreeNodeDragStart!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragEnter!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragOver!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragLeave!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDrop!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragEnd!: EventEmitter<CustomEvent>;
-  mlabTreeNodeClick!: EventEmitter<CustomEvent>;
-  mlabTreeNodeOver!: EventEmitter<CustomEvent>;
-  mlabTreeNodeOut!: EventEmitter<CustomEvent>;
+  aiaoChange!: EventEmitter<CustomEvent>;
+  aiaoTreeNodeChange!: EventEmitter<CustomEvent>;
+  aiaoTreeDrop!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabTreeNodeDragStart', 'mlabTreeNodeDragEnter', 'mlabTreeNodeDragOver', 'mlabTreeNodeDragLeave', 'mlabTreeNodeDrop', 'mlabTreeNodeDragEnd', 'mlabTreeNodeClick', 'mlabTreeNodeOver', 'mlabTreeNodeOut']);
+    proxyOutputs(this, this.el, ['aiaoChange', 'aiaoTreeNodeChange', 'aiaoTreeDrop']);
   }
 }

libs/elements-angular/src/lib/elements-initialize.ts

@@ -8,6 +8,8 @@ let didInitialize = false;
 // 初始化
 export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZone) {
   return (): any => {
+    let { resourcesUrl } = config;
+    resourcesUrl = resourcesUrl || './';
     const win = doc.defaultView as any;
     if (win && typeof (window as any) !== 'undefined') {
       if (didInitialize) {
@@ -19,6 +21,7 @@ export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZ
 
       elements.config = {
         ...config,
+        resourcesUrl,
         _zoneGate: (h: any) => zone.run(h)
       };
 
@@ -27,6 +30,7 @@ export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZ
 
       return applyPolyfills().then(() => {
         return defineCustomElements(win, {
+          resourcesUrl,
           exclude: [],
           syncQueue: true,
           raf,

libs/elements-angular/src/lib/elements.module.ts

@@ -1,4 +1,3 @@
-import { IAiaoElementsConfig } from '@aiao/elements';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 
@@ -11,10 +10,10 @@ import {
   AiaoElementsView,
   AiaoImg,
   AiaoTextEditor,
-  AiaoTree,
-  AiaoTreeNode
+  AiaoTree
 } from './directives/proxies';
 import { initialize } from './elements-initialize';
+import { AiaoElementsOptions } from './interface';
 import { TextValueAccessor } from './providers/control-value-accessors/text-value-accessor';
 import { AIAO_ELEMENTS_CONFIG } from './util/config';
 
@@ -29,7 +28,6 @@ const DECLARATIONS = [
   AiaoImg,
   AiaoTextEditor,
   AiaoTree,
-  AiaoTreeNode,
   // accessor
   TextValueAccessor
 ];
@@ -40,13 +38,13 @@ const DECLARATIONS = [
   exports: DECLARATIONS
 })
 export class AiaoElementsModule {
-  static forRoot(config?: IAiaoElementsConfig): ModuleWithProviders {
+  static forRoot(opts?: AiaoElementsOptions): ModuleWithProviders {
     return {
       ngModule: AiaoElementsModule,
       providers: [
         {
           provide: AIAO_ELEMENTS_CONFIG,
-          useValue: config
+          useValue: opts
         },
         {
           provide: APP_INITIALIZER,

libs/elements-angular/src/lib/interface.ts

@@ -0,0 +1,4 @@
+import { IAiaoElementsConfig } from '@aiao/elements';
+
+// tslint:disable-next-line: no-empty-interface
+export interface AiaoElementsOptions extends IAiaoElementsConfig {}

libs/elements-react/src/lib/proxies.ts

@@ -17,4 +17,3 @@ export const AiaoElementsView = /*@__PURE__*/createReactComponent<JSX.AiaoElemen
 export const AiaoImg = /*@__PURE__*/createReactComponent<JSX.AiaoImg, HTMLAiaoImgElement>('aiao-img');
 export const AiaoTextEditor = /*@__PURE__*/createReactComponent<JSX.AiaoTextEditor, HTMLAiaoTextEditorElement>('aiao-text-editor');
 export const AiaoTree = /*@__PURE__*/createReactComponent<JSX.AiaoTree, HTMLAiaoTreeElement>('aiao-tree');
-export const AiaoTreeNode = /*@__PURE__*/createReactComponent<JSX.AiaoTreeNode, HTMLAiaoTreeNodeElement>('aiao-tree-node');

libs/elements/src/lib/components/code-diff-editor/test/basic/index.html

@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
@@ -21,6 +16,13 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <aiao-code-diff-editor id="editor" language="json"></aiao-code-diff-editor>