This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,12 @@
import Carousel from './src/carousel.vue';
import CarouselItem from './src/carousel-item.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElCarousel: SFCWithInstall<typeof Carousel> & {
CarouselItem: typeof CarouselItem;
};
export default ElCarousel;
export declare const ElCarouselItem: SFCWithInstall<typeof CarouselItem>;
export * from './src/carousel';
export * from './src/carousel-item';
export * from './src/constants';
export type { CarouselInstance, CarouselItemInstance } from './src/instance';

View File

@@ -0,0 +1,25 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var carousel$1 = require('./src/carousel2.js');
var carouselItem$1 = require('./src/carousel-item2.js');
var carousel = require('./src/carousel.js');
var carouselItem = require('./src/carousel-item.js');
var constants = require('./src/constants.js');
var install = require('../../utils/vue/install.js');
const ElCarousel = install.withInstall(carousel$1["default"], {
CarouselItem: carouselItem$1["default"]
});
const ElCarouselItem = install.withNoopInstall(carouselItem$1["default"]);
exports.carouselEmits = carousel.carouselEmits;
exports.carouselProps = carousel.carouselProps;
exports.carouselItemProps = carouselItem.carouselItemProps;
exports.CAROUSEL_ITEM_NAME = constants.CAROUSEL_ITEM_NAME;
exports.carouselContextKey = constants.carouselContextKey;
exports.ElCarousel = ElCarousel;
exports.ElCarouselItem = ElCarouselItem;
exports["default"] = ElCarousel;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../../../../../packages/components/carousel/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Carousel from './src/carousel.vue'\nimport CarouselItem from './src/carousel-item.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElCarousel: SFCWithInstall<typeof Carousel> & {\n CarouselItem: typeof CarouselItem\n} = withInstall(Carousel, {\n CarouselItem,\n})\n\nexport default ElCarousel\n\nexport const ElCarouselItem: SFCWithInstall<typeof CarouselItem> =\n withNoopInstall(CarouselItem)\n\nexport * from './src/carousel'\nexport * from './src/carousel-item'\nexport * from './src/constants'\n\nexport type { CarouselInstance, CarouselItemInstance } from './src/instance'\n"],"names":["withInstall","Carousel","CarouselItem","withNoopInstall"],"mappings":";;;;;;;;;;;AAGY,MAAC,UAAU,GAAGA,mBAAW,CAACC,qBAAQ,EAAE;AAChD,gBAAEC,yBAAY;AACd,CAAC,EAAE;AAES,MAAC,cAAc,GAAGC,uBAAe,CAACD,yBAAY;;;;;;;;;;;"}

View File

@@ -0,0 +1,7 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
export declare const carouselItemProps: {
readonly name: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly label: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
};
export type CarouselItemProps = ExtractPropTypes<typeof carouselItemProps>;
export type CarouselItemPropsPublic = __ExtractPublicPropTypes<typeof carouselItemProps>;

View File

@@ -0,0 +1,16 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
const carouselItemProps = runtime.buildProps({
name: { type: String, default: "" },
label: {
type: [String, Number],
default: ""
}
});
exports.carouselItemProps = carouselItemProps;
//# sourceMappingURL=carousel-item.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"carousel-item.js","sources":["../../../../../../packages/components/carousel/src/carousel-item.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\n\nexport const carouselItemProps = buildProps({\n /**\n * @description name of the item, can be used in `setActiveItem`\n */\n name: { type: String, default: '' },\n /**\n * @description text content for the corresponding indicator\n */\n label: {\n type: [String, Number],\n default: '',\n },\n} as const)\n\nexport type CarouselItemProps = ExtractPropTypes<typeof carouselItemProps>\nexport type CarouselItemPropsPublic = __ExtractPublicPropTypes<\n typeof carouselItemProps\n>\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}

View File

