carousel2.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$2 = require('../../icon/index.js');
  5. var iconsVue = require('@element-plus/icons-vue');
  6. var carousel = require('./carousel.js');
  7. var useCarousel = require('./use-carousel.js');
  8. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  9. var index = require('../../../hooks/use-namespace/index.js');
  10. var index$1 = require('../../../hooks/use-locale/index.js');
  11. const COMPONENT_NAME = "ElCarousel";
  12. const __default__ = vue.defineComponent({
  13. name: COMPONENT_NAME
  14. });
  15. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  16. ...__default__,
  17. props: carousel.carouselProps,
  18. emits: carousel.carouselEmits,
  19. setup(__props, { expose, emit }) {
  20. const props = __props;
  21. const {
  22. root,
  23. activeIndex,
  24. arrowDisplay,
  25. hasLabel,
  26. hover,
  27. isCardType,
  28. items,
  29. isVertical,
  30. containerStyle,
  31. handleButtonEnter,
  32. handleButtonLeave,
  33. isTransitioning,
  34. handleIndicatorClick,
  35. handleMouseEnter,
  36. handleMouseLeave,
  37. handleTransitionEnd,
  38. setActiveItem,
  39. prev,
  40. next,
  41. PlaceholderItem,
  42. isTwoLengthShow,
  43. throttledArrowClick,
  44. throttledIndicatorHover
  45. } = useCarousel.useCarousel(props, emit, COMPONENT_NAME);
  46. const ns = index.useNamespace("carousel");
  47. const { t } = index$1.useLocale();
  48. const carouselClasses = vue.computed(() => {
  49. const classes = [ns.b(), ns.m(props.direction)];
  50. if (vue.unref(isCardType)) {
  51. classes.push(ns.m("card"));
  52. }
  53. return classes;
  54. });
  55. const carouselContainer = vue.computed(() => {
  56. const classes = [ns.e("container")];
  57. if (props.motionBlur && vue.unref(isTransitioning) && items.value.length > 1) {
  58. classes.push(vue.unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`);
  59. }
  60. return classes;
  61. });
  62. const indicatorsClasses = vue.computed(() => {
  63. const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
  64. if (vue.unref(hasLabel)) {
  65. classes.push(ns.em("indicators", "labels"));
  66. }
  67. if (props.indicatorPosition === "outside") {
  68. classes.push(ns.em("indicators", "outside"));
  69. }
  70. if (vue.unref(isVertical)) {
  71. classes.push(ns.em("indicators", "right"));
  72. }
  73. return classes;
  74. });
  75. expose({
  76. activeIndex,
  77. setActiveItem,
  78. prev,
  79. next
  80. });
  81. return (_ctx, _cache) => {
  82. return vue.openBlock(), vue.createElementBlock("div", {
  83. ref_key: "root",
  84. ref: root,
  85. class: vue.normalizeClass(vue.unref(carouselClasses)),
  86. onMouseenter: vue.withModifiers(vue.unref(handleMouseEnter), ["stop"]),
  87. onMouseleave: vue.withModifiers(vue.unref(handleMouseLeave), ["stop"])
  88. }, [
  89. vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
  90. key: 0,
  91. name: "carousel-arrow-left",
  92. persisted: ""
  93. }, {
  94. default: vue.withCtx(() => [
  95. vue.withDirectives(vue.createElementVNode("button", {
  96. type: "button",
  97. class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
  98. "aria-label": vue.unref(t)("el.carousel.leftArrow"),
  99. onMouseenter: ($event) => vue.unref(handleButtonEnter)("left"),
  100. onMouseleave: vue.unref(handleButtonLeave),
  101. onClick: vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"])
  102. }, [
  103. vue.createVNode(vue.unref(index$2.ElIcon), null, {
  104. default: vue.withCtx(() => [
  105. vue.createVNode(vue.unref(iconsVue.ArrowLeft))
  106. ]),
  107. _: 1
  108. })
  109. ], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
  110. [
  111. vue.vShow,
  112. (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
  113. ]
  114. ])
  115. ]),
  116. _: 1
  117. })) : vue.createCommentVNode("v-if", true),
  118. vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
  119. key: 1,
  120. name: "carousel-arrow-right",
  121. persisted: ""
  122. }, {
  123. default: vue.withCtx(() => [
  124. vue.withDirectives(vue.createElementVNode("button", {
  125. type: "button",
  126. class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
  127. "aria-label": vue.unref(t)("el.carousel.rightArrow"),
  128. onMouseenter: ($event) => vue.unref(handleButtonEnter)("right"),
  129. onMouseleave: vue.unref(handleButtonLeave),
  130. onClick: vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"])
  131. }, [
  132. vue.createVNode(vue.unref(index$2.ElIcon), null, {
  133. default: vue.withCtx(() => [
  134. vue.createVNode(vue.unref(iconsVue.ArrowRight))
  135. ]),
  136. _: 1
  137. })
  138. ], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
  139. [
  140. vue.vShow,
  141. (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
  142. ]
  143. ])
  144. ]),
  145. _: 1
  146. })) : vue.createCommentVNode("v-if", true),
  147. vue.createElementVNode("div", {
  148. class: vue.normalizeClass(vue.unref(carouselContainer)),
  149. style: vue.normalizeStyle(vue.unref(containerStyle)),
  150. onTransitionend: vue.unref(handleTransitionEnd)
  151. }, [
  152. vue.createVNode(vue.unref(PlaceholderItem)),
  153. vue.renderSlot(_ctx.$slots, "default")
  154. ], 46, ["onTransitionend"]),
  155. _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
  156. key: 2,
  157. class: vue.normalizeClass(vue.unref(indicatorsClasses))
  158. }, [
  159. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
  160. return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
  161. key: index,
  162. class: vue.normalizeClass([
  163. vue.unref(ns).e("indicator"),
  164. vue.unref(ns).em("indicator", _ctx.direction),
  165. vue.unref(ns).is("active", index === vue.unref(activeIndex))
  166. ]),
  167. onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
  168. onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
  169. }, [
  170. vue.createElementVNode("button", {
  171. class: vue.normalizeClass(vue.unref(ns).e("button")),
  172. "aria-label": vue.unref(t)("el.carousel.indicator", { index: index + 1 })
  173. }, [
  174. vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
  175. ], 10, ["aria-label"])
  176. ], 42, ["onMouseenter", "onClick"])), [
  177. [vue.vShow, vue.unref(isTwoLengthShow)(index)]
  178. ]);
  179. }), 128))
  180. ], 2)) : vue.createCommentVNode("v-if", true),
  181. props.motionBlur ? (vue.openBlock(), vue.createElementBlock("svg", {
  182. key: 3,
  183. xmlns: "http://www.w3.org/2000/svg",
  184. version: "1.1",
  185. style: { "display": "none" }
  186. }, [
  187. vue.createElementVNode("defs", null, [
  188. vue.createElementVNode("filter", { id: "elCarouselHorizontal" }, [
  189. vue.createElementVNode("feGaussianBlur", {
  190. in: "SourceGraphic",
  191. stdDeviation: "12,0"
  192. })
  193. ]),
  194. vue.createElementVNode("filter", { id: "elCarouselVertical" }, [
  195. vue.createElementVNode("feGaussianBlur", {
  196. in: "SourceGraphic",
  197. stdDeviation: "0,10"
  198. })
  199. ])
  200. ])
  201. ])) : vue.createCommentVNode("v-if", true)
  202. ], 42, ["onMouseenter", "onMouseleave"]);
  203. };
  204. }
  205. });
  206. var Carousel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "carousel.vue"]]);
  207. exports["default"] = Carousel;
  208. //# sourceMappingURL=carousel2.js.map