@soei/flyweight 0.3.3 → 0.3.5

package/Flyweight.cjs

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

package/Flyweight.js

@@ -1,5 +1,5 @@
-import { runer as y, merge as R, isArray as Y, each as S, picker as A, isEmpty as q, isSimplyType as I, isString as J } from "@soei/util";
-import { openBlock as w, createElementBlock as b, normalizeClass as D, normalizeStyle as k, createElementVNode as T, Fragment as G, renderList as P, renderSlot as p, mergeProps as E, createCommentVNode as K, createTextVNode as Q, toDisplayString as Z, createBlock as tt, resolveDynamicComponent as et, withCtx as st } from "vue";
+import { runer as y, merge as H, isArray as D, each as b, picker as R, isEmpty as G, isSimplyType as I, isString as J } from "@soei/util";
+import { openBlock as m, createElementBlock as S, normalizeClass as P, normalizeStyle as k, createElementVNode as T, Fragment as U, renderList as X, renderSlot as p, mergeProps as E, createCommentVNode as K, createTextVNode as Q, toDisplayString as Z, createBlock as tt, resolveDynamicComponent as et, withCtx as st } from "vue";
 let it = /(\d+|[+\-\*/]|%)/g, W = {
   "+": (t, e) => t + e,
   "-": (t, e) => t - e,
@@ -95,7 +95,7 @@ const rt = {
     },
     style() {
       var t = this.w, e = this.h, s = this.Size, l = {};
-      return R(l, {
+      return H(l, {
         "--width": u(this.realW),
         "--height": u(this.realH),
         "--flyweight-content": u(s)
@@ -162,8 +162,8 @@ const rt = {
   methods: {
     exec: u,
     trigger(t, e) {
-      Y(t) || (t = t && e ? [[t, e]] : []), t.length && this.lazyrun(() => {
-        S(t, (s, l) => {
+      D(t) || (t = t && e ? [[t, e]] : []), t.length && this.lazyrun(() => {
+        b(t, (s, l) => {
           this.$emit(l[0], V(l[1]) ? !0 : l[1]);
         });
       });
@@ -175,7 +175,7 @@ const rt = {
     setview(t) {
       y([this.cheackflys, (e) => {
         e = e || {};
-        let s = e.index || S(this.flys, (l, h, r, i) => {
+        let s = e.index || b(this.flys, (l, h, r, i) => {
           if (h[r] == i)
             return l;
         }, e.picker, e.id);
@@ -205,9 +205,9 @@ const rt = {
         /* 显示区域第一行的索引 */
         index: s / this.expand >> 0
       };
-      R(l, this.space), t.from || e.push(["onscroll", l]);
+      H(l, this.space), t.from || e.push(["onscroll", l]);
       let h = !1;
-      S(
+      b(
         this.flyweights,
         (r, i, n, c, d, a, f, g, o) => {
           if (n = r / d >> 0, g = n + c * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
@@ -216,13 +216,13 @@ const rt = {
             return;
           }
           i.index = g, i.i = o, i.data = this.flys[o];
-          let m = [
+          let w = [
             /* top */
             g * this.expand + i.x,
             /* left */
             i.space
           ];
-          f && m.reverse(), i.top = m[0], i.left = m[1];
+          f && w.reverse(), i.top = w[0], i.left = w[1];
         },
         null,
         this.row,
@@ -240,15 +240,15 @@ const rt = {
       if (!t)
         return e.length = t;
       this.count = t;
-      let s = this.scrollx, l = this.flyweight, h = A(l, this.BoxRule);
+      let s = this.scrollx, l = this.flyweight, h = R(l, this.BoxRule);
       this.$nextTick(() => {
         let r = /true/.test(this.auto), [i, n] = this.offset, c = h.width, d = h.height, a = (j(this.width, c) || c) + i, f = j(this.height, d) + n, g = [c / a >> 0 || 1, d / f >> 0 || 1];
         s && g.reverse();
-        let [o, m] = g, z = this.padding, v, N = 0, x, B;
+        let [o, w] = g, z = this.padding, v, N = 0, x, B;
         s ? (x = a, a -= i, B = (_) => (
           /* 计算top偏移量 */
           _ * (f - n) + (_ + 1) * n
-        )) : (r ? (a = (c - i * (o + 2 * z - 1)) / o, v = !z * i, N = z * i) : (v = 0, N = (c % a + i * o) / (o + 1) >> 0, a -= i), B = (_) => _ * (a + v) + (_ + 1) * N, x = f), this.row = m + 2, this.column = o, this.realH = f - n, this.realW = a, this.expand = x, this.Size = Math.ceil(t / o) * x;
+        )) : (r ? (a = (c - i * (o + 2 * z - 1)) / o, v = !z * i, N = z * i) : (v = 0, N = (c % a + i * o) / (o + 1) >> 0, a -= i), B = (_) => _ * (a + v) + (_ + 1) * N, x = f), this.row = w + 2, this.column = o, this.realH = f - n, this.realW = a, this.expand = x, this.Size = Math.ceil(t / o) * x;
         let C = Math.min(t, o * this.row), $ = C - 1, L;
         for (; C-- > 0; )
           L = $ - C, this.$set(e, L, {
@@ -260,30 +260,30 @@ const rt = {
             data: {}
           });
         e.length = $ + 1;
-        let H = [];
-        d / x > $ / o && H.push(["onend"]), this.flyweight && (this.flyweight[this.direction] = 0), this.$nextTick(() => {
+        let A = [];
+        d / x > $ / o && A.push(["onend"]), this.flyweight && (this.flyweight[this.direction] = 0), this.$nextTick(() => {
           this.setindex(this.selectIndex || 0), this.scroll();
-        }), H.push(["update:space", {
+        }), A.push(["update:space", {
           row: ($ / o >> 0) + 1,
           column: o,
           showrow: this.row,
           showcolumn: this.column
-        }]), this.trigger(H);
+        }]), this.trigger(A);
       });
     }
   }
 }, ht = { class: "flyweight-all" };
 function nt(t, e, s, l, h, r) {
-  return w(), b("div", {
+  return m(), S("div", {
     ref: "flyweight",
-    class: D(["flyweight", {
+    class: P(["flyweight", {
       "flyweight-active": h.actice
     }]),
     style: k(r.style),
     onScroll: e[0] || (e[0] = (...i) => r.scroll && r.scroll(...i))
   }, [
     T("div", ht, [
-      (w(!0), b(G, null, P(h.flyweights, (i, n) => (w(), b("div", {
+      (m(!0), S(U, null, X(h.flyweights, (i, n) => (m(), S("div", {
         key: n,
         style: k({
           top: i.top + "px",
@@ -300,7 +300,7 @@ const ot = /* @__PURE__ */ F(rt, [["render", nt], ["__scopeId", "data-v-ae52e0f1
 function O(t, e) {
   return e && (t = t.replace(/[a-z]/g, "")), t.toLowerCase();
 }
-let U = {
+let Y = {
   close: {
     handler(t) {
       this.change(t);
@@ -313,12 +313,25 @@ let U = {
     },
     deep: !0
   }
-}, at = ["BackGround", "BordeR", "Height", "Width", "Top", "Right", "Bottom", "Left"], X = {};
-S(at, (t, e, s) => {
-  t = O(e), X["--" + O(e, !0)] = t, s[t] = function() {
-    this.trigger++;
-  };
-}, U);
+}, at = [
+  "BackGround",
+  "BordeR",
+  "Height",
+  "Width",
+  "Top",
+  "Right",
+  "Bottom",
+  "Left"
+], q = {};
+b(
+  at,
+  (t, e, s) => {
+    t = O(e), q["--" + O(e, !0)] = t, s[t] = function() {
+      this.trigger++;
+    };
+  },
+  Y
+);
 const ct = {
   name: "Card",
   // inheritAttrs: false,
@@ -378,14 +391,14 @@ const ct = {
       return this.tr();
     }
   },
-  watch: U,
+  watch: Y,
   methods: {
     exec: u,
-    isEmpty: q,
+    isEmpty: G,
     isSimplyType: I,
     tr() {
       let t = {};
-      return this.margin(this.offset), S(X, (e, s) => {
+      return this.margin(this.offset), b(q, (e, s) => {
         this.css(t, e, s);
       }), t;
     },
@@ -395,48 +408,70 @@ const ct = {
       !l || this.default[s] == l || (t[e] = u(l));
     },
     change(t) {
-      I(t) || (this.closecss = A(t, "color=>--s-card-close-color,size=>--s-close-width,bold=>--s-close-height,*"));
+      I(t) || (this.closecss = R(
+        t,
+        "color=>--s-card-close-color,size=>--s-close-width,bold=>--s-close-height,*"
+      ));
     },
     margin(t) {
-      R(this, A(
-        J(t) ? t.split(/\s*(?:,|\s+)\s*/) : t,
-        "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
+      H(
+        this,
+        R(
+          J(t) ? t.split(/\s*(?:,|\s+)\s*/) : t,
+          "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
+          !0
+        ),
         !0
-      ), !0);
+      );
     }
   },
   mounted() {
     this.change(this.close);
   }
-}, ut = { class: "card-title" }, dt = { class: "card-content" };
-function ft(t, e, s, l, h, r) {
-  return w(), b("div", {
+}, ut = { class: "card-title" }, dt = ["title"], ft = { class: "card-content" };
+function gt(t, e, s, l, h, r) {
+  return m(), S("div", {
     class: "card",
     key: h.trigger,
     style: k(r.isEmpty(r.style) ? r.tr() : r.style)
   }, [
     p(t.$slots, "default", {}, () => [
-      p(t.$slots, "title", {}, () => [
-        T("div", ut, [
-          Q(Z(s.show || s.title) + " ", 1),
-          T("div", {
-            class: D(["card-close", { hide: r.isSimplyType(s.close) ? !s.close : !1 }]),
-            style: k(h.closecss),
-            onClick: e[0] || (e[0] = (i) => t.$emit("close"))
-          }, null, 6)
-        ])
-      ], !0),
+      p(t.$slots, "title", {}, () => {
+        var i;
+        return [
+          T("div", ut, [
+            Q(Z(s.show || s.title) + " ", 1),
+            T("div", {
+              class: P(["card-close", { hide: r.isSimplyType(s.close) ? !s.close : !1 }]),
+              style: k(h.closecss),
+              onClick: e[0] || (e[0] = (n) => t.$emit("close")),
+              title: (i = s.close) == null ? void 0 : i.tips
+            }, null, 14, dt)
+          ])
+        ];
+      }, !0),
       p(t.$slots, "content", {}, () => [
-        T("div", dt, [
+        T("div", ft, [
           p(t.$slots, "inner", {}, void 0, !0)
         ])
       ], !0)
     ], !0)
   ], 4);
 }
-const gt = /* @__PURE__ */ F(ct, [["render", ft], ["__scopeId", "data-v-4c41de24"]]), pt = {
+const pt = /* @__PURE__ */ F(ct, [["render", gt], ["__scopeId", "data-v-c1ad1d74"]]), yt = {
   name: "Stream",
+  computed: {
+    column() {
+      let { columns: t, T: e } = this, s = t || e;
+      return G(s) ? [] : D(s) ? s : [s];
+    }
+  },
   props: {
+    /* 桥接 指定数据字段为插槽名称 */
+    bridge: {
+      type: String,
+      default: "slot"
+    },
     type: {
       type: String,
       default: "div"
@@ -445,22 +480,26 @@ const gt = /* @__PURE__ */ F(ct, [["render", ft], ["__scopeId", "data-v-4c41de24
       type: Array,
       default: () => []
     },
+    columns: {
+      type: Array,
+      default: () => null
+    },
     T: {
       type: Array,
-      default: () => []
+      default: () => null
     }
   },
   methods: {
     trigger(t) {
-      let e = t.slot || t.type;
+      let e = t[this.bridge] || t.type;
       return (this.$scopedSlots || this.$slots)[e] ? e : "default";
     }
   }
 };
-function yt(t, e, s, l, h, r) {
-  return w(), tt(et(s.type), E(t.$attrs, { data: s.data }), {
+function mt(t, e, s, l, h, r) {
+  return m(), tt(et(s.type), E(t.$attrs, { data: s.data }), {
     default: st(() => [
-      (w(!0), b(G, null, P(s.T, (i) => p(t.$slots, r.trigger(i), E({
+      (m(!0), S(U, null, X(r.column, (i) => p(t.$slots, r.trigger(i), E({
         key: i.type,
         ref_for: !0
       }, i))), 128))
@@ -468,15 +507,15 @@ function yt(t, e, s, l, h, r) {
     _: 3
   }, 16, ["data"]);
 }
-const wt = /* @__PURE__ */ F(pt, [["render", yt]]), mt = [ot, gt, wt], St = {
+const wt = /* @__PURE__ */ F(yt, [["render", mt]]), xt = [ot, pt, wt], St = {
   install(t) {
-    mt.forEach((e) => {
+    xt.forEach((e) => {
       t.component("S" + e.name, e), t.component(e.name + "S", e);
     });
   }
 };
 export {
-  gt as Card,
+  pt as Card,
   ot as Flyweight,
   wt as Stream,
   St as default

package/README.md

@@ -7,6 +7,17 @@
 [![安装](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
+<!-- 版本 0.3.3 新增  属性 w, h, 默认 100% -->
+<s-flyweight
+  ...
+  h="容器高"
+  w="容器宽"
+  width="内容宽"
+  height="内容高"
+></s-flyweight>
+
+Or
+
 <div style="height:100px;width:300px;">
   <!-- 确认父容器 宽 高 存在, 依赖父容器 `宽`, `高` 计算 -->
   <s-flyweight ...></s-flyweight>

package/package.json

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

package/style.css

@@ -1 +1 @@
-@charset "UTF-8";.flyweight[data-v-ae52e0f1]{height:var(--flyweight-h, 100%);width:var(--flyweight-w, 100%);overflow:auto;position:relative}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb:hover,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-ae52e0f1]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all[data-v-ae52e0f1]+*{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-ae52e0f1]{height:var(--flyweight-content)}.flyweight .flyweight-all[data-v-ae52e0f1]>*{width:calc(var(--width));height:var(--height);position:absolute}@media screen and (-apple-system: Macintosh){.flyweight .flyweight-all[data-v-ae52e0f1]{background-color:red!important}}.card[data-v-4c41de24]{--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-4c41de24]::-webkit-scrollbar-track,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-4c41de24]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-4c41de24]::-webkit-scrollbar,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.card[hover-scroll][data-v-4c41de24]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.card[hover-scroll][data-v-4c41de24]:hover::-webkit-scrollbar-thumb:hover,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.card[hover-scroll][data-v-4c41de24]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-4c41de24]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-4c41de24],.card [simply][data-v-4c41de24]{background-color:inherit;border:0!important}.card[flex][data-v-4c41de24],.card [flex][data-v-4c41de24]{display:flex}.card[column][data-v-4c41de24],.card [column][data-v-4c41de24]{flex-direction:column}.card[row][data-v-4c41de24],.card [row][data-v-4c41de24]{flex-direction:row}.card[center][data-v-4c41de24],.card [center][data-v-4c41de24]{justify-content:center}.card[vcenter][data-v-4c41de24],.card [vcenter][data-v-4c41de24]{align-items:center}.card .card-title[data-v-4c41de24]{max-height:40px}.card .card-close[data-v-4c41de24]{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-4c41de24]{display:none}.card .card-close[data-v-4c41de24]:before,.card .card-close[data-v-4c41de24]: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-4c41de24]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-4c41de24]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-4c41de24]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-4c41de24]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-4c41de24]{overflow:auto;height:100%}
+@charset "UTF-8";.flyweight[data-v-ae52e0f1]{height:var(--flyweight-h, 100%);width:var(--flyweight-w, 100%);overflow:auto;position:relative}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-ae52e0f1]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb:hover,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.flyweight[hover-scroll][data-v-ae52e0f1]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-ae52e0f1]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-ae52e0f1]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all[data-v-ae52e0f1]+*{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-ae52e0f1]{height:var(--flyweight-content)}.flyweight .flyweight-all[data-v-ae52e0f1]>*{width:calc(var(--width));height:var(--height);position:absolute}@media screen and (-apple-system: Macintosh){.flyweight .flyweight-all[data-v-ae52e0f1]{background-color:red!important}}.card[data-v-c1ad1d74]{--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-c1ad1d74]::-webkit-scrollbar-track,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-c1ad1d74]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-c1ad1d74]::-webkit-scrollbar,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.card[hover-scroll][data-v-c1ad1d74]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.card[hover-scroll][data-v-c1ad1d74]:hover::-webkit-scrollbar-thumb:hover,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.card[hover-scroll][data-v-c1ad1d74]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-c1ad1d74]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-c1ad1d74],.card [simply][data-v-c1ad1d74]{background-color:inherit;border:0!important}.card[flex][data-v-c1ad1d74],.card [flex][data-v-c1ad1d74]{display:flex}.card[column][data-v-c1ad1d74],.card [column][data-v-c1ad1d74]{flex-direction:column}.card[row][data-v-c1ad1d74],.card [row][data-v-c1ad1d74]{flex-direction:row}.card[center][data-v-c1ad1d74],.card [center][data-v-c1ad1d74]{justify-content:center}.card[vcenter][data-v-c1ad1d74],.card [vcenter][data-v-c1ad1d74]{align-items:center}.card .card-title[data-v-c1ad1d74]{max-height:40px}.card .card-close[data-v-c1ad1d74]{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-c1ad1d74]{display:none}.card .card-close[data-v-c1ad1d74]:before,.card .card-close[data-v-c1ad1d74]: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-c1ad1d74]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-c1ad1d74]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-c1ad1d74]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-c1ad1d74]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-c1ad1d74]{overflow:auto;height:100%}.card .card-content[data-v-c1ad1d74]:before{background:linear-gradient(90deg,transparent,var(--card-line-color, transparent),var(--card-line-color, transparent),transparent);content:"";display:block;position:sticky;top:0;width:100%;height:1px;z-index:10;transition:opacity .5s ease-in-out}

package/vue2/index.cjs

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

package/vue2/index.js

@@ -1,53 +1,53 @@
-import { runer as y, merge as R, isArray as I, each as m, picker as k, isEmpty as M, isSimplyType as H, isString as U } from "@soei/util";
-let X = /(\d+|[+\-\*/]|%)/g, L = {
+import { runer as y, merge as R, isArray as W, each as w, picker as k, isEmpty as E, isSimplyType as A, isString as U } from "@soei/util";
+let X = /(\d+|[+\-\*/]|%)/g, H = {
   "+": (e, t) => e + t,
   "-": (e, t) => e - t,
   "*": (e, t) => e * t,
   "/": (e, t) => e / t,
   "%": (e, t, s) => parseFloat(e) / 100 * s
-}, O = (e, t) => {
+}, L = (e, t) => {
   let s;
   if (s = y("match", e, X)) {
-    let i = s.length, n, a = 0, l, h = [];
+    let i = s.length, l, a = 0, r, h = [];
     for (; i--; )
-      a = s.shift(), a in L ? (n && h.push(n), a === "%" && (h.length = 2), l = a) : +a && h.push(+a), h.length == 2 && (h.push(t), n = L[l].apply(null, h), h.length = 0);
-    +n || (n = +h.pop()), e = n >> 0;
+      a = s.shift(), a in H ? (l && h.push(l), a === "%" && (h.length = 2), r = a) : +a && h.push(+a), h.length == 2 && (h.push(t), l = H[r].apply(null, h), h.length = 0);
+    +l || (l = +h.pop()), e = l >> 0;
   }
   return e;
-}, A = {}, g = (e, t) => (e + "").replace(
+}, O = {}, g = (e, t) => (e + "").replace(
   /\w+\((.*)\)/g,
   "$1"
 ).replace(
-  A[t] || (A[t] = new RegExp("(?=\\s+|^)(\\d+)(?:\\.\\d{1,})?(?!(?:\\.)*\\d|%|\\w)", "g")),
+  O[t] || (O[t] = new RegExp("(?=\\s+|^)(\\d+)(?:\\.\\d{1,})?(?!(?:\\.)*\\d|%|\\w)", "g")),
   "$1px"
 );
-function F(e, t, s, i, n, a, l, h) {
-  var r = typeof e == "function" ? e.options : e;
-  t && (r.render = t, r.staticRenderFns = s, r._compiled = !0), i && (r.functional = !0), a && (r._scopeId = "data-v-" + a);
-  var f;
-  if (l ? (f = function(c) {
+function F(e, t, s, i, l, a, r, h) {
+  var n = typeof e == "function" ? e.options : e;
+  t && (n.render = t, n.staticRenderFns = s, n._compiled = !0), i && (n.functional = !0), a && (n._scopeId = "data-v-" + a);
+  var u;
+  if (r ? (u = 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.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !c && typeof __VUE_SSR_CONTEXT__ < "u" && (c = __VUE_SSR_CONTEXT__), l && l.call(this, c), c && c._registeredComponents && c._registeredComponents.add(r);
+  }, n._ssrRegister = u) : l && (u = h ? function() {
+    l.call(
       this,
-      (r.functional ? this.parent : this).$root.$options.shadowRoot
+      (n.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);
+  } : l), u)
+    if (n.functional) {
+      n._injectStyles = u;
+      var f = n.render;
+      n.render = function(o, p) {
+        return u.call(p), f(o, p);
       };
     } else {
-      var d = r.beforeCreate;
-      r.beforeCreate = d ? [].concat(d, f) : [f];
+      var d = n.beforeCreate;
+      n.beforeCreate = d ? [].concat(d, u) : [u];
     }
   return {
     exports: e,
-    options: r
+    options: n
   };
 }
 let B = (e) => e == null || e == null, G = (...e) => {
@@ -184,8 +184,8 @@ const V = {
   methods: {
     exec: g,
     trigger(e, t) {
-      I(e) || (e = e && t ? [[e, t]] : []), e.length && this.lazyrun(() => {
-        m(e, (s, i) => {
+      W(e) || (e = e && t ? [[e, t]] : []), e.length && this.lazyrun(() => {
+        w(e, (s, i) => {
           this.$emit(i[0], B(i[1]) ? !0 : i[1]);
         });
       });
@@ -197,8 +197,8 @@ const V = {
     setview(e) {
       y([this.cheackflys, (t) => {
         t = t || {};
-        let s = t.index || m(this.flys, (i, n, a, l) => {
-          if (n[a] == l)
+        let s = t.index || w(this.flys, (i, l, a, r) => {
+          if (l[a] == r)
             return i;
         }, t.picker, t.id);
         B(s) || this.setindex(s);
@@ -228,23 +228,23 @@ const V = {
         index: s / this.expand >> 0
       };
       R(i, this.space), e.from || t.push(["onscroll", i]);
-      let n = !1;
-      m(
+      let l = !1;
+      w(
         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 || (t.push(["onend"]), n = !0);
+        (a, r, h, n, u, f, d, c, o) => {
+          if (h = a / u >> 0, c = h + n * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(h < f % n) + (f / n >> 0)), o = c * u + a % u, o >= this.count) {
+            l || (t.push(["onend"]), l = !0);
             return;
           }
-          l.index = c, l.i = o, l.data = this.flys[o];
+          r.index = c, r.i = o, r.data = this.flys[o];
           let p = [
             /* top */
-            c * this.expand + l.x,
+            c * this.expand + r.x,
             /* left */
-            l.space
+            r.space
           ];
-          d && p.reverse(), l.top = p[0], l.left = p[1];
+          d && p.reverse(), r.top = p[0], r.left = p[1];
         },
         null,
         this.row,
@@ -262,28 +262,28 @@ const V = {
       if (!e)
         return t.length = e;
       this.count = e;
-      let s = this.scrollx, i = this.flyweight, n = k(i, this.BoxRule);
+      let s = this.scrollx, i = this.flyweight, l = k(i, this.BoxRule);
       this.$nextTick(() => {
-        let a = /true/.test(this.auto), [l, h] = this.offset, r = n.width, f = n.height, u = (O(this.width, r) || r) + l, d = O(this.height, f) + h, c = [r / u >> 0 || 1, f / d >> 0 || 1];
+        let a = /true/.test(this.auto), [r, h] = this.offset, n = l.width, u = l.height, f = (L(this.width, n) || n) + r, d = L(this.height, u) + h, c = [n / f >> 0 || 1, u / d >> 0 || 1];
         s && c.reverse();
-        let [o, p] = c, v = this.padding, $, b = 0, _, S;
-        s ? (_ = u, u -= l, S = (w) => (
+        let [o, p] = c, v = this.padding, b, $ = 0, _, S;
+        s ? (_ = f, f -= r, S = (m) => (
           /* 计算top偏移量 */
-          w * (d - h) + (w + 1) * h
-        )) : (a ? (u = (r - l * (o + 2 * v - 1)) / o, $ = !v * l, b = v * l) : ($ = 0, b = (r % u + l * o) / (o + 1) >> 0, u -= l), S = (w) => w * (u + $) + (w + 1) * b, _ = d), this.row = p + 2, this.column = o, this.realH = d - h, this.realW = u, this.expand = _, this.Size = Math.ceil(e / o) * _;
+          m * (d - h) + (m + 1) * h
+        )) : (a ? (f = (n - r * (o + 2 * v - 1)) / o, b = !v * r, $ = v * r) : (b = 0, $ = (n % f + r * o) / (o + 1) >> 0, f -= r), S = (m) => m * (f + b) + (m + 1) * $, _ = d), this.row = p + 2, this.column = o, this.realH = d - h, this.realW = f, this.expand = _, this.Size = Math.ceil(e / o) * _;
         let T = Math.min(e, o * this.row), x = T - 1, C;
         for (; T-- > 0; )
           C = x - T, this.$set(t, C, {
-            x: l,
+            x: r,
             y: h,
-            width: u,
+            width: f,
             height: d - h,
             space: S(C % o),
             data: {}
           });
         t.length = x + 1;
         let z = [];
-        f / _ > x / o && z.push(["onend"]), this.flyweight && (this.flyweight[this.direction] = 0), this.$nextTick(() => {
+        u / _ > x / o && z.push(["onend"]), this.flyweight && (this.flyweight[this.direction] = 0), this.$nextTick(() => {
           this.setindex(this.selectIndex || 0), this.scroll();
         }), z.push(["update:space", {
           row: (x / o >> 0) + 1,
@@ -299,8 +299,8 @@ var j = function() {
   var t = this, s = t._self._c;
   return s("div", { ref: "flyweight", staticClass: "flyweight", class: {
     "flyweight-active": t.actice
-  }, style: t.style, on: { scroll: t.scroll } }, [s("div", { staticClass: "flyweight-all" }, t._l(t.flyweights, function(i, n) {
-    return s("div", { key: n, style: {
+  }, style: t.style, on: { scroll: t.scroll } }, [s("div", { staticClass: "flyweight-all" }, t._l(t.flyweights, function(i, l) {
+    return s("div", { key: l, style: {
       top: i.top + "px",
       left: i.left + "px"
     } }, [t._t("default", null, null, i)], 2);
@@ -319,7 +319,7 @@ const D = q.exports;
 function N(e, t) {
   return t && (e = e.replace(/[a-z]/g, "")), e.toLowerCase();
 }
-let W = {
+let I = {
   close: {
     handler(e) {
       this.change(e);
@@ -332,12 +332,25 @@ let W = {
     },
     deep: !0
   }
-}, J = ["BackGround", "BordeR", "Height", "Width", "Top", "Right", "Bottom", "Left"], E = {};
-m(J, (e, t, s) => {
-  e = N(t), E["--" + N(t, !0)] = e, s[e] = function() {
-    this.trigger++;
-  };
-}, W);
+}, J = [
+  "BackGround",
+  "BordeR",
+  "Height",
+  "Width",
+  "Top",
+  "Right",
+  "Bottom",
+  "Left"
+], M = {};
+w(
+  J,
+  (e, t, s) => {
+    e = N(t), M["--" + N(t, !0)] = e, s[e] = function() {
+      this.trigger++;
+    };
+  },
+  I
+);
 const K = {
   name: "Card",
   // inheritAttrs: false,
@@ -397,14 +410,14 @@ const K = {
       return this.tr();
     }
   },
-  watch: W,
+  watch: I,
   methods: {
     exec: g,
-    isEmpty: M,
-    isSimplyType: H,
+    isEmpty: E,
+    isSimplyType: A,
     tr() {
       let e = {};
-      return this.margin(this.offset), m(E, (t, s) => {
+      return this.margin(this.offset), w(M, (t, s) => {
         this.css(e, t, s);
       }), e;
     },
@@ -414,14 +427,21 @@ const K = {
       !i || this.default[s] == i || (e[t] = g(i));
     },
     change(e) {
-      H(e) || (this.closecss = k(e, "color=>--s-card-close-color,size=>--s-close-width,bold=>--s-close-height,*"));
+      A(e) || (this.closecss = k(
+        e,
+        "color=>--s-card-close-color,size=>--s-close-width,bold=>--s-close-height,*"
+      ));
     },
     margin(e) {
-      R(this, k(
-        U(e) ? e.split(/\s*(?:,|\s+)\s*/) : e,
-        "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
+      R(
+        this,
+        k(
+          U(e) ? e.split(/\s*(?:,|\s+)\s*/) : e,
+          "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left",
+          !0
+        ),
         !0
-      ), !0);
+      );
     }
   },
   mounted() {
@@ -432,7 +452,8 @@ var P = function() {
   var t = this, s = t._self._c;
   return s("div", { key: t.trigger, staticClass: "card", style: t.isEmpty(t.style) ? t.tr() : t.style }, [t._t("default", function() {
     return [t._t("title", function() {
-      return [s("div", { staticClass: "card-title" }, [t._v(" " + t._s(t.show || t.title) + " "), s("div", { staticClass: "card-close", class: { hide: t.isSimplyType(t.close) ? !t.close : !1 }, style: t.closecss, on: { click: function(i) {
+      var i;
+      return [s("div", { staticClass: "card-title" }, [t._v(" " + t._s(t.show || t.title) + " "), s("div", { staticClass: "card-close", class: { hide: t.isSimplyType(t.close) ? !t.close : !1 }, style: t.closecss, attrs: { title: (i = t.close) == null ? void 0 : i.tips }, on: { click: function(l) {
         return t.$emit("close");
       } } })])];
     }), t._t("content", function() {
@@ -445,13 +466,24 @@ var P = function() {
   Q,
   !1,
   null,
-  "6065b432",
+  "16139b86",
   null,
   null
 );
 const tt = Z.exports, et = {
   name: "Stream",
+  computed: {
+    column() {
+      let { columns: e, T: t } = this, s = e || t;
+      return E(s) ? [] : W(s) ? s : [s];
+    }
+  },
   props: {
+    /* 桥接 指定数据字段为插槽名称 */
+    bridge: {
+      type: String,
+      default: "slot"
+    },
     type: {
       type: String,
       default: "div"
@@ -460,21 +492,25 @@ const tt = Z.exports, et = {
       type: Array,
       default: () => []
     },
+    columns: {
+      type: Array,
+      default: () => null
+    },
     T: {
       type: Array,
-      default: () => []
+      default: () => null
     }
   },
   methods: {
     trigger(e) {
-      let t = e.slot || e.type;
+      let t = e[this.bridge] || e.type;
       return (this.$scopedSlots || this.$slots)[t] ? t : "default";
     }
   }
 };
 var st = function() {
   var t = this, s = t._self._c;
-  return s(t.type, t._b({ tag: "component", attrs: { data: t.data } }, "component", t.$attrs, !1), [t._l(t.T, function(i) {
+  return s(t.type, t._b({ tag: "component", attrs: { data: t.data } }, "component", t.$attrs, !1), [t._l(t.column, function(i) {
     return [t._t(t.trigger(i), null, null, i)];
   })], 2);
 }, it = [], lt = /* @__PURE__ */ F(

package/vue2/style.css

@@ -1 +1 @@
-@charset "UTF-8";.flyweight[data-v-3416ac53]{height:var(--flyweight-h, 100%);width:var(--flyweight-w, 100%);overflow:auto;position:relative}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb:hover,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-3416ac53]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all+*[data-v-3416ac53]{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-3416ac53]{height:var(--flyweight-content)}.flyweight .flyweight-all>*[data-v-3416ac53]{width:calc(var(--width));height:var(--height);position:absolute}@media screen and (-apple-system: Macintosh){.flyweight .flyweight-all[data-v-3416ac53]{background-color:red!important}}.card[data-v-6065b432]{--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-6065b432]::-webkit-scrollbar-track,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-6065b432]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-6065b432]::-webkit-scrollbar,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.card[hover-scroll][data-v-6065b432]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.card[hover-scroll][data-v-6065b432]:hover::-webkit-scrollbar-thumb:hover,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.card[hover-scroll][data-v-6065b432]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-6065b432]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-6065b432],.card [simply][data-v-6065b432]{background-color:inherit;border:0!important}.card[flex][data-v-6065b432],.card [flex][data-v-6065b432]{display:flex}.card[column][data-v-6065b432],.card [column][data-v-6065b432]{flex-direction:column}.card[row][data-v-6065b432],.card [row][data-v-6065b432]{flex-direction:row}.card[center][data-v-6065b432],.card [center][data-v-6065b432]{justify-content:center}.card[vcenter][data-v-6065b432],.card [vcenter][data-v-6065b432]{align-items:center}.card .card-title[data-v-6065b432]{max-height:40px}.card .card-close[data-v-6065b432]{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-6065b432]{display:none}.card .card-close[data-v-6065b432]:before,.card .card-close[data-v-6065b432]: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-6065b432]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-6065b432]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-6065b432]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-6065b432]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-6065b432]{overflow:auto;height:100%}
+@charset "UTF-8";.flyweight[data-v-3416ac53]{height:var(--flyweight-h, 100%);width:var(--flyweight-w, 100%);overflow:auto;position:relative}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar-track,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-track{border-radius:10px}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.flyweight[hover-scroll][data-v-3416ac53]::-webkit-scrollbar,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb:hover,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.flyweight[hover-scroll][data-v-3416ac53]:hover::-webkit-scrollbar-thumb,.flyweight[auto-scroll][data-v-3416ac53]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.flyweight[scroll-x] .flyweight-all[data-v-3416ac53]{width:var(--flyweight-content);height:auto;min-height:100%}.flyweight[scroll-x] .flyweight-all+*[data-v-3416ac53]{left:var(--flyweight-content);position:absolute;top:0;height:100%}.flyweight .flyweight-all[data-v-3416ac53]{height:var(--flyweight-content)}.flyweight .flyweight-all>*[data-v-3416ac53]{width:calc(var(--width));height:var(--height);position:absolute}@media screen and (-apple-system: Macintosh){.flyweight .flyweight-all[data-v-3416ac53]{background-color:red!important}}.card[data-v-16139b86]{--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-16139b86]::-webkit-scrollbar-track,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar-track{border-radius:10px}.card[hover-scroll][data-v-16139b86]::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar-thumb{border-radius:10px;background-color:transparent}.card[hover-scroll][data-v-16139b86]::-webkit-scrollbar,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar{border-radius:10px;width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}.card[hover-scroll][data-v-16139b86]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar-thumb{border-style:dashed;border-color:transparent;border-width:2px;background-clip:padding-box;cursor:pointer}.card[hover-scroll][data-v-16139b86]:hover::-webkit-scrollbar-thumb:hover,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color, #101010)}.card[hover-scroll][data-v-16139b86]:hover::-webkit-scrollbar-thumb,.card[auto-scroll][data-v-16139b86]::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color, #101010)}.card[simply][data-v-16139b86],.card [simply][data-v-16139b86]{background-color:inherit;border:0!important}.card[flex][data-v-16139b86],.card [flex][data-v-16139b86]{display:flex}.card[column][data-v-16139b86],.card [column][data-v-16139b86]{flex-direction:column}.card[row][data-v-16139b86],.card [row][data-v-16139b86]{flex-direction:row}.card[center][data-v-16139b86],.card [center][data-v-16139b86]{justify-content:center}.card[vcenter][data-v-16139b86],.card [vcenter][data-v-16139b86]{align-items:center}.card .card-title[data-v-16139b86]{max-height:40px}.card .card-close[data-v-16139b86]{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-16139b86]{display:none}.card .card-close[data-v-16139b86]:before,.card .card-close[data-v-16139b86]: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-16139b86]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-16139b86]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-16139b86]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-16139b86]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-16139b86]{overflow:auto;height:100%}.card .card-content[data-v-16139b86]:before{background:linear-gradient(90deg,transparent,var(--card-line-color, transparent),var(--card-line-color, transparent),transparent);content:"";display:block;position:sticky;top:0;width:100%;height:1px;z-index:10;transition:opacity .5s ease-in-out}