@@ -0,0 +1,20 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly name: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly label: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly name: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly label: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
}>>, {
readonly label: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
readonly name: string;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,78 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var carouselItem = require('./carousel-item.js');
var useCarouselItem = require('./use-carousel-item.js');
var constants = require('./constants.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
const __default__ = vue.defineComponent({
name: constants.CAROUSEL_ITEM_NAME
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: carouselItem.carouselItemProps,
setup(__props) {
const props = __props;
const ns = index.useNamespace("carousel");
const {
carouselItemRef,
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
} = useCarouselItem.useCarouselItem(props);
const itemKls = vue.computed(() => [
ns.e("item"),
ns.is("active", active.value),
ns.is("in-stage", inStage.value),
ns.is("hover", hover.value),
ns.is("animating", animating.value),
{
[ns.em("item", "card")]: isCardType.value,
[ns.em("item", "card-vertical")]: isCardType.value && isVertical.value
}
]);
const itemStyle = vue.computed(() => {
const translateType = `translate${vue.unref(isVertical) ? "Y" : "X"}`;
const _translate = `${translateType}(${vue.unref(translate)}px)`;
const _scale = `scale(${vue.unref(scale)})`;
const transform = [_translate, _scale].join(" ");
return {
transform
};
});
return (_ctx, _cache) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref_key: "carouselItemRef",
ref: carouselItemRef,
class: vue.normalizeClass(vue.unref(itemKls)),
style: vue.normalizeStyle(vue.unref(itemStyle)),
onClick: vue.unref(handleItemClick)
}, [
vue.unref(isCardType) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("mask"))
}, null, 2)), [
[vue.vShow, !vue.unref(active)]
]) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
], 14, ["onClick"])), [
[vue.vShow, vue.unref(ready)]
]);
};
}
});
var CarouselItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "carousel-item.vue"]]);
exports["default"] = CarouselItem;
//# sourceMappingURL=carousel-item2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"carousel-item2.js","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n <div\n v-show=\"ready\"\n ref=\"carouselItemRef\"\n :class=\"itemKls\"\n :style=\"itemStyle\"\n @click=\"handleItemClick\"\n >\n <div v-if=\"isCardType\" v-show=\"!active\" :class=\"ns.e('mask')\" />\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, unref } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { carouselItemProps } from './carousel-item'\nimport { useCarouselItem } from './use-carousel-item'\nimport { CAROUSEL_ITEM_NAME } from './constants'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: CAROUSEL_ITEM_NAME,\n})\n\nconst props = defineProps(carouselItemProps)\nconst ns = useNamespace('carousel')\n\n// inject\nconst {\n carouselItemRef,\n active,\n animating,\n hover,\n inStage,\n isVertical,\n translate,\n isCardType,\n scale,\n ready,\n handleItemClick,\n} = useCarouselItem(props)\n\nconst itemKls = computed(() => [\n ns.e('item'),\n ns.is('active', active.value),\n ns.is('in-stage', inStage.value),\n ns.is('hover', hover.value),\n ns.is('animating', animating.value),\n {\n [ns.em('item', 'card')]: isCardType.value,\n [ns.em('item', 'card-vertical')]: isCardType.value && isVertical.value,\n },\n])\n\nconst itemStyle = computed<CSSProperties>(() => {\n const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`\n const _translate = `${translateType}(${unref(translate)}px)`\n const _scale = `scale(${unref(scale)})`\n const transform = [_translate, _scale].join(' ')\n\n return {\n transform,\n }\n})\n</script>\n"],"names":["CAROUSEL_ITEM_NAME","useNamespace","useCarouselItem","computed","unref"],"mappings":";;;;;;;;;;;uCAsBc,CAAA;AAAA,EACZ,IAAM,EAAAA,4BAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA,EAAA,GAAKC,mBAAa,UAAU,CAAA,CAAA;AAGlC,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAIC,gCAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA,OAAA,GAAUC,aAAS,MAAM;AAAA,MAC7B,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,MACX,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,MAAA,CAAO,KAAK,CAAA;AAAA,MAC5B,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MAC/B,EAAG,CAAA,EAAA,CAAG,OAAS,EAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC1B,EAAG,CAAA,EAAA,CAAG,WAAa,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAClC;AAAA,QACE,CAAC,EAAG,CAAA,EAAA,CAAG,QAAQ,MAAM,CAAC,GAAG,UAAW,CAAA,KAAA;AAAA,QACpC,CAAC,GAAG,EAAG,CAAA,MAAA,EAAQ,eAAe,CAAC,GAAG,UAAW,CAAA,KAAA,IAAS,UAAW,CAAA,KAAA;AAAA,OACnE;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYA,aAAwB,MAAM;AAC9C,MAAA,MAAM,gBAAgB,CAAY,SAAA,EAAAC,SAAA,CAAM,UAAU,CAAA,GAAI,MAAM,GAAG,CAAA,CAAA,CAAA;AAC/D,MAAA,MAAM,aAAa,CAAG,EAAA,aAAa,CAAI,CAAA,EAAAA,SAAA,CAAM,SAAS,CAAC,CAAA,GAAA,CAAA,CAAA;AACvD,MAAA,MAAM,MAAS,GAAA,CAAA,MAAA,EAASA,SAAM,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA;AACpC,MAAA,MAAM,YAAY,CAAC,UAAA,EAAY,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AAE/C,MAAO,OAAA;AAAA,QACL,SAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,27 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
export declare const carouselProps: {
readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly trigger: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly autoplay: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly interval: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
readonly indicatorPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
readonly arrow: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
readonly cardScale: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
readonly loop: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly pauseOnHover: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly motionBlur: BooleanConstructor;
};
export declare const carouselEmits: {
/**
* @description triggers when the active slide switches
* @param current index of the new active slide
* @param prev index of the old active slide
*/
change: (current: number, prev: number) => boolean;
};
export type CarouselProps = ExtractPropTypes<typeof carouselProps>;
export type CarouselPropsPublic = __ExtractPublicPropTypes<typeof carouselProps>;
export type CarouselEmits = typeof carouselEmits;

