tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
214 lines (213 loc) • 7.35 kB
JavaScript
import { defineComponent, useSlots, computed, ref, watch, provide, resolveComponent, openBlock, createElementBlock, unref, normalizeStyle, createElementVNode, renderSlot, Fragment, renderList, normalizeClass, withModifiers, withDirectives, createVNode, vShow } from "vue";
import "../../../theme-chalk/src/carousel.scss.mjs";
import _sfc_main$1 from "../../carousel-item/src/carousel-item.vue.mjs";
const _hoisted_1 = ["tas-anim", "tas-indicator", "tas-arrow"];
const _hoisted_2 = { "carousel-item": "" };
const _hoisted_3 = { class: "tas-carousel-ind" };
const _hoisted_4 = ["onClick"];
const __default__ = {
name: "TassCarousel"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
width: { default: "100%" },
height: { default: "280px" },
modelValue: null,
autoplay: { type: Boolean, default: true },
arrow: { default: "hover" },
anim: { default: "default" },
indicator: { default: "inside" },
pauseOnHover: { type: Boolean, default: true },
interval: { default: 3e3 }
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props = __props;
const slot = useSlots();
const slots = slot.default && slot.default();
const active = computed({
get() {
return props.modelValue;
},
set(val) {
emit("update:modelValue", val);
}
});
const anim = computed(() => props.anim);
const change = function(id) {
emit("change", id);
active.value = id;
};
const childrens = ref([]);
const slotsChange = ref(true);
const setItemInstanceBySlot = function(nodes) {
const showNodes = nodes == null ? void 0 : nodes.filter((item) => {
return item.children != "v-if";
});
showNodes == null ? void 0 : showNodes.map((item) => {
let component = item.type;
if (component.name != _sfc_main$1.name) {
setItemInstanceBySlot(item.children);
} else {
childrens.value.push(item);
}
});
};
watch(
slotsChange,
() => {
childrens.value = [];
setItemInstanceBySlot(slot.default && slot.default());
},
{ immediate: true, deep: true }
);
const sub = () => {
var _a, _b, _c;
for (var i = 0; i < childrens.value.length; i++) {
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
if (i === 0) {
active.value = (_b = childrens.value[slots.length - 1].props) == null ? void 0 : _b.id;
} else {
active.value = (_c = childrens.value[i - 1].props) == null ? void 0 : _c.id;
}
break;
}
}
};
const add = () => {
var _a, _b, _c;
for (var i = 0; i < childrens.value.length; i++) {
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
if (i === childrens.value.length - 1) {
active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
} else {
active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
}
break;
}
}
};
const autoplay = () => {
var _a, _b, _c;
for (var i = 0; i < childrens.value.length; i++) {
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
if (i === childrens.value.length - 1) {
active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
} else {
active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
}
break;
}
}
};
let intervalTimer = 0;
const cleanIntervalTimer = () => {
if (intervalTimer) {
window.clearInterval(intervalTimer);
intervalTimer = 0;
}
};
const handleMouseEnter = () => {
if (props.autoplay && props.pauseOnHover) {
cleanIntervalTimer();
}
};
const handleMouseLeave = () => {
if (props.autoplay && props.pauseOnHover) {
intervalTimer = window.setInterval(autoplay, props.interval);
}
};
watch(
() => props.autoplay,
() => {
if (props.autoplay) {
intervalTimer = window.setInterval(autoplay, props.interval);
}
},
{ immediate: true }
);
provide("active", active);
provide("slotsChange", slotsChange);
provide("anim", anim);
return (_ctx, _cache) => {
const _component_tass_icon = resolveComponent("tass-icon");
return openBlock(), createElementBlock("div", {
class: "tas-carousel",
"tas-anim": unref(anim),
"tas-indicator": __props.indicator,
"tas-arrow": __props.arrow,
style: normalizeStyle({ width: __props.width, height: __props.height }),
onMouseenter: handleMouseEnter,
onMouseleave: handleMouseLeave
}, [
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "default")
]),
createElementVNode("div", _hoisted_3, [
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(childrens.value, (ss, index) => {
var _a;
return openBlock(), createElementBlock("li", {
key: index,
class: normalizeClass([((_a = ss.props) == null ? void 0 : _a.id) === unref(active) ? "tas-this" : ""]),
onClick: withModifiers(($event) => {
var _a2;
return change((_a2 = ss.props) == null ? void 0 : _a2.id);
}, ["stop"])
}, null, 10, _hoisted_4);
}), 128))
])
]),
withDirectives(createElementVNode("button", {
class: "tas-icon tas-carousel-arrow",
"tas-type": "sub",
onClick: sub
}, [
createVNode(_component_tass_icon, {
style: { "position": "relative", "top": "-2px" },
name: "chevronup"
})
], 512), [
[vShow, unref(anim) === "updown"]
]),
withDirectives(createElementVNode("button", {
class: "tas-icon tas-carousel-arrow",
"tas-type": "sub",
onClick: sub
}, [
createVNode(_component_tass_icon, {
style: { "position": "relative", "top": "-2px", "right": "0px" },
name: "chevronleft"
})
], 512), [
[vShow, unref(anim) !== "updown"]
]),
withDirectives(createElementVNode("button", {
class: "tas-icon tas-carousel-arrow",
"tas-type": "add",
onClick: add
}, [
createVNode(_component_tass_icon, {
style: { "position": "relative", "top": "-2px" },
name: "chevronright"
})
], 512), [
[vShow, unref(anim) !== "updown"]
]),
withDirectives(createElementVNode("button", {
class: "tas-icon tas-carousel-arrow",
"tas-type": "add",
onClick: add
}, [
createVNode(_component_tass_icon, { name: "chevrondown" })
], 512), [
[vShow, unref(anim) === "updown"]
])
], 44, _hoisted_1);
};
}
});
export {
_sfc_main as default
};