various-ui/es/components/carousel/multiple-view/src/composable.mjs.map

This is a test version of the Vue 3 component library

{"version":3,"file":"composable.mjs","sources":["../../../../../../packages/components/carousel/multiple-view/src/composable.ts"],"sourcesContent":["import { gsap } from \"gsap\";\r\nimport { SetupContext, computed, ref } from \"vue\";\r\nimport { UiCarouselMultipleViewProps, UiCarouselMultipleViewEmits } from \"../index\";\r\nimport { utility } from \"@various/utils\";\r\n\r\nexport const useComposable = (define: UiCarouselMultipleViewProps, emits: SetupContext<typeof UiCarouselMultipleViewEmits>[\"emit\"]) => {\r\n    //* 静态变量\r\n    const variable = {\r\n        delay: define.delay / 1000, //* 轮播图切换过渡的间隔（秒）\r\n        width: 0,\r\n        offset: 0,\r\n        delayUp: define.delay * 1.1, //* 轮播图切换间隔（毫秒）\r\n        observer: undefined as ResizeObserver | undefined,\r\n    };\r\n\r\n    //* 响应式变量\r\n    const refs = {\r\n        main: ref<HTMLDivElement>(), //* 轮播图组件的主体\r\n        controls: ref<boolean>(false), //* 轮播图组件控制器显示状态\r\n        boundary: ref<\"first\" | \"middle\" | \"last\">(\"first\"), //* 轮播图组件的边界状态  first | middle | last\r\n        autoTimer: ref<NodeJS.Timeout>(), //* 轮播图组件自动播放定时器\r\n        container: ref<HTMLDivElement>(), //* 轮播图组件列表的容器\r\n    };\r\n\r\n    //* 函数列表\r\n    const methods = {\r\n        //* 初始化函数\r\n        init: () => {\r\n            //* 获取模块容器失败则取消后续操作\r\n            if (!refs.main.value || !refs.container.value) return;\r\n            //* 初始化临时变量\r\n            if (refs.main.value.clientWidth < refs.container.value.clientWidth) {\r\n                refs.controls.value = true;\r\n                if (variable.offset > 0) {\r\n                    variable.offset = (refs.container.value.clientWidth * variable.offset) / variable.width;\r\n                    variable.width = refs.container.value.clientWidth;\r\n                    gsap.set(refs.container.value, { transform: `translate3d(${-1 * variable.offset}, 0, 0)` });\r\n                } else {\r\n                    variable.width = refs.container.value.clientWidth;\r\n                    gsap.set(refs.container.value, { transform: \"translate3d(0, 0, 0)\" });\r\n                }\r\n            } else {\r\n                refs.controls.value = false;\r\n                variable.offset = 0;\r\n                variable.width = refs.container.value.clientWidth;\r\n                gsap.set(refs.container.value, { transform: \"translate3d(0, 0, 0)\" });\r\n            }\r\n        },\r\n\r\n        //* 切换函数\r\n        switchCarousel: (number: number, _data?: any) => {\r\n            //* 检测是否满足运行条件\r\n            if (!refs.main.value || !refs.container.value || refs.autoTimer.value) return;\r\n\r\n            //* 初始化轮播滚动位置\r\n            let offset = variable.offset + number * refs.main.value.clientWidth;\r\n\r\n            //* 根据number为 1 or -1 进行滚动偏移计算\r\n            if (number == 1) {\r\n                //* 判断右侧滚动时是否存在右侧展示不完整内容\r\n                for (let i = 1; i < refs.container.value.children.length - 1; i++) {\r\n                    const currentNode = refs.container.value.children[i] as HTMLElement;\r\n                    const backNode = refs.container.value.children[i - 1] as HTMLElement;\r\n                    const backNodeRight = backNode ? backNode.offsetLeft + backNode.offsetWidth : 0;\r\n                    //* 判断当前右侧偏移距离在该节点中\r\n                    if (currentNode.offsetLeft < offset && currentNode.offsetLeft + currentNode.offsetWidth > offset) {\r\n                        //* 判断上一次右侧偏移举例是否在该节点中\r\n                        if (currentNode.offsetLeft <= variable.offset && currentNode.offsetLeft + currentNode.offsetWidth >= variable.offset) {\r\n                            //* 不做任何操作退出循环\r\n                            break;\r\n                        } else {\r\n                            //* 存在下一个节点则下一个节点左贴边否则当前节点右贴边并退出循环\r\n                            offset = currentNode.offsetLeft;\r\n                            break;\r\n                        }\r\n                    }\r\n\r\n                    if (backNodeRight <= offset && currentNode.offsetLeft >= offset) {\r\n                        //* 存在下一个节点则下一个节点左贴边否则当前节点右贴边并退出循环\r\n                        offset = currentNode.offsetLeft;\r\n                        break;\r\n                    }\r\n                }\r\n            } else {\r\n                //* 判断左侧滚动时是否存在左侧展示不完整内容\r\n                for (let i = 0; i < refs.container.value.children.length; i++) {\r\n                    const currentNode = refs.container.value.children[i] as HTMLElement;\r\n                    const nextNode = refs.container.value.children[i + 1] as HTMLElement;\r\n                    const nextNodeLeft = nextNode.offsetLeft || refs.container.value.clientWidth;\r\n                    const offsetRight = offset + refs.main.value.clientWidth;\r\n                    //* 判断当前右侧偏移距离在该节点中\r\n                    if (currentNode.offsetLeft < offsetRight && currentNode.offsetLeft + currentNode.offsetWidth > offsetRight) {\r\n                        const offsetNextRight = variable.offset + refs.main.value.clientWidth;\r\n                        //* 判断上一次右侧偏移举例是否在该节点中\r\n                        if (currentNode.offsetLeft <= offsetNextRight && currentNode.offsetLeft + currentNode.offsetWidth >= offsetNextRight) {\r\n                            //* 不做任何操作退出循环\r\n                            break;\r\n                        } else {\r\n                            //* 当前节点右贴边并退出循环\r\n                            offset = currentNode.offsetLeft + currentNode.offsetWidth - refs.main.value.clientWidth;\r\n                            break;\r\n                        }\r\n                    }\r\n\r\n                    if (currentNode.offsetLeft + currentNode.offsetWidth <= offsetRight && nextNodeLeft >= offsetRight) {\r\n                        //* 当前节点右贴边并退出循环\r\n                        offset = currentNode.offsetLeft + currentNode.offsetWidth - refs.main.value.clientWidth;\r\n                        break;\r\n                    }\r\n                }\r\n            }\r\n\r\n            //* 判断是否左侧贴边\r\n            if (offset <= 0) {\r\n                offset = 0;\r\n                refs.boundary.value = \"first\";\r\n            } else if (offset + refs.main.value.clientWidth >= refs.container.value.clientWidth) {\r\n                //* 判断是否右侧贴边\r\n                offset = (refs.container.value.clientWidth / refs.main.value.clientWidth - 1) * refs.main.value.clientWidth;\r\n                refs.boundary.value = \"last\";\r\n            } else {\r\n                refs.boundary.value = \"middle\";\r\n            }\r\n\r\n            //* 执行脚本\r\n            variable.offset = offset;\r\n            gsap.to(refs.container.value, {\r\n                duration: variable.delay,\r\n                transform: `translate3d(${variable.offset * -1}px, 0, 0)`,\r\n            });\r\n\r\n            //* 计时器\r\n            refs.autoTimer.value = setTimeout(() => {\r\n                refs.autoTimer.value = undefined;\r\n            }, variable.delayUp);\r\n        },\r\n\r\n        //* 切换函数（上）\r\n        switchBack: () => methods.switchCarousel(-1),\r\n\r\n        //* 切换函数（下）\r\n        switchNext: () => methods.switchCarousel(1),\r\n    };\r\n\r\n    //* 计算属性\r\n    const computeds = {\r\n        //* 主体类名\r\n        className: computed(() => `ui-mv-carousel-${define.arrow}`),\r\n        style: computed(() => {\r\n            //* 初始化返回列表\r\n            const result: { [name: string]: any } = {};\r\n\r\n            //* 宽度处理\r\n            if (define.width) {\r\n                if (utility.isNumber(define.width)) result.width = define.width + \"px\";\r\n                else result.width = define.width;\r\n            }\r\n\r\n            //* 高度处理\r\n            if (define.height) {\r\n                if (utility.isNumber(define.height)) result.height = define.height + \"px\";\r\n                else result.height = define.height;\r\n            }\r\n\r\n            return result;\r\n        }),\r\n\r\n        //* 是否显示左侧控制按钮\r\n        isFirstControl: computed(() => {\r\n            return define.arrow != \"never\" && refs.controls.value && refs.boundary.value != \"first\";\r\n        }),\r\n\r\n        //* 是否显示右侧控制按钮\r\n        isLastControl: computed(() => {\r\n            return define.arrow != \"never\" && refs.controls.value && refs.boundary.value != \"last\";\r\n        }),\r\n    };\r\n\r\n    return { refs, methods, computeds, variable };\r\n};\r\n"],"names":["utility.isNumber"],"mappings":"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"}