View File

@@ -0,0 +1,70 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
var types = require('../../../utils/types.js');
const carouselProps = runtime.buildProps({
initialIndex: {
type: Number,
default: 0
},
height: {
type: String,
default: ""
},
trigger: {
type: String,
values: ["hover", "click"],
default: "hover"
},
autoplay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 3e3
},
indicatorPosition: {
type: String,
values: ["", "none", "outside"],
default: ""
},
arrow: {
type: String,
values: ["always", "hover", "never"],
default: "hover"
},
type: {
type: String,
values: ["", "card"],
default: ""
},
cardScale: {
type: Number,
default: 0.83
},
loop: {
type: Boolean,
default: true
},
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
pauseOnHover: {
type: Boolean,
default: true
},
motionBlur: Boolean
});
const carouselEmits = {
change: (current, prev) => [current, prev].every(types.isNumber)
};
exports.carouselEmits = carouselEmits;
exports.carouselProps = carouselProps;
//# sourceMappingURL=carousel.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"carousel.js","sources":["../../../../../../packages/components/carousel/src/carousel.ts"],"sourcesContent":["import { buildProps, isNumber } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\n\nexport const carouselProps = buildProps({\n /**\n * @description index of the initially active slide (starting from 0)\n */\n initialIndex: {\n type: Number,\n default: 0,\n },\n /**\n * @description height of the carousel\n */\n height: {\n type: String,\n default: '',\n },\n /**\n * @description how indicators are triggered\n */\n trigger: {\n type: String,\n values: ['hover', 'click'],\n default: 'hover',\n },\n /**\n * @description whether automatically loop the slides\n */\n autoplay: {\n type: Boolean,\n default: true,\n },\n /**\n * @description interval of the auto loop, in milliseconds\n */\n interval: {\n type: Number,\n default: 3000,\n },\n /**\n * @description position of the indicators\n */\n indicatorPosition: {\n type: String,\n values: ['', 'none', 'outside'],\n default: '',\n },\n /**\n * @description when arrows are shown\n */\n arrow: {\n type: String,\n values: ['always', 'hover', 'never'],\n default: 'hover',\n },\n /**\n * @description type of the Carousel\n */\n type: {\n type: String,\n values: ['', 'card'],\n default: '',\n },\n /**\n * @description when type is card, scaled size of secondary cards\n */\n cardScale: {\n type: Number,\n default: 0.83,\n },\n /**\n * @description display the items in loop\n */\n loop: {\n type: Boolean,\n default: true,\n },\n /**\n * @description display direction\n */\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n /**\n * @description pause autoplay when hover\n */\n pauseOnHover: {\n type: Boolean,\n default: true,\n },\n /**\n * @description infuse dynamism and smoothness into the carousel\n */\n motionBlur: Boolean,\n} as const)\n\nexport const carouselEmits = {\n /**\n * @description triggers when the active slide switches\n * @param current index of the new active slide\n * @param prev index of the old active slide\n */\n change: (current: number, prev: number) => [current, prev].every(isNumber),\n}\n\nexport type CarouselProps = ExtractPropTypes<typeof carouselProps>\nexport type CarouselPropsPublic = __ExtractPublicPropTypes<typeof carouselProps>\nexport type CarouselEmits = typeof carouselEmits\n"],"names":["buildProps","isNumber"],"mappings":";;;;;;;AACY,MAAC,aAAa,GAAGA,kBAAU,CAAC;AACxC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9B,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC;AACnC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;AACxC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC;AACxB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,UAAU,EAAE,OAAO;AACrB,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,MAAM,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,KAAK,CAACC,cAAQ,CAAC;AAC5D;;;;;"}

