@soei/flyweight 0.0.5 → 0.0.6

package/README.md

@@ -9,6 +9,10 @@
 
 ### 更新日志
 
+### `0.0.6`
+
+- #### 优化 `flys` 初始化赋值,不改变时,获取 length 问题
+
 ### `0.0.5`
 
 - #### 扩展 `width` 赋值

package/dist/Flyweight.cjs

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

package/dist/Flyweight.js

@@ -176,21 +176,22 @@ const I = {
       let t = this.count || this.flys.length, e = this.flyweights;
       if (!t)
         return e.length = t;
+      this.count = t;
       let s = this.flyweight, n = k(s, "clientHeight=>height,clientWidth=>width");
       this.$nextTick(() => {
         let [i, h] = this.offset, l = n.width, r = n.height, f = (z(this.width, l) || l) + i, o = z(this.height, r) + h;
         this.realW = f - i, this.realH = o - h;
-        let a = l / f >> 0 || 1, u = r / o >> 0;
-        this.row = u + 2, this.column = a, this.fwheight = o;
-        let T = l % f / (a - 1) >> 0;
-        this.Height = Math.ceil(t / a) * o;
-        let y = Math.min(t, a * this.row), d = y - 1, c, x;
+        let c = l / f >> 0 || 1, a = r / o >> 0;
+        this.row = a + 2, this.column = c, this.fwheight = o;
+        let T = l % f / (c - 1) >> 0;
+        this.Height = Math.ceil(t / c) * o;
+        let y = Math.min(t, c * this.row), d = y - 1, u, x;
         for (; y-- > 0; )
-          c = d - y, x = this.flys[c], s = e[c], u = c / a >> 0, this.$set(e, c, {
+          u = d - y, x = this.flys[u], s = e[u], a = u / c >> 0, this.$set(e, u, {
             data: x,
-            top: u * o,
-            left: c % a * (f + T),
-            index: u
+            top: a * o,
+            left: u % c * (f + T),
+            index: a
           });
         e.length = d + 1, r / o > d && this.trigger("onend"), this.scroll();
       });
@@ -232,7 +233,7 @@ function A(t, e, s, n, i, h) {
     i.flyweights.length ? v(t.$slots, "end", { key: 0 }, void 0, !0) : L("", !0)
   ], 38);
 }
-const B = /* @__PURE__ */ O(I, [["render", A], ["__scopeId", "data-v-44af801a"]]), M = [B], G = {
+const B = /* @__PURE__ */ O(I, [["render", A], ["__scopeId", "data-v-3957d7cd"]]), M = [B], G = {
   install(t) {
     M.forEach((e) => {
       t.component("s-" + e.name.toLowerCase(), e);

package/dist/style.css

@@ -1 +1 @@
-.flyweight[data-v-44af801a]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-44af801a]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-44af801a]>*{width:calc(var(--width));height:var(--height);position:absolute}
+.flyweight[data-v-3957d7cd]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-3957d7cd]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-3957d7cd]>*{width:calc(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.5",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/Flyweight.cjs",
   "module": "dist/Flyweight.js",
@@ -25,5 +25,7 @@
     "享元模式",
     "List",
     "列表展示"
-  ]
+  ],
+  "author": "soei | alwbg@163.com",
+  "license": "ISC"
 }

package/src/Flyweight.vue

@@ -21,7 +21,6 @@
 
 <script>
 import { each, picker, runer } from '@soei/util';
-
 let isNil = (data) => {
     return data == null || data == undefined;
 }
@@ -242,6 +241,7 @@ export default {
             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(() => {