@soei/flyweight 0.1.0 → 0.1.1

package/Flyweight.cjs

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

package/Flyweight.js

@@ -1,5 +1,5 @@
 import { isArray as F, each as x, runer as y, picker as z } from "@soei/util";
-import { openBlock as _, createElementBlock as b, normalizeClass as O, normalizeStyle as k, createElementVNode as L, Fragment as E, renderList as S, renderSlot as T, createCommentVNode as W } from "vue";
+import { openBlock as _, createElementBlock as k, normalizeClass as O, normalizeStyle as v, createElementVNode as L, Fragment as E, renderList as S, renderSlot as T, createCommentVNode as W } from "vue";
 const A = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [l, s] of e)
@@ -197,10 +197,10 @@ const I = {
         this.row = g + 2, this.column = o, this.fwheight = c;
         let d;
         s ? (f = (r / o >> 0) - h / o * (o - 1), d = h) : d = r % f / (o - 1) >> 0, this.realW = f, this.Height = Math.ceil(t / o) * c;
-        let w = Math.min(t, o * this.row), p = w - 1, a, v;
+        let w = Math.min(t, o * this.row), p = w - 1, a, b;
         for (; w-- > 0; )
-          a = p - w, v = this.flys[a], i = e[a], g = a / o >> 0, this.$set(e, a, {
-            data: v,
+          a = p - w, b = this.flys[a], i = e[a], g = a / o >> 0, this.$set(e, a, {
+            data: b,
             top: g * c,
             left: a % o * (f + d),
             index: g
@@ -211,19 +211,19 @@ const I = {
           row: (p / o >> 0) + 1,
           column: o,
           showrow: this.row,
-          showcloumn: this.column
+          showcolumn: this.column
         }]), this.trigger(m);
       });
     }
   }
 };
 function j(t, e, i, l, s, h) {
-  return _(), b("div", {
+  return _(), k("div", {
     ref: "flyweight",
     class: O(["flyweight", {
       "flyweight-active": s.actice
     }]),
-    style: k({
+    style: v({
       "--width": s.realW + "px",
       "--height": s.realH + "px"
     }),
@@ -231,13 +231,13 @@ function j(t, e, i, l, s, h) {
   }, [
     L("div", {
       class: "flyweight-all",
-      style: k({
+      style: v({
         "--flyweight-height": s.Height + "px"
       })
     }, [
-      (_(!0), b(E, null, S(s.flyweights, (n, r) => (_(), b("div", {
+      (_(!0), k(E, null, S(s.flyweights, (n, r) => (_(), k("div", {
         key: r,
-        style: k({
+        style: v({
           top: n.top + "px",
           left: n.left + "px"
         })
@@ -251,7 +251,7 @@ function j(t, e, i, l, s, h) {
     s.flyweights.length ? T(t.$slots, "end", { key: 0 }, void 0, !0) : W("", !0)
   ], 38);
 }
-const M = /* @__PURE__ */ A(I, [["render", j], ["__scopeId", "data-v-489f03db"]]), R = [M], U = {
+const M = /* @__PURE__ */ A(I, [["render", j], ["__scopeId", "data-v-f7462fc9"]]), R = [M], U = {
   install(t) {
     R.forEach((e) => {
       t.component("s-" + e.name.toLowerCase(), e);

package/README.md

@@ -2,26 +2,32 @@
 
 # 享元模式 [![Latest Version on NPM](https://img.shields.io/npm/v/@soei/flyweight?label=npm&style=flat-square)](https://npmjs.com/package/@soei/flyweight) [![Software License](https://img.shields.io/badge/license-ISC-brightgreen?label=&style=flat-square)](LICENSE.md) [![npm](https://img.shields.io/npm/dw/@soei/flyweight?label=Downloads&style=flat-square)](https://www.npmjs.com/package/@soei/flyweight) ![npm bundle size](https://img.shields.io/bundlephobia/min/%40soei%2Futil?label=Size&color=&style=flat-square)
 
- 
-
 ![安装](https://img.shields.io/badge/-@soei-ae8aff?style=flat-square)![NPM Downloads by package author](https://img.shields.io/npm-stat/dw/soeiz?style=flat-square)
+
 ```html
 <div style="height:100px;width:300px;">
   <!-- 确认父容器 宽 高 存在, 依赖父容器 `宽`, `高` 计算 -->
   <s-flyweight ...></s-flyweight>
 </div>
 ```
-  ![安装](https://img.shields.io/badge/引用-import_{_Flyweight_}_from_"@soei/flyweight"-00bcd4?style=flat-square)
+
+![安装](https://img.shields.io/badge/引用-import_{_Flyweight_}_from_"@soei/flyweight"-00bcd4?style=flat-square)
 
 ### 更新日志
+
+### `0.1.1`
+
+- #### 拼写错误修复
+
 ### `0.1.0`
 
 - #### 新增 `v-model:space` 中字段
+
   ```javascript
   {
     // --- 新增 ---
     // 总行数
-    showrow, 
+    showrow,
     // 总列数
     showcolumn,
 
@@ -30,7 +36,9 @@
     column, // 数据填前列数
   }
   ```
+
 - #### 修复了 多列数据时 `@onend` 回调函数问题
+
 ### `0.0.9`
 
 - #### 问题修复 `v-model:space` 和 onend 冲突问题处理

package/package.json

@@ -2,7 +2,7 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "Flyweight.cjs",
   "module": "Flyweight.js",

package/style.css

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