[Build] 1.0.0

Author: subotkevic

README.md

@@ -1,20 +1,20 @@
-# vue-lazy-image
+# vue-lazy-image-loading
 
 Vue progressive image or background loading plugin.
 
 ## Installation
 
 ```bash
-npm install vue-lazy-images
+npm install vue-lazy-image-loading
 ```
 
 ## Usage
 
 ```js
 import Vue from 'vue'
-import VueProgressiveImage from 'vue-progressive-image'
+import VueLazyImageLoading from 'vue-lazy-image-loading'
 
-Vue.use(VueProgressiveImage)
+Vue.use(VueLazyImageLoading)
 ```
 
 #### Progressive image
@@ -28,15 +28,15 @@ Instead of using the normal `img` tag to load images
 use the `progressive-img` component already globally available after the plugin installation
 
 ```html
-<progressive-img src="https://unsplash.it/1920/1080?image=10" />
+<lazy-img src="https://unsplash.it/1920/1080?image=10" />
 ```
 
 #### Progressive background
 
 It is also possible to apply progressive images as backgrounds and it will have the same props as the progressive-img component
 
 ```html
-<progressive-background src="https://unsplash.it/1920/1080?image=10" />
+<lazy-background src="https://unsplash.it/1920/1080?image=10" />
 ```
 
 
@@ -47,7 +47,7 @@ To be able to immediately show some feedback to the user, it is possible to pass
 in this example I actually use the same image, but you have the idea here
 
 ```html
-<progressive-img
+<lazy-img
   src="https://unsplash.it/1920/1080?image=10"
   placeholder="https://unsplash.it/1920/1080?image=10"
 />
@@ -59,20 +59,20 @@ The progressive-background has a "content" slot, which can hold content that nee
 This slot has one property called "visible" that tells you when, for example, a preloader needs to be visible or not.
 
 ```html
-<progressive-background src="https://unsplash.it/1920/1080?image=10">
+<lazy-background src="https://unsplash.it/1920/1080?image=10">
   <div slot="content" slot-scope="{ visible }">
     <p>I am some content to display over the image</p>
     <div v-show="visible">I am the preloader</div>
   </div>
-</progressive-background>
+</lazy-background>
 ```
 
 ### Blur
 
 It is possible to adjust the level of blur applied to the placeholder image
 
 ```html
-<progressive-img
+<lazy-img
   src="https://unsplash.it/1920/1080?image=10"
   placeholder="https://unsplash.it/1920/1080?image=10"
   :blur="30"
@@ -85,7 +85,7 @@ It is possible to remove the padding that adds the aspect ratio to the container
 
 
 ```html
-<progressive-img
+<lazy-img
   src="https://unsplash.it/1920/1080?image=10"
   no-ratio
 />
@@ -94,7 +94,7 @@ It is possible to remove the padding that adds the aspect ratio to the container
 It is also possible to manually specify the image aspact ratio when you know it. It allows the placeholder to be displayed in the correct aspect ratio. The ratio is calculated as `height / width`.
 
 ```html
-<progressive-img
+<lazy-img
   src="https://unsplash.it/1920/1080?image=10"
   aspect-ratio="1.5"
 />
@@ -105,7 +105,7 @@ It is also possible to manually specify the image aspact ratio when you know it.
 In case of a loading error of the main image, it is possible to add a fallback image which can display an error image or just another image.
 
 ```html
-<progressive-img
+<lazy-img
   src="https://this_url_should_cause_an_error"
   fallback="https://unsplash.it/1920/1080?image=10"
 />
@@ -141,7 +141,7 @@ export default {
 in the html just add the events you need to listen to
 
 ```html
-<progressive-img
+<lazy-img
   @onLoad="onLoad"
   @onLoadPlaceholder="onLoadPlaceholder"
   @onError="onError"
@@ -164,7 +164,7 @@ Cached images are checked by default. This check kills the animation if the imag
 If you would like to show the animation every time, even when is not needed, you can simply use the plugin options like so:
 
 ```js
-Vue.use(VueProgressiveImage, {
+Vue.use(VueLazyImageLoading, {
   cache: false
 })
 ```
@@ -174,7 +174,7 @@ Vue.use(VueProgressiveImage, {
 *	required: false
 
 ```js
-Vue.use(VueProgressiveImage, {
+Vue.use(VueLazyImageLoading, {
   placeholder: 'https://unsplash.it/1920/1080?image=20'
 })
 ```
@@ -185,7 +185,7 @@ Vue.use(VueProgressiveImage, {
 *	default: 5
 
 ```js
-Vue.use(VueProgressiveImage, {
+Vue.use(VueLazyImageLoading, {
   blur: 30
 })
 ```
@@ -197,7 +197,7 @@ Vue.use(VueProgressiveImage, {
 This options is for debug only. It lets you have an easy look at the placeholder before the main image is fully loaded.
 
 ```js
-Vue.use(VueProgressiveImage, {
+Vue.use(VueLazyImageLoading, {
   delay: 2000 // 2 seconds before the image is displayed
 })
 ```

config/webpack.dev.config.js

@@ -10,7 +10,7 @@ module.exports = {
   output: {
     libraryTarget: 'umd',
     path: path.resolve(__dirname, '../dist'),
-    filename: 'vue-progressive-image.js'
+    filename: 'vue-lazy-image-loading.js'
   },
   module: {
     rules: [babel, vue, css]

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "vue-lazy-images",
+  "name": "vue-lazy-image-loading",
   "version": "1.0.0",
   "description": "Vue progressive image or background loading plugin.",
-  "main": "dist/vue-progressive-image.js",
+  "main": "dist/vue-lazy-image-loading.js",
   "files": [
     "dist"
   ],
@@ -16,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/subotkevic/vue-lazy-image"
+    "url": "https://github.com/subotkevic/vue-lazy-image-loading"
   },
   "keywords": [
     "progressive",
@@ -27,9 +27,9 @@
   ],
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/subotkevic/vue-lazy-image/issues"
+    "url": "https://github.com/subotkevic/vue-lazy-image-loading/issues"
   },
-  "homepage": "https://github.com/subotkevic/vue-lazy-image#readme",
+  "homepage": "https://github.com/subotkevic/vue-lazy-image-loading#readme",
   "devDependencies": {
     "@babel/core": "^7.1.5",
     "@babel/preset-env": "^7.1.5",

src/index.js

@@ -20,8 +20,8 @@ const mergeOptions = function (component, options = {}) {
  * @param  {Object} [options={}]
  */
 const install = function (Vue, options = {}) {
-  Vue.component('progressive-img', mergeOptions(image, options))
-  Vue.component('progressive-background', mergeOptions(background, options))
+  Vue.component('lazy-img', mergeOptions(image, options))
+  Vue.component('lazy-background', mergeOptions(background, options))
 }
 
 export default {

src/utils.js

@@ -4,7 +4,7 @@
  */
 export const warn = function (...message) {
   /* eslint-disable */
-  console.warn(`[vue-progressive-image] ${message.join(' ')}`)
+  console.warn(`[vue-lazy-image-loading] ${message.join(' ')}`)
   /* eslint-enable */
 }