hongluan-ui/lib/components/carousel/src/carousel-item.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var carouselItem = require('./carousel-item2.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var carousel = require('../../../tokens/carousel.js');
var error = require('../../../utils/error.js');

const CARD_SCALE = 0.83;
const COMPONENT_NAME = "CarouselItem";
const _sfc_main = vue.defineComponent({
  name: "CarouselItem",
  props: carouselItem.carouselItemProps,
  setup(props) {
    const { namespace } = index.useNamespace("carousel-item");
    const carouselContext = vue.inject(carousel.carouselContextKey);
    const instance = vue.getCurrentInstance();
    if (!carouselContext) {
      error.debugWarn(COMPONENT_NAME, "usage: <hl-carousel></hl-carousel-item></hl-carousel>");
    }
    if (!instance) {
      error.debugWarn(COMPONENT_NAME, "compositional hook can only be invoked inside setups");
    }
    const data = vue.reactive({
      hover: false,
      translate: 0,
      scale: 1,
      active: false,
      ready: false,
      inStage: false,
      animating: false
    });
    const parentDirection = vue.computed(() => {
      return carouselContext.direction;
    });
    const itemStyle = vue.computed(() => {
      const translateType = parentDirection.value === "vertical" ? "translateY" : "translateX";
      const value = `${translateType}(${data.translate}${carouselContext.itemsWidthUnit}) scale(${data.scale})`;
      const style = {
        transform: value,
        width: carouselContext.showMultiple.value ? Number.parseFloat(String(carouselContext.itemsWidth)) + carouselContext.itemsWidthUnit : ""
      };
      return style;
    });
    function processIndex(index, activeIndex, length) {
      if (activeIndex === 0 && index === length - 1) {
        return -1;
      } else if (activeIndex === length - 1 && index === 0) {
        return length;
      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
        return length + 1;
      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
        return -2;
      }
      return index;
    }
    function calcCardTranslate(index, activeIndex) {
      var _a;
      const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
      if (data.inStage) {
        return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
      } else if (index < activeIndex) {
        return -(1 + CARD_SCALE) * parentWidth / 4;
      } else {
        return (3 + CARD_SCALE) * parentWidth / 4;
      }
    }
    function calcTranslate(index, activeIndex, isVertical) {
      var _a, _b;
      const distance = (isVertical ? (_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight : (_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
      return distance * (index - activeIndex);
    }
    const translateItem = (index, activeIndex, oldIndex, distance, isAnimating) => {
      const parentType = carouselContext.type;
      const length = carouselContext.items.value.length;
      if (parentType !== "card" && oldIndex !== void 0 && !carouselContext.showMultiple.value) {
        data.animating = index === activeIndex || index === oldIndex;
      }
      if (index !== activeIndex && length > 2 && carouselContext.loop) {
        index = processIndex(index, activeIndex, length);
      }
      if (parentType === "card") {
        if (parentDirection.value === "vertical") {
          error.debugWarn("Carousel", "vertical direction is not supported in card mode");
        }
        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
        data.active = index === activeIndex;
        data.translate = calcCardTranslate(index, activeIndex);
        data.scale = data.active ? 1 : CARD_SCALE;
      } else {
        if (carouselContext.showMultiple.value) {
          data.animating = isAnimating;
          data.translate = distance;
        } else {
          data.active = index === activeIndex;
          const isVertical = parentDirection.value === "vertical";
          data.translate = calcTranslate(index, activeIndex, isVertical);
        }
      }
      data.ready = true;
    };
    function handleItemClick() {
      if (carouselContext && carouselContext.type === "card") {
        const index = carouselContext.items.value.map((d) => d.uid).indexOf(instance.uid);
        carouselContext.setActiveItem(index);
      }
    }
    vue.onMounted(() => {
      carouselContext.addItem({
        uid: instance.uid,
        props,
        states: data,
        translateItem
      });
    });
    vue.onUnmounted(() => {
      carouselContext.removeItem(instance.uid);
    });
    return {
      namespace,
      data,
      itemStyle,
      translateItem,
      type: carouselContext.type,
      handleItemClick
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([
      _ctx.namespace,
      {
        "is-active": _ctx.data.active,
        "carousel-item-card": _ctx.type === "card",
        "is-in-stage": _ctx.data.inStage,
        "is-hover": _ctx.data.hover,
        "is-animating": _ctx.data.animating
      }
    ]),
    style: vue.normalizeStyle(_ctx.itemStyle),
    onClick: _ctx.handleItemClick
  }, [
    _ctx.type === "card" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
      key: 0,
      class: "carousel-mask"
    }, null, 512)), [
      [vue.vShow, !_ctx.data.active]
    ]) : vue.createCommentVNode("v-if", true),
    vue.renderSlot(_ctx.$slots, "default")
  ], 14, ["onClick"])), [
    [vue.vShow, _ctx.data.ready]
  ]);
}
var CarouselItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = CarouselItem;
//# sourceMappingURL=carousel-item.js.map