PK
uvN 007_theming/initial/biz-e-corp/PK uvN + 007_theming/initial/biz-e-corp/package.json{
"name": "dojo-theming-tutorial",
"version": "1.0.0",
"main": "src/main.ts",
"scripts": {
"test": "dojo test",
"build": "dojo build"
},
"dependencies": {
"@dojo/framework": "^5.0.0",
"@dojo/widgets": "^5.0.0",
"tslib": "~1.8.1"
},
"devDependencies": {
"@dojo/cli-build-app": "^5.0.0",
"@dojo/cli-test-intern": "^5.0.0",
"@dojo/cli-create-theme": "^5.0.0",
"@types/node": "~9.6.5",
"@types/sinon": "^1.16.35",
"sinon": "^2.0.0",
"typescript": "~2.6.1"
}
}
PKjU
PK
uvN # 007_theming/initial/biz-e-corp/src/PK
uvN % 007_theming/initial/biz-e-corp/tests/PK uvN , 007_theming/initial/biz-e-corp/tsconfig.json{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es5",
"es2015.promise",
"es2015.iterable",
"es2015.symbol",
"es2015.symbol.wellknown"
],
"module": "umd",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"outDir": "_build/",
"removeComments": false,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"types": [ "intern" ]
},
"include": [
"./typings/index.d.ts",
"./src/**/*.ts",
"./tests/**/*.ts"
]
}
PK~W W PK uvN * 007_theming/initial/biz-e-corp/tslint.json{
"rules": {
"align": false,
"ban": [],
"class-name": true,
"comment-format": [ true, "check-space" ],
"curly": true,
"eofline": true,
"forin": false,
"indent": [ true, "tabs" ],
"interface-name": [ true, "never-prefix" ],
"jsdoc-format": true,
"label-position": true,
"max-line-length": 120,
"member-access": false,
"member-ordering": false,
"no-any": false,
"no-arg": true,
"no-bitwise": false,
"no-consecutive-blank-lines": true,
"no-console": false,
"no-construct": false,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": [ true, "ignore-params" ],
"no-shadowed-variable": false,
"no-string-literal": false,
"no-switch-case-fall-through": false,
"no-trailing-whitespace": true,
"no-unused-expression": false,
"no-use-before-declare": false,
"no-var-keyword": true,
"no-var-requires": false,
"object-literal-sort-keys": false,
"one-line": [ true, "check-open-brace", "check-whitespace" ],
"quotemark": [ true, "single" ],
"radix": true,
"semicolon": [ true, "always" ],
"trailing-comma": [ true, {
"multiline": "never",
"singleline": "never"
} ],
"triple-equals": [ true, "allow-null-check" ],
"typedef": false,
"typedef-whitespace": [ true, {
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}, {
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
} ],
"variable-name": [ true, "check-format", "allow-leading-underscore", "ban-keywords", "allow-pascal-case" ],
"whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast" ]
}
}
PKįv v PK uvN - 007_theming/initial/biz-e-corp/src/index.html
biz-e-corp
PK+{k k PK uvN + 007_theming/initial/biz-e-corp/src/main.css/* Put your styles and imports here */
PK4' ' PK uvN 0 007_theming/initial/biz-e-corp/src/main.css.d.tsexport default {};
PK&S4 PK uvN * 007_theming/initial/biz-e-corp/src/main.tsimport renderer from '@dojo/framework/widget-core/vdom';
import { w } from '@dojo/framework/widget-core/d';
import App from './widgets/App';
const r = renderer(() => w(App, {}));
r.mount({ domNode: document.querySelector('my-app') as HTMLElement });
PKc> PK
uvN * 007_theming/initial/biz-e-corp/src/styles/PK
uvN + 007_theming/initial/biz-e-corp/src/widgets/PK
uvN 0 007_theming/initial/biz-e-corp/tests/functional/PK
uvN * 007_theming/initial/biz-e-corp/tests/unit/PK uvN 6 007_theming/initial/biz-e-corp/src/styles/worker.m.css.generalInfo {
box-sizing: border-box;
display: inline-block;
margin-bottom: 20px;
padding-left: 10px;
vertical-align: middle;
width: 60%;
}
.image {
margin: 0 auto 20px;
max-width: 250px;
width: 100%;
}
.imageSmall {
margin-bottom: 20px;
vertical-align: middle;
width: 40%;
}
.heading {}
.tasks {}
.label {
font-weight: bold;
}
.task {
border: solid 1px #333;
border-radius: 0.3em;
margin-top: 3px;
padding: 3px;
text-align: left;
}
.worker {
flex: 1 1 calc(33% - 20px);
margin: 0 10px 40px;
max-width: 350px;
min-width: 250px;
position: relative;
/* flip transform styles */
perspective: 1000px;
transform-style: preserve-3d;
}
.workerFront, .workerBack {
border: 1px solid #333;
border-radius: 4px;
box-sizing: border-box;
padding: 30px;
/* flip transform styles */
backface-visibility: hidden;
transition: all 0.6s;
transform-style: preserve-3d;
}
.workerBack {
font-size: 0.75em;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: rotateY(-180deg);
width: 100%;
}
.workerFront {
text-align: center;
transform: rotateY(0deg);
z-index: 2;
}
.reverse .workerFront {
transform: rotateY(180deg);
}
.reverse .workerBack {
transform: rotateY(0deg);
}
PK' PK uvN ; 007_theming/initial/biz-e-corp/src/styles/worker.m.css.d.tsexport const generalInfo: string;
export const image: string;
export const imageSmall: string;
export const heading: string;
export const tasks: string;
export const label: string;
export const task: string;
export const worker: string;
export const workerFront: string;
export const workerBack: string;
export const reverse: string;
PKҌqN N PK uvN ? 007_theming/initial/biz-e-corp/src/styles/workerContainer.m.css.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
margin: 0 auto;
width: 100%;
}
PK PK uvN D 007_theming/initial/biz-e-corp/src/styles/workerContainer.m.css.d.tsexport const container: string;
PK)F PK uvN : 007_theming/initial/biz-e-corp/src/styles/workerForm.m.css.workerForm {
margin-bottom: 40px;
text-align: center;
}
.workerForm fieldset,
.workerForm label {
display: inline-block;
text-align: left;
}
.workerForm label {
margin-right: 10px;
}
.nameField {
border: 0;
margin: 0;
padding: 0;
}
.nameLabel {
font: 14px/1 sans-serif;
margin: 5px 0;
}
.workerButton {
padding: 5px 20px;
}
PKU U PK uvN ? 007_theming/initial/biz-e-corp/src/styles/workerForm.m.css.d.tsexport const workerForm: string;
export const nameField: string;
export const nameLabel: string;
export const workerButton: string;
PK|ɓ PK uvN 1 007_theming/initial/biz-e-corp/src/widgets/App.tsimport { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v, w } from '@dojo/framework/widget-core/d';
import Banner from './Banner';
import WorkerForm, { WorkerFormData } from './WorkerForm';
import { WorkerProperties } from './Worker';
import WorkerContainer from './WorkerContainer';
export default class App extends WidgetBase {
private _newWorker: Partial = {};
private _workerData: WorkerProperties[] = [
{
firstName: 'Tim',
lastName: 'Jones',
email: 'tim.jones@bizecorp.org',
tasks: [
'6267 - Untangle paperclips',
'4384 - Shred documents',
'9663 - Digitize 1985 archive'
]
},
{
firstName: 'Alicia',
lastName: 'Fitzgerald'
},
{
firstName: 'Hans',
lastName: 'Mueller'
}
];
private _addWorker() {
this._workerData = this._workerData.concat(this._newWorker);
this._newWorker = {};
this.invalidate();
}
private _onFormInput(data: Partial) {
this._newWorker = {
...this._newWorker,
...data
};
this.invalidate();
}
protected render() {
return v('div', [
w(Banner, {}),
w(WorkerForm, {
formData: this._newWorker,
onFormInput: this._onFormInput,
onFormSave: this._addWorker
}),
w(WorkerContainer, {
workerData: this._workerData
})
]);
}
}
PKu PK uvN 4 007_theming/initial/biz-e-corp/src/widgets/Banner.tsimport { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
export default class Banner extends WidgetBase {
protected render() {
return v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]);
}
}
PKQ PK uvN 4 007_theming/initial/biz-e-corp/src/widgets/Worker.tsimport { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/worker.m.css';
export interface WorkerProperties {
firstName?: string;
lastName?: string;
email?: string;
timePerTask?: number;
tasks?: string[];
}
@theme(css)
export default class Worker extends ThemedMixin(WidgetBase) {
private _isFlipped = false;
protected render() {
return v('div', {
classes: this.theme([ css.worker, this._isFlipped ? css.reverse : null ])
}, [
this._renderFront(),
this._renderBack()
]);
}
private _renderFront() {
const {
firstName = 'firstName',
lastName = 'lastName'
} = this.properties;
return v('div', {
classes: this.theme(css.workerFront),
onclick: this.flip
}, [
v('div', { classes: this.theme(css.image) }, []),
v('div', [
v('strong', [ `${lastName}, ${firstName}` ])
])
]
);
}
private _renderBack() {
const {
firstName = 'firstName',
lastName = 'lastName',
email = 'unavailable',
timePerTask = 0,
tasks = []
} = this.properties;
return v('div', {
classes: this.theme(css.workerBack),
onclick: this.flip
}, [
v('div', { classes: this.theme(css.heading) }, [
v('img', {
classes: this.theme(css.imageSmall),
src: 'https://dojo.io/tutorials/resources/worker.svg'
}),
v('div', {
classes: this.theme(css.generalInfo)
}, [
v('div', {
classes : this.theme(css.label)
}, ['Name']),
v('div', [`${lastName}, ${firstName}`]),
v('div', {
classes: this.theme(css.label)
}, ['Email']),
v('div', [`${email}`]),
v('div', {
classes: this.theme(css.label)
}, ['Avg. Time per Task']),
v('div', [`${timePerTask}`])
])
]),
v('div', { classes: this.theme(css.tasks) }, [
v('strong', ['Current Tasks']),
v('div', tasks.map(task => {
return v('div', { classes: this.theme(css.task) }, [ task ]);
}))
])
]
);
}
flip(): void {
this._isFlipped = !this._isFlipped;
this.invalidate();
}
}
PK PK uvN = 007_theming/initial/biz-e-corp/src/widgets/WorkerContainer.tsimport { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { w, v } from '@dojo/framework/widget-core/d';
import Worker, { WorkerProperties } from './Worker';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/workerContainer.m.css';
export interface WorkerContainerProperties {
workerData?: WorkerProperties[];
}
@theme(css)
export default class WorkerContainer extends ThemedMixin(WidgetBase) {
protected render() {
const {
workerData = []
} = this.properties;
const workers = workerData.map((worker, i) => w(Worker, {
key: `worker-${i}`,
...worker
}));
return v('div', {
classes: this.theme(css.container)
}, workers);
}
}
PK! PK uvN 8 007_theming/initial/biz-e-corp/src/widgets/WorkerForm.tsimport { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v, w } from '@dojo/framework/widget-core/d';
import { ThemedMixin, theme } from '@dojo/framework/widget-core/mixins/Themed';
import Button from '@dojo/widgets/button/';
import TextInput from '@dojo/widgets/text-input';
import * as css from '../styles/workerForm.m.css';
export interface WorkerFormData {
firstName: string;
lastName: string;
email: string;
}
export interface WorkerFormProperties {
formData: Partial;
onFormInput: (data: Partial) => void;
onFormSave: () => void;
}
@theme(css)
export default class WorkerForm extends ThemedMixin(WidgetBase) {
private _onSubmit(event: Event) {
event.preventDefault();
this.properties.onFormSave();
}
protected onFirstNameInput(firstName: string) {
this.properties.onFormInput({ firstName });
}
protected onLastNameInput(lastName: string) {
this.properties.onFormInput({ lastName });
}
protected onEmailInput(email: string) {
this.properties.onFormInput({ email });
}
protected render() {
const {
formData: { firstName, lastName, email }
} = this.properties;
return v('form', {
classes: this.theme(css.workerForm),
onsubmit: this._onSubmit
}, [
v('fieldset', { classes: this.theme(css.nameField) }, [
v('legend', { classes: this.theme(css.nameLabel) }, [ 'Name' ]),
w(TextInput, {
key: 'firstNameInput',
label: 'First Name',
labelHidden: true,
placeholder: 'First name',
value: firstName,
required: true,
onInput: this.onFirstNameInput
}),
w(TextInput, {
key: 'lastNameInput',
label: 'Last Name',
labelHidden: true,
placeholder: 'Last name',
value: lastName,
required: true,
onInput: this.onLastNameInput
})
]),
w(TextInput, {
label: 'Email address',
type: 'email',
value: email,
required: true,
onInput: this.onEmailInput
}),
w(Button, { }, [ 'Save' ])
]);
}
}
PK"s PK uvN 6 007_theming/initial/biz-e-corp/tests/functional/all.tsimport './main';
PKI PK uvN 7 007_theming/initial/biz-e-corp/tests/functional/main.ts/* Write your app tests here */
PKQ
PK uvN 0 007_theming/initial/biz-e-corp/tests/unit/all.tsimport './widgets/all';
PKVF PK uvN 1 007_theming/initial/biz-e-corp/tests/unit/main.ts/* Write your app tests here */
PKQ
PK
uvN 2 007_theming/initial/biz-e-corp/tests/unit/widgets/PK uvN ; 007_theming/initial/biz-e-corp/tests/unit/widgets/Banner.tsconst { describe, it } = intern.getInterface('bdd');
import { v, w } from '@dojo/framework/widget-core/d';
import harness from '@dojo/framework/testing/harness';
import Banner from '../../../src/widgets/Banner';
describe('Banner', () => {
it('should render', () => {
const h = harness(() => w(Banner, {}));
h.expect(() => v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]));
});
});
PKYC PK uvN 8 007_theming/initial/biz-e-corp/tests/unit/widgets/all.tsimport './Banner';
PK+4 PK-
uvN A 007_theming/initial/biz-e-corp/PK- uvNjU
+ = 007_theming/initial/biz-e-corp/package.jsonPK-
uvN # A 007_theming/initial/biz-e-corp/src/PK-
uvN % A 007_theming/initial/biz-e-corp/tests/PK- uvN~W W , $ 007_theming/initial/biz-e-corp/tsconfig.jsonPK- uvNįv v * 007_theming/initial/biz-e-corp/tslint.jsonPK- uvN+{k k -
007_theming/initial/biz-e-corp/src/index.htmlPK- uvN4' ' + i 007_theming/initial/biz-e-corp/src/main.cssPK- uvN&S4 0 007_theming/initial/biz-e-corp/src/main.css.d.tsPK- uvNc> * Z 007_theming/initial/biz-e-corp/src/main.tsPK-
uvN * A 007_theming/initial/biz-e-corp/src/styles/PK-
uvN + A 007_theming/initial/biz-e-corp/src/widgets/PK-
uvN 0 A> 007_theming/initial/biz-e-corp/tests/functional/PK-
uvN * A 007_theming/initial/biz-e-corp/tests/unit/PK- uvN' 6 007_theming/initial/biz-e-corp/src/styles/worker.m.cssPK- uvNҌqN N ; 007_theming/initial/biz-e-corp/src/styles/worker.m.css.d.tsPK- uvN ? 007_theming/initial/biz-e-corp/src/styles/workerContainer.m.cssPK- uvN)F D 007_theming/initial/biz-e-corp/src/styles/workerContainer.m.css.d.tsPK- uvNU U : 7 007_theming/initial/biz-e-corp/src/styles/workerForm.m.cssPK- uvN|ɓ ? 007_theming/initial/biz-e-corp/src/styles/workerForm.m.css.d.tsPK- uvNu 1 007_theming/initial/biz-e-corp/src/widgets/App.tsPK- uvNQ 4 `" 007_theming/initial/biz-e-corp/src/widgets/Banner.tsPK- uvN 4 # 007_theming/initial/biz-e-corp/src/widgets/Worker.tsPK- uvN! = , 007_theming/initial/biz-e-corp/src/widgets/WorkerContainer.tsPK- uvN"s 8 >0 007_theming/initial/biz-e-corp/src/widgets/WorkerForm.tsPK- uvNI 6 8 007_theming/initial/biz-e-corp/tests/functional/all.tsPK- uvNQ
7 8 007_theming/initial/biz-e-corp/tests/functional/main.tsPK- uvNVF 0 9 007_theming/initial/biz-e-corp/tests/unit/all.tsPK- uvNQ
1 9 007_theming/initial/biz-e-corp/tests/unit/main.tsPK-
uvN 2 Ax: 007_theming/initial/biz-e-corp/tests/unit/widgets/PK- uvNYC ; : 007_theming/initial/biz-e-corp/tests/unit/widgets/Banner.tsPK- uvN+4 8 <