Skip to content
This repository was archived by the owner on Jun 8, 2022. It is now read-only.

Commit 71b65eb

Browse files
SebKaySebKay
authored
Merge pull request #23 from SebKay/vue-components
Vue components
2 parents 543993c + 67eeb61 commit 71b65eb

20 files changed

+9889
-533
lines changed

‎composer.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"test:php-testdox": "@test:php --testdox",
4848
"test:php-coverage": "@test:php --coverage-html coverage",
4949
"test:php:unit": "@test:php --testsuite Unit",
50-
"test:php:integration": "@test:php --testsuite Integration"
50+
"test:php:integration": "@test:php --testsuite Integration",
51+
"test:js": "yarn run vue-cli-service test:unit"
5152
}
5253
}

‎package.json

+38-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,34 @@
11
{
22
"dependencies": {
3-
"autoprefixer": "^10.2.5",
4-
"css-loader": "^5.0.2",
5-
"mini-css-extract-plugin": "^1.3.6",
6-
"postcss-loader": "^5.1.0",
7-
"sass": "^1.32.7",
8-
"sass-loader": "^11.0.1",
9-
"vue": "^3.0.5",
10-
"webpack": "^5.21.2",
11-
"webpack-cli": "^4.5.0",
12-
"webpack-notifier": "^1.13.0"
3+
"@babel/core": "^7.14",
4+
"@babel/preset-env": "^7.14",
5+
"@vue/cli-plugin-babel": "~4.5",
6+
"@vue/compiler-sfc": "^3.0",
7+
"autoprefixer": "^10.2",
8+
"babel-loader": "^8.2.2",
9+
"css-loader": "^5.0",
10+
"mini-css-extract-plugin": "^1.3",
11+
"postcss": "^8.1",
12+
"postcss-loader": "^5.1",
13+
"sass": "^1.32",
14+
"sass-loader": "^11.0",
15+
"vue": "^3.0",
16+
"vue-loader": "^16.2",
17+
"webpack": "^5.21",
18+
"webpack-cli": "^4.5",
19+
"webpack-notifier": "^1.13"
20+
},
21+
"devDependencies": {
22+
"@vue/cli-plugin-unit-jest": "~4.5",
23+
"@vue/cli-service": "~4.5",
24+
"@vue/test-utils": "^2.0.0-0",
25+
"vue-jest": "^5.0.0-0"
1326
},
1427
"scripts": {
1528
"dev": "webpack --mode=development",
1629
"prod": "webpack --mode=production",
17-
"watch": "webpack --mode=development --watch"
30+
"watch": "webpack --mode=development --watch",
31+
"test:unit": "vue-cli-service test:unit"
1832
},
1933
"postcss": {
2034
"plugins": [
@@ -25,5 +39,17 @@
2539
"> 1%",
2640
"last 1 version",
2741
"not dead"
28-
]
42+
],
43+
"babel": {
44+
"presets": [
45+
"@babel/preset-env",
46+
"@vue/cli-plugin-babel/preset"
47+
]
48+
},
49+
"jest": {
50+
"preset": "@vue/cli-plugin-unit-jest",
51+
"transform": {
52+
"^.+\\.vue$": "vue-jest"
53+
}
54+
}
2955
}

‎resources/assets/js/app.js

+2-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
import { createApp } from 'vue';
2+
import App from './src/components/App.vue';
23

3-
const App = createApp({
4-
name: 'App',
5-
data() {
6-
return {
7-
name: 'Spindle'
8-
}
9-
},
10-
});
11-
12-
App.mount('#app');
4+
createApp(App).mount('#app')

‎resources/assets/js/src/components/App.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script>
2+
import AppHeader from './AppHeader.vue';
3+
import AppMain from './AppMain.vue';
4+
import AppFooter from './AppFooter.vue';
5+
6+
import Modal from './Modal.vue';
7+
8+
export default {
9+
name: 'App',
10+
11+
components: {
12+
AppHeader,
13+
AppMain,
14+
AppFooter,
15+
Modal,
16+
},
17+
18+
data() {
19+
return {
20+
title: 'Spindle',
21+
modalVisible: false,
22+
}
23+
},
24+
25+
methods: {
26+
openModal() {
27+
this.modalVisible = true;
28+
},
29+
30+
closeModal() {
31+
this.modalVisible = false;
32+
},
33+
},
34+
};
35+
</script>

‎resources/assets/js/src/components/AppFooter.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<footer class="site-footer">
3+
<slot></slot>
4+
</footer>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data() {
10+
return {
11+
//
12+
}
13+
},
14+
};
15+
</script>

‎resources/assets/js/src/components/AppHeader.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<header class="site-header">
3+
<h1>
4+
<a href="/">
5+
{{ title }}
6+
</a>
7+
</h1>
8+
9+
<slot></slot>
10+
</header>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data() {
16+
return {
17+
//
18+
}
19+
},
20+
props: ['title'],
21+
};
22+
</script>

