vue-responsive-carousel 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,32 @@
 # Vue Responsive Carousel
 
-Stealth mode 🤫
+![NPM License](https://img.shields.io/npm/l/vue-responsive-carousel)
+
+**Lightweight** image carousel component for  [Vue](https://vuejs.org/) **< 5k** 😎 <br>
+
+![responsive-carousel](https://private-user-images.githubusercontent.com/91323932/268753208-cfd92d05-6442-4ba5-951d-fbcaff9a76b0.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE2OTUwNjU1NzAsIm5iZiI6MTY5NTA2NTI3MCwicGF0aCI6Ii85MTMyMzkzMi8yNjg3NTMyMDgtY2ZkOTJkMDUtNjQ0Mi00YmE1LTk1MWQtZmJjYWZmOWE3NmIwLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzA5MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMwOTE4VDE5Mjc1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY3YTdkZGVkMWVkZTA4MzJmZmJiNDJkYTUwMDJiYzJkYzc5Y2Y4ZTAzZDEwOTg5ODQxNjhhMDU3NDlhNTEwMDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ao5F4g1565RyJr3AMlPO2NTCtUNtastg81cJS6P3vpU)
+
+## Usage
+
+`npm i vue-responsive-carousel`
+
+```
+<script setup>
+import ResponsiveCarousel from 'vue-responsive-carousel';
+import 'vue-responsive-carousel/dist/style.css';
+
+const images = [
+    { src: './sablon.jpg', alt: 'Sablon'},
+    { src: './tree.jpg', alt: 'Tree'},
+]
+</script>
+
+
+<template>
+<ResponsiveCarousel :images="images"/>
+</template
+```
+
 
 ## Contact
 Feel free to ping me 💫

package/dist/responsive-carousel.es.js

@@ -0,0 +1,69 @@
+import { openBlock as p, createElementBlock as m, createElementVNode as n, pushScopeId as _, popScopeId as u } from "vue";
+const v = (e, r) => {
+  const a = e.__vccOpts || e;
+  for (const [t, d] of r)
+    a[t] = d;
+  return a;
+}, l = (e) => (_("data-v-8b5f0cf0"), e = e(), u(), e), f = { class: "current-image-wrapper" }, y = /* @__PURE__ */ l(() => /* @__PURE__ */ n("div", { class: "current-image" }, null, -1)), h = { class: "arrows" }, w = /* @__PURE__ */ l(() => /* @__PURE__ */ n("object", {
+  class: "arrow",
+  data: "/icons/arrow-left.svg",
+  type: "image/svg+xml",
+  style: { "pointer-events": "none" }
+}, null, -1)), b = [
+  w
+], k = /* @__PURE__ */ l(() => /* @__PURE__ */ n("object", {
+  class: "arrow",
+  data: "/icons/arrow-right.svg",
+  type: "image/svg+xml",
+  style: { "pointer-events": "none" }
+}, null, -1)), I = [
+  k
+], S = {
+  __name: "ResponsiveCarousel",
+  props: ["images"],
+  setup(e) {
+    const r = e, a = r.images.length;
+    let t = 0;
+    (() => {
+      let o = new Image();
+      o.src = r.images[t].src, o.onload = () => {
+        document.querySelector(".current-image").style["background-image"] = "url(" + o.src + ")";
+      };
+    })();
+    const i = {
+      Right: Symbol("right"),
+      Left: Symbol("left")
+    };
+    function g(o, s) {
+      s === i.Right ? t++ : t--, t = (t + a) % a;
+      const c = document.querySelector(".current-image");
+      c.style.opacity = 0, c.style["background-image"] = "url(" + r.images[t].src + ")", c.animate(
+        {
+          opacity: [0, 1]
+        },
+        {
+          fill: "both",
+          duration: 1500,
+          rangeStart: "cover 0%",
+          rangeEnd: "cover 100%"
+        }
+      );
+    }
+    return (o, s) => (p(), m("div", f, [
+      y,
+      n("div", h, [
+        n("div", {
+          class: "arrow-wrapper",
+          onClick: s[0] || (s[0] = (c) => g(o.e, i.Left))
+        }, b),
+        n("div", {
+          class: "arrow-wrapper",
+          onClick: s[1] || (s[1] = (c) => g(o.e, i.Right))
+        }, I)
+      ])
+    ]));
+  }
+}, R = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8b5f0cf0"]]);
+export {
+  R as default
+};

package/dist/responsive-carousel.umd.js

@@ -0,0 +1 @@
+(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-responsive-carousel"]=a(e.Vue))})(this,function(e){"use strict";const a="",_=(t,r)=>{const c=t.__vccOpts||t;for(const[o,p]of r)c[o]=p;return c},l=t=>(e.pushScopeId("data-v-8b5f0cf0"),t=t(),e.popScopeId(),t),u={class:"current-image-wrapper"},g=l(()=>e.createElementVNode("div",{class:"current-image"},null,-1)),f={class:"arrows"},v=[l(()=>e.createElementVNode("object",{class:"arrow",data:"/icons/arrow-left.svg",type:"image/svg+xml",style:{"pointer-events":"none"}},null,-1))],h=[l(()=>e.createElementVNode("object",{class:"arrow",data:"/icons/arrow-right.svg",type:"image/svg+xml",style:{"pointer-events":"none"}},null,-1))];return _({__name:"ResponsiveCarousel",props:["images"],setup(t){const r=t,c=r.images.length;let o=0;(()=>{let s=new Image;s.src=r.images[o].src,s.onload=()=>{document.querySelector(".current-image").style["background-image"]="url("+s.src+")"}})();const d={Right:Symbol("right"),Left:Symbol("left")};function m(s,n){n===d.Right?o++:o--,o=(o+c)%c;const i=document.querySelector(".current-image");i.style.opacity=0,i.style["background-image"]="url("+r.images[o].src+")",i.animate({opacity:[0,1]},{fill:"both",duration:1500,rangeStart:"cover 0%",rangeEnd:"cover 100%"})}return(s,n)=>(e.openBlock(),e.createElementBlock("div",u,[g,e.createElementVNode("div",f,[e.createElementVNode("div",{class:"arrow-wrapper",onClick:n[0]||(n[0]=i=>m(s.e,d.Left))},v),e.createElementVNode("div",{class:"arrow-wrapper",onClick:n[1]||(n[1]=i=>m(s.e,d.Right))},h)])]))}},[["__scopeId","data-v-8b5f0cf0"]])});

package/dist/style.css

@@ -0,0 +1 @@
+.current-image-wrapper[data-v-8b5f0cf0]{height:100%}.current-image[data-v-8b5f0cf0]{background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;animation:fadeIn-8b5f0cf0 2s}@keyframes fadeIn-8b5f0cf0{0%{opacity:0}to{opacity:100}}.arrows[data-v-8b5f0cf0]{display:flex;justify-content:space-between;padding:1rem;position:relative;top:-50%;transform:translateY(-50%)}.arrow-wrapper[data-v-8b5f0cf0]:hover{cursor:pointer}.arrow[data-v-8b5f0cf0]{height:1.5rem}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "vue-responsive-carousel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Gilad Shohat",
   "description": "Vue Responsive Carousel",
   "homepage": "https://github.com/gshohat/vue-responsive-carousel#readme",
   "license": "MIT",
-  "main": "./dist/vue-responsive-carousel.umd.js",
-  "module": "./dist/vue-responsive-carousel.es.js",
+  "main": "./dist/responsive-carousel.umd.js",
+  "module": "./dist/responsive-carousel.es.js",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "import": "./dist/vue-responsive-carousel.es.js",
-      "require": "./dist/vue-responsive-carousel.umd.js"
+      "import": "./dist/responsive-carousel.es.js",
+      "require": "./dist/responsive-carousel.umd.js"
     },
     "./dist/style.css": "./dist/style.css"
   },