vue-testimonials
Version:
Vue Testimonials is a Vue 3 testimonials component made with Vite and TypeScript
293 lines (292 loc) • 10.2 kB
JavaScript
import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, computed, onMounted, onUnmounted, resolveComponent, Fragment, renderList, normalizeClass, toDisplayString, createBlock, normalizeStyle, withModifiers, createVNode } from "vue";
const _hoisted_1$3 = {
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"
};
const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", { d: "m9 18 6-6-6-6" }, null, -1);
const _hoisted_3$3 = [
_hoisted_2$3
];
function render$2(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
}
const _hoisted_1$2 = {
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"
};
const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", { d: "m15 18-6-6 6-6" }, null, -1);
const _hoisted_3$2 = [
_hoisted_2$2
];
function render$1(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
}
const _hoisted_1$1 = { viewBox: "0 0 18 18" };
const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("circle", {
cx: "7",
cy: "7",
r: "6"
}, null, -1);
const _hoisted_3$1 = [
_hoisted_2$1
];
function render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
}
var style = "";
var _export_sfc = (sfc, props) => {
for (const [key, val] of props) {
sfc[key] = val;
}
return sfc;
};
const defaultColor = "#FFFFFF";
const defaultArrowSize = "64px";
const defaultBallSize = "20px";
const _sfc_main = defineComponent({
name: "VueTestimonials",
components: {
IconChevronrightLg: render$2,
IconChevronleftLg: render$1,
Ball: render
},
props: {
interval: {
type: Number,
default: 8e3
},
items: {
type: Array,
required: true
},
arrowColor: {
type: String,
default: defaultColor
},
arrowWidth: {
type: [Number, String],
default: defaultArrowSize
},
arrowHeight: {
type: [Number, String],
default: defaultArrowSize
},
ballActiveColorClass: {
type: String,
default: null
},
ballInactiveColorClass: {
type: String,
default: null
},
ballWidth: {
type: [Number, String],
default: defaultBallSize
},
ballHeight: {
type: [Number, String],
default: defaultBallSize
},
titleClasses: {
type: [Object, String],
default: null
},
authorClasses: {
type: [Object, String],
default: null
},
contentClasses: {
type: [Object, String],
default: null
}
},
setup(props) {
const time = ref();
const active = ref(1);
const arrowStyle = computed(() => ({
color: props.arrowColor,
width: props.arrowWidth,
height: props.arrowHeight
}));
const ballStyle = computed(() => ({
width: props.ballWidth,
height: props.ballHeight
}));
const clearCarousel = () => {
if (time.value)
clearInterval(time.value);
};
const startCarousel = () => {
time.value = setInterval(() => {
nextTestimonial();
}, props.interval);
};
const previousTestimonial = () => {
var _a;
if (active.value <= 1) {
active.value = (_a = props.items) == null ? void 0 : _a.length;
return;
}
active.value -= 1;
};
const nextTestimonial = () => {
var _a;
if (active.value >= ((_a = props.items) == null ? void 0 : _a.length)) {
active.value = 1;
return;
}
active.value += 1;
};
const goToTestimonial = (index2) => {
active.value = index2 + 1;
};
onMounted(() => {
startCarousel();
});
onUnmounted(() => {
clearCarousel();
});
return {
clearCarousel,
startCarousel,
previousTestimonial,
nextTestimonial,
goToTestimonial,
active,
arrowStyle,
ballStyle
};
}
});
const _hoisted_1 = { class: "vue-testimonials" };
const _hoisted_2 = { class: "flex-row flex flex-nowrap text-white mt-6 pb-10 lg:pb-20 mb-40" };
const _hoisted_3 = { class: "mx-auto" };
const _hoisted_4 = { class: "relative" };
const _hoisted_5 = { class: "w-full" };
const _hoisted_6 = { class: "flex justify-center flex-wrap items-center text-center" };
const _hoisted_7 = ["src", "alt"];
const _hoisted_8 = { class: "media-body w-full" };
const _hoisted_9 = ["innerHTML"];
const _hoisted_10 = { class: "mt-5 w-full fill-current flex justify-center items-center flex-row z-20 relative" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ball = resolveComponent("ball");
const _component_icon_chevronleft_lg = resolveComponent("icon-chevronleft-lg");
const _component_icon_chevronright_lg = resolveComponent("icon-chevronright-lg");
return openBlock(), createElementBlock("section", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
onMouseover: _cache[2] || (_cache[2] = (...args) => _ctx.clearCarousel && _ctx.clearCarousel(...args)),
onMouseout: _cache[3] || (_cache[3] = (...args) => _ctx.startCarousel && _ctx.startCarousel(...args))
}, [
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, key) => {
return openBlock(), createElementBlock("div", {
key: `${item.title}-${item.author}`,
class: normalizeClass(["item transition-opacity duration-300 ease-in-out px-16 lg:px-0", {
active: _ctx.active === key + 1,
inactive: _ctx.active !== key + 1
}])
}, [
createElementVNode("div", _hoisted_6, [
createElementVNode("img", {
src: item.image,
class: "mr-3 lazyload rounded-full object-cover image w-40 h-40",
alt: item.imageAlt || item.author
}, null, 8, _hoisted_7),
createElementVNode("div", _hoisted_8, [
createElementVNode("h1", {
class: normalizeClass([_ctx.titleClasses, "mt-12 text-2xl uppercase tracking-wider font-normal"])
}, toDisplayString(item.title), 3),
createElementVNode("h2", {
class: normalizeClass([_ctx.contentClasses, "mt-5 text-lg"]),
innerHTML: item.content
}, null, 10, _hoisted_9),
createElementVNode("div", {
class: normalizeClass([_ctx.authorClasses, "mt-5 text-md font-bold select-none"])
}, toDisplayString(item.author), 3)
])
])
], 2);
}), 128))
]),
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, key) => {
return openBlock(), createBlock(_component_ball, {
key: `${item.title}-${item.author}-B`,
class: normalizeClass(["overflow-hidden cursor-pointer hover:opacity-70 transition-opacity ease-in-out duration-300 mr-1 ball", {
[_ctx.ballActiveColorClass || "text-gray-600"]: _ctx.active === key + 1,
[_ctx.ballInactiveColorClass || "empty-circle"]: _ctx.active !== key + 1
}]),
style: normalizeStyle(_ctx.ballStyle),
onClick: ($event) => _ctx.goToTestimonial(key)
}, null, 8, ["style", "class", "onClick"]);
}), 128))
]),
createElementVNode("a", {
class: "absolute top-1/2 left-0",
role: "button",
rel: "noopener noreferrer",
"aria-label": "Previous arrow button",
href: "#",
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.previousTestimonial && _ctx.previousTestimonial(...args), ["prevent", "stop"]))
}, [
createVNode(_component_icon_chevronleft_lg, {
style: normalizeStyle(_ctx.arrowStyle),
class: "hover:opacity-70 transition-opacity ease-in-out duration-500 lg:w-full arrow"
}, null, 8, ["style"])
]),
createElementVNode("a", {
class: "absolute top-1/2 right-0",
role: "button",
href: "#",
"aria-label": "Next arrow button",
rel: "noopener noreferrer",
onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.nextTestimonial && _ctx.nextTestimonial(...args), ["prevent", "stop"]))
}, [
createVNode(_component_icon_chevronright_lg, {
style: normalizeStyle(_ctx.arrowStyle),
class: "hover:opacity-70 transition-opacity ease-in-out duration-500 lg:w-full arrow"
}, null, 8, ["style"])
])
])
], 32)
])
])
]);
}
var VueTestimonials = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
let installed = false;
function install(Vue) {
if (installed)
return;
installed = true;
Vue.component(VueTestimonials.name, VueTestimonials);
}
let GlobalVue;
const plugin = { install };
if (window && "Vue" in window) {
GlobalVue = window["Vue"];
} else if (global && "Vue" in global) {
GlobalVue = global["Vue"];
}
if (GlobalVue && typeof GlobalVue.use === "function") {
GlobalVue.use(plugin);
}
var index = { install };
export { index as default };