@soei/flyweight 0.2.5 → 0.2.7

package/Flyweight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@soei/util"),i=require("vue");let F=/(\d+|[+\-\*/]|%)/g,E={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t,s)=>parseFloat(e)/100*s},x=(e,t)=>{let s;if(s=c.runer("match",e,F)){let n=s.length,r,l=0,h,o=[];for(;n--;)l=s.shift(),l in E?(r&&o.push(r),l==="%"&&(o.length=2),h=l):+l&&o.push(+l),o.length==2&&(o.push(t),r=E[h].apply(null,o),o.length=0);+r||(r=+o.pop()),e=r>>0}return e},N=e=>(e+"").replace(/\w+\((.*)\)/g,"$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g,"$1px");const H=(e,t)=>{const s=e.__vccOpts||e;for(const[n,r]of t)s[n]=r;return s};let C=e=>e==null||e==null,W=(...e)=>{console.info("::::FLYWEIGHT",...e)};const I={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:()=>({id:0})},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},padding:{type:Boolean,default:!1}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Size:null,column:1,row:1,spacex:10,count:0,task:[],realW:0,realH:0}},watch:{flys(e){this.count=e.length,this.rebuild();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0,deep:!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,s)=>{e[t]=s}),this.setindex(this.index);try{new ResizeObserver(()=>{this.rebuild(),this.$emit("resize")}).observe(this.flyweight)}catch(e){W(e)}this.scrollx=c.runer("hasAttribute",this.flyweight,"scroll-x"),this.BoxRule=this.scrollx?"clientHeight=>width,clientWidth=>height":"clientHeight=>height,clientWidth=>width",this.direction=this.scrollx?"scrollLeft":"scrollTop"},methods:{exec:N,trigger(e,t){this.lazyrun(()=>{c.isArray(e)||(e=[[e,t]]),c.each(e,(s,n)=>{this.$emit(n[0],C(n[1])?!0:n[1])})})},cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){c.runer([this.cheackflys,t=>{t=t||{};let s=t.index||c.each(this.flys,(n,r,l,h)=>{if(r[l]==h)return n},t.picker,t.id);C(s)||this.setindex(s)}],this,e)},setindex(e){c.runer([this.cheackflys,({index:t})=>{this.selectIndex=t,this.$nextTick(()=>{let s=t/this.column>>0,n=this.spacex;(this.flyweight[this.direction]/n>>0)+this.row-s-1>0||(this.flyweight[this.direction]=s*n,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{c.runer(e)},t||this.lazy)},run(e){let t=[],s=c.picker(e.target,this.scrollx?"scrollLeft=>top":"scrollTop=>top");c.merge(s,{height:this.realH,width:this.realW,index:s.top/this.spacex>>0},this.space,"mix"),e.from||t.push(["onscroll",s]);let n=!1;c.each(this.flyweights,(r,l,h,o,f,p,u,d,a)=>{if(h=r/f>>0,d=h+o*(+(h<p%o)+(p/o>>0)),a=d*f+r%f,a>=this.count){n||(t.push(["onend"]),n=!0);return}l.index=d,l.i=a,l.data=this.flys[a];let g=[d*this.spacex+l.x,l.space];u&&g.reverse(),l.top=g[0],l.left=g[1]},null,this.row,this.column,s.index,this.scrollx),this.trigger(t),t=null},scroll(e){this.run(e||{target:this.flyweight,from:"space"})},rebuild(){let e=this.count||this.flys.length,t=this.flyweights;if(!e)return t.length=e;this.count=e;let s=this.scrollx,n=this.flyweight,r=c.picker(n,this.BoxRule);this.$nextTick(()=>{let l=/true/.test(this.auto),[h,o]=this.offset,f=r.width,p=r.height,u=(x(this.width,f)||f)+h,d=x(this.height,p)+o,a=f/(s?d:u)>>0||1,g=p/(s?u:d)>>0,_=this.padding;this.row=g+2,this.column=a;let m,S=0,k,b,z;s?(m=0,u=x(this.width,p)||p,b=u,k=u-h,z=y=>y*d+(y+1)*o,d=x(this.height,f)||f,d+=o):(l?(u=(f-h*(a+2*_-1))/a,m=!_*h,S=_*h):(m=0,S=(f%u+h*a)/(a+1)>>0,u-=h),z=y=>y*(u+m)+(y+1)*S,k=u,b=d),this.realH=d-o,this.realW=k,this.spacex=b,this.Size=Math.ceil(e/a)*this.spacex;let T=Math.min(e,a*this.row),w=T-1,v,$=0;for(;T-- >0;)v=w-T,$=v%a,this.$set(t,v,{x:h,y:o,width:u,height:d-o,space:z($),data:{}});t.length=w+1;let B=[];p/this.spacex>w/a&&B.push(["onend"]),this.flyweight[this.direction]=0,this.$nextTick(()=>{this.setindex(this.selectIndex||0)}),this.scroll(),B.push(["update:space",{row:(w/a>>0)+1,column:a,showrow:this.row,showcolumn:this.column}]),this.trigger(B)})}}},R={class:"flyweight-all"};function V(e,t,s,n,r,l){return i.openBlock(),i.createElementBlock("div",{ref:"flyweight",class:i.normalizeClass(["flyweight",{"flyweight-active":r.actice}]),style:i.normalizeStyle({"--width":l.exec(r.realW),"--height":l.exec(r.realH),"--flyweight-content":l.exec(r.Size)}),onScroll:t[0]||(t[0]=(...h)=>l.scroll&&l.scroll(...h))},[i.createElementVNode("div",R,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(r.flyweights,(h,o)=>(i.openBlock(),i.createElementBlock("div",{key:o,style:i.normalizeStyle({top:h.top+"px",left:h.left+"px"})},[i.renderSlot(e.$slots,"default",i.mergeProps({ref_for:!0},h),void 0,!0)],4))),128))]),r.flyweights.length?i.renderSlot(e.$slots,"end",{key:0},void 0,!0):i.createCommentVNode("",!0)],38)}const L=H(I,[["render",V],["__scopeId","data-v-00424b62"]]);const j={name:"Card",props:{offset:{type:[String,Array],default:()=>[0,0,0,0]},background:{type:String,default:""},border:{type:String,default:"1px"},height:{type:String,default:"100%"},width:{type:String,default:"100%"},show:{type:String,default:""},close:{type:Object,default:null},title:{type:String,default:""}},data(){return{closecss:{},style:{},default:{top:"0px",right:"0px",bottom:"0px",left:"0px",height:"100%",width:"100%",background:"",border:"1px"}}},computed:{style(){let e={};return this.margin(this.offset),c.each(["BackGround","BordeR","Height","Width","Top","Right","Bottom","Left"],(t,s)=>{this.css(e,s)}),e}},watch:{close:{handler(e){this.change(e)},deep:!0},offset:{handler(e){this.margin(e)},deep:!0}},methods:{exec:N,isEmpty:c.isEmpty,isSimplyType:c.isSimplyType,tolower(e,t){return t&&(e=e.replace(/[a-z]/g,"")),e.toLowerCase()},css(e,t){let s=this.tolower(t),n=this[s]||this.default[s];!n||this.default[s]==n||(e["--"+this.tolower(t,!0)]=N(n))},change(e){c.isSimplyType(e)||(this.closecss=c.picker(e,"color=>--s-card-close-color,*"))},margin(e){c.merge(this,c.picker(c.isString(e)?e.split(/\s*(?:,|\s+)\s*/):e,"0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",!0),!0)}},mounted(){this.change(this.close)}},A={class:"card-title"},M={class:"card-content"};function q(e,t,s,n,r,l){return i.openBlock(),i.createElementBlock("div",{class:"card",style:i.normalizeStyle(l.style)},[i.renderSlot(e.$slots,"default",{},()=>[i.renderSlot(e.$slots,"title",{},()=>[i.createElementVNode("div",A,[i.createTextVNode(i.toDisplayString(s.show||s.title)+" ",1),i.createElementVNode("div",{class:i.normalizeClass(["card-close",{hide:l.isSimplyType(s.close)?!s.close:!1}]),style:i.normalizeStyle(r.closecss),onClick:t[0]||(t[0]=h=>e.$emit("close"))},null,6)])],!0),i.renderSlot(e.$slots,"content",{},()=>[i.createElementVNode("div",M,[i.renderSlot(e.$slots,"inner",{},void 0,!0)])],!0)],!0)],4)}const O=H(j,[["render",q],["__scopeId","data-v-def66c95"]]),G=[L,O],P={install(e){G.forEach(t=>{e.component("S"+t.name,t),e.component(t.name+"S",t)})}};exports.Card=O;exports.Flyweight=L;exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@soei/util"),i=require("vue");let O=/(\d+|[+\-\*/]|%)/g,N={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t,s)=>parseFloat(e)/100*s},$=(e,t)=>{let s;if(s=c.runer("match",e,O)){let h=s.length,r,n=0,l,o=[];for(;h--;)n=s.shift(),n in N?(r&&o.push(r),n==="%"&&(o.length=2),l=n):+n&&o.push(+n),o.length==2&&(o.push(t),r=N[l].apply(null,o),o.length=0);+r||(r=+o.pop()),e=r>>0}return e},B=e=>(e+"").replace(/\w+\((.*)\)/g,"$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g,"$1px");const C=(e,t)=>{const s=e.__vccOpts||e;for(const[h,r]of t)s[h]=r;return s};let E=e=>e==null||e==null,F=(...e)=>{console.info("::::FLYWEIGHT",...e)};const I={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:()=>({id:0})},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},padding:{type:Boolean,default:!1}},computed:{flyweight(){return this.$refs.flyweight||""}},data(){return{flyweights:[],actice:!1,Size:null,column:1,row:1,expand:10,count:0,task:[],realW:0,realH:0}},watch:{flys(e){this.count=e.length,this.rebuild();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0,deep:!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,s)=>{e[t]=s}),this.setindex(this.index);try{new ResizeObserver(()=>{this.rebuild(),this.$emit("resize")}).observe(this.flyweight)}catch(e){F(e)}this.scrollx=c.runer("hasAttribute",this.flyweight,"scroll-x"),this.BoxRule="clientHeight=>height,clientWidth=>width",this.direction=this.scrollx?"scrollLeft":"scrollTop"},methods:{exec:B,trigger(e,t){this.lazyrun(()=>{c.isArray(e)||(e=[[e,t]]),c.each(e,(s,h)=>{this.$emit(h[0],E(h[1])?!0:h[1])})})},cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){c.runer([this.cheackflys,t=>{t=t||{};let s=t.index||c.each(this.flys,(h,r,n,l)=>{if(r[n]==l)return h},t.picker,t.id);E(s)||this.setindex(s)}],this,e)},setindex(e){c.runer([this.cheackflys,({index:t})=>{this.selectIndex=t,this.$nextTick(()=>{let s=t/this.column>>0,h=this.expand;(this.flyweight[this.direction]/h>>0)+this.row-s-1>0||(this.flyweight[this.direction]=s*h,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{c.runer(e)},t||this.lazy)},run(e){let t=[],s=c.runer(this.direction,e.target),h={offset:s,top:s,width:this.realW,height:this.realH,index:s/this.expand>>0};c.merge(h,this.space),e.from||t.push(["onscroll",h]);let r=!1;c.each(this.flyweights,(n,l,o,d,f,u,p,g,a)=>{if(o=n/f>>0,g=o+d*(+(o<u%d)+(u/d>>0)),a=g*f+n%f,a>=this.count){r||(t.push(["onend"]),r=!0);return}l.index=g,l.i=a,l.data=this.flys[a];let y=[g*this.expand+l.x,l.space];p&&y.reverse(),l.top=y[0],l.left=y[1]},null,this.row,this.column,h.index,this.scrollx),this.trigger(t),t=null},scroll(e){this.run(e||{target:this.flyweight,from:"space"})},rebuild(){let e=this.count||this.flys.length,t=this.flyweights;if(!e)return t.length=e;this.count=e;let s=this.scrollx,h=this.flyweight,r=c.picker(h,this.BoxRule);this.$nextTick(()=>{let n=/true/.test(this.auto),[l,o]=this.offset,d=r.width,f=r.height,u=($(this.width,d)||d)+l,p=$(this.height,f)+o,g=[d/u>>0||1,f/p>>0];s&&g.reverse();let[a,y]=g,_=this.padding,S,k=0,m,b;s?(m=u,u-=l,b=w=>w*(p-o)+(w+1)*o):(n?(u=(d-l*(a+2*_-1))/a,S=!_*l,k=_*l):(S=0,k=(d%u+l*a)/(a+1)>>0,u-=l),b=w=>w*(u+S)+(w+1)*k,m=p),this.row=y+2,this.column=a,this.realH=p-o,this.realW=u,this.expand=m,this.Size=Math.ceil(e/a)*m;let z=Math.min(e,a*this.row),x=z-1,v;for(;z-- >0;)v=x-z,this.$set(t,v,{x:l,y:o,width:u,height:p-o,space:b(v%a),data:{}});t.length=x+1;let T=[];f/m>x/a&&T.push(["onend"]),c.runer(this.direction,this.flyweight,0),this.$nextTick(()=>{this.setindex(this.selectIndex||0)}),this.scroll(),T.push(["update:space",{row:(x/a>>0)+1,column:a,showrow:this.row,showcolumn:this.column}]),this.trigger(T)})}}},R={class:"flyweight-all"};function V(e,t,s,h,r,n){return i.openBlock(),i.createElementBlock("div",{ref:"flyweight",class:i.normalizeClass(["flyweight",{"flyweight-active":r.actice}]),style:i.normalizeStyle({"--width":n.exec(r.realW),"--height":n.exec(r.realH),"--flyweight-content":n.exec(r.Size)}),onScroll:t[0]||(t[0]=(...l)=>n.scroll&&n.scroll(...l))},[i.createElementVNode("div",R,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(r.flyweights,(l,o)=>(i.openBlock(),i.createElementBlock("div",{key:o,style:i.normalizeStyle({top:l.top+"px",left:l.left+"px"})},[i.renderSlot(e.$slots,"default",i.mergeProps({ref_for:!0},l),void 0,!0)],4))),128))]),r.flyweights.length?i.renderSlot(e.$slots,"end",{key:0},void 0,!0):i.createCommentVNode("",!0)],38)}const H=C(I,[["render",V],["__scopeId","data-v-a2549f79"]]);const W={name:"Card",props:{offset:{type:[String,Array],default:()=>[0,0,0,0]},background:{type:String,default:""},border:{type:String,default:"1px"},height:{type:String,default:"100%"},width:{type:String,default:"100%"},show:{type:String,default:""},close:{type:Object,default:null},title:{type:String,default:""}},data(){return{closecss:{},style:{},default:{top:"0px",right:"0px",bottom:"0px",left:"0px",height:"100%",width:"100%",background:"",border:"1px"}}},computed:{style(){let e={};return this.margin(this.offset),c.each(["BackGround","BordeR","Height","Width","Top","Right","Bottom","Left"],(t,s)=>{this.css(e,s)}),e}},watch:{close:{handler(e){this.change(e)},deep:!0},offset:{handler(e){this.margin(e)},deep:!0}},methods:{exec:B,isEmpty:c.isEmpty,isSimplyType:c.isSimplyType,tolower(e,t){return t&&(e=e.replace(/[a-z]/g,"")),e.toLowerCase()},css(e,t){let s=this.tolower(t),h=this[s]||this.default[s];!h||this.default[s]==h||(e["--"+this.tolower(t,!0)]=B(h))},change(e){c.isSimplyType(e)||(this.closecss=c.picker(e,"color=>--s-card-close-color,*"))},margin(e){c.merge(this,c.picker(c.isString(e)?e.split(/\s*(?:,|\s+)\s*/):e,"0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",!0),!0)}},mounted(){this.change(this.close)}},j={class:"card-title"},A={class:"card-content"};function M(e,t,s,h,r,n){return i.openBlock(),i.createElementBlock("div",{class:"card",style:i.normalizeStyle(n.style)},[i.renderSlot(e.$slots,"default",{},()=>[i.renderSlot(e.$slots,"title",{},()=>[i.createElementVNode("div",j,[i.createTextVNode(i.toDisplayString(s.show||s.title)+" ",1),i.createElementVNode("div",{class:i.normalizeClass(["card-close",{hide:n.isSimplyType(s.close)?!s.close:!1}]),style:i.normalizeStyle(r.closecss),onClick:t[0]||(t[0]=l=>e.$emit("close"))},null,6)])],!0),i.renderSlot(e.$slots,"content",{},()=>[i.createElementVNode("div",A,[i.renderSlot(e.$slots,"inner",{},void 0,!0)])],!0)],!0)],4)}const L=C(W,[["render",M],["__scopeId","data-v-1c7635d6"]]),q=[H,L],G={install(e){q.forEach(t=>{e.component("S"+t.name,t),e.component(t.name+"S",t)})}};exports.Card=L;exports.Flyweight=H;exports.default=G;

