@soei/flyweight 0.1.1 → 0.2.0

package/Flyweight.cjs

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

package/Flyweight.js

@@ -1,30 +1,30 @@
-import { isArray as F, each as x, runer as y, picker as z } from "@soei/util";
-import { openBlock as _, createElementBlock as k, normalizeClass as O, normalizeStyle as v, createElementVNode as L, Fragment as E, renderList as S, renderSlot as T, createCommentVNode as W } from "vue";
-const A = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [l, s] of e)
-    i[l] = s;
-  return i;
+import { isArray as W, each as w, runer as m, picker as k, merge as C, isEmpty as I, isSimplyType as H, isString as L } from "@soei/util";
+import { openBlock as _, createElementBlock as b, normalizeClass as F, normalizeStyle as g, createElementVNode as x, Fragment as j, renderList as A, renderSlot as d, createCommentVNode as B, createTextVNode as V, toDisplayString as M } from "vue";
+const E = (t, e) => {
+  const s = t.__vccOpts || t;
+  for (const [l, i] of e)
+    s[l] = i;
+  return s;
 };
-let H = (t) => t == null || t == null, B = /(\d+|[+\-\*/]|%)/g, N = {
+let N = (t) => t == null || t == null, R = /(\d+|[+\-\*/]|%)/g, O = {
   "+": (t, e) => t + e,
   "-": (t, e) => t - e,
   "*": (t, e) => t * e,
   "/": (t, e) => t / e,
-  "%": (t, e, i) => parseFloat(t) / 100 * i
+  "%": (t, e, s) => parseFloat(t) / 100 * s
 }, $ = (t, e) => {
-  let i;
-  if (i = y("match", t, B)) {
-    let l = i.length, s, h = 0, n, r = [];
+  let s;
+  if (s = m("match", t, R)) {
+    let l = s.length, i, h = 0, n, r = [];
     for (; l--; )
-      h = i.shift(), h in N ? (s && r.push(s), h === "%" && (r.length = 2), n = h) : +h && r.push(+h), r.length == 2 && (r.push(e), s = N[n].apply(null, r), r.length = 0);
-    +s || (s = +r.pop()), t = s >> 0;
+      h = s.shift(), h in O ? (i && r.push(i), h === "%" && (r.length = 2), n = h) : +h && r.push(+h), r.length == 2 && (r.push(e), i = O[n].apply(null, r), r.length = 0);
+    +i || (i = +r.pop()), t = i >> 0;
   }
   return t;
-}, C = (...t) => {
+}, D = (...t) => {
   console.info("::::FLYWEIGHT", ...t);
 };
-const I = {
+const G = {
   name: "Flyweight",
   props: {
     flys: {
@@ -116,22 +116,22 @@ const I = {
     }
   },
   mounted() {
-    this.flyweights = [], this.$set || (this.$set = (t, e, i) => {
-      t[e] = i;
+    this.flyweights = [], this.$set || (this.$set = (t, e, s) => {
+      t[e] = s;
     }), this.setindex(this.index);
     try {
       new ResizeObserver(() => {
         this.re(), this.$emit("resize");
       }).observe(this.flyweight);
     } catch (t) {
-      C(t);
+      D(t);
     }
   },
   methods: {
     trigger(t, e) {
       this.lazyrun(() => {
-        F(t) || (t = [[t, e]]), x(t, (i, l) => {
-          this.$emit(l[0], H(l[1]) ? !0 : l[1]);
+        W(t) || (t = [[t, e]]), w(t, (s, l) => {
+          this.$emit(l[0], N(l[1]) ? !0 : l[1]);
         });
       });
     },
@@ -140,125 +140,245 @@ const I = {
         return t && this.task.push(t), !0;
     },
     setview(t) {
-      y([this.cheackflys, (e) => {
+      m([this.cheackflys, (e) => {
         e = e || {};
-        let i = e.index || x(this.flys, (l, s, h, n) => {
-          if (s[h] == n)
+        let s = e.index || w(this.flys, (l, i, h, n) => {
+          if (i[h] == n)
             return l;
         }, e.picker, e.id);
-        H(i) || this.setindex(i);
+        N(s) || this.setindex(s);
       }], this, t);
     },
     setindex(t) {
-      y([this.cheackflys, ({ index: e }) => {
+      m([this.cheackflys, ({ index: e }) => {
         this.$nextTick(() => {
-          let i = e / this.column >> 0, l = this.fwheight;
-          (this.flyweight.scrollTop / l >> 0) + this.row - i - 1 > 0 || (this.flyweight.scrollTop = i * l, this.scroll());
+          let s = e / this.column >> 0, l = this.fwheight;
+          (this.flyweight.scrollTop / l >> 0) + this.row - s - 1 > 0 || (this.flyweight.scrollTop = s * l, this.scroll());
         });
       }], this, { index: t });
     },
     lazyrun(t, e) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        y(t);
+        m(t);
       }, e || this.lazy);
     },
     run(t) {
-      let e = z(t.target, "scrollTop=>top");
-      x(
+      let e = [], s = k(t.target, "scrollTop=>top");
+      C(s, {
+        height: this.realH,
+        width: this.realW,
+        /* 显示区域第一行的索引 */
+        index: s.top / this.fwheight >> 0
+        // ...this
+      }, this.space, "mix"), t.from || e.push(["onscroll", s]), w(
         this.flyweights,
-        (i, l, s, h, n, r, u, f) => {
-          if (s = i / n >> 0, u = s + h * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(s < r % h) + (r / h >> 0)), f = u * n + i % n, f >= this.count) {
-            this.trigger("onend");
+        (l, i, h, n, r, u, f, c) => {
+          if (h = l / r >> 0, f = h + n * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(h < u % n) + (u / n >> 0)), c = f * r + l % r, c >= this.count) {
+            e.push(["onend"]);
             return;
           }
-          l.index = u, l.top = u * this.fwheight, l.data = this.flys[f];
+          i.index = f, i.top = f * this.fwheight, i.data = this.flys[c];
         },
         null,
         this.row,
         this.column,
         /* 显示区域第一行的索引 */
-        e.top / this.fwheight >> 0
-      );
+        s.index
+      ), this.trigger(e), e = null;
     },
     scroll(t) {
-      this.run(t || { target: this.flyweight });
+      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 i = this.flyweight, l = z(i, "clientHeight=>height,clientWidth=>width");
+      let s = this.flyweight, l = k(s, "clientHeight=>height,clientWidth=>width");
       this.$nextTick(() => {
-        let s = this.auto === !0, [h, n] = this.offset, r = l.width, u = l.height, f = ($(this.width, r) || r) + h, c = $(this.height, u) + n;
+        let i = this.auto === !0, [h, n] = this.offset, r = l.width, u = l.height, f = ($(this.width, r) || r) + h, c = $(this.height, u) + n;
         this.realH = c - n;
-        let o = r / f >> 0 || 1, g = u / c >> 0;
-        this.row = g + 2, this.column = o, this.fwheight = c;
-        let d;
-        s ? (f = (r / o >> 0) - h / o * (o - 1), d = h) : d = r % f / (o - 1) >> 0, this.realW = f, this.Height = Math.ceil(t / o) * c;
-        let w = Math.min(t, o * this.row), p = w - 1, a, b;
-        for (; w-- > 0; )
-          a = p - w, b = this.flys[a], i = e[a], g = a / o >> 0, this.$set(e, a, {
-            data: b,
-            top: g * c,
-            left: a % o * (f + d),
-            index: g
+        let o = r / f >> 0 || 1, p = u / c >> 0;
+        this.row = p + 2, this.column = o, this.fwheight = c;
+        let v;
+        i ? (f = (r / o >> 0) - h / o * (o - 1), v = h) : v = r % f / (o - 1) >> 0, this.realW = f, this.Height = Math.ceil(t / o) * c;
+        let S = Math.min(t, o * this.row), y = S - 1, a, z;
+        for (; S-- > 0; )
+          a = y - S, z = this.flys[a], s = e[a], p = a / o >> 0, this.$set(e, a, {
+            data: z,
+            top: p * c,
+            left: a % o * (f + v),
+            index: p
           });
-        e.length = p + 1;
-        let m = [];
-        u / c > p / o && m.push(["onend"]), this.scroll(), m.push(["update:space", {
-          row: (p / o >> 0) + 1,
+        e.length = y + 1;
+        let T = [];
+        u / c > y / o && T.push(["onend"]), this.scroll(), T.push(["update:space", {
+          row: (y / o >> 0) + 1,
           column: o,
           showrow: this.row,
           showcolumn: this.column
-        }]), this.trigger(m);
+        }]), this.trigger(T);
       });
     }
   }
 };
-function j(t, e, i, l, s, h) {
-  return _(), k("div", {
+function U(t, e, s, l, i, h) {
+  return _(), b("div", {
     ref: "flyweight",
-    class: O(["flyweight", {
-      "flyweight-active": s.actice
+    class: F(["flyweight", {
+      "flyweight-active": i.actice
     }]),
-    style: v({
-      "--width": s.realW + "px",
-      "--height": s.realH + "px"
+    style: g({
+      "--width": i.realW + "px",
+      "--height": i.realH + "px"
     }),
     onScroll: e[0] || (e[0] = (...n) => h.scroll && h.scroll(...n))
   }, [
-    L("div", {
+    x("div", {
       class: "flyweight-all",
-      style: v({
-        "--flyweight-height": s.Height + "px"
+      style: g({
+        "--flyweight-height": i.Height + "px"
       })
     }, [
-      (_(!0), k(E, null, S(s.flyweights, (n, r) => (_(), k("div", {
+      (_(!0), b(j, null, A(i.flyweights, (n, r) => (_(), b("div", {
         key: r,
-        style: v({
+        style: g({
           top: n.top + "px",
           left: n.left + "px"
         })
       }, [
-        T(t.$slots, "default", {
+        d(t.$slots, "default", {
           data: n.data,
           index: n.index
         }, void 0, !0)
       ], 4))), 128))
     ], 4),
-    s.flyweights.length ? T(t.$slots, "end", { key: 0 }, void 0, !0) : W("", !0)
+    i.flyweights.length ? d(t.$slots, "end", { key: 0 }, void 0, !0) : B("", !0)
   ], 38);
 }
-const M = /* @__PURE__ */ A(I, [["render", j], ["__scopeId", "data-v-f7462fc9"]]), R = [M], U = {
+const Y = /* @__PURE__ */ E(G, [["render", U], ["__scopeId", "data-v-5f77e7a2"]]);
+const q = {
+  name: "Card",
+  // inheritAttrs: false,
+  props: {
+    offset: {
+      type: [String, Array],
+      default: () => [0, 0, 0, 0]
+    },
+    background: {
+      type: String,
+      default: ""
+    },
+    border: {
+      type: String,
+      default: "1px"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    show: {
+      type: String,
+      default: ""
+    },
+    close: {
+      type: Object,
+      default: null
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      closecss: {},
+      $$attrs: {},
+      top: "0",
+      right: "0",
+      bottom: "0",
+      left: "0"
+    };
+  },
+  watch: {
+    close: {
+      handler(t) {
+        this.change(t);
+      },
+      deep: !0
+    },
+    offset: {
+      handler(t) {
+        this.offser(t);
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    isEmpty: I,
+    isSimplyType: H,
+    change(t) {
+      H(t) || (this.closecss = k(t, "color=>--s-card-close-color,*"));
+    },
+    offser(t) {
+      t = L(t) ? t.split(/\s*(?:,|\s+)\s*/) : t;
+      let e = k(t, "0=>top,1|0=>right,2|0=>bottom,3|1|0=>left", !0);
+      w(e, (s, l, i) => {
+        i[s] = l + "px";
+      }, e), C(this, e, !0);
+    }
+  },
+  mounted() {
+    this.change(this.close), this.offser(this.offset);
+  }
+}, J = { class: "card-title" }, K = { class: "card-content" };
+function P(t, e, s, l, i, h) {
+  return _(), b("div", {
+    class: "card",
+    style: g({
+      "--card-bgc": s.background,
+      "--card-bw": s.border,
+      "--card-height": s.height,
+      "--card-width": s.width,
+      "--top": i.top,
+      "--right": i.right,
+      "--bottom": i.bottom,
+      "--left": i.left
+    })
+  }, [
+    d(t.$slots, "default", {}, () => [
+      d(t.$slots, "title", {}, () => [
+        x("div", J, [
+          V(M(s.show || s.title) + " ", 1),
+          x("div", {
+            class: F(["card-close", { hide: h.isSimplyType(s.close) ? !s.close : !1 }]),
+            style: g(i.closecss),
+            onClick: e[0] || (e[0] = (n) => t.$emit("close"))
+          }, null, 6)
+        ])
+      ], !0),
+      d(t.$slots, "content", {}, () => [
+        x("div", K, [
+          d(t.$slots, "inner", {}, void 0, !0)
+        ])
+      ], !0)
+    ], !0)
+  ], 4);
+}
+const Q = /* @__PURE__ */ E(q, [["render", P], ["__scopeId", "data-v-74802ccb"]]), X = [Y, Q], et = {
   install(t) {
-    R.forEach((e) => {
-      t.component("s-" + e.name.toLowerCase(), e);
+    X.forEach((e) => {
+      t.component("S" + e.name, e), t.component(e.name + "S", e);
     });
   }
 };
 export {
-  M as Flyweight,
-  U as default
+  Q as Card,
+  Y as Flyweight,
+  et as default
 };

package/README.md

@@ -13,8 +13,68 @@
 
 ![安装](https://img.shields.io/badge/引用-import_{_Flyweight_}_from_"@soei/flyweight"-00bcd4?style=flat-square)
 
+## `安装`
+
+```
+npm i @soei/flyweight
+
+```
+
+`Vue3` 引入方式
+
+```html
+<script>
+  import { Flyweight } from "@soei/flyweight";
+</script>
+<!-- 非 <style scoped>  scoped-->
+<style>
+  @import "@soei/flyweight/dist/style.css";
+</style>
+```
+
+```javascript
+// main.js
+import "@soei/flyweight/dist/style.css";
+import flyweight from "@soei/flyweight";
+Vue.use(flyweight);
+// use.vue
+<s-flyweight ...></s-flyweight>
+<s-card ...></s-card>
+```
+
+## `引用`
+
+```javascript
+import { Flyweight, Card } from "@soei/flyweight";
+```
+
 ### 更新日志
 
+### `0.2.0`
+
+- #### 新增 Card 组件
+
+```html
+<s-card
+  title="标题"
+  class="flyweight"
+
+  // ** 布局 **
+  flex row center column
+
+  // ** 边距 **
+  offset="20, 0, 10, 0"
+
+  // ** 是否显示关闭按钮 **
+  :close="true"
+  @close="close"
+
+  // ** 插槽 **
+  [#content, #inner, #default]
+>
+</s-card>
+```
+
 ### `0.1.1`
 
 - #### 拼写错误修复

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@soei/flyweight",
   "private": false,
-  "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.1.1",
+  "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight, Card组件",
+  "version": "0.2.0",
   "type": "module",
   "main": "Flyweight.cjs",
   "module": "Flyweight.js",
   "files": [
     "Flyweight.cjs",
     "Flyweight.js",
-    "style.css",
-    "src/Flyweight.vue"
+    "style.css"
   ],
   "homepage": "https://alwbg.github.io",
   "scripts": {

package/style.css

@@ -1 +1 @@
-.flyweight[data-v-f7462fc9]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-f7462fc9]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-f7462fc9]>*{width:calc(var(--width));height:var(--height);position:absolute}
+.flyweight[data-v-5f77e7a2]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-5f77e7a2]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-5f77e7a2]>*{width:calc(var(--width));height:var(--height);position:absolute}.card[data-v-74802ccb]{position:relative;background-color:var(--card-bgc);height:100%;width:100%;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))}.card[simply][data-v-74802ccb],.card [simply][data-v-74802ccb]{background-color:inherit;border:0!important}.card[flex][data-v-74802ccb],.card [flex][data-v-74802ccb]{display:flex}.card[column][data-v-74802ccb],.card [column][data-v-74802ccb]{flex-direction:column}.card[row][data-v-74802ccb],.card [row][data-v-74802ccb]{flex-direction:row}.card[center][data-v-74802ccb],.card [center][data-v-74802ccb]{justify-content:center}.card[vcenter][data-v-74802ccb],.card [vcenter][data-v-74802ccb]{align-items:center}.card .card-title[data-v-74802ccb]{max-height:40px}.card .card-close[data-v-74802ccb]{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-74802ccb]{display:none}.card .card-close[data-v-74802ccb]:before,.card .card-close[data-v-74802ccb]: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-74802ccb]:before{transform:rotate(var(--s-transform, 45deg))}.card .card-close[data-v-74802ccb]:after{transform:rotate(calc(0deg - var(--s-transform, 45deg)))}.card .card-close[data-v-74802ccb]:hover:before{transform:rotate(var(--s-hover-transform, 45deg))}.card .card-close[data-v-74802ccb]:hover:after{transform:rotate(calc(0deg - var(--s-hover-transform, 45deg)))}.card .card-content[data-v-74802ccb]{overflow:auto}