@@ -43,22 +33,20 @@ describe('Component: Swiper', () => {
let el: HTMLElement;
describe('[basic]', () => {
- beforeEach(
- fakeAsync(() => {
- TestBed.configureTestingModule({
- declarations: [TestSwiperComponent],
- imports: [SwiperModule.forRoot(), NoopAnimationsModule],
- });
- TestBed.overrideComponent(TestSwiperComponent, {
- set: { template: correct_html },
- });
- fixture = TestBed.createComponent(TestSwiperComponent);
- context = fixture.componentInstance;
- el = fixture.nativeElement;
- fixture.detectChanges();
- tick();
- }),
- );
+ beforeEach(fakeAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestSwiperComponent],
+ imports: [SwiperModule, NoopAnimationsModule],
+ });
+ TestBed.overrideComponent(TestSwiperComponent, {
+ set: { template: correct_html },
+ });
+ fixture = TestBed.createComponent(TestSwiperComponent);
+ context = fixture.componentInstance;
+ el = fixture.nativeElement;
+ fixture.detectChanges();
+ tick();
+ }));
it('should be inited if correct DOM structure', () => {
expect(context.comp.swiper).not.toBeNull();
@@ -69,9 +57,7 @@ describe('Component: Swiper', () => {
direction: 'vertical',
};
fixture.detectChanges();
- expect(el.querySelector('.swiper-container').classList).toContain(
- 'swiper-container-vertical',
- );
+ expect(el.querySelector('.swiper-container')!.classList).toContain('swiper-container-vertical');
});
});
@@ -80,7 +66,7 @@ describe('Component: Swiper', () => {
try {
TestBed.configureTestingModule({
declarations: [TestSwiperComponent],
- imports: [SwiperModule.forRoot(), NoopAnimationsModule],
+ imports: [SwiperModule, NoopAnimationsModule],
});
TestBed.overrideComponent(TestSwiperComponent, {
set: { template: incorrect_html },
@@ -89,9 +75,7 @@ describe('Component: Swiper', () => {
fixture.detectChanges();
expect(false).toBe(true);
} catch (ex) {
- expect(ex.toString()).toBe(
- 'Error: 组件内容的HTML跟swiper所需要的DOM结构必须完全一样。',
- );
+ expect(ex.toString()).toBe('Error: 组件内容的HTML跟swiper所需要的DOM结构必须完全一样。');
}
});
});
diff --git a/components/tab/bar.component.ts b/components/tab/bar.component.ts
index 031108a..41faa77 100644
--- a/components/tab/bar.component.ts
+++ b/components/tab/bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
import { TabDirective } from './tab.directive';
@Component({
@@ -9,6 +9,8 @@ export class BarComponent implements OnDestroy {
tabs: TabDirective[] = [];
protected isDestroyed: boolean;
+ constructor(private cdr: ChangeDetectorRef) {}
+
add(tab: TabDirective) {
this.tabs.push(tab);
tab.active = this.tabs.length === 1 && tab.active !== false;
@@ -34,6 +36,10 @@ export class BarComponent implements OnDestroy {
tab.select.emit(tab);
}
+ detectChanges() {
+ this.cdr.detectChanges();
+ }
+
protected getClosestTabIndex(index: number): number {
const tabsLength = this.tabs.length;
if (!tabsLength) {
diff --git a/components/tab/navbar.component.html b/components/tab/navbar.component.html
new file mode 100644
index 0000000..0ed6010
--- /dev/null
+++ b/components/tab/navbar.component.html
@@ -0,0 +1,12 @@
+
+
+ {{ item.heading }}
+
+
+
diff --git a/components/tab/navbar.component.ts b/components/tab/navbar.component.ts
index c0724ef..7651ed1 100644
--- a/components/tab/navbar.component.ts
+++ b/components/tab/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import { forwardRef, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { BarComponent } from './bar.component';
/**
@@ -6,20 +6,14 @@ import { BarComponent } from './bar.component';
*/
@Component({
selector: 'weui-navbar',
- template: `
-
-
- `,
- providers: [
- { provide: BarComponent, useExisting: forwardRef(() => NavbarComponent) },
- ],
+ exportAs: 'weuiNavbar',
+ templateUrl: './navbar.component.html',
+ providers: [{ provide: BarComponent, useExisting: forwardRef(() => NavbarComponent) }],
host: {
'[class.weui-tab]': 'true',
},
+ preserveWhitespaces: false,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
})
-export class NavbarComponent extends BarComponent { }
+export class NavbarComponent extends BarComponent {}
diff --git a/components/tab/package.json b/components/tab/package.json
new file mode 100644
index 0000000..61f8a57
--- /dev/null
+++ b/components/tab/package.json
@@ -0,0 +1,7 @@
+{
+ "ngPackage": {
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/tab/tab.directive.ts b/components/tab/tab.directive.ts
index f00a2b3..52fc701 100644
--- a/components/tab/tab.directive.ts
+++ b/components/tab/tab.directive.ts
@@ -1,20 +1,16 @@
-import {
- Directive,
- Input,
- HostBinding,
- Output,
- EventEmitter,
- OnDestroy,
- OnChanges,
-} from '@angular/core';
+import { Directive, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, Output } from '@angular/core';
+import { InputBoolean } from 'ngx-weui/core';
import { BarComponent } from './bar.component';
-@Directive({ selector: 'weui-tab, [weui-tab]' })
+@Directive({
+ selector: 'weui-tab, [weui-tab]',
+ exportAs: 'weuiTab',
+})
export class TabDirective implements OnDestroy, OnChanges {
/** 选项卡名称 */
@Input() heading: string;
/** 是否禁用 */
- @Input() disabled: boolean;
+ @Input() @InputBoolean() disabled: boolean;
/** icon图标，支持HTML */
@Input() icon: string;
/** 激活时icon图标，支持HTML */
@@ -34,6 +30,7 @@ export class TabDirective implements OnDestroy, OnChanges {
*/
@HostBinding('class.active')
@Input()
+ @InputBoolean()
get active(): boolean {
return this._active;
}
@@ -48,7 +45,7 @@ export class TabDirective implements OnDestroy, OnChanges {
}
this._active = active;
- this._tabComp.tabs.filter(t => t !== this).forEach(tab => tab.active = false);
+ this._tabComp.tabs.filter(t => t !== this).forEach(tab => (tab.active = false));
}
protected _active: boolean;
@@ -63,6 +60,7 @@ export class TabDirective implements OnDestroy, OnChanges {
if (!this.activeIcon) {
this.activeIcon = this.icon;
}
+ this._tabComp.detectChanges();
}
ngOnDestroy(): void {
diff --git a/components/tab/tab.module.ts b/components/tab/tab.module.ts
index 9088913..6d52085 100644
--- a/components/tab/tab.module.ts
+++ b/components/tab/tab.module.ts
@@ -1,18 +1,17 @@
-import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { TabDirective } from './tab.directive';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { BarComponent } from './bar.component';
import { NavbarComponent } from './navbar.component';
+import { TabDirective } from './tab.directive';
import { TabbarComponent } from './tabbar.component';
-import { BarComponent } from './bar.component';
+
+const COMPONENTS = [TabDirective, NavbarComponent, TabbarComponent, BarComponent];
@NgModule({
imports: [CommonModule, FormsModule],
- declarations: [TabDirective, NavbarComponent, TabbarComponent, BarComponent],
- exports: [TabDirective, NavbarComponent, TabbarComponent],
+ declarations: COMPONENTS,
+ exports: COMPONENTS,
})
-export class TabModule {
- static forRoot(): ModuleWithProviders {
- return { ngModule: TabModule, providers: [] };
- }
-}
+export class TabModule {}
diff --git a/components/tab/tab.spec.ts b/components/tab/tab.spec.ts
index c06f200..781ffd3 100644
--- a/components/tab/tab.spec.ts
+++ b/components/tab/tab.spec.ts
@@ -1,23 +1,7 @@
-import { Subscriber } from 'rxjs';
-import { Component, ViewChild, DebugElement } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
- ComponentFixture,
- TestBed,
- fakeAsync,
- tick,
- async,
- inject,
-} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import {
- TabModule,
- NavbarComponent,
- TabbarComponent,
- TabDirective,
-} from '../tab';
+import { Component } from '@angular/core';
+import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabModule } from './tab.module';
const TABS: any[] = [
{
@@ -38,7 +22,7 @@ const TABS: any[] = [
{ heading: 'tab4', content: 'tab4 content', active: false, removable: true },
];
const navbar_html = `
-
+
{{item.content}}
-
+
`;
const tabbar_html = `
@@ -77,8 +61,8 @@ function getContents(nativeEl: HTMLElement): NodeListOf {
}
function expectActiveTabs(nativeEl: HTMLElement, action: boolean[]) {
- const items = getItems(nativeEl),
- contents = getContents(nativeEl);
+ const items = getItems(nativeEl);
+ const contents = getContents(nativeEl);
expect(items.length).toBe(action.length);
expect(contents.length).toBe(action.length);
@@ -99,25 +83,23 @@ describe('Component: Tabs', () => {
let el: any;
describe('[Navbar]', () => {
- beforeEach(
- fakeAsync(() => {
- TestBed.configureTestingModule({
- declarations: [TestTabComponent],
- imports: [TabModule.forRoot()],
- });
- TestBed.overrideComponent(TestTabComponent, {
- set: { template: navbar_html },
- });
- fixture = TestBed.createComponent(TestTabComponent);
- context = fixture.componentInstance;
- spyOn(context, '_select');
- spyOn(context, '_deselect');
- spyOn(context, '_removed');
- el = fixture.nativeElement;
- fixture.detectChanges();
- tick();
- }),
- );
+ beforeEach(fakeAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestTabComponent],
+ imports: [TabModule],
+ });
+ TestBed.overrideComponent(TestTabComponent, {
+ set: { template: navbar_html },
+ });
+ fixture = TestBed.createComponent(TestTabComponent);
+ context = fixture.componentInstance;
+ spyOn(context, '_select');
+ spyOn(context, '_deselect');
+ spyOn(context, '_removed');
+ el = fixture.nativeElement;
+ fixture.detectChanges();
+ tick();
+ }));
it('should select first tab as active by default', () => {
expectActiveTabs(el, [true, false, false, false]);
@@ -130,10 +112,10 @@ describe('Component: Tabs', () => {
});
it('should set tab heading', () => {
- const newTitle: string = 'new title';
+ const newTitle = 'new title';
context.tabs[0].heading = newTitle;
fixture.detectChanges();
- expect(getItems(el)[0].innerHTML).toBe(newTitle);
+ expect(getItems(el)[0].innerHTML.trim()).toBe(newTitle);
});
it('should set tab disabled', () => {
@@ -160,53 +142,43 @@ describe('Component: Tabs', () => {
});
describe('[Tabbar]', () => {
- beforeEach(
- fakeAsync(() => {
- TestBed.configureTestingModule({
- declarations: [TestTabComponent],
- imports: [TabModule.forRoot()],
- });
- TestBed.overrideComponent(TestTabComponent, {
- set: { template: tabbar_html },
- });
- fixture = TestBed.createComponent(TestTabComponent);
- context = fixture.componentInstance;
- spyOn(context, '_select');
- spyOn(context, '_deselect');
- spyOn(context, '_removed');
- el = fixture.nativeElement;
- fixture.detectChanges();
- tick();
- }),
- );
+ beforeEach(fakeAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestTabComponent],
+ imports: [TabModule],
+ });
+ TestBed.overrideComponent(TestTabComponent, {
+ set: { template: tabbar_html },
+ });
+ fixture = TestBed.createComponent(TestTabComponent);
+ context = fixture.componentInstance;
+ spyOn(context, '_select');
+ spyOn(context, '_deselect');
+ spyOn(context, '_removed');
+ el = fixture.nativeElement;
+ fixture.detectChanges();
+ tick();
+ }));
it('should set tab has icon', () => {
- expect(
- (getItemsByTabbar(el)[0] as HTMLElement).querySelector(
- '.weui-tabbar__icon',
- ),
- ).not.toBeNull();
+ expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-tabbar__icon')).not.toBeNull();
});
it('should set tab badge number value', () => {
- expect(
- (getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-badge')
- .innerHTML,
- ).toBe('8');
+ expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-badge')!.innerHTML).toBe('8');
});
it('should set tab badge dot value', () => {
- expect(
- (getItemsByTabbar(el)[1] as HTMLElement).querySelector('.weui-badge')
- .classList,
- ).toContain('weui-badge_dot');
+ expect((getItemsByTabbar(el)[1] as HTMLElement).querySelector('.weui-badge')!.classList).toContain(
+ 'weui-badge_dot',
+ );
});
});
});
@Component({ template: `` })
class TestTabComponent {
- tabs: any[] = Object.assign([], TABS);
+ tabs: any[] = [...TABS];
_select(e: TabModule): TabModule {
return e;
diff --git a/components/tab/tabbar.component.html b/components/tab/tabbar.component.html
new file mode 100644
index 0000000..af72879
--- /dev/null
+++ b/components/tab/tabbar.component.html
@@ -0,0 +1,25 @@
+
+
diff --git a/components/tab/tabbar.component.ts b/components/tab/tabbar.component.ts
index 0d4846d..1927c6d 100644
--- a/components/tab/tabbar.component.ts
+++ b/components/tab/tabbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import { forwardRef, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { BarComponent } from './bar.component';
/**
@@ -6,25 +6,14 @@ import { BarComponent } from './bar.component';
*/
@Component({
selector: 'weui-tabbar',
- template: `
-
-
- `,
- providers: [
- { provide: BarComponent, useExisting: forwardRef(() => TabbarComponent) },
- ],
+ exportAs: 'weuiTabbar',
+ templateUrl: './tabbar.component.html',
+ providers: [{ provide: BarComponent, useExisting: forwardRef(() => TabbarComponent) }],
host: {
'[class.weui-tab]': 'true',
},
+ preserveWhitespaces: false,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
})
-export class TabbarComponent extends BarComponent { }
+export class TabbarComponent extends BarComponent {}
diff --git a/components/test.ts b/components/test.ts
index 1631789..3dd0c6c 100644
--- a/components/test.ts
+++ b/components/test.ts
@@ -1,10 +1,13 @@
+// tslint:disable:ordered-imports
+// tslint:disable:no-import-side-effect
+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
+ platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
@@ -12,7 +15,7 @@ declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
+ platformBrowserDynamicTesting(),
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
diff --git a/components/toast/package.json b/components/toast/package.json
new file mode 100644
index 0000000..61f8a57
--- /dev/null
+++ b/components/toast/package.json
@@ -0,0 +1,7 @@
+{
+ "ngPackage": {
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/toast/public-api.ts b/components/toast/public-api.ts
index ab5f113..3c4d132 100644
--- a/components/toast/public-api.ts
+++ b/components/toast/public-api.ts
@@ -1,4 +1,4 @@
export { ToastService } from './toast.service';
export { ToastComponent } from './toast.component';
-export { ToastConfig } from './toast.config';
+export * from './toast.config';
export { ToastModule } from './toast.module';
diff --git a/components/toast/toast.component.html b/components/toast/toast.component.html
new file mode 100644
index 0000000..eef492d
--- /dev/null
+++ b/components/toast/toast.component.html
@@ -0,0 +1,5 @@
+
+
diff --git a/components/toast/toast.component.ts b/components/toast/toast.component.ts
index 1a2e196..93d4b79 100644
--- a/components/toast/toast.component.ts
+++ b/components/toast/toast.component.ts
@@ -1,25 +1,25 @@
import {
+ ChangeDetectionStrategy,
Component,
- HostBinding,
- Input,
- Output,
EventEmitter,
+ Input,
OnDestroy,
+ Output,
+ ViewEncapsulation,
} from '@angular/core';
+import { InputNumber } from 'ngx-weui/core';
import { ToastConfig } from './toast.config';
@Component({
selector: 'weui-toast',
- template: `
-
-
- `,
+ exportAs: 'weuiToast',
+ templateUrl: './toast.component.html',
host: {
'[hidden]': '!_showd',
},
+ preserveWhitespaces: false,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
})
export class ToastComponent implements OnDestroy {
/**
@@ -40,11 +40,11 @@ export class ToastComponent implements OnDestroy {
/**
* 显示时长后自动关闭（单位：ms），0 表示永久，默认：`2000`
*/
- @Input() time: number = 2000;
+ @Input() @InputNumber() time: number = 2000;
/**
* 隐藏后回调
*/
- @Output() hide = new EventEmitter();
+ @Output() readonly hide = new EventEmitter();
constructor(private DEF: ToastConfig) {
this.type = 'success';
diff --git a/components/toast/toast.config.ts b/components/toast/toast.config.ts
index f1b7f91..ac745e5 100644
--- a/components/toast/toast.config.ts
+++ b/components/toast/toast.config.ts
@@ -1,9 +1,12 @@
import { Injectable } from '@angular/core';
-// tslint:disable-next-line:interface-over-type-literal
-export type ToastConfigType = { text: string; icon: string; time: number };
+export interface ToastConfigType {
+ text: string;
+ icon: string;
+ time: number;
+}
-@Injectable()
+@Injectable({ providedIn: 'root' })
export class ToastConfig {
/**
* 成功配置项
diff --git a/components/toast/toast.module.ts b/components/toast/toast.module.ts
index bfec12f..96bd86b 100644
--- a/components/toast/toast.module.ts
+++ b/components/toast/toast.module.ts
@@ -1,18 +1,11 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
import { ToastComponent } from './toast.component';
-import { ToastService } from './toast.service';
-import { ToastConfig } from './toast.config';
@NgModule({
imports: [CommonModule],
declarations: [ToastComponent],
exports: [ToastComponent],
- providers: [ToastService],
entryComponents: [ToastComponent],
})
-export class ToastModule {
- static forRoot(): ModuleWithProviders {
- return { ngModule: ToastModule, providers: [ToastConfig] };
- }
-}
+export class ToastModule {}
diff --git a/components/toast/toast.service.ts b/components/toast/toast.service.ts
index ba91f0d..cf5110c 100644
--- a/components/toast/toast.service.ts
+++ b/components/toast/toast.service.ts
@@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
-import { BaseService } from '../utils/base.service';
+import { BaseService } from 'ngx-weui/core';
import { ToastComponent } from './toast.component';
-@Injectable()
+@Injectable({ providedIn: 'root' })
export class ToastService extends BaseService {
/**
* 构建toast并显示
@@ -12,12 +12,7 @@ export class ToastService extends BaseService {
* @param [icon] icon图标Class名（可选）
* @param [type] 类型（可选）
*/
- show(
- text?: string,
- time?: number,
- icon?: string,
- type?: 'success' | 'loading',
- ): ToastComponent {
+ show(text?: string, time?: number, icon?: string, type?: 'success' | 'loading'): ToastComponent {
const componentRef = this.build(ToastComponent);
if (type) componentRef.instance.type = type;
diff --git a/components/toast/toast.spec.ts b/components/toast/toast.spec.ts
index 47a7992..e442000 100644
--- a/components/toast/toast.spec.ts
+++ b/components/toast/toast.spec.ts
@@ -1,126 +1,87 @@
-import { Subscriber } from 'rxjs';
-import { Component, ViewChild, DebugElement } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { fakeAsync, inject, tick, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
- ComponentFixture,
- TestBed,
- fakeAsync,
- tick,
- ComponentFixtureAutoDetect,
- async,
- inject,
-} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import {
- ToastModule,
- ToastComponent,
- ToastConfig,
- ToastService,
-} from '../toast';
+import { ToastComponent, ToastModule, ToastService } from '../toast';
describe('Component: Toast', () => {
describe('[default]', () => {
let fixture: ComponentFixture;
let context: TestToastComponent;
- let dl: DebugElement;
let el: HTMLElement;
- beforeEach(
- fakeAsync(() => {
- TestBed.configureTestingModule({
- declarations: [TestToastComponent],
- imports: [ToastModule.forRoot(), NoopAnimationsModule],
- });
- fixture = TestBed.createComponent(TestToastComponent);
- context = fixture.componentInstance;
- dl = fixture.debugElement;
- el = fixture.nativeElement;
- fixture.detectChanges();
- tick();
- }),
- );
+ beforeEach(fakeAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestToastComponent],
+ imports: [ToastModule, NoopAnimationsModule],
+ });
+ fixture = TestBed.createComponent(TestToastComponent);
+ context = fixture.componentInstance;
+ el = fixture.nativeElement;
+ fixture.detectChanges();
+ tick();
+ }));
it('should default values', () => {
- expect(el.querySelector('.weui-toast__content').textContent).toBe(
- '已完成',
- );
- expect(el.querySelector('.weui-icon_toast').classList).toContain(
- 'weui-icon-success-no-circle',
- );
+ expect(el.querySelector('.weui-toast__content')!.textContent).toBe('已完成');
+ expect(el.querySelector('.weui-icon_toast')!.classList).toContain('weui-icon-success-no-circle');
});
it('should be open by onShow()', () => {
context.toast.onShow();
fixture.detectChanges();
- expect(
- el.querySelector('weui-toast').attributes['hidden'],
- ).toBeUndefined();
+ expect(el.querySelector('weui-toast')!.attributes.getNamedItem('hidden')).toBeNull();
});
- it(
- 'should hide',
- fakeAsync(() => {
- context.toast.onShow();
- fixture.detectChanges();
- // 等待动画结束
- tick(200);
- fixture.detectChanges();
- expect(
- el.querySelector('weui-toast').attributes['hidden'],
- ).not.toBeUndefined();
- tick();
- }),
- );
+ it('should hide', fakeAsync(() => {
+ context.toast.onShow();
+ fixture.detectChanges();
+ // 等待动画结束
+ tick(200);
+ fixture.detectChanges();
+ expect(el.querySelector('weui-toast')!.attributes.getNamedItem('hidden')).not.toBeNull();
+ tick();
+ }));
});
describe('[service]', () => {
let service: ToastService;
let fixture: any;
- let context: TestToastServiceComponent;
- let dl: DebugElement;
let el: any;
- beforeEach(
- fakeAsync(() => {
- TestBed.configureTestingModule({
- imports: [ToastModule.forRoot(), FormsModule, NoopAnimationsModule],
- declarations: [TestToastServiceComponent],
- providers: [ToastService],
- }).createComponent(TestToastServiceComponent);
+ beforeEach(fakeAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [ToastModule, FormsModule, NoopAnimationsModule],
+ declarations: [TestToastServiceComponent],
+ providers: [ToastService],
+ }).createComponent(TestToastServiceComponent);
- fixture = TestBed.createComponent(TestToastServiceComponent);
- context = fixture.componentInstance;
- dl = fixture.debugElement;
- el = fixture.nativeElement;
- fixture.detectChanges();
- tick();
- }),
- );
+ fixture = TestBed.createComponent(TestToastServiceComponent);
+ el = fixture.nativeElement;
+ fixture.detectChanges();
+ tick();
+ }));
- beforeEach(
- inject([ToastService], (_s: ToastService) => {
- service = _s;
- }),
- );
+ beforeEach(inject([ToastService], (_s: ToastService) => {
+ service = _s;
+ }));
- it(
- 'should show success toast',
- fakeAsync(() => {
- service.show('success', 100);
- fixture.detectChanges();
- // 等待动画结束
- tick(500);
- fixture.detectChanges();
- expect(el.parentElement.querySelector('weui-toast')).toBeNull();
- }),
- );
+ it('should show success toast', fakeAsync(() => {
+ service.show('success', 100);
+ fixture.detectChanges();
+ // 等待动画结束
+ tick(500);
+ fixture.detectChanges();
+ expect(el.parentElement.querySelector('weui-toast')).toBeNull();
+ }));
});
});
@Component({
- template: `Test Service `,
+ template: `
+ Test Service
+ `,
})
class TestToastServiceComponent {}
@@ -128,7 +89,7 @@ class TestToastServiceComponent {}
selector: 'test-component',
template: `
{{text}}
`,
+ {{ text }}Test Service `,
+ template: `
+ Test Service
+ `,
})
class TestToptipsServiceComponent {}
@Component({
selector: 'test-component',
- template: `
`;
@@ -13,7 +13,7 @@ describe('Component: file-thumb', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestFileThumbComponent],
- imports: [UploaderModule.forRoot()],
+ imports: [UploaderModule],
});
TestBed.overrideComponent(TestFileThumbComponent, {
set: { template: html },
@@ -23,32 +23,25 @@ describe('Component: file-thumb', () => {
directives = fixture.debugElement
.queryAll(By.directive(FileThumbDirective))
- .map(
- (de: DebugElement) =>
- de.injector.get(FileThumbDirective) as FileThumbDirective,
- );
+ .map((de: DebugElement) => de.injector.get(FileThumbDirective));
});
it('should be init', () => {
fixture.componentInstance.file = new File(
- [
- 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg==',
- ],
+ ['iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg=='],
'test.png',
{ type: 'image/png' },
);
fixture.detectChanges();
expect(directives.length).toBe(1);
- const divEl = fixture.debugElement.query(By.css('[weui-thumb]'))
- .nativeElement as HTMLDivElement;
+ const divEl = fixture.debugElement.query(By.css('[weui-thumb]')).nativeElement as HTMLDivElement;
expect(divEl).not.toBeNull();
expect(divEl.style.backgroundImage).toContain('blob:');
});
it('should invalid image', () => {
expect(directives.length).toBe(1);
- const divEl = fixture.debugElement.query(By.css('[weui-thumb]'))
- .nativeElement as HTMLDivElement;
+ const divEl = fixture.debugElement.query(By.css('[weui-thumb]')).nativeElement as HTMLDivElement;
expect(divEl).not.toBeNull();
expect(divEl.style.backgroundImage).toBe('');
});
diff --git a/components/uploader/package.json b/components/uploader/package.json
new file mode 100644
index 0000000..61f8a57
--- /dev/null
+++ b/components/uploader/package.json
@@ -0,0 +1,7 @@
+{
+ "ngPackage": {
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/uploader/uploader.class.spec.ts b/components/uploader/uploader.class.spec.ts
index bdff567..f622519 100644
--- a/components/uploader/uploader.class.spec.ts
+++ b/components/uploader/uploader.class.spec.ts
@@ -1,26 +1,22 @@
-import { TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { Uploader } from './uploader.class';
+import { fakeAsync, tick } from '@angular/core/testing';
import * as sinon from 'sinon';
+import { Uploader } from './uploader.class';
describe('Uploader: Class', () => {
- let instance: Uploader = null;
- let xhr: any, requests: any[];
+ let instance: Uploader;
+ let xhr: any;
+ let requests: any[];
- function addFiles(
- count: number = 1,
- ext: string = 'png',
- type: string = 'image/png',
- ) {
+ function addFiles(count: number = 1, ext: string = 'png', type: string = 'image/png') {
for (let i = 0; i < count; i++) {
- const textFileAsBlob = new Blob(['a' + i], { type: type });
+ const textFileAsBlob = new Blob(['a' + i], { type });
const f = new File([textFileAsBlob], `${i + 1}.${ext}`);
instance.addToQueue([f]);
}
}
beforeEach(() => {
- instance = null;
- instance = new Uploader();
+ instance = new Uploader({});
xhr = sinon.useFakeXMLHttpRequest();
requests = [];
xhr.onCreate = function(req) {
@@ -66,10 +62,7 @@ describe('Uploader: Class', () => {
for (const item of files) {
instance.clearQueue();
addFiles(1, item.e, item.t);
- expect(instance.queue.length).toBe(
- 0,
- `the ${item.e} file need invalid`,
- );
+ expect(instance.queue.length).toBe(0, `the ${item.e} file need invalid`);
}
});
});
@@ -95,14 +88,11 @@ describe('Uploader: Class', () => {
expect(instance.isUploading).toBe(true);
});
- it(
- '#cancelItem should be',
- fakeAsync(() => {
- addFiles(1, 'png');
- instance.uploadItem(instance.queue[0]);
- instance.cancelItem(instance.queue[0]);
- tick(100);
- expect(instance.queue[0].isCancel).toBe(true);
- }),
- );
+ it('#cancelItem should be', fakeAsync(() => {
+ addFiles(1, 'png');
+ instance.uploadItem(instance.queue[0]);
+ instance.cancelItem(instance.queue[0]);
+ tick(100);
+ expect(instance.queue[0].isCancel).toBe(true);
+ }));
});
diff --git a/components/uploader/uploader.class.ts b/components/uploader/uploader.class.ts
index 2cd32ae..c703662 100644
--- a/components/uploader/uploader.class.ts
+++ b/components/uploader/uploader.class.ts
@@ -1,17 +1,17 @@
-import { Optional, Inject } from '@angular/core';
-import { UploaderOptions, FilterFunction } from './uploader.options';
+import { Inject, Optional } from '@angular/core';
import { FileItem } from './file-item.class';
-import { UploaderConfig } from './uploader.config';
import { FileLikeObject } from './file-like-object.class';
import { FileType } from './file-type.class';
import { ParsedResponseHeaders } from './interface';
+import { UploaderConfig } from './uploader.config';
+import { FilterFunction, UploaderOptions } from './uploader.options';
/**
* 内置HTML5上传组件
*/
export class Uploader {
private _options: UploaderOptions;
- private _queue: Array = [];
+ private _queue: FileItem[] = [];
private _progress: number = 0;
private _isUploading: boolean = false;
private _nextIndex: number = 0;
@@ -67,7 +67,7 @@ export class Uploader {
* Creates an instance of Uploader.
*/
constructor(
- options?: UploaderOptions,
+ options: UploaderOptions,
@Inject(UploaderConfig)
@Optional()
private globalConfig?: UploaderConfig,
@@ -82,53 +82,52 @@ export class Uploader {
* @param includeOldQueue 是否包括已存在队列中的文件
*/
setOptions(options: UploaderOptions, includeOldQueue: boolean = true) {
- this._options = Object.assign(
- {
- filters: [],
- disableMultipart: false,
- method: 'POST',
- alias: 'file',
- withCredentials: true,
- auto: false,
- limit: -1,
- size: -1,
- removeAfterUpload: false,
- },
- this.globalConfig,
- this._options,
- options,
- );
+ this._options = {
+ filters: [],
+ disableMultipart: false,
+ method: 'POST',
+ alias: 'file',
+ withCredentials: true,
+ auto: false,
+ limit: -1,
+ size: -1,
+ removeAfterUpload: false,
+ ...this.globalConfig,
+ ...this._options,
+ ...options,
+ } as UploaderOptions;
// 数量
if (this._options.limit !== -1)
- this._options.filters.unshift({
+ this._options.filters!.unshift({
name: 'queueLimit',
fn: this._queueLimitFilter,
});
// 大小
if (this._options.size !== -1)
- this._options.filters.unshift({
+ this._options.filters!.unshift({
name: 'fileSize',
fn: this._fileSizeFilter,
});
// 类型
if (this._options.types)
- this._options.filters.unshift({
+ this._options.filters!.unshift({
name: 'fileType',
fn: this._fileTypeFilter,
});
// mime类型
if (this._options.mimes)
- this._options.filters.unshift({
+ this._options.filters!.unshift({
name: 'mimeType',
fn: this._mimeTypeFilter,
});
// 对已经存在的队列重置所有配置信息
if (includeOldQueue) {
+ // tslint:disable-next-line: prefer-for-of
for (let i = 0; i < this._queue.length; i++) {
this._queue[i].setOptions(this._options);
}
@@ -136,34 +135,22 @@ export class Uploader {
}
private _queueLimitFilter(): boolean {
- return (
- this._options.limit === undefined ||
- this._queue.length < this._options.limit
- );
+ return this._options.limit === undefined || this._queue.length < this._options.limit;
}
- private _fileSizeFilter(item: FileLikeObject): boolean {
- return !(this._options.size && item.size > this._options.size);
+ private _fileSizeFilter(item?: FileLikeObject, _options?: UploaderOptions): boolean {
+ return !(this._options.size && item!.size > this._options.size);
}
- private _mimeTypeFilter(item: FileLikeObject): boolean {
- return !(
- this._options.mimes && this._options.mimes.indexOf(item.type) === -1
- );
+ private _mimeTypeFilter(item?: FileLikeObject, _options?: UploaderOptions): boolean {
+ return !(this._options.mimes && this._options.mimes.indexOf(item!.type) === -1);
}
- private _fileTypeFilter(item: FileLikeObject): boolean {
- return !(
- this._options.types &&
- this._options.types.indexOf(FileType.getMimeClass(item)) === -1
- );
+ private _fileTypeFilter(item?: FileLikeObject, _options?: UploaderOptions): boolean {
+ return !(this._options.types && this._options.types.indexOf(FileType.getMimeClass(item!)) === -1);
}
- private _isValidFile(
- file: FileLikeObject,
- filters: FilterFunction[],
- options: UploaderOptions,
- ): boolean {
+ private _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: UploaderOptions): boolean {
this._failFilterIndex = -1;
return !filters.length
? true
@@ -175,15 +162,13 @@ export class Uploader {
/** 过滤器，如果未指定采用内置 */
private _getFilters(filters: FilterFunction[] | string): FilterFunction[] {
- if (!filters) return this._options.filters;
+ if (!filters) return this._options.filters!;
if (Array.isArray(filters)) return filters;
if (typeof filters === 'string') {
- const names = filters.match(/[^\s,]+/g);
- return this._options.filters.filter(
- (filter: any) => names.indexOf(filter.name) !== -1,
- );
+ const names = filters.match(/[^\s,]+/g)!;
+ return this._options.filters!.filter((filter: any) => names.indexOf(filter.name) !== -1);
}
- return this._options.filters;
+ return this._options.filters!;
}
private _getIndexOfItem(value: any): number {
@@ -209,14 +194,10 @@ export class Uploader {
* @param options 强制重新指定新 `options` 内容
* @param filters 强制重新指定新 `filters` 内容
*/
- addToQueue(
- files: File[],
- options?: UploaderOptions,
- filters?: FilterFunction[] | string,
- ) {
+ addToQueue(files: File[], options?: UploaderOptions, filters?: FilterFunction[] | string) {
const list: File[] = [];
for (const file of files) list.push(file);
- const arrayOfFilters = this._getFilters(filters);
+ const arrayOfFilters = this._getFilters(filters!);
const count = this._queue.length;
const addedFileItems: FileItem[] = [];
if (!options) {
@@ -224,14 +205,14 @@ export class Uploader {
}
list.map((some: File) => {
const temp = new FileLikeObject(some);
- if (this._isValidFile(temp, arrayOfFilters, options)) {
- const fileItem = new FileItem(this, some, options);
+ if (this._isValidFile(temp, arrayOfFilters, options!)) {
+ const fileItem = new FileItem(this, some, options!);
addedFileItems.push(fileItem);
this._queue.push(fileItem);
if (this._options.onFileQueued) this._options.onFileQueued(fileItem);
} else {
const filter = arrayOfFilters[this._failFilterIndex];
- if (this._options.onError) this._options.onError(temp, filter, options);
+ if (this._options.onError) this._options.onError(temp, filter, options!);
}
});
@@ -239,7 +220,7 @@ export class Uploader {
this._progress = this._getTotalProgress();
}
- if (this.options.auto) {
+ if (this.options!.auto) {
this.uploadAll();
}
}
@@ -249,7 +230,7 @@ export class Uploader {
*
* @param value FileItem对象或下标
*/
- removeFromQueue(value: FileItem | Number): void {
+ removeFromQueue(value: FileItem | number): void {
const index = this._getIndexOfItem(value);
const item = this._queue[index];
if (item.isUploading) {
@@ -293,8 +274,8 @@ export class Uploader {
const item = this._queue[index];
if (item && item.isUploading) {
if (item.options.abortTransport) {
- this._onCancelItem(item, null, null, null);
- this._onCompleteItem(item, null, null, null);
+ this._onCancelItem(item);
+ this._onCompleteItem(item, null!, null!, null!);
item.options.abortTransport(item);
} else {
if (item._xhr) item._xhr.abort();
@@ -306,9 +287,7 @@ export class Uploader {
* 上传队列中所有未上传的文件
*/
uploadAll(): void {
- const items = this.getNotUploadedItems().filter(
- (item: FileItem) => !item.isUploading,
- );
+ const items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading);
if (!items.length) {
return;
}
@@ -337,12 +316,10 @@ export class Uploader {
// 自实现
if (item.options.uploadTransport) {
- item.options.uploadTransport
- .apply(this, [item])
- .subscribe((response: any) => {
- this._onSuccessItem(item, response, 0, null);
- this._onCompleteItem(item, response, 0, null);
- });
+ item.options.uploadTransport.apply(this, [item]).subscribe((response: any) => {
+ this._onSuccessItem(item, response, 0, null!);
+ this._onCompleteItem(item, response, 0, null!);
+ });
return this;
}
@@ -355,7 +332,7 @@ export class Uploader {
sendable = new FormData();
Object.keys(this._options.params || {}).forEach((key: string) =>
- sendable.append(key, this._options.params[key]),
+ sendable.append(key, this._options.params![key]),
);
sendable.append(item.options.alias, item._file, item.file.name);
@@ -364,16 +341,14 @@ export class Uploader {
}
xhr.upload.onprogress = (event: any) => {
- const progress = Math.round(
- event.lengthComputable ? event.loaded * 100 / event.total : 0,
- );
+ const progress = Math.round(event.lengthComputable ? (event.loaded * 100) / event.total : 0);
this._onProgressItem(item, progress);
};
xhr.onload = () => {
const headers = this._parseHeaders(xhr.getAllResponseHeaders());
const response = this._transformResponse(xhr.response, headers);
const gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
- const method = '_on' + gist + 'Item';
+ const method = `_on${gist}Item`;
(this as any)[method](item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers);
};
@@ -386,11 +361,11 @@ export class Uploader {
xhr.onabort = () => {
const headers = this._parseHeaders(xhr.getAllResponseHeaders());
const response = this._transformResponse(xhr.response, headers);
- this._onCancelItem(item, response, xhr.status, headers);
+ this._onCancelItem(item);
this._onCompleteItem(item, response, xhr.status, headers);
};
- xhr.open(item.options.method, item.options.url, true);
- xhr.withCredentials = item.options.withCredentials;
+ xhr.open(item.options.method!, item.options.url!, true);
+ xhr.withCredentials = item.options.withCredentials!;
if (item.options.headers && item.options.headers.length > 0) {
for (const header of item.options.headers) {
xhr.setRequestHeader(header.name, header.value);
@@ -405,11 +380,9 @@ export class Uploader {
return value;
}
const notUploaded = this.getNotUploadedItems().length;
- const uploaded = notUploaded
- ? this._queue.length - notUploaded
- : this._queue.length;
+ const uploaded = notUploaded ? this._queue.length - notUploaded : this._queue.length;
const ratio = 100 / this._queue.length;
- const current = value * ratio / 100;
+ const current = (value * ratio) / 100;
return Math.round(uploaded * ratio + current);
}
@@ -429,16 +402,13 @@ export class Uploader {
.toLowerCase();
val = line.slice(i + 1).trim();
if (key) {
- parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
+ parsed[key] = parsed[key] ? `${parsed[key]}, ${val}` : val;
}
});
return parsed;
}
- private _transformResponse(
- response: string,
- headers: ParsedResponseHeaders,
- ): string {
+ private _transformResponse(response: string, _headers: ParsedResponseHeaders): string {
return response;
}
@@ -452,39 +422,19 @@ export class Uploader {
item._onProgress(progress);
}
- _onErrorItem(
- item: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ): void {
+ _onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onError(response, status, headers);
}
- private _onSuccessItem(
- item: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ): void {
+ private _onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onSuccess(response, status, headers);
}
- private _onCancelItem(
- item: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ): void {
- item._onCancel(response, status, headers);
+ private _onCancelItem(item: FileItem): void {
+ item._onCancel();
}
- _onCompleteItem(
- item: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ): void {
+ _onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onComplete(response, status, headers);
const nextItem = this.getReadyItems[0];
this._isUploading = false;
diff --git a/components/uploader/uploader.config.ts b/components/uploader/uploader.config.ts
index 79cb084..f813db8 100644
--- a/components/uploader/uploader.config.ts
+++ b/components/uploader/uploader.config.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
-@Injectable()
+@Injectable({ providedIn: 'root' })
export class UploaderConfig {
/**
* 服务端网址
diff --git a/components/uploader/uploader.directive.spec.ts b/components/uploader/uploader.directive.spec.ts
index 40125c8..4ab191b 100644
--- a/components/uploader/uploader.directive.spec.ts
+++ b/components/uploader/uploader.directive.spec.ts
@@ -1,13 +1,8 @@
-import {
- TestBed,
- ComponentFixture,
- fakeAsync,
- tick,
-} from '@angular/core/testing';
-import { Component, DebugElement, enableProdMode } from '@angular/core';
-
-import { UploaderModule, Uploader, UploaderFileDirective } from '../uploader';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
import { By } from '@angular/platform-browser';
+import { Uploader, UploaderFileDirective, UploaderModule } from '../uploader';
const html = `(UploaderFileDirective);
});
it('should be inited', () => {
@@ -57,25 +48,18 @@ describe('Component: Uploader', () => {
it('should handle event', () => {
spyOn(directive.uploader, 'addToQueue');
directive._onChange();
- const args = [
- (directiveEl.nativeElement as HTMLInputElement).files,
- directive._options,
- ];
+ const args = [(directiveEl.nativeElement as HTMLInputElement).files, directive._options];
expect(directive.uploader.addToQueue).toHaveBeenCalledWith(...args);
});
describe('CLASS', () => {
const file1 = new File(
- [
- 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg==',
- ],
+ ['iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg=='],
'file1.png',
{ type: 'image/png' },
);
const file2 = new File(
- [
- 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg==',
- ],
+ ['iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkWK1WDwAC1gFS81OXVgAAAABJRU5ErkJggg=='],
'file2.png',
{ type: 'image/png' },
);
diff --git a/components/uploader/uploader.directive.ts b/components/uploader/uploader.directive.ts
index 5a8089f..e60da49 100644
--- a/components/uploader/uploader.directive.ts
+++ b/components/uploader/uploader.directive.ts
@@ -1,9 +1,10 @@
-import { Directive, Input, ElementRef, HostListener } from '@angular/core';
-import { UploaderOptions } from './uploader.options';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { Uploader } from './uploader.class';
+import { UploaderOptions } from './uploader.options';
@Directive({
selector: '[weui-uploader-file]',
+ exportAs: 'weuiUploaderFile',
})
export class UploaderFileDirective {
/**
diff --git a/components/uploader/uploader.module.ts b/components/uploader/uploader.module.ts
index f3d6c31..a576f64 100644
--- a/components/uploader/uploader.module.ts
+++ b/components/uploader/uploader.module.ts
@@ -1,16 +1,11 @@
import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { UploaderFileDirective } from './uploader.directive';
+import { NgModule } from '@angular/core';
import { FileThumbDirective } from './file-thumb.directive';
-import { UploaderConfig } from './uploader.config';
+import { UploaderFileDirective } from './uploader.directive';
@NgModule({
imports: [CommonModule],
declarations: [UploaderFileDirective, FileThumbDirective],
exports: [UploaderFileDirective, FileThumbDirective],
})
-export class UploaderModule {
- static forRoot(): ModuleWithProviders {
- return { ngModule: UploaderModule, providers: [UploaderConfig] };
- }
-}
+export class UploaderModule {}
diff --git a/components/uploader/uploader.options.ts b/components/uploader/uploader.options.ts
index 6f06dd8..739d440 100644
--- a/components/uploader/uploader.options.ts
+++ b/components/uploader/uploader.options.ts
@@ -1,8 +1,8 @@
import { Observable } from 'rxjs';
-import { ParsedResponseHeaders } from './interface';
import { FileItem } from './file-item.class';
import { FileLikeObject } from './file-like-object.class';
+import { ParsedResponseHeaders } from './interface';
// tslint:disable-next-line:interface-over-type-literal
export type FilterFunction = {
@@ -131,11 +131,7 @@ export interface UploaderOptions {
* @param percentage 当前文件上传进度
* @param totaoPercentage 总上传进度
*/
- onUploadProgress?: (
- file: FileItem,
- percentage: number,
- totaoPercentage: number,
- ) => void;
+ onUploadProgress?: (file: FileItem, percentage: number, totaoPercentage: number) => void;
/**
* 当文件上传成功时触发
@@ -144,12 +140,7 @@ export interface UploaderOptions {
* @param status 状态码
* @param headers Headers
*/
- onUploadSuccess?: (
- file: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ) => void;
+ onUploadSuccess?: (file: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => void;
/**
* 当文件上传出错时触发
@@ -158,12 +149,7 @@ export interface UploaderOptions {
* @param status 状态码
* @param headers Headers
*/
- onUploadError?: (
- file: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ) => void;
+ onUploadError?: (file: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => void;
/**
* 不管成功或者失败，文件上传完成时触发
* @param file File对象
@@ -171,12 +157,7 @@ export interface UploaderOptions {
* @param status 状态码
* @param headers Headers
*/
- onUploadComplete?: (
- file: FileItem,
- response: string,
- status: number,
- headers: ParsedResponseHeaders,
- ) => void;
+ onUploadComplete?: (file: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => void;
/**
* 取消某文件时触发
@@ -191,11 +172,7 @@ export interface UploaderOptions {
* @param filter 过滤器
* @param options 选项
*/
- onError?: (
- file: FileLikeObject,
- filter: FilterFunction,
- options: UploaderOptions,
- ) => void;
+ onError?: (file: FileLikeObject, filter: FilterFunction, options: UploaderOptions) => void;
/**
* 内置的上传组件是基于HTML5
diff --git a/components/utils/boolean-property.ts b/components/utils/boolean-property.ts
deleted file mode 100644
index 8adac28..0000000
--- a/components/utils/boolean-property.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function toBoolean(value: any): boolean {
- return value != null && `${value}` !== 'false';
-}
diff --git a/components/utils/loader.service.spec.ts b/components/utils/loader.service.spec.ts
deleted file mode 100644
index 4d4434c..0000000
--- a/components/utils/loader.service.spec.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Injector, ReflectiveInjector } from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
-
-import { LoaderService } from './loader.service';
-
-class MockDocument {
- createElement = jasmine
- .createSpy('Document createElement')
- .and.returnValue({});
- getElementsByTagName = jasmine.createSpy('Document getElementsByTagName');
-}
-
-describe('LoaderService', () => {
- let service: LoaderService;
- let document: MockDocument;
-
- beforeEach(() => {
- const injector = ReflectiveInjector.resolveAndCreate([
- LoaderService,
- { provide: DOCUMENT, useClass: MockDocument },
- ]);
- service = injector.get(LoaderService);
- document = injector.get(DOCUMENT);
- });
-
- it('should create script tag', () => {
- const JSURL = 'http://test.com/1.js';
- service.load([JSURL]);
- expect(document.createElement).toHaveBeenCalled();
- expect(document.getElementsByTagName).toHaveBeenCalled();
- });
-
- it('should create link tag', () => {
- const CSSURL = 'http://test.com/1.css';
- service.load(CSSURL);
- expect(document.createElement).toHaveBeenCalled();
- expect(document.getElementsByTagName).toHaveBeenCalled();
- });
-
- it('should at once if create exists', () => {
- const JSURL = 'http://test.com/1.js';
- const CSSURL = 'http://test.com/1.css';
- service.load([JSURL, CSSURL]);
- service.load([JSURL, CSSURL]);
- expect(document.createElement).toHaveBeenCalled();
- expect(document.getElementsByTagName).toHaveBeenCalled();
- });
-});
diff --git a/package.json b/package.json
index e0a5e03..0344cc5 100644
--- a/package.json
+++ b/package.json
@@ -34,42 +34,39 @@
"release": "npm run build && cd publish && npm publish --access public"
},
"dependencies": {
- "@angular/animations": "~7.1.0",
- "@angular/common": "~7.1.0",
- "@angular/compiler": "~7.1.0",
- "@angular/core": "~7.1.0",
- "@angular/forms": "~7.1.0",
- "@angular/platform-browser": "~7.1.0",
- "@angular/platform-browser-dynamic": "~7.1.0",
- "@angular/router": "~7.1.0",
+ "@angular/animations": "~7.2.0",
+ "@angular/common": "~7.2.0",
+ "@angular/compiler": "~7.2.0",
+ "@angular/core": "~7.2.0",
+ "@angular/forms": "~7.2.0",
+ "@angular/platform-browser": "~7.2.0",
+ "@angular/platform-browser-dynamic": "~7.2.0",
+ "@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
- "weui": "^1.1.3",
+ "weui": "^2.0.0",
"angular-qq-maps": "^7.0.0",
"font-awesome": "^4.7.0",
- "ngx-countdown": "^3.1.0",
+ "ngx-countdown": "^3.2.0",
"ngx-gesture-password": "^7.0.0",
- "ngx-toastr": "^9.1.1",
- "swiper": "^4.4.2",
+ "ngx-toastr": "^10.0.2",
+ "swiper": "^4.5.0",
"g2-mobile": "^2.2.0-beta.3"
},
"devDependencies": {
- "@angular-devkit/build-angular": "~0.11.0",
- "@angular-devkit/build-ng-packagr": "~0.11.1",
- "@angular/cli": "~7.1.1",
- "@angular/compiler-cli": "~7.1.0",
- "@angular/language-service": "~7.1.0",
+ "@angular-devkit/build-angular": "~0.13.0",
+ "@angular/cli": "~7.3.9",
+ "@angular/compiler-cli": "~7.2.0",
+ "@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
- "@types/sinon": "^2.3.1",
- "codecov": "^3.1.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
- "karma": "~3.1.1",
+ "karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
@@ -77,13 +74,28 @@
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
- "typescript": "~3.1.6",
- "ng-packagr": "^4.4.5",
- "tsickle": "^0.34.0",
+ "typescript": "~3.2.2",
+ "@angular-devkit/build-ng-packagr": "~0.13.9",
+ "@types/sinon": "^7.0.11",
+ "codecov": "^3.4.0",
+ "ng-packagr": "^5.1.0",
+ "tsickle": "^0.35.0",
"mark-twain": "^2.0.3",
"mustache": "^3.0.1",
"less-plugin-clean-css": "^1.5.1",
"fs-extra": "^7.0.1",
- "sinon": "^4.4.2"
+ "sinon": "^7.3.2",
+ "prettier": "^1.16.1",
+ "prettier-stylelint": "^0.4.2",
+ "stylelint": "^10.0.1",
+ "stylelint-config-css-modules": "^1.4.0",
+ "stylelint-config-prettier": "^5.1.0",
+ "stylelint-config-rational-order": "^0.1.2",
+ "stylelint-config-standard": "^18.3.0",
+ "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
+ "stylelint-order": "^3.0.0",
+ "gh-pages": "^2.0.1",
+ "tslint-config-prettier": "^1.18.0",
+ "tslint-language-service": "^0.9.9"
}
}
\ No newline at end of file
diff --git a/scripts/site/converters/highlight.ts b/scripts/site/converters/highlight.ts
index 3fb939c..157b729 100644
--- a/scripts/site/converters/highlight.ts
+++ b/scripts/site/converters/highlight.ts
@@ -2,11 +2,11 @@ const JsonML = require('jsonml.js/lib/utils');
import { getCode } from '../utils/utils';
export function highlight() {
- return [
- (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
- (node: any, index: number) => {
- const attr = JsonML.getAttributes(node);
- return `${getCode(node)}${getCode(node)}#
- return `<${tagName} id="${sluggedId}">${children} `;
+ return [
+ [
+ (node: any) => JsonML.isElement(node) && isHeading(node),
+ (node: any) => {
+ const tagName = JsonML.getTagName(node);
+ const children = JsonML.getChildren(node);
+ const sluggedId = generateSluggedId(children).id;
+ // #
+ return `<${tagName} id="${sluggedId}">${children} `;
+ },
+ ],
+ [
+ (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'img',
+ (node: any, index: number) => {
+ const attrs = JsonML.getAttributes(node);
+ const ret: any[] = [];
+ if (attrs) {
+ // tslint:disable-next-line: forin
+ for (const key in attrs) {
+ let value = attrs[key];
+ if (key === 'src' && ~value.indexOf(' | ')) {
+ const imgWH = value
+ .split(' | ')[1]
+ .trim()
+ .split('=');
+ for (let i = 0; i < imgWH.length; i += 2) {
+ ret.push(`${imgWH[i]}=${imgWH[i + 1]}`);
+ }
+ value = value.split(' | ')[0];
}
- ],
- [
- (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'img',
- (node: any, index: number) => {
- const attrs = JsonML.getAttributes(node);
- const ret: any[] = [];
- if (attrs) {
- for (const key in attrs) {
- let value = attrs[key];
- if (key === 'src' && ~value.indexOf(' | ')) {
- const imgWH = value.split(' | ')[1].trim().split('=');
- for (let i = 0; i < imgWH.length; i += 2) {
- ret.push(`${imgWH[i]}=${imgWH[i + 1]}`);
- }
- value = value.split(' | ')[0];
- }
- if (value) ret.push(`${key}="${value}"`);
- }
- }
- return `window).appBootstrap = () => {
- setTimeout(() => {
- remove();
- body.style.overflow = '';
- }, 100);
+(window as any).appBootstrap = () => {
+ setTimeout(() => {
+ remove();
+ body.style.overflow = '';
+ }, 100);
};
diff --git a/src/app/example/accordion/accordion.component.html b/src/app/example/accordion/accordion.component.html
index d70baba..58a9a77 100644
--- a/src/app/example/accordion/accordion.component.html
+++ b/src/app/example/accordion/accordion.component.html
@@ -1,27 +1,27 @@
+
+
添加
+
移除
+
+ {{ list[0].disabled ? '启用' : '禁止' }}第一个
+
+
+ 设置{{ collapsible ? '只允许一个' : '所有' }}折叠
+
+
choose index: {{ index }}
+
-
添加
-
移除
-
{{list[0].disabled ? '启用' : '禁止'}}第一个
-
设置{{collapsible ? '只允许一个' : '所有'}}折叠
-
choose index: {{index}}
-
-
- {{ item.title }}
-
-
-
-
+
+
+ {{ item.title }}
+
+
+
diff --git a/src/app/example/accordion/accordion.component.scss b/src/app/example/accordion/accordion.component.scss
index 5acd71f..790ee36 100644
--- a/src/app/example/accordion/accordion.component.scss
+++ b/src/app/example/accordion/accordion.component.scss
@@ -1,22 +1,22 @@
.weui-accordion-panel {
- margin: 10px 0;
- background-color: #fff;
- overflow: hidden;
- border-radius: 2px;
- .heading {
- padding: 20px;
- cursor: pointer;
- }
- .weui-cells {
- margin-top: 0;
- }
- .weui-accordion-content {
- transition: max-height .5s ease-in;
- }
+ margin: 10px 0;
+ overflow: hidden;
+ background-color: #fff;
+ border-radius: 2px;
+ .heading {
+ padding: 20px;
+ cursor: pointer;
+ }
+ .weui-cells {
+ margin-top: 0;
+ }
+ .weui-accordion-content {
+ transition: max-height 0.5s ease-in;
+ }
}
.weui-accordion-active {
- .weui-accordion-content {
- max-height: 100px;
- }
+ .weui-accordion-content {
+ max-height: 100px;
+ }
}
diff --git a/src/app/example/accordion/accordion.component.ts b/src/app/example/accordion/accordion.component.ts
index 8dee0e0..d96720a 100644
--- a/src/app/example/accordion/accordion.component.ts
+++ b/src/app/example/accordion/accordion.component.ts
@@ -1,42 +1,42 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
interface AccordionItem {
- disabled: boolean;
- active: boolean;
- title: string;
- list: number[];
+ disabled: boolean;
+ active: boolean;
+ title: string;
+ list: number[];
}
@Component({
- selector: 'example-accordion',
- templateUrl: './accordion.component.html',
- styleUrls: ['./accordion.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-accordion',
+ templateUrl: './accordion.component.html',
+ styleUrls: ['./accordion.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DemoAccordionComponent implements OnInit {
- collapsible: boolean = false;
+ collapsible: boolean = false;
- list: AccordionItem[] = [];
+ list: AccordionItem[] = [];
- ngOnInit() {
- new Array(3).fill(0).forEach(() => this.add());
- }
+ ngOnInit() {
+ new Array(3).fill(0).forEach(() => this.add());
+ }
- add() {
- this.list.push({
- disabled: false,
- active: false,
- title: `标题${this.list.length + 1}`,
- list: new Array(this.list.length + 1)
- });
- }
+ add() {
+ this.list.push({
+ disabled: false,
+ active: false,
+ title: `标题${this.list.length + 1}`,
+ list: new Array(this.list.length + 1),
+ });
+ }
- remove() {
- if (this.list.length > 1) this.list.pop();
- }
+ remove() {
+ if (this.list.length > 1) this.list.pop();
+ }
- index: number = 0;
- select(index: number) {
- this.index = index;
- }
+ index: number = 0;
+ select(index: number) {
+ this.index = index;
+ }
}
diff --git a/src/app/example/actionsheet/actionsheet.component.html b/src/app/example/actionsheet/actionsheet.component.html
index c3dae82..f30549c 100644
--- a/src/app/example/actionsheet/actionsheet.component.html
+++ b/src/app/example/actionsheet/actionsheet.component.html
@@ -1,16 +1,13 @@
-
-
- 使用组件形式
- iOS ActionSheet
- Android ActionSheet
- 自动形式
- 使用Service形式
- iOS ActionSheet
- Android ActionSheet
- 自动形式（且点背景不可关闭）
-
+ 使用组件形式
+ iOS ActionSheet
+ Android ActionSheet
+ 自动形式
+ 使用Service形式
+ iOS ActionSheet
+ Android ActionSheet
+ 自动形式（且点背景不可关闭）
diff --git a/src/app/example/actionsheet/actionsheet.component.ts b/src/app/example/actionsheet/actionsheet.component.ts
index 60a50f7..d84d24c 100644
--- a/src/app/example/actionsheet/actionsheet.component.ts
+++ b/src/app/example/actionsheet/actionsheet.component.ts
@@ -1,50 +1,45 @@
-import { Component, ViewEncapsulation, ViewChild, OnDestroy } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { SkinType } from 'ngx-weui';
-import { ActionSheetService, ActionSheetConfig, ActionSheetComponent } from "ngx-weui/actionsheet";
+import { ActionSheetComponent, ActionSheetConfig, ActionSheetService } from 'ngx-weui/actionsheet';
@Component({
- selector: 'example-actionsheet',
- templateUrl: './actionsheet.component.html',
- styleUrls: [ './actionsheet.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-actionsheet',
+ templateUrl: './actionsheet.component.html',
+ styleUrls: ['./actionsheet.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DemoActionSheetComponent {
-
- @ViewChild('ios') iosAS: ActionSheetComponent;
- @ViewChild('android') androidAS: ActionSheetComponent;
- @ViewChild('auto') autoAS: ActionSheetComponent;
-
- menus: any[] = [
- { text: '菜单一', value: 'test', other: 1 },
- { text: '菜单三', value: 'test' }
- ];
- config: ActionSheetConfig = {
- title: '这是一段标题'
- };
-
- constructor(private srv: ActionSheetService) { }
-
- onShow(type: SkinType) {
- this.config.skin = type;
- this.config = Object.assign({}, this.config);
- setTimeout(() => {
- (this[`${type}AS`]).show().subscribe((res: any) => {
- console.log('type', res);
- });
- }, 10);
- }
-
- onShowBySrv(type: SkinType, backdrop: boolean = true) {
- this.config.skin = type;
- this.config.backdrop = backdrop;
- this.srv.show(this.menus, this.config).subscribe((res: any) => {
- console.log(res);
- });
- }
-
- ngOnDestroy() {
- this.srv.destroyAll();
- }
-
+ @ViewChild('ios') iosAS: ActionSheetComponent;
+ @ViewChild('android') androidAS: ActionSheetComponent;
+ @ViewChild('auto') autoAS: ActionSheetComponent;
+
+ menus: any[] = [{ text: '菜单一', value: 'test', other: 1 }, { text: '菜单三', value: 'test' }];
+ config: ActionSheetConfig = {
+ title: '这是一段标题',
+ } as ActionSheetConfig;
+
+ constructor(private srv: ActionSheetService) {}
+
+ onShow(type: SkinType) {
+ this.config.skin = type;
+ this.config = { ...this.config };
+ setTimeout(() => {
+ (this[`${type}AS`] as ActionSheetComponent).show().subscribe((res: any) => {
+ console.log('type', res);
+ });
+ }, 10);
+ }
+
+ onShowBySrv(type: SkinType, backdrop: boolean = true) {
+ this.config.skin = type;
+ this.config.backdrop = backdrop;
+ this.srv.show(this.menus, this.config).subscribe((res: any) => {
+ console.log(res);
+ });
+ }
+
+ ngOnDestroy() {
+ this.srv.destroyAll();
+ }
}
diff --git a/src/app/example/article/article.component.html b/src/app/example/article/article.component.html
index a774918..ce2f999 100644
--- a/src/app/example/article/article.component.html
+++ b/src/app/example/article/article.component.html
@@ -1,25 +1,28 @@
-
- 大标题
-
- 章标题
-
- 1.1 节标题
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
-
-
- 1.2 节标题
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum.
-
-
-
-
+
+ 大标题
+
+ 章标题
+
+ 1.1 节标题
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat.
+
+
+
+
+
+ 1.2 节标题
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
diff --git a/src/app/example/article/article.component.ts b/src/app/example/article/article.component.ts
index 75f28df..1fd8308 100644
--- a/src/app/example/article/article.component.ts
+++ b/src/app/example/article/article.component.ts
@@ -1,9 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-article',
- templateUrl: './article.component.html',
- styleUrls: [ './article.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-article',
+ templateUrl: './article.component.html',
+ styleUrls: ['./article.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class ArticleComponent {}
+export class ArticleComponent {}
diff --git a/src/app/example/badge/badge.component.html b/src/app/example/badge/badge.component.html
index 123309f..49d9647 100644
--- a/src/app/example/badge/badge.component.html
+++ b/src/app/example/badge/badge.component.html
@@ -1,47 +1,46 @@
-
- 新消息提示跟摘要信息后，统一在列表右侧
-
-
+
新消息提示跟摘要信息后，统一在列表右侧
+
+
-
未读数红点跟在主题信息后，统一在列表左侧
-
-
-
-
-
8
-
-
-
-
-
-
+
+
未读数红点跟在主题信息后，统一在列表左侧
+
+
+
+
+
8
+
+
+
+
+
+
diff --git a/src/app/example/badge/badge.component.ts b/src/app/example/badge/badge.component.ts
index 4f423d7..334a86f 100644
--- a/src/app/example/badge/badge.component.ts
+++ b/src/app/example/badge/badge.component.ts
@@ -1,9 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-badge',
- templateUrl: './badge.component.html',
- styleUrls: [ './badge.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-badge',
+ templateUrl: './badge.component.html',
+ styleUrls: ['./badge.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class BadgeComponent {}
+export class BadgeComponent {}
diff --git a/src/app/example/button/button.component.html b/src/app/example/button/button.component.html
index 71807c3..bf279e5 100644
--- a/src/app/example/button/button.component.html
+++ b/src/app/example/button/button.component.html
@@ -1,29 +1,67 @@
-
-
- 页面主操作 Normal
- 页面主操作 Loading
- 页面主操作 Disabled
- 页面次操作 Normal
- 页面次操作 Loading
- 页面次操作 Disabled
- 页面次操作 Normal
- 页面次操作 Loading
- 页面次操作 Disabled
+
+
+ 页面主操作
+ 页面主操作
+ 页面主操作
+ 页面次要操作
+
+ 页面次要操作
+
+
+ 页面次要操作
+
+ 警告类操作
+
+ 警告类操作
+
+
+ 警告类操作
+
+
-
+
+ 按钮
+
+ 按钮
+
+ 按钮
+ 按钮
+ 按钮
+
+ 按钮
+
+
+ 按钮
+
+
+ 按钮
+
+
diff --git a/src/app/example/button/button.component.scss b/src/app/example/button/button.component.scss
index 417c871..3fcb4f3 100644
--- a/src/app/example/button/button.component.scss
+++ b/src/app/example/button/button.component.scss
@@ -1,5 +1,8 @@
.page.button .button-sp-area {
- margin: 0 auto;
+ margin: 15px auto;
+ padding: 15px;
+ text-align: center;
+ &.cell {
padding: 15px 0;
- width: 60%;
+ }
}
diff --git a/src/app/example/button/button.component.ts b/src/app/example/button/button.component.ts
index e3eed10..04b2d40 100644
--- a/src/app/example/button/button.component.ts
+++ b/src/app/example/button/button.component.ts
@@ -1,13 +1,13 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-button',
- templateUrl: './button.component.html',
- styleUrls: [ './button.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-button',
+ templateUrl: './button.component.html',
+ styleUrls: ['./button.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class ButtonComponent {
- disabled: boolean = true;
- loading: boolean = true;
- mini: boolean = true;
+ disabled: boolean = true;
+ loading: boolean = true;
+ mini: boolean = true;
}
diff --git a/src/app/example/chart-g2/chart-g2.component.html b/src/app/example/chart-g2/chart-g2.component.html
index 9bd7d53..7ca38fc 100644
--- a/src/app/example/chart-g2/chart-g2.component.html
+++ b/src/app/example/chart-g2/chart-g2.component.html
@@ -1,18 +1,10 @@
-
+
+ 快速上手
+ 快速上手
- 平滑折线图
- 仪表盘
- 平滑折线图
+ 仪表盘
+
diff --git a/src/app/example/chart-g2/chart-g2.component.ts b/src/app/example/chart-g2/chart-g2.component.ts
index 82ed22c..b5fe919 100644
--- a/src/app/example/chart-g2/chart-g2.component.ts
+++ b/src/app/example/chart-g2/chart-g2.component.ts
@@ -1,189 +1,194 @@
-import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ChartG2Directive } from 'ngx-weui/chart-g2'
+import { ChartG2Directive } from 'ngx-weui/chart-g2';
@Component({
- selector: 'example-chart-g2',
- templateUrl: './chart-g2.component.html',
- styleUrls: ['./chart-g2.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-chart-g2',
+ templateUrl: './chart-g2.component.html',
+ styleUrls: ['./chart-g2.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DemoChartG2Component {
- @ViewChild('c1') c1: ChartG2Directive;
- renderC1() {
- const chart = this.c1.chart;
- chart.source([
- { "tem": 10, "city": "tokyo" },
- { "tem": 4, "city": "newYork" },
- { "tem": 3, "city": "berlin" }
- ]);
- chart.interval().position('city*tem').color('city');
- chart.render();
- }
+ @ViewChild('c1') c1: ChartG2Directive;
+ renderC1() {
+ const chart = this.c1.chart;
+ chart.source([{ tem: 10, city: 'tokyo' }, { tem: 4, city: 'newYork' }, { tem: 3, city: 'berlin' }]);
+ chart
+ .interval()
+ .position('city*tem')
+ .color('city');
+ chart.render();
+ }
- @ViewChild('c2') c2: ChartG2Directive;
- renderC2() {
- let data = [
- { "time": '周一', "tem": 10, "city": "beijing" },
- { "time": '周二', "tem": 22, "city": "beijing" },
- { "time": '周三', "tem": 20, "city": "beijing" },
- { "time": '周四', "tem": 26, "city": "beijing" },
- { "time": '周五', "tem": 20, "city": "beijing" },
- { "time": '周六', "tem": 26, "city": "beijing" },
- { "time": '周日', "tem": 28, "city": "beijing" },
- { "time": '周一', "tem": 5, "city": "newYork" },
- { "time": '周二', "tem": 12, "city": "newYork" },
- { "time": '周三', "tem": 26, "city": "newYork" },
- { "time": '周四', "tem": 20, "city": "newYork" },
- { "time": '周五', "tem": 28, "city": "newYork" },
- { "time": '周六', "tem": 26, "city": "newYork" },
- { "time": '周日', "tem": 20, "city": "newYork" }
- ];
- let defs = {
- time: {
- tickCount: 7,
- range: [0, 1]
- },
- tem: {
- tickCount: 5,
- min: 0
- }
- };
- //配置time刻度文字样式
- let label = {
- fill: '#979797',
- font: '14px san-serif',
- offset: 6
- };
+ @ViewChild('c2') c2: ChartG2Directive;
+ renderC2() {
+ const data = [
+ { time: '周一', tem: 10, city: 'beijing' },
+ { time: '周二', tem: 22, city: 'beijing' },
+ { time: '周三', tem: 20, city: 'beijing' },
+ { time: '周四', tem: 26, city: 'beijing' },
+ { time: '周五', tem: 20, city: 'beijing' },
+ { time: '周六', tem: 26, city: 'beijing' },
+ { time: '周日', tem: 28, city: 'beijing' },
+ { time: '周一', tem: 5, city: 'newYork' },
+ { time: '周二', tem: 12, city: 'newYork' },
+ { time: '周三', tem: 26, city: 'newYork' },
+ { time: '周四', tem: 20, city: 'newYork' },
+ { time: '周五', tem: 28, city: 'newYork' },
+ { time: '周六', tem: 26, city: 'newYork' },
+ { time: '周日', tem: 20, city: 'newYork' },
+ ];
+ const defs = {
+ time: {
+ tickCount: 7,
+ range: [0, 1],
+ },
+ tem: {
+ tickCount: 5,
+ min: 0,
+ },
+ };
+ // 配置time刻度文字样式
+ const label = {
+ fill: '#979797',
+ font: '14px san-serif',
+ offset: 6,
+ };
- let Util = this.c2.GM.Util;
- this.c2.chart.axis('time', {
- label: function (text, index, total) {
- var cfg = Util.mix({}, label);
- // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
- if (index === 0) {
- cfg.textAlign = 'start';
- }
- if (index > 0 && index === total - 1) {
- cfg.textAlign = 'end';
- }
- return cfg;
- }
- });
- this.c2.chart.axis('tem', {
- label: {
- fontSize: 14
- }
- });
- this.c2.chart.source(data, defs);
- this.c2.chart.line().position('time*tem').color('city').shape('smooth');
- this.c2.chart.render();
- }
+ const Util = this.c2.GM.Util;
+ this.c2.chart.axis('time', {
+ label(_text, index, total) {
+ const cfg = Util.mix({}, label);
+ // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
+ if (index === 0) {
+ cfg.textAlign = 'start';
+ }
+ if (index > 0 && index === total - 1) {
+ cfg.textAlign = 'end';
+ }
+ return cfg;
+ },
+ });
+ this.c2.chart.axis('tem', {
+ label: {
+ fontSize: 14,
+ },
+ });
+ this.c2.chart.source(data, defs);
+ this.c2.chart
+ .line()
+ .position('time*tem')
+ .color('city')
+ .shape('smooth');
+ this.c2.chart.render();
+ }
- @ViewChild('c3') c3: ChartG2Directive;
- renderC3() {
- this.c3.GM.Global.pixelRatio = 2;//双精度
- var Shape = this.c3.GM.Shape;
- var G = this.c3.GM.G;
- var data = [{ pointer: '当前收益', value: 5, length: 2, y: 1.05 }];
- //自定义绘制数据的的形状
- Shape.registShape('point', 'dashBoard', {
- getShapePoints: function (cfg) {
- var x = cfg.x;
- var y = cfg.y;
- return [
- { x: x, y: y },
- { x: x, y: 0.5 }
- ]
- },
- drawShape: function (cfg, canvas) {
- var point1 = cfg.points[0];
- var point2 = cfg.points[1];
- point1 = this.parsePoint(point1);
- point2 = this.parsePoint(point2);
- G.drawLines([point1, point2], canvas, {
- stroke: '#18b7d6',
- lineWidth: 2
- });
- var text = cfg.origin._origin.value.toString();
- G.drawText(text + '%', cfg.center, canvas, {
- fillStyle: '#f75b5b',
- font: '30px Arial',
- textAlign: 'center',
- textBaseline: 'bottom'
- });
- G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, {
- fillStyle: '#ccc',
- textAlign: 'center',
- textBaseline: 'top'
- });
- }
- });
- var chart = this.c3.chart;
- chart.source(data, {
- 'value': { type: 'linear', min: 0, max: 15, tickCount: 6 },
- 'length': { type: 'linear', min: 0, max: 10 },
- y: { type: 'linear', min: 0, max: 1 }
- });
- chart.coord('polar', {
- inner: 0,
- startAngle: -1.25 * Math.PI,
- endAngle: 0.25 * Math.PI
- });
- //配置value轴刻度线
- chart.axis('value', {
- tickLine: {
- strokeStyle: '#b9e6ef',
- lineWidth: 2,
- value: -5
- },
- label: null,
- grid: null,
- line: null
- });
- chart.axis('y', false);
- //绘制仪表盘辅助元素
- chart.guide().arc([0, 1.05], [4.8, 1.05], {
- strokeStyle: '#18b7d6',
- lineWidth: 5,
- lineCap: 'round'
- });
- chart.guide().arc([5.2, 1.05], [9.8, 1.05], {
- strokeStyle: '#ccc',
- lineWidth: 5,
- lineCap: 'round'
- });
- chart.guide().arc([10.2, 1.05], [15, 1.05], {
- strokeStyle: '#ccc',
- lineWidth: 5,
- lineCap: 'round'
- });
- chart.guide().arc([0, 1.2], [15, 1.2], {
- strokeStyle: '#ccc',
- lineWidth: 1
- });
- chart.guide().text([-0.5, 1.3], '0.00%', {
- fillStyle: '#ccc',
- font: '18px Arial',
- textAlign: 'center'
+ @ViewChild('c3') c3: ChartG2Directive;
+ renderC3() {
+ this.c3.GM.Global.pixelRatio = 2; // 双精度
+ const Shape = this.c3.GM.Shape;
+ const G = this.c3.GM.G;
+ const data = [{ pointer: '当前收益', value: 5, length: 2, y: 1.05 }];
+ // 自定义绘制数据的的形状
+ Shape.registShape('point', 'dashBoard', {
+ getShapePoints(cfg) {
+ const x = cfg.x;
+ const y = cfg.y;
+ return [{ x, y }, { x, y: 0.5 }];
+ },
+ drawShape(cfg, canvas) {
+ let point1 = cfg.points[0];
+ let point2 = cfg.points[1];
+ point1 = this.parsePoint(point1);
+ point2 = this.parsePoint(point2);
+ G.drawLines([point1, point2], canvas, {
+ stroke: '#18b7d6',
+ lineWidth: 2,
});
- chart.guide().text([7.5, 0.7], '7.50%', {
- fillStyle: '#ccc',
- font: '18px Arial',
- textAlign: 'center'
+ const text = cfg.origin._origin.value.toString();
+ G.drawText(text + '%', cfg.center, canvas, {
+ fillStyle: '#f75b5b',
+ font: '30px Arial',
+ textAlign: 'center',
+ textBaseline: 'bottom',
});
- chart.guide().text([15.5, 1.3], '15.00%', {
- fillStyle: '#ccc',
- font: '18px Arial',
- textAlign: 'center'
+ G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, {
+ fillStyle: '#ccc',
+ textAlign: 'center',
+ textBaseline: 'top',
});
- chart.point().position('value*y').size('length').color('#18b7d6').shape('dashBoard');
- chart.render();
- }
+ },
+ });
+ const chart = this.c3.chart;
+ chart.source(data, {
+ value: { type: 'linear', min: 0, max: 15, tickCount: 6 },
+ length: { type: 'linear', min: 0, max: 10 },
+ y: { type: 'linear', min: 0, max: 1 },
+ });
+ chart.coord('polar', {
+ inner: 0,
+ startAngle: -1.25 * Math.PI,
+ endAngle: 0.25 * Math.PI,
+ });
+ // 配置value轴刻度线
+ chart.axis('value', {
+ tickLine: {
+ strokeStyle: '#b9e6ef',
+ lineWidth: 2,
+ value: -5,
+ },
+ label: null,
+ grid: null,
+ line: null,
+ });
+ chart.axis('y', false);
+ // 绘制仪表盘辅助元素
+ chart.guide().arc([0, 1.05], [4.8, 1.05], {
+ strokeStyle: '#18b7d6',
+ lineWidth: 5,
+ lineCap: 'round',
+ });
+ chart.guide().arc([5.2, 1.05], [9.8, 1.05], {
+ strokeStyle: '#ccc',
+ lineWidth: 5,
+ lineCap: 'round',
+ });
+ chart.guide().arc([10.2, 1.05], [15, 1.05], {
+ strokeStyle: '#ccc',
+ lineWidth: 5,
+ lineCap: 'round',
+ });
+ chart.guide().arc([0, 1.2], [15, 1.2], {
+ strokeStyle: '#ccc',
+ lineWidth: 1,
+ });
+ chart.guide().text([-0.5, 1.3], '0.00%', {
+ fillStyle: '#ccc',
+ font: '18px Arial',
+ textAlign: 'center',
+ });
+ chart.guide().text([7.5, 0.7], '7.50%', {
+ fillStyle: '#ccc',
+ font: '18px Arial',
+ textAlign: 'center',
+ });
+ chart.guide().text([15.5, 1.3], '15.00%', {
+ fillStyle: '#ccc',
+ font: '18px Arial',
+ textAlign: 'center',
+ });
+ chart
+ .point()
+ .position('value*y')
+ .size('length')
+ .color('#18b7d6')
+ .shape('dashBoard');
+ chart.render();
+ }
- ngAfterViewInit() {
- this.renderC1();
- this.renderC2();
- this.renderC3();
- }
+ ngAfterViewInit() {
+ this.renderC1();
+ this.renderC2();
+ this.renderC3();
+ }
}
diff --git a/src/app/example/container.component.ts b/src/app/example/container.component.ts
index 8e700d6..3f5aef2 100644
--- a/src/app/example/container.component.ts
+++ b/src/app/example/container.component.ts
@@ -1,57 +1,55 @@
import { Component, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
@Component({
- selector: 'component-container',
- template: `
-
-
- `
+ selector: 'component-container',
+ template: `
+
+
+ `,
})
export class ContainerComponent {
-
- @Input() url: string = 'example';
- @Input() menu: any = {};
+ @Input() url: string = 'example';
+ @Input() menu: any = {};
}
diff --git a/src/app/example/countdown/countdown.component.html b/src/app/example/countdown/countdown.component.html
index 5e7c5ea..456f1d0 100644
--- a/src/app/example/countdown/countdown.component.html
+++ b/src/app/example/countdown/countdown.component.html
@@ -1,7 +1,3 @@
-
-
-
+
diff --git a/src/app/example/countdown/countdown.component.ts b/src/app/example/countdown/countdown.component.ts
index 27f2087..91aded0 100644
--- a/src/app/example/countdown/countdown.component.ts
+++ b/src/app/example/countdown/countdown.component.ts
@@ -1,10 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-countdown',
- templateUrl: './countdown.component.html',
- styleUrls: [ './countdown.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-countdown',
+ templateUrl: './countdown.component.html',
+ styleUrls: ['./countdown.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class CountdownComponent {
-}
+export class CountdownComponent {}
diff --git a/src/app/example/dialog/dialog.component.html b/src/app/example/dialog/dialog.component.html
index 495a605..7204aa4 100644
--- a/src/app/example/dialog/dialog.component.html
+++ b/src/app/example/dialog/dialog.component.html
@@ -1,28 +1,28 @@
+ 使用组件形式
+ iOS Dialog样式一
+ iOS Dialog样式二
+ iOS Dialog样式三
+ Android Dialog样式一
+ Android Dialog样式二
+ Android Dialog样式三
+ Auto Dialog样式一
+ Auto Dialog样式二
+ Auto Dialog样式三
+ 使用组件Prompt形式
+ {{ i }}框
+ 使用Service形式
+ iOS Dialog
+ Android Dialog
+ 自动形式（且点背景可关闭）
+ 内容为HTML
+ 使用Service Prompt形式
+
+ {{ i }}框
+
- 使用组件形式
- iOS Dialog样式一
- iOS Dialog样式二
- iOS Dialog样式三
- Android Dialog样式一
- Android Dialog样式二
- Android Dialog样式三
- Auto Dialog样式一
- Auto Dialog样式二
- Auto Dialog样式三
- 使用组件Prompt形式
- {{i}}框
- 使用Service形式
- iOS Dialog
- Android Dialog
- 自动形式（且点背景可关闭）
- 内容为HTML
- 使用Service Prompt形式
- {{i}}框
-
-
-
diff --git a/src/app/example/dialog/dialog.component.scss b/src/app/example/dialog/dialog.component.scss
index 02e291d..12d986a 100644
--- a/src/app/example/dialog/dialog.component.scss
+++ b/src/app/example/dialog/dialog.component.scss
@@ -1,9 +1,10 @@
.weui-dialog__prompt {
- .weui-dialog__bd {
- font-size: 12px;
- }
- .weui-cells, .weui-dialog__error {
- margin-top: 0;
- margin-bottom: 1.17647059em;
- }
+ .weui-dialog__bd {
+ font-size: 12px;
+ }
+ .weui-cells,
+ .weui-dialog__error {
+ margin-top: 0;
+ margin-bottom: 1.17647059em;
+ }
}
diff --git a/src/app/example/dialog/dialog.component.ts b/src/app/example/dialog/dialog.component.ts
index a543d56..59fc961 100644
--- a/src/app/example/dialog/dialog.component.ts
+++ b/src/app/example/dialog/dialog.component.ts
@@ -1,146 +1,154 @@
-import { Component, ViewEncapsulation, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { SkinType, InputType } from 'ngx-weui';
-import { DialogService, DialogConfig, DialogComponent } from 'ngx-weui/dialog';
+import { InputType, SkinType } from 'ngx-weui';
+import { DialogComponent, DialogConfig, DialogService } from 'ngx-weui/dialog';
import { ToastService } from 'ngx-weui/toast';
@Component({
- selector: 'example-dialog',
- templateUrl: './dialog.component.html',
- styleUrls: ['./dialog.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-dialog',
+ templateUrl: './dialog.component.html',
+ styleUrls: ['./dialog.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DemoDialogComponent implements OnDestroy {
+ @ViewChild('ios') iosAS: DialogComponent;
+ @ViewChild('android') androidAS: DialogComponent;
+ @ViewChild('auto') autoAS: DialogComponent;
- @ViewChild('ios') iosAS: DialogComponent;
- @ViewChild('android') androidAS: DialogComponent;
- @ViewChild('auto') autoAS: DialogComponent;
+ private DEFCONFIG: DialogConfig = {
+ title: '弹窗标题',
+ content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
+ cancel: '辅助操作',
+ confirm: '主操作',
+ inputPlaceholder: '必填项',
+ inputError: '请填写或选择项',
+ inputRequired: true,
+ inputAttributes: {
+ maxlength: 140,
+ cn: 2,
+ },
+ inputOptions: [
+ { text: '请选择' },
+ { text: '杜蕾斯', value: 'durex', other: 1 },
+ { text: '杰士邦', value: 'jissbon' },
+ { text: '多乐士', value: 'donless' },
+ { text: '处男', value: 'first' },
+ ],
+ } as DialogConfig;
+ config: DialogConfig = {};
- private DEFCONFIG: DialogConfig = {
- title: '弹窗标题',
- content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
- cancel: '辅助操作',
- confirm: '主操作',
- inputPlaceholder: '必填项',
- inputError: '请填写或选择项',
- inputRequired: true,
- inputAttributes: {
- maxlength: 140,
- cn: 2
- },
- inputOptions: [
- { text: '请选择' },
- { text: '杜蕾斯', value: 'durex', other: 1 },
- { text: '杰士邦', value: 'jissbon' },
- { text: '多乐士', value: 'donless' },
- { text: '处男', value: 'first' }
- ]
- };
- config: DialogConfig = {};
-
- constructor(private srv: DialogService, private toastService: ToastService) {
- }
+ constructor(private srv: DialogService, private toastService: ToastService) {}
- onShow(type: SkinType, style: 1 | 2 | 3) {
- this.config = Object.assign({}, this.DEFCONFIG, {
- skin: type,
- cancel: null,
- confirm: null,
- btns: null,
- content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内'
- });
- switch (style) {
- case 1:
- this.config.cancel = '辅助操作';
- this.config.confirm = '主操作';
- break;
- case 2:
- this.config.confirm = '主操作';
- break;
- case 3:
- this.config.btns = [
- { text: '否', type: 'default', value: 1 },
- { text: '不确定', type: 'default', value: 2 },
- { text: '是', type: 'primary', value: 3 }
- ];
- break;
- }
- setTimeout(() => {
- (this[`${type}AS`]).show().subscribe((res: any) => {
- console.log('type', res);
- });
- }, 10);
- return false;
+ onShow(type: SkinType, style: 1 | 2 | 3) {
+ this.config = {
+ ...this.DEFCONFIG,
+ ...{
+ skin: type,
+ cancel: undefined,
+ confirm: undefined,
+ btns: undefined,
+ content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
+ },
+ } as DialogConfig;
+ switch (style) {
+ case 1:
+ this.config.cancel = '辅助操作';
+ this.config.confirm = '主操作';
+ break;
+ case 2:
+ this.config.confirm = '主操作';
+ break;
+ case 3:
+ this.config.btns = [
+ { text: '否', type: 'default', value: 1 },
+ { text: '不确定', type: 'default', value: 2 },
+ { text: '是', type: 'primary', value: 3 },
+ ];
+ break;
}
+ setTimeout(() => {
+ (this[`${type}AS`] as DialogComponent).show().subscribe((res: any) => {
+ console.log('type', res);
+ });
+ }, 10);
+ return false;
+ }
- onShowBySrv(type: SkinType, backdrop: boolean = true) {
- this.config = Object.assign({}, this.DEFCONFIG, {
- skin: type,
- backdrop: backdrop,
- content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内'
- });
- this.srv.show(this.config).subscribe((res: any) => {
- console.log(res);
- });
- return false;
- }
+ onShowBySrv(type: SkinType, backdrop: boolean = true) {
+ this.config = {
+ ...this.DEFCONFIG,
+ ...({
+ skin: type,
+ backdrop,
+ content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
+ } as DialogConfig),
+ };
+ this.srv.show(this.config).subscribe((res: any) => {
+ console.log(res);
+ });
+ return false;
+ }
- onShowOfHtml() {
- this.config = Object.assign({}, this.DEFCONFIG, {
- content: `
+ onShowOfHtml() {
+ this.config = {
+ ...this.DEFCONFIG,
+ ...({
+ content: `
这是一段HTML加粗
这是一段HTML加粗
- `
- });
- this.srv.show(this.config).subscribe((res: any) => {
- console.log(res);
- });
- return false;
- }
+ `,
+ } as DialogConfig),
+ };
+ this.srv.show(this.config).subscribe((res: any) => {
+ console.log(res);
+ });
+ return false;
+ }
- promptValue: any;
- promptTypes: string[] = ['text', 'email', 'url', 'range', 'textarea', 'select', 'radio', 'checkbox'];
- onShowPrompt(inputType: InputType, useSrv: boolean = false) {
- const cog = Object.assign({}, this.DEFCONFIG, {
- skin: 'auto',
- type: 'prompt',
- confirm: '确认',
- cancel: '取消',
- input: inputType,
- inputValue: undefined,
- inputRegex: null
+ promptValue: any;
+ promptTypes: string[] = ['text', 'email', 'url', 'range', 'textarea', 'select', 'radio', 'checkbox'];
+ onShowPrompt(inputType: InputType, useSrv: boolean = false) {
+ const cog = {
+ ...this.DEFCONFIG,
+ ...({
+ skin: 'auto',
+ type: 'prompt',
+ confirm: '确认',
+ cancel: '取消',
+ input: inputType,
+ inputValue: undefined,
+ inputRegex: undefined,
+ } as DialogConfig),
+ } as DialogConfig;
+ if (inputType === 'range') {
+ cog.inputValue = 10;
+ }
+ if (inputType === 'select') {
+ cog.inputValue = cog.inputOptions![0];
+ }
+ if (inputType === 'checkbox') {
+ cog.inputValue = cog.inputOptions!.slice(1, 3);
+ }
+ if (useSrv) {
+ setTimeout(() => {
+ this.srv.show(cog).subscribe((res: any) => {
+ if (res.result) this.toastService.show(`结果：${JSON.stringify(res.result)}`);
+ console.log('prompt from service', res);
});
- if (inputType === 'range') {
- cog.inputValue = 10;
- }
- if (inputType === 'select') {
- cog.inputValue = cog.inputOptions[0];
- }
- if (inputType === 'checkbox') {
- cog.inputValue = cog.inputOptions.slice(1, 3);
+ });
+ } else {
+ this.config = cog;
+ this.autoAS.show().subscribe((res: any) => {
+ if (res.result) {
+ this.toastService.show(`结果：${JSON.stringify(res.result)}`);
}
- if (useSrv) {
- setTimeout(() => {
- this.srv.show(cog).subscribe((res: any) => {
- if (res.result)
- this.toastService.show(`结果：${JSON.stringify(res.result)}`);
- console.log('prompt from service', res);
- });
- });
- } else {
- this.config = cog;
- this.autoAS.show().subscribe((res: any) => {
- if (res.result) {
- this.toastService.show(`结果：${JSON.stringify(res.result)}`);
- }
- console.log('prompt from component', res);
- });
- }
- return false;
- }
-
- ngOnDestroy() {
- this.srv.destroyAll();
+ console.log('prompt from component', res);
+ });
}
+ return false;
+ }
+ ngOnDestroy() {
+ this.srv.destroyAll();
+ }
}
diff --git a/src/app/example/example.module.ts b/src/app/example/example.module.ts
index c661781..7a2a5b1 100644
--- a/src/app/example/example.module.ts
+++ b/src/app/example/example.module.ts
@@ -1,74 +1,103 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
-import { ContainerComponent } from './container.component';
-import { PageComponent } from './page/page.component';
import { DemoAccordionComponent } from './accordion/accordion.component';
-import { ButtonComponent } from './button/button.component';
-import { ListComponent } from './list/list.component';
-import { InputComponent } from './input/input.component';
-import { SliderComponent } from './slider/slider.component';
-import { DemoUploaderComponent } from './uploader/uploader.component';
import { DemoActionSheetComponent } from './actionsheet/actionsheet.component';
-import { DemoDialogComponent } from './dialog/dialog.component';
import { ArticleComponent } from './article/article.component';
-import { FlexComponent } from './flex/flex.component';
import { BadgeComponent } from './badge/badge.component';
+import { ButtonComponent } from './button/button.component';
+import { DemoChartG2Component } from './chart-g2/chart-g2.component';
+import { ContainerComponent } from './container.component';
+import { CountdownComponent } from './countdown/countdown.component';
+import { DemoDialogComponent } from './dialog/dialog.component';
+import { FlexComponent } from './flex/flex.component';
import { FooterComponent } from './footer/footer.component';
+import { DemoGalleryComponent } from './gallery/gallery.component';
+import { GesturePasswordComponent } from './gesture-password/gesture-password.component';
import { GridComponent } from './grid/grid.component';
import { IconsComponent } from './icons/icons.component';
-import { PanelComponent } from './panel/panel.component';
-import { PreviewComponent } from './preview/preview.component';
+import { DemoInfiniteLoaderComponent } from './infiniteloader/infiniteloader.component';
+import { InputComponent } from './input/input.component';
+import { JWeiXinComponent } from './jweixin/jweixin.component';
+import { ListComponent } from './list/list.component';
import { DemoLoadmoreComponent } from './loadmore/loadmore.component';
-import { DemoProgressComponent } from './progress/progress.component';
-import { DemoGalleryComponent } from './gallery/gallery.component';
-import { DemoPickerComponent } from './picker/picker.component';
-import { DemoSearchBarComponent } from './searchbar/searchbar.component';
-import { DemoNavbarComponent } from './navbar/navbar.component';
-import { DemoTabbarComponent } from './tabbar/tabbar.component';
-import { DemoToastComponent } from './toast/toast.component';
-import { DemoToptipsComponent } from './toptips/toptips.component';
-import { DemoMsgComponent } from './msg/msg.component';
+import { DemoMapQQComponent } from './map-qq/map-qq.component';
+import { DemoMaskComponent } from './mask/mask.component';
import { DemoMsgFailComponent } from './msg/fail.component';
+import { DemoMsgComponent } from './msg/msg.component';
import { DemoMsgSuccessComponent } from './msg/success.component';
+import { DemoNavbarComponent } from './navbar/navbar.component';
+import { PageComponent } from './page/page.component';
+import { DemoPaginationComponent } from './pagination/pagination.component';
+import { PanelComponent } from './panel/panel.component';
+import { DemoPickerComponent } from './picker/picker.component';
import { DemoPopupComponent } from './popup/popup.component';
+import { PreviewComponent } from './preview/preview.component';
+import { DemoProgressComponent } from './progress/progress.component';
import { DemoPTRComponent } from './ptr/ptr.component';
-import { DemoInfiniteLoaderComponent } from './infiniteloader/infiniteloader.component';
-import { DemoSidebarComponent } from './sidebar/sidebar.component';
-import { DemoSwiperComponent } from './swiper/swiper.component';
-import { CountdownComponent } from './countdown/countdown.component';
-import { GesturePasswordComponent } from './gesture-password/gesture-password.component';
-import { DemoChartG2Component } from './chart-g2/chart-g2.component';
-import { DemoMapQQComponent } from './map-qq/map-qq.component';
-import { JWeiXinComponent } from './jweixin/jweixin.component';
-import { DemoMaskComponent } from './mask/mask.component';
import { DemoRatingComponent } from './rating/rating.component';
+import { DemoSearchBarComponent } from './searchbar/searchbar.component';
+import { DemoSidebarComponent } from './sidebar/sidebar.component';
+import { SliderComponent } from './slider/slider.component';
import { DemoStepperComponent } from './stepper/stepper.component';
-import { DemoPaginationComponent } from './pagination/pagination.component';
+import { DemoSwiperComponent } from './swiper/swiper.component';
+import { DemoTabbarComponent } from './tabbar/tabbar.component';
+import { DemoToastComponent } from './toast/toast.component';
+import { DemoToptipsComponent } from './toptips/toptips.component';
+import { DemoUploaderComponent } from './uploader/uploader.component';
const COMPONENTS = [
- ContainerComponent, PageComponent, DemoAccordionComponent,
- ButtonComponent, InputComponent, ListComponent, SliderComponent,
- DemoUploaderComponent, DemoActionSheetComponent, DemoDialogComponent, ArticleComponent, FlexComponent,
- BadgeComponent, FooterComponent, GridComponent, IconsComponent, PanelComponent, PreviewComponent,
- DemoLoadmoreComponent, DemoProgressComponent, DemoGalleryComponent, DemoPickerComponent,
- DemoSearchBarComponent, DemoNavbarComponent, DemoTabbarComponent, DemoToastComponent,
- DemoToptipsComponent, DemoMsgComponent, DemoMsgFailComponent, DemoMsgSuccessComponent,
- DemoPopupComponent, DemoPTRComponent, DemoInfiniteLoaderComponent, DemoSidebarComponent,
- DemoSwiperComponent, CountdownComponent, GesturePasswordComponent, DemoChartG2Component,
- DemoMapQQComponent, JWeiXinComponent, DemoMaskComponent, DemoRatingComponent, DemoStepperComponent,
- DemoPaginationComponent
+ ContainerComponent,
+ PageComponent,
+ DemoAccordionComponent,
+ ButtonComponent,
+ InputComponent,
+ ListComponent,
+ SliderComponent,
+ DemoUploaderComponent,
+ DemoActionSheetComponent,
+ DemoDialogComponent,
+ ArticleComponent,
+ FlexComponent,
+ BadgeComponent,
+ FooterComponent,
+ GridComponent,
+ IconsComponent,
+ PanelComponent,
+ PreviewComponent,
+ DemoLoadmoreComponent,
+ DemoProgressComponent,
+ DemoGalleryComponent,
+ DemoPickerComponent,
+ DemoSearchBarComponent,
+ DemoNavbarComponent,
+ DemoTabbarComponent,
+ DemoToastComponent,
+ DemoToptipsComponent,
+ DemoMsgComponent,
+ DemoMsgFailComponent,
+ DemoMsgSuccessComponent,
+ DemoPopupComponent,
+ DemoPTRComponent,
+ DemoInfiniteLoaderComponent,
+ DemoSidebarComponent,
+ DemoSwiperComponent,
+ CountdownComponent,
+ GesturePasswordComponent,
+ DemoChartG2Component,
+ DemoMapQQComponent,
+ JWeiXinComponent,
+ DemoMaskComponent,
+ DemoRatingComponent,
+ DemoStepperComponent,
+ DemoPaginationComponent,
];
@NgModule({
- imports: [
- SharedModule
- ],
- declarations: COMPONENTS,
- entryComponents: [
- PageComponent
- ],
- exports: COMPONENTS
+ imports: [SharedModule],
+ declarations: COMPONENTS,
+ entryComponents: [PageComponent],
+ exports: COMPONENTS,
})
export class ExampleCoreModule {}
diff --git a/src/app/example/flex/flex.component.html b/src/app/example/flex/flex.component.html
index 0b9043a..fd3e6ec 100644
--- a/src/app/example/flex/flex.component.html
+++ b/src/app/example/flex/flex.component.html
@@ -1,53 +1,51 @@
-
-
-
-
-
-
-
+
+
+
+
+
diff --git a/src/app/example/flex/flex.component.scss b/src/app/example/flex/flex.component.scss
index af7d3ab..f79d6f7 100644
--- a/src/app/example/flex/flex.component.scss
+++ b/src/app/example/flex/flex.component.scss
@@ -1,8 +1,8 @@
.page.flex .placeholder {
- background-color: #ebebeb;
- height: 2.3em;
- line-height: 2.3em;
- text-align: center;
- margin: 5px;
- color: #cfcfcf;
+ height: 2.3em;
+ margin: 5px;
+ color: #cfcfcf;
+ line-height: 2.3em;
+ text-align: center;
+ background-color: #ebebeb;
}
diff --git a/src/app/example/flex/flex.component.ts b/src/app/example/flex/flex.component.ts
index b8f90dd..394ca79 100644
--- a/src/app/example/flex/flex.component.ts
+++ b/src/app/example/flex/flex.component.ts
@@ -1,9 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-flex',
- templateUrl: './flex.component.html',
- styleUrls: [ './flex.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-flex',
+ templateUrl: './flex.component.html',
+ styleUrls: ['./flex.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class FlexComponent {}
+export class FlexComponent {}
diff --git a/src/app/example/footer/footer.component.html b/src/app/example/footer/footer.component.html
index 731191a..8ec8382 100644
--- a/src/app/example/footer/footer.component.html
+++ b/src/app/example/footer/footer.component.html
@@ -1,27 +1,26 @@
+
+
diff --git a/src/app/example/footer/footer.component.ts b/src/app/example/footer/footer.component.ts
index 3426d25..19b76db 100644
--- a/src/app/example/footer/footer.component.ts
+++ b/src/app/example/footer/footer.component.ts
@@ -1,11 +1,11 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-footer',
- templateUrl: './footer.component.html',
- styleUrls: [ './footer.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-footer',
+ templateUrl: './footer.component.html',
+ styleUrls: ['./footer.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class FooterComponent {
- year: number = new Date().getFullYear();
-}
+ year: number = new Date().getFullYear();
+}
diff --git a/src/app/example/gallery/gallery.component.html b/src/app/example/gallery/gallery.component.html
index 8a1a728..37566e3 100644
--- a/src/app/example/gallery/gallery.component.html
+++ b/src/app/example/gallery/gallery.component.html
@@ -1,8 +1,4 @@
-
- 显示
-
+ 显示
diff --git a/src/app/example/gallery/gallery.component.ts b/src/app/example/gallery/gallery.component.ts
index 3370de9..461b14b 100644
--- a/src/app/example/gallery/gallery.component.ts
+++ b/src/app/example/gallery/gallery.component.ts
@@ -1,16 +1,14 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-gallery',
- templateUrl: './gallery.component.html',
- styleUrls: ['./gallery.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-gallery',
+ templateUrl: './gallery.component.html',
+ styleUrls: ['./gallery.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DemoGalleryComponent {
-
- show: boolean = true;
- onDelete(item: any) {
- console.log(item);
- }
-
-}
+ show: boolean = true;
+ onDelete(item: any) {
+ console.log(item);
+ }
+}
diff --git a/src/app/example/gesture-password/gesture-password.component.html b/src/app/example/gesture-password/gesture-password.component.html
index fa70706..451195f 100644
--- a/src/app/example/gesture-password/gesture-password.component.html
+++ b/src/app/example/gesture-password/gesture-password.component.html
@@ -1,19 +1,26 @@
-
-
-current password: {{pwd}}
-check
-recorder
-change option
-{{switchState?'hide':'show'}}
-
-
+ current password: {{ pwd }}
+ check
+ recorder
+ change option
+ {{ switchState ? 'hide' : 'show' }}
+
diff --git a/src/app/example/gesture-password/gesture-password.component.ts b/src/app/example/gesture-password/gesture-password.component.ts
index e8a8f22..0977c02 100644
--- a/src/app/example/gesture-password/gesture-password.component.ts
+++ b/src/app/example/gesture-password/gesture-password.component.ts
@@ -1,22 +1,21 @@
import { Component, ViewEncapsulation } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
import { ERR } from 'ngx-gesture-password';
+import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'example-gesture-password',
templateUrl: './gesture-password.component.html',
styleUrls: ['./gesture-password.component.scss'],
- encapsulation: ViewEncapsulation.None
+ encapsulation: ViewEncapsulation.None,
})
export class GesturePasswordComponent {
-
pwd: string = '1236';
type: string = 'check';
options: any;
switchState: boolean = true;
- constructor(private _ns: ToastrService) { }
+ constructor(private _ns: ToastrService) {}
onChangeOptions() {
if (this.options) {
@@ -27,7 +26,9 @@ export class GesturePasswordComponent {
focusColor: '#5aa5fe',
fgColor: '#878aa1',
num: 4,
- passwords: Array(16).fill(0).map((i, index) => String.fromCharCode(index + 65))
+ passwords: Array(16)
+ .fill(0)
+ .map((_i, index) => String.fromCharCode(index + 65)),
};
}
}
diff --git a/src/app/example/grid/grid.component.html b/src/app/example/grid/grid.component.html
index bddf97a..1be580a 100644
--- a/src/app/example/grid/grid.component.html
+++ b/src/app/example/grid/grid.component.html
@@ -1,59 +1,58 @@
-
-
+
diff --git a/src/app/example/grid/grid.component.ts b/src/app/example/grid/grid.component.ts
index 449432e..9167a26 100644
--- a/src/app/example/grid/grid.component.ts
+++ b/src/app/example/grid/grid.component.ts
@@ -1,10 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-grid',
- templateUrl: './grid.component.html',
- styleUrls: [ './grid.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-grid',
+ templateUrl: './grid.component.html',
+ styleUrls: ['./grid.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class GridComponent {
-}
+export class GridComponent {}
diff --git a/src/app/example/icons/icons.component.html b/src/app/example/icons/icons.component.html
index 77bf651..6b5f4d9 100644
--- a/src/app/example/icons/icons.component.html
+++ b/src/app/example/icons/icons.component.html
@@ -1,49 +1,47 @@
-
-
-
-
+
+
+
-
-
-
-
提示
-
用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息
-
+
+
+
+
+
提示
+
用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息
-
-
-
-
普通警告
-
用于表示操作后将引起一定后果的情况
-
+
+
+
+
+
普通警告
+
用于表示操作后将引起一定后果的情况
-
-
-
-
强烈警告
-
用于表示操作后将引起严重的不可挽回的后果的情况
-
+
+
+
+
+
强烈警告
+
用于表示操作后将引起严重的不可挽回的后果的情况
-
+
+
+
-
-
-
+
+
+
diff --git a/src/app/example/icons/icons.component.ts b/src/app/example/icons/icons.component.ts
index 59fdbb3..66d1d4a 100644
--- a/src/app/example/icons/icons.component.ts
+++ b/src/app/example/icons/icons.component.ts
@@ -1,10 +1,9 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
- selector: 'example-icons',
- templateUrl: './icons.component.html',
- styleUrls: [ './icons.component.scss' ],
- encapsulation: ViewEncapsulation.None
+ selector: 'example-icons',
+ templateUrl: './icons.component.html',
+ styleUrls: ['./icons.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
-export class IconsComponent {
-}
+export class IconsComponent {}
diff --git a/src/app/example/infiniteloader/infiniteloader.component.html b/src/app/example/infiniteloader/infiniteloader.component.html
index 2ef80e3..79d7d2b 100644
--- a/src/app/example/infiniteloader/infiniteloader.component.html
+++ b/src/app/example/infiniteloader/infiniteloader.component.html
@@ -1,14 +1,19 @@
-
+
+ List with 50 Max
+
- List with 50 Max
-
-
- 重新开始
-
+ 重新开始
+
diff --git a/src/app/example/infiniteloader/infiniteloader.component.scss b/src/app/example/infiniteloader/infiniteloader.component.scss
index 72d0504..3440ead 100644
--- a/src/app/example/infiniteloader/infiniteloader.component.scss
+++ b/src/app/example/infiniteloader/infiniteloader.component.scss
@@ -1,3 +1,3 @@
.weui-infiniteloader .page {
- position: static;
+ position: static;
}
diff --git a/src/app/example/infiniteloader/infiniteloader.component.ts b/src/app/example/infiniteloader/infiniteloader.component.ts
index fbcb96b..a7d6fa6 100644
--- a/src/app/example/infiniteloader/infiniteloader.component.ts
+++ b/src/app/example/infiniteloader/infiniteloader.component.ts
@@ -1,5 +1,5 @@
-import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
-import { Observable, timer } from 'rxjs';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { timer } from 'rxjs';
import { InfiniteLoaderComponent } from 'ngx-weui/infiniteloader';
@@ -15,7 +15,7 @@ export class DemoInfiniteLoaderComponent {
items: any[] = Array(20)
.fill(0)
- .map((v: any, i: number) => i);
+ .map((_v: any, i: number) => i);
onLoadMore(comp: InfiniteLoaderComponent) {
this.restartBtn = false;
timer(1500).subscribe(() => {
diff --git a/src/app/example/input/input.component.html b/src/app/example/input/input.component.html
index 1bad790..b9c4854 100644
--- a/src/app/example/input/input.component.html
+++ b/src/app/example/input/input.component.html
@@ -1,187 +1,247 @@
-
-
- {{res | json}}
+
+ {{ res | json }}
diff --git a/src/app/example/input/input.component.ts b/src/app/example/input/input.component.ts
index 2a7ad58..5b40686 100644
--- a/src/app/example/input/input.component.ts
+++ b/src/app/example/input/input.component.ts
@@ -1,5 +1,5 @@
import { Component, ViewEncapsulation } from '@angular/core';
-import { Observable, timer } from 'rxjs';
+import { timer, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
@@ -26,11 +26,12 @@ export class InputComponent {
}
onAddCheckbox() {
+ // tslint:disable-next-line: binary-expression-operand-order
this.checkbox.push(String.fromCharCode(65 + this.checkbox.length));
}
onSendCode(): Observable
{
- return timer(1000).pipe(map((v, i) => true));
+ return timer(1000).pipe(map(() => true));
}
onSave() {
diff --git a/src/app/example/jweixin/jweixin.component.html b/src/app/example/jweixin/jweixin.component.html
index 24f6e55..f6f624f 100644
--- a/src/app/example/jweixin/jweixin.component.html
+++ b/src/app/example/jweixin/jweixin.component.html
@@ -1,9 +1,4 @@
-
-
- {{status}}
- 更多细节，请参与在线文档
-
+
+ {{ status }}
+ 更多细节，请参与在线文档
diff --git a/src/app/example/jweixin/jweixin.component.ts b/src/app/example/jweixin/jweixin.component.ts
index 84241c8..477aeaf 100644
--- a/src/app/example/jweixin/jweixin.component.ts
+++ b/src/app/example/jweixin/jweixin.component.ts
@@ -1,25 +1,28 @@
import { Component, ViewEncapsulation } from '@angular/core';
-import { WXService } from "../../wx.service";
+import { WXService } from '../../wx.service';
@Component({
- selector: 'example-jweixin',
- templateUrl: './jweixin.component.html',
- styleUrls: ['./jweixin.component.scss'],
- encapsulation: ViewEncapsulation.None,
- providers: [WXService]
+ selector: 'example-jweixin',
+ templateUrl: './jweixin.component.html',
+ styleUrls: ['./jweixin.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ providers: [WXService],
})
export class JWeiXinComponent {
- constructor(private wxService: WXService) { }
+ constructor(private wxService: WXService) {}
- status: string;
- ngOnInit() {
- this.wxService.config({
- title: '新标题'
- }).then(() => {
- // 其它操作，可以确保注册成功以后才有效
- this.status = '注册成功';
- }).catch((err: string) => {
- this.status = `注册失败，原因：${err}`
- });
- }
+ status: string;
+ ngOnInit() {
+ this.wxService
+ .config({
+ title: '新标题',
+ })
+ .then(() => {
+ // 其它操作，可以确保注册成功以后才有效
+ this.status = '注册成功';
+ })
+ .catch((err: string) => {
+ this.status = `注册失败，原因：${err}`;
+ });
+ }
}
diff --git a/src/app/example/list/list.component.html b/src/app/example/list/list.component.html
index db29edf..aff864b 100644
--- a/src/app/example/list/list.component.html
+++ b/src/app/example/list/list.component.html
@@ -1,108 +1,130 @@
- 带说明的列表项
- 
- 
- 
+ 强调行按钮
+ 
-