View File

@@ -0,0 +1,66 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly trigger: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly autoplay: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly interval: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
readonly indicatorPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
readonly arrow: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
readonly cardScale: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
readonly loop: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly pauseOnHover: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly motionBlur: BooleanConstructor;
}, {
/** @description active slide index */
activeIndex: import("vue").WritableComputedRef<number>;
/** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
setActiveItem: (index: number | string) => void;
/** @description switch to the previous slide */
prev: () => void;
/** @description switch to the next slide */
next: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
change: (current: number, prev: number) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly trigger: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly autoplay: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly interval: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
readonly indicatorPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
readonly arrow: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
readonly cardScale: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
readonly loop: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly pauseOnHover: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly motionBlur: BooleanConstructor;
}>> & {
onChange?: ((current: number, prev: number) => any) | undefined;
}, {
readonly height: string;
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "card", unknown>;
readonly arrow: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "always" | "never" | "hover", unknown>;
readonly trigger: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "click" | "hover", unknown>;
readonly loop: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly interval: number;
readonly initialIndex: number;
readonly autoplay: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly indicatorPosition: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "none" | "outside", unknown>;
readonly cardScale: number;
readonly pauseOnHover: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly motionBlur: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,223 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$2 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var carousel = require('./carousel.js');
var useCarousel = require('./use-carousel.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-locale/index.js');
const COMPONENT_NAME = "ElCarousel";
const __default__ = vue.defineComponent({
name: COMPONENT_NAME
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: carousel.carouselProps,
emits: carousel.carouselEmits,
setup(__props, { expose, emit }) {
const props = __props;
const {
root,
activeIndex,
exposeActiveIndex,
arrowDisplay,
hasLabel,
hover,
isCardType,
items,
isVertical,
containerStyle,
handleButtonEnter,
handleButtonLeave,
handleIndicatorClick,
handleMouseEnter,
handleMouseLeave,
setActiveItem,
prev,
next,
PlaceholderItem,
isTwoLengthShow,
ItemsSorter,
throttledArrowClick,
throttledIndicatorHover
} = useCarousel.useCarousel(props, emit);
const ns = index.useNamespace("carousel");
const { t } = index$1.useLocale();
const carouselClasses = vue.computed(() => {
const classes = [ns.b(), ns.m(props.direction)];
if (vue.unref(isCardType)) {
classes.push(ns.m("card"));
}
return classes;
});
const indicatorsClasses = vue.computed(() => {
const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
if (vue.unref(hasLabel)) {
classes.push(ns.em("indicators", "labels"));
}
if (props.indicatorPosition === "outside") {
classes.push(ns.em("indicators", "outside"));
}
if (vue.unref(isVertical)) {
classes.push(ns.em("indicators", "right"));
}
return classes;
});
function handleTransitionStart(e) {
if (!props.motionBlur)
return;
const kls = vue.unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
e.currentTarget.classList.add(kls);
}
function handleTransitionEnd(e) {
if (!props.motionBlur)
return;
const kls = vue.unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
e.currentTarget.classList.remove(kls);
}
expose({
activeIndex: exposeActiveIndex,
setActiveItem,
prev,
next
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "root",
ref: root,
class: vue.normalizeClass(vue.unref(carouselClasses)),
onMouseenter: vue.withModifiers(vue.unref(handleMouseEnter), ["stop"]),
onMouseleave: vue.withModifiers(vue.unref(handleMouseLeave), ["stop"])
}, [
vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 0,
name: "carousel-arrow-left",
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
"aria-label": vue.unref(t)("el.carousel.leftArrow"),
onMouseenter: ($event) => vue.unref(handleButtonEnter)("left"),
onMouseleave: vue.unref(handleButtonLeave),
onClick: vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"])
}, [
vue.createVNode(vue.unref(index$2.ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowLeft))
]),
_: 1
})
], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
[
vue.vShow,
(_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
]
])
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 1,
name: "carousel-arrow-right",
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
"aria-label": vue.unref(t)("el.carousel.rightArrow"),
onMouseenter: ($event) => vue.unref(handleButtonEnter)("right"),
onMouseleave: vue.unref(handleButtonLeave),
onClick: vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"])
}, [
vue.createVNode(vue.unref(index$2.ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowRight))
]),
_: 1
})
], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
[
vue.vShow,
(_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
]
])
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("container")),
style: vue.normalizeStyle(vue.unref(containerStyle)),
onTransitionstart: handleTransitionStart,
onTransitionend: handleTransitionEnd
}, [
vue.createVNode(vue.unref(PlaceholderItem)),
vue.renderSlot(_ctx.$slots, "default")
], 38),
vue.createVNode(vue.unref(ItemsSorter), null, {
default: vue.withCtx(() => [
_ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
key: 0,
class: vue.normalizeClass(vue.unref(indicatorsClasses))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
key: index,
class: vue.normalizeClass([
vue.unref(ns).e("indicator"),
vue.unref(ns).em("indicator", _ctx.direction),
vue.unref(ns).is("active", index === vue.unref(activeIndex))
]),
onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
}, [
vue.createElementVNode("button", {
class: vue.normalizeClass(vue.unref(ns).e("button")),
"aria-label": vue.unref(t)("el.carousel.indicator", { index: index + 1 })
}, [
vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
], 10, ["aria-label"])
], 42, ["onMouseenter", "onClick"])), [
[vue.vShow, vue.unref(isTwoLengthShow)(index)]
]);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}),
props.motionBlur ? (vue.openBlock(), vue.createElementBlock("svg", {
key: 2,
xmlns: "http://www.w3.org/2000/svg",
version: "1.1",
style: { "display": "none" }
}, [
vue.createElementVNode("defs", null, [
vue.createElementVNode("filter", { id: "elCarouselHorizontal" }, [
vue.createElementVNode("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "12,0"
})
]),
vue.createElementVNode("filter", { id: "elCarouselVertical" }, [
vue.createElementVNode("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "0,10"
})
])
])
])) : vue.createCommentVNode("v-if", true)
], 42, ["onMouseenter", "onMouseleave"]);
};
}
});
var Carousel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "carousel.vue"]]);
exports["default"] = Carousel;
//# sourceMappingURL=carousel2.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
import type { InjectionKey, Ref, VNode } from 'vue';
import type { CarouselItemProps } from './carousel-item';
export type CarouselItemStates = {
hover: boolean;
translate: number;
scale: number;
active: boolean;
ready: boolean;
inStage: boolean;
animating: boolean;
};
export type CarouselItemContext = {
props: CarouselItemProps;
states: CarouselItemStates;
uid: number;
getVnode: () => VNode;
translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
};
export type CarouselContext = {
root: Ref<HTMLElement | undefined>;
items: Ref<CarouselItemContext[]>;
isCardType: Ref<boolean>;
isVertical: Ref<boolean>;
loop: boolean;
cardScale: number;
addItem: (item: CarouselItemContext) => void;
removeItem: (item: CarouselItemContext) => void;
setActiveItem: (index: number) => void;
setContainerHeight: (height: number) => void;
};
export declare const carouselContextKey: InjectionKey<CarouselContext>;
export declare const CAROUSEL_ITEM_NAME = "ElCarouselItem";

