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

File tree

20 files changed

+9889
-533
lines changed

20 files changed

+9889
-533
lines changed

‎composer.json‎

Lines changed: 2 additions & 1 deletion
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‎

Lines changed: 38 additions & 12 deletions
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‎

Lines changed: 2 additions & 10 deletions
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‎

Lines changed: 35 additions & 0 deletions
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‎

Lines changed: 15 additions & 0 deletions
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‎

Lines changed: 22 additions & 0 deletions
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‎

Lines changed: 15 additions & 0 deletions
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‎

Lines changed: 41 additions & 0 deletions
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‎

Lines changed: 13 additions & 0 deletions
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‎

Lines changed: 3 additions & 0 deletions
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';

0 commit comments

Comments
 (0)