Skip to content

Commit d6689f0

Browse files
mst101mst101
committed
test(e2e): Add dark mode to demo & e2e tests
1 parent f80de0c commit d6689f0

File tree

5 files changed

+329
-63
lines changed

5 files changed

+329
-63
lines changed

‎example-e2e/App.vue

Lines changed: 101 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
22
<div>
3-
<h1>Datepicker Integration Tests</h1>
3+
<div class="heading">
4+
<h1>Datepicker Integration Tests</h1>
5+
<DarkModeButton
6+
v-model="isDark"
7+
@click="toggleDarkMode"
8+
/>
9+
</div>
410
<div class="example">
511
<h3>Default datepicker...</h3>
612
<DatePicker
@@ -11,6 +17,7 @@
1117
:calendar-button="calendarButton"
1218
:calendar-class="calendarClass"
1319
:clear-button="clearButton"
20+
:dark="isDark"
1421
:day-cell-content="dayCellContent"
1522
:disabled="disabled"
1623
:disabled-dates="disabledDates"
@@ -42,25 +49,25 @@
4249
:wrapper-class="wrapperClass"
4350
:year-picker-range="yearPickerRange"
4451
/>
45-
<code>
46-
&lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
47-
</code>
4852
</div>
4953
</div>
5054
</template>
5155

5256
<script>
5357
import * as lang from '~/locale/index'
5458
import DatePicker from '~/components/DatePicker.vue'
59+
import DarkModeButton from '../example/DarkModeButton.vue'
5560
5661
export default {
5762
name: 'App',
5863
components: {
5964
DatePicker,
65+
DarkModeButton,
6066
},
6167
data() {
6268
return {
6369
languages: lang,
70+
isDark: true,
6471
}
6572
},
6673
computed: {
@@ -176,53 +183,123 @@ export default {
176183
return this.$store.state.yearPickerRange
177184
},
178185
},
186+
methods: {
187+
toggleDarkMode() {
188+
this.isDark = !this.isDark
189+
if (this.isDark) {
190+
document.documentElement.style.setProperty('--theme', 'dark')
191+
document.documentElement.classList.add('dark')
192+
return
193+
}
194+
195+
document.documentElement.style.setProperty('--theme', 'light')
196+
document.documentElement.classList.remove('dark')
197+
},
198+
},
179199
}
180200
</script>
181201