package/Flyweight.js

@@ -1,31 +1,31 @@
-import { runer as y, isArray as G, each as _, picker as z, merge as A, isEmpty as M, isSimplyType as I, isString as D } from "@soei/util";
-import { openBlock as b, createElementBlock as k, normalizeClass as j, normalizeStyle as T, createElementVNode as S, Fragment as P, renderList as U, renderSlot as f, mergeProps as X, createCommentVNode as Y, createTextVNode as q, toDisplayString as J } from "vue";
-let K = /(\d+|[+\-\*/]|%)/g, R = {
+import { runer as g, isArray as V, each as _, merge as E, picker as C, isEmpty as G, isSimplyType as F, isString as M } from "@soei/util";
+import { openBlock as b, createElementBlock as k, normalizeClass as A, normalizeStyle as v, createElementVNode as S, Fragment as D, renderList as P, renderSlot as p, mergeProps as U, createCommentVNode as X, createTextVNode as Y, toDisplayString as q } from "vue";
+let J = /(\d+|[+\-\*/]|%)/g, I = {
   "+": (e, t) => e + t,
   "-": (e, t) => e - t,
   "*": (e, t) => e * t,
   "/": (e, t) => e / t,
   "%": (e, t, s) => parseFloat(e) / 100 * s
-}, x = (e, t) => {
+}, R = (e, t) => {
   let s;
-  if (s = y("match", e, K)) {
-    let h = s.length, l, i = 0, r, n = [];
-    for (; h--; )
-      i = s.shift(), i in R ? (l && n.push(l), i === "%" && (n.length = 2), r = i) : +i && n.push(+i), n.length == 2 && (n.push(t), l = R[r].apply(null, n), n.length = 0);
+  if (s = g("match", e, J)) {
+    let r = s.length, l, h = 0, i, n = [];
+    for (; r--; )
+      h = s.shift(), h in I ? (l && n.push(l), h === "%" && (n.length = 2), i = h) : +h && n.push(+h), n.length == 2 && (n.push(t), l = I[i].apply(null, n), n.length = 0);
     +l || (l = +n.pop()), e = l >> 0;
   }
   return e;
-}, W = (e) => (e + "").replace(/\w+\((.*)\)/g, "$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g, "$1px");
-const V = (e, t) => {
+}, O = (e) => (e + "").replace(/\w+\((.*)\)/g, "$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g, "$1px");
+const j = (e, t) => {
   const s = e.__vccOpts || e;
-  for (const [h, l] of t)
-    s[h] = l;
+  for (const [r, l] of t)
+    s[r] = l;
   return s;
 };
-let E = (e) => e == null || e == null, Q = (...e) => {
+let W = (e) => e == null || e == null, K = (...e) => {
   console.info("::::FLYWEIGHT", ...e);
 };
-const Z = {
+const Q = {
   name: "Flyweight",
   props: {
     flys: {
@@ -79,7 +79,7 @@ const Z = {
   },
   computed: {
     flyweight() {
-      return this.$refs.flyweight;
+      return this.$refs.flyweight || "";
     }
   },
   data() {
@@ -89,7 +89,7 @@ const Z = {
       Size: null,
       column: 1,
       row: 1,
-      spacex: 10,
+      expand: 10,
       count: 0,
       task: [],
       realW: 0,
@@ -130,16 +130,17 @@ const Z = {
         this.rebuild(), this.$emit("resize");
       }).observe(this.flyweight);
     } catch (e) {
-      Q(e);
+      K(e);
     }
-    this.scrollx = y("hasAttribute", this.flyweight, "scroll-x"), this.BoxRule = this.scrollx ? "clientHeight=>width,clientWidth=>height" : "clientHeight=>height,clientWidth=>width", this.direction = this.scrollx ? "scrollLeft" : "scrollTop";
+    this.scrollx = g("hasAttribute", this.flyweight, "scroll-x"), this.BoxRule = /* this.scrollx ? 'clientHeight=>width,clientWidth=>height' : */
+    "clientHeight=>height,clientWidth=>width", this.direction = this.scrollx ? "scrollLeft" : "scrollTop";
   },
   methods: {
-    exec: W,
+    exec: O,
     trigger(e, t) {
       this.lazyrun(() => {
-        G(e) || (e = [[e, t]]), _(e, (s, h) => {
-          this.$emit(h[0], E(h[1]) ? !0 : h[1]);
+        V(e) || (e = [[e, t]]), _(e, (s, r) => {
+          this.$emit(r[0], W(r[1]) ? !0 : r[1]);
         });
       });
     },
@@ -148,60 +149,62 @@ const Z = {
         return e && this.task.push(e), !0;
     },
     setview(e) {
-      y([this.cheackflys, (t) => {
+      g([this.cheackflys, (t) => {
         t = t || {};
-        let s = t.index || _(this.flys, (h, l, i, r) => {
-          if (l[i] == r)
-            return h;
+        let s = t.index || _(this.flys, (r, l, h, i) => {
+          if (l[h] == i)
+            return r;
         }, t.picker, t.id);
-        E(s) || this.setindex(s);
+        W(s) || this.setindex(s);
       }], this, e);
     },
     setindex(e) {
-      y([this.cheackflys, ({ index: t }) => {
+      g([this.cheackflys, ({ index: t }) => {
         this.selectIndex = t, this.$nextTick(() => {
-          let s = t / this.column >> 0, h = this.spacex;
-          (this.flyweight[this.direction] / h >> 0) + this.row - s - 1 > 0 || (this.flyweight[this.direction] = s * h, this.scroll());
+          let s = t / this.column >> 0, r = this.expand;
+          (this.flyweight[this.direction] / r >> 0) + this.row - s - 1 > 0 || (this.flyweight[this.direction] = s * r, this.scroll());
         });
       }], this, { index: e });
     },
     lazyrun(e, t) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        y(e);
+        g(e);
       }, t || this.lazy);
     },
     run(e) {
-      let t = [], s = z(e.target, this.scrollx ? "scrollLeft=>top" : "scrollTop=>top");
-      A(s, {
-        height: this.realH,
+      let t = [], s = g(this.direction, e.target), r = {
+        // ...this
+        offset: s,
+        top: s,
         width: this.realW,
+        height: this.realH,
         /* 显示区域第一行的索引 */
-        index: s.top / this.spacex >> 0
-        // ...this
-      }, this.space, "mix"), e.from || t.push(["onscroll", s]);
-      let h = !1;
+        index: s / this.expand >> 0
+      };
+      E(r, this.space), e.from || t.push(["onscroll", r]);
+      let l = !1;
       _(
         this.flyweights,
-        (l, i, r, n, u, d, c, a, o) => {
-          if (r = l / u >> 0, a = r + n * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(r < d % n) + (d / n >> 0)), o = a * u + l % u, o >= this.count) {
-            h || (t.push(["onend"]), h = !0);
+        (h, i, n, a, d, c, u, f, o) => {
+          if (n = h / d >> 0, f = n + a * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(n < c % a) + (c / a >> 0)), o = f * d + h % d, o >= this.count) {
+            l || (t.push(["onend"]), l = !0);
             return;
           }
-          i.index = a, i.i = o, i.data = this.flys[o];
-          let p = [
+          i.index = f, i.i = o, i.data = this.flys[o];
+          let y = [
             /* top */
-            a * this.spacex + i.x,
+            f * this.expand + i.x,
             /* left */
             i.space
           ];
-          c && p.reverse(), i.top = p[0], i.left = p[1];
+          u && y.reverse(), i.top = y[0], i.left = y[1];
         },
         null,
         this.row,
         this.column,
         /* 显示区域第一行的索引 */
-        s.index,
+        r.index,
         this.scrollx
       ), this.trigger(t), t = null;
     },
@@ -213,68 +216,68 @@ const Z = {
       if (!e)
         return t.length = e;
       this.count = e;
-      let s = this.scrollx, h = this.flyweight, l = z(h, this.BoxRule);
+      let s = this.scrollx, r = this.flyweight, l = C(r, this.BoxRule);
       this.$nextTick(() => {
-        let i = /true/.test(this.auto), [r, n] = this.offset, u = l.width, d = l.height, c = (x(this.width, u) || u) + r, a = x(this.height, d) + n, o = u / (s ? a : c) >> 0 || 1, p = d / (s ? c : a) >> 0, v = this.padding;
-        this.row = p + 2, this.column = o;
-        let w, $ = 0, N, B, H;
-        s ? (w = 0, c = x(this.width, d) || d, B = c, N = c - r, H = (g) => (
-          /* 计算左偏移量 */
-          g * a + (g + 1) * n
-        ), a = x(this.height, u) || u, a += n) : (i ? (c = (u - r * (o + 2 * v - 1)) / o, w = !v * r, $ = v * r) : (w = 0, $ = (u % c + r * o) / (o + 1) >> 0, c -= r), H = (g) => g * (c + w) + (g + 1) * $, N = c, B = a), this.realH = a - n, this.realW = N, this.spacex = B, this.Size = Math.ceil(e / o) * this.spacex;
-        let L = Math.min(e, o * this.row), m = L - 1, C, F = 0;
-        for (; L-- > 0; )
-          C = m - L, F = C % o, this.$set(t, C, {
-            x: r,
+        let h = /true/.test(this.auto), [i, n] = this.offset, a = l.width, d = l.height, c = (R(this.width, a) || a) + i, u = R(this.height, d) + n, f = [a / c >> 0 || 1, d / u >> 0];
+        s && f.reverse();
+        let [o, y] = f, z = this.padding, T, $ = 0, w, N;
+        s ? (w = c, c -= i, N = (m) => (
+          /* 计算top偏移量 */
+          m * (u - n) + (m + 1) * n
+        )) : (h ? (c = (a - i * (o + 2 * z - 1)) / o, T = !z * i, $ = z * i) : (T = 0, $ = (a % c + i * o) / (o + 1) >> 0, c -= i), N = (m) => m * (c + T) + (m + 1) * $, w = u), this.row = y + 2, this.column = o, this.realH = u - n, this.realW = c, this.expand = w, this.Size = Math.ceil(e / o) * w;
+        let B = Math.min(e, o * this.row), x = B - 1, H;
+        for (; B-- > 0; )
+          H = x - B, this.$set(t, H, {
+            x: i,
             y: n,
             width: c,
-            height: a - n,
-            space: H(F),
+            height: u - n,
+            space: N(H % o),
             data: {}
           });
-        t.length = m + 1;
-        let O = [];
-        d / this.spacex > m / o && O.push(["onend"]), this.flyweight[this.direction] = 0, this.$nextTick(() => {
+        t.length = x + 1;
+        let L = [];
+        d / w > x / o && L.push(["onend"]), g(this.direction, this.flyweight, 0), this.$nextTick(() => {
           this.setindex(this.selectIndex || 0);
-        }), this.scroll(), O.push(["update:space", {
-          row: (m / o >> 0) + 1,
+        }), this.scroll(), L.push(["update:space", {
+          row: (x / o >> 0) + 1,
           column: o,
           showrow: this.row,
           showcolumn: this.column
-        }]), this.trigger(O);
+        }]), this.trigger(L);
       });
     }
   }
-}, ee = { class: "flyweight-all" };
-function te(e, t, s, h, l, i) {
+}, Z = { class: "flyweight-all" };
+function ee(e, t, s, r, l, h) {
   return b(), k("div", {
     ref: "flyweight",
-    class: j(["flyweight", {
+    class: A(["flyweight", {
       "flyweight-active": l.actice
     }]),
-    style: T({
-      "--width": i.exec(l.realW),
-      "--height": i.exec(l.realH),
-      "--flyweight-content": i.exec(l.Size)
+    style: v({
+      "--width": h.exec(l.realW),
+      "--height": h.exec(l.realH),
+      "--flyweight-content": h.exec(l.Size)
     }),
-    onScroll: t[0] || (t[0] = (...r) => i.scroll && i.scroll(...r))
+    onScroll: t[0] || (t[0] = (...i) => h.scroll && h.scroll(...i))
   }, [
-    S("div", ee, [
-      (b(!0), k(P, null, U(l.flyweights, (r, n) => (b(), k("div", {
+    S("div", Z, [
+      (b(!0), k(D, null, P(l.flyweights, (i, n) => (b(), k("div", {
         key: n,
-        style: T({
-          top: r.top + "px",
-          left: r.left + "px"
+        style: v({
+          top: i.top + "px",
+          left: i.left + "px"
         })
       }, [
-        f(e.$slots, "default", X({ ref_for: !0 }, r), void 0, !0)
+        p(e.$slots, "default", U({ ref_for: !0 }, i), void 0, !0)
       ], 4))), 128))
     ]),
-    l.flyweights.length ? f(e.$slots, "end", { key: 0 }, void 0, !0) : Y("", !0)
+    l.flyweights.length ? p(e.$slots, "end", { key: 0 }, void 0, !0) : X("", !0)
   ], 38);
 }
-const se = /* @__PURE__ */ V(Z, [["render", te], ["__scopeId", "data-v-00424b62"]]);
-const ie = {
+const te = /* @__PURE__ */ j(Q, [["render", ee], ["__scopeId", "data-v-a2549f79"]]);
+const se = {
   name: "Card",
   // inheritAttrs: false,
   props: {
@@ -350,22 +353,22 @@ const ie = {
     }
   },
   methods: {
-    exec: W,
-    isEmpty: M,
-    isSimplyType: I,
+    exec: O,
+    isEmpty: G,
+    isSimplyType: F,
     tolower(e, t) {
       return t && (e = e.replace(/[a-z]/g, "")), e.toLowerCase();
     },
     css(e, t) {
-      let s = this.tolower(t), h = this[s] || this.default[s];
-      !h || this.default[s] == h || (e["--" + this.tolower(t, !0)] = W(h));
+      let s = this.tolower(t), r = this[s] || this.default[s];
+      !r || this.default[s] == r || (e["--" + this.tolower(t, !0)] = O(r));
     },
     change(e) {
-      I(e) || (this.closecss = z(e, "color=>--s-card-close-color,*"));
+      F(e) || (this.closecss = C(e, "color=>--s-card-close-color,*"));
     },
     margin(e) {
-      A(this, z(
-        D(e) ? e.split(/\s*(?:,|\s+)\s*/) : e,
+      E(this, C(
+        M(e) ? e.split(/\s*(?:,|\s+)\s*/) : e,
         "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
         !0
       ), !0);
@@ -374,40 +377,40 @@ const ie = {
   mounted() {
     this.change(this.close);
   }
-}, le = { class: "card-title" }, re = { class: "card-content" };
-function he(e, t, s, h, l, i) {
+}, ie = { class: "card-title" }, le = { class: "card-content" };
+function re(e, t, s, r, l, h) {
   return b(), k("div", {
     class: "card",
-    style: T(i.style)
+    style: v(h.style)
   }, [
-    f(e.$slots, "default", {}, () => [
-      f(e.$slots, "title", {}, () => [
-        S("div", le, [
-          q(J(s.show || s.title) + " ", 1),
+    p(e.$slots, "default", {}, () => [
+      p(e.$slots, "title", {}, () => [
+        S("div", ie, [
+          Y(q(s.show || s.title) + " ", 1),
           S("div", {
-            class: j(["card-close", { hide: i.isSimplyType(s.close) ? !s.close : !1 }]),
-            style: T(l.closecss),
-            onClick: t[0] || (t[0] = (r) => e.$emit("close"))
+            class: A(["card-close", { hide: h.isSimplyType(s.close) ? !s.close : !1 }]),
+            style: v(l.closecss),
+            onClick: t[0] || (t[0] = (i) => e.$emit("close"))
           }, null, 6)
         ])
       ], !0),
-      f(e.$slots, "content", {}, () => [
-        S("div", re, [
-          f(e.$slots, "inner", {}, void 0, !0)
+      p(e.$slots, "content", {}, () => [
+        S("div", le, [
+          p(e.$slots, "inner", {}, void 0, !0)
         ])
       ], !0)
     ], !0)
   ], 4);
 }
-const ne = /* @__PURE__ */ V(ie, [["render", he], ["__scopeId", "data-v-def66c95"]]), oe = [se, ne], ue = {
+const he = /* @__PURE__ */ j(se, [["render", re], ["__scopeId", "data-v-1c7635d6"]]), ne = [te, he], ae = {
   install(e) {
-    oe.forEach((t) => {
+    ne.forEach((t) => {
       e.component("S" + t.name, t), e.component(t.name + "S", t);
     });
   }
 };
 export {
-  ne as Card,
-  se as Flyweight,
-  ue as default
+  he as Card,
+  te as Flyweight,
+  ae as default
 };

package/README.md

@@ -2,6 +2,8 @@
 
 # 享元模式 [![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://npmjs.com/package/@soei/flyweight)
 
+[DEMO(示例)](https://soei.github.io/demo/flyweight/)
+
 [![安装](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)](https://npmjs.com/package/@soei/flyweight)
 
 ```html
@@ -15,9 +17,19 @@
 
 ## `安装`
 
-```
+```bash
+# 安装
 npm i @soei/flyweight
+```
+
+## `Vue2` 引用
+
+```javascript
+// Vue2引用, 安装和Vue3相同
+import Flyweight from @soei/flyweight/vue2
 
+// 样式和vue相同
+import "@soei/flyweight/style.css";
 ```
 
 ## `使用 <s-flyweight ...> `

package/package.json

@@ -2,16 +2,17 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight, Card组件",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "main": "Flyweight.cjs",
   "module": "Flyweight.js",
   "files": [
+    "vue2/*",
     "Flyweight.cjs",
     "Flyweight.js",
     "style.css"
   ],
-  "homepage": "https://alwbg.github.io",
+  "homepage": "https://soei.github.io/demo/flyweight",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/style.css

@@ -1 +1 @@
-@charset "UTF-8";.flyweight[data-v-00424b62]{height:100%;width:100%;overflow:auto;position:relative}.flyweight[hover-scroll][data-v-00424b62]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-00424b62]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-00424b62]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-00424b62]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-00424b62]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-00424b62]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 5px);height:var(--scrollbar-width, 5px)}.flyweight[hover-scroll][data-v-00424b62]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-00424b62]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-00424b62]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all[data-v-00424b62]+*{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-00424b62]{height:var(--flyweight-content)}.flyweight .flyweight-all[data-v-00424b62]>*{width:calc(var(--width));height:var(--height);position:absolute}.card[data-v-def66c95]{--t: 0px;--r: 0px;--b: 0px;--l: 0px;--h: 100%;--w: 100%;--br: 1px;position:relative;background-color:var(--bg, var(--card-background-color, #fff));padding:10px;border-radius:10px;box-sizing:border-box;border-style:solid;border-color:var(--card-border-color, #555);border-width:var(--br);justify-content:flex-start;margin:var(--t) var(--r) var(--b) var(--l);height:calc(var(--h) - var(--t) - var(--b));width:calc(var(--w) - var(--l) - var(--r));overflow:auto}.card[hover-scroll][data-v-def66c95]::-webkit-scrollbar-track,.card[auto-scroll][data-v-def66c95]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-def66c95]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-def66c95]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-def66c95]::-webkit-scrollbar,.card[auto-scroll][data-v-def66c95]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 5px);height:var(--scrollbar-width, 5px)}.card[hover-scroll][data-v-def66c95]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-def66c95]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-def66c95],.card [simply][data-v-def66c95]{background-color:inherit;border:0!important}.card[flex][data-v-def66c95],.card [flex][data-v-def66c95]{display:flex}.card[column][data-v-def66c95],.card [column][data-v-def66c95]{flex-direction:column}.card[row][data-v-def66c95],.card [row][data-v-def66c95]{flex-direction:row}.card[center][data-v-def66c95],.card [center][data-v-def66c95]{justify-content:center}.card[vcenter][data-v-def66c95],.card [vcenter][data-v-def66c95]{align-items:center}.card .card-title[data-v-def66c95]{max-height:40px}.card .card-close[data-v-def66c95]{position:absolute;width:20px;height:20px;right:10px;top:10px;border-radius:10px;z-index:1;--s-transform: 45deg;--s-hover-transform: 35deg;--s-close-width: 11px;--s-close-height: 2px;cursor:pointer;background-color:var(--s-card-close-background-color, transparent);transition:all .3s ease}.card .card-close.hide[data-v-def66c95]{display:none}.card .card-close[data-v-def66c95]:before,.card .card-close[data-v-def66c95]:after{content:"";width:var(--s-close-width, 11px);height:var(--s-close-height, 2px);background-color:var(--s-card-close-color, #555);transform-origin:center;position:inherit;border-radius:10px;top:calc(50% - var(--s-close-height, 2px) / 2);left:calc(50% - var(--s-close-width, 11px) / 2)}.card .card-close[data-v-def66c95]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-def66c95]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-def66c95]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-def66c95]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-def66c95]{overflow:auto;height:100%}
+@charset "UTF-8";.flyweight[data-v-a2549f79]{height:100%;width:100%;overflow:auto;position:relative}.flyweight[hover-scroll][data-v-a2549f79]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-a2549f79]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-a2549f79]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-a2549f79]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-a2549f79]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-a2549f79]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 5px);height:var(--scrollbar-width, 5px)}.flyweight[hover-scroll][data-v-a2549f79]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-a2549f79]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-a2549f79]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all[data-v-a2549f79]+*{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-a2549f79]{height:var(--flyweight-content)}.flyweight .flyweight-all[data-v-a2549f79]>*{width:calc(var(--width));height:var(--height);position:absolute}.card[data-v-1c7635d6]{--t: 0px;--r: 0px;--b: 0px;--l: 0px;--h: 100%;--w: 100%;--br: 1px;position:relative;background-color:var(--bg, var(--card-background-color, #fff));padding:10px;border-radius:10px;box-sizing:border-box;border-style:solid;border-color:var(--card-border-color, #555);border-width:var(--br);justify-content:flex-start;margin:var(--t) var(--r) var(--b) var(--l);height:calc(var(--h) - var(--t) - var(--b));width:calc(var(--w) - var(--l) - var(--r));overflow:auto}.card[hover-scroll][data-v-1c7635d6]::-webkit-scrollbar-track,.card[auto-scroll][data-v-1c7635d6]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-1c7635d6]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-1c7635d6]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-1c7635d6]::-webkit-scrollbar,.card[auto-scroll][data-v-1c7635d6]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 5px);height:var(--scrollbar-width, 5px)}.card[hover-scroll][data-v-1c7635d6]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-1c7635d6]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-1c7635d6],.card [simply][data-v-1c7635d6]{background-color:inherit;border:0!important}.card[flex][data-v-1c7635d6],.card [flex][data-v-1c7635d6]{display:flex}.card[column][data-v-1c7635d6],.card [column][data-v-1c7635d6]{flex-direction:column}.card[row][data-v-1c7635d6],.card [row][data-v-1c7635d6]{flex-direction:row}.card[center][data-v-1c7635d6],.card [center][data-v-1c7635d6]{justify-content:center}.card[vcenter][data-v-1c7635d6],.card [vcenter][data-v-1c7635d6]{align-items:center}.card .card-title[data-v-1c7635d6]{max-height:40px}.card .card-close[data-v-1c7635d6]{position:absolute;width:20px;height:20px;right:10px;top:10px;border-radius:10px;z-index:1;--s-transform: 45deg;--s-hover-transform: 35deg;--s-close-width: 11px;--s-close-height: 2px;cursor:pointer;background-color:var(--s-card-close-background-color, transparent);transition:all .3s ease}.card .card-close.hide[data-v-1c7635d6]{display:none}.card .card-close[data-v-1c7635d6]:before,.card .card-close[data-v-1c7635d6]:after{content:"";width:var(--s-close-width, 11px);height:var(--s-close-height, 2px);background-color:var(--s-card-close-color, #555);transform-origin:center;position:inherit;border-radius:10px;top:calc(50% - var(--s-close-height, 2px) / 2);left:calc(50% - var(--s-close-width, 11px) / 2)}.card .card-close[data-v-1c7635d6]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-1c7635d6]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-1c7635d6]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-1c7635d6]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-1c7635d6]{overflow:auto;height:100%}

package/vue2/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@soei/util");let H=/(\d+|[+\-\*/]|%)/g,C={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t,i)=>parseFloat(e)/100*i},z=(e,t)=>{let i;if(i=o.runer("match",e,H)){let s=i.length,n,c=0,l,h=[];for(;s--;)c=i.shift(),c in C?(n&&h.push(n),c==="%"&&(h.length=2),l=c):+c&&h.push(+c),h.length==2&&(h.push(t),n=C[l].apply(null,h),h.length=0);+n||(n=+h.pop()),e=n>>0}return e},T=e=>(e+"").replace(/\w+\((.*)\)/g,"$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g,"$1px");function F(e,t,i,s,n,c,l,h){var r=typeof e=="function"?e.options:e;t&&(r.render=t,r.staticRenderFns=i,r._compiled=!0),s&&(r.functional=!0),c&&(r._scopeId="data-v-"+c);var f;if(l?(f=function(u){u=u||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!u&&typeof __VUE_SSR_CONTEXT__<"u"&&(u=__VUE_SSR_CONTEXT__),n&&n.call(this,u),u&&u._registeredComponents&&u._registeredComponents.add(l)},r._ssrRegister=f):n&&(f=h?function(){n.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:n),f)if(r.functional){r._injectStyles=f;var d=r.render;r.render=function(a,g){return f.call(g),d(a,g)}}else{var p=r.beforeCreate;r.beforeCreate=p?[].concat(p,f):[f]}return{exports:e,options:r}}let R=e=>e==null||e==null,B=(...e)=>{console.info("::::FLYWEIGHT",...e)};const L={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:()=>({id:0})},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},padding:{type:Boolean,default:!1}},computed:{flyweight(){return this.$refs.flyweight||""}},data(){return{flyweights:[],actice:!1,Size:null,column:1,row:1,expand:10,count:0,task:[],realW:0,realH:0}},watch:{flys(e){this.count=e.length,this.rebuild();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0,deep:!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.rebuild(),this.$emit("resize")}).observe(this.flyweight)}catch(e){B(e)}this.scrollx=o.runer("hasAttribute",this.flyweight,"scroll-x"),this.BoxRule="clientHeight=>height,clientWidth=>width",this.direction=this.scrollx?"scrollLeft":"scrollTop"},methods:{exec:T,trigger(e,t){this.lazyrun(()=>{o.isArray(e)||(e=[[e,t]]),o.each(e,(i,s)=>{this.$emit(s[0],R(s[1])?!0:s[1])})})},cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){o.runer([this.cheackflys,t=>{t=t||{};let i=t.index||o.each(this.flys,(s,n,c,l)=>{if(n[c]==l)return s},t.picker,t.id);R(i)||this.setindex(i)}],this,e)},setindex(e){o.runer([this.cheackflys,({index:t})=>{this.selectIndex=t,this.$nextTick(()=>{let i=t/this.column>>0,s=this.expand;(this.flyweight[this.direction]/s>>0)+this.row-i-1>0||(this.flyweight[this.direction]=i*s,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{o.runer(e)},t||this.lazy)},run(e){let t=[],i=o.runer(this.direction,e.target),s={offset:i,top:i,width:this.realW,height:this.realH,index:i/this.expand>>0};o.merge(s,this.space),e.from||t.push(["onscroll",s]);let n=!1;o.each(this.flyweights,(c,l,h,r,f,d,p,u,a)=>{if(h=c/f>>0,u=h+r*(+(h<d%r)+(d/r>>0)),a=u*f+c%f,a>=this.count){n||(t.push(["onend"]),n=!0);return}l.index=u,l.i=a,l.data=this.flys[a];let g=[u*this.expand+l.x,l.space];p&&g.reverse(),l.top=g[0],l.left=g[1]},null,this.row,this.column,s.index,this.scrollx),this.trigger(t),t=null},scroll(e){this.run(e||{target:this.flyweight,from:"space"})},rebuild(){let e=this.count||this.flys.length,t=this.flyweights;if(!e)return t.length=e;this.count=e;let i=this.scrollx,s=this.flyweight,n=o.picker(s,this.BoxRule);this.$nextTick(()=>{let c=/true/.test(this.auto),[l,h]=this.offset,r=n.width,f=n.height,d=(z(this.width,r)||r)+l,p=z(this.height,f)+h,u=[r/d>>0||1,f/p>>0];i&&u.reverse();let[a,g]=u,m=this.padding,x,v=0,y,b;i?(y=d,d-=l,b=_=>_*(p-h)+(_+1)*h):(c?(d=(r-l*(a+2*m-1))/a,x=!m*l,v=m*l):(x=0,v=(r%d+l*a)/(a+1)>>0,d-=l),b=_=>_*(d+x)+(_+1)*v,y=p),this.row=g+2,this.column=a,this.realH=p-h,this.realW=d,this.expand=y,this.Size=Math.ceil(e/a)*y;let $=Math.min(e,a*this.row),w=$-1,S;for(;$-- >0;)S=w-$,this.$set(t,S,{x:l,y:h,width:d,height:p-h,space:b(S%a),data:{}});t.length=w+1;let k=[];f/y>w/a&&k.push(["onend"]),o.runer(this.direction,this.flyweight,0),this.$nextTick(()=>{this.setindex(this.selectIndex||0)}),this.scroll(),k.push(["update:space",{row:(w/a>>0)+1,column:a,showrow:this.row,showcolumn:this.column}]),this.trigger(k)})}}};var W=function(){var t=this,i=t._self._c;return i("div",{ref:"flyweight",staticClass:"flyweight",class:{"flyweight-active":t.actice},style:{"--width":t.exec(t.realW),"--height":t.exec(t.realH),"--flyweight-content":t.exec(t.Size)},on:{scroll:t.scroll}},[i("div",{staticClass:"flyweight-all"},t._l(t.flyweights,function(s,n){return i("div",{key:n,style:{top:s.top+"px",left:s.left+"px"}},[t._t("default",null,null,s)],2)}),0),t.flyweights.length?t._t("end"):t._e()],2)},E=[],A=F(L,W,E,!1,null,"a2549f79",null,null);const N=A.exports;const I={name:"Card",props:{offset:{type:[String,Array],default:()=>[0,0,0,0]},background:{type:String,default:""},border:{type:String,default:"1px"},height:{type:String,default:"100%"},width:{type:String,default:"100%"},show:{type:String,default:""},close:{type:Object,default:null},title:{type:String,default:""}},data(){return{closecss:{},style:{},default:{top:"0px",right:"0px",bottom:"0px",left:"0px",height:"100%",width:"100%",background:"",border:"1px"}}},computed:{style(){let e={};return this.margin(this.offset),o.each(["BackGround","BordeR","Height","Width","Top","Right","Bottom","Left"],(t,i)=>{this.css(e,i)}),e}},watch:{close:{handler(e){this.change(e)},deep:!0},offset:{handler(e){this.margin(e)},deep:!0}},methods:{exec:T,isEmpty:o.isEmpty,isSimplyType:o.isSimplyType,tolower(e,t){return t&&(e=e.replace(/[a-z]/g,"")),e.toLowerCase()},css(e,t){let i=this.tolower(t),s=this[i]||this.default[i];!s||this.default[i]==s||(e["--"+this.tolower(t,!0)]=T(s))},change(e){o.isSimplyType(e)||(this.closecss=o.picker(e,"color=>--s-card-close-color,*"))},margin(e){o.merge(this,o.picker(o.isString(e)?e.split(/\s*(?:,|\s+)\s*/):e,"0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",!0),!0)}},mounted(){this.change(this.close)}};var M=function(){var t=this,i=t._self._c;return i("div",{staticClass:"card",style:t.style},[t._t("default",function(){return[t._t("title",function(){return[i("div",{staticClass:"card-title"},[t._v(" "+t._s(t.show||t.title)+" "),i("div",{staticClass:"card-close",class:{hide:t.isSimplyType(t.close)?!t.close:!1},style:t.closecss,on:{click:function(s){return t.$emit("close")}}})])]}),t._t("content",function(){return[i("div",{staticClass:"card-content"},[t._t("inner")],2)]})]})],2)},U=[],X=F(I,M,U,!1,null,"1c7635d6",null,null);const O=X.exports,j=[N,O],G={install(e){j.forEach(t=>{e.component("S"+t.name,t),e.component(t.name+"S",t)})}};exports.Card=O;exports.Flyweight=N;exports.default=G;

package/vue2/index.js

@@ -0,0 +1,432 @@
+import { runer as g, isArray as L, each as m, merge as O, picker as T, isEmpty as W, isSimplyType as R, isString as A } from "@soei/util";
+let E = /(\d+|[+\-\*/]|%)/g, N = {
+  "+": (t, e) => t + e,
+  "-": (t, e) => t - e,
+  "*": (t, e) => t * e,
+  "/": (t, e) => t / e,
+  "%": (t, e, i) => parseFloat(t) / 100 * i
+}, F = (t, e) => {
+  let i;
+  if (i = g("match", t, E)) {
+    let s = i.length, n, a = 0, l, h = [];
+    for (; s--; )
+      a = i.shift(), a in N ? (n && h.push(n), a === "%" && (h.length = 2), l = a) : +a && h.push(+a), h.length == 2 && (h.push(e), n = N[l].apply(null, h), h.length = 0);
+    +n || (n = +h.pop()), t = n >> 0;
+  }
+  return t;
+}, z = (t) => (t + "").replace(/\w+\((.*)\)/g, "$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g, "$1px");
+function B(t, e, i, s, n, a, l, h) {
+  var r = typeof t == "function" ? t.options : t;
+  e && (r.render = e, r.staticRenderFns = i, r._compiled = !0), s && (r.functional = !0), a && (r._scopeId = "data-v-" + a);
+  var f;
+  if (l ? (f = function(c) {
+    c = c || // cached call
+    this.$vnode && this.$vnode.ssrContext || // stateful
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !c && typeof __VUE_SSR_CONTEXT__ < "u" && (c = __VUE_SSR_CONTEXT__), n && n.call(this, c), c && c._registeredComponents && c._registeredComponents.add(l);
+  }, r._ssrRegister = f) : n && (f = h ? function() {
+    n.call(
+      this,
+      (r.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : n), f)
+    if (r.functional) {
+      r._injectStyles = f;
+      var u = r.render;
+      r.render = function(o, p) {
+        return f.call(p), u(o, p);
+      };
+    } else {
+      var d = r.beforeCreate;
+      r.beforeCreate = d ? [].concat(d, f) : [f];
+    }
+  return {
+    exports: t,
+    options: r
+  };
+}
+let H = (t) => t == null || t == null, I = (...t) => {
+  console.info("::::FLYWEIGHT", ...t);
+};
+const U = {
+  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: () => ({ id: 0 })
+    },
+    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
+    },
+    padding: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    flyweight() {
+      return this.$refs.flyweight || "";
+    }
+  },
+  data() {
+    return {
+      flyweights: [],
+      actice: !1,
+      Size: null,
+      column: 1,
+      row: 1,
+      expand: 10,
+      count: 0,
+      task: [],
+      realW: 0,
+      realH: 0
+    };
+  },
+  watch: {
+    flys(t) {
+      this.count = t.length, this.rebuild();
+      let e = this.task.shift();
+      e && this.$nextTick(() => {
+        this.setview(e);
+      });
+    },
+    view: {
+      handler(t) {
+        this.setview(t);
+      },
+      immediate: !0,
+      deep: !0
+    },
+    index(t) {
+      this.setindex(t);
+    },
+    top(t) {
+      this.flyweight.scrollTop = t;
+    },
+    left(t) {
+      this.flyweight.scrollLeft = t;
+    }
+  },
+  mounted() {
+    this.flyweights = [], this.$set || (this.$set = (t, e, i) => {
+      t[e] = i;
+    }), this.setindex(this.index);
+    try {
+      new ResizeObserver(() => {
+        this.rebuild(), this.$emit("resize");
+      }).observe(this.flyweight);
+    } catch (t) {
+      I(t);
+    }
+    this.scrollx = g("hasAttribute", this.flyweight, "scroll-x"), this.BoxRule = /* this.scrollx ? 'clientHeight=>width,clientWidth=>height' : */
+    "clientHeight=>height,clientWidth=>width", this.direction = this.scrollx ? "scrollLeft" : "scrollTop";
+  },
+  methods: {
+    exec: z,
+    trigger(t, e) {
+      this.lazyrun(() => {
+        L(t) || (t = [[t, e]]), m(t, (i, s) => {
+          this.$emit(s[0], H(s[1]) ? !0 : s[1]);
+        });
+      });
+    },
+    cheackflys(t) {
+      if (!this.flys.length)
+        return t && this.task.push(t), !0;
+    },
+    setview(t) {
+      g([this.cheackflys, (e) => {
+        e = e || {};
+        let i = e.index || m(this.flys, (s, n, a, l) => {
+          if (n[a] == l)
+            return s;
+        }, e.picker, e.id);
+        H(i) || this.setindex(i);
+      }], this, t);
+    },
+    setindex(t) {
+      g([this.cheackflys, ({ index: e }) => {
+        this.selectIndex = e, this.$nextTick(() => {
+          let i = e / this.column >> 0, s = this.expand;
+          (this.flyweight[this.direction] / s >> 0) + this.row - i - 1 > 0 || (this.flyweight[this.direction] = i * s, this.scroll());
+        });
+      }], this, { index: t });
+    },
+    lazyrun(t, e) {
+      clearTimeout(this.time), this.time = setTimeout(() => {
+        g(t);
+      }, e || this.lazy);
+    },
+    run(t) {
+      let e = [], i = g(this.direction, t.target), s = {
+        // ...this
+        offset: i,
+        top: i,
+        width: this.realW,
+        height: this.realH,
+        /* 显示区域第一行的索引 */
+        index: i / this.expand >> 0
+      };
+      O(s, this.space), t.from || e.push(["onscroll", s]);
+      let n = !1;
+      m(
+        this.flyweights,
+        (a, l, h, r, f, u, d, c, o) => {
+          if (h = a / f >> 0, c = h + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(h < u % r) + (u / r >> 0)), o = c * f + a % f, o >= this.count) {
+            n || (e.push(["onend"]), n = !0);
+            return;
+          }
+          l.index = c, l.i = o, l.data = this.flys[o];
+          let p = [
+            /* top */
+            c * this.expand + l.x,
+            /* left */
+            l.space
+          ];
+          d && p.reverse(), l.top = p[0], l.left = p[1];
+        },
+        null,
+        this.row,
+        this.column,
+        /* 显示区域第一行的索引 */
+        s.index,
+        this.scrollx
+      ), this.trigger(e), e = null;
+    },
+    scroll(t) {
+      this.run(t || { target: this.flyweight, from: "space" });
+    },
+    rebuild() {
+      let t = this.count || this.flys.length, e = this.flyweights;
+      if (!t)
+        return e.length = t;
+      this.count = t;
+      let i = this.scrollx, s = this.flyweight, n = T(s, this.BoxRule);
+      this.$nextTick(() => {
+        let a = /true/.test(this.auto), [l, h] = this.offset, r = n.width, f = n.height, u = (F(this.width, r) || r) + l, d = F(this.height, f) + h, c = [r / u >> 0 || 1, f / d >> 0];
+        i && c.reverse();
+        let [o, p] = c, x = this.padding, v, b = 0, y, $;
+        i ? (y = u, u -= l, $ = (_) => (
+          /* 计算top偏移量 */
+          _ * (d - h) + (_ + 1) * h
+        )) : (a ? (u = (r - l * (o + 2 * x - 1)) / o, v = !x * l, b = x * l) : (v = 0, b = (r % u + l * o) / (o + 1) >> 0, u -= l), $ = (_) => _ * (u + v) + (_ + 1) * b, y = d), this.row = p + 2, this.column = o, this.realH = d - h, this.realW = u, this.expand = y, this.Size = Math.ceil(t / o) * y;
+        let k = Math.min(t, o * this.row), w = k - 1, C;
+        for (; k-- > 0; )
+          C = w - k, this.$set(e, C, {
+            x: l,
+            y: h,
+            width: u,
+            height: d - h,
+            space: $(C % o),
+            data: {}
+          });
+        e.length = w + 1;
+        let S = [];
+        f / y > w / o && S.push(["onend"]), g(this.direction, this.flyweight, 0), this.$nextTick(() => {
+          this.setindex(this.selectIndex || 0);
+        }), this.scroll(), S.push(["update:space", {
+          row: (w / o >> 0) + 1,
+          column: o,
+          showrow: this.row,
+          showcolumn: this.column
+        }]), this.trigger(S);
+      });
+    }
+  }
+};
+var X = function() {
+  var e = this, i = e._self._c;
+  return i("div", { ref: "flyweight", staticClass: "flyweight", class: {
+    "flyweight-active": e.actice
+  }, style: {
+    "--width": e.exec(e.realW),
+    "--height": e.exec(e.realH),
+    "--flyweight-content": e.exec(e.Size)
+  }, on: { scroll: e.scroll } }, [i("div", { staticClass: "flyweight-all" }, e._l(e.flyweights, function(s, n) {
+    return i("div", { key: n, style: {
+      top: s.top + "px",
+      left: s.left + "px"
+    } }, [e._t("default", null, null, s)], 2);
+  }), 0), e.flyweights.length ? e._t("end") : e._e()], 2);
+}, G = [], M = /* @__PURE__ */ B(
+  U,
+  X,
+  G,
+  !1,
+  null,
+  "a2549f79",
+  null,
+  null
+);
+const V = M.exports;
+const j = {
+  name: "Card",
+  // inheritAttrs: false,
+  props: {
+    offset: {
+      type: [String, Array],
+      default: () => [0, 0, 0, 0]
+    },
+    background: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: "1px"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    show: {
+      type: String,
+      default: ""
+    },
+    close: {
+      type: Object,
+      default: null
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      closecss: {},
+      style: {},
+      default: {
+        top: "0px",
+        right: "0px",
+        bottom: "0px",
+        left: "0px",
+        height: "100%",
+        width: "100%",
+        background: "",
+        border: "1px"
+      }
+    };
+  },
+  computed: {
+    style() {
+      let t = {};
+      return this.margin(this.offset), m(["BackGround", "BordeR", "Height", "Width", "Top", "Right", "Bottom", "Left"], (e, i) => {
+        this.css(t, i);
+      }), t;
+    }
+  },
+  watch: {
+    close: {
+      handler(t) {
+        this.change(t);
+      },
+      deep: !0
+    },
+    offset: {
+      handler(t) {
+        this.margin(t);
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    exec: z,
+    isEmpty: W,
+    isSimplyType: R,
+    tolower(t, e) {
+      return e && (t = t.replace(/[a-z]/g, "")), t.toLowerCase();
+    },
+    css(t, e) {
+      let i = this.tolower(e), s = this[i] || this.default[i];
+      !s || this.default[i] == s || (t["--" + this.tolower(e, !0)] = z(s));
+    },
+    change(t) {
+      R(t) || (this.closecss = T(t, "color=>--s-card-close-color,*"));
+    },
+    margin(t) {
+      O(this, T(
+        A(t) ? t.split(/\s*(?:,|\s+)\s*/) : t,
+        "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
+        !0
+      ), !0);
+    }
+  },
+  mounted() {
+    this.change(this.close);
+  }
+};
+var Y = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "card", style: e.style }, [e._t("default", function() {
+    return [e._t("title", function() {
+      return [i("div", { staticClass: "card-title" }, [e._v(" " + e._s(e.show || e.title) + " "), i("div", { staticClass: "card-close", class: { hide: e.isSimplyType(e.close) ? !e.close : !1 }, style: e.closecss, on: { click: function(s) {
+        return e.$emit("close");
+      } } })])];
+    }), e._t("content", function() {
+      return [i("div", { staticClass: "card-content" }, [e._t("inner")], 2)];
+    })];
+  })], 2);
+}, q = [], D = /* @__PURE__ */ B(
+  j,
+  Y,
+  q,
+  !1,
+  null,
+  "1c7635d6",
+  null,
+  null
+);
+const J = D.exports, K = [V, J], Q = {
+  install(t) {
+    K.forEach((e) => {
+      t.component("S" + e.name, e), t.component(e.name + "S", e);
+    });
+  }
+};
+export {
+  J as Card,
+  V as Flyweight,
+  Q as default
+};