ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-carousel-item/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-carousel-item/index.vue"],"sourcesContent":["<template>\r\n  <div\r\n    :class=\"wrapperClasses\"\r\n    :style=\"wrapperStyles\"\r\n    ref=\"carouselItem\"\r\n    @click=\"handleItemClick\"\r\n    v-show=\"data.ready\"\r\n  >\r\n    <!-- mask -->\r\n    <template v-if=\"isCardType\">\r\n      <div v-show=\"!data.active\" :class=\"`${prefixCls}--mask`\"></div>\r\n    </template>\r\n    <!-- slot -->\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  reactive,\r\n  computed,\r\n  inject,\r\n  onMounted,\r\n  getCurrentInstance,\r\n  onUnmounted,\r\n  ref,\r\n} from 'vue';\r\n\r\nimport { isUndefined } from '../../utils/helpers';\r\n\r\n// type\r\nimport {\r\n  CarouselContextKey,\r\n  Props,\r\n  Data,\r\n  WrapperStyles,\r\n} from './types/carousel-item';\r\n\r\nconst prefixCls = 'ivue-carousel-item';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 幻灯片的名字，可用作 setActiveItem 的参数\r\n     *\r\n     * @type {String | Number}\r\n     */\r\n    name: {\r\n      type: [String, Number],\r\n    },\r\n    /**\r\n     * 该幻灯片所对应指示器的文本\r\n     *\r\n     * @type {String | Number}\r\n     */\r\n    label: {\r\n      type: [String, Number],\r\n      default: '',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // instance\r\n    const vm = getCurrentInstance();\r\n\r\n    // dom\r\n    const carouselItem = ref<HTMLElement>();\r\n\r\n    // inject\r\n    const {\r\n      // dom\r\n      wrapper,\r\n\r\n      // data\r\n      items,\r\n      loop,\r\n      cardScale,\r\n\r\n      // computed\r\n      isVertical,\r\n      isCardType,\r\n\r\n      // methods\r\n      addItem,\r\n      removeItem,\r\n      setContentHeight,\r\n      setActiveItem,\r\n    } = inject(CarouselContextKey);\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 是否激活\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      active: false,\r\n      /**\r\n       * 执行动画\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      animating: false,\r\n      /**\r\n       * translate\r\n       *\r\n       * @type {Number}\r\n       */\r\n      translate: 0,\r\n      /**\r\n       * 缩放\r\n       *\r\n       * @type {Number}\r\n       */\r\n      scale: 1,\r\n      /**\r\n       * 是否可以渲染\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      ready: false,\r\n      /**\r\n       * 是否可以点击下一个\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      inStage: false,\r\n      /**\r\n       * hover\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      hover: false,\r\n      /**\r\n       * 选项位置\r\n       *\r\n       * @type {Number}\r\n       */\r\n      zIndex: 0,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapperClasses = computed(() => {\r\n      return [\r\n        prefixCls,\r\n        {\r\n          // 激活\r\n          [`${prefixCls}--active`]: data.active,\r\n          // 切换动画\r\n          [`${prefixCls}--animating`]: data.animating,\r\n          // 卡片类型\r\n          [`${prefixCls}--card`]: isCardType.value,\r\n          // 卡片竖向\r\n          [`${prefixCls}--card__vertical`]:\r\n            isCardType.value && isVertical.value,\r\n          // 是否可以点击下一个\r\n          [`${prefixCls}--in-stage`]: data.inStage,\r\n          // hover\r\n          [`${prefixCls}--hover`]: data.hover,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapperStyles = computed(() => {\r\n      const translateType = `translate${isVertical.value ? 'Y' : 'X'}`;\r\n      const _translate = `${translateType}(${data.translate}px)`;\r\n      const _scale = `scale(${data.scale})`;\r\n\r\n      const transform = [_translate, _scale].join(' ');\r\n\r\n      const style: WrapperStyles = {\r\n        transform,\r\n      };\r\n\r\n      // 是卡片 有zIndex\r\n      if (isCardType.value && data.zIndex) {\r\n        style.zIndex = data.zIndex;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 移动选项\r\n    const translateItem = (\r\n      index: number,\r\n      activeIndex: number,\r\n      oldIndex?: number\r\n    ) => {\r\n      const _isCardType = isCardType.value;\r\n      const _isVertical = isVertical.value;\r\n\r\n      const itemsLength = items.value.length ?? Number.NaN;\r\n\r\n      // 是否激活\r\n      const isActive = index === activeIndex;\r\n\r\n      // 不是卡片 & 有旧的index\r\n      if (!_isCardType && !isUndefined(oldIndex)) {\r\n        data.animating = isActive || index === oldIndex;\r\n      }\r\n\r\n      // 没有激活 & 选项长度 > 2 & 开启循环\r\n      if (!isActive && itemsLength > 2 && loop) {\r\n        index = processIndex(index, activeIndex, itemsLength);\r\n      }\r\n\r\n      // 设置激活的选项\r\n      data.active = isActive;\r\n\r\n      // 是卡片\r\n      if (_isCardType) {\r\n        // 是否可以点击下一个\r\n        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;\r\n\r\n        // 偏移位置\r\n        data.translate = calcCardTranslate(index, activeIndex);\r\n\r\n        // 不是当前激活的选项\r\n        if (index !== activeIndex) {\r\n          // 当前是否有 zIndex\r\n          if (data.zIndex) {\r\n            data.zIndex -= 1;\r\n          }\r\n\r\n          // 右选项\r\n          if (data.translate > 0) {\r\n            data.zIndex = data.zIndex || 2;\r\n          }\r\n\r\n          // 左选项\r\n          if (data.translate < 0) {\r\n            data.zIndex = data.zIndex || 3;\r\n          }\r\n        }\r\n        // 当前激活的选项清除 zIndex\r\n        else {\r\n          data.zIndex = 0;\r\n        }\r\n\r\n        // 是否可以点击下一个 清除zIndex\r\n        if (!data.inStage) {\r\n          data.zIndex = 0;\r\n        }\r\n\r\n        // 缩放大小\r\n        data.scale = isActive ? 1 : cardScale;\r\n      }\r\n      // 不是卡片\r\n      else {\r\n        // 偏移位置\r\n        data.translate = calcTranslate(index, activeIndex, _isVertical);\r\n      }\r\n\r\n      // 是否可以渲染\r\n      data.ready = true;\r\n\r\n      // 获取元素的高度\r\n      if (isActive && carouselItem.value) {\r\n        // 竖向 | 横向\r\n        const height = isVertical.value\r\n          ? carouselItem.value.offsetWidth\r\n          : carouselItem.value.offsetHeight;\r\n\r\n        setContentHeight(height);\r\n      }\r\n    };\r\n\r\n    // 选项进度索引\r\n    const processIndex = (\r\n      index: number,\r\n      activeIndex: number,\r\n      length: number\r\n    ) => {\r\n      // 最后一个选项的索引\r\n      const lastItemIndex = length - 1;\r\n      // 上一个选项索引\r\n      const prevItemIndex = activeIndex - 1;\r\n      // 下一个选项索引\r\n      const nextItemIndex = activeIndex + 1;\r\n      // 中间的索引\r\n      const halfItemIndex = length / 2;\r\n\r\n      // 激活第一个索引 && 最后一个选项\r\n      if (activeIndex === 0 && index === lastItemIndex) {\r\n        return -1;\r\n      }\r\n      // 激活的索引 === 最后一个选项的索引 && 第一个选项\r\n      else if (activeIndex === lastItemIndex && index === 0) {\r\n        return length;\r\n      }\r\n      // 选项的索引小于 上一个选项索引 && 激活的选项 - 当前选项的索引 >= 中间索引 -> 向右选择数组\r\n      // [0,1,2,0,1,2]\r\n      else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\r\n        return length + 1;\r\n      }\r\n      // 当前选项索引 > 下一个选项索引 && 当前选项的索引 - 激活的索引 >= 中间值 -> 向左选择数组\r\n      else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\r\n        return -2;\r\n      }\r\n\r\n      return index;\r\n    };\r\n\r\n    // 计算 translate 位置\r\n    const calcTranslate = (\r\n      index: number,\r\n      activeIndex: number,\r\n      isVertical: boolean\r\n    ) => {\r\n      const wrapperEl = wrapper.value;\r\n\r\n      if (!wrapperEl) {\r\n        return 0;\r\n      }\r\n\r\n      // 父级宽度\r\n      let parentOffset = 0;\r\n\r\n      // 垂直\r\n      if (isVertical) {\r\n        parentOffset = wrapperEl.offsetHeight;\r\n      }\r\n      // 横向\r\n      else {\r\n        parentOffset = wrapperEl.offsetWidth;\r\n      }\r\n\r\n      // 位置 * (当前索引 - 激活的索引)\r\n      return parentOffset * (index - activeIndex);\r\n    };\r\n\r\n    // 计算 卡片类型 translate 位置\r\n    const calcCardTranslate = (index: number, activeIndex: number) => {\r\n      // 父级宽度\r\n      let parentOffset = 0;\r\n\r\n      // 垂直\r\n      if (isVertical.value) {\r\n        parentOffset = wrapper.value?.offsetHeight || 0;\r\n      }\r\n      // 横向\r\n      else {\r\n        parentOffset = wrapper.value?.offsetWidth || 0;\r\n      }\r\n\r\n      // 可以点击下一个\r\n      if (data.inStage) {\r\n        return (\r\n          (parentOffset * ((2 - cardScale) * (index - activeIndex) + 1)) / 4\r\n        );\r\n      }\r\n      // 当前选项下标 < 激活的索引 向右前进\r\n      else if (index < activeIndex) {\r\n        return (-(1 + cardScale) * parentOffset) / 4;\r\n      }\r\n      // 当前选项下标 > 激活的索引 向左前进\r\n      else {\r\n        return ((3 + cardScale) * parentOffset) / 4;\r\n      }\r\n    };\r\n\r\n    // methods\r\n\r\n    // 点击选项\r\n    const handleItemClick = () => {\r\n      if (wrapper.value && isCardType.value) {\r\n        // 当前点击的index\r\n        const index = items.value.findIndex(({ uid }) => {\r\n          return uid === vm.uid;\r\n        });\r\n\r\n        // 激活选项\r\n        setActiveItem(index);\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      addItem({\r\n        props,\r\n        states: data,\r\n        uid: vm.uid,\r\n        translateItem,\r\n      });\r\n    });\r\n\r\n    // onUnmounted\r\n    onUnmounted(() => {\r\n      removeItem(vm.uid);\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // dom\r\n      carouselItem,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n      wrapperStyles,\r\n      isCardType,\r\n\r\n      // methods\r\n      handleItemClick,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_withDirectives","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createCommentVNode"],"mappings":";;;;AAEU,SAAA,YAAA,IAAE,EAAA,MAAA,EAAc,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAChB,EAAA,OAAAA,cAAA,EAAAC,SAAA,EAAe,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IACrB,KAAA,EAAIC,cAAc,CAAA,IAAA,CAAA,cAAA,CAAA;AAAA,IACjB,KAAA,EAAKC,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,IAAA,GAAA,EAAA,cAAA;AAAA,IAGN,OAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,GACG,EAAA;AAAA,IAAAC,mBAAA,QAAA,CAAA;AAAA,IACmB,KAAA,UAAA,GAAAL,cAAA,EAAAC,SAAK,EAAA,EAASC,mBAAA,KAAA,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,4BAA5B,CAAM,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GAAA;AAAA;KAE3B,CAAA,GACAG,kBAAa,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,IAAAA,mBAAA,QAAA,CAAA;AAAA,eAPL,IAAU,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,CAAA,GAAA;AAAA;;;;;;;"}