View File

@@ -0,0 +1,10 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const carouselContextKey = Symbol("carouselContextKey");
const CAROUSEL_ITEM_NAME = "ElCarouselItem";
exports.CAROUSEL_ITEM_NAME = CAROUSEL_ITEM_NAME;
exports.carouselContextKey = carouselContextKey;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.js","sources":["../../../../../../packages/components/carousel/src/constants.ts"],"sourcesContent":["import type { InjectionKey, Ref, VNode } from 'vue'\nimport type { CarouselItemProps } from './carousel-item'\n\nexport type CarouselItemStates = {\n hover: boolean\n translate: number\n scale: number\n active: boolean\n ready: boolean\n inStage: boolean\n animating: boolean\n}\n\nexport type CarouselItemContext = {\n props: CarouselItemProps\n states: CarouselItemStates\n uid: number\n getVnode: () => VNode\n translateItem: (index: number, activeIndex: number, oldIndex?: number) => void\n}\n\nexport type CarouselContext = {\n root: Ref<HTMLElement | undefined>\n items: Ref<CarouselItemContext[]>\n isCardType: Ref<boolean>\n isVertical: Ref<boolean>\n loop: boolean\n cardScale: number\n addItem: (item: CarouselItemContext) => void\n removeItem: (item: CarouselItemContext) => void\n setActiveItem: (index: number) => void\n setContainerHeight: (height: number) => void\n}\n\nexport const carouselContextKey: InjectionKey<CarouselContext> =\n Symbol('carouselContextKey')\n\nexport const CAROUSEL_ITEM_NAME = 'ElCarouselItem'\n"],"names":[],"mappings":";;;;AAAY,MAAC,kBAAkB,GAAG,MAAM,CAAC,oBAAoB,EAAE;AACnD,MAAC,kBAAkB,GAAG;;;;;"}

