Skip to content

Commit 41b1508

Browse files
samwxsamwx
committed
refactor: Start separating components into modules
BREAKING CHANGE: Package now exports separated modules instead of single one with all components
1 parent 4b19579 commit 41b1508

38 files changed

Lines changed: 996 additions & 925 deletions

File tree

‎src/components/accordion/index.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
export default {
2-
template: `
3-
<article class="accordion relative">
4-
<input type="checkbox" checked />
5-
<i class="accordion-chevron fr"></i>
6-
<h6 class="accordion-title ma0" ng-bind="$ctrl.title"></h6>
7-
<div class="accordion-content relative overflow-hidden dim" ng-transclude></div>
8-
</article>
9-
`,
10-
controllerAs: '$ctrl',
11-
transclude: true,
12-
bindings: {
13-
title: '@',
14-
},
15-
};
1+
import angular from 'angular';
2+
3+
export const accordion = angular
4+
.module('blipComponents.accordion', [])
5+
.component('accordion', {
6+
template: `
7+
<article class="accordion relative">
8+
<input type="checkbox" checked />
9+
<i class="accordion-chevron fr"></i>
10+
<h6 class="accordion-title ma0" ng-bind="$ctrl.title"></h6>
11+
<div class="accordion-content relative overflow-hidden dim" ng-transclude></div>
12+
</article>
13+
`,
14+
controllerAs: '$ctrl',
15+
transclude: true,
16+
bindings: {
17+
title: '@',
18+
},
19+
})
20+
.name;

‎src/components/avatarArray/AvatarArray.component.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import './AvatarArray.scss';
22
import template from './AvatarArrayView.html';
3+
import * as angular from 'angular';
34

45
class AvatarArray {
56
public members: Array<any>;
67
public limit: number;
78

89
constructor(private $scope) {
910
this.$scope.$watch('$ctrl.members', (newValue, oldValue) => {
10-
// if (newValue !== oldValue) {
1111
setTimeout(() => {
1212
let array = Array.from(
1313
document.querySelectorAll('.avatar-array > tooltip'),
@@ -21,17 +21,19 @@ class AvatarArray {
2121
x.style.zIndex = String(100 - index);
2222
});
2323
}, 0);
24-
// }
2524
});
2625
}
2726
}
2827

29-
export const AvatarArrayComponent = {
30-
controller: AvatarArray,
31-
controllerAs: '$ctrl',
32-
bindings: {
33-
members: '<?',
34-
limit: '<?',
35-
},
36-
template,
37-
};
28+
export const AvatarArrayComponent = angular
29+
.module('blipComponents.avatarArray', [])
30+
.component('avatarArray', {
31+
controller: AvatarArray,
32+
controllerAs: '$ctrl',
33+
bindings: {
34+
members: '<?',
35+
limit: '<?',
36+
},
37+
template,
38+
})
39+
.name;

‎src/components/card/card.component.ts‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './card.scss';
22
import template from './CardView.html';
3+
import * as angular from 'angular';
34
import { IStateService } from 'angular-ui-router';
45
import { ITranscludeFunction } from 'angular';
56

@@ -86,23 +87,26 @@ class CardComponentController implements ICardComponentController {
8687
}
8788

8889
//
89-
export const CardComponent = {
90-
template,
91-
controller: CardComponentController,
92-
controllerAs: '$ctrl',
93-
bindings: {
94-
itemTitle: '@',
95-
collapsable: '<?',
96-
aditionalInfo: '@?',
97-
sref: '@?',
98-
sparams: '<?',
99-
onEdit: '&?',
100-
onExclude: '&?',
101-
cardInfo: '@?',
102-
showOptions: '<?',
103-
},
104-
transclude: {
105-
cardFooter: '?cardFooter',
106-
cardOptions: '?cardOptions',
107-
},
108-
};
90+
export const CardComponent = angular
91+
.module('blipComponents.card', [])
92+
.component('card', {
93+
template,
94+
controller: CardComponentController,
95+
controllerAs: '$ctrl',
96+
bindings: {
97+
itemTitle: '@',
98+
collapsable: '<?',
99+
aditionalInfo: '@?',
100+
sref: '@?',
101+
sparams: '<?',
102+
onEdit: '&?',
103+
onExclude: '&?',
104+
cardInfo: '@?',
105+
showOptions: '<?',
106+
},
107+
transclude: {
108+
cardFooter: '?cardFooter',
109+
cardOptions: '?cardOptions',
110+
},
111+
})
112+
.name;

‎src/components/card/index.ts‎

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

‎src/components/checkbox/checkbox.components.ts‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './checkbox.scss';
22
import * as uuid from 'uuid';
3+
import * as angular from 'angular';
34

45
export class CheckboxComponent {
56
uniqueId: string;
@@ -38,29 +39,32 @@ export class CheckboxComponent {
3839
}
3940
}
4041

