Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit 8c9c98c

Browse files
author
Łukasz Florczak
authored
Merge pull request #75 from lukaszflorczak/master
v1.0.0
2 parents 49e6d66 + 1e90493 commit 8c9c98c

12 files changed

+100
-20
lines changed

‎README.md‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,23 @@ More demos and examples coming soon in [vue-agile CodePens collection](https://c
99

1010
---
1111

12-
🎉 **After about a year from the last version, I'm happy and excited to inform, that new `v1.0` version is available now!** Some features I planed in version `0.4` were for me impossible to realise and I got stuck in it completely. Version [`2.6 of Vue.js`](https://github.com/vuejs/vue/releases/tag/v2.6.0) opened new slots opportunities and I've returned to developing the plugin now. I've learned a lot for that time so I also decided to refactor all code – it should be now cleaner and better optimised.
12+
🎉 **After about a year from the last version, I'm happy and excited to inform, that new `v1.0` version is available now!** More information and a changelog you can find [here](https://github.com/lukaszflorczak/vue-agile/releases/tag/v1.0.0).
13+
14+
---
15+
16+
If you like the component remember to **star it** ⭐️. If you appreciate my work you can also **[buy me a coffee](https://ko-fi.com/lukaszflorczak)** ☕️ 😉
1317

1418
---
1519

1620
## Important – update from version < `1.0`
1721

18-
**Depreciated => new props:**
22+
**Depreciated props => new props/option:**
1923
* `arrows` => `navButtons`
2024
* `prevArrow` => `prevButton` slot
2125
* `nextArrow` => `nextButton` slot
2226
* `show` => `reload()` method
2327

24-
**Depreciated => new classes:**
28+
**Depreciated classes => new classes:**
2529
* `.agile__arrow` => `.agile__nav-button`
2630
* `.agile__arrow--prev` => `.agile__nav-button--prev`
2731
* `.agile__arrow--next` => `.agile__nav-button--next`
@@ -30,8 +34,6 @@ More demos and examples coming soon in [vue-agile CodePens collection](https://c
3034
**Structure:**
3135
* Nav buttons and dots are grouped in `.agile__actions` container now
3236

33-
Read a full changelog here.
34-
3537
## Installation
3638

3739
```bash
@@ -48,13 +50,39 @@ npm install vue-agile
4850

4951
**The component is delivered without styles for the appearance of the navigation elements** (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you want, feel free to use styles from [CodePen demos](https://codepen.io/collection/AdRzJW/).
5052

51-
## Usage
53+
## Importing
54+
55+
**Global:**
56+
5257
```js
58+
// main.js
5359
import Vue from 'vue'
5460
import VueAgile from 'vue-agile'
5561

5662
Vue.use(VueAgile)
5763
```
64+
65+
**In component:**
66+
```js
67+
// YourComponent.vue
68+
import { VueAgile } from 'vue-agile'
69+
70+
export default {
71+
components: {
72+
agile: VueAgile
73+
}
74+
}
75+
```
76+
77+
**Via `<script>`**:
78+
79+
```html
80+
<script src="https://unpkg.com/vue-agile"></script>
81+
<link rel="stylesheet" href="https://unpkg.com/vue-agile/dist/VueAgile.css">
82+
```
83+
84+
## Usage
85+
5886
```vue
5987
<template>
6088
<agile>

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"><link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel=stylesheet><title>vue-agile | demo</title><meta name=description content="vue-agile is a touch-friendly, responsive, easy to use carousel component for Vue.js inspired by Slick."><link href=/css/app.57143d0e.css rel=preload as=style><link href=/js/app.aacbc3e4.js rel=preload as=script><link href=/js/chunk-vendors.45fe190f.js rel=preload as=script><link href=/css/app.57143d0e.css rel=stylesheet></head><body><noscript><strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script async defer src=https://buttons.github.io/buttons.js></script><script async src=//platform.twitter.com/widgets.js charset=utf-8></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"><link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel=stylesheet><title>vue-agile | demo</title><meta name=description content="vue-agile is a touch-friendly, responsive, easy to use carousel component for Vue.js inspired by Slick."><link href=/vue-agile/css/app.57143d0e.css rel=preload as=style><link href=/vue-agile/js/app.0793a380.js rel=preload as=script><link href=/vue-agile/js/chunk-vendors.45fe190f.js rel=preload as=script><link href=/vue-agile/css/app.57143d0e.css rel=stylesheet></head><body><noscript><strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script async defer src=https://buttons.github.io/buttons.js></script><script async src=//platform.twitter.com/widgets.js charset=utf-8></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
22
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
33
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
55
ga('create', 'UA-104121614-1', 'auto');
6-
ga('send', 'pageview');</script><script src=/js/chunk-vendors.45fe190f.js></script><script src=/js/app.aacbc3e4.js></script></body></html>
6+
ga('send', 'pageview');</script><script src=/vue-agile/js/chunk-vendors.45fe190f.js></script><script src=/vue-agile/js/app.0793a380.js></script></body></html>

‎docs/js/app.0793a380.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.0793a380.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.aacbc3e4.js‎

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

‎docs/js/app.aacbc3e4.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎issue_label_bot.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
label-alias:
2+
bug: 'bug'
3+
feature_request: 'feature'
4+
question: 'question'

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-agile",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"description": "A carousel component for Vue.js",
55
"author": "Łukasz Florczak <[email protected]>",
66
"license": "MIT",
@@ -18,7 +18,8 @@
1818
"lint": "vue-cli-service lint",
1919
"test:unit": "vue-cli-service test:unit"
2020
},
21-
"main": "dist/VueAgile.umd.min.js",
21+
"main": "src/index.js",
22+
"unpkg": "dist/VueAgile.umd.min.js",
2223
"repository": {
2324
"type": "git",
2425
"url": "git+https://github.com/lukaszflorczak/vue-agile.git"

‎src/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import VueAgile from './Agile'
2+
3+
const install = (Vue) => {
4+
Vue.component('agile', VueAgile)
5+
}
6+
7+
export default {
8+
install
9+
}
10+
11+
export { VueAgile }

‎src/main.js‎

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

0 commit comments

Comments
 (0)