efront 3.22.2 → 3.22.5

package/coms/zimoli/table.less

@@ -7,12 +7,11 @@
 
             >th,
             >td {
-                box-shadow: 1px 0 0 0 #00000033, -1px 0 0 0 #00000033;
+                &:not(.y-ing) {
+                    box-shadow: 1px 0 0 0 #00000033, -1px 0 0 0 #00000033;
+                }
             }
 
-            &:insert {
-                background: #999;
-            }
         }
     }
 
@@ -32,12 +31,22 @@ table,
     vertical-align: top;
 }
 
-& {
-    outline: 1px solid #0006;
+
+tr {
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
 }
 
+th,
+td {
+    white-space: normal;
+    height: 100%;
+    padding: 2px 10px;
+}
 
-.y-ing {
+.y-ing,
+.x-ing {
     &:before {
         content: "";
         position: absolute;
@@ -45,7 +54,7 @@ table,
         top: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 0, 0, .06);
+        background-color: rgba(0, 60, 69, .06);
     }
 
     >* {
@@ -53,28 +62,70 @@ table,
     }
 }
 
-@cell-padding: 0 10px;
 
 & {
     // text-align: center;
+    outline: 1px solid #0006;
+    max-width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
     white-space: nowrap;
+    height: auto;
+    border-radius: 3px;
+}
+
+[row-index] {
+    user-select: none;
+    width: 56px;
+    padding-right: 10px;
+    text-align: right;
+}
+
+>tbody {
+    [row-index] {
+        background: #fff;
+    }
+}
+
+[fixed] {
+    z-index: 2;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+}
+
+>tfoot {
+    width: 100%;
+    display: block;
+    position: relative;
+    color: #bbb;
+
+    >tr {
+        width: 100%;
+        display: block;
+
+        >td {
+            display: block;
+            width: 100%;
+        }
+    }
 
+    pagination {
+        width: 100%;
+    }
 }
 
 >thead {
     user-select: none;
     line-height: 36px;
+    min-width: 100%;
 
     >tr {
 
         >td,
         >th {
-            padding: @cell-padding;
             position: relative;
             color: #fff;
-            background-color: #999;
+            background-color: #395268;
         }
     }
 }
@@ -83,40 +134,36 @@ table,
     line-height: 32px;
     height: 100%;
     min-height: 30px;
-    border-top: 4px solid #6669;
-
-
-
     user-select: auto;
 
     >tr {
 
         >td,
         >th {
-            padding: @cell-padding;
             position: relative;
             overflow: hidden;
         }
 
         &:nth-of-type(odd) {
-            background-color: #eee;
-        }
 
-        &:nth-of-type(even) {
-            background-color: #fff;
+            >td,
+            >th {
+                background-color: #fff;
+            }
         }
 
-
-        &:hover {
+        &:nth-of-type(even) {
 
             >td,
-            >th {
-                background: #dddddd;
+            th {
+                background-color: #f8fbfd;
             }
         }
+
+
     }
 
-    >tr[insert] {
+    >tr[thead] {
         position: sticky;
         top: 0;
         z-index: 1;
@@ -131,18 +178,13 @@ table,
 }
 
 
-tr {
+[inline-block] {
 
     >th,
     >td {
-        background: inherit;
-
-        &[row-index] {
-            user-select: none;
-            // pointer-events: none;
-            background: #fff;
-            text-align: right;
-        }
+        white-space: nowrap;
+        overflow: hidden;
+        display: inline-block;
     }
 }
 

package/coms/zimoli/table_test.html

@@ -0,0 +1,32 @@
+<thead>
+    <tr>
+        <td colspan=2><span>1</span></td>
+        <td rowspan=2><span>th1</span></td>
+        <td>th3</td>
+        <td>th4</td>
+    </tr>
+    <tr>
+        <td>th3</td>
+        <td>th4</td>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td rowspan=2>td1</td>
+        <td>td2</td>
+        <td>td3</td>
+        <td>td4</td>
+    </tr>
+    <tr>
+        <td>td2</td>
+        <td>td3</td>
+        <td>td4</td>
+    </tr>
+    <tr>
+        <td rowspan=2>td1</td>
+        <td>td2</td>
+    </tr>
+    <tr>
+        <td>&nbsp;</td>
+    </tr>
+</tbody>

package/coms/zimoli/table_test.js

@@ -1,12 +1,5 @@
 function table_test() {
-    var data = new Array(100).fill(0).map(function () {
-        return {
-            name: random(random$name),
-            tel: random(random$phone)
-        };
-    });
     var datatable = table();
-    datatable.innerHTML = `<thead><tr><td colspan=2><span>1</span></td><td rowspan=2><span>th1</span></td><td>th3</td><td>th4</td></tr><tr><td>th3</td><td>th4</td></tr></thead><tbody><tr><td rowspan=2>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td rowspan=2>td1</td><td>td2</td></tr></tbody>`;
-    console.log(datatable);
+    datatable.innerHTML = template;
     return datatable;
 }

package/coms/zimoli/vbox.js

@@ -6,17 +6,21 @@ function ybox(generator) {
     } else {
         _box = createElement(div);
     }
-    _box.height = function () {
+    var _tmp = isFunction(generator) && generator(_box);
+    if (isNode(_tmp)) _box = _tmp;
+    var _box_height = _box.$height || _box.height;
+    var _box_Height = _box.$Height || _box.Height;
+    var _box_Top = _box.$Top || _box.Top;
+    if (!isFunction(_box_height)) _box_height = function () {
         return _box.clientHeight;
     };
-    isFunction(generator) && generator(_box);
     // totalHeight
-    _box.Height = _box.Height || function () {
+    if (!isFunction(_box_Height)) _box_Height = function () {
         return _box.scrollHeight;
     };
     // currentTop
     var _scrolledTop = _box.scrollTop;
-    _box.Top = _box.Top || function (top) {
+    if (!isFunction(_box_Top)) _box_Top = function (top) {
         if (isNumber(top)) {
             if (_box.scrollTop !== top) {
                 _box.scrollTop = top;
@@ -25,17 +29,20 @@ function ybox(generator) {
         }
         return _box.scrollTop;
     };
-    _box.scrollY = function (deltay, useIncrease = true) {
-        var _Top = _box.Top();
+    if (_box.$Height !== _box_Height) _box.$Height = _box_Height;
+    if (_box.$height !== _box_height) _box.$height = _box_height;
+    if (_box.$Top !== _box_Top) _box.$Top = _box_Top;
+    _box.$scrollY = function (deltay, useIncrease = _box.useIncrease !== false) {
+        var _Top = _box.$Top();
         var top = _Top + deltay;
-        var height = _box.height();
-        var scrollHeight = _box.Height();
+        var height = _box.$height();
+        var scrollHeight = _box.$Height();
         var r = true;
         if (top < 0) {
             if (useIncrease && _Top <= 0) {
                 r = increase(top);
             }
-            _box.Top(0);
+            _box.$Top(0);
         } else if (top + height >= scrollHeight) {
             if (top + height - scrollHeight > increase_height) {
                 top = increase_height + scrollHeight - height;
@@ -43,9 +50,9 @@ function ybox(generator) {
             if (useIncrease && top + height >= scrollHeight) {
                 r = increase(top + height - scrollHeight);
             }
-            _box.Top(top);
+            _box.$Top(top);
         } else {
-            r = top !== _box.Top(top);
+            r = top !== _box.$Top(top);
             increase(deltay, true);
         }
         return r;
@@ -57,14 +64,14 @@ function ybox(generator) {
     var _decrease = function (increaser) {
         var height = parseInt(increaser.height);
         if (height > 1) {
-            var scrollTop = _box.Top();
+            var scrollTop = _box.$Top();
             if (scrollTop > 0 && increaser_t === increaser) {
                 var deltaY = scrollTop > height ? height : scrollTop;
                 height -= deltaY;
-                _box.Top(scrollTop - deltaY);
+                _box.$Top(scrollTop - deltaY);
             }
-            var tH = _box.Height();
-            var bH = _box.height();
+            var tH = _box.$Height();
+            var bH = _box.$height();
             if (scrollTop + bH < tH && increaser_b === increaser) {
                 var deltaY = tH - bH - scrollTop > height ? height : tH - bH - scrollTop;
                 height -= deltaY;
@@ -81,7 +88,7 @@ function ybox(generator) {
         remove(increaser);
         return 0;
     };
-    var stop = _box.stopY;
+    var stop = _box.$stopY || _box.stopY;
     var stop2 = lazy(function () {
         scrollY.smooth(stop);
     }, 40);
@@ -128,6 +135,7 @@ function ybox(generator) {
     } else {
         var wheelTime = 0;
         onmousewheel(_box, function (event) {
+            event.preventDefault();
             if (event.timeStamp - wheelTime > 40 && Math.abs(event.deltaY) < 12) {
                 wheelTime = event.timeStamp;
                 return;
@@ -151,7 +159,7 @@ function ybox(generator) {
                 scrollY.reset();
             },
             move(scrolled) {
-                var y = -this.Top();
+                var y = -_box.$Top();
                 if (scrolled) {
                     var { deltay } = scrolled;
                     scrollY.call(this, -deltay);

package/coms/zimoli/vscroll.js

@@ -1,22 +1,22 @@
 var scroll = function () {
     var scrollY = function (deltay, useIncrease) {
         deltay = scrollOutside.call(this, deltay);
-        if (isFunction(this.scrollY)) return this.scrollY(deltay, useIncrease);
+        if (isFunction(this.$scrollY)) return this.$scrollY(deltay, useIncrease);
         var scrollTop = this.scrollTop;
         this.scrollTop += deltay;
         if (this.scrollTop === scrollTop) return false;
     };
 
     var Height = function () {
-        if (isFunction(this.Height)) return this.Height();
+        if (isFunction(this.$Height)) return this.$Height();
         return this.scrollHeight;
     };
     var Top = function () {
-        if (isFunction(this.Top)) return this.Top();
+        if (isFunction(this.$Top)) return this.$Top();
         return this.scrollTop;
     };
     var height = function () {
-        if (isFunction(this.height)) return this.height();
+        if (isFunction(this.height)) return this.$height();
         return this.clientHeight;
     };
     var { max, min } = Math;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.22.2",
+    "version": "3.22.5",
     "description": "一个开发工具，开放源代码，自带组件库和编译环境，可以用来开发web组件，web应用或nodejs模块，或做为已有代码的加密工具，也可以做为静态页面服务器或跨域中转服务器使用",
     "main": "public/efront.js",
     "directories": {