You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
2.5 KiB

3 months ago
  1. import { defineComponent, computed, unref, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, vShow, createCommentVNode, renderSlot } from 'vue';
  2. import { carouselItemProps } from './carousel-item.mjs';
  3. import { useCarouselItem } from './use-carousel-item.mjs';
  4. import { CAROUSEL_ITEM_NAME } from './constants.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  7. const __default__ = defineComponent({
  8. name: CAROUSEL_ITEM_NAME
  9. });
  10. const _sfc_main = /* @__PURE__ */ defineComponent({
  11. ...__default__,
  12. props: carouselItemProps,
  13. setup(__props) {
  14. const props = __props;
  15. const ns = useNamespace("carousel");
  16. const {
  17. carouselItemRef,
  18. active,
  19. animating,
  20. hover,
  21. inStage,
  22. isVertical,
  23. translate,
  24. isCardType,
  25. scale,
  26. ready,
  27. handleItemClick
  28. } = useCarouselItem(props);
  29. const itemKls = computed(() => [
  30. ns.e("item"),
  31. ns.is("active", active.value),
  32. ns.is("in-stage", inStage.value),
  33. ns.is("hover", hover.value),
  34. ns.is("animating", animating.value),
  35. {
  36. [ns.em("item", "card")]: isCardType.value,
  37. [ns.em("item", "card-vertical")]: isCardType.value && isVertical.value
  38. }
  39. ]);
  40. const itemStyle = computed(() => {
  41. const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
  42. const _translate = `${translateType}(${unref(translate)}px)`;
  43. const _scale = `scale(${unref(scale)})`;
  44. const transform = [_translate, _scale].join(" ");
  45. return {
  46. transform
  47. };
  48. });
  49. return (_ctx, _cache) => {
  50. return withDirectives((openBlock(), createElementBlock("div", {
  51. ref_key: "carouselItemRef",
  52. ref: carouselItemRef,
  53. class: normalizeClass(unref(itemKls)),
  54. style: normalizeStyle(unref(itemStyle)),
  55. onClick: unref(handleItemClick)
  56. }, [
  57. unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
  58. key: 0,
  59. class: normalizeClass(unref(ns).e("mask"))
  60. }, null, 2)), [
  61. [vShow, !unref(active)]
  62. ]) : createCommentVNode("v-if", true),
  63. renderSlot(_ctx.$slots, "default")
  64. ], 14, ["onClick"])), [
  65. [vShow, unref(ready)]
  66. ]);
  67. };
  68. }
  69. });
  70. var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "carousel-item.vue"]]);
  71. export { CarouselItem as default };
  72. //# sourceMappingURL=carousel-item2.mjs.map