Merge pull request #3 from codeeshop-oc/next

Update to Vue 3

Author: codeeshop-oc

README.md

@@ -2,9 +2,9 @@
 
 > Vue Lightbox Advanced Photo Grid component for Vue.js
 
-[![npm](https://img.shields.io/badge/npm-1.0.0-blue)](https://www.npmjs.com/package/vue-lightbox-advanced)
-[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/vue2/LICENSE)
-[![bit](https://img.shields.io/badge/components-1-yellowgreen)](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/vue2/src/VueLightboxAdvanced.vue)
+[![npm](https://img.shields.io/badge/npm-2.0.0-blue)](https://www.npmjs.com/package/vue-lightbox-advanced)
+[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/LICENSE)
+[![bit](https://img.shields.io/badge/components-1-yellowgreen)](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/src/vue-lightbox-advanced.vue)
 [![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/codeeshop-oc/vue-lightbox-advanced/issues?&q=is%3Aissue+is%3Aopen)
 
 Vue Lightbox Advanced provides flexibility of displaying first x (1-5) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will return an event with the index or file url (src) as per passed props that can be used to show the image or can be used to redirect to that specific file url (src).
@@ -14,13 +14,13 @@ It provides the shuffling images according to given options in docs.
 
 ## Version Support
 
-[Vue 3](https://github.com/codeeshop-oc/vue-lightbox-advanced/tree/main)
+Vue 3 - Current Branch
 
-Vue 2 - Current branch
+[Vue 2](https://github.com/codeeshop-oc/vue-lightbox-advanced/tree/vue2)
 
 ## 🎨 Features
 
-Find out all available features on [settings props](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/vue2/docs/API.md#props) and see how that works on [examples](https://codeeshop-oc.github.io/vue-lightbox-advanced/).
+Find out all available features on [settings props](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/docs/API.md#props) and see how that works on [examples](https://codeeshop-oc.github.io/vue-lightbox-advanced/).
 
 
 ## 🚚 Installation
@@ -29,16 +29,16 @@ Find out all available features on [settings props](https://github.com/codeeshop
 
 ```bash
 # npm
-npm i vue-lightbox-advanced@1
+npm i vue-lightbox-advanced
 # yarn
-yarn add vue-lightbox-advanced@1
+yarn add vue-lightbox-advanced
 ```
 
 ### cdn
 
 ```bash
 # latest
-https://unpkg.com/vue-lightbox-advanced@1
+https://unpkg.com/vue-lightbox-advanced
 ```
 
 <br/>
@@ -48,13 +48,13 @@ https://unpkg.com/vue-lightbox-advanced@1
 ```html
 <template>
   <div style="height: 250px; width: 400px;">
-    <VueLightboxAdvanced :items="images" />
+    <vue-lightbox-advanced :items="images" />
   </div>
 </template>
 
 <script>
   import VueLightboxAdvanced from 'vue-lightbox-advanced'
-  import 'vue-lightbox-advanced/dist/VueLightboxAdvanced.css'
+  import 'vue-lightbox-advanced/dist/vue-lightbox-advanced.css'
 
   export default {
     name: 'MyComponent',
@@ -82,7 +82,7 @@ https://unpkg.com/vue-lightbox-advanced@1
 
 ## 🔖 License
 
-This software is licensed under the [MIT](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/vue2/LICENSE).
+This software is licensed under the [MIT](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/LICENSE).
 
 ### Reference
 

build/rollup.config.js

@@ -7,11 +7,10 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import babel from '@rollup/plugin-babel';
-import scss from "rollup-plugin-scss";
-
-
+import PostCSS from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 import minimist from 'minimist';
+import scss from "rollup-plugin-scss";
 
 // Get browserslist config and remove ie from es build targets
 const esbrowserslist = fs.readFileSync('./.browserslistrc')
@@ -44,15 +43,20 @@ const baseConfig = {
       'process.env.NODE_ENV': JSON.stringify('production'),
     },
     vue: {
-      css: false,
-      template: {
-        isProduction: true,
-      },
     },
     postVue: [
       resolve({
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
       commonjs(),
     ],
     babel: {
@@ -86,7 +90,7 @@ const cssConfig = {
   input: 'src/styles.js',
   plugins: [
     scss({
-      output: 'dist/VueLightboxAdvanced.css',
+      output: 'dist/vue-lightbox-advanced.css',
       outputStyle: "compressed",
     })
   ],
@@ -100,7 +104,7 @@ if (!argv.format || argv.format === 'es') {
     input: 'src/entry.esm.js',
     external,
     output: {
-      file: 'dist/VueLightboxAdvanced.esm.js',
+      file: 'dist/vue-lightbox-advanced.esm.js',
       format: 'esm',
       exports: 'named',
     },
@@ -132,7 +136,7 @@ if (!argv.format || argv.format === 'cjs') {
     external,
     output: {
       compact: true,
-      file: 'dist/VueLightboxAdvanced.ssr.js',
+      file: 'dist/vue-lightbox-advanced.ssr.js',
       format: 'cjs',
       name: 'VueLightboxAdvanced',
       exports: 'auto',
@@ -141,13 +145,7 @@ if (!argv.format || argv.format === 'cjs') {
     plugins: [
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
-      vue({
-        ...baseConfig.plugins.vue,
-        template: {
-          ...baseConfig.plugins.vue.template,
-          optimizeSSR: true,
-        },
-      }),
+      vue(baseConfig.plugins.vue),
       ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
     ],
@@ -161,7 +159,7 @@ if (!argv.format || argv.format === 'iife') {
     external,
     output: {
       compact: true,
-      file: 'dist/VueLightboxAdvanced.min.js',
+      file: 'dist/vue-lightbox-advanced.min.js',
       format: 'iife',
       name: 'VueLightboxAdvanced',
       exports: 'auto',
@@ -184,4 +182,4 @@ if (!argv.format || argv.format === 'iife') {
 }
 
 // Export config
-export default buildFormats;
+export default buildFormats;

dev/serve.js

@@ -1,8 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import Dev from './serve.vue';
 
-Vue.config.productionTip = false;
-
-new Vue({
-  render: (h) => h(Dev),
-}).$mount('#app');
+const app = createApp(Dev);
+app.mount('#app');

dev/serve.vue

@@ -1,52 +1,106 @@
 <script>
-import Vue from 'vue';
-import VueLightboxAdvanced from '@/VueLightboxAdvanced.vue';
-import '@/VueLightboxAdvanced.css';
+import { defineComponent } from 'vue';
+import VueLightboxAdvanced from '@/vue-lightbox-advanced.vue';
+import '@/vue-lightbox-advanced.css';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ServeDev',
   data() {
     return {
       images: [
-        "https://i.wifegeek.com/200426/f9459c52.jpg",
-        "https://i.wifegeek.com/200426/5ce1e1c7.jpg",
-        "https://i.wifegeek.com/200426/5fa51df3.jpg",
-        "https://i.wifegeek.com/200426/663181fe.jpg",
-        "https://i.wifegeek.com/200426/2d110780.jpg",
-        "https://i.wifegeek.com/200426/e73cd3fa.jpg",
-        "https://i.wifegeek.com/200426/15160d6e.jpg",
-        "https://i.wifegeek.com/200426/d0c881ae.jpg",
-        "https://i.wifegeek.com/200426/a154fc3d.jpg",
-        "https://i.wifegeek.com/200426/71d3aa60.jpg",
-        "https://i.wifegeek.com/200426/d17ce9a0.jpg",
-        "https://i.wifegeek.com/200426/7c4deca9.jpg",
-        "https://i.wifegeek.com/200426/64672676.jpg",
-        "https://i.wifegeek.com/200426/de6ab9c6.jpg",
-        "https://i.wifegeek.com/200426/d8bcb6a7.jpg",
-        "https://i.wifegeek.com/200426/4085d03b.jpg",
-        "https://i.wifegeek.com/200426/177ef44c.jpg",
-        "https://i.wifegeek.com/200426/d74d9040.jpg",
-        "https://i.wifegeek.com/200426/81e24a47.jpg",
-        "https://i.wifegeek.com/200426/43e2e8bb.jpg"
+        "https://cdn.pixabay.com/photo/2015/09/17/14/24/woman-944261_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/10/17/16/10/fantasy-2861107_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2016/05/11/16/32/bridge-1385938_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2018/09/19/23/03/sunset-3689760_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2020/09/15/09/10/church-5573087_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/05/04/12/43/zebra-2283914_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2018/01/25/14/12/nature-3106213_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/12/10/15/16/white-horse-3010129_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/06/07/10/47/elephant-2380009_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2017/01/18/17/14/girl-1990347_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2018/01/22/14/13/animal-3099035_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_960_720.jpg",
+        "https://cdn.pixabay.com/photo/2016/11/08/05/26/woman-1807533_960_720.jpg"
       ]
     }
   },
   components: {
     VueLightboxAdvanced
   },
   methods: {
-    eventEmitted(index) {
+    onClicked(v) {
       console.log(`Event Emmited....`)
-      console.log(`Return Value: ${index}`)
-    }
+      console.log(`Return Index: ${v}`)
+    },
+    onClickedSrc(v) {
+      console.log(`Event Emmited....`)
+      console.log(`Return Value: ${v}`)
+    },
   }
 });
 </script>
 
 <template>
-  <div id="app">
-    <div style="height: 250px; width: 400px;">
-      <VueLightboxAdvanced :returnSrc="true" :items="images"  @clicked:index="eventEmitted" />
+  <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
+    <div id="app">
+      <h3>Default</h3>
+      <div class="fixheight">
+        <vue-lightbox-advanced :items="images" />
+      </div>
+
+      <h3>With Shuffle ( RANDOM )</h3>
+      <div class="fixheight">
+        <vue-lightbox-advanced :shuffle=true shuffle-by="RANDOM" :items="images" />
+      </div>
+
+      <h3>With 3 column</h3>
+      <div class="fixheight">
+        <vue-lightbox-advanced :cells="3" :items="images" :shuffle=true shuffle-by="DESC" />
+      </div>
+
+      <h3>With Event</h3>
+      <div class="fixheight">
+        <vue-lightbox-advanced @clicked:index="onClicked" :items="images" />
+      </div>
+
+      <h3>With SRC</h3>
+      <div class="fixheight">
+        <vue-lightbox-advanced :return-src="true" @clicked:index="onClickedSrc" :items="images" />
+      </div>
     </div>
   </div>
 </template>
+
+<style>
+  body {
+     font-family: 'Caveat';
+  }
+  .text-center {
+    text-align: center;
+    /*margin: auto;*/
+  }
+  .fixheight {
+    width: 550px;
+  }
+  #app {
+      margin: auto;
+  }
+  @media (min-width: 601px) {
+    #app {
+      display: table;
+    }
+  }
+  @media (max-width: 800px) {
+    .fixheight {
+      width: 450px;
+    }
+  }
+  @media (max-width: 600px) {
+    .fixheight {
+      width: 100%;
+    }
+  }
+</style>