@soei/flyweight 0.2.1 → 0.2.5

package/Flyweight.cjs

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

package/Flyweight.js

@@ -1,31 +1,31 @@
-import { runer as w, isArray as L, each as m, picker as k, merge as $, isEmpty as j, isSimplyType as O, isString as A } from "@soei/util";
-import { openBlock as _, createElementBlock as x, normalizeClass as E, normalizeStyle as g, createElementVNode as b, Fragment as B, renderList as V, renderSlot as d, createCommentVNode as D, createTextVNode as M, toDisplayString as R } from "vue";
-let G = /(\d+|[+\-\*/]|%)/g, C = {
-  "+": (t, e) => t + e,
-  "-": (t, e) => t - e,
-  "*": (t, e) => t * e,
-  "/": (t, e) => t / e,
-  "%": (t, e, s) => parseFloat(t) / 100 * s
-}, F = (t, e) => {
+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 = {
+  "+": (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 = w("match", t, G)) {
-    let h = s.length, i, l = 0, n, r = [];
+  if (s = y("match", e, K)) {
+    let h = s.length, l, i = 0, r, n = [];
     for (; h--; )
-      l = s.shift(), l in C ? (i && r.push(i), l === "%" && (r.length = 2), n = l) : +l && r.push(+l), r.length == 2 && (r.push(e), console.log(r, n, "W"), i = C[n].apply(null, r), r.length = 0);
-    +i || (i = +r.pop()), t = i >> 0;
+      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);
+    +l || (l = +n.pop()), e = l >> 0;
   }
-  return t;
-}, U = (t) => t.replace(/\w+\((.*)\)/g, "$1").replace(/(?=\D)0(?!\w)/, "0px");
-const I = (t, e) => {
-  const s = t.__vccOpts || t;
-  for (const [h, i] of e)
-    s[h] = i;
+  return e;
+}, W = (e) => (e + "").replace(/\w+\((.*)\)/g, "$1").replace(/(?=\s+|^)(\d+(\.\d+)*)(?!(?:\.)*\d|%|\w)/g, "$1px");
+const V = (e, t) => {
+  const s = e.__vccOpts || e;
+  for (const [h, l] of t)
+    s[h] = l;
   return s;
 };
-let W = (t) => t == null || t == null, Y = (...t) => {
-  console.info("::::FLYWEIGHT", ...t);
+let E = (e) => e == null || e == null, Q = (...e) => {
+  console.info("::::FLYWEIGHT", ...e);
 };
-const q = {
+const Z = {
   name: "Flyweight",
   props: {
     flys: {
@@ -71,6 +71,10 @@ const q = {
     space: {
       type: Object,
       default: () => null
+    },
+    padding: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
@@ -82,10 +86,10 @@ const q = {
     return {
       flyweights: [],
       actice: !1,
-      Height: null,
+      Size: null,
       column: 1,
       row: 1,
-      fwheight: 10,
+      spacex: 10,
       count: 0,
       task: [],
       realW: 0,
@@ -93,176 +97,184 @@ const q = {
     };
   },
   watch: {
-    flys(t) {
-      this.count = t.length, this.re();
-      let e = this.task.shift();
-      e && this.$nextTick(() => {
-        this.setview(e);
+    flys(e) {
+      this.count = e.length, this.rebuild();
+      let t = this.task.shift();
+      t && this.$nextTick(() => {
+        this.setview(t);
       });
     },
     view: {
-      handler(t) {
-        this.setview(t);
+      handler(e) {
+        this.setview(e);
       },
       immediate: !0,
       deep: !0
     },
-    index(t) {
-      this.setindex(t);
+    index(e) {
+      this.setindex(e);
     },
-    top(t) {
-      this.flyweight.scrollTop = t;
+    top(e) {
+      this.flyweight.scrollTop = e;
     },
-    left(t) {
-      this.flyweight.scrollLeft = t;
+    left(e) {
+      this.flyweight.scrollLeft = e;
     }
   },
   mounted() {
-    this.flyweights = [], this.$set || (this.$set = (t, e, s) => {
-      t[e] = s;
+    this.flyweights = [], this.$set || (this.$set = (e, t, s) => {
+      e[t] = s;
     }), this.setindex(this.index);
     try {
       new ResizeObserver(() => {
-        this.re(), this.$emit("resize");
+        this.rebuild(), this.$emit("resize");
       }).observe(this.flyweight);
-    } catch (t) {
-      Y(t);
+    } catch (e) {
+      Q(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";
   },
   methods: {
-    trigger(t, e) {
+    exec: W,
+    trigger(e, t) {
       this.lazyrun(() => {
-        L(t) || (t = [[t, e]]), m(t, (s, h) => {
-          this.$emit(h[0], W(h[1]) ? !0 : h[1]);
+        G(e) || (e = [[e, t]]), _(e, (s, h) => {
+          this.$emit(h[0], E(h[1]) ? !0 : h[1]);
         });
       });
     },
-    cheackflys(t) {
+    cheackflys(e) {
       if (!this.flys.length)
-        return t && this.task.push(t), !0;
+        return e && this.task.push(e), !0;
     },
-    setview(t) {
-      w([this.cheackflys, (e) => {
-        e = e || {};
-        let s = e.index || m(this.flys, (h, i, l, n) => {
-          if (i[l] == n)
+    setview(e) {
+      y([this.cheackflys, (t) => {
+        t = t || {};
+        let s = t.index || _(this.flys, (h, l, i, r) => {
+          if (l[i] == r)
             return h;
-        }, e.picker, e.id);
-        W(s) || this.setindex(s);
-      }], this, t);
-    },
-    setindex(t) {
-      w([this.cheackflys, ({ index: e }) => {
-        this.$nextTick(() => {
-          let s = e / this.column >> 0, h = this.fwheight;
-          (this.flyweight.scrollTop / h >> 0) + this.row - s - 1 > 0 || (this.flyweight.scrollTop = s * h, this.scroll());
+        }, t.picker, t.id);
+        E(s) || this.setindex(s);
+      }], this, e);
+    },
+    setindex(e) {
+      y([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());
         });
-      }], this, { index: t });
+      }], this, { index: e });
     },
-    lazyrun(t, e) {
+    lazyrun(e, t) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        w(t);
-      }, e || this.lazy);
+        y(e);
+      }, t || this.lazy);
     },
-    run(t) {
-      let e = [], s = k(t.target, "scrollTop=>top");
-      $(s, {
+    run(e) {
+      let t = [], s = z(e.target, this.scrollx ? "scrollLeft=>top" : "scrollTop=>top");
+      A(s, {
         height: this.realH,
         width: this.realW,
         /* 显示区域第一行的索引 */
-        index: s.top / this.fwheight >> 0
+        index: s.top / this.spacex >> 0
         // ...this
-      }, this.space, "mix"), t.from || e.push(["onscroll", s]);
+      }, this.space, "mix"), e.from || t.push(["onscroll", s]);
       let h = !1;
-      m(
+      _(
         this.flyweights,
-        (i, l, n, r, u, f, c, o) => {
-          if (n = i / u >> 0, c = n + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(n < f % r) + (f / r >> 0)), o = c * u + i % u, o >= this.count) {
-            h || (e.push(["onend"]), h = !0);
+        (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);
             return;
           }
-          l.index = c, l.top = c * this.fwheight, l.data = this.flys[o];
+          i.index = a, i.i = o, i.data = this.flys[o];
+          let p = [
+            /* top */
+            a * this.spacex + i.x,
+            /* left */
+            i.space
+          ];
+          c && p.reverse(), i.top = p[0], i.left = p[1];
         },
         null,
         this.row,
         this.column,
         /* 显示区域第一行的索引 */
-        s.index
-      ), this.trigger(e), e = null;
-    },
-    scroll(t) {
-      this.run(t || { target: this.flyweight, from: "space" });
-    },
-    re() {
-      let t = this.count || this.flys.length, e = this.flyweights;
-      if (!t)
-        return e.length = t;
-      this.count = t;
-      let s = this.flyweight, h = k(s, "clientHeight=>height,clientWidth=>width");
+        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, h = this.flyweight, l = z(h, this.BoxRule);
       this.$nextTick(() => {
-        let i = /true/.test(this.auto), [l, n] = this.offset, r = h.width, u = h.height, f = (F(this.width, r) || r) + l, c = F(this.height, u) + n;
-        this.realH = c - n;
-        let o = r / f >> 0 || 1, p = u / c >> 0;
-        this.row = p + 2, this.column = o, this.fwheight = c;
-        let v, H = 0;
-        i ? (f = (r / o >> 0) - l / o * (o - 1), v = l) : (v = 0, H = l / (o + 1) * o + r % f / (o + 1) >> 0, f -= l), this.realW = f, this.Height = Math.ceil(t / o) * c;
-        let S = Math.min(t, o * this.row), y = S - 1, a, T, N;
-        for (; S-- > 0; )
-          a = y - S, N = this.flys[a], s = e[a], p = a / o >> 0, T = a % o, this.$set(e, a, {
-            data: N,
-            top: p * c,
-            left: T * (f + v) + (T + 1) * H,
-            index: p
+        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,
+            y: n,
+            width: c,
+            height: a - n,
+            space: H(F),
+            data: {}
           });
-        e.length = y + 1;
-        let z = [];
-        u / c > y / o && z.push(["onend"]), this.scroll(), z.push(["update:space", {
-          row: (y / o >> 0) + 1,
+        t.length = m + 1;
+        let O = [];
+        d / this.spacex > m / o && O.push(["onend"]), this.flyweight[this.direction] = 0, this.$nextTick(() => {
+          this.setindex(this.selectIndex || 0);
+        }), this.scroll(), O.push(["update:space", {
+          row: (m / o >> 0) + 1,
           column: o,
           showrow: this.row,
           showcolumn: this.column
-        }]), this.trigger(z);
+        }]), this.trigger(O);
       });
     }
   }
-};
-function J(t, e, s, h, i, l) {
-  return _(), x("div", {
+}, ee = { class: "flyweight-all" };
+function te(e, t, s, h, l, i) {
+  return b(), k("div", {
     ref: "flyweight",
-    class: E(["flyweight", {
-      "flyweight-active": i.actice
+    class: j(["flyweight", {
+      "flyweight-active": l.actice
     }]),
-    style: g({
-      "--width": i.realW + "px",
-      "--height": i.realH + "px"
+    style: T({
+      "--width": i.exec(l.realW),
+      "--height": i.exec(l.realH),
+      "--flyweight-content": i.exec(l.Size)
     }),
-    onScroll: e[0] || (e[0] = (...n) => l.scroll && l.scroll(...n))
+    onScroll: t[0] || (t[0] = (...r) => i.scroll && i.scroll(...r))
   }, [
-    b("div", {
-      class: "flyweight-all",
-      style: g({
-        "--flyweight-height": i.Height + "px"
-      })
-    }, [
-      (_(!0), x(B, null, V(i.flyweights, (n, r) => (_(), x("div", {
-        key: r,
-        style: g({
-          top: n.top + "px",
-          left: n.left + "px"
+    S("div", ee, [
+      (b(!0), k(P, null, U(l.flyweights, (r, n) => (b(), k("div", {
+        key: n,
+        style: T({
+          top: r.top + "px",
+          left: r.left + "px"
         })
       }, [
-        d(t.$slots, "default", {
-          data: n.data,
-          index: n.index
-        }, void 0, !0)
+        f(e.$slots, "default", X({ ref_for: !0 }, r), void 0, !0)
       ], 4))), 128))
-    ], 4),
-    i.flyweights.length ? d(t.$slots, "end", { key: 0 }, void 0, !0) : D("", !0)
+    ]),
+    l.flyweights.length ? f(e.$slots, "end", { key: 0 }, void 0, !0) : Y("", !0)
   ], 38);
 }
-const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-292d1069"]]);
-const P = {
+const se = /* @__PURE__ */ V(Z, [["render", te], ["__scopeId", "data-v-00424b62"]]);
+const ie = {
   name: "Card",
   // inheritAttrs: false,
   props: {
@@ -302,88 +314,100 @@ const P = {
   data() {
     return {
       closecss: {},
-      $$attrs: {},
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0"
+      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), _(["BackGround", "BordeR", "Height", "Width", "Top", "Right", "Bottom", "Left"], (t, s) => {
+        this.css(e, s);
+      }), e;
+    }
+  },
   watch: {
     close: {
-      handler(t) {
-        this.change(t);
+      handler(e) {
+        this.change(e);
       },
       deep: !0
     },
     offset: {
-      handler(t) {
-        this.offser(t);
+      handler(e) {
+        this.margin(e);
       },
       deep: !0
     }
   },
   methods: {
-    exec: U,
-    isEmpty: j,
-    isSimplyType: O,
-    change(t) {
-      O(t) || (this.closecss = k(t, "color=>--s-card-close-color,*"));
-    },
-    offser(t) {
-      t = A(t) ? t.split(/\s*(?:,|\s+)\s*/) : t;
-      let e = k(t, "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left", !0);
-      m(e, (s, h, i) => {
-        i[s] = h + "px";
-      }, e), $(this, e, !0);
+    exec: W,
+    isEmpty: M,
+    isSimplyType: I,
+    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));
+    },
+    change(e) {
+      I(e) || (this.closecss = z(e, "color=>--s-card-close-color,*"));
+    },
+    margin(e) {
+      A(this, z(
+        D(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), this.offser(this.offset);
+    this.change(this.close);
   }
-}, Q = { class: "card-title" }, X = { class: "card-content" };
-function Z(t, e, s, h, i, l) {
-  return _(), x("div", {
+}, le = { class: "card-title" }, re = { class: "card-content" };
+function he(e, t, s, h, l, i) {
+  return b(), k("div", {
     class: "card",
-    style: g({
-      "--card-background-color": s.background,
-      "--card-bw": s.border,
-      "--card-height": l.exec(s.height),
-      "--card-width": l.exec(s.width),
-      "--top": i.top,
-      "--right": i.right,
-      "--bottom": i.bottom,
-      "--left": i.left
-    })
+    style: T(i.style)
   }, [
-    d(t.$slots, "default", {}, () => [
-      d(t.$slots, "title", {}, () => [
-        b("div", Q, [
-          M(R(s.show || s.title) + " ", 1),
-          b("div", {
-            class: E(["card-close", { hide: l.isSimplyType(s.close) ? !s.close : !1 }]),
-            style: g(i.closecss),
-            onClick: e[0] || (e[0] = (n) => t.$emit("close"))
+    f(e.$slots, "default", {}, () => [
+      f(e.$slots, "title", {}, () => [
+        S("div", le, [
+          q(J(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"))
           }, null, 6)
         ])
       ], !0),
-      d(t.$slots, "content", {}, () => [
-        b("div", X, [
-          d(t.$slots, "inner", {}, void 0, !0)
+      f(e.$slots, "content", {}, () => [
+        S("div", re, [
+          f(e.$slots, "inner", {}, void 0, !0)
         ])
       ], !0)
     ], !0)
   ], 4);
 }
-const tt = /* @__PURE__ */ I(P, [["render", Z], ["__scopeId", "data-v-84f183dc"]]), et = [K, tt], lt = {
-  install(t) {
-    et.forEach((e) => {
-      t.component("S" + e.name, e), t.component(e.name + "S", e);
+const ne = /* @__PURE__ */ V(ie, [["render", he], ["__scopeId", "data-v-def66c95"]]), oe = [se, ne], ue = {
+  install(e) {
+    oe.forEach((t) => {
+      e.component("S" + t.name, t), e.component(t.name + "S", t);
     });
   }
 };
 export {
-  tt as Card,
-  K as Flyweight,
-  lt as default
+  ne as Card,
+  se as Flyweight,
+  ue as default
 };

package/README.md

@@ -2,7 +2,7 @@
 
 # 享元模式 [![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)
 
-[![安装](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) 
+[![安装](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
 <div style="height:100px;width:300px;">
@@ -20,6 +20,98 @@ npm i @soei/flyweight
 
 ```
 
+## `使用 <s-flyweight ...> `
+
+```html
+<!-- scroll-x 横向滚动, 无[scroll-x]属性这是上下滚动 -->
+<s-flyweight scroll-x></s-flyweight>
+
+<!-- hover-scroll 鼠标移入显示滚动条样式 -->
+<s-flyweight hover-scroll class="your-class"></s-flyweight>
+<s-card hover-scroll class="your-class"></s-card>
+<style lang="scss">
+  .your-class {
+    /* 设置滚动条颜色 */
+    --scrollbar-color: red;
+    /* 设置滚动条宽度 */
+    --scrollbar-width: 10px;
+  }
+</style>
+
+<!-- 设置高度 -->
+<s-flyweight height="100% - 10px"></s-flyweight>
+
+<!-- 设置宽度 -->
+<s-flyweight width="100% - 10px"></s-flyweight>
+<s-flyweight :width="`100% - 10px`"></s-flyweight>
+```
+
+## `使用 <s-card ...> `
+
+```html
+<!-- auto-scroll 默认显示滚动条样式 -->
+<s-card auto-scroll class="your-class"></s-card>
+<!-- hover-scroll 鼠标移入显示滚动条样式 -->
+<s-card hover-scroll class="your-class"></s-card>
+<style lang="scss">
+  .your-class {
+    /* 设置滚动条颜色 */
+    --scrollbar-color: red;
+    /* 设置滚动条宽度 */
+    --scrollbar-width: 10px;
+  }
+</style>
+
+<!-- 设置高度 -->
+<s-card height="100% - 10px"></s-card>
+
+<!-- 设置边距 -->
+<s-card offset="10px"></s-card>
+<s-card :offset="[10]"></s-card>
+
+<!-- 带删除的卡片 -->
+<s-card :close="true" #content @close="close"></s-card>
+<!-- 设置删除按钮颜色 -->
+<s-card
+  :close="{
+		color: 'red'
+	}"
+  #content
+  @close="close"
+></s-card>
+
+<s-card :close="true" @close="close">
+  <template #content>呈现内容</template>
+</s-card>
+<script setup>
+  let close = () => {
+    console.log("close");
+  };
+</script>
+
+<!-- 设置标题 -->
+<s-card
+  title="标题"
+  class="flyweight"
+
+  // ** 布局 **
+  flex row center column
+
+  // ** 边距 **
+  offset="20, 0, 10, 0"
+
+  // ** 是否显示关闭按钮 **
+  :close="true"
+  @close="close"
+
+  // ** 插槽 **
+  [#content, #inner, #default]
+>
+</s-card>
+```
+
+````
+
 `Vue3` 引入方式
 
 ```html
@@ -30,7 +122,7 @@ npm i @soei/flyweight
 <style>
   @import "@soei/flyweight/dist/style.css";
 </style>
-```
+````
 
 ```javascript
 // main.js

package/package.json

@@ -2,7 +2,7 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight, Card组件",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "type": "module",
   "main": "Flyweight.cjs",
   "module": "Flyweight.js",
@@ -24,7 +24,9 @@
     "Flyweight",
     "享元模式",
     "List",
-    "列表展示"
+    "列表展示",
+    "Card",
+    "卡片展示"
   ],
   "author": "soei | alwbg@163.com",
   "license": "ISC"

package/style.css

@@ -1 +1 @@
-.flyweight[data-v-292d1069]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-292d1069]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-292d1069]>*{width:calc(var(--width));height:var(--height);position:absolute}.card[data-v-84f183dc]{position:relative;background-color:var(--card-bgc, var(--card-background-color, #fff));padding:10px;border-radius:10px;box-sizing:border-box;border-style:solid;border-color:var(--card-border-color, #555);justify-content:flex-start;margin:var(--top, 0) var(--right, 0) var(--bottom, 0) var(--left, 0);height:calc(var(--card-height, 100%) - var(--top, 0) - var(--bottom, 0));width:var(--card-width, 100%);overflow:auto}.card[simply][data-v-84f183dc],.card [simply][data-v-84f183dc]{background-color:inherit;border:0!important}.card[flex][data-v-84f183dc],.card [flex][data-v-84f183dc]{display:flex}.card[column][data-v-84f183dc],.card [column][data-v-84f183dc]{flex-direction:column}.card[row][data-v-84f183dc],.card [row][data-v-84f183dc]{flex-direction:row}.card[center][data-v-84f183dc],.card [center][data-v-84f183dc]{justify-content:center}.card[vcenter][data-v-84f183dc],.card [vcenter][data-v-84f183dc]{align-items:center}.card .card-title[data-v-84f183dc]{max-height:40px}.card .card-close[data-v-84f183dc]{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-84f183dc]{display:none}.card .card-close[data-v-84f183dc]:before,.card .card-close[data-v-84f183dc]: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-84f183dc]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-84f183dc]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-84f183dc]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-84f183dc]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-84f183dc]{overflow:auto}
+@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%}