‎resources/assets/js/src/components/AppMain.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<main class="site-main">
3+
<slot></slot>
4+
</main>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data() {
10+
return {
11+
//
12+
}
13+
},
14+
};
15+
</script>

‎resources/assets/js/src/components/Modal.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<transition name="fade">
3+
<div class="modal">
4+
<div class="modal__outer">
5+
<div class="modal__inner">
6+
<div class="modal__header" v-if="$slots.title">
7+
<h6 class="modal__title">
8+
<slot name="title"></slot>
9+
</h6>
10+
</div>
11+
12+
<div class="modal__content">
13+
<slot></slot>
14+
</div>
15+
16+
<div class="modal__footer">
17+
<button class="btn" @click="close()">
18+
Close
19+
</button>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</transition>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data() {
30+
return {
31+
//
32+
}
33+
},
34+
35+
methods: {
36+
close() {
37+
this.$emit('close-modal');
38+
},
39+
},
40+
};
41+
</script>

‎resources/assets/js/tests/unit/Modal.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { shallowMount } from '@vue/test-utils'
2+
3+
import Modal from '../../src/components/Modal.vue';
4+
5+
describe('Modal.vue', () => {
6+
it('Emits the close-modal event', () => {
7+
const wrapper = shallowMount(Modal);
8+
9+
wrapper.find('button').trigger('click');
10+
11+
expect(wrapper.emitted()).toHaveProperty('close-modal');
12+
});
13+
});

‎resources/assets/scss/app.scss

+3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99
@import 'common/forms';
1010
@import 'common/utilities';
1111
@import 'common/general';
12+
@import 'common/transitions';
1213

1314
@import 'elements/button';
1415

1516
@import 'components/forms/form-notice';
1617
@import 'components/forms/form-row';
1718

19+
@import 'components/modal';
20+
1821
@import 'components/site/wrap';
1922
@import 'components/site/header';
2023
@import 'components/site/main';

‎resources/assets/scss/common/_transitions.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.fade-enter-active,
2+
.fade-leave-active {
3+
transition: opacity ease 0.25s;
4+
}
5+
6+
.fade-enter-from,
7+
.fade-leave-to {
8+
opacity: 0;
9+
}

‎resources/assets/scss/components/_modal.scss

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.modal {
2+
width: 100%;
3+
height: 100%;
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
z-index: 900;
8+
background-color: rgba(0,0,0,0.6);
9+
}
10+
11+
.modal__outer {
12+
width: 100%;
13+
height: 100%;
14+
display: flex;
15+
}
16+
17+
.modal__inner {
18+
width: 94%;
19+
max-width: 600px;
20+
margin: auto;
21+
position: relative;
22+
overflow-y: auto;
23+
border-radius: $border-radius-1;;
24+
background: #fff;
25+
}
26+
27+
.modal__header,
28+
.modal__footer {
29+
padding-right: 30px;
30+
padding-left: 30px;
31+
background: #ddd;
32+
}
33+
34+
.modal__header {
35+
padding-top: 30px;
36+
padding-bottom: 30px;
37+
}
38+
39+
.modal__title {
40+
@extend h4;
41+
}
42+
43+
.modal__content {
44+
padding: 30px;
45+
}
46+
47+
.modal__footer {
48+
padding-top: 15px;
49+
padding-bottom: 15px;
50+
}

‎resources/assets/scss/components/site/_footer.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
.site-footer {
22
margin-top: 40px;
3+
// Type
4+
text-align: center;
35
}

‎resources/assets/scss/components/site/_main.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
.site-main {
22
margin-top: 40px;
3+
margin-bottom: 40px;
4+
padding-top: 40px;
5+
padding-bottom: 40px;
6+
border-top: $border-2;
7+
border-bottom: $border-2;
38
}

‎resources/views/base.twig

+18-8
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,27 @@
1111
</head>
1212
<body>
1313
<div id="app" class="site-wrap" v-cloak>
14-
<header class="site-header">
15-
{% include "partials/logo.twig" %}
16-
</header>
14+
<app-header :title="title"></app-header>
1715

18-
<main class="site-main">
16+
<app-main>
1917
{{ block('body') }}
20-
</main>
18+
</app-main>
2119

22-
<footer class="site-footer">
23-
{# Footer #}
24-
</footer>
20+
<app-footer>
21+
<p>
22+
&copy; {{ "now" | date('Y') }}. All rights reserved.
23+
</p>
24+
</app-footer>
25+
26+
<modal v-show="modalVisible" @close-modal="closeModal()">
27+
<template v-slot:title>
28+
Modal Example
29+
</template>
30+
31+
<p>
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus sapien, mattis quis orci quis, dignissim tempor augue. Sed in dictum est, et ultrices justo. Quisque hendrerit pulvinar iaculis.
33+
</p>
34+
</modal>
2535
</div>
2636

2737
<script src="/assets/js/app.js"></script>

0 commit comments

Comments
 (0)