Skip to content

Commit b87d991

Browse files
bradmartinbradmartin
committed
project changes and formatting
1 parent ab9534b commit b87d991

25 files changed

+219
-14155
lines changed

‎.prettierrc

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
22
"semi": true,
3-
"singleQuote": true
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"arrowParens": "avoid"
46
}

‎README.md

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,13 @@
77
<a href="https://www.npmjs.com/package/@nstudio/nativescript-checkbox">
88
<img src="https://github.com/nstudio/nativescript-checkbox/workflows/Build%20CI/badge.svg" alt="Action Build">
99
</a>
10-
<a href="https://www.npmjs.com/package/nativescript-checkbox">
10+
<a href="https://www.npmjs.com/package/@nstudio/nativescript-checkbox">
1111
<img src="https://img.shields.io/npm/dt/nativescript-checkbox.svg?label=npm%20downloads" alt="npm">
1212
</a>
13-
<a href="https://github.com/bradmartin/nativescript-checkbox/stargazers">
14-
<img src="https://img.shields.io/github/stars/bradmartin/nativescript-checkbox.svg" alt="stars">
13+
<a href="https://github.com/@nstudio/nativescript-checkbox/stargazers">
14+
<img src="https://img.shields.io/github/stars/@nstudio/nativescript-checkbox.svg" alt="stars">
1515
</a>
1616
<br />
17-
<a href="http://nstudio.io">
18-
<img src="./screens/nstudio-banner.png" alt="nStudio banner">
19-
</a>
20-
<h5 align="center">Do you need assistance on your project or plugin? Contact the nStudio team anytime at <a href="mailto:[email protected]">[email protected]</a> to get up to speed with the best practices in mobile and web app development.
21-
</h5>
2217
</p>
2318

2419
---
@@ -27,7 +22,17 @@
2722

2823
From your command prompt/terminal go to your app's root folder and execute:
2924

30-
`tns plugin add @nstudio/nativescript-checkbox`
25+
#### NativeScript 7+:
26+
27+
```bash
28+
ns plugin add @nstudio/nativescript-checkbox
29+
```
30+
31+
#### NativeScript prior to 7:
32+
33+
```bash
34+
tns plugin add @nstudio/[email protected]
35+
```
3136

3237
#### Platform controls used:
3338

@@ -82,7 +87,7 @@ public getCheckProp() {
8287
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';
8388

8489
@NgModule({
85-
imports: [TNSCheckBoxModule],
90+
imports: [TNSCheckBoxModule]
8691
// etc.
8792
})
8893
export class YourModule {}
@@ -122,8 +127,8 @@ Vue.registerElement(
122127
{
123128
model: {
124129
prop: 'checked',
125-
event: 'checkedChange',
126-
},
130+
event: 'checkedChange'
131+
}
127132
}
128133
);
129134
```

‎demo-ng/app/README.md

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎demo-ng/app/app.routing.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { ItemsComponent } from './item/items.component';
77
const routes: Routes = [
88
{ path: '', redirectTo: '/items', pathMatch: 'full' },
99
{ path: 'items', component: ItemsComponent },
10-
{ path: 'item/:id', component: ItemDetailComponent },
10+
{ path: 'item/:id', component: ItemDetailComponent }
1111
];
1212

1313
@NgModule({
1414
imports: [NativeScriptRouterModule.forRoot(routes)],
15-
exports: [NativeScriptRouterModule],
15+
exports: [NativeScriptRouterModule]
1616
})
1717
export class AppRoutingModule {}

‎demo-ng/app/item/item-detail.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<ActionBar title="Details" class="action-bar"></ActionBar>
22
<FlexboxLayout flexDirection="column" class="page">
3-
<FlexboxLayout class="m-15">
4-
<Label class="h2" [text]="item.id + '. '"></Label>
5-
<Label class="h2" [text]="item.name"></Label>
6-
</FlexboxLayout>
7-
<Label class="h4" [text]="item.role"></Label>
3+
<FlexboxLayout class="m-15">
4+
<Label class="h2" [text]="item.id + '. '"></Label>
5+
<Label class="h2" [text]="item.name"></Label>
6+
</FlexboxLayout>
7+
<Label class="h4" [text]="item.role"></Label>
88
</FlexboxLayout>

‎demo-ng/app/item/item-detail.component.ts

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import { Component, OnInit } from "@angular/core";
2-
import { ActivatedRoute } from "@angular/router";
3-
4-
import { Item } from "./item";
5-
import { ItemService } from "./item.service";
1+
import { Component, OnInit } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { Item } from './item';
4+
import { ItemService } from './item.service';
65

76
@Component({
8-
selector: "ns-details",
9-
moduleId: module.id,
10-
templateUrl: "./item-detail.component.html",
7+
selector: 'ns-details',
8+
moduleId: module.id,
9+
templateUrl: './item-detail.component.html'
1110
})
1211
export class ItemDetailComponent implements OnInit {
13-
item: Item;
12+
item: Item;
1413

15-
constructor(
16-
private itemService: ItemService,
17-
private route: ActivatedRoute
18-
) { }
14+
constructor(
15+
private itemService: ItemService,
16+
private route: ActivatedRoute
17+
) {}
1918

20-
ngOnInit(): void {
21-
const id = +this.route.snapshot.params["id"];
22-
this.item = this.itemService.getItem(id);
23-
}
19+
ngOnInit(): void {
20+
const id = +this.route.snapshot.params['id'];
21+
this.item = this.itemService.getItem(id);
22+
}
2423
}

‎demo-ng/app/item/item.service.ts

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
1-
import { Injectable } from "@angular/core";
2-
3-
import { Item } from "./item";
1+
import { Injectable } from '@angular/core';
2+
import { Item } from './item';
43

54
@Injectable()
65
export class ItemService {
7-
private items = new Array<Item>(
8-
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
9-
{ id: 3, name: "Piqué", role: "Defender" },
10-
{ id: 4, name: "I. Rakitic", role: "Midfielder" },
11-
{ id: 5, name: "Sergio", role: "Midfielder" },
12-
{ id: 6, name: "Denis Suárez", role: "Midfielder" },
13-
{ id: 7, name: "Arda", role: "Midfielder" },
14-
{ id: 8, name: "A. Iniesta", role: "Midfielder" },
15-
{ id: 9, name: "Suárez", role: "Forward" },
16-
{ id: 10, name: "Messi", role: "Forward" },
17-
{ id: 11, name: "Neymar", role: "Forward" },
18-
{ id: 12, name: "Rafinha", role: "Midfielder" },
19-
{ id: 13, name: "Cillessen", role: "Goalkeeper" },
20-
{ id: 14, name: "Mascherano", role: "Defender" },
21-
{ id: 17, name: "Paco Alcácer", role: "Forward" },
22-
{ id: 18, name: "Jordi Alba", role: "Defender" },
23-
{ id: 19, name: "Digne", role: "Defender" },
24-
{ id: 20, name: "Sergi Roberto", role: "Midfielder" },
25-
{ id: 21, name: "André Gomes", role: "Midfielder" },
26-
{ id: 22, name: "Aleix Vidal", role: "Midfielder" },
27-
{ id: 23, name: "Umtiti", role: "Defender" },
28-
{ id: 24, name: "Mathieu", role: "Defender" },
29-
{ id: 25, name: "Masip", role: "Goalkeeper" },
30-
);
6+
private items = new Array<Item>(
7+
{ id: 1, name: 'Ter Stegen', role: 'Goalkeeper' },
8+
{ id: 3, name: 'Piqué', role: 'Defender' },
9+
{ id: 4, name: 'I. Rakitic', role: 'Midfielder' },
10+
{ id: 5, name: 'Sergio', role: 'Midfielder' },
11+
{ id: 6, name: 'Denis Suárez', role: 'Midfielder' },
12+
{ id: 7, name: 'Arda', role: 'Midfielder' },
13+
{ id: 8, name: 'A. Iniesta', role: 'Midfielder' },
14+
{ id: 9, name: 'Suárez', role: 'Forward' },
15+
{ id: 10, name: 'Messi', role: 'Forward' },
16+
{ id: 11, name: 'Neymar', role: 'Forward' },
17+
{ id: 12, name: 'Rafinha', role: 'Midfielder' },
18+
{ id: 13, name: 'Cillessen', role: 'Goalkeeper' },
19+
{ id: 14, name: 'Mascherano', role: 'Defender' },
20+
{ id: 17, name: 'Paco Alcácer', role: 'Forward' },
21+
{ id: 18, name: 'Jordi Alba', role: 'Defender' },
22+
{ id: 19, name: 'Digne', role: 'Defender' },
23+
{ id: 20, name: 'Sergi Roberto', role: 'Midfielder' },
24+
{ id: 21, name: 'André Gomes', role: 'Midfielder' },
25+
{ id: 22, name: 'Aleix Vidal', role: 'Midfielder' },
26+
{ id: 23, name: 'Umtiti', role: 'Defender' },
27+
{ id: 24, name: 'Mathieu', role: 'Defender' },
28+
{ id: 25, name: 'Masip', role: 'Goalkeeper' }
29+
);
3130

32-
getItems(): Item[] {
33-
return this.items;
34-
}
31+
getItems(): Item[] {
32+
return this.items;
33+
}
3534

36-
getItem(id: number): Item {
37-
return this.items.filter(item => item.id === id)[0];
38-
}
35+
getItem(id: number): Item {
36+
return this.items.filter(item => item.id === id)[0];
37+
}
3938
}

‎demo-ng/app/item/item.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export class Item {
2-
id: number;
3-
name: string;
4-
role: string;
2+
id: number;
3+
name: string;
4+
role: string;
55
}

‎demo-ng/app/item/items.component.html

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,84 @@
1-
<ActionBar title="My App" class="action-bar">
2-
</ActionBar>
1+
<ActionBar title="My App" class="action-bar"> </ActionBar>
32

43
<TabView>
4+
<!-- Tab1: Checkboxes -->
5+
<StackLayout *tabItem="{ title: 'Checkboxes' }">
6+
<StackLayout class="page">
7+
<StackLayout orientation="horizontal" class="p-10">
8+
<!-- boxType="square" is the default, just testing this works as well -->
9+
<CheckBox
10+
#modelCheck
11+
[(ngModel)]="checkTest"
12+
class="checkbox"
13+
boxType="square"
14+
(checkedChange)="checkedChange(modelCheck)"
15+
></CheckBox>
16+
<Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
17+
</StackLayout>
18+
<StackLayout
19+
class="form-group"
20+
[formGroup]="formGroup"
21+
orientation="horizontal"
22+
class="p-10"
23+
>
24+
<CheckBox
25+
#reactiveCheck
26+
class="checkbox"
27+
formControlName="testCheck"
28+
class="checkbox"
29+
></CheckBox>
30+
<Label
31+
text="Test Reactive FormGroup"
32+
(tap)="reactiveCheck.toggle()"
33+
></Label>
34+
</StackLayout>
535

6-
<!-- Tab1: Checkboxes -->
7-
<StackLayout *tabItem="{title: 'Checkboxes'}">
8-
<StackLayout class="page">
9-
<StackLayout orientation="horizontal" class="p-10">
10-
<!-- boxType="square" is the default, just testing this works as well -->
11-
<CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" boxType="square" (checkedChange)="checkedChange(modelCheck)"></CheckBox>
12-
<Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
13-
</StackLayout>
14-
<StackLayout class="form-group" [formGroup]="formGroup" orientation="horizontal" class="p-10">
15-
<CheckBox #reactiveCheck class="checkbox" formControlName="testCheck" class="checkbox"></CheckBox>
16-
<Label text="Test Reactive FormGroup" (tap)="reactiveCheck.toggle()"></Label>
17-
</StackLayout>
36+
<StackLayout class="p-10">
37+
<Button
38+
text="Submit Values"
39+
(tap)="submit()"
40+
class="btn btn-primary"
41+
></Button>
42+
</StackLayout>
1843

19-
<StackLayout class="p-10">
20-
<Button text="Submit Values" (tap)="submit()" class="btn btn-primary"></Button>
21-
</StackLayout>
22-
23-
<ListView [items]="items" class="list-group">
24-
<ng-template let-item="item">
25-
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
26-
class="list-group-item"></Label>
27-
</ng-template>
28-
</ListView>
29-
</StackLayout>
44+
<ListView [items]="items" class="list-group">
45+
<ng-template let-item="item">
46+
<Label
47+
[nsRouterLink]="['/item', item.id]"
48+
[text]="item.name"
49+
class="list-group-item"
50+
></Label>
51+
</ng-template>
52+
</ListView>
3053
</StackLayout>
54+
</StackLayout>
3155

32-
<!-- Tab2: Radiobuttons -->
33-
<StackLayout *tabItem="{title: 'Radiobuttons'}">
34-
<Label class="p-10" text="Tap either the buttons or the labels. You can even unselect the radiobutton selection." textWrap="true"></Label>
35-
<StackLayout class="p-10" *ngFor="let option of radioOptions">
36-
<StackLayout orientation="horizontal" verticalAlignment="center">
37-
<CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox" boxType="circle"></CheckBox>
38-
<StackLayout verticalAlignment="center">
39-
<Label [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
40-
</StackLayout>
41-
</StackLayout>
56+
<!-- Tab2: Radiobuttons -->
57+
<StackLayout *tabItem="{ title: 'Radiobuttons' }">
58+
<Label
59+
class="p-10"
60+
text="Tap either the buttons or the labels. You can even unselect the radiobutton selection."
61+
textWrap="true"
62+
></Label>
63+
<StackLayout class="p-10" *ngFor="let option of radioOptions">
64+
<StackLayout orientation="horizontal" verticalAlignment="center">
65+
<CheckBox
66+
#elem
67+
[checked]="option.selected"
68+
(checkedChange)="
69+
elem.checked !== option.selected && changeCheckedRadio(option)
70+
"
71+
class="checkbox"
72+
boxType="circle"
73+
></CheckBox>
74+
<StackLayout verticalAlignment="center">
75+
<Label
76+
[text]="option.text"
77+
textWrap="true"
78+
(tap)="changeCheckedRadio(option)"
79+
></Label>
4280
</StackLayout>
81+
</StackLayout>
4382
</StackLayout>
44-
83+
</StackLayout>
4584
</TabView>

0 commit comments

Comments
 (0)