mealcomes/dist/es/virtual-list-CiKIwcIK.mjs.map

MealComes 用于学习前端的组件库

{"version":3,"file":"virtual-list-CiKIwcIK.mjs","sources":["../../../../packages/components/virtual-list/src/virtual-list.tsx","../../../../packages/components/virtual-list/index.ts"],"sourcesContent":["import {\n    computed,\n    defineComponent,\n    onMounted,\n    reactive,\n    ref,\n    watch\n} from 'vue';\nimport type { PropType } from 'vue';\nimport { createNamespace } from '@mealcomes/utils';\nimport type { ExtractPropTypes } from 'vue';\nimport type { TreeNode } from '../../tree';\n\n/**\n * virtual 组件 props\n */\nexport const virtualProps = {\n    /**\n     * 每一行的高度\n     */\n    size: {\n        type: Number,\n        default: 27\n    },\n    /**\n     * 可视窗口展示的数据条数\n     */\n    remain: {\n        type: Number,\n        default: 8\n    },\n    /**\n     * 数据\n     */\n    items: {\n        type: Array as PropType<TreeNode[]>,\n        default: () => []\n    }\n} as const;\n\n/**\n * virtual 组件 props 类型\n */\nexport type VirtualProps = ExtractPropTypes<typeof virtualProps>;\n\nexport default defineComponent({\n    name: 'mc-virtual-list',\n    props: virtualProps,\n    setup(props: VirtualProps, { slots }) {\n        const bem = createNamespace('virtual-list');\n        const wrapperRef = ref<HTMLElement>();\n        const barRef = ref<HTMLElement>();\n        const state = reactive({\n            start: 0,\n            end: props.remain\n        });\n        const prev = computed(() => {\n            return Math.min(state.start, props.remain);\n        });\n        const next = computed(() => {\n            return Math.min(props.items.length - state.end, props.remain);\n        });\n        const visibleData = computed(() =>\n            props.items.slice(state.start - prev.value, state.end! + next.value)\n        );\n        const offset = ref(0);\n\n        let ticking = false;\n        // 根据当前滚动的距离计算往下了多少数据\n        const handleScroll = () => {\n            if (!ticking) {\n                requestAnimationFrame(() => {\n                    const scrollTop = wrapperRef.value!.scrollTop;\n                    state.start = Math.floor(scrollTop / props.size);\n                    state.end = state.start + props.remain;\n                    offset.value =\n                        state.start * props.size - props.size * prev.value;\n                    ticking = false;\n                });\n                ticking = true;\n            }\n        };\n\n        const setHeight = () => {\n            wrapperRef.value!.style.height = props.remain * props.size + 'px';\n            barRef.value!.style.height = props.items.length * props.size + 'px';\n        };\n\n        // 监听总的items, 因为如果展开的话, items 的长度会改变\n        watch(() => props.items, setHeight);\n\n        onMounted(() => {\n            setHeight();\n        });\n        return () => {\n            return (\n                <div class={bem.b()} ref={wrapperRef} onScroll={handleScroll}>\n                    {/* 模拟总长度, 撑开滚动条 */}\n                    <div class={bem.e('scroll-bar')} ref={barRef}></div>\n                    {/* 更新列表的显示区域, 由于向下滚动时整个会往下, \n                    所以 list 也需要往下偏移, 保证 list 始终处于可见视图 */}\n                    <div\n                        class={bem.e('scroll-list')}\n                        style={{\n                            transform: `translate3d(0, ${offset.value}px, 0)`\n                        }}\n                    >\n                        {visibleData.value?.map(node =>\n                            slots.default!({ node })\n                        )}\n                    </div>\n                </div>\n            );\n        };\n    }\n});\n","import { withInstall } from '@mealcomes/utils';\nimport _Virtual from './src/virtual-list';\n\nconst Virtual = withInstall(_Virtual);\n\nexport default Virtual;\n\ndeclare module 'vue' {\n    export interface GlobalComponents {\n        McVirtual: typeof Virtual;\n    }\n}\n"],"names":["virtualProps","size","type","Number","default","remain","items","Array","_Virtual","name","props","setup","slots","bem","createNamespace","wrapperRef","ref","barRef","state","reactive","start","end","prev","computed","Math","min","next","length","visibleData","slice","value","offset","ticking","handleScroll","requestAnimationFrame","scrollTop","floor","setHeight","style","height","watch","onMounted","_createVNode","b","e","transform","map","node","Virtual","withInstall"],"mappings":";;AAgBO,MAAMA,IAAe;AAAA;AAAA;AAAA;AAAA,EAIxBC,MAAM;AAAA,IACFC,MAAMC;AAAAA,IACNC,SAAS;AAAA;;;;EAKbC,QAAQ;AAAA,IACJH,MAAMC;AAAAA,IACNC,SAAS;AAAA;;;;EAKbE,OAAO;AAAA,IACHJ,MAAMK;AAAAA,IACNH,SAASA,MAAM,CAAA;AAAA,EACnB;AACJ,GAOAI,sBAA+B;AAAA,EAC3BC,MAAM;AAAA,EACNC,OAAOV;AAAAA,EACPW,MAAMD,GAAqB;AAAA,IAAEE,OAAAA;AAAAA,EAAM,GAAG;AAClC,UAAMC,IAAMC,EAAgB,cAAc,GACpCC,IAAaC,EAAG,GAChBC,IAASD,EAAG,GACZE,IAAQC,EAAS;AAAA,MACnBC,OAAO;AAAA,MACPC,KAAKX,EAAML;AAAAA,IACf,CAAC,GACKiB,IAAOC,EAAS,MACXC,KAAKC,IAAIP,EAAME,OAAOV,EAAML,MAAM,CAC5C,GACKqB,IAAOH,EAAS,MACXC,KAAKC,IAAIf,EAAMJ,MAAMqB,SAAST,EAAMG,KAAKX,EAAML,MAAM,CAC/D,GACKuB,IAAcL,EAAS,MACzBb,EAAMJ,MAAMuB,MAAMX,EAAME,QAAQE,EAAKQ,OAAOZ,EAAMG,MAAOK,EAAKI,KAAK,CACvE,GACMC,IAASf,EAAI,CAAC;AAEpB,QAAIgB,IAAU;AAEd,UAAMC,IAAeA,MAAM;AACvB,MAAKD,MACDE,sBAAsB,MAAM;AACxB,cAAMC,IAAYpB,EAAWe,MAAOK;AACpCjB,QAAAA,EAAME,QAAQI,KAAKY,MAAMD,IAAYzB,EAAMT,IAAI,GAC/CiB,EAAMG,MAAMH,EAAME,QAAQV,EAAML,QAChC0B,EAAOD,QACHZ,EAAME,QAAQV,EAAMT,OAAOS,EAAMT,OAAOqB,EAAKQ,OACjDE,IAAU;AAAA,MACd,CAAC,GACDA,IAAU;AAAA,IAElB,GAEMK,IAAYA,MAAM;AACpBtB,MAAAA,EAAWe,MAAOQ,MAAMC,SAAS7B,EAAML,SAASK,EAAMT,OAAO,MAC7DgB,EAAOa,MAAOQ,MAAMC,SAAS7B,EAAMJ,MAAMqB,SAASjB,EAAMT,OAAO;AAAA,IACnE;AAGAuC,WAAAA,EAAM,MAAM9B,EAAMJ,OAAO+B,CAAS,GAElCI,EAAU,MAAM;AACZJ,MAAAA,EAAS;AAAA,IACb,CAAC,GACM,MAAM;;AACT,aAAAK,EAAA,OAAA;AAAA,QAAA,OACgB7B,EAAI8B,EAAC;AAAA,QAAE,KAAO5B;AAAAA,QAAU,UAAYkB;AAAAA,MAAY,GAAA,CAAAS,EAAA,OAAA;AAAA,QAAA,OAE5C7B,EAAI+B,EAAE,YAAY;AAAA,QAAC,KAAO3B;AAAAA,MAAM,GAAA,IAAA,GAAAyB,EAAA,OAAA;AAAA,QAAA,OAIjC7B,EAAI+B,EAAE,aAAa;AAAA,QAAC,OACpB;AAAA,UACHC,WAAW,kBAAkBd,EAAOD,KAAK;AAAA,QAC7C;AAAA,SAAC,EAEAF,IAAAA,EAAYE,UAAZF,gBAAAA,EAAmBkB,IAAIC,CAAAA,MACpBnC,EAAMR,QAAS;AAAA,QAAE2C,MAAAA;AAAAA,MAAK,CAAC,EAC1B,CAAA,CAAA,CAAA;AAAA,IAIjB;AAAA,EACJ;AACJ,CAAC,GChHKC,IAAUC,EAAYzC,CAAQ;"}