41-
export const Checkbox = {
42-
controller: CheckboxComponent,
43-
controllerAs: '$ctrl',
44-
transclude: true,
45-
require: {
46-
ngModel: 'ngModel',
47-
},
48-
bindings: {
49-
group: '@?',
50-
checked: '@?',
51-
refer: '@?',
52-
disabled: '<?',
53-
},
54-
template: `<div class="checkbox-wrapper">
55-
<input type="checkbox"
56-
id="{{$ctrl.inputId}}"
57-
name="{{$ctrl.group}}"
58-
ng-model="$ctrl.model"
59-
ng-checked="$ctrl.isChecked"
60-
ng-disabled="$ctrl.disabled"
61-
></input>
62-
<label for="{{$ctrl.inputId}}" class="flex items-center">
63-
<i class="lh-solid" ng-class="{'icon-selectoff-1': !$ctrl.model, 'icon-selecton': $ctrl.model, 'disabled': $ctrl.disabled }"></i> <span class="text-gray ml3 flex items-center" ng-transclude></span>
64-
</label>
65-
</div>`,
66-
};
42+
export const Checkbox = angular
43+
.module('blipComponents.checkbox', [])
44+
.component('checkbox', {
45+
controller: CheckboxComponent,
46+
controllerAs: '$ctrl',
47+
transclude: true,
48+
require: {
49+
ngModel: 'ngModel',
50+
},
51+
bindings: {
52+
group: '@?',
53+
checked: '@?',
54+
refer: '@?',
55+
disabled: '<?',
56+
},
57+
template: `<div class="checkbox-wrapper">
58+
<input type="checkbox"
59+
id="{{$ctrl.inputId}}"
60+
name="{{$ctrl.group}}"
61+
ng-model="$ctrl.model"
62+
ng-checked="$ctrl.isChecked"
63+
ng-disabled="$ctrl.disabled"
64+
></input>
65+
<label for="{{$ctrl.inputId}}" class="flex items-center">
66+
<i class="lh-solid" ng-class="{'icon-selectoff-1': !$ctrl.model, 'icon-selecton': $ctrl.model, 'disabled': $ctrl.disabled }"></i> <span class="text-gray ml3 flex items-center" ng-transclude></span>
67+
</label>
68+
</div>`,
69+
})
70+
.name;

‎src/components/chips/chips.component.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import template from './ChipsView.html';
1+
import * as angular from 'angular';
22
import { Component } from 'decorators';
33
import './_chips.scss';
4+
import { IComponentOptions } from 'angular';
45

56
@Component({
67
selector: 'chips',
@@ -12,7 +13,7 @@ import './_chips.scss';
1213
{{item.text}} <icon-dpr ng-if="!$ctrl.hideRemove" size="xs" class="remove-chip" ng-click="$ctrl.removeItem(item)">&#xE5CD;</icon-dpr>
1314
</div>`,
1415
})
15-
export class ChipsComponent {
16+
class Chips {
1617
data: any;
1718
hideRemove: boolean;
1819
onRemove: (obj: any) => {};
@@ -23,3 +24,8 @@ export class ChipsComponent {
2324
this.onRemove({ $data: this.data, $removedItem: item });
2425
}
2526
}
27+
28+
export const ChipsComponent = angular
29+
.module('blipComponents.chips', [])
30+
.component('chips', <IComponentOptions>Chips)
31+
.name;

‎src/components/colorPicker/colorPicker.component.ts‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './colorPicker.scss';
2+
import * as angular from 'angular';
23

34
export class ColorPickerComponent {
45
colorBlock: HTMLCanvasElement;
@@ -196,22 +197,25 @@ export class ColorPickerComponent {
196197
}
197198
}
198199

199-
export const colorPicker = {
200-
controller: ColorPickerComponent,
201-
controllerAs: '$ctrl',
202-
bindings: {
203-
inputColor: '=',
204-
id: '@',
205-
},
206-
template: `
207-
<div class="date-picker-wrapper">
208-
<span class="color-label" ng-click="$ctrl.toggleColorPicker()"></span>
209-
<div class="color-picker" ng-class="{'show-picker': $ctrl.showPicker }">
210-
<div class="canvas-wrapper">
211-
<canvas class="color-canvas color-block" height="150" width="150"></canvas>
212-
<canvas class="color-canvas color-strip" height="150" width="30"></canvas>
200+
export const colorPicker = angular
201+
.module('blipComponents.colorPicker', [])
202+
.component('colorPicker', {
203+
controller: ColorPickerComponent,
204+
controllerAs: '$ctrl',
205+
bindings: {
206+
inputColor: '=',
207+
id: '@',
208+
},
209+
template: `
210+
<div class="date-picker-wrapper">
211+
<span class="color-label" ng-click="$ctrl.toggleColorPicker()"></span>
212+
<div class="color-picker" ng-class="{'show-picker': $ctrl.showPicker }">
213+
<div class="canvas-wrapper">
214+
<canvas class="color-canvas color-block" height="150" width="150"></canvas>
215+
<canvas class="color-canvas color-strip" height="150" width="30"></canvas>
216+
</div>
217+
<input type="text" maxlenght="7" placeholder="Hex Code" class="color-text-input" ng-model="$ctrl.inputColor" ng-class="{'invalid-input': !$ctrl.validColor }"></input>
213218
</div>
214-
<input type="text" maxlenght="7" placeholder="Hex Code" class="color-text-input" ng-model="$ctrl.inputColor" ng-class="{'invalid-input': !$ctrl.validColor }"></input>
215-
</div>
216-
</div>`,
217-
};
219+
</div>`,
220+
})
221+
.name;

‎src/components/confusionMatrix/confusionMatrix.component.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as angular from 'angular';
12
import './ConfusionMatrix.scss';
23
import template from './ConfusionMatrixView.html';
34

@@ -130,12 +131,15 @@ export class ConfusionMatrixComponent {
130131
}
131132
}
132133

133-
export const ConfusionMatrix = {
134-
controller: ConfusionMatrixComponent,
135-
controllerAs: '$ctrl',
136-
template,
137-
bindings: {
138-
matrix: '<',
139-
keys: '<',
140-
},
141-
};
134+
export const ConfusionMatrix = angular
135+
.module('blipComponents.confusionMatrix', [])
136+
.component('confusionMatrix', {
137+
controller: ConfusionMatrixComponent,
138+
controllerAs: '$ctrl',
139+
template,
140+
bindings: {
141+
matrix: '<',
142+
keys: '<',
143+
},
144+
})
145+
.name;

0 commit comments

Comments
 (0)