angular2-ui-switch - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

package.json

 {
   "name": "angular2-ui-switch",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "switch button for angular2",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --config webpack.config.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base",
-    "demo": "webpack --config webpack.config.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base",
-    "typings": "typings install",
-    "tsc": "tsc --project . --declaration",
+    "dev": "webpack-dev-server --config webpack.config.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base",
+    "example": "webpack --config webpack.config.js --inline --progress --profile --colors --display-error-details --display-cached --content-base",
+    "tsc": "tsc --rootDir src --outDir dist --declaration",
+    "prebuild": "rimraf dist",
     "build": "npm run tsc",
@@ -29,15 +30,17 @@ "prepublish": "npm run build"
   "devDependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/compiler": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1",
-    "@angular/http": "^2.0.0-rc.1",
-    "@angular/platform-browser": "^2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
-    "angular2-in-memory-web-api": "^0.0.10",
-    "bootstrap": "~3.3.x",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/forms": "0.3.0",
+    "@angular/http": "2.0.0-rc.5",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+    "@types/jasmine": "^2.2.29",
+    "@types/node": "^4.0.29",
+    "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.3",
+    "rimraf": "^2.5.4",
     "rxjs": "5.0.0-beta.6",
     "ts-loader": "^0.8.2",
-    "typescript": "^1.8.10",
-    "typings": "^0.8.1",
+    "typescript": "^2.0.0-beta",
     "webpack": "^1.13.1",
@@ -47,9 +50,2 @@ "webpack-dev-server": "^1.14.1",
   },
-  "peerDependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/compiler": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1",
-    "@angular/platform-browser": "^2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.1"
-  },
   "bugs": {
@@ -56,0 +52,0 @@ "url": "https://github.com/yuyang041060120/angular2-ui-switch/issues"

README.md

@@ -18,16 +18,18 @@ # Description
 ```javascript
-import { Component } from '@angular/core';
-import { UiSwitchComponent } from 'angular2-ui-switch';
+import { UiSwitchModule } from 'angular2-ui-switch'
+import { AppComponent } from './app.component';
 
-@Component({
-    selector: 'app',
-    template: `
-        <ui-switch></ui-switch>
-    `,
-    directives: [UiSwitchComponent]
+@NgModule({
+    imports: [BrowserModule, FormsModule, UiSwitchModule],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
 })
-export class AppComponent {
+export class AppModule {
 }
 ```
 
+```html
+<ui-switch></ui-switch>
+```
+
 # Params
@@ -37,7 +39,9 @@
 
-type: *boolean*
-default: false
+> type: *boolean*
 
+> default: false
+
 ```html
-<ui-switch [checked]="true"></ui-switch>
+<ui-switch checked></ui-switch>
+<ui-switch [checked]="false"></ui-switch>
 ```
@@ -47,16 +51,25 @@
 
-type: *boolean*
-default: false
+> type: *boolean*
 
+> default: false
+
 ```html
-<ui-switch [disabled]="true"></ui-switch>
+<ui-switch disabled></ui-switch>
+<ui-switch checked [disabled]="true"></ui-switch>
 ```
 
+### two way binding
+
+```html
+<ui-switch [(ngModel)]="enable"></ui-switch>
+```
+
 ### change
 
-type: *event*
-default: noop
+> type: *event*
 
+> default: noop
+
 ```html
-<ui-switch (change)="enable = $event"></ui-switch>
+<ui-switch (change)="onChange($event)"></ui-switch>
 ```
@@ -66,11 +79,9 @@
 
-type: *string*
-default: medium
+> type: *string*
 
-```html
-<ui-switch size="large"></ui-switch>
-```
+> default: medium
 
 ```html
 <ui-switch size="small"></ui-switch>
+<ui-switch size="large"></ui-switch>
 ```
@@ -80,5 +91,6 @@
 
-type: *string*
-default: rgb(100, 189, 99)
+> type: *string*
 
+> default: rgb(100, 189, 99)
+
 ```html
@@ -89,2 +101,2 @@ <ui-switch color="red"></ui-switch>
 # License
-MIT
+MIT

src/ui-switch.component.ts

@@ -1,3 +0,10 @@
-import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostListener, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
+const UI_SWITCH_CONTROL_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => UiSwitchComponent),
+    multi: true
+};
+
 @Component({
@@ -99,7 +106,30 @@ selector: 'ui-switch',
         }
-    `]
+    `],
+    providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR]
 })
-export class UiSwitchComponent {
-    @Input() checked: boolean = false;
-    @Input() disabled: boolean = false;
+export class UiSwitchComponent implements ControlValueAccessor {
+    private onTouchedCallback = (v: any) => {
+    };
+    private onChangeCallback = (v: any) => {
+    };
+
+    private _checked: boolean;
+    private _disabled: boolean;
+
+    @Input() set checked(v: boolean) {
+        this._checked = v !== false;
+    }
+
+    get checked() {
+        return this._checked;
+    }
+
+    @Input() set disabled(v: boolean) {
+        this._disabled = v !== false;
+    };
+
+    get disabled() {
+        return this._disabled;
+    }
+
     @Input() size: string = 'medium';
@@ -110,3 +140,3 @@ @Output() change = new EventEmitter<boolean>();
     defaultBoColor: string = '#dfdfdf';
-    
+
     @HostListener('click')
@@ -117,3 +147,19 @@ onToggle() {
         this.change.emit(this.checked);
+        this.onChangeCallback(this.checked);
+        this.onTouchedCallback(this.checked);
     }
+
+    writeValue(obj: any): void {
+        if (obj !== this.checked) {
+            this.checked = !!obj;
+        }
+    }
+
+    registerOnChange(fn: any) {
+        this.onChangeCallback = fn;
+    }
+
+    registerOnTouched(fn: any) {
+        this.onTouchedCallback = fn;
+    }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Lines of code

304

increased by62.57%

Number of lines in readme file

97

increased by15.48%

Worsened metrics

Total package byte prevSize

19390

decreased by-34.48%

Dev dependency count

18

increased by12.5%

Number of package files

12

decreased by-7.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes