@fish-render/carousel/index.cjs

Fish Render carousel component for Vue 3

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.FishCarousel={},i.Vue))})(this,function(i,e){"use strict";const X="";function S(l,t){return e.defineComponent({name:t,setup(){return()=>e.h("span",{innerHTML:l,class:"fish-icon-component",style:{display:"inline-flex"}})}})}function y(l,t){return S(l,t)}const b=y('<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M670.954667 86.826667L269.44 488.362667a32 32 0 0 0-2.090667 42.965333l2.090667 2.282667L670.933333 935.168a8.533333 8.533333 0 0 0 6.037334 2.496h66.368a8.533333 8.533333 0 0 0 6.037333-14.570667L337.28 511.018667 749.397333 98.901333a8.533333 8.533333 0 0 0-6.037333-14.570666h-66.346667a8.533333 8.533333 0 0 0-6.058666 2.496z"  /></svg>',"left"),P=y('<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M353.045333 86.826667L754.56 488.362667a32 32 0 0 1 2.090667 42.965333l-2.090667 2.282667L353.066667 935.168a8.533333 8.533333 0 0 1-6.037334 2.496h-66.368a8.533333 8.533333 0 0 1-6.037333-14.570667L686.72 511.018667 274.602667 98.901333a8.533333 8.533333 0 0 1 6.037333-14.570666h66.346667a8.533333 8.533333 0 0 1 6.058666 2.496z"  /></svg>',"right"),$=(l,t)=>{const h=l.__vccOpts||l;for(const[o,d]of t)h[o]=d;return h},E={class:"fish-carousel__content"},T=["onClick"],L={name:"Carousel"},C=e.defineComponent({...L,props:{interval:{},autoplay:{type:Boolean,default:!0},indicatorPosition:{default:"inside"},loop:{type:Boolean,default:!0},height:{}},setup(l){const t=l,h=e.useSlots(),o=e.ref(0),d=e.ref(null),w=e.computed(()=>t.interval??3e3),r=e.ref(!1),m=typeof window<"u",O=e.computed(()=>{if(!t.height)return{};if(typeof t.height=="string"||typeof t.height=="number")return{height:typeof t.height=="number"?`${t.height}px`:t.height};if(typeof t.height=="object"){const n={};if(t.height.xs){const s=typeof t.height.xs=="number"?`${t.height.xs}px`:t.height.xs;n["--carousel-height-xs"]=s}if(t.height.sm){const s=typeof t.height.sm=="number"?`${t.height.sm}px`:t.height.sm;n["--carousel-height-sm"]=s}if(t.height.md){const s=typeof t.height.md=="number"?`${t.height.md}px`:t.height.md;n["--carousel-height-md"]=s}if(t.height.lg){const s=typeof t.height.lg=="number"?`${t.height.lg}px`:t.height.lg;n["--carousel-height-lg"]=s}if(t.height.xl){const s=typeof t.height.xl=="number"?`${t.height.xl}px`:t.height.xl;n["--carousel-height-xl"]=s}return n}return{}}),j=e.computed(()=>t.height?typeof t.height=="string"||typeof t.height=="number"?{height:typeof t.height=="number"?`${t.height}px`:t.height}:{}:{}),x=e.computed(()=>{const n=h.default?h.default():[];return n.length===1&&n[0].type===e.Fragment&&Array.isArray(n[0].children)?n[0].children??[]:n}),a=e.computed(()=>x.value.length);function U(n){if(a.value<=1)return o.value===n;if(t.loop){const s=v(),p=_();return n===o.value||n===s||n===p}return o.value===0?n===0||n===1:o.value===a.value-1?n===a.value-2||n===a.value-1:n===o.value-1||n===o.value||n===o.value+1}function v(){return a.value<=1?0:(o.value-1+a.value)%a.value}function _(){return a.value<=1?0:(o.value+1)%a.value}function k(){return Math.max(o.value-1,0)}function V(){return Math.min(o.value+1,a.value-1)}function Y(){return a.value<=1?0:t.loop?v():k()}function q(){return a.value<=1?0:t.loop?_():V()}e.provide("carouselItemWidth",e.computed(()=>100));const c=e.computed(()=>t.autoplay&&a.value>1);function B(){if(!r.value){if(g(),a.value<=1){c.value&&f();return}r.value=!0,t.loop?o.value=_():o.value=V(),m?setTimeout(()=>{r.value=!1},500):r.value=!1,c.value&&f()}}function H(){if(!r.value){if(g(),a.value<=1){c.value&&f();return}r.value=!0,t.loop?o.value=v():o.value=k(),m?setTimeout(()=>{r.value=!1},500):r.value=!1,c.value&&f()}}function R(n){if(!r.value){if(g(),a.value<=1){o.value=0,c.value&&f();return}r.value=!0,t.loop?o.value=n:o.value=Math.max(0,Math.min(n,a.value-1)),m?setTimeout(()=>{r.value=!1},500):r.value=!1,c.value&&f()}}function f(){g(),c.value&&m&&(d.value=setInterval(()=>{B()},w.value))}function g(){d.value&&m&&(clearInterval(d.value),d.value=null)}return e.onMounted(()=>{c.value&&m&&f()}),e.onBeforeUnmount(()=>{g()}),e.watch([w,c],()=>{c.value&&m?f():g()}),e.provide("carouselIndex",o),(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fish-carousel",{"fish-carousel--outside":t.indicatorPosition==="outside"}])},[e.createElementVNode("div",E,[e.createElementVNode("div",{class:"fish-carousel__container",style:e.normalizeStyle(O.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,(p,u)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(["fish-carousel-item-wrapper",{"fish-carousel-item--active":o.value===u,"fish-carousel-item--prev":Y()===u,"fish-carousel-item--next":q()===u,"fish-carousel-item--first":u===0,"fish-carousel-item--last":u===a.value-1}]),style:e.normalizeStyle(j.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p)))],6)),[[e.vShow,U(u)]])),128))],4)]),e.createElementVNode("div",{class:"fish-carousel__nav-button fish-carousel__nav-button--prev",onClick:H},[e.createVNode(e.unref(b),{class:"fish-carousel__nav-icon"})]),e.createElementVNode("div",{class:"fish-carousel__nav-button fish-carousel__nav-button--next",onClick:B},[e.createVNode(e.unref(P),{class:"fish-carousel__nav-icon"})]),t.indicatorPosition!=="none"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["fish-carousel__indicators",`fish-carousel__indicators--${t.indicatorPosition}`])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(p,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(["fish-carousel__indicator",{"fish-carousel__indicator--active":o.value===u}]),onClick:ee=>R(u)},null,10,T))),128))],2)):e.createCommentVNode("",!0)],2))}}),N={class:"fish-carousel-item"},D={name:"CarouselItem"},M=e.defineComponent({...D,setup(l){return(t,h)=>(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(t.$slots,"default",{},void 0,!0)]))}}),Q="",I=$(M,[["__scopeId","data-v-681f15a0"]]);function z(l){return String(l||"")}function G(l){return l!=null}function W(l){return l>0?100/l:100}function A(l,t,h){return{transform:`translateX(-${l*t}%)`,width:`${h*100}%`}}const F={install:l=>{l.component("Carousel",C),l.component("CarouselItem",I)}};i.Carousel=C,i.CarouselItem=I,i.calculateItemWidth=W,i.default=F,i.formatCarouselStyle=A,i.formatValue=z,i.validateProps=G,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});