Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 6969a0b

Browse filesBrowse files
mcibiquemcibique
committed
Added code for testing provide/inject and scoped slots.
1 parent 946af68 commit 6969a0b
Copy full SHA for 6969a0b
Expand file treeCollapse file tree

18 files changed

+605
-61
lines changed

‎package-lock.json

Copy file name to clipboardExpand all lines: package-lock.json
+47-23Lines changed: 47 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Copy file name to clipboardExpand all lines: package.json
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"inversify-vanillajs-helpers": "2.0.0",
2727
"lodash": "4.17.11",
2828
"reflect-metadata": "0.1.12",
29-
"vue": "2.5.17",
29+
"vue": "2.5.22",
3030
"vue-property-decorator": "7.2.0",
3131
"vue-router": "3.0.2",
3232
"vuex": "3.0.1",
@@ -38,7 +38,7 @@
3838
"@vue/cli-plugin-unit-mocha": "3.2.0",
3939
"@vue/cli-service": "3.2.0",
4040
"@vue/eslint-config-standard": "4.0.0",
41-
"@vue/test-utils": "1.0.0-beta.26",
41+
"@vue/test-utils": "1.0.0-beta.29",
4242
"axios-mock-adapter": "1.15.0",
4343
"babel-plugin-istanbul": "5.1.0",
4444
"chai": "4.2.0",
@@ -52,6 +52,6 @@
5252
"sinon": "4.5.0",
5353
"sinon-chai": "3.3.0",
5454
"sinon-stub-promise": "4.0.0",
55-
"vue-template-compiler": "2.5.17"
55+
"vue-template-compiler": "2.5.22"
5656
}
5757
}

‎src/components/Emails.vue

Copy file name to clipboardExpand all lines: src/components/Emails.vue
+69-14Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,51 @@
11
<template>
2-
<section class="c-emails" tid="emails">
3-
<h1 class="c-emails__header" tid="emails__header" key="emails-header" v-if="hasUnreadEmails">You have {{ unreadEmails.length }} new emails:</h1>
4-
<h1 class="c-emails__header" tid="emails__header" key="emails-header" v-else>You have no unread emails</h1>
5-
<ul class="c-emails__list" tid="emails__list">
6-
<li class="c-emails__list-item c-email" :class="{ 'c-email--unread': email.unread }" v-for="email in emails" :key="email.id" tid="email">
7-
<div class="c-email__subject" :class="{ 'c-email__subject--unread': email.unread }" @click="toggleEmail(email)" tid="email__subject">{{ email.subject }}</div>
8-
<em class="c-email__sender" tid="email__sender">from {{ email.sender }}</em>
9-
<div class="c-email__body" v-show="openEmailId === email.id" tid="email__body">{{ email.body }}</div>
10-
</li>
11-
</ul>
2+
<section class="c-emails" tid="c-emails">
3+
<h1 class="c-emails__header" tid="c-emails__header" v-if="hasUnreadEmails">You have {{ unreadEmails.length }} new emails:</h1>
4+
<h1 class="c-emails__header" tid="c-emails__header" v-else>You have no unread emails</h1>
5+
<my-checkbox-list>
6+
<ul class="c-emails__list" tid="c-emails__list">
7+
<li class="c-emails-list-item c-email" :class="{ 'c-email--unread': email.unread }" v-for="email in emailsToDisplay" :key="email.id" tid="c-email">
8+
<my-checkbox class="c-emails-list-item__checkbox" tid="c-emails-list-item__checkbox" v-model="email.selected"></my-checkbox>
9+
<div class="c-emails-list-item__content">
10+
<div class="c-email__subject" :class="{ 'c-email__subject--unread': email.unread }" @click="toggleEmail(email)" tid="c-email__subject">{{ email.subject }}</div>
11+
<em class="c-email__sender" tid="c-email__sender">from {{ email.sender }}</em>
12+
<div class="c-email__body" v-show="openEmailId === email.id" tid="c-email__body">{{ email.body }}</div>
13+
</div>
14+
</li>
15+
</ul>
16+
<my-checkbox-list-status>
17+
<template slot-scope="{ numberOfCheckboxes, numberOfSelectedCheckboxes }">
18+
<div v-if="numberOfSelectedCheckboxes > 0">
19+
{{ numberOfSelectedCheckboxes }} of {{ numberOfCheckboxes }} emails have been selected.
20+
<a href="" class="c-emails__action" @click.prevent="selectAll()" v-if="numberOfSelectedCheckboxes !== numberOfCheckboxes">Select all</a>
21+
<a href="" class="c-emails__action" @click.prevent="deselectAll()" v-if="numberOfSelectedCheckboxes !== 0">Deselect all</a>
22+
</div>
23+
<div v-else>
24+
No emails have been selected.
25+
<a href="" class="c-emails__action" @click.prevent="selectAll()">Select all</a>
26+
</div>
27+
</template>
28+
</my-checkbox-list-status>
29+
</my-checkbox-list>
1230
</section>
1331
</template>
1432

1533
<script>
1634
import Vue from 'vue';
17-
import { Component, Prop } from 'vue-property-decorator';
35+
import { Component, Prop, Watch } from 'vue-property-decorator';
1836
19-
@Component
37+
import MyCheckbox from './MyCheckbox';
38+
import MyCheckboxList from './MyCheckboxList';
39+
import MyCheckboxListStatus from './MyCheckboxListStatus';
40+
41+
@Component({
42+
components: { MyCheckbox, MyCheckboxList, MyCheckboxListStatus }
43+
})
2044
export default class Dashboard extends Vue {
2145
@Prop({ type: Array, default: () => [] }) emails;
2246
2347
openEmailId = null;
48+
emailsToDisplay = [];
2449
2550
get unreadEmails () {
2651
return this.emails.filter(e => e.unread);
@@ -30,6 +55,11 @@ export default class Dashboard extends Vue {
3055
return this.unreadEmails.length > 0;
3156
}
3257
58+
@Watch('emails', { immediate: true })
59+
onEmailsUpdated () {
60+
this.emailsToDisplay = this.emails.map(email => ({ ...email, selected: false }));
61+
}
62+
3363
toggleEmail (email) {
3464
if (this.openEmailId === email.id) {
3565
this.openEmailId = null;
@@ -38,6 +68,18 @@ export default class Dashboard extends Vue {
3868
this.openEmailId = email.id;
3969
}
4070
}
71+
72+
selectAll () {
73+
for (let email of this.emailsToDisplay) {
74+
email.selected = true;
75+
}
76+
}
77+
78+
deselectAll () {
79+
for (let email of this.emailsToDisplay) {
80+
email.selected = false;
81+
}
82+
}
4183
}
4284
</script>
4385

@@ -48,13 +90,26 @@ export default class Dashboard extends Vue {
4890
padding: 0;
4991
}
5092
93+
.c-emails__action + .c-emails__action {
94+
margin-left: 0.5rem;
95+
}
96+
5197
.c-email {
52-
display: block;
98+
display: flex;
99+
align-items: center;
100+
}
101+
102+
.c-emails-list-item__checkbox {
103+
padding: 0 1rem;
104+
}
105+
106+
.c-emails-list-item__content {
53107
padding: 1rem 2.5rem 1rem 6rem;
54108
position: relative;
109+
flex-grow: 1;
55110
}
56111
57-
.c-email:before {
112+
.c-emails-list-item__content:before {
58113
content: "✉";
59114
font-size: 6rem;
60115
line-height: 6rem;

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.