@soei/flyweight 0.0.3 → 0.0.4

package/LICENSE

@@ -0,0 +1,7 @@
+The ISC License (ISC)
+
+Copyright 2016-present  soei(alwbg@163.com)
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -9,6 +9,27 @@
 
 ### 更新日志
 
+### `0.0.4`
+
+- #### 扩展 `width` 赋值
+  ```html
+  <!-- 添加`百分比`计算, 计算顺序, 左 => 右 -->
+  <s-flyweight width="100% / 2 - 10px"></s-flyweight>
+  <s-flyweight width="calc(100% - 100px)"></s-flyweight>
+  <s-flyweight width="100% - 100px"></s-flyweight>
+  <s-flyweight width="100px - 10px"></s-flyweight>
+  <s-flyweight width="100px"></s-flyweight>
+  ```
+- #### 优化了 slot `end` 的呈现逻辑
+
+  ```html
+  <!-- onend为滑动到底时, 回调函数 -->
+  <s-flyweight :flys="..." @onend="...">
+    <template #default="{ data, index }"> 呈现内容 {{data.*}} </template>
+    <template #end> ...显示在最下面的相关信息 </template>
+  </s-flyweight>
+  ```
+
 ### `0.0.3`
 
 - #### 新增 `:top`

package/package.json

@@ -2,12 +2,14 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/Flyweight.cjs",
   "module": "dist/Flyweight.js",
   "files": [
-    "dist",
+    "dist/Flyweight.cjs",
+    "dist/Flyweight.js",
+    "dist/style.css",
     "src/Flyweight.vue"
   ],
   "scripts": {

package/src/Flyweight.vue

@@ -2,13 +2,13 @@
     <div ref="flyweight" class="flyweight" :class="{
         'flyweight-active': actice
     }" :style="{
-        '--width': width ? width + 'px' : '100%',
-        '--height': height + 'px'
+        '--width': realW + 'px',
+        '--height': realH + 'px'
     }" @scroll="scroll">
         <div class="flyweight-all" :style="{
         '--flyweight-height': Height + 'px'
     }">
-            <div v-for="(item, index) in flyweights" :key="index" :style="{
+            <div v-for="(item, index) in flyweights" :key="index" :data="item.top" :style="{
         top: item.top + 'px',
         left: item.left + 'px',
     }">
@@ -26,10 +26,43 @@ let isNil = (data) => {
     return data == null || data == undefined;
 }
 
+let Rs = /(\d+|[+\-\*/]|%)/g;
+
+let math = {
+    '+': (a, b) => a + b,
+    '-': (a, b) => a - b,
+    '*': (a, b) => a * b,
+    '/': (a, b) => a / b,
+    '%': (a, b, c) => parseFloat(a) / 100 * c,
+}
+/* 从左到右顺序计算, 100% - 100px px单位会被忽略 */
+let computer = (W, width) => {
+    let data;
+    if (data = runer('match', W, Rs)) {
+        let mark = data.length, re, T = 0, op, args = [];
+        while (mark--) {
+            T = data.shift();
+            if (T in math) {
+                re && args.push(re);
+                if (T === '%') args.length = 2;
+                op = T;
+            } else {
+                +T && args.push(+T)
+            }
+            if (args.length == 2) {
+                args.push(width);
+                re = math[op].apply(null, args);
+                args.length = 0;
+            }
+        }
+        if (!(+re)) re = +args.pop()
+        W = re >> 0;
+    }
+    return W;
+}
 let Log = (...args) => {
     console.info('::::FLYWEIGHT', ...args);
 }
-
 export default {
     name: 'Flyweight',
     props: {
@@ -85,7 +118,9 @@ export default {
             fwheight: 10,
 
             count: 0,
-            task: []
+            task: [],
+            realW: 0,
+            realH: 0
         }
     },
     watch: {
@@ -133,6 +168,9 @@ export default {
         }
     },
     methods: {
+        trigger(key) {
+            this.lazyrun(() => this.$emit(key, true));
+        },
         cheackflys(data) {
             let length = this.flys.length;
             if (!length) {
@@ -183,11 +221,11 @@ export default {
                 i = index * column + k % column;
 
                 if (i >= this.count) {
-                    this.lazyrun(() => this.$emit('onend', true));
+                    this.trigger('onend');
                     return /* true */;
                 }
                 v.index = index;
-                v.top = v.index * this.fwheight;
+                v.top = index * this.fwheight;
                 v.data = this.flys[i];
             },
                 null,
@@ -200,45 +238,47 @@ export default {
         scroll(e) {
             this.run(e || { target: this.flyweight });
         },
-
         re() {
+            let size = this.count || this.flys.length;
+            let fws = this.flyweights;
+            if (!size) return fws.length = size;
             let flyweight = this.flyweight;
             let wh = picker(flyweight, 'clientHeight=>height,clientWidth=>width');
             this.$nextTick(() => {
-                let [x, y] = this.offset,
-                    W = this.width;
-                if (W == 0) {
-                    W = wh.width;
-                }
-                let width = W + x;
-                let height = this.height + y;
-                let column = wh.width / width >> 0,
-                    row = wh.height / height >> 0;
+                let [x, y] = this.offset, W = wh.width, H = wh.height;
+                let width = (computer(this.width, W) || W) + x;
+                let height = computer(this.height, H) + y/* 偏移量填充宽度 */;
+                this.realW = width - x;
+                this.realH = height - y/* 实际高度减掉偏移量 */;
+                let column = (W / width >> 0) || 1,
+                    row = H / height >> 0;
                 this.row = row + 2/* 上下各一行补位 */;
                 this.column = column;
                 this.fwheight = height;
+                let offset = W % width;
                 /* 偏移量 */
-                let margin = (wh.width % width) / (column - 1) >> 0;
+                let margin = offset / (column - 1) >> 0;
                 /* 总高度 */
-                this.Height = Math.ceil(this.count / column) * height;
+                this.Height = Math.ceil(size / column) * height;
                 /* 计算数量 */
-                let count = Math.min(this.count, column * this.row),
+                let count = Math.min(size, column * this.row),
                     length = count - 1,
                     index,
                     fly;
                 while (count-- > 0) {
                     index = length - count;
                     fly = this.flys[index];
-                    flyweight = this.flyweights[index];
-                    this.$set(this.flyweights, index, {
+                    flyweight = fws[index];
+                    row = index / column >> 0;
+                    this.$set(fws, index, {
                         data: fly,
-                        top: (index / column >> 0) * height,
+                        top: row * height,
                         left: (index % column) * (width + margin),
-                        index: index / column >> 0
+                        index: row
                     })
                 }
-                this.flyweights.length = length + 1;
-
+                fws.length = length + 1;
+                if (H / height > length) this.trigger('onend');
                 this.scroll()
             });
         }
@@ -257,7 +297,7 @@ export default {
         height: var(--flyweight-height);
 
         &>* {
-            width: var(--width);
+            width: calc(var(--width));
             height: var(--height);
             position: absolute;
         }

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>