Skip to content

Commit 2d9e902

Browse files
Allwithyou999Allwithyou999
committed
Update
1 parent 13fcb5b commit 2d9e902

30 files changed

+1040
-723
lines changed

Diff for: ‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

Diff for: ‎.env

-1
This file was deleted.

Diff for: ‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist/*.js

Diff for: ‎.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
extends: ['eslint:recommended', 'plugin:vue/recommended'],
3+
parserOptions: {
4+
parser: 'babel-eslint',
5+
},
6+
env: {
7+
node: true,
8+
browser: true
9+
},
10+
'rules': {
11+
'generator-star-spacing': 0,
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
13+
},
14+
globals: {
15+
requestAnimationFrame: true,
16+
performance: true
17+
}
18+
}

Diff for: ‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log
4+
dist
5+
yarn-error.log
6+
PLAN.md

Diff for: ‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

Diff for: ‎.vuepress/components/BaseButton.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<button
3+
class="button"
4+
:class="{ animate: clicked }"
5+
@click="click"
6+
>
7+
<span class="button__label">
8+
{{ label }}
9+
</span>
10+
</button>
11+
</template>
12+
13+
<script>
14+
export default {
15+
props: {
16+
label: {
17+
type: String,
18+
required: true,
19+
},
20+
},
21+
22+
data() {
23+
return {
24+
clicked: false,
25+
};
26+
},
27+
28+
methods: {
29+
click() {
30+
this.clicked = true;
31+
this.$emit('click');
32+
33+
setTimeout(() => {
34+
this.clicked = false;
35+
}, 600);
36+
},
37+
},
38+
};
39+
</script>
40+
41+
<style lang="scss" scoped>
42+
@import "./styles/index.scss";
43+
44+
.button {
45+
@include circle(50px);
46+
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
padding: 0;
51+
outline: none;
52+
justify-content: center;
53+
border: 1px solid $primary-gradient-end;
54+
background-color: transparent;
55+
transition: all 0.3s ease-in-out;
56+
57+
&:hover {
58+
background-color: $primary-gradient-end;
59+
60+
.button__label {
61+
color: $c-white;
62+
}
63+
}
64+
65+
&:global(.animate) {
66+
pointer-events: none;
67+
animation: scaleUpAndDown 0.6s;
68+
animation-timing-function: ease-in-out;
69+
}
70+
71+
&__label {
72+
min-width: 50px;
73+
font-size: 32px;
74+
color: $primary-gradient-end;
75+
}
76+
}
77+
</style>

Diff for: ‎.vuepress/components/BaseSwitch.vue

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<div class="switch-container">
3+
<span class="switch-label" :class="{ isSelected: checked }">{{ label }}</span>
4+
<span
5+
class="switch"
6+
>
7+
<input
8+
class="switchInput"
9+
:checked="checked"
10+
type="checkbox"
11+
>
12+
<span
13+
ref="interactElement"
14+
class="switchHandle"
15+
/>
16+
</span>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import interact from 'interact.js';
22+
23+
export default {
24+
props: {
25+
checked: {
26+
type: Boolean,
27+
default: false,
28+
},
29+
label: {
30+
type: String,
31+
default: ''
32+
},
33+
},
34+
35+
data() {
36+
return {
37+
value: null,
38+
};
39+
},
40+
41+
watch: {
42+
value(value) {
43+
this.$emit('change', value);
44+
},
45+
checked(value) {
46+
this.value = value;
47+
},
48+
},
49+
50+
beforeMount() {
51+
this.value = this.checked;
52+
},
53+
54+
mounted() {
55+
this.$emit('change', this.value);
56+
57+
interact(this.$refs.interactElement)
58+
.draggable({
59+
onmove: (event) => {
60+
if (event.dx > 0 && this.value !== true) this.value = true;
61+
if (event.dx < 0 && this.value !== false) this.value = false;
62+
},
63+
})
64+
.on('tap', () => { this.value = !this.value; });
65+
},
66+
};
67+
</script>
68+
69+
<style lang="scss" scoped>
70+
@import "./styles/index.scss";
71+
72+
.switch-container {
73+
display: flex;
74+
align-items: center;
75+
max-width: 300px;
76+
justify-content: space-between;
77+
}
78+
79+
.switch-label {
80+
margin-right: 10px;
81+
font-size: 14px;
82+
83+
&.isSelected {
84+
color: $primary-gradient-end;
85+
}
86+
}
87+
88+
.switch {
89+
@include sizing(52px 31px);
90+
91+
position: relative;
92+
display: inline-block;
93+
94+
&Handle {
95+
@include absolute(top 0 right 0 bottom 0 left 0);
96+
97+
cursor: pointer;
98+
border-radius: 18px;
99+
background: grey;
100+
transition: 0.4s;
101+
102+
@include before() {
103+
@include circle(26px);
104+
@include absolute(top 1px left 0);
105+
106+
border: 1px solid $c-white;
107+
background-color: $c-white;
108+
transform: translateX(2px);
109+
transition: all 0.4s;
110+
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
111+
}
112+
}
113+
114+
&Input {
115+
display: none;
116+
117+
&:checked + .switchHandle {
118+
background-color: $primary-gradient-end;
119+
}
120+
121+
&:focus + .switchHandle {
122+
box-shadow: 0;
123+
}
124+
125+
&:checked + .switchHandle::before {
126+
transform: translateX(22px);
127+
}
128+
}
129+
}
130+
</style>

0 commit comments

Comments
 (0)