feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+16
View File
@@ -0,0 +1,16 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { CarouselEmits, CarouselProps, CarouselPropsPublic, carouselEmits, carouselProps } from "./src/carousel.js";
import { _default } from "./src/carousel.vue.js";
import { CarouselItemProps, CarouselItemPropsPublic, carouselItemProps } from "./src/carousel-item.js";
import { _default as _default$1 } from "./src/carousel-item.vue.js";
import { CAROUSEL_ITEM_NAME, CarouselContext, CarouselItemContext, CarouselItemStates, carouselContextKey } from "./src/constants.js";
import { CarouselInstance, CarouselItemInstance } from "./src/instance.js";
//#region ../../packages/components/carousel/index.d.ts
declare const ElCarousel: SFCWithInstall<typeof _default> & {
CarouselItem: typeof _default$1;
};
declare const ElCarouselItem: SFCWithInstall<typeof _default$1>;
//#endregion
export { CAROUSEL_ITEM_NAME, CarouselContext, CarouselEmits, type CarouselInstance, CarouselItemContext, type CarouselItemInstance, CarouselItemProps, CarouselItemPropsPublic, CarouselItemStates, CarouselProps, CarouselPropsPublic, ElCarousel, ElCarousel as default, ElCarouselItem, carouselContextKey, carouselEmits, carouselItemProps, carouselProps };
+14
View File
@@ -0,0 +1,14 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { carouselEmits, carouselProps } from "./src/carousel.mjs";
import { CAROUSEL_ITEM_NAME, carouselContextKey } from "./src/constants.mjs";
import carousel_default from "./src/carousel2.mjs";
import { carouselItemProps } from "./src/carousel-item.mjs";
import carousel_item_default from "./src/carousel-item2.mjs";
//#region ../../packages/components/carousel/index.ts
const ElCarousel = withInstall(carousel_default, { CarouselItem: carousel_item_default });
const ElCarouselItem = withNoopInstall(carousel_item_default);
//#endregion
export { CAROUSEL_ITEM_NAME, ElCarousel, ElCarousel as default, ElCarouselItem, carouselContextKey, carouselEmits, carouselItemProps, carouselProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Carousel","CarouselItem"],"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"],"mappings":";;;;;;;;AAMA,MAAa,aAET,YAAYA,kBAAU,EACxB,qCACD,CAAC;AAIF,MAAa,iBACX,gBAAgBC,sBAAa"}
@@ -0,0 +1,28 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/carousel/src/carousel-item.d.ts
interface CarouselItemProps {
/**
* @description name of the item, can be used in `setActiveItem`
*/
name?: string;
/**
* @description text content for the corresponding indicator
*/
label?: string | number;
}
/**
* @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.
*/
declare const carouselItemProps: {
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly label: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.
*/
type CarouselItemPropsPublic = ExtractPublicPropTypes<typeof carouselItemProps>;
//#endregion
export { CarouselItemProps, CarouselItemPropsPublic, carouselItemProps };
@@ -0,0 +1,20 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/carousel/src/carousel-item.ts
/**
* @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.
*/
const carouselItemProps = buildProps({
name: {
type: String,
default: ""
},
label: {
type: [String, Number],
default: ""
}
});
//#endregion
export { carouselItemProps };
//# sourceMappingURL=carousel-item.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item.mjs","names":[],"sources":["../../../../../../packages/components/carousel/src/carousel-item.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport interface CarouselItemProps {\n /**\n * @description name of the item, can be used in `setActiveItem`\n */\n name?: string\n /**\n * @description text content for the corresponding indicator\n */\n label?: string | number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.\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\n/**\n * @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.\n */\nexport type CarouselItemPropsPublic = ExtractPublicPropTypes<\n typeof carouselItemProps\n>\n"],"mappings":";;;;;;AAkBA,MAAa,oBAAoB,WAAW;CAI1C,MAAM;EAAE,MAAM;EAAQ,SAAS;EAAI;CAInC,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CACF,CAAU"}
@@ -0,0 +1,21 @@
import { CarouselItemProps } from "./carousel-item.js";
import * as vue from "vue";
//#region ../../packages/components/carousel/src/carousel-item.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<CarouselItemProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<CarouselItemProps> & Readonly<{}>, {
name: string;
label: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,47 @@
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { CAROUSEL_ITEM_NAME } from "./constants.mjs";
import { carouselItemProps } from "./carousel-item.mjs";
import { useCarouselItem } from "./use-carousel-item.mjs";
import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, vShow, withDirectives } from "vue";
//#region ../../packages/components/carousel/src/carousel-item.vue?vue&type=script&setup=true&lang.ts
var carousel_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: CAROUSEL_ITEM_NAME,
__name: "carousel-item",
props: carouselItemProps,
setup(__props) {
const props = __props;
const ns = useNamespace("carousel");
const { carouselItemRef, active, animating, hover, inStage, isVertical, translate, isCardType, scale, ready, handleItemClick } = useCarouselItem(props);
const itemKls = 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 = computed(() => {
return { transform: [`${`translate${unref(isVertical) ? "Y" : "X"}`}(${unref(translate)}px)`, `scale(${unref(scale)})`].join(" ") };
});
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", {
ref_key: "carouselItemRef",
ref: carouselItemRef,
class: normalizeClass(itemKls.value),
style: normalizeStyle(itemStyle.value),
onClick: _cache[0] || (_cache[0] = (...args) => unref(handleItemClick) && unref(handleItemClick)(...args))
}, [unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("mask"))
}, null, 2)), [[vShow, !unref(active)]]) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 6)), [[vShow, unref(ready)]]);
};
}
});
//#endregion
export { carousel_item_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=carousel-item.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item.vue_vue_type_script_setup_true_lang.mjs","names":[],"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 { useCarouselItem } from './use-carousel-item'\nimport { CAROUSEL_ITEM_NAME } from './constants'\n\nimport type { CSSProperties } from 'vue'\nimport type { CarouselItemProps } from './carousel-item'\n\ndefineOptions({\n name: CAROUSEL_ITEM_NAME,\n})\n\nconst props = withDefaults(defineProps<CarouselItemProps>(), {\n name: '',\n label: '',\n})\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"],"mappings":";;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAId,MAAM,KAAK,aAAa,WAAU;EAGlC,MAAM,EACJ,iBACA,QACA,WACA,OACA,SACA,YACA,WACA,YACA,OACA,OACA,oBACE,gBAAgB,MAAK;EAEzB,MAAM,UAAU,eAAe;GAC7B,GAAG,EAAE,OAAO;GACZ,GAAG,GAAG,UAAU,OAAO,MAAM;GAC7B,GAAG,GAAG,YAAY,QAAQ,MAAM;GAChC,GAAG,GAAG,SAAS,MAAM,MAAM;GAC3B,GAAG,GAAG,aAAa,UAAU,MAAM;GACnC;KACG,GAAG,GAAG,QAAQ,OAAO,GAAG,WAAW;KACnC,GAAG,GAAG,QAAQ,gBAAgB,GAAG,WAAW,SAAS,WAAW;IAClE;GACF,CAAA;EAED,MAAM,YAAY,eAA8B;AAM9C,UAAO,EACL,WAHgB,CAFC,GADG,YAAY,MAAM,WAAW,GAAG,MAAM,MACxB,GAAG,MAAM,UAAU,CAAC,MACzC,SAAS,MAAM,MAAM,CAAC,GACC,CAAC,KAAK,IAAG,EAI/C;IACD;;uCAnEC,mBASM,OAAA;aAPA;IAAJ,KAAI;IACH,OAAK,eAAE,QAAA,MAAO;IACd,OAAK,eAAE,UAAA,MAAS;IAChB,SAAK,OAAA,OAAA,OAAA,kBAAE,MAAA,gBAAA,IAAA,MAAA,gBAAA,CAAA,GAAA,KAAe;OAEZ,MAAA,WAAU,gCAArB,mBAAgE,OAAA;;IAAvB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,OAAA,CAAA;2BAApB,MAAA,OAAM,CAAA,uCACtC,WAAQ,KAAA,QAAA,UAAA,iBAPA,MAAA,MAAK,CAAA"}
@@ -0,0 +1,8 @@
import carousel_item_vue_vue_type_script_setup_true_lang_default from "./carousel-item.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/carousel/src/carousel-item.vue
var carousel_item_default = carousel_item_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { carousel_item_default as default };
//# sourceMappingURL=carousel-item2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item2.mjs","names":[],"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 { useCarouselItem } from './use-carousel-item'\nimport { CAROUSEL_ITEM_NAME } from './constants'\n\nimport type { CSSProperties } from 'vue'\nimport type { CarouselItemProps } from './carousel-item'\n\ndefineOptions({\n name: CAROUSEL_ITEM_NAME,\n})\n\nconst props = withDefaults(defineProps<CarouselItemProps>(), {\n name: '',\n label: '',\n})\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"],"mappings":""}
@@ -0,0 +1,92 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/carousel/src/carousel.d.ts
interface CarouselProps {
/**
* @description index of the initially active slide (starting from 0)
*/
initialIndex?: number;
/**
* @description height of the carousel
*/
height?: string;
/**
* @description how indicators are triggered
*/
trigger?: 'hover' | 'click';
/**
* @description whether automatically loop the slides
*/
autoplay?: boolean;
/**
* @description interval of the auto loop, in milliseconds
*/
interval?: number;
/**
* @description position of the indicators
*/
indicatorPosition?: '' | 'none' | 'outside';
/**
* @description when arrows are shown
*/
arrow?: 'always' | 'hover' | 'never';
/**
* @description type of the Carousel
*/
type?: '' | 'card';
/**
* @description when type is card, scaled size of secondary cards
*/
cardScale?: number;
/**
* @description display the items in loop
*/
loop?: boolean;
/**
* @description display direction
*/
direction?: 'horizontal' | 'vertical';
/**
* @description pause autoplay when hover
*/
pauseOnHover?: boolean;
/**
* @description infuse dynamism and smoothness into the carousel
*/
motionBlur?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `CarouselProps` instead.
*/
declare const carouselProps: {
readonly initialIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly trigger: EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly autoplay: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly interval: EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
readonly indicatorPosition: EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
readonly arrow: EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
readonly type: EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
readonly cardScale: EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly direction: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly pauseOnHover: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly motionBlur: BooleanConstructor;
};
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;
};
/**
* @deprecated Removed after 3.0.0, Use `CarouselProps` instead.
*/
type CarouselPropsPublic = ExtractPublicPropTypes<typeof carouselProps>;
type CarouselEmits = typeof carouselEmits;
//#endregion
export { CarouselEmits, CarouselProps, CarouselPropsPublic, carouselEmits, carouselProps };
@@ -0,0 +1,76 @@
import { isNumber } from "../../../utils/types.mjs";
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/carousel/src/carousel.ts
/**
* @deprecated Removed after 3.0.0, Use `CarouselProps` instead.
*/
const carouselProps = 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: .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(isNumber) };
//#endregion
export { carouselEmits, carouselProps };
//# sourceMappingURL=carousel.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../../../packages/components/carousel/src/carousel.ts"],"sourcesContent":["import { buildProps, isNumber } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport interface CarouselProps {\n /**\n * @description index of the initially active slide (starting from 0)\n */\n initialIndex?: number\n /**\n * @description height of the carousel\n */\n height?: string\n /**\n * @description how indicators are triggered\n */\n trigger?: 'hover' | 'click'\n /**\n * @description whether automatically loop the slides\n */\n autoplay?: boolean\n /**\n * @description interval of the auto loop, in milliseconds\n */\n interval?: number\n /**\n * @description position of the indicators\n */\n indicatorPosition?: '' | 'none' | 'outside'\n /**\n * @description when arrows are shown\n */\n arrow?: 'always' | 'hover' | 'never'\n /**\n * @description type of the Carousel\n */\n type?: '' | 'card'\n /**\n * @description when type is card, scaled size of secondary cards\n */\n cardScale?: number\n /**\n * @description display the items in loop\n */\n loop?: boolean\n /**\n * @description display direction\n */\n direction?: 'horizontal' | 'vertical'\n /**\n * @description pause autoplay when hover\n */\n pauseOnHover?: boolean\n /**\n * @description infuse dynamism and smoothness into the carousel\n */\n motionBlur?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CarouselProps` instead.\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\n/**\n * @deprecated Removed after 3.0.0, Use `CarouselProps` instead.\n */\nexport type CarouselPropsPublic = ExtractPublicPropTypes<typeof carouselProps>\nexport type CarouselEmits = typeof carouselEmits\n"],"mappings":";;;;;;;AA8DA,MAAa,gBAAgB,WAAW;CAItC,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,SAAS;EACP,MAAM;EACN,QAAQ,CAAC,SAAS,QAAQ;EAC1B,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,mBAAmB;EACjB,MAAM;EACN,QAAQ;GAAC;GAAI;GAAQ;GAAU;EAC/B,SAAS;EACV;CAID,OAAO;EACL,MAAM;EACN,QAAQ;GAAC;GAAU;GAAS;GAAQ;EACpC,SAAS;EACV;CAID,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,IAAI,OAAO;EACpB,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,QAAQ,CAAC,cAAc,WAAW;EAClC,SAAS;EACV;CAID,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CAID,YAAY;CACb,CAAU;AAEX,MAAa,gBAAgB,EAM3B,SAAS,SAAiB,SAAiB,CAAC,SAAS,KAAK,CAAC,MAAM,SAAS,EAC3E"}
@@ -0,0 +1,40 @@
import { CarouselProps } from "./carousel.js";
import * as vue from "vue";
//#region ../../packages/components/carousel/src/carousel.vue.d.ts
declare var __VLS_40: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_40) => any;
};
declare const __VLS_base: vue.DefineComponent<CarouselProps, {
/** @description active slide index */activeIndex: vue.WritableComputedRef<number, 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;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (current: number, prev: number) => void;
}, string, vue.PublicProps, Readonly<CarouselProps> & Readonly<{
onChange?: ((current: number, prev: number) => any) | undefined;
}>, {
type: "" | "card";
loop: boolean;
trigger: "hover" | "click";
direction: "horizontal" | "vertical";
height: string;
arrow: "always" | "hover" | "never";
initialIndex: number;
autoplay: boolean;
interval: number;
indicatorPosition: "" | "none" | "outside";
cardScale: number;
pauseOnHover: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,146 @@
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { carouselEmits, carouselProps } from "./carousel.mjs";
import { useCarousel } from "./use-carousel.mjs";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
//#region ../../packages/components/carousel/src/carousel.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = ["aria-label"];
const _hoisted_3 = ["onMouseenter", "onClick"];
const _hoisted_4 = ["aria-label"];
const _hoisted_5 = { key: 0 };
const _hoisted_6 = {
key: 2,
xmlns: "http://www.w3.org/2000/svg",
version: "1.1",
style: { "display": "none" }
};
const COMPONENT_NAME = "ElCarousel";
var carousel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: COMPONENT_NAME,
__name: "carousel",
props: carouselProps,
emits: carouselEmits,
setup(__props, { expose: __expose, emit: __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(props, __emit, COMPONENT_NAME);
const ns = useNamespace("carousel");
const { t } = useLocale();
const carouselClasses = computed(() => {
const classes = [ns.b(), ns.m(props.direction)];
if (unref(isCardType)) classes.push(ns.m("card"));
classes.push(ns.is("vertical-outside", unref(isVertical) && props.indicatorPosition === "outside"));
return classes;
});
const indicatorsClasses = computed(() => {
const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
if (unref(hasLabel)) classes.push(ns.em("indicators", "labels"));
if (props.indicatorPosition === "outside") classes.push(ns.em("indicators", "outside"));
if (unref(isVertical)) classes.push(ns.em("indicators", "right"));
return classes;
});
function handleTransitionStart(e) {
if (!props.motionBlur) return;
const kls = 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 = 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 openBlock(), createElementBlock("div", {
ref_key: "root",
ref: root,
class: normalizeClass(carouselClasses.value),
onMouseenter: _cache[6] || (_cache[6] = withModifiers((...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args), ["stop"])),
onMouseleave: _cache[7] || (_cache[7] = withModifiers((...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args), ["stop"]))
}, [
unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
key: 0,
name: "carousel-arrow-left",
persisted: ""
}, {
default: withCtx(() => [withDirectives(createElementVNode("button", {
type: "button",
class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "left")]),
"aria-label": unref(t)("el.carousel.leftArrow"),
onMouseenter: _cache[0] || (_cache[0] = ($event) => unref(handleButtonEnter)("left")),
onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) - 1), ["stop"]))
}, [createVNode(unref(ElIcon), null, {
default: withCtx(() => [createVNode(unref(ArrowLeft))]),
_: 1
})], 42, _hoisted_1), [[vShow, (__props.arrow === "always" || unref(hover)) && (__props.loop || unref(activeIndex) > 0)]])]),
_: 1
})) : createCommentVNode("v-if", true),
unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
key: 1,
name: "carousel-arrow-right",
persisted: ""
}, {
default: withCtx(() => [withDirectives(createElementVNode("button", {
type: "button",
class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "right")]),
"aria-label": unref(t)("el.carousel.rightArrow"),
onMouseenter: _cache[3] || (_cache[3] = ($event) => unref(handleButtonEnter)("right")),
onMouseleave: _cache[4] || (_cache[4] = (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
onClick: _cache[5] || (_cache[5] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) + 1), ["stop"]))
}, [createVNode(unref(ElIcon), null, {
default: withCtx(() => [createVNode(unref(ArrowRight))]),
_: 1
})], 42, _hoisted_2), [[vShow, (__props.arrow === "always" || unref(hover)) && (__props.loop || unref(activeIndex) < unref(items).length - 1)]])]),
_: 1
})) : createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("container")),
style: normalizeStyle(unref(containerStyle)),
onTransitionstart: handleTransitionStart,
onTransitionend: handleTransitionEnd
}, [createVNode(unref(PlaceholderItem)), renderSlot(_ctx.$slots, "default")], 38),
createVNode(unref(ItemsSorter), null, {
default: withCtx(() => [__props.indicatorPosition !== "none" ? (openBlock(), createElementBlock("ul", {
key: 0,
class: normalizeClass(indicatorsClasses.value)
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item, index) => {
return withDirectives((openBlock(), createElementBlock("li", {
key: index,
class: normalizeClass([
unref(ns).e("indicator"),
unref(ns).em("indicator", __props.direction),
unref(ns).is("active", index === unref(activeIndex))
]),
onMouseenter: ($event) => unref(throttledIndicatorHover)(index),
onClick: withModifiers(($event) => unref(handleIndicatorClick)(index), ["stop"])
}, [createElementVNode("button", {
class: normalizeClass(unref(ns).e("button")),
"aria-label": unref(t)("el.carousel.indicator", { index: index + 1 })
}, [unref(hasLabel) ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.props.label), 1)) : createCommentVNode("v-if", true)], 10, _hoisted_4)], 42, _hoisted_3)), [[vShow, unref(isTwoLengthShow)(index)]]);
}), 128))], 2)) : createCommentVNode("v-if", true)]),
_: 1
}),
__props.motionBlur ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[8] || (_cache[8] = [createElementVNode("defs", null, [createElementVNode("filter", { id: "elCarouselHorizontal" }, [createElementVNode("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "12,0"
})]), createElementVNode("filter", { id: "elCarouselVertical" }, [createElementVNode("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "0,10"
})])], -1)])])) : createCommentVNode("v-if", true)
], 34);
};
}
});
//#endregion
export { carousel_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=carousel.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import carousel_vue_vue_type_script_setup_true_lang_default from "./carousel.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/carousel/src/carousel.vue
var carousel_default = carousel_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { carousel_default as default };
//# sourceMappingURL=carousel2.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
import { CarouselItemProps } from "./carousel-item.js";
import { InjectionKey, Ref, VNode } from "vue";
//#region ../../packages/components/carousel/src/constants.d.ts
type CarouselItemStates = {
hover: boolean;
translate: number;
scale: number;
active: boolean;
ready: boolean;
inStage: boolean;
animating: boolean;
};
type CarouselItemContext = {
props: Required<CarouselItemProps>;
states: CarouselItemStates;
uid: number;
getVnode: () => VNode;
translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
};
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;
};
declare const carouselContextKey: InjectionKey<CarouselContext>;
declare const CAROUSEL_ITEM_NAME = "ElCarouselItem";
//#endregion
export { CAROUSEL_ITEM_NAME, CarouselContext, CarouselItemContext, CarouselItemStates, carouselContextKey };
@@ -0,0 +1,7 @@
//#region ../../packages/components/carousel/src/constants.ts
const carouselContextKey = Symbol("carouselContextKey");
const CAROUSEL_ITEM_NAME = "ElCarouselItem";
//#endregion
export { CAROUSEL_ITEM_NAME, carouselContextKey };
//# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","names":[],"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: Required<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"],"mappings":";AAkCA,MAAa,qBACX,OAAO,qBAAqB;AAE9B,MAAa,qBAAqB"}
@@ -0,0 +1,8 @@
import { _default } from "./carousel.vue.js";
import { _default as _default$1 } from "./carousel-item.vue.js";
//#region ../../packages/components/carousel/src/instance.d.ts
type CarouselInstance = InstanceType<typeof _default> & unknown;
type CarouselItemInstance = InstanceType<typeof _default$1> & unknown;
//#endregion
export { CarouselInstance, CarouselItemInstance };
@@ -0,0 +1,101 @@
import { isUndefined } from "../../../utils/types.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { CAROUSEL_ITEM_NAME, carouselContextKey } from "./constants.mjs";
import { getCurrentInstance, inject, onBeforeUnmount, reactive, ref, unref } from "vue";
//#region ../../packages/components/carousel/src/use-carousel-item.ts
const useCarouselItem = (props) => {
const carouselContext = inject(carouselContextKey);
const instance = getCurrentInstance();
if (!carouselContext) debugWarn(CAROUSEL_ITEM_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
if (!instance) debugWarn(CAROUSEL_ITEM_NAME, "compositional hook can only be invoked inside setups");
const carouselItemRef = ref();
const hover = ref(false);
const translate = ref(0);
const scale = ref(1);
const active = ref(false);
const ready = ref(false);
const inStage = ref(false);
const animating = 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) {
const parentWidth = unref(isVertical) ? carouselContext.root.value?.offsetHeight || 0 : carouselContext.root.value?.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, isVertical) {
const rootEl = carouselContext.root.value;
if (!rootEl) return 0;
return ((isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0) * (index - activeIndex);
}
const translateItem = (index, activeIndex, oldIndex) => {
const _isCardType = unref(isCardType);
const carouselItemLength = carouselContext.items.value.length ?? NaN;
const isActive = index === activeIndex;
if (!_isCardType && !isUndefined(oldIndex)) animating.value = isActive || index === oldIndex;
if (!isActive && carouselItemLength > 2 && carouselContext.loop) index = processIndex(index, activeIndex, carouselItemLength);
const _isVertical = unref(isVertical);
active.value = isActive;
if (_isCardType) {
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
translate.value = calcCardTranslate(index, activeIndex);
scale.value = 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 && unref(isCardType)) {
const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
carouselContext.setActiveItem(index);
}
}
const carouselItemContext = {
props,
states: reactive({
hover,
translate,
scale,
active,
ready,
inStage,
animating
}),
uid: instance.uid,
getVnode: () => instance.vnode,
translateItem
};
carouselContext.addItem(carouselItemContext);
onBeforeUnmount(() => {
carouselContext.removeItem(carouselItemContext);
});
return {
carouselItemRef,
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
};
};
//#endregion
export { useCarouselItem };
//# sourceMappingURL=use-carousel-item.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,229 @@
import { CHANGE_EVENT } from "../../../constants/event.mjs";
import { isString } from "../../../utils/types.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { flattedChildren } from "../../../utils/vue/vnode.mjs";
import { useOrderedChildren } from "../../../hooks/use-ordered-children/index.mjs";
import { CAROUSEL_ITEM_NAME, carouselContextKey } from "./constants.mjs";
import { useResizeObserver } from "@vueuse/core";
import { throttle } from "lodash-unified";
import { computed, getCurrentInstance, isVNode, onBeforeUnmount, onMounted, provide, ref, shallowRef, unref, useSlots, watch } from "vue";
//#region ../../packages/components/carousel/src/use-carousel.ts
const THROTTLE_TIME = 300;
const useCarousel = (props, emit, componentName) => {
const { children: items, addChild: addItem, removeChild: removeItem, ChildrenSorter: ItemsSorter } = useOrderedChildren(getCurrentInstance(), CAROUSEL_ITEM_NAME);
const slots = useSlots();
const activeIndex = ref(-1);
const timer = ref(null);
const hover = ref(false);
const root = ref();
const containerHeight = ref(0);
const isItemsTwoLength = ref(true);
const arrowDisplay = computed(() => props.arrow !== "never" && !unref(isVertical));
const hasLabel = computed(() => {
return items.value.some((item) => item.props.label.toString().length > 0);
});
const isCardType = computed(() => props.type === "card");
const isVertical = computed(() => props.direction === "vertical");
const containerStyle = computed(() => {
if (props.height !== "auto") return { height: props.height };
return {
height: `${containerHeight.value}px`,
overflow: "hidden"
};
});
const throttledArrowClick = throttle((index) => {
setActiveItem(index);
}, THROTTLE_TIME, { trailing: true });
const throttledIndicatorHover = 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 (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)) {
debugWarn(componentName, "index must be integer.");
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) {
const _items = 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 = _items[nextItemIndex]?.states?.active;
const isPrevItemActive = _items[prevItemIndex]?.states?.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 (unref(isVertical)) return;
items.value.forEach((item, index) => {
if (arrow === itemInStage(item, index)) item.states.hover = true;
});
}
function handleButtonLeave() {
if (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 || !hover.value) startTimer();
}
function setContainerHeight(height) {
if (props.height !== "auto") return;
containerHeight.value = height;
}
function PlaceholderItem() {
const defaultSlots = slots.default?.();
if (!defaultSlots) return null;
const normalizeSlots = flattedChildren(defaultSlots).filter((slot) => {
return isVNode(slot) && slot.type.name === CAROUSEL_ITEM_NAME;
});
if (normalizeSlots?.length === 2 && props.loop && !isCardType.value) {
isItemsTwoLength.value = true;
return normalizeSlots;
}
isItemsTwoLength.value = false;
return null;
}
watch(() => activeIndex.value, (current, prev) => {
resetItemPosition(prev);
if (isItemsTwoLength.value) {
current = current % 2;
prev = prev % 2;
}
if (prev > -1) emit(CHANGE_EVENT, current, prev);
});
const exposeActiveIndex = computed({
get: () => {
return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
},
set: (value) => activeIndex.value = value
});
watch(() => props.autoplay, (autoplay) => {
autoplay ? startTimer() : pauseTimer();
});
watch(() => props.loop, () => {
setActiveItem(activeIndex.value);
});
watch(() => props.interval, () => {
resetTimer();
});
const resizeObserver = shallowRef();
onMounted(() => {
watch(() => items.value, () => {
if (items.value.length > 0) setActiveItem(props.initialIndex);
}, { immediate: true });
resizeObserver.value = useResizeObserver(root.value, () => {
resetItemPosition();
});
startTimer();
});
onBeforeUnmount(() => {
pauseTimer();
if (root.value && resizeObserver.value) resizeObserver.value.stop();
});
provide(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
};
};
//#endregion
export { useCarousel };
//# sourceMappingURL=use-carousel.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
import "../../base/style/css.mjs";
import "element-plus/theme-chalk/el-carousel.css";
@@ -0,0 +1,2 @@
import "../../base/style/index.mjs";
import "element-plus/theme-chalk/src/carousel.scss";