version 1.0.0

Author: akash-mitra

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,68 @@
-# vue-image-browser
-A VueJS Image Browser Component with options to upload, browse, delete and select images
+# An Image Browser Component Built with VueJs
+
+![](images/example-image-1.png)
+
+
+## Usage
+
+```
+npm install @akashmitra/vue-image-browser
+```
+To use this inside another Vue component, you must `import` this as a component.
+
+```
+<template>
+    <VueImageBrowser
+        source="api/images"
+        selectable
+        deletable
+        @selected="onSelect"></VueImageBrowser>
+
+</template>
+<script>
+import VueImageBrowser from '@akashmitra/vue-image-browser'
+
+export default {
+    components: {
+        VueImageBrowser,
+    },
+    methods: {
+        onSelect() {
+
+        }
+    }
+}
+</script>
+
+```
+
+## Image Object
+
+The browser assumes that the `source` URL returns an array of `image` objects of following format.
+
+```
+{
+    data: [
+        {
+            id: 1,
+            name: 'image-name.jpg',
+            type: 'jpeg',
+            size: 10,
+            url: 'www.example.com/image-name.jpg',
+            storage: 'public',
+            user_id: 1,
+            created_ago: '2 days ago'
+        },
+        {...},
+        {...}
+    ]
+}
+
+
+```
+
+## Options
+`source` - Specify the URL that returns an array of the `image` objects
+`selectable` - If this is true, you can select an image from the browser and a `selected` event will be generated and the corresponding `image` object will be passed to the event handler.
+`deletable` - If this is true, the browser will show a Delete button. Clicking the Delete button will generate a `deleted` event and the corresponding `image` object will be passed to the event handler.
+`lazyload` - When this is true, only the images that are within the viewport will be actually downloaded. By default it is true.

build/rollup.config.js

@@ -0,0 +1,20 @@
+import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
+import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
+import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
+
+export default {
+    input: 'src/wrapper.js', // Path relative to package.json
+    output: {
+        name: 'VueImageBrowser',
+        exports: 'named',
+    },
+    external: [],
+    plugins: [
+        commonjs(),
+        vue({
+            css: true, // Dynamically inject css as a <style> tag
+            compileTemplate: true, // Explicitly convert template to render function
+        }),
+        buble(), // Transpile to ES5
+    ],
+};