Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 4de58de

Browse files
joseacabanerosjoseacabaneros
committed
Configured eslint rules, created architecture of the demo, and implemented first components
1 parent eb3d1cb commit 4de58de

25 files changed

+301
-138
lines changed

‎.eslintrc.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,23 @@ module.exports = {
1010
],
1111
rules: {
1212
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13-
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14+
'semi': ['error', 'always'],
15+
'space-before-function-paren': ['error', 'never'],
16+
'template-curly-spacing': ['error', 'always'],
17+
'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]
1418
},
1519
parserOptions: {
1620
parser: '@typescript-eslint/parser'
1721
},
1822
overrides: [
1923
{
20-
files: [
21-
'**/__tests__/*.{j,t}s?(x)'
22-
],
23-
env: {
24-
jest: true
25-
}
24+
files: ['**/__tests__/*.{j,t}s?(x)'],
25+
env: { jest: true }
26+
},
27+
{
28+
files: ['*.vue'],
29+
rules: { indent: 'off' }
2630
}
2731
]
28-
}
32+
};

‎README.md

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,12 @@
1-
# empathy-vue-carousel
1+
# Empathy Vue Carousel
22

3-
## Project setup
4-
```
5-
npm install
6-
```
7-
8-
### Compiles and hot-reloads for development
9-
```
10-
npm run serve
11-
```
12-
13-
### Compiles and minifies for production
14-
```
15-
npm run build
16-
```
3+
Vue component of an awesome configurable carousel
174

