vue-testimonials
Version:
Vue Testimonials is a Vue 3 testimonials component made with Vite and TypeScript
2 lines (1 loc) • 5.9 kB
JavaScript
(function(e,s){typeof exports=="object"&&typeof module!="undefined"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue-testimonials"]=s(e.Vue))})(this,function(e){"use strict";const s={xmlns:"http://www.w3.org/2000/svg",width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},C=[e.createElementVNode("path",{d:"m9 18 6-6-6-6"},null,-1)];function b(t,l){return e.openBlock(),e.createElementBlock("svg",s,C)}const _={xmlns:"http://www.w3.org/2000/svg",width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},k=[e.createElementVNode("path",{d:"m15 18-6-6 6-6"},null,-1)];function V(t,l){return e.openBlock(),e.createElementBlock("svg",_,k)}const N={viewBox:"0 0 18 18"},E=[e.createElementVNode("circle",{cx:"7",cy:"7",r:"6"},null,-1)];function $(t,l){return e.openBlock(),e.createElementBlock("svg",N,E)}var U="",B=(t,l)=>{for(const[r,a]of l)t[r]=a;return t};const S="#FFFFFF",f="64px",h="20px",v=e.defineComponent({name:"VueTestimonials",components:{IconChevronrightLg:b,IconChevronleftLg:V,Ball:$},props:{interval:{type:Number,default:8e3},items:{type:Array,required:!0},arrowColor:{type:String,default:S},arrowWidth:{type:[Number,String],default:f},arrowHeight:{type:[Number,String],default:f},ballActiveColorClass:{type:String,default:null},ballInactiveColorClass:{type:String,default:null},ballWidth:{type:[Number,String],default:h},ballHeight:{type:[Number,String],default:h},titleClasses:{type:[Object,String],default:null},authorClasses:{type:[Object,String],default:null},contentClasses:{type:[Object,String],default:null}},setup(t){const l=e.ref(),r=e.ref(1),a=e.computed(()=>({color:t.arrowColor,width:t.arrowWidth,height:t.arrowHeight})),y=e.computed(()=>({width:t.ballWidth,height:t.ballHeight})),m=()=>{l.value&&clearInterval(l.value)},c=()=>{l.value=setInterval(()=>{d()},t.interval)},u=()=>{var n;if(r.value<=1){r.value=(n=t.items)==null?void 0:n.length;return}r.value-=1},d=()=>{var n;if(r.value>=((n=t.items)==null?void 0:n.length)){r.value=1;return}r.value+=1},o=n=>{r.value=n+1};return e.onMounted(()=>{c()}),e.onUnmounted(()=>{m()}),{clearCarousel:m,startCarousel:c,previousTestimonial:u,nextTestimonial:d,goToTestimonial:o,active:r,arrowStyle:a,ballStyle:y}}}),T={class:"vue-testimonials"},x={class:"flex-row flex flex-nowrap text-white mt-6 pb-10 lg:pb-20 mb-40"},z={class:"mx-auto"},j={class:"relative"},F={class:"w-full"},M={class:"flex justify-center flex-wrap items-center text-center"},H=["src","alt"],I={class:"media-body w-full"},L=["innerHTML"],A={class:"mt-5 w-full fill-current flex justify-center items-center flex-row z-20 relative"};function W(t,l,r,a,y,m){const c=e.resolveComponent("ball"),u=e.resolveComponent("icon-chevronleft-lg"),d=e.resolveComponent("icon-chevronright-lg");return e.openBlock(),e.createElementBlock("section",T,[e.createElementVNode("div",x,[e.createElementVNode("div",z,[e.createElementVNode("div",{onMouseover:l[2]||(l[2]=(...o)=>t.clearCarousel&&t.clearCarousel(...o)),onMouseout:l[3]||(l[3]=(...o)=>t.startCarousel&&t.startCarousel(...o))},[e.createElementVNode("div",j,[e.createElementVNode("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(o,n)=>(e.openBlock(),e.createElementBlock("div",{key:`${o.title}-${o.author}`,class:e.normalizeClass(["item transition-opacity duration-300 ease-in-out px-16 lg:px-0",{active:t.active===n+1,inactive:t.active!==n+1}])},[e.createElementVNode("div",M,[e.createElementVNode("img",{src:o.image,class:"mr-3 lazyload rounded-full object-cover image w-40 h-40",alt:o.imageAlt||o.author},null,8,H),e.createElementVNode("div",I,[e.createElementVNode("h1",{class:e.normalizeClass([t.titleClasses,"mt-12 text-2xl uppercase tracking-wider font-normal"])},e.toDisplayString(o.title),3),e.createElementVNode("h2",{class:e.normalizeClass([t.contentClasses,"mt-5 text-lg"]),innerHTML:o.content},null,10,L),e.createElementVNode("div",{class:e.normalizeClass([t.authorClasses,"mt-5 text-md font-bold select-none"])},e.toDisplayString(o.author),3)])])],2))),128))]),e.createElementVNode("div",A,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(o,n)=>(e.openBlock(),e.createBlock(c,{key:`${o.title}-${o.author}-B`,class:e.normalizeClass(["overflow-hidden cursor-pointer hover:opacity-70 transition-opacity ease-in-out duration-300 mr-1 ball",{[t.ballActiveColorClass||"text-gray-600"]:t.active===n+1,[t.ballInactiveColorClass||"empty-circle"]:t.active!==n+1}]),style:e.normalizeStyle(t.ballStyle),onClick:J=>t.goToTestimonial(n)},null,8,["style","class","onClick"]))),128))]),e.createElementVNode("a",{class:"absolute top-1/2 left-0",role:"button",rel:"noopener noreferrer","aria-label":"Previous arrow button",href:"#",onClick:l[0]||(l[0]=e.withModifiers((...o)=>t.previousTestimonial&&t.previousTestimonial(...o),["prevent","stop"]))},[e.createVNode(u,{style:e.normalizeStyle(t.arrowStyle),class:"hover:opacity-70 transition-opacity ease-in-out duration-500 lg:w-full arrow"},null,8,["style"])]),e.createElementVNode("a",{class:"absolute top-1/2 right-0",role:"button",href:"#","aria-label":"Next arrow button",rel:"noopener noreferrer",onClick:l[1]||(l[1]=e.withModifiers((...o)=>t.nextTestimonial&&t.nextTestimonial(...o),["prevent","stop"]))},[e.createVNode(d,{style:e.normalizeStyle(t.arrowStyle),class:"hover:opacity-70 transition-opacity ease-in-out duration-500 lg:w-full arrow"},null,8,["style"])])])],32)])])])}var p=B(v,[["render",W]]);let g=!1;function w(t){g||(g=!0,t.component(p.name,p))}let i;const O={install:w};window&&"Vue"in window?i=window.Vue:global&&"Vue"in global&&(i=global.Vue),i&&typeof i.use=="function"&&i.use(O);var q={install:w};return q});