View File

@@ -0,0 +1,4 @@
import type Carousel from './carousel.vue';
import type CarouselItem from './carousel-item.vue';
export type CarouselInstance = InstanceType<typeof Carousel> & unknown;
export type CarouselItemInstance = InstanceType<typeof CarouselItem> & unknown;

View File

@@ -0,0 +1,3 @@
'use strict';
//# sourceMappingURL=instance.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"instance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,14 @@
import type { CarouselItemProps } from './carousel-item';
export declare const useCarouselItem: (props: CarouselItemProps) => {
carouselItemRef: import("vue").Ref<HTMLElement | undefined>;
active: import("vue").Ref<boolean>;
animating: import("vue").Ref<boolean>;
hover: import("vue").Ref<boolean>;
inStage: import("vue").Ref<boolean>;
isVertical: import("vue").Ref<boolean>;
translate: import("vue").Ref<number>;
isCardType: import("vue").Ref<boolean>;
scale: import("vue").Ref<number>;
ready: import("vue").Ref<boolean>;
handleItemClick: () => void;
};

View File

@@ -0,0 +1,121 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var constants = require('./constants.js');
var types = require('../../../utils/types.js');
const useCarouselItem = (props) => {
const carouselContext = vue.inject(constants.carouselContextKey);
const instance = vue.getCurrentInstance();
const carouselItemRef = vue.ref();
const hover = vue.ref(false);
const translate = vue.ref(0);
const scale = vue.ref(1);
const active = vue.ref(false);
const ready = vue.ref(false);
const inStage = vue.ref(false);
const animating = vue.ref(false);
const { isCardType, isVertical, cardScale } = carouselContext;
function processIndex(index, activeIndex, length) {
const lastItemIndex = length - 1;
const prevItemIndex = activeIndex - 1;
const nextItemIndex = activeIndex + 1;
const halfItemIndex = length / 2;
if (activeIndex === 0 && index === lastItemIndex) {
return -1;
} else if (activeIndex === lastItemIndex && index === 0) {
return length;
} else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
return length + 1;
} else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
return -2;
}
return index;
}
function calcCardTranslate(index, activeIndex) {
var _a, _b;
const parentWidth = vue.unref(isVertical) ? ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
if (inStage.value) {
return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + cardScale) * parentWidth / 4;
} else {
return (3 + cardScale) * parentWidth / 4;
}
}
function calcTranslate(index, activeIndex, isVertical2) {
const rootEl = carouselContext.root.value;
if (!rootEl)
return 0;
const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
return distance * (index - activeIndex);
}
const translateItem = (index, activeIndex, oldIndex) => {
var _a;
const _isCardType = vue.unref(isCardType);
const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
const isActive = index === activeIndex;
if (!_isCardType && !types.isUndefined(oldIndex)) {
animating.value = isActive || index === oldIndex;
}
if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
index = processIndex(index, activeIndex, carouselItemLength);
}
const _isVertical = vue.unref(isVertical);
active.value = isActive;
if (_isCardType) {
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
translate.value = calcCardTranslate(index, activeIndex);
scale.value = vue.unref(active) ? 1 : cardScale;
} else {
translate.value = calcTranslate(index, activeIndex, _isVertical);
}
ready.value = true;
if (isActive && carouselItemRef.value) {
carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
}
};
function handleItemClick() {
if (carouselContext && vue.unref(isCardType)) {
const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
carouselContext.setActiveItem(index);
}
}
const carouselItemContext = {
props,
states: vue.reactive({
hover,
translate,
scale,
active,
ready,
inStage,
animating
}),
uid: instance.uid,
getVnode: () => instance.vnode,
translateItem
};
carouselContext.addItem(carouselItemContext);
vue.onBeforeUnmount(() => {
carouselContext.removeItem(carouselItemContext);
});
return {
carouselItemRef,
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
};
};
exports.useCarouselItem = useCarouselItem;
//# sourceMappingURL=use-carousel-item.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
import type { SetupContext } from 'vue';
import type { CarouselItemContext } from './constants';
import type { CarouselEmits, CarouselProps } from './carousel';
export declare const useCarousel: (props: CarouselProps, emit: SetupContext<CarouselEmits>["emit"], componentName: string) => {
root: import("vue").Ref<HTMLDivElement | undefined>;
activeIndex: import("vue").Ref<number>;
exposeActiveIndex: import("vue").WritableComputedRef<number>;
arrowDisplay: import("vue").ComputedRef<boolean>;
hasLabel: import("vue").ComputedRef<boolean>;
hover: import("vue").Ref<boolean>;
isCardType: import("vue").ComputedRef<boolean>;
items: import("vue").ShallowRef<CarouselItemContext[]>;
isVertical: import("vue").ComputedRef<boolean>;
containerStyle: import("vue").ComputedRef<{
height: string;
overflow?: undefined;
} | {
height: string;
overflow: string;
}>;
isItemsTwoLength: import("vue").Ref<boolean>;
handleButtonEnter: (arrow: "left" | "right") => void;
handleButtonLeave: () => void;
handleIndicatorClick: (index: number) => void;
handleMouseEnter: () => void;
handleMouseLeave: () => void;
setActiveItem: (index: number | string) => void;
prev: () => void;
next: () => void;
PlaceholderItem: () => (import("element-plus/es/utils").VNodeChildAtom | {
[name: string]: unknown;
$stable?: boolean;
})[] | null;
isTwoLengthShow: (index: number) => boolean;
ItemsSorter: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
throttledArrowClick: import("lodash").DebouncedFunc<(index: number) => void>;
throttledIndicatorHover: import("lodash").DebouncedFunc<(index: number) => void>;
};