18-
### Run your tests
19-
```
20-
npm run test
21-
```
5+
## Table of Contents
6+
- [Installation](#installation)
227

23-
### Lints and fixes files
24-
```
25-
npm run lint
26-
```
8+
## Installation
279

28-
### Run your unit tests
29-
```
30-
npm run test:unit
10+
``` bash
11+
npm install empathy-vue-carousel
3112
```
32-
33-
### Customize configuration
34-
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ module.exports = {
22
presets: [
33
'@vue/app'
44
]
5-
}
5+
};

‎jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,4 @@ module.exports = {
3434
babelConfig: true
3535
}
3636
}
37-
}
37+
};

‎postcss.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ module.exports = {
22
plugins: {
33
autoprefixer: {}
44
}
5-
}
5+
};

‎public/favicon.ico

-251 Bytes
Binary file not shown.

‎public/fonts/montserrat-v12-latin-500.eot

21.4 KB
Binary file not shown.

‎public/fonts/montserrat-v12-latin-500.ttf

43.7 KB
Binary file not shown.

‎public/fonts/montserrat-v12-latin-500.woff

22.3 KB
Binary file not shown.

‎public/fonts/montserrat-v12-latin-500.woff2

18.3 KB
Binary file not shown.

‎public/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>vue-carousel</title>
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<title>Empathy Vue Carousel Demo</title>
910
</head>
1011
<body>
1112
<noscript>
12-
<strong>We're sorry but vue-carousel doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
<strong>We're sorry but empathy-vue-carousel doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1314
</noscript>
14-
<div id="app"></div>
15-
<!-- built files will be auto injected -->
15+
<h1>Empathy Vue Carousel Demo</h1>
16+
<div id="carouselDemo"></div>
1617
</body>
1718
</html>

‎public/style.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* montserrat-500 - latin */
2+
@font-face {
3+
font-family: 'Montserrat';
4+
font-style: normal;
5+
font-weight: 500;
6+
src: url('fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */
7+
src: url('fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
8+
url('fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
9+
url('fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */
10+
url('fonts/montserrat-v12-latin-500.ttf') format('truetype'); /* Safari, Android, iOS */
11+
}
12+
13+
body {
14+
margin: 50px 0 0;
15+
font-family: 'Montserrat', sans-serif;
16+
background-color: azure;
17+
}
18+
19+
h1 {
20+
text-align: center;
21+
}
22+
23+
.eco-carousel {
24+
width: 50%;
25+
margin: auto;
26+
}

‎src/App.vue

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,61 @@
11
<template>
2-
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
5-
</div>
2+
<Carousel :items="items"
3+
:itemsPerSlide="4"
4+
:withArrows="true"/>
65
</template>
76

87
<script lang="ts">
9-
import { Component, Vue } from 'vue-property-decorator'
10-
import HelloWorld from './components/HelloWorld.vue'
8+
import Carousel from '@/components/carousel.vue';
9+
import { Item as ItemModel } from '@/models/item.model';
10+
import { Component, Vue } from 'vue-property-decorator';
1111
12-
@Component({
13-
components: {
14-
HelloWorld
12+
@Component({
13+
components: { Carousel }
14+
})
15+
export default class App extends Vue {
16+
get items(): ItemModel[] {
17+
return [
18+
{
19+
id: '1',
20+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/iv4shrrdg6ls6a8vo9ij/nikecourt-tennis-t-shirt-v1BtBt.jpg',
21+
description: 'NikeCourt',
22+
price: '24.95€'
23+
},
24+
{
25+
id: '2',
26+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/s059e5bgpav59bllnwli/sb-icon-printed-pullover-skate-hoodie-9kFSZL.jpg',
27+
description: 'Nike SB Icon',
28+
price: '59.95€'
29+
},
30+
{
31+
id: '3',
32+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/zrhuv770kihyc9quujr5/sportswear-club-fleece-pullover-hoodie-q1JsNZ.jpg',
33+
description: 'Nike Sportwear Club Fleece',
34+
price: '£42.95'
35+
},
36+
{
37+
id: '4',
38+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/wew3rrez4rfkaffl7pgj/aerolayer-running-jacket-Z02VhD.jpg',
39+
description: 'Nike AeroLayer',
40+
price: '£89.95'
41+
},
42+
{
43+
id: '5',
44+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/meduqezz0yx1s375pawv/sportswear-n98-knit-warm-up-jacket-zqXWF4.jpg',
45+
description: 'Nike Sportswear N98',
46+
price: '54.95€'
47+
},
48+
{
49+
id: '6',
50+
image: 'https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/nfzn9yhfp1pakzlwefna/hurley-siege-anorak-jacket-7rVdGj.jpg',
51+
description: 'Hurley Siege Anorak',
52+
price: '£72.95'
53+
}
54+
];
55+
}
1556
}
16-
})
17-
export default class App extends Vue {}
1857
</script>
1958

2059
<style lang="scss">
21-
#app {
22-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
23-
-webkit-font-smoothing: antialiased;
24-
-moz-osx-font-smoothing: grayscale;
25-
text-align: center;
26-
color: #2c3e50;
27-
margin-top: 60px;
28-
}
60+
2961
</style>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/components/carousel.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="eco-carousel eco__carousel">
3+
<Slider :items="items"
4+
:itemsPerSlide="itemsPerSlide"
5+
:withArrows="withArrows"/>
6+
<Pagination v-if="withPagination"/>
7+
</div>
8+
</template>
9+
10+
<script lang="ts">
11+
import Pagination from '@/components/pagination.vue';
12+
import Slider from '@/components/slider.vue';
13+
import { Item as ItemModel } from '@/models/item.model';
14+
import { Component, Prop, Vue } from 'vue-property-decorator';
15+
16+
@Component({
17+
components: { Slider, Pagination }
18+
})
19+
export default class Carousel extends Vue {
20+
@Prop({ required: true })
21+
items!: ItemModel[];
22+
23+
@Prop({ default: 4 })
24+
itemsPerSlide!: number;
25+
26+
@Prop({ default: true })
27+
withPagination!: boolean;
28+
29+
@Prop({ default: true })
30+
withArrows!: boolean;
31+
}
32+
</script>
33+
34+
<style lang="scss">
35+
.eco-carousel {
36+
overflow: hidden;
37+
}
38+
</style>

‎src/components/item.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<article class="eco-carousel-item eco-carousel__item">
3+
<img class="eco-carousel-item__image"
4+
:src="item.image">
5+
<p class="eco-carousel-item__description">{{ item.description }}</p>
6+
<p class="eco-carousel-item__price">{{ item.price }}</p>
7+
</article>
8+
</template>
9+
10+
<script lang="ts">
11+
import { Item as ItemModel } from '@/models/item.model';
12+
import { Component, Prop, Vue } from 'vue-property-decorator';
13+
14+
@Component
15+
export default class Item extends Vue {
16+
@Prop({ required: true })
17+
item!: ItemModel;
18+
}
19+
</script>
20+
21+
<style lang="scss">
22+
.eco-carousel-item {
23+
text-align: center;
24+
25+
&__image {
26+
width: 100%;
27+
}
28+
}
29+
</style>

‎src/components/pagination.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="eco-carousel-pagination">
3+
<p>----- It will be the pagination -----</p>
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import { Component, Vue } from 'vue-property-decorator';
9+
10+
@Component
11+
export default class Pagination extends Vue {
12+
13+
}
14+
</script>
15+
16+
<style lang="scss">
17+
.eco-carousel-pagination {
18+
text-align: center;
19+
}
20+
</style>

0 commit comments

Comments
 (0)