beyond-webui 1.1.44 → 1.1.46

package/lib/components/carousel/src/carousel.vue.d.ts

@@ -7,9 +7,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly indicatorPosition: import("../../../utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
     readonly arrow: import("../../../utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
     readonly type: import("../../../utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
+    readonly cardScale: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
     readonly loop: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly direction: import("../../../utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
     readonly pauseOnHover: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly motionBlur: BooleanConstructor;
 }, {
     COMPONENT_NAME: string;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
@@ -21,20 +23,31 @@ declare const _default: import("vue").DefineComponent<{
         readonly indicatorPosition: import("../../../utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
         readonly arrow: import("../../../utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
         readonly type: import("../../../utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
+        readonly cardScale: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
         readonly loop: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly direction: import("../../../utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
         readonly pauseOnHover: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+        readonly motionBlur: BooleanConstructor;
     }>> & {
         onChange?: ((current: number, prev: number) => any) | undefined;
     }>>;
     emit: (event: "change", current: number, prev: number) => void;
     root: import("vue").Ref<HTMLDivElement | undefined>;
     activeIndex: import("vue").Ref<number>;
+    exposeActiveIndex: import("vue").WritableComputedRef<number>;
     arrowDisplay: import("vue").ComputedRef<boolean>;
     hasLabel: import("vue").ComputedRef<boolean>;
     hover: import("vue").Ref<boolean>;
     isCardType: import("vue").ComputedRef<boolean>;
     items: import("vue").ShallowRef<import("./constants").CarouselItemContext[]>;
+    isVertical: import("vue").ComputedRef<boolean>;
+    containerStyle: import("vue").ComputedRef<{
+        height: string;
+        overflow?: undefined;
+    } | {
+        height: string;
+        overflow: string;
+    }>;
     handleButtonEnter: (arrow: "right" | "left") => void;
     handleButtonLeave: () => void;
     handleIndicatorClick: (index: number) => void;
@@ -43,6 +56,14 @@ declare const _default: import("vue").DefineComponent<{
     setActiveItem: (index: string | number) => void;
     prev: () => void;
     next: () => void;
+    PlaceholderItem: () => ({
+        [name: string]: unknown;
+        $stable?: boolean | undefined;
+    } | import("../../../utils").VNodeChildAtom)[] | null;
+    isTwoLengthShow: (index: number) => boolean;
+    ItemsSorter: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     throttledArrowClick: import("lodash").DebouncedFunc<(index: number) => void>;
     throttledIndicatorHover: import("lodash").DebouncedFunc<(index: number) => void>;
     ns: {
@@ -63,8 +84,11 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
+    t: import("beyond-webui/es/hooks").Translator;
     carouselClasses: import("vue").ComputedRef<string[]>;
     indicatorsClasses: import("vue").ComputedRef<string[]>;
+    handleTransitionStart: (e: TransitionEvent) => void;
+    handleTransitionEnd: (e: TransitionEvent) => void;
     ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("../../../utils").EpPropMergeType<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown>>;
@@ -141,9 +165,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly indicatorPosition: import("../../../utils").EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
     readonly arrow: import("../../../utils").EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
     readonly type: import("../../../utils").EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
+    readonly cardScale: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
     readonly loop: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly direction: import("../../../utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
     readonly pauseOnHover: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly motionBlur: BooleanConstructor;
 }>> & {
     onChange?: ((current: number, prev: number) => any) | undefined;
 }, {
@@ -157,6 +183,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly autoplay: import("../../../utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly interval: number;
     readonly indicatorPosition: import("../../../utils").EpPropMergeType<StringConstructor, "" | "none" | "outside", unknown>;
+    readonly cardScale: number;
     readonly pauseOnHover: import("../../../utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly motionBlur: boolean;
 }>;
 export default _default;

package/lib/components/carousel/src/carousel2.js

@@ -43,6 +43,10 @@ const carouselProps = runtime.buildProps({
     values: ["", "card"],
     default: ""
   },
+  cardScale: {
+    type: Number,
+    default: 0.83
+  },
   loop: {
     type: Boolean,
     default: true
@@ -55,7 +59,8 @@ const carouselProps = runtime.buildProps({
   pauseOnHover: {
     type: Boolean,
     default: true
-  }
+  },
+  motionBlur: Boolean
 });
 const carouselEmits = {
   change: (current, prev) => [current, prev].every(types.isNumber)

package/lib/components/carousel/src/carousel2.js.map

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

package/lib/components/carousel/src/constants.d.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey, Ref } from 'vue';
+import type { InjectionKey, Ref, VNode } from 'vue';
 import type { CarouselItemProps } from './carousel-item';
 export declare type CarouselItemStates = {
     hover: boolean;
@@ -13,6 +13,7 @@ export declare type CarouselItemContext = {
     props: CarouselItemProps;
     states: CarouselItemStates;
     uid: number;
+    getVnode: () => VNode;
     translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
 };
 export declare type CarouselContext = {
@@ -21,8 +22,11 @@ export declare type CarouselContext = {
     isCardType: Ref<boolean>;
     isVertical: Ref<boolean>;
     loop: boolean;
+    cardScale: number;
     addItem: (item: CarouselItemContext) => void;
-    removeItem: (uid: number) => void;
+    removeItem: (item: CarouselItemContext) => void;
     setActiveItem: (index: number) => void;
+    setContainerHeight: (height: number) => void;
 };
 export declare const carouselContextKey: InjectionKey<CarouselContext>;
+export declare const CAROUSEL_ITEM_NAME = "ElCarouselItem";

package/lib/components/carousel/src/constants.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const carouselContextKey = Symbol("carouselContextKey");
+const CAROUSEL_ITEM_NAME = "ElCarouselItem";
 
+exports.CAROUSEL_ITEM_NAME = CAROUSEL_ITEM_NAME;
 exports.carouselContextKey = carouselContextKey;
 //# sourceMappingURL=constants.js.map

package/lib/components/carousel/src/constants.js.map

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

package/lib/components/carousel/src/instance.d.ts

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

package/lib/components/carousel/src/use-carousel-item.d.ts

@@ -1,5 +1,6 @@
 import type { CarouselItemProps } from './carousel-item';
-export declare const useCarouselItem: (props: CarouselItemProps, componentName: string) => {
+export declare const useCarouselItem: (props: CarouselItemProps) => {
+    carouselItemRef: import("vue").Ref<HTMLElement | undefined>;
     active: import("vue").Ref<boolean>;
     animating: import("vue").Ref<boolean>;
     hover: import("vue").Ref<boolean>;

package/lib/components/carousel/src/use-carousel-item.js

@@ -8,16 +8,16 @@ var constants = require('./constants.js');
 var error = require('../../../utils/error.js');
 var types = require('../../../utils/types.js');
 
-const useCarouselItem = (props, componentName) => {
+const useCarouselItem = (props) => {
   const carouselContext = vue.inject(constants.carouselContextKey);
   const instance = vue.getCurrentInstance();
   if (!carouselContext) {
-    error.debugWarn(componentName, "usage: <el-carousel></el-carousel-item></el-carousel>");
+    error.debugWarn(constants.CAROUSEL_ITEM_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
   }
   if (!instance) {
-    error.debugWarn(componentName, "compositional hook can only be invoked inside setups");
+    error.debugWarn(constants.CAROUSEL_ITEM_NAME, "compositional hook can only be invoked inside setups");
   }
-  const CARD_SCALE = 0.83;
+  const carouselItemRef = vue.ref();
   const hover = vue.ref(false);
   const translate = vue.ref(0);
   const scale = vue.ref(1);
@@ -25,7 +25,7 @@ const useCarouselItem = (props, componentName) => {
   const ready = vue.ref(false);
   const inStage = vue.ref(false);
   const animating = vue.ref(false);
-  const { isCardType, isVertical } = carouselContext;
+  const { isCardType, isVertical, cardScale } = carouselContext;
   function processIndex(index, activeIndex, length) {
     const lastItemIndex = length - 1;
     const prevItemIndex = activeIndex - 1;
@@ -43,14 +43,14 @@ const useCarouselItem = (props, componentName) => {
     return index;
   }
   function calcCardTranslate(index, activeIndex) {
-    var _a;
-    const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
+    var _a, _b;
+    const parentWidth = vue.unref(isVertical) ? ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
     if (inStage.value) {
-      return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+      return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
     } else if (index < activeIndex) {
-      return -(1 + CARD_SCALE) * parentWidth / 4;
+      return -(1 + cardScale) * parentWidth / 4;
     } else {
-      return (3 + CARD_SCALE) * parentWidth / 4;
+      return (3 + cardScale) * parentWidth / 4;
     }
   }
   function calcTranslate(index, activeIndex, isVertical2) {
@@ -74,16 +74,16 @@ const useCarouselItem = (props, componentName) => {
     const _isVertical = vue.unref(isVertical);
     active.value = isActive;
     if (_isCardType) {
-      if (_isVertical) {
-        error.debugWarn("Carousel", "vertical direction is not supported for card mode");
-      }
       inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
       translate.value = calcCardTranslate(index, activeIndex);
-      scale.value = vue.unref(active) ? 1 : CARD_SCALE;
+      scale.value = vue.unref(active) ? 1 : cardScale;
     } else {
       translate.value = calcTranslate(index, activeIndex, _isVertical);
     }
     ready.value = true;
+    if (isActive && carouselItemRef.value) {
+      carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
+    }
   };
   function handleItemClick() {
     if (carouselContext && vue.unref(isCardType)) {
@@ -91,26 +91,27 @@ const useCarouselItem = (props, componentName) => {
       carouselContext.setActiveItem(index);
     }
   }
-  vue.onMounted(() => {
-    carouselContext.addItem({
-      props,
-      states: vue.reactive({
-        hover,
-        translate,
-        scale,
-        active,
-        ready,
-        inStage,
-        animating
-      }),
-      uid: instance.uid,
-      translateItem
-    });
-  });
-  vue.onUnmounted(() => {
-    carouselContext.removeItem(instance.uid);
+  const carouselItemContext = {
+    props,
+    states: vue.reactive({
+      hover,
+      translate,
+      scale,
+      active,
+      ready,
+      inStage,
+      animating
+    }),
+    uid: instance.uid,
+    getVnode: () => instance.vnode,
+    translateItem
+  };
+  carouselContext.addItem(carouselItemContext);
+  vue.onBeforeUnmount(() => {
+    carouselContext.removeItem(carouselItemContext);
   });
   return {
+    carouselItemRef,
     active,
     animating,
     hover,

package/lib/components/carousel/src/use-carousel-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-carousel-item.js","sources":["../../../../../../packages/components/carousel/src/use-carousel-item.ts"],"sourcesContent":["import {\n  getCurrentInstance,\n  inject,\n  onMounted,\n  onUnmounted,\n  reactive,\n  ref,\n  unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { carouselContextKey } from './constants'\n\nimport type { CarouselItemProps } from './carousel-item'\n\nexport const useCarouselItem = (\n  props: CarouselItemProps,\n  componentName: string\n) => {\n  const carouselContext = inject(carouselContextKey)!\n  // instance\n  const instance = getCurrentInstance()!\n  if (!carouselContext) {\n    debugWarn(\n      componentName,\n      'usage: <el-carousel></el-carousel-item></el-carousel>'\n    )\n  }\n\n  if (!instance) {\n    debugWarn(\n      componentName,\n      'compositional hook can only be invoked inside setups'\n    )\n  }\n\n  const CARD_SCALE = 0.83\n\n  const hover = ref(false)\n  const translate = ref(0)\n  const scale = ref(1)\n  const active = ref(false)\n  const ready = ref(false)\n  const inStage = ref(false)\n  const animating = ref(false)\n\n  // computed\n  const { isCardType, isVertical } = carouselContext\n\n  // methods\n\n  function processIndex(index: number, activeIndex: number, length: number) {\n    const lastItemIndex = length - 1\n    const prevItemIndex = activeIndex - 1\n    const nextItemIndex = activeIndex + 1\n    const halfItemIndex = length / 2\n\n    if (activeIndex === 0 && index === lastItemIndex) {\n      return -1\n    } else if (activeIndex === lastItemIndex && index === 0) {\n      return length\n    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n      return length + 1\n    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n      return -2\n    }\n    return index\n  }\n\n  function calcCardTranslate(index: number, activeIndex: number) {\n    const parentWidth = carouselContext.root.value?.offsetWidth || 0\n    if (inStage.value) {\n      return (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n    } else if (index < activeIndex) {\n      return (-(1 + CARD_SCALE) * parentWidth) / 4\n    } else {\n      return ((3 + CARD_SCALE) * parentWidth) / 4\n    }\n  }\n\n  function calcTranslate(\n    index: number,\n    activeIndex: number,\n    isVertical: boolean\n  ) {\n    const rootEl = carouselContext.root.value\n    if (!rootEl) return 0\n\n    const distance =\n      (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n    return distance * (index - activeIndex)\n  }\n\n  const translateItem = (\n    index: number,\n    activeIndex: number,\n    oldIndex?: number\n  ) => {\n    const _isCardType = unref(isCardType)\n    const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n    const isActive = index === activeIndex\n    if (!_isCardType && !isUndefined(oldIndex)) {\n      animating.value = isActive || index === oldIndex\n    }\n\n    if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n      index = processIndex(index, activeIndex, carouselItemLength)\n    }\n\n    const _isVertical = unref(isVertical)\n    active.value = isActive\n\n    if (_isCardType) {\n      if (_isVertical) {\n        debugWarn(\n          'Carousel',\n          'vertical direction is not supported for card mode'\n        )\n      }\n      inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n      translate.value = calcCardTranslate(index, activeIndex)\n      scale.value = unref(active) ? 1 : CARD_SCALE\n    } else {\n      translate.value = calcTranslate(index, activeIndex, _isVertical)\n    }\n\n    ready.value = true\n  }\n\n  function handleItemClick() {\n    if (carouselContext && unref(isCardType)) {\n      const index = carouselContext.items.value.findIndex(\n        ({ uid }) => uid === instance.uid\n      )\n      carouselContext.setActiveItem(index)\n    }\n  }\n\n  // lifecycle\n  onMounted(() => {\n    carouselContext.addItem({\n      props,\n      states: reactive({\n        hover,\n        translate,\n        scale,\n        active,\n        ready,\n        inStage,\n        animating,\n      }),\n      uid: instance.uid,\n      translateItem,\n    })\n  })\n\n  onUnmounted(() => {\n    carouselContext.removeItem(instance.uid)\n  })\n\n  return {\n    active,\n    animating,\n    hover,\n    inStage,\n    isVertical,\n    translate,\n    isCardType,\n    scale,\n    ready,\n    handleItemClick,\n  }\n}\n"],"names":["inject","carouselContextKey","getCurrentInstance","debugWarn","ref","unref","isUndefined","onMounted","reactive","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"use-carousel-item.js","sources":["../../../../../../packages/components/carousel/src/use-carousel-item.ts"],"sourcesContent":["import {\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  reactive,\n  ref,\n  unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { CAROUSEL_ITEM_NAME, carouselContextKey } from './constants'\n\nimport type { CarouselItemProps } from './carousel-item'\n\nexport const useCarouselItem = (props: CarouselItemProps) => {\n  const carouselContext = inject(carouselContextKey)!\n  // instance\n  const instance = getCurrentInstance()!\n  if (!carouselContext) {\n    debugWarn(\n      CAROUSEL_ITEM_NAME,\n      'usage: <el-carousel></el-carousel-item></el-carousel>'\n    )\n  }\n\n  if (!instance) {\n    debugWarn(\n      CAROUSEL_ITEM_NAME,\n      'compositional hook can only be invoked inside setups'\n    )\n  }\n\n  const carouselItemRef = ref<HTMLElement>()\n  const hover = ref(false)\n  const translate = ref(0)\n  const scale = ref(1)\n  const active = ref(false)\n  const ready = ref(false)\n  const inStage = ref(false)\n  const animating = ref(false)\n\n  // computed\n  const { isCardType, isVertical, cardScale } = carouselContext\n\n  // methods\n\n  function processIndex(index: number, activeIndex: number, length: number) {\n    const lastItemIndex = length - 1\n    const prevItemIndex = activeIndex - 1\n    const nextItemIndex = activeIndex + 1\n    const halfItemIndex = length / 2\n\n    if (activeIndex === 0 && index === lastItemIndex) {\n      return -1\n    } else if (activeIndex === lastItemIndex && index === 0) {\n      return length\n    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n      return length + 1\n    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n      return -2\n    }\n    return index\n  }\n\n  function calcCardTranslate(index: number, activeIndex: number) {\n    const parentWidth = unref(isVertical)\n      ? carouselContext.root.value?.offsetHeight || 0\n      : carouselContext.root.value?.offsetWidth || 0\n\n    if (inStage.value) {\n      return (parentWidth * ((2 - cardScale) * (index - activeIndex) + 1)) / 4\n    } else if (index < activeIndex) {\n      return (-(1 + cardScale) * parentWidth) / 4\n    } else {\n      return ((3 + cardScale) * parentWidth) / 4\n    }\n  }\n\n  function calcTranslate(\n    index: number,\n    activeIndex: number,\n    isVertical: boolean\n  ) {\n    const rootEl = carouselContext.root.value\n    if (!rootEl) return 0\n\n    const distance =\n      (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n    return distance * (index - activeIndex)\n  }\n\n  const translateItem = (\n    index: number,\n    activeIndex: number,\n    oldIndex?: number\n  ) => {\n    const _isCardType = unref(isCardType)\n    const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n    const isActive = index === activeIndex\n    if (!_isCardType && !isUndefined(oldIndex)) {\n      animating.value = isActive || index === oldIndex\n    }\n\n    if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n      index = processIndex(index, activeIndex, carouselItemLength)\n    }\n\n    const _isVertical = unref(isVertical)\n    active.value = isActive\n\n    if (_isCardType) {\n      inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n      translate.value = calcCardTranslate(index, activeIndex)\n      scale.value = unref(active) ? 1 : cardScale\n    } else {\n      translate.value = calcTranslate(index, activeIndex, _isVertical)\n    }\n\n    ready.value = true\n\n    if (isActive && carouselItemRef.value) {\n      carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight)\n    }\n  }\n\n  function handleItemClick() {\n    if (carouselContext && unref(isCardType)) {\n      const index = carouselContext.items.value.findIndex(\n        ({ uid }) => uid === instance.uid\n      )\n      carouselContext.setActiveItem(index)\n    }\n  }\n\n  const carouselItemContext = {\n    props,\n    states: reactive({\n      hover,\n      translate,\n      scale,\n      active,\n      ready,\n      inStage,\n      animating,\n    }),\n    uid: instance.uid,\n    getVnode: () => instance.vnode,\n    translateItem,\n  }\n\n  carouselContext.addItem(carouselItemContext)\n\n  onBeforeUnmount(() => {\n    carouselContext.removeItem(carouselItemContext)\n  })\n\n  return {\n    carouselItemRef,\n    active,\n    animating,\n    hover,\n    inStage,\n    isVertical,\n    translate,\n    isCardType,\n    scale,\n    ready,\n    handleItemClick,\n  }\n}\n"],"names":["inject","carouselContextKey","getCurrentInstance","debugWarn","CAROUSEL_ITEM_NAME","ref","unref","isUndefined","reactive","onBeforeUnmount"],"mappings":"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"}

package/lib/components/carousel/src/use-carousel.d.ts

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

package/lib/components/carousel/src/use-carousel.js

@@ -7,34 +7,57 @@ var lodashUnified = require('lodash-unified');
 var core = require('@vueuse/core');
 require('../../../utils/index.js');
 require('../../../hooks/index.js');
+require('../../../constants/index.js');
 var constants = require('./constants.js');
 var index = require('../../../hooks/use-ordered-children/index.js');
 var shared = require('@vue/shared');
 var error = require('../../../utils/error.js');
+var vnode = require('../../../utils/vue/vnode.js');
+var event = require('../../../constants/event.js');
 
 const THROTTLE_TIME = 300;
 const useCarousel = (props, emit, componentName) => {
   const {
     children: items,
     addChild: addItem,
-    removeChild: removeItem
-  } = index.useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem");
+    removeChild: removeItem,
+    ChildrenSorter: ItemsSorter
+  } = index.useOrderedChildren(vue.getCurrentInstance(), constants.CAROUSEL_ITEM_NAME);
+  const slots = vue.useSlots();
   const activeIndex = vue.ref(-1);
   const timer = vue.ref(null);
   const hover = vue.ref(false);
   const root = vue.ref();
+  const containerHeight = vue.ref(0);
+  const isItemsTwoLength = vue.ref(true);
   const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
   const hasLabel = vue.computed(() => {
     return items.value.some((item) => item.props.label.toString().length > 0);
   });
   const isCardType = vue.computed(() => props.type === "card");
   const isVertical = vue.computed(() => props.direction === "vertical");
+  const containerStyle = vue.computed(() => {
+    if (props.height !== "auto") {
+      return {
+        height: props.height
+      };
+    }
+    return {
+      height: `${containerHeight.value}px`,
+      overflow: "hidden"
+    };
+  });
   const throttledArrowClick = lodashUnified.throttle((index) => {
     setActiveItem(index);
   }, THROTTLE_TIME, { trailing: true });
   const throttledIndicatorHover = lodashUnified.throttle((index) => {
     handleIndicatorHover(index);
   }, THROTTLE_TIME);
+  const isTwoLengthShow = (index) => {
+    if (!isItemsTwoLength.value)
+      return true;
+    return activeIndex.value <= 1 ? index <= 1 : index > 1;
+  };
   function pauseTimer() {
     if (timer.value) {
       clearInterval(timer.value);
@@ -146,14 +169,46 @@ const useCarousel = (props, emit, componentName) => {
   }
   function resetTimer() {
     pauseTimer();
-    startTimer();
+    if (!props.pauseOnHover)
+      startTimer();
+  }
+  function setContainerHeight(height) {
+    if (props.height !== "auto")
+      return;
+    containerHeight.value = height;
+  }
+  function PlaceholderItem() {
+    var _a;
+    const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
+    if (!defaultSlots)
+      return null;
+    const flatSlots = vnode.flattedChildren(defaultSlots);
+    const normalizeSlots = flatSlots.filter((slot) => {
+      return vue.isVNode(slot) && slot.type.name === constants.CAROUSEL_ITEM_NAME;
+    });
+    if ((normalizeSlots == null ? void 0 : normalizeSlots.length) === 2 && props.loop && !isCardType.value) {
+      isItemsTwoLength.value = true;
+      return normalizeSlots;
+    }
+    isItemsTwoLength.value = false;
+    return null;
   }
   vue.watch(() => activeIndex.value, (current, prev2) => {
     resetItemPosition(prev2);
+    if (isItemsTwoLength.value) {
+      current = current % 2;
+      prev2 = prev2 % 2;
+    }
     if (prev2 > -1) {
-      emit("change", current, prev2);
+      emit(event.CHANGE_EVENT, current, prev2);
     }
   });
+  const exposeActiveIndex = vue.computed({
+    get: () => {
+      return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
+    },
+    set: (value) => activeIndex.value = value
+  });
   vue.watch(() => props.autoplay, (autoplay) => {
     autoplay ? startTimer() : pauseTimer();
   });
@@ -163,12 +218,14 @@ const useCarousel = (props, emit, componentName) => {
   vue.watch(() => props.interval, () => {
     resetTimer();
   });
-  vue.watch(() => items.value, () => {
-    if (items.value.length > 0)
-      setActiveItem(props.initialIndex);
-  });
   const resizeObserver = vue.shallowRef();
   vue.onMounted(() => {
+    vue.watch(() => items.value, () => {
+      if (items.value.length > 0)
+        setActiveItem(props.initialIndex);
+    }, {
+      immediate: true
+    });
     resizeObserver.value = core.useResizeObserver(root.value, () => {
       resetItemPosition();
     });
@@ -185,18 +242,24 @@ const useCarousel = (props, emit, componentName) => {
     isVertical,
     items,
     loop: props.loop,
+    cardScale: props.cardScale,
     addItem,
     removeItem,
-    setActiveItem
+    setActiveItem,
+    setContainerHeight
   });
   return {
     root,
     activeIndex,
+    exposeActiveIndex,
     arrowDisplay,
     hasLabel,
     hover,
     isCardType,
     items,
+    isVertical,
+    containerStyle,
+    isItemsTwoLength,
     handleButtonEnter,
     handleButtonLeave,
     handleIndicatorClick,
@@ -205,6 +268,9 @@ const useCarousel = (props, emit, componentName) => {
     setActiveItem,
     prev,
     next,
+    PlaceholderItem,
+    isTwoLengthShow,
+    ItemsSorter,
     throttledArrowClick,
     throttledIndicatorHover
   };