View File

@@ -0,0 +1,275 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var core = require('@vueuse/core');
var constants = require('./constants.js');
var index = require('../../../hooks/use-ordered-children/index.js');
var shared = require('@vue/shared');
var vnode = require('../../../utils/vue/vnode.js');
var event = require('../../../constants/event.js');
const THROTTLE_TIME = 300;
const useCarousel = (props, emit, componentName) => {
const {
children: items,
addChild: addItem,
removeChild: removeItem,
ChildrenSorter: ItemsSorter
} = index.useOrderedChildren(vue.getCurrentInstance(), constants.CAROUSEL_ITEM_NAME);
const slots = vue.useSlots();
const activeIndex = vue.ref(-1);
const timer = vue.ref(null);
const hover = vue.ref(false);
const root = vue.ref();
const containerHeight = vue.ref(0);
const isItemsTwoLength = vue.ref(true);
const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
const hasLabel = vue.computed(() => {
return items.value.some((item) => item.props.label.toString().length > 0);
});
const isCardType = vue.computed(() => props.type === "card");
const isVertical = vue.computed(() => props.direction === "vertical");
const containerStyle = vue.computed(() => {
if (props.height !== "auto") {
return {
height: props.height
};
}
return {
height: `${containerHeight.value}px`,
overflow: "hidden"
};
});
const throttledArrowClick = lodashUnified.throttle((index) => {
setActiveItem(index);
}, THROTTLE_TIME, { trailing: true });
const throttledIndicatorHover = lodashUnified.throttle((index) => {
handleIndicatorHover(index);
}, THROTTLE_TIME);
const isTwoLengthShow = (index) => {
if (!isItemsTwoLength.value)
return true;
return activeIndex.value <= 1 ? index <= 1 : index > 1;
};
function pauseTimer() {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
}
function startTimer() {
if (props.interval <= 0 || !props.autoplay || timer.value)
return;
timer.value = setInterval(() => playSlides(), props.interval);
}
const playSlides = () => {
if (activeIndex.value < items.value.length - 1) {
activeIndex.value = activeIndex.value + 1;
} else if (props.loop) {
activeIndex.value = 0;
}
};
function setActiveItem(index) {
if (shared.isString(index)) {
const filteredItems = items.value.filter((item) => item.props.name === index);
if (filteredItems.length > 0) {
index = items.value.indexOf(filteredItems[0]);
}
}
index = Number(index);
if (Number.isNaN(index) || index !== Math.floor(index)) {
return;
}
const itemCount = items.value.length;
const oldIndex = activeIndex.value;
if (index < 0) {
activeIndex.value = props.loop ? itemCount - 1 : 0;
} else if (index >= itemCount) {
activeIndex.value = props.loop ? 0 : itemCount - 1;
} else {
activeIndex.value = index;
}
if (oldIndex === activeIndex.value) {
resetItemPosition(oldIndex);
}
resetTimer();
}
function resetItemPosition(oldIndex) {
items.value.forEach((item, index) => {
item.translateItem(index, activeIndex.value, oldIndex);
});
}
function itemInStage(item, index) {
var _a, _b, _c, _d;
const _items = vue.unref(items);
const itemCount = _items.length;
if (itemCount === 0 || !item.states.inStage)
return false;
const nextItemIndex = index + 1;
const prevItemIndex = index - 1;
const lastItemIndex = itemCount - 1;
const isLastItemActive = _items[lastItemIndex].states.active;
const isFirstItemActive = _items[0].states.active;
const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
return "left";
} else if (index === 0 && isLastItemActive || isPrevItemActive) {
return "right";
}
return false;
}
function handleMouseEnter() {
hover.value = true;
if (props.pauseOnHover) {
pauseTimer();
}
}
function handleMouseLeave() {
hover.value = false;
startTimer();
}
function handleButtonEnter(arrow) {
if (vue.unref(isVertical))
return;
items.value.forEach((item, index) => {
if (arrow === itemInStage(item, index)) {
item.states.hover = true;
}
});
}
function handleButtonLeave() {
if (vue.unref(isVertical))
return;
items.value.forEach((item) => {
item.states.hover = false;
});
}
function handleIndicatorClick(index) {
activeIndex.value = index;
}
function handleIndicatorHover(index) {
if (props.trigger === "hover" && index !== activeIndex.value) {
activeIndex.value = index;
}
}
function prev() {
setActiveItem(activeIndex.value - 1);
}
function next() {
setActiveItem(activeIndex.value + 1);
}
function resetTimer() {
pauseTimer();
if (!props.pauseOnHover)
startTimer();
}
function setContainerHeight(height) {
if (props.height !== "auto")
return;
containerHeight.value = height;
}
function PlaceholderItem() {
var _a;
const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
if (!defaultSlots)
return null;
const flatSlots = vnode.flattedChildren(defaultSlots);
const normalizeSlots = flatSlots.filter((slot) => {
return vue.isVNode(slot) && slot.type.name === constants.CAROUSEL_ITEM_NAME;
});
if ((normalizeSlots == null ? void 0 : normalizeSlots.length) === 2 && props.loop && !isCardType.value) {
isItemsTwoLength.value = true;
return normalizeSlots;
}
isItemsTwoLength.value = false;
return null;
}
vue.watch(() => activeIndex.value, (current, prev2) => {
resetItemPosition(prev2);
if (isItemsTwoLength.value) {
current = current % 2;
prev2 = prev2 % 2;
}
if (prev2 > -1) {
emit(event.CHANGE_EVENT, current, prev2);
}
});
const exposeActiveIndex = vue.computed({
get: () => {
return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
},
set: (value) => activeIndex.value = value
});
vue.watch(() => props.autoplay, (autoplay) => {
autoplay ? startTimer() : pauseTimer();
});
vue.watch(() => props.loop, () => {
setActiveItem(activeIndex.value);
});
vue.watch(() => props.interval, () => {
resetTimer();
});
const resizeObserver = vue.shallowRef();
vue.onMounted(() => {
vue.watch(() => items.value, () => {
if (items.value.length > 0)
setActiveItem(props.initialIndex);
}, {
immediate: true
});
resizeObserver.value = core.useResizeObserver(root.value, () => {
resetItemPosition();
});
startTimer();
});
vue.onBeforeUnmount(() => {
pauseTimer();
if (root.value && resizeObserver.value)
resizeObserver.value.stop();
});
vue.provide(constants.carouselContextKey, {
root,
isCardType,
isVertical,
items,
loop: props.loop,
cardScale: props.cardScale,
addItem,
removeItem,
setActiveItem,
setContainerHeight
});
return {
root,
activeIndex,
exposeActiveIndex,
arrowDisplay,
hasLabel,
hover,
isCardType,
items,
isVertical,
containerStyle,
isItemsTwoLength,
handleButtonEnter,
handleButtonLeave,
handleIndicatorClick,
handleMouseEnter,
handleMouseLeave,
setActiveItem,
prev,
next,
PlaceholderItem,
isTwoLengthShow,
ItemsSorter,
throttledArrowClick,
throttledIndicatorHover
};
};
exports.useCarousel = useCarousel;
//# sourceMappingURL=use-carousel.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-carousel.css';

View File

@@ -0,0 +1,6 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-carousel.css');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/carousel.scss';

View File

@@ -0,0 +1,6 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/carousel.scss');
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}