@soei/flyweight 0.0.10 → 0.0.11

package/package.json

@@ -2,23 +2,24 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
-  "main": "dist/Flyweight.cjs",
-  "module": "dist/Flyweight.js",
+  "main": "Flyweight.cjs",
+  "module": "Flyweight.js",
   "files": [
-    "dist/Flyweight.cjs",
-    "dist/Flyweight.js",
-    "dist/style.css",
+    "Flyweight.cjs",
+    "Flyweight.js",
+    "style.css",
     "src/Flyweight.vue"
   ],
+  "homepage": "https://alwbg.github.io",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@soei/util": "^1.1.1"
+    "@soei/util": "^1.1.8"
   },
   "keywords": [
     "Flyweight",

package/src/Flyweight.vue

@@ -1,329 +0,0 @@
-<template>
-    <div ref="flyweight" class="flyweight" :class="{
-        'flyweight-active': actice
-    }" :style="{
-        '--width': realW + 'px',
-        '--height': realH + 'px'
-    }" @scroll="scroll">
-        <div class="flyweight-all" :style="{
-        '--flyweight-height': Height + 'px'
-    }">
-            <div v-for="(item, index) in flyweights" :key="index" :data="item.top" :style="{
-        top: item.top + 'px',
-        left: item.left + 'px',
-    }">
-                <slot :data="item.data" :index="item.index"></slot>
-            </div>
-        </div>
-        <slot name="end" v-if="flyweights.length"></slot>
-    </div>
-</template>
-
-<script>
-import { each, picker, runer, isArray } from '@soei/util';
-let isNil = (data) => {
-    return data == null || data == undefined;
-}
-
-let Rs = /(\d+|[+\-\*/]|%)/g;
-
-let math = {
-    '+': (a, b) => a + b,
-    '-': (a, b) => a - b,
-    '*': (a, b) => a * b,
-    '/': (a, b) => a / b,
-    '%': (a, b, c) => parseFloat(a) / 100 * c,
-}
-/* 从左到右顺序计算, 100% - 100px px单位会被忽略 */
-let computer = (W, width) => {
-    let data;
-    if (data = runer('match', W, Rs)) {
-        let mark = data.length, re, T = 0, op, args = [];
-        while (mark--) {
-            T = data.shift();
-            if (T in math) {
-                re && args.push(re);
-                if (T === '%') args.length = 2;
-                op = T;
-            } else {
-                +T && args.push(+T)
-            }
-            if (args.length == 2) {
-                args.push(width);
-                re = math[op].apply(null, args);
-                args.length = 0;
-            }
-        }
-        if (!(+re)) re = +args.pop()
-        W = re >> 0;
-    }
-    return W;
-}
-let Log = (...args) => {
-    console.info('::::FLYWEIGHT', ...args);
-}
-export default {
-    name: 'Flyweight',
-    props: {
-        flys: {
-            type: Array,
-            default: () => []
-        },
-        width: {
-            type: Number,
-            default: 0
-        },
-        height: {
-            type: Number,
-            default: 100
-        },
-        offset: {
-            type: Array,
-            default: () => [0, 0]
-        },
-        lazy: {
-            type: Number,
-            default: 100
-        },
-        view: {
-            type: Object,
-            default: () => (null)
-        },
-        index: {
-            type: Number,
-            default: 0
-        },
-        top: {
-            type: Number,
-            default: false
-        },
-        left: {
-            type: Number,
-            default: false
-        },
-        auto: {
-            type: [Boolean, String],
-            default: false
-        },
-        space: {
-            type: Object,
-            default: () => (null)
-        }
-    },
-    computed: {
-        flyweight() {
-            return this.$refs.flyweight;
-        }
-    },
-    data() {
-        return {
-            flyweights: [],
-            actice: false,
-            Height: null,
-            column: 1,
-            row: 1,
-            fwheight: 10,
-
-            count: 0,
-            task: [],
-            realW: 0,
-            realH: 0
-        }
-    },
-    watch: {
-        flys(data) {
-            this.count = data.length;
-            this.re();
-            let task = this.task.shift();
-            if (task) {
-                this.$nextTick(() => {
-                    this.setview(task);
-                })
-            }
-        },
-        view: {
-            handler(data) {
-                this.setview(data)
-            },
-            immediate: true
-        },
-        index(index) {
-            this.setindex(index);
-        },
-        top(top) {
-            this.flyweight.scrollTop = top;
-        },
-        left(left) {
-            this.flyweight.scrollLeft = left;
-        }
-    },
-    mounted() {
-        this.flyweights = [];
-        this.$set || (this.$set = (list, index, value) => {
-            list[index] = value;
-        })
-        this.setindex(this.index);
-        try {
-            const resizeObserver = new ResizeObserver(() => {
-                this.re();
-                this.$emit('resize');
-                // runer('dispatchEvent', window, new Event('resize', { view: window, bubbles: true, cancelable: true }));
-            });
-            resizeObserver.observe(this.flyweight);
-        } catch (error) {
-            Log(error);
-        }
-    },
-    methods: {
-        trigger(key, data) {
-            this.lazyrun(() => {
-                if (!isArray(key)) key = [[key, data]];
-                each(key, (k, v) => {
-                    this.$emit(v[0], isNil(v[1]) ? true : v[1]);
-                })
-            });
-        },
-        cheackflys(data) {
-            let length = this.flys.length;
-            if (!length) {
-                data && this.task.push(data);
-                return true;
-            }
-        },
-        setview(data) {
-            runer([this.cheackflys, (data) => {
-                data = data || {};
-                let index = data.index || each(this.flys, (k, v, attr, value) => {
-                    if (v[attr] == value) return k;
-                }, data.picker, data.id);
-
-                isNil(index) || this.setindex(index);
-            }], this, data)
-        },
-        setindex(index) {
-            runer([this.cheackflys, ({ index }) => {
-                this.$nextTick(() => {
-                    let line = index / this.column >> 0;
-                    let height = this.fwheight;
-                    let first = this.flyweight.scrollTop / height >> 0;
-                    let offset = first + this.row - line - 1;
-                    if (offset > 0) return;
-                    this.flyweight.scrollTop = line * height;
-
-                    this.scroll()
-                })
-            }], this, { index: index })
-        },
-        lazyrun(back, time) {
-            clearTimeout(this.time);
-            this.time = setTimeout(() => {
-                runer(back);
-            }, time || this.lazy);
-        },
-        run(e) {
-            let position = picker(e.target, 'scrollTop=>top');
-            each(this.flyweights, (k, v, offset, row, column, first, index, i) => {
-                offset = k / column >> 0;
-                index = offset + row * (
-                    /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-                    +(offset < first % row)
-                    /* 计算轮数, row的倍数 */
-                    + (first / row >> 0)
-                );
-                i = index * column + k % column;
-
-                if (i >= this.count) {
-                    this.trigger('onend');
-                    return /* true */;
-                }
-                v.index = index;
-                v.top = index * this.fwheight;
-                v.data = this.flys[i];
-            },
-                null,
-                this.row,
-                this.column,
-                /* 显示区域第一行的索引 */
-                position.top / this.fwheight >> 0
-            )
-        },
-        scroll(e) {
-            this.run(e || { target: this.flyweight });
-        },
-        re() {
-            let size = this.count || this.flys.length;
-            let fws = this.flyweights;
-            if (!size) return fws.length = size;
-            this.count = size;
-            let flyweight = this.flyweight;
-            let wh = picker(flyweight, 'clientHeight=>height,clientWidth=>width');
-            this.$nextTick(() => {
-                let auto = this.auto === true;
-                let [x, y] = this.offset, W = wh.width, H = wh.height;
-                let width = (computer(this.width, W) || W) + x;
-                let height = computer(this.height, H) + y/* 偏移量填充宽度 */;
-                this.realW = width - x;
-                this.realH = height - y/* 实际高度减掉偏移量 */;
-                let column = (W / width >> 0) || 1,
-                    row = H / height >> 0;
-                this.row = row + 2/* 上下各一行补位 */;
-                this.column = column;
-                this.fwheight = height;
-                let offset = W % width;
-                /* 偏移量 */
-                let margin = offset / (column - 1 * +!auto) >> 0;
-                if (auto) {
-                    width = this.realW = (W / column >> 0) - x;
-                    margin = x;
-                }
-                /* 总高度 */
-                this.Height = Math.ceil(size / column) * height;
-                /* 计算数量 */
-                let count = Math.min(size, column * this.row),
-                    length = count - 1,
-                    index,
-                    fly;
-                while (count-- > 0) {
-                    index = length - count;
-                    fly = this.flys[index];
-                    flyweight = fws[index];
-                    row = index / column >> 0;
-                    this.$set(fws, index, {
-                        data: fly,
-                        top: row * height,
-                        left: (index % column) * (width + margin),
-                        index: row
-                    })
-                }
-                fws.length = length + 1;
-                let triggers = [];
-                if (H / height > length) triggers.push(['onend']);
-                this.scroll();
-                /* 计算占用空间 */
-                triggers.push(['update:space', { row: (length / column >> 0) + 1, column: column }]);
-
-                this.trigger(triggers);
-            });
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.flyweight {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    position: relative;
-
-    .flyweight-all {
-        height: var(--flyweight-height);
-
-        &>* {
-            width: calc(var(--width));
-            height: var(--height);
-            position: absolute;
-        }
-    }
-}
-</style>