@soei/flyweight 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -4
- package/dist/Flyweight.cjs +1 -1
- package/dist/Flyweight.js +53 -49
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/Flyweight.vue +9 -3
package/README.md
CHANGED
|
@@ -9,16 +9,59 @@
|
|
|
9
9
|
|
|
10
10
|
### 更新日志
|
|
11
11
|
|
|
12
|
-
### `0.0.
|
|
12
|
+
### `0.0.8`
|
|
13
13
|
|
|
14
|
-
- #### 新增
|
|
14
|
+
- #### 新增 `v-model:space`, 计算空间显示 `行` 与 `列`
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
被通知对象 `notice`: {`row`, `column`}
|
|
17
17
|
|
|
18
18
|
```html
|
|
19
|
-
|
|
19
|
+
<!-- eg.
|
|
20
|
+
当有5个元素,
|
|
21
|
+
当: :width="100% / 3", column = 3列, row = 2,
|
|
22
|
+
当: :width="100% / 5", column = 5列, row = 1,
|
|
23
|
+
当: :width="100% / 7", column = 7列, row = 1
|
|
24
|
+
...
|
|
25
|
+
-->
|
|
26
|
+
<!-- VUE3 -->
|
|
27
|
+
<template>
|
|
28
|
+
<s-flyweight v-model:space="notice"></s-flyweight>
|
|
29
|
+
</template>
|
|
30
|
+
<script setup>
|
|
31
|
+
let notice = ref({ row: 0, column: 0 });
|
|
32
|
+
watch(
|
|
33
|
+
() => notice.value,
|
|
34
|
+
(val) => {
|
|
35
|
+
console.log(val);
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<!-- VUE2 -->
|
|
41
|
+
<template>
|
|
42
|
+
<s-flyweight :space.sync="notice"></s-flyweight>
|
|
43
|
+
</template>
|
|
44
|
+
<script>
|
|
45
|
+
export default {
|
|
46
|
+
data() {
|
|
47
|
+
return {
|
|
48
|
+
notice: { row: 0, column: 0 },
|
|
49
|
+
};
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
</script>
|
|
20
53
|
```
|
|
21
54
|
|
|
55
|
+
### `0.0.7`
|
|
56
|
+
|
|
57
|
+
- #### 新增 `:auto`, 默认值: `false`
|
|
58
|
+
|
|
59
|
+
当 `auto` 为 `true` 时, `:width` 赋值会被视为 `最小值`, 剩余空间自动填充
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<s-flyweight :auto="true" :width="100"></s-flyweight>
|
|
63
|
+
```
|
|
64
|
+
|
|
22
65
|
### `0.0.6`
|
|
23
66
|
|
|
24
67
|
- #### 优化 `flys` 初始化赋值,不改变时,获取 length 问题
|
package/dist/Flyweight.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@soei/util"),o=require("vue");const z=(e,t)=>{const l=e.__vccOpts||e;for(const[n,i]of t)l[n]=i;return l};let x=e=>e==null||e==null,T=/(\d+|[+\-\*/]|%)/g,_={"+":(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,T)){let n=l.length,i,s=0,h,r=[];for(;n--;)s=l.shift(),s in _?(i&&r.push(i),s==="%"&&(r.length=2),h=s):+s&&r.push(+s),r.length==2&&(r.push(t),i=_[h].apply(null,r),r.length=0);+i||(i=+r.pop()),e=i>>0}return e},H=(...e)=>{console.info("::::FLYWEIGHT",...e)};const N={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,l)=>{e[t]=l}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){H(e)}},methods:{trigger(e,t){this.lazyrun(()=>this.$emit(e,x(t)?!0:t))},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,(n,i,s,h)=>{if(i[s]==h)return n},t.picker,t.id);x(l)||this.setindex(l)}],this,e)},setindex(e){c.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let l=t/this.column>>0,n=this.fwheight;(this.flyweight.scrollTop/n>>0)+this.row-l-1>0||(this.flyweight.scrollTop=l*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=c.picker(e.target,"scrollTop=>top");c.each(this.flyweights,(l,n,i,s,h,r,a,f)=>{if(i=l/h>>0,a=i+s*(+(i<r%s)+(r/s>>0)),f=a*h+l%h,f>=this.count){this.trigger("onend");return}n.index=a,n.top=a*this.fwheight,n.data=this.flys[f]},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 l=this.flyweight,n=c.picker(l,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let i=this.auto===!0,[s,h]=this.offset,r=n.width,a=n.height,f=(v(this.width,r)||r)+s,g=v(this.height,a)+h;this.realW=f-s,this.realH=g-h;let u=r/f>>0||1,d=a/g>>0;this.row=d+2,this.column=u,this.fwheight=g;let m=r%f/(u-1*+!i)>>0;i&&(f=this.realW=(r/u>>0)-s,m=s),this.Height=Math.ceil(e/u)*g;let w=Math.min(e,u*this.row),p=w-1,y,k;for(;w-- >0;)y=p-w,k=this.flys[y],l=t[y],d=y/u>>0,this.$set(t,y,{data:k,top:d*g,left:y%u*(f+m),index:d});t.length=p+1,a/g>p&&this.trigger("onend"),this.scroll(),this.trigger("update:space",{row:(p/u>>0)+1,column:u})})}}},S=["data"];function B(e,t,l,n,i,s){return o.openBlock(),o.createElementBlock("div",{ref:"flyweight",class:o.normalizeClass(["flyweight",{"flyweight-active":i.actice}]),style:o.normalizeStyle({"--width":i.realW+"px","--height":i.realH+"px"}),onScroll:t[0]||(t[0]=(...h)=>s.scroll&&s.scroll(...h))},[o.createElementVNode("div",{class:"flyweight-all",style:o.normalizeStyle({"--flyweight-height":i.Height+"px"})},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.flyweights,(h,r)=>(o.openBlock(),o.createElementBlock("div",{key:r,data:h.top,style:o.normalizeStyle({top:h.top+"px",left:h.left+"px"})},[o.renderSlot(e.$slots,"default",{data:h.data,index:h.index},void 0,!0)],12,S))),128))],4),i.flyweights.length?o.renderSlot(e.$slots,"end",{key:0},void 0,!0):o.createCommentVNode("",!0)],38)}const b=z(N,[["render",B],["__scopeId","data-v-84a26ea4"]]),F=[b],O={install(e){F.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=b;exports.default=O;
|
package/dist/Flyweight.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { runer as
|
|
2
|
-
import { openBlock as w, createElementBlock as m, normalizeClass as
|
|
3
|
-
const
|
|
4
|
-
const
|
|
1
|
+
import { runer as p, each as v, picker as b } from "@soei/util";
|
|
2
|
+
import { openBlock as w, createElementBlock as m, normalizeClass as $, normalizeStyle as x, createElementVNode as F, Fragment as O, renderList as L, renderSlot as z, createCommentVNode as W } from "vue";
|
|
3
|
+
const E = (t, e) => {
|
|
4
|
+
const l = t.__vccOpts || t;
|
|
5
5
|
for (const [n, i] of e)
|
|
6
|
-
|
|
7
|
-
return
|
|
6
|
+
l[n] = i;
|
|
7
|
+
return l;
|
|
8
8
|
};
|
|
9
|
-
let
|
|
9
|
+
let T = (t) => t == null || t == null, S = /(\d+|[+\-\*/]|%)/g, H = {
|
|
10
10
|
"+": (t, e) => t + e,
|
|
11
11
|
"-": (t, e) => t - e,
|
|
12
12
|
"*": (t, e) => t * e,
|
|
13
13
|
"/": (t, e) => t / e,
|
|
14
|
-
"%": (t, e,
|
|
15
|
-
},
|
|
16
|
-
let
|
|
17
|
-
if (
|
|
18
|
-
let n =
|
|
14
|
+
"%": (t, e, l) => parseFloat(t) / 100 * l
|
|
15
|
+
}, N = (t, e) => {
|
|
16
|
+
let l;
|
|
17
|
+
if (l = p("match", t, S)) {
|
|
18
|
+
let n = l.length, i, s = 0, h, r = [];
|
|
19
19
|
for (; n--; )
|
|
20
|
-
|
|
20
|
+
s = l.shift(), s in H ? (i && r.push(i), s === "%" && (r.length = 2), h = s) : +s && r.push(+s), r.length == 2 && (r.push(e), i = H[h].apply(null, r), r.length = 0);
|
|
21
21
|
+i || (i = +r.pop()), t = i >> 0;
|
|
22
22
|
}
|
|
23
23
|
return t;
|
|
@@ -66,6 +66,10 @@ const C = {
|
|
|
66
66
|
auto: {
|
|
67
67
|
type: [Boolean, String],
|
|
68
68
|
default: !1
|
|
69
|
+
},
|
|
70
|
+
space: {
|
|
71
|
+
type: Object,
|
|
72
|
+
default: () => null
|
|
69
73
|
}
|
|
70
74
|
},
|
|
71
75
|
computed: {
|
|
@@ -112,8 +116,8 @@ const C = {
|
|
|
112
116
|
}
|
|
113
117
|
},
|
|
114
118
|
mounted() {
|
|
115
|
-
this.flyweights = [], this.$set || (this.$set = (t, e,
|
|
116
|
-
t[e] =
|
|
119
|
+
this.flyweights = [], this.$set || (this.$set = (t, e, l) => {
|
|
120
|
+
t[e] = l;
|
|
117
121
|
}), this.setindex(this.index);
|
|
118
122
|
try {
|
|
119
123
|
new ResizeObserver(() => {
|
|
@@ -124,47 +128,47 @@ const C = {
|
|
|
124
128
|
}
|
|
125
129
|
},
|
|
126
130
|
methods: {
|
|
127
|
-
trigger(t) {
|
|
128
|
-
this.lazyrun(() => this.$emit(t, !0));
|
|
131
|
+
trigger(t, e) {
|
|
132
|
+
this.lazyrun(() => this.$emit(t, T(e) ? !0 : e));
|
|
129
133
|
},
|
|
130
134
|
cheackflys(t) {
|
|
131
135
|
if (!this.flys.length)
|
|
132
136
|
return t && this.task.push(t), !0;
|
|
133
137
|
},
|
|
134
138
|
setview(t) {
|
|
135
|
-
|
|
139
|
+
p([this.cheackflys, (e) => {
|
|
136
140
|
e = e || {};
|
|
137
|
-
let
|
|
138
|
-
if (i[
|
|
141
|
+
let l = e.index || v(this.flys, (n, i, s, h) => {
|
|
142
|
+
if (i[s] == h)
|
|
139
143
|
return n;
|
|
140
144
|
}, e.picker, e.id);
|
|
141
|
-
|
|
145
|
+
T(l) || this.setindex(l);
|
|
142
146
|
}], this, t);
|
|
143
147
|
},
|
|
144
148
|
setindex(t) {
|
|
145
|
-
|
|
149
|
+
p([this.cheackflys, ({ index: e }) => {
|
|
146
150
|
this.$nextTick(() => {
|
|
147
|
-
let
|
|
148
|
-
(this.flyweight.scrollTop / n >> 0) + this.row -
|
|
151
|
+
let l = e / this.column >> 0, n = this.fwheight;
|
|
152
|
+
(this.flyweight.scrollTop / n >> 0) + this.row - l - 1 > 0 || (this.flyweight.scrollTop = l * n, this.scroll());
|
|
149
153
|
});
|
|
150
154
|
}], this, { index: t });
|
|
151
155
|
},
|
|
152
156
|
lazyrun(t, e) {
|
|
153
157
|
clearTimeout(this.time), this.time = setTimeout(() => {
|
|
154
|
-
|
|
158
|
+
p(t);
|
|
155
159
|
}, e || this.lazy);
|
|
156
160
|
},
|
|
157
161
|
run(t) {
|
|
158
162
|
let e = b(t.target, "scrollTop=>top");
|
|
159
163
|
v(
|
|
160
164
|
this.flyweights,
|
|
161
|
-
(
|
|
162
|
-
if (i =
|
|
163
|
-
(+(i < r %
|
|
165
|
+
(l, n, i, s, h, r, a, o) => {
|
|
166
|
+
if (i = l / h >> 0, a = i + s * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
|
|
167
|
+
(+(i < r % s) + (r / s >> 0)), o = a * h + l % h, o >= this.count) {
|
|
164
168
|
this.trigger("onend");
|
|
165
169
|
return;
|
|
166
170
|
}
|
|
167
|
-
n.index =
|
|
171
|
+
n.index = a, n.top = a * this.fwheight, n.data = this.flys[o];
|
|
168
172
|
},
|
|
169
173
|
null,
|
|
170
174
|
this.row,
|
|
@@ -181,46 +185,46 @@ const C = {
|
|
|
181
185
|
if (!t)
|
|
182
186
|
return e.length = t;
|
|
183
187
|
this.count = t;
|
|
184
|
-
let
|
|
188
|
+
let l = this.flyweight, n = b(l, "clientHeight=>height,clientWidth=>width");
|
|
185
189
|
this.$nextTick(() => {
|
|
186
|
-
let i = this.auto === !0, [
|
|
187
|
-
this.realW = o -
|
|
188
|
-
let
|
|
189
|
-
this.row = g + 2, this.column =
|
|
190
|
-
let _ = r % o / (
|
|
191
|
-
i && (o = this.realW = (r /
|
|
192
|
-
let d = Math.min(t,
|
|
190
|
+
let i = this.auto === !0, [s, h] = this.offset, r = n.width, a = n.height, o = (N(this.width, r) || r) + s, u = N(this.height, a) + h;
|
|
191
|
+
this.realW = o - s, this.realH = u - h;
|
|
192
|
+
let f = r / o >> 0 || 1, g = a / u >> 0;
|
|
193
|
+
this.row = g + 2, this.column = f, this.fwheight = u;
|
|
194
|
+
let _ = r % o / (f - 1 * +!i) >> 0;
|
|
195
|
+
i && (o = this.realW = (r / f >> 0) - s, _ = s), this.Height = Math.ceil(t / f) * u;
|
|
196
|
+
let d = Math.min(t, f * this.row), y = d - 1, c, k;
|
|
193
197
|
for (; d-- > 0; )
|
|
194
|
-
c =
|
|
198
|
+
c = y - d, k = this.flys[c], l = e[c], g = c / f >> 0, this.$set(e, c, {
|
|
195
199
|
data: k,
|
|
196
200
|
top: g * u,
|
|
197
|
-
left: c %
|
|
201
|
+
left: c % f * (o + _),
|
|
198
202
|
index: g
|
|
199
203
|
});
|
|
200
|
-
e.length =
|
|
204
|
+
e.length = y + 1, a / u > y && this.trigger("onend"), this.scroll(), this.trigger("update:space", { row: (y / f >> 0) + 1, column: f });
|
|
201
205
|
});
|
|
202
206
|
}
|
|
203
207
|
}
|
|
204
208
|
}, I = ["data"];
|
|
205
|
-
function
|
|
209
|
+
function j(t, e, l, n, i, s) {
|
|
206
210
|
return w(), m("div", {
|
|
207
211
|
ref: "flyweight",
|
|
208
|
-
class:
|
|
212
|
+
class: $(["flyweight", {
|
|
209
213
|
"flyweight-active": i.actice
|
|
210
214
|
}]),
|
|
211
215
|
style: x({
|
|
212
216
|
"--width": i.realW + "px",
|
|
213
217
|
"--height": i.realH + "px"
|
|
214
218
|
}),
|
|
215
|
-
onScroll: e[0] || (e[0] = (...h) =>
|
|
219
|
+
onScroll: e[0] || (e[0] = (...h) => s.scroll && s.scroll(...h))
|
|
216
220
|
}, [
|
|
217
|
-
|
|
221
|
+
F("div", {
|
|
218
222
|
class: "flyweight-all",
|
|
219
223
|
style: x({
|
|
220
224
|
"--flyweight-height": i.Height + "px"
|
|
221
225
|
})
|
|
222
226
|
}, [
|
|
223
|
-
(w(!0), m(
|
|
227
|
+
(w(!0), m(O, null, L(i.flyweights, (h, r) => (w(), m("div", {
|
|
224
228
|
key: r,
|
|
225
229
|
data: h.top,
|
|
226
230
|
style: x({
|
|
@@ -234,17 +238,17 @@ function A(t, e, s, n, i, l) {
|
|
|
234
238
|
}, void 0, !0)
|
|
235
239
|
], 12, I))), 128))
|
|
236
240
|
], 4),
|
|
237
|
-
i.flyweights.length ? z(t.$slots, "end", { key: 0 }, void 0, !0) :
|
|
241
|
+
i.flyweights.length ? z(t.$slots, "end", { key: 0 }, void 0, !0) : W("", !0)
|
|
238
242
|
], 38);
|
|
239
243
|
}
|
|
240
|
-
const
|
|
244
|
+
const A = /* @__PURE__ */ E(C, [["render", j], ["__scopeId", "data-v-84a26ea4"]]), M = [A], U = {
|
|
241
245
|
install(t) {
|
|
242
|
-
|
|
246
|
+
M.forEach((e) => {
|
|
243
247
|
t.component("s-" + e.name.toLowerCase(), e);
|
|
244
248
|
});
|
|
245
249
|
}
|
|
246
250
|
};
|
|
247
251
|
export {
|
|
248
|
-
|
|
252
|
+
A as Flyweight,
|
|
249
253
|
U as default
|
|
250
254
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flyweight[data-v-
|
|
1
|
+
.flyweight[data-v-84a26ea4]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-84a26ea4]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-84a26ea4]>*{width:calc(var(--width));height:var(--height);position:absolute}
|
package/package.json
CHANGED
package/src/Flyweight.vue
CHANGED
|
@@ -104,6 +104,10 @@ export default {
|
|
|
104
104
|
auto: {
|
|
105
105
|
type: [Boolean, String],
|
|
106
106
|
default: false
|
|
107
|
+
},
|
|
108
|
+
space: {
|
|
109
|
+
type: Object,
|
|
110
|
+
default: () => (null)
|
|
107
111
|
}
|
|
108
112
|
},
|
|
109
113
|
computed: {
|
|
@@ -171,8 +175,8 @@ export default {
|
|
|
171
175
|
}
|
|
172
176
|
},
|
|
173
177
|
methods: {
|
|
174
|
-
trigger(key) {
|
|
175
|
-
this.lazyrun(() => this.$emit(key, true));
|
|
178
|
+
trigger(key, data) {
|
|
179
|
+
this.lazyrun(() => this.$emit(key, isNil(data) ? true : data));
|
|
176
180
|
},
|
|
177
181
|
cheackflys(data) {
|
|
178
182
|
let length = this.flys.length;
|
|
@@ -288,7 +292,9 @@ export default {
|
|
|
288
292
|
}
|
|
289
293
|
fws.length = length + 1;
|
|
290
294
|
if (H / height > length) this.trigger('onend');
|
|
291
|
-
this.scroll()
|
|
295
|
+
this.scroll();
|
|
296
|
+
/* 计算占用空间 */
|
|
297
|
+
this.trigger('update:space', { row: (length / column >> 0) + 1, column: column });
|
|
292
298
|
});
|
|
293
299
|
}
|
|
294
300
|
}
|