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 };
+22
View File
@@ -0,0 +1,22 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_carousel = require('./src/carousel.js');
const require_constants = require('./src/constants.js');
const require_carousel$1 = require('./src/carousel2.js');
const require_carousel_item = require('./src/carousel-item.js');
const require_carousel_item$1 = require('./src/carousel-item2.js');
//#region ../../packages/components/carousel/index.ts
const ElCarousel = require_install.withInstall(require_carousel$1.default, { CarouselItem: require_carousel_item$1.default });
const ElCarouselItem = require_install.withNoopInstall(require_carousel_item$1.default);
//#endregion
exports.CAROUSEL_ITEM_NAME = require_constants.CAROUSEL_ITEM_NAME;
exports.ElCarousel = ElCarousel;
exports.default = ElCarousel;
exports.ElCarouselItem = ElCarouselItem;
exports.carouselContextKey = require_constants.carouselContextKey;
exports.carouselEmits = require_carousel.carouselEmits;
exports.carouselItemProps = require_carousel_item.carouselItemProps;
exports.carouselProps = require_carousel.carouselProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Carousel","withNoopInstall","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,aAETA,4BAAYC,4BAAU,EACxB,+CACD,CAAC;AAIF,MAAa,iBACXC,gCAAgBC,gCAAa"}
@@ -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,21 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/carousel/src/carousel-item.ts
/**
* @deprecated Removed after 3.0.0, Use `CarouselItemProps` instead.
*/
const carouselItemProps = require_runtime.buildProps({
name: {
type: String,
default: ""
},
label: {
type: [String, Number],
default: ""
}
});
//#endregion
exports.carouselItemProps = carouselItemProps;
//# sourceMappingURL=carousel-item.js.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item.js","names":["buildProps"],"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,oBAAoBA,2BAAW;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,48 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_constants = require('./constants.js');
const require_carousel_item = require('./carousel-item.js');
const require_use_carousel_item = require('./use-carousel-item.js');
let vue = require("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__ */ (0, vue.defineComponent)({
name: require_constants.CAROUSEL_ITEM_NAME,
__name: "carousel-item",
props: require_carousel_item.carouselItemProps,
setup(__props) {
const props = __props;
const ns = require_index.useNamespace("carousel");
const { carouselItemRef, active, animating, hover, inStage, isVertical, translate, isCardType, scale, ready, handleItemClick } = require_use_carousel_item.useCarouselItem(props);
const itemKls = (0, 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 = (0, vue.computed)(() => {
return { transform: [`${`translate${(0, vue.unref)(isVertical) ? "Y" : "X"}`}(${(0, vue.unref)(translate)}px)`, `scale(${(0, vue.unref)(scale)})`].join(" ") };
});
return (_ctx, _cache) => {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "carouselItemRef",
ref: carouselItemRef,
class: (0, vue.normalizeClass)(itemKls.value),
style: (0, vue.normalizeStyle)(itemStyle.value),
onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(handleItemClick) && (0, vue.unref)(handleItemClick)(...args))
}, [(0, vue.unref)(isCardType) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("mask"))
}, null, 2)), [[vue.vShow, !(0, vue.unref)(active)]]) : (0, vue.createCommentVNode)("v-if", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 6)), [[vue.vShow, (0, vue.unref)(ready)]]);
};
}
});
//#endregion
exports.default = carousel_item_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=carousel-item.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item.vue_vue_type_script_setup_true_lang.js","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,2BAAa,WAAU;EAGlC,MAAM,EACJ,iBACA,QACA,WACA,OACA,SACA,YACA,WACA,YACA,OACA,OACA,oBACE,0CAAgB,MAAK;EAEzB,MAAM,kCAAyB;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,oCAA0C;AAM9C,UAAO,EACL,WAHgB,CAFC,GADG,2BAAkB,WAAW,GAAG,MAAM,MACxB,kBAAS,UAAU,CAAC,MACzC,wBAAe,MAAM,CAAC,GACC,CAAC,KAAK,IAAG,EAI/C;IACD;;qFA1DO,OAAA;aAPA;IAAJ,KAAI;IACH,+BAAO,QAAA,MAAO;IACd,+BAAO,UAAA,MAAS;IAChB,SAAK,OAAA,OAAA,OAAA,iCAAE,gBAAA,mBAAA,gBAAA,CAAA,GAAA,KAAe;sBAEZ,WAAU,8EAA2C,OAAA;;IAAvB,8CAAO,GAAE,CAAC,EAAC,OAAA,CAAA;8CAApB,OAAM,CAAA,oEAC9B,KAAA,QAAA,UAAA,oCAPA,MAAK,CAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_carousel_item_vue_vue_type_script_setup_true_lang = require('./carousel-item.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/carousel/src/carousel-item.vue
var carousel_item_default = require_carousel_item_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = carousel_item_default;
//# sourceMappingURL=carousel-item2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel-item2.js","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,78 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_types = require('../../../utils/types.js');
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/carousel/src/carousel.ts
/**
* @deprecated Removed after 3.0.0, Use `CarouselProps` instead.
*/
const carouselProps = require_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: .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(require_types.isNumber) };
//#endregion
exports.carouselEmits = carouselEmits;
exports.carouselProps = carouselProps;
//# sourceMappingURL=carousel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"carousel.js","names":["buildProps","isNumber"],"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,gBAAgBA,2BAAW;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,MAAMC,uBAAS,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,147 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../icon/index.js');
const require_carousel = require('./carousel.js');
const require_use_carousel = require('./use-carousel.js');
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("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__ */ (0, vue.defineComponent)({
name: COMPONENT_NAME,
__name: "carousel",
props: require_carousel.carouselProps,
emits: require_carousel.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 } = require_use_carousel.useCarousel(props, __emit, COMPONENT_NAME);
const ns = require_index$1.useNamespace("carousel");
const { t } = require_index.useLocale();
const carouselClasses = (0, vue.computed)(() => {
const classes = [ns.b(), ns.m(props.direction)];
if ((0, vue.unref)(isCardType)) classes.push(ns.m("card"));
classes.push(ns.is("vertical-outside", (0, vue.unref)(isVertical) && props.indicatorPosition === "outside"));
return classes;
});
const indicatorsClasses = (0, vue.computed)(() => {
const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
if ((0, vue.unref)(hasLabel)) classes.push(ns.em("indicators", "labels"));
if (props.indicatorPosition === "outside") classes.push(ns.em("indicators", "outside"));
if ((0, vue.unref)(isVertical)) classes.push(ns.em("indicators", "right"));
return classes;
});
function handleTransitionStart(e) {
if (!props.motionBlur) return;
const kls = (0, 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 = (0, 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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "root",
ref: root,
class: (0, vue.normalizeClass)(carouselClasses.value),
onMouseenter: _cache[6] || (_cache[6] = (0, vue.withModifiers)((...args) => (0, vue.unref)(handleMouseEnter) && (0, vue.unref)(handleMouseEnter)(...args), ["stop"])),
onMouseleave: _cache[7] || (_cache[7] = (0, vue.withModifiers)((...args) => (0, vue.unref)(handleMouseLeave) && (0, vue.unref)(handleMouseLeave)(...args), ["stop"]))
}, [
(0, vue.unref)(arrowDisplay) ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
key: 0,
name: "carousel-arrow-left",
persisted: ""
}, {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("button", {
type: "button",
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("arrow"), (0, vue.unref)(ns).em("arrow", "left")]),
"aria-label": (0, vue.unref)(t)("el.carousel.leftArrow"),
onMouseenter: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(handleButtonEnter)("left")),
onMouseleave: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handleButtonLeave) && (0, vue.unref)(handleButtonLeave)(...args)),
onClick: _cache[2] || (_cache[2] = (0, vue.withModifiers)(($event) => (0, vue.unref)(throttledArrowClick)((0, vue.unref)(activeIndex) - 1), ["stop"]))
}, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
_: 1
})], 42, _hoisted_1), [[vue.vShow, (__props.arrow === "always" || (0, vue.unref)(hover)) && (__props.loop || (0, vue.unref)(activeIndex) > 0)]])]),
_: 1
})) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.unref)(arrowDisplay) ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
key: 1,
name: "carousel-arrow-right",
persisted: ""
}, {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("button", {
type: "button",
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("arrow"), (0, vue.unref)(ns).em("arrow", "right")]),
"aria-label": (0, vue.unref)(t)("el.carousel.rightArrow"),
onMouseenter: _cache[3] || (_cache[3] = ($event) => (0, vue.unref)(handleButtonEnter)("right")),
onMouseleave: _cache[4] || (_cache[4] = (...args) => (0, vue.unref)(handleButtonLeave) && (0, vue.unref)(handleButtonLeave)(...args)),
onClick: _cache[5] || (_cache[5] = (0, vue.withModifiers)(($event) => (0, vue.unref)(throttledArrowClick)((0, vue.unref)(activeIndex) + 1), ["stop"]))
}, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
_: 1
})], 42, _hoisted_2), [[vue.vShow, (__props.arrow === "always" || (0, vue.unref)(hover)) && (__props.loop || (0, vue.unref)(activeIndex) < (0, vue.unref)(items).length - 1)]])]),
_: 1
})) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("container")),
style: (0, vue.normalizeStyle)((0, vue.unref)(containerStyle)),
onTransitionstart: handleTransitionStart,
onTransitionend: handleTransitionEnd
}, [(0, vue.createVNode)((0, vue.unref)(PlaceholderItem)), (0, vue.renderSlot)(_ctx.$slots, "default")], 38),
(0, vue.createVNode)((0, vue.unref)(ItemsSorter), null, {
default: (0, vue.withCtx)(() => [__props.indicatorPosition !== "none" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", {
key: 0,
class: (0, vue.normalizeClass)(indicatorsClasses.value)
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(items), (item, index) => {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
key: index,
class: (0, vue.normalizeClass)([
(0, vue.unref)(ns).e("indicator"),
(0, vue.unref)(ns).em("indicator", __props.direction),
(0, vue.unref)(ns).is("active", index === (0, vue.unref)(activeIndex))
]),
onMouseenter: ($event) => (0, vue.unref)(throttledIndicatorHover)(index),
onClick: (0, vue.withModifiers)(($event) => (0, vue.unref)(handleIndicatorClick)(index), ["stop"])
}, [(0, vue.createElementVNode)("button", {
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("button")),
"aria-label": (0, vue.unref)(t)("el.carousel.indicator", { index: index + 1 })
}, [(0, vue.unref)(hasLabel) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, (0, vue.toDisplayString)(item.props.label), 1)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_4)], 42, _hoisted_3)), [[vue.vShow, (0, vue.unref)(isTwoLengthShow)(index)]]);
}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true)]),
_: 1
}),
__props.motionBlur ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_6, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("filter", { id: "elCarouselHorizontal" }, [(0, vue.createElementVNode)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "12,0"
})]), (0, vue.createElementVNode)("filter", { id: "elCarouselVertical" }, [(0, vue.createElementVNode)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "0,10"
})])], -1)])])) : (0, vue.createCommentVNode)("v-if", true)
], 34);
};
}
});
//#endregion
exports.default = carousel_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=carousel.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_carousel_vue_vue_type_script_setup_true_lang = require('./carousel.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/carousel/src/carousel.vue
var carousel_default = require_carousel_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = carousel_default;
//# sourceMappingURL=carousel2.js.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,10 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/carousel/src/constants.ts
const carouselContextKey = Symbol("carouselContextKey");
const CAROUSEL_ITEM_NAME = "ElCarouselItem";
//#endregion
exports.CAROUSEL_ITEM_NAME = CAROUSEL_ITEM_NAME;
exports.carouselContextKey = carouselContextKey;
//# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.js","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 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,103 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_error = require('../../../utils/error.js');
const require_constants = require('./constants.js');
let vue = require("vue");
//#region ../../packages/components/carousel/src/use-carousel-item.ts
const useCarouselItem = (props) => {
const carouselContext = (0, vue.inject)(require_constants.carouselContextKey);
const instance = (0, vue.getCurrentInstance)();
if (!carouselContext) require_error.debugWarn(require_constants.CAROUSEL_ITEM_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
if (!instance) require_error.debugWarn(require_constants.CAROUSEL_ITEM_NAME, "compositional hook can only be invoked inside setups");
const carouselItemRef = (0, vue.ref)();
const hover = (0, vue.ref)(false);
const translate = (0, vue.ref)(0);
const scale = (0, vue.ref)(1);
const active = (0, vue.ref)(false);
const ready = (0, vue.ref)(false);
const inStage = (0, vue.ref)(false);
const animating = (0, 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) {
const parentWidth = (0, vue.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 = (0, vue.unref)(isCardType);
const carouselItemLength = carouselContext.items.value.length ?? NaN;
const isActive = index === activeIndex;
if (!_isCardType && !require_types.isUndefined(oldIndex)) animating.value = isActive || index === oldIndex;
if (!isActive && carouselItemLength > 2 && carouselContext.loop) index = processIndex(index, activeIndex, carouselItemLength);
const _isVertical = (0, vue.unref)(isVertical);
active.value = isActive;
if (_isCardType) {
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
translate.value = calcCardTranslate(index, activeIndex);
scale.value = (0, 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 && (0, vue.unref)(isCardType)) {
const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
carouselContext.setActiveItem(index);
}
}
const carouselItemContext = {
props,
states: (0, vue.reactive)({
hover,
translate,
scale,
active,
ready,
inStage,
animating
}),
uid: instance.uid,
getVnode: () => instance.vnode,
translateItem
};
carouselContext.addItem(carouselItemContext);
(0, vue.onBeforeUnmount)(() => {
carouselContext.removeItem(carouselItemContext);
});
return {
carouselItemRef,
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
};
};
//#endregion
exports.useCarouselItem = useCarouselItem;
//# sourceMappingURL=use-carousel-item.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,231 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_error = require('../../../utils/error.js');
const require_vnode = require('../../../utils/vue/vnode.js');
const require_index = require('../../../hooks/use-ordered-children/index.js');
const require_constants = require('./constants.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#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 } = require_index.useOrderedChildren((0, vue.getCurrentInstance)(), require_constants.CAROUSEL_ITEM_NAME);
const slots = (0, vue.useSlots)();
const activeIndex = (0, vue.ref)(-1);
const timer = (0, vue.ref)(null);
const hover = (0, vue.ref)(false);
const root = (0, vue.ref)();
const containerHeight = (0, vue.ref)(0);
const isItemsTwoLength = (0, vue.ref)(true);
const arrowDisplay = (0, vue.computed)(() => props.arrow !== "never" && !(0, vue.unref)(isVertical));
const hasLabel = (0, vue.computed)(() => {
return items.value.some((item) => item.props.label.toString().length > 0);
});
const isCardType = (0, vue.computed)(() => props.type === "card");
const isVertical = (0, vue.computed)(() => props.direction === "vertical");
const containerStyle = (0, vue.computed)(() => {
if (props.height !== "auto") return { height: props.height };
return {
height: `${containerHeight.value}px`,
overflow: "hidden"
};
});
const throttledArrowClick = (0, lodash_unified.throttle)((index) => {
setActiveItem(index);
}, THROTTLE_TIME, { trailing: true });
const throttledIndicatorHover = (0, lodash_unified.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 ((0, _vue_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)) {
require_error.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 = (0, 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 = _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 ((0, vue.unref)(isVertical)) return;
items.value.forEach((item, index) => {
if (arrow === itemInStage(item, index)) item.states.hover = true;
});
}
function handleButtonLeave() {
if ((0, 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 || !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 = require_vnode.flattedChildren(defaultSlots).filter((slot) => {
return (0, vue.isVNode)(slot) && slot.type.name === require_constants.CAROUSEL_ITEM_NAME;
});
if (normalizeSlots?.length === 2 && props.loop && !isCardType.value) {
isItemsTwoLength.value = true;
return normalizeSlots;
}
isItemsTwoLength.value = false;
return null;
}
(0, vue.watch)(() => activeIndex.value, (current, prev) => {
resetItemPosition(prev);
if (isItemsTwoLength.value) {
current = current % 2;
prev = prev % 2;
}
if (prev > -1) emit(require_event.CHANGE_EVENT, current, prev);
});
const exposeActiveIndex = (0, vue.computed)({
get: () => {
return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
},
set: (value) => activeIndex.value = value
});
(0, vue.watch)(() => props.autoplay, (autoplay) => {
autoplay ? startTimer() : pauseTimer();
});
(0, vue.watch)(() => props.loop, () => {
setActiveItem(activeIndex.value);
});
(0, vue.watch)(() => props.interval, () => {
resetTimer();
});
const resizeObserver = (0, vue.shallowRef)();
(0, vue.onMounted)(() => {
(0, vue.watch)(() => items.value, () => {
if (items.value.length > 0) setActiveItem(props.initialIndex);
}, { immediate: true });
resizeObserver.value = (0, _vueuse_core.useResizeObserver)(root.value, () => {
resetItemPosition();
});
startTimer();
});
(0, vue.onBeforeUnmount)(() => {
pauseTimer();
if (root.value && resizeObserver.value) resizeObserver.value.stop();
});
(0, vue.provide)(require_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
};
};
//#endregion
exports.useCarousel = useCarousel;
//# sourceMappingURL=use-carousel.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require("element-plus/theme-chalk/el-carousel.css");
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require("element-plus/theme-chalk/src/carousel.scss");