hongluan-ui/es/components/carousel/src/carousel-item.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"carousel-item.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"data.ready\"\n    :class=\"[\n      namespace,\n      {\n        'is-active': data.active,\n        'carousel-item-card': type === 'card',\n        'is-in-stage': data.inStage,\n        'is-hover': data.hover,\n        'is-animating': data.animating,\n      }]\"\n    :style=\"itemStyle\"\n    @click=\"handleItemClick\"\n  >\n    <div\n      v-if=\"type === 'card'\"\n      v-show=\"!data.active\"\n      class=\"carousel-mask\"\n    ></div>\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, reactive, onMounted, inject, computed, toRefs, getCurrentInstance, onUnmounted } from 'vue'\nimport { debugWarn } from '@hongluan-ui/utils'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport { carouselContextKey } from '@hongluan-ui/tokens'\nimport { carouselItemProps } from './carousel-item'\n\nimport type { CarouselItemStates } from '@hongluan-ui/tokens'\n\nconst CARD_SCALE = 0.83\nconst COMPONENT_NAME = 'CarouselItem'\nexport default defineComponent({\n  name: 'CarouselItem',\n  props: carouselItemProps,\n  setup(props) {\n    const { namespace } = useNamespace('carousel-item')\n\n    // inject\n    const carouselContext = inject(carouselContextKey)\n    // instance\n    const instance = getCurrentInstance()\n    if (!carouselContext) {\n      debugWarn(\n        COMPONENT_NAME,\n        'usage: <hl-carousel></hl-carousel-item></hl-carousel>',\n      )\n    }\n\n    if (!instance) {\n      debugWarn(\n        COMPONENT_NAME,\n        'compositional hook can only be invoked inside setups',\n      )\n    }\n\n    // data\n    const data = reactive<CarouselItemStates>({\n      hover: false,\n      translate: 0,\n      scale: 1,\n      active: false,\n      ready: false,\n      inStage: false,\n      animating: false,\n    })\n\n    // computed\n    const parentDirection = computed(() => {\n      return carouselContext.direction\n    })\n\n    const itemStyle = computed(() => {\n      const translateType =\n        parentDirection.value === 'vertical' ? 'translateY' : 'translateX'\n      const value = `${translateType}(${data.translate}${carouselContext.itemsWidthUnit}) scale(${data.scale})`\n      const style = {\n        transform: value,\n        width: carouselContext.showMultiple.value ? Number.parseFloat(String(carouselContext.itemsWidth)) + carouselContext.itemsWidthUnit : '',\n      }\n      return style\n    })\n\n    // methods\n\n    function processIndex(index: number, activeIndex: number, length: number) {\n      if (activeIndex === 0 && index === length - 1) {\n        return -1\n      } else if (activeIndex === length - 1 && index === 0) {\n        return length\n      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {\n        return length + 1\n      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {\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 (data.inStage) {\n        return (\n          (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n        )\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(index: number, activeIndex: number, isVertical: boolean) {\n      const distance = (isVertical ? carouselContext.root.value?.offsetHeight : carouselContext.root.value?.offsetWidth) || 0\n      return distance * (index - activeIndex)\n    }\n\n    const translateItem = (\n      index: number,\n      activeIndex: number,\n      oldIndex: number,\n      distance: number,\n      isAnimating: boolean,\n    ) => {\n      const parentType = carouselContext.type\n      const length = carouselContext.items.value.length\n      if (parentType !== 'card' && oldIndex !== undefined && !carouselContext.showMultiple.value) {\n        data.animating = index === activeIndex || index === oldIndex\n      }\n      if (index !== activeIndex && length > 2 && carouselContext.loop) {\n        index = processIndex(index, activeIndex, length)\n      }\n      if (parentType === 'card') {\n        if (parentDirection.value === 'vertical') {\n          debugWarn(\n            'Carousel', 'vertical direction is not supported in card mode',\n          )\n        }\n        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1\n        data.active = index === activeIndex\n        data.translate = calcCardTranslate(index, activeIndex)\n        data.scale = data.active ? 1 : CARD_SCALE\n      } else {\n        if (carouselContext.showMultiple.value) {\n          data.animating = isAnimating\n          data.translate = distance\n        } else {\n          data.active = index === activeIndex\n          const isVertical = parentDirection.value === 'vertical'\n          data.translate = calcTranslate(index, activeIndex, isVertical)\n        }\n      }\n      data.ready = true\n    }\n\n    function handleItemClick() {\n      if (carouselContext && carouselContext.type === 'card') {\n        const index = carouselContext.items.value\n          .map(d => d.uid)\n          .indexOf(instance.uid)\n        carouselContext.setActiveItem(index)\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      carouselContext.addItem({\n        uid: instance.uid,\n        props,\n        states: data,\n        translateItem,\n      })\n    })\n\n    onUnmounted(() => {\n      carouselContext.removeItem(instance.uid)\n    })\n\n    return {\n      namespace,\n      data,\n      itemStyle,\n      translateItem,\n      type: carouselContext.type,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAgCA,MAAM,aAAa;AACnB,MAAM,iBAAiB;AACvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,EAAE,cAAc,aAAa,eAAe;AAGlD,UAAM,kBAAkB,OAAO,kBAAkB;AAEjD,UAAM,WAAW;AACjB,QAAI,CAAC,iBAAiB;AACpB,gBACE,gBACA,uDACF;AAAA;AAGF,QAAI,CAAC,UAAU;AACb,gBACE,gBACA,sDACF;AAAA;AAIF,UAAM,OAAO,SAA6B;AAAA,MACxC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,KACZ;AAGD,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,gBAAgB;AAAA,KACxB;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,gBACJ,gBAAgB,UAAU,aAAa,eAAe;AACxD,YAAM,QAAQ,GAAG,iBAAiB,KAAK,YAAY,gBAAgB,yBAAyB,KAAK;AACjG,YAAM,QAAQ;AAAA,QACZ,WAAW;AAAA,QACX,OAAO,gBAAgB,aAAa,QAAQ,OAAO,WAAW,OAAO,gBAAgB,UAAU,CAAC,IAAI,gBAAgB,iBAAiB;AAAA;AAEvI,aAAO;AAAA,KACR;AAID,0BAAsB,OAAe,aAAqB,QAAgB;AACxE,UAAI,gBAAgB,KAAK,UAAU,SAAS,GAAG;AAC7C,eAAO;AAAA,iBACE,gBAAgB,SAAS,KAAK,UAAU,GAAG;AACpD,eAAO;AAAA,iBACE,QAAQ,cAAc,KAAK,cAAc,SAAS,SAAS,GAAG;AACvE,eAAO,SAAS;AAAA,iBACP,QAAQ,cAAc,KAAK,QAAQ,eAAe,SAAS,GAAG;AACvE,eAAO;AAAA;AAET,aAAO;AAAA;AAGT,+BAA2B,OAAe,aAAqB;AAC7D,YAAM;AACN;AACE,eACG;AAAgE;AAGnE;AAA2C;AAE3C;AAA0C;AAC5C;AAGF;AACE;AACA;AAA2B;AAG7B;AAOE;AACA;AACA,yBAAmB;AACjB;AAAoD,MACtD;AACA,mCAA6B;AAC3B;AAA+C,MACjD;AACA;AACE;AACE,oBACE;AACF,QACF;AACA;AACA;AACA,aAAK,8BAA8B;AACnC,aAAK;AAA0B,aAC1B;AACL,YAAI;AACF;AACA,2BAAiB;AAAA,eACZ;AACL,eAAK,SAAS;AACd;AACA,eAAK;AAAwD;AAC/D;AAEF;AAAa;AAGf;AACE;AACE;AAGA;AAAmC;AACrC;AAIF;AACE;AAAwB,aACjB;AAAS;AACd,QACA;AAAQ,QACR;AAAA;AACD;AAGH;AACE;AAAuC,IACzC;AAEA;AAAO,MACL;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAsB,MACtB;AAAA;AACF;AAEJ;;;AAvKQ;AAlBE;AAAU;;AAA6C;AAA0C;AAAyC,8BAAkC;AAAA;AAAoC;;;AASrM;AACT;IAGA,cAAI;AAGL;aADC;AAAA;;AADc;eAGT;AAAA;;AAlBK;;;;;;;;"}