@soei/flyweight 0.0.2 → 0.0.3

package/README.md

@@ -1,7 +1,22 @@
 # 享元模式
 
+```html
+<div style="height:100px;width:300px;">
+  <!-- 确认父容器 宽 高 存在, 依赖父容器 `宽`, `高` 计算 -->
+  <s-flyweight ...></s-flyweight>
+</div>
+```
+
 ### 更新日志
 
+### `0.0.3`
+
+- #### 新增 `:top`
+
+  ```html
+  <s-flyweight :top="滚动高度"></s-flyweight>
+  ```
+
 ### `0.0.2`
 
 - #### 优化了 `Vue3` 的 `兼容` 问题

package/dist/Flyweight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@soei/util"),h=require("vue");const p=(e,t)=>{const i=e.__vccOpts||e;for(const[r,s]of t)i[r]=s;return i};let m=e=>e==null||e==null,x=(...e)=>{console.info("::::FLYWEIGHT",...e)};const k={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}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Height:null,column:1,row:1,fwheight:10,count:0,task:[]}},watch:{flys(e){this.count=e.length,this.re();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0},index(e){this.setindex(e)}},mounted(){this.flyweights=[],this.$set||(this.$set=(e,t,i)=>{e[t]=i}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){x(e)}},methods:{cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){f.runer([this.cheackflys,t=>{t=t||{};let i=t.index||f.each(this.flys,(r,s,n,l)=>{if(s[n]==l)return r},t.picker,t.id);m(i)||this.setindex(i)}],this,e)},setindex(e){f.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let i=t/this.column>>0,r=this.fwheight;(this.flyweight.scrollTop/r>>0)+this.row-i-1>0||(this.flyweight.scrollTop=i*r,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{f.runer(e)},t||this.lazy)},run(e){let t=f.picker(e.target,"scrollTop=>top");f.each(this.flyweights,(i,r,s,n,l,o,u,d)=>{if(s=i/l>>0,u=s+n*(+(s<o%n)+(o/n>>0)),d=u*l+i%l,d>=this.count){this.lazyrun(()=>this.$emit("onend",!0));return}r.index=u,r.top=r.index*this.fwheight,r.data=this.flys[d]},null,this.row,this.column,t.top/this.fwheight>>0)},scroll(e){this.run(e||{target:this.flyweight})},re(){let e=this.flyweight,t=f.picker(e,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[i,r]=this.offset,s=this.width;s==0&&(s=t.width);let n=s+i,l=this.height+r,o=t.width/n>>0,u=t.height/l>>0;this.row=u+2,this.column=o,this.fwheight=l;let d=t.width%n/(o-1)>>0;this.Height=Math.ceil(this.count/o)*l;let y=Math.min(this.count,o*this.row),a=y-1,c,g;for(;y-- >0;)c=a-y,g=this.flys[c],e=this.flyweights[c],this.$set(this.flyweights,c,{data:g,top:(c/o>>0)*l,left:c%o*(n+d),index:c/o>>0});this.flyweights.length=a+1,this.scroll()})}}};function _(e,t,i,r,s,n){return h.openBlock(),h.createElementBlock("div",{ref:"flyweight",class:h.normalizeClass(["flyweight",{"flyweight-active":s.actice}]),style:h.normalizeStyle({"--width":i.width?i.width+"px":"100%","--height":i.height+"px"}),onScroll:t[0]||(t[0]=(...l)=>n.scroll&&n.scroll(...l))},[h.createElementVNode("div",{class:"flyweight-all",style:h.normalizeStyle({"--flyweight-height":s.Height+"px"})},[(h.openBlock(!0),h.createElementBlock(h.Fragment,null,h.renderList(s.flyweights,(l,o)=>(h.openBlock(),h.createElementBlock("div",{key:o,style:h.normalizeStyle({top:l.top+"px",left:l.left+"px"})},[h.renderSlot(e.$slots,"default",{data:l.data,index:l.index},void 0,!0)],4))),128))],4),s.flyweights.length?h.renderSlot(e.$slots,"end",{key:0},void 0,!0):h.createCommentVNode("",!0)],38)}const w=p(k,[["render",_],["__scopeId","data-v-d96197a5"]]),v=[w],z={install(e){v.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=w;exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@soei/util"),h=require("vue");const p=(e,t)=>{const i=e.__vccOpts||e;for(const[r,l]of t)i[r]=l;return i};let m=e=>e==null||e==null,x=(...e)=>{console.info("::::FLYWEIGHT",...e)};const k={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:!1},left:{type:Number,default:!1}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Height:null,column:1,row:1,fwheight:10,count:0,task:[]}},watch:{flys(e){this.count=e.length,this.re();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0},index(e){this.setindex(e)},top(e){this.flyweight.scrollTop=e},left(e){this.flyweight.scrollLeft=e}},mounted(){this.flyweights=[],this.$set||(this.$set=(e,t,i)=>{e[t]=i}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){x(e)}},methods:{cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){c.runer([this.cheackflys,t=>{t=t||{};let i=t.index||c.each(this.flys,(r,l,n,s)=>{if(l[n]==s)return r},t.picker,t.id);m(i)||this.setindex(i)}],this,e)},setindex(e){c.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let i=t/this.column>>0,r=this.fwheight;(this.flyweight.scrollTop/r>>0)+this.row-i-1>0||(this.flyweight.scrollTop=i*r,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{c.runer(e)},t||this.lazy)},run(e){let t=c.picker(e.target,"scrollTop=>top");c.each(this.flyweights,(i,r,l,n,s,o,u,y)=>{if(l=i/s>>0,u=l+n*(+(l<o%n)+(o/n>>0)),y=u*s+i%s,y>=this.count){this.lazyrun(()=>this.$emit("onend",!0));return}r.index=u,r.top=r.index*this.fwheight,r.data=this.flys[y]},null,this.row,this.column,t.top/this.fwheight>>0)},scroll(e){this.run(e||{target:this.flyweight})},re(){let e=this.flyweight,t=c.picker(e,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[i,r]=this.offset,l=this.width;l==0&&(l=t.width);let n=l+i,s=this.height+r,o=t.width/n>>0,u=t.height/s>>0;this.row=u+2,this.column=o,this.fwheight=s;let y=t.width%n/(o-1)>>0;this.Height=Math.ceil(this.count/o)*s;let d=Math.min(this.count,o*this.row),a=d-1,f,g;for(;d-- >0;)f=a-d,g=this.flys[f],e=this.flyweights[f],this.$set(this.flyweights,f,{data:g,top:(f/o>>0)*s,left:f%o*(n+y),index:f/o>>0});this.flyweights.length=a+1,this.scroll()})}}};function _(e,t,i,r,l,n){return h.openBlock(),h.createElementBlock("div",{ref:"flyweight",class:h.normalizeClass(["flyweight",{"flyweight-active":l.actice}]),style:h.normalizeStyle({"--width":i.width?i.width+"px":"100%","--height":i.height+"px"}),onScroll:t[0]||(t[0]=(...s)=>n.scroll&&n.scroll(...s))},[h.createElementVNode("div",{class:"flyweight-all",style:h.normalizeStyle({"--flyweight-height":l.Height+"px"})},[(h.openBlock(!0),h.createElementBlock(h.Fragment,null,h.renderList(l.flyweights,(s,o)=>(h.openBlock(),h.createElementBlock("div",{key:o,style:h.normalizeStyle({top:s.top+"px",left:s.left+"px"})},[h.renderSlot(e.$slots,"default",{data:s.data,index:s.index},void 0,!0)],4))),128))],4),l.flyweights.length?h.renderSlot(e.$slots,"end",{key:0},void 0,!0):h.createCommentVNode("",!0)],38)}const w=p(k,[["render",_],["__scopeId","data-v-075d9b23"]]),v=[w],b={install(e){v.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=w;exports.default=b;

package/dist/Flyweight.js

@@ -1,5 +1,5 @@
-import { runer as d, each as m, picker as x } from "@soei/util";
-import { openBlock as y, createElementBlock as g, normalizeClass as k, normalizeStyle as w, createElementVNode as v, Fragment as z, renderList as b, renderSlot as _, createCommentVNode as T } from "vue";
+import { runer as y, each as m, picker as x } from "@soei/util";
+import { openBlock as d, createElementBlock as g, normalizeClass as k, normalizeStyle as w, createElementVNode as v, Fragment as b, renderList as z, renderSlot as _, createCommentVNode as T } from "vue";
 const N = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [l, s] of e)
@@ -39,6 +39,14 @@ const H = {
     index: {
       type: Number,
       default: 0
+    },
+    top: {
+      type: Number,
+      default: !1
+    },
+    left: {
+      type: Number,
+      default: !1
     }
   },
   computed: {
@@ -74,6 +82,12 @@ const H = {
     },
     index(t) {
       this.setindex(t);
+    },
+    top(t) {
+      this.flyweight.scrollTop = t;
+    },
+    left(t) {
+      this.flyweight.scrollLeft = t;
     }
   },
   mounted() {
@@ -94,17 +108,17 @@ const H = {
         return t && this.task.push(t), !0;
     },
     setview(t) {
-      d([this.cheackflys, (e) => {
+      y([this.cheackflys, (e) => {
         e = e || {};
-        let i = e.index || m(this.flys, (l, s, n, h) => {
-          if (s[n] == h)
+        let i = e.index || m(this.flys, (l, s, r, h) => {
+          if (s[r] == h)
             return l;
         }, e.picker, e.id);
         $(i) || this.setindex(i);
       }], this, t);
     },
     setindex(t) {
-      d([this.cheackflys, ({ index: e }) => {
+      y([this.cheackflys, ({ index: e }) => {
         this.$nextTick(() => {
           let i = e / this.column >> 0, l = this.fwheight;
           (this.flyweight.scrollTop / l >> 0) + this.row - i - 1 > 0 || (this.flyweight.scrollTop = i * l, this.scroll());
@@ -113,16 +127,16 @@ const H = {
     },
     lazyrun(t, e) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        d(t);
+        y(t);
       }, e || this.lazy);
     },
     run(t) {
       let e = x(t.target, "scrollTop=>top");
       m(
         this.flyweights,
-        (i, l, s, n, h, r, f, c) => {
-          if (s = i / h >> 0, f = s + n * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(s < r % n) + (r / n >> 0)), c = f * h + i % h, c >= this.count) {
+        (i, l, s, r, h, n, f, c) => {
+          if (s = i / h >> 0, f = s + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(s < n % r) + (n / r >> 0)), c = f * h + i % h, c >= this.count) {
             this.lazyrun(() => this.$emit("onend", !0));
             return;
           }
@@ -143,25 +157,25 @@ const H = {
       this.$nextTick(() => {
         let [i, l] = this.offset, s = this.width;
         s == 0 && (s = e.width);
-        let n = s + i, h = this.height + l, r = e.width / n >> 0, f = e.height / h >> 0;
-        this.row = f + 2, this.column = r, this.fwheight = h;
-        let c = e.width % n / (r - 1) >> 0;
-        this.Height = Math.ceil(this.count / r) * h;
-        let u = Math.min(this.count, r * this.row), a = u - 1, o, p;
+        let r = s + i, h = this.height + l, n = e.width / r >> 0, f = e.height / h >> 0;
+        this.row = f + 2, this.column = n, this.fwheight = h;
+        let c = e.width % r / (n - 1) >> 0;
+        this.Height = Math.ceil(this.count / n) * h;
+        let u = Math.min(this.count, n * this.row), a = u - 1, o, p;
         for (; u-- > 0; )
           o = a - u, p = this.flys[o], t = this.flyweights[o], this.$set(this.flyweights, o, {
             data: p,
-            top: (o / r >> 0) * h,
-            left: o % r * (n + c),
-            index: o / r >> 0
+            top: (o / n >> 0) * h,
+            left: o % n * (r + c),
+            index: o / n >> 0
           });
         this.flyweights.length = a + 1, this.scroll();
       });
     }
   }
 };
-function O(t, e, i, l, s, n) {
-  return y(), g("div", {
+function L(t, e, i, l, s, r) {
+  return d(), g("div", {
     ref: "flyweight",
     class: k(["flyweight", {
       "flyweight-active": s.actice
@@ -170,7 +184,7 @@ function O(t, e, i, l, s, n) {
       "--width": i.width ? i.width + "px" : "100%",
       "--height": i.height + "px"
     }),
-    onScroll: e[0] || (e[0] = (...h) => n.scroll && n.scroll(...h))
+    onScroll: e[0] || (e[0] = (...h) => r.scroll && r.scroll(...h))
   }, [
     v("div", {
       class: "flyweight-all",
@@ -178,8 +192,8 @@ function O(t, e, i, l, s, n) {
         "--flyweight-height": s.Height + "px"
       })
     }, [
-      (y(!0), g(z, null, b(s.flyweights, (h, r) => (y(), g("div", {
-        key: r,
+      (d(!0), g(b, null, z(s.flyweights, (h, n) => (d(), g("div", {
+        key: n,
         style: w({
           top: h.top + "px",
           left: h.left + "px"
@@ -194,14 +208,14 @@ function O(t, e, i, l, s, n) {
     s.flyweights.length ? _(t.$slots, "end", { key: 0 }, void 0, !0) : T("", !0)
   ], 38);
 }
-const E = /* @__PURE__ */ N(H, [["render", O], ["__scopeId", "data-v-d96197a5"]]), L = [E], S = {
+const O = /* @__PURE__ */ N(H, [["render", L], ["__scopeId", "data-v-075d9b23"]]), E = [O], S = {
   install(t) {
-    L.forEach((e) => {
+    E.forEach((e) => {
       t.component("s-" + e.name.toLowerCase(), e);
     });
   }
 };
 export {
-  E as Flyweight,
+  O as Flyweight,
   S as default
 };

package/dist/style.css

@@ -1 +1 @@
-.flyweight[data-v-d96197a5]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-d96197a5]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-d96197a5]>*{width:var(--width);height:var(--height);position:absolute}
+.flyweight[data-v-075d9b23]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-075d9b23]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-075d9b23]>*{width:var(--width);height:var(--height);position:absolute}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/Flyweight.cjs",
   "module": "dist/Flyweight.js",
@@ -16,12 +16,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@soei/util": "^1.1.1",
-    "vue": "^3.3.4"
+    "@soei/util": "^1.1.1"
   },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "scss": "^0.2.4",
-    "vite": "^4.4.5"
-  }
+  "keywords": [
+    "Flyweight",
+    "享元模式",
+    "List",
+    "列表展示"
+  ]
 }

package/src/Flyweight.vue

@@ -60,6 +60,14 @@ export default {
         index: {
             type: Number,
             default: 0
+        },
+        top: {
+            type: Number,
+            default: false
+        },
+        left: {
+            type: Number,
+            default: false
         }
     },
     computed: {
@@ -99,6 +107,12 @@ export default {
         },
         index(index) {
             this.setindex(index);
+        },
+        top(top) {
+            this.flyweight.scrollTop = top;
+        },
+        left(left) {
+            this.flyweight.scrollLeft = left;
         }
     },
     mounted() {