Skip to content

Commit 017941a

Browse files
DCzajkowskiDCzajkowski
authored
Merge pull request #15 from rangermeier/vue-cli-build
use Vue CLI for build
2 parents d3ecd48 + 7932bc9 commit 017941a

File tree

13 files changed

+6838
-8698
lines changed

13 files changed

+6838
-8698
lines changed

‎.babelrc‎

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

‎.browserslistrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎.gitignore‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
.DS_Store
2-
node_modules/
3-
npm-debug.log
4-
yarn-error.log
5-
dist/*
2+
node_modules
3+
/dist
64
!dist/.gitkeep
7-
dist-module/
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
814

915
# Editor directories and files
1016
.idea
17+
.vscode
1118
*.suo
1219
*.ntvs*
1320
*.njsproj
1421
*.sln
22+
*.sw?

‎README.md‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@ npm i vue-pure-lightbox --save
3131
### With a CDN:
3232
```html
3333
<!-- In <head> -->
34-
<meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/vue-pure-lightbox.css">
34+
<meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.css">
3535
<!-- In <body>, after Vue import -->
36-
<script src="https://unpkg.com/vue-pure-lightbox/dist/vue-pure-lightbox.js"></script>
36+
<script src="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.umd.min.js"></script>
3737
```
3838

3939
## Usage
4040
### With an ES6 bundler (via NPM)
4141
In your index file
4242
```js
43-
import Lightbox from 'vue-pure-lightbox'
44-
Vue.use(Lightbox)
43+
import VuePureLightbox from 'vue-pure-lightbox'
44+
Vue.use(VuePureLightbox)
4545
```
4646

4747
### With a CDN
4848
```html
4949
<script>
50-
Vue.use(Lightbox)
50+
Vue.use(VuePureLightbox)
5151
5252
new Vue({
5353
// ...
@@ -60,30 +60,27 @@ Vue.use(Lightbox)
6060
### Simple example
6161

6262
```vue
63-
<lightbox
63+
<VuePureLightbox
6464
thumbnail="/path/to/thumbnail.jpg"
6565
:images="['/path/to/image1.jpg', '/path/to/image1.jpg']"
66-
>
67-
<lightbox-default-loader slot="loader"></lightbox-default-loader> <!-- If you want to use built-in loader -->
68-
<!-- <div slot="loader"></div> --> <!-- If you want to use your own loader -->
69-
</lightbox>
66+
/>
7067
```
7168

72-
### Simple example with content slot
69+
### Example using content slot and custom loader
7370

7471
```vue
75-
<lightbox
72+
<VuePureLightbox
7673
thumbnail="https://via.placeholder.com/350x150"
7774
:images="[
7875
{ link: 'https://placekitten.com/1080/910', alt: 'Cat 1' },
7976
{ link: 'https://placekitten.com/1080/920', alt: 'Cat 2' },
8077
]"
8178
>
82-
<lightbox-default-loader slot="loader"></lightbox-default-loader>
83-
<div slot="content" slot-scope="{ url: { link, alt } }">
79+
<div v-slot:loader>Loading…</div>
80+
<div v-slot:content="{ url: { link, alt } }">
8481
<img :src="link" :alt="alt">
8582
</div>
86-
</lightbox>
83+
</VuePureLightbox>
8784
```
8885

8986
---
@@ -101,14 +98,14 @@ Vue.use(Lightbox)
10198
| Slot | Description | Default |
10299
| ------------- | ---------------------------------------------- | ------------------------------------ |
103100
| content | Default value is hen you don't want a def | &lt;img&gt; tag with src set to path |
104-
| loader | DOM to be used when there is an image loading | No loader |
101+
| loader | DOM to be used when there is an image loading | LightboxDefaultLoader |
105102
| icon-close | Icon to be used as a close button | &times; |
106103
| icon-previous | Icon to be used as the "next" arrow button | <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg> |
107104
| icon-next | Icon to be used as the "previous" arrow button | <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg> |
108105

109106
## Contents
110107
This package consists of just one `.vue` file. It is meant to be as small and simple as possible.
111-
In return you get a `<lightbox>` Vue component that allows you to show images in a nice, responsive lightbox.
108+
In return you get a `<VuePureLightbox>` Vue component that allows you to show images in a nice, responsive lightbox.
112109

113110
Supported keys:
114111
- Arrow right - Go to the next image

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎dist/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)