182-
<style>
202+
<style lang="scss">
183203
@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css');
184204
205+
:root {
206+
--theme: 'dark';
207+
color-scheme: var(--theme);
208+
209+
--vdp-bg-dark: #f9f9f9;
210+
--vdp-bg-darker: #eee;
211+
--vdp-bg-darkest: #ddd;
212+
--vdp-border-darker: #ddd;
213+
--vdp-border-darkest: #bbb;
214+
--vdp-slot-link: #176982;
215+
--vdp-text-code: #e83e8c;
216+
}
217+
218+
html.dark {
219+
--vdp-bg-dark: #191919;
220+
--vdp-bg-darker: #222;
221+
--vdp-bg-darkest: #333;
222+
--vdp-border-darker: #333;
223+
--vdp-border-darkest: #444;
224+
--vdp-slot-link: #4bd;
225+
--vdp-text-code: #ed65a3;
226+
}
227+
185228
body {
229+
background: var(--vdp-bg);
230+
color: var(--vdp--text);
186231
font-family: 'Helvetica Neue Light', Helvetica, sans-serif;
187232
padding: 1em 2em 2em;
188233
}
189234
235+
.heading {
236+
align-items: center;
237+
display: flex;
238+
justify-content: space-between;
239+
margin-bottom: 2em;
240+
}
241+
190242
input,
191243
select {
244+
background-color: var(--vdp-bg);
245+
border: 1px solid var(--vdp-border);
192246
padding: 0.75em 0.5em;
193-
font-size: 100%;
194-
border: 1px solid #ccc;
195247
width: 100%;
196248
}
197249
198-
.example {
199-
background: #f2f2f2;
200-
border: 1px solid #ddd;
201-
padding: 0 1em 1em;
202-
margin-bottom: 2em;
250+
h3 {
251+
margin-bottom: 0.5em;
203252
}
204253
205-
code,
206-
pre {
207-
margin: 1em 0;
254+
.example {
255+
background: var(--vdp-bg-dark);
256+
border: 1px solid var(--vdp-border);
208257
padding: 1em;
209-
border: 1px solid #bbb;
210-
display: block;
211-
background: #ddd;
212-
border-radius: 3px;
258+
margin-bottom: 2em;
213259
}
214260
215-
h5 {
216-
font-size: 100%;
217-
padding: 0;
261+
.slot {
262+
background-color: var(--vdp-cell-highlighted-bg);
263+
padding: 0.5em;
264+
265+
> a {
266+
color: var(--vdp-slot-link);
267+
border-radius: 0.1em;
268+
padding: 0.1em;
269+
}
218270
}
219271
220-
h3 {
221-
margin-top: 20px;
272+
.settings {
273+
background: var(--vdp-bg-darker);
274+
border: 1px solid var(--vdp-border-darker);
275+
border-radius: 0.5em;
276+
margin: 1em 0;
277+
padding: 1em;
278+
279+
h5 {
280+
font-size: 100%;
281+
margin-bottom: 1em;
282+
}
222283
}
223284
224285
.form-group label {
286+
display: block;
225287
font-size: 80%;
288+
margin-bottom: 0.5em;
289+
}
290+
291+
code,
292+
pre {
293+
background: var(--vdp-bg-darkest);
294+
border: 1px solid var(--vdp-border-darkest);
295+
border-radius: 0.5em;
296+
color: var(--vdp-text-code);
226297
display: block;
298+
margin: 1em 0;
299+
padding: 1em;
300+
}
301+
302+
.overflow-scroll {
303+
overflow: scroll;
227304
}
228305
</style>

‎example-e2e/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ app.mount('#app')
1111

1212
// eslint-disable-next-line no-underscore-dangle
1313
window.__store__ = store
14+
15+
// Set to dark mode...
16+
document.documentElement.style.setProperty('--theme', 'dark')
17+
document.documentElement.classList.add('dark')

‎example/DarkModeButton.vue

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
4+
const props = defineProps({
5+
modelValue: {
6+
type: Boolean,
7+
default: false,
8+
},
9+
})
10+
11+
const otherMode = computed(() => (props.modelValue ? 'light' : 'dark'))
12+
const title = computed(() => `Switch to ${otherMode.value} mode`)
13+
</script>
14+
15+
<template>
16+
<button :title="title">
17+
<svg
18+
v-if="props.modelValue"
19+
viewBox="0 0 32 32"
20+
>
21+
<path
22+
d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
23+
fill="currentColor"
24+
></path>
25+
</svg>
26+
<svg
27+
v-else
28+
viewBox="0 0 32 32"
29+
>
30+
<path
31+
d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
32+
fill="currentColor"
33+
></path>
34+
<path
35+
d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z"
36+
fill="currentColor"
37+
></path>
38+
<path
39+
d="M2 15.005h5v2H2z"
40+
fill="currentColor"
41+
></path>
42+
<path
43+
d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
44+
fill="currentColor"
45+
></path>
46+
<path
47+
d="M15 25.005h2v5h-2z"
48+
fill="currentColor"
49+
></path>
50+
<path
51+
d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
52+
fill="currentColor"
53+
></path>
54+
<path
55+
d="M25 15.005h5v2h-5z"
56+
fill="currentColor"
57+
></path>
58+
<path
59+
d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
60+
fill="currentColor"
61+
></path>
62+
<path
63+
d="M15 2.005h2v5h-2z"
64+
fill="currentColor"
65+
></path>
66+
</svg>
67+
</button>
68+
</template>
69+
70+
<style lang="scss" scoped>
71+
html {
72+
button {
73+
background: transparent;
74+
border: none;
75+
border-radius: 0.3em;
76+
fill: currentColor;
77+
height: 40px;
78+
width: 40px;
79+
80+
&:hover {
81+
background: #eee;
82+
}
83+
84+
&:focus {
85+
outline: 0.1em solid black;
86+
}
87+
88+
&:active {
89+
background: #ccc;
90+
}
91+
}
92+
&.dark {
93+
button {
94+
color: #aaa;
95+
96+
&:hover {
97+
background: #333;
98+
}
99+
100+
&:focus {
101+
outline: 0.1em solid white;
102+
}
103+
104+
&:active {
105+
background: #555;
106+
}
107+
}
108+
}
109+
}
110+
</style>

0 commit comments

Comments
 (0)