winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
313 lines (312 loc) • 10 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var constants = require("./constants.js");
var carouselIndicator = require("./carousel-indicator.js");
var carouselArrow = require("./carousel-arrow.js");
var context = require("./context.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const DEFAULT_AUTO_PLAY_INTERVAL = 3e3;
const DEFAULT_AUTO_PLAY = {
interval: DEFAULT_AUTO_PLAY_INTERVAL,
hoverToPause: true
};
function getValidIndex(i, length) {
const indexNumber = +i;
return typeof indexNumber === "number" && !Number.isNaN(indexNumber) ? (indexNumber + length) % length : i;
}
const _sfc_main = vue.defineComponent({
name: "Carousel",
components: {
CarouselIndicator: carouselIndicator,
CarouselArrow: carouselArrow
},
props: {
current: {
type: Number
},
defaultCurrent: {
type: Number,
default: 1
},
autoPlay: {
type: [Boolean, Object],
default: false
},
moveSpeed: {
type: Number,
default: 500
},
animationName: {
type: String,
default: "slide"
},
trigger: {
type: String,
validator: (value) => {
return constants.TRIGGERS.includes(value);
},
default: "click"
},
direction: {
type: String,
validator: (value) => {
return constants.DIRECTIONS.includes(value);
},
default: "horizontal"
},
showArrow: {
type: String,
validator: (value) => {
return constants.ARROWS.includes(value);
},
default: "always"
},
arrowClass: {
type: String,
default: ""
},
indicatorType: {
type: String,
validator: (value) => {
return constants.INDICATORS.includes(value);
},
default: "dot"
},
indicatorPosition: {
type: String,
validator: (value) => {
return constants.INDICATORS_POSITION.includes(value);
},
default: "bottom"
},
indicatorClass: {
type: String,
default: ""
},
transitionTimingFunction: {
type: String,
default: "cubic-bezier(0.34, 0.69, 0.1, 1)"
}
},
emits: [
"update:current",
"change"
],
setup(props, { emit }) {
const {
current: currentRef,
indicatorType: indicatorTypeRef,
animationName,
moveSpeed,
transitionTimingFunction,
autoPlay,
showArrow: showArrowRef
} = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("carousel");
const animationTimerRef = vue.ref(null);
const intervalRef = vue.ref(null);
const isPauseRef = vue.ref(false);
const previousIndexRef = vue.ref(null);
const slideDirectionRef = vue.ref(null);
const itemsRef = vue.ref([]);
const itemsLegnthRef = vue.computed(() => itemsRef.value.length);
const computedAutoPlayRef = useAutoPlay(autoPlay);
const indexRef = vue.ref(props.defaultCurrent - 1);
const mergedIndexesRef = vue.computed(() => {
const childrenLength = itemsRef.value.length;
const current = currentRef == null ? void 0 : currentRef.value;
const index = indexRef.value;
const mergedIndex = typeof current === "number" ? getValidIndex(current - 1, itemsLegnthRef.value) : index;
const prevIndex = getValidIndex(mergedIndex - 1, childrenLength);
const nextIndex = getValidIndex(mergedIndex + 1, childrenLength);
return {
mergedIndex,
mergedPrevIndex: prevIndex,
mergedNextIndex: nextIndex
};
});
function addItem(item) {
itemsRef.value.push(item);
}
function removeItem(uid) {
const index = itemsRef.value.findIndex((item) => item.uid === uid);
if (index !== -1) {
itemsRef.value.splice(index, 1);
}
}
const carouselContext = vue.reactive({
addItem,
removeItem,
slideTo,
mergedIndexes: mergedIndexesRef,
previousIndex: previousIndexRef,
animationName,
slideDirection: slideDirectionRef,
items: itemsRef,
transitionTimingFunction,
moveSpeed
});
vue.provide(context.carouselInjectionKey, carouselContext);
const clearTimer = () => {
if (intervalRef.value) {
window.clearInterval(intervalRef.value);
}
};
vue.watchEffect(() => {
var _a;
const { interval } = computedAutoPlayRef.value || {};
const { mergedNextIndex } = mergedIndexesRef.value;
const _interval = ((_a = itemsRef.value) == null ? void 0 : _a.length) > 1 && !isPauseRef.value && interval;
clearTimer();
if (_interval) {
intervalRef.value = window.setInterval(() => {
slideTo({
targetIndex: mergedNextIndex
});
}, interval);
}
});
vue.onBeforeUnmount(() => {
clearTimer();
});
function slideTo({
targetIndex,
isNegative = false,
isManual = false
}) {
if (!animationTimerRef.value && targetIndex !== mergedIndexesRef.value.mergedIndex) {
emit("update:current", targetIndex + 1);
emit("change", targetIndex + 1, indexRef.value + 1, isManual);
previousIndexRef.value = indexRef.value;
indexRef.value = targetIndex;
slideDirectionRef.value = isNegative ? "negative" : "positive";
animationTimerRef.value = window.setTimeout(() => {
animationTimerRef.value = null;
}, moveSpeed.value);
}
}
const eventHandlers = useEventHandlers(computedAutoPlayRef, isPauseRef);
const hasIndicator = vue.computed(() => {
return indicatorTypeRef.value !== "never" && itemsLegnthRef.value > 1;
});
const hasArrow = vue.computed(() => {
return showArrowRef.value !== "never" && itemsLegnthRef.value > 1;
});
const cls = vue.computed(() => {
return [
prefixCls,
`${prefixCls}-indicator-position-${props.indicatorPosition}`
];
});
const contentCls = vue.computed(() => {
return [
`${prefixCls}-${props.animationName}`,
`${prefixCls}-${props.direction}`,
{ [`${prefixCls}-negative`]: slideDirectionRef.value === "negative" }
];
});
const indicatorCls = vue.computed(() => {
return [
`${prefixCls}-indicator-wrapper`,
`${prefixCls}-indicator-wrapper-${props.indicatorPosition}`
];
});
return {
prefixCls,
eventHandlers,
length: itemsLegnthRef,
mergedIndexes: mergedIndexesRef,
slideTo,
hasIndicator,
hasArrow,
slideDirection: slideDirectionRef,
cls,
contentCls,
indicatorCls
};
}
});
const useAutoPlay = (autoPlayRef) => {
return vue.computed(() => {
const { value: autoPlay } = autoPlayRef;
if (autoPlay === false) {
return {};
}
if (autoPlay === true) {
return DEFAULT_AUTO_PLAY;
}
return __spreadValues(__spreadValues({}, DEFAULT_AUTO_PLAY), autoPlay);
});
};
const useEventHandlers = (computedAutoPlayRef, isPauseRef) => {
return vue.computed(() => {
const { value: autoPlayConfig } = computedAutoPlayRef;
return autoPlayConfig.hoverToPause ? {
mouseEnter: () => isPauseRef.value = true,
mouseLeave: () => isPauseRef.value = false
} : {};
});
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CarouselIndicator = vue.resolveComponent("CarouselIndicator");
const _component_CarouselArrow = vue.resolveComponent("CarouselArrow");
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: _ctx.cls }, vue.toHandlers(_ctx.eventHandlers)), [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.contentCls)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
_ctx.hasIndicator ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.indicatorCls)
}, [
vue.createVNode(_component_CarouselIndicator, {
class: vue.normalizeClass(_ctx.indicatorClass),
type: _ctx.indicatorType,
count: _ctx.length,
"active-index": _ctx.mergedIndexes.mergedIndex,
position: _ctx.indicatorPosition,
trigger: _ctx.trigger,
"on-select-index": (index) => _ctx.slideTo({
targetIndex: index,
isNegative: index < _ctx.mergedIndexes.mergedIndex,
isManual: true
})
}, null, 8, ["class", "type", "count", "active-index", "position", "trigger", "on-select-index"])
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.hasArrow ? (vue.openBlock(), vue.createBlock(_component_CarouselArrow, {
key: 1,
class: vue.normalizeClass(_ctx.arrowClass),
direction: _ctx.direction,
"show-arrow": _ctx.showArrow,
prev: () => _ctx.slideTo({
targetIndex: _ctx.mergedIndexes.mergedPrevIndex,
isNegative: true,
isManual: true
}),
next: () => _ctx.slideTo({
targetIndex: _ctx.mergedIndexes.mergedNextIndex,
isManual: true
})
}, null, 8, ["class", "direction", "show-arrow", "prev", "next"])) : vue.createCommentVNode("v-if", true)
], 16);
}
var _Carousel = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Carousel;