Merge branch 'layui:2.x' into 2.x

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

docs/laydate/index.md

@@ -34,7 +34,7 @@ toc: true
 | [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 |
 | [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 |
 | [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 |
-| [laydate.unbind(id)](#close) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
+| [laydate.unbind(id)](#unbind) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
 | [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 |
 | [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 |
 
@@ -160,7 +160,7 @@ laydate.render({
   // 其他属性 …
 });
 // 关闭对应的日期面板
-laydate.cllose('test');
+laydate.close('test');
 ```
 
 <h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3>

docs/layer/examples/other.md

@@ -68,7 +68,7 @@ layui.use(function(){
             }
           ]
         },
-        hideFooter: true // 是否隐藏底部栏 --- 2.8+
+        footer: false // 是否显示底部栏 --- 2.8.16+
       });
     },
     'test-tips-photos': function(){
@@ -98,4 +98,4 @@ layui.use(function(){
     }
   })
 });
-</script>
+</script>

docs/layer/index.md

@@ -248,7 +248,8 @@ layer.prompt({
 | 私有属性 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | photos | 图片层的数据源，格式详见下述示例。 | object | - |
-| hideFooter <sup>2.8+</sup> | 是否隐藏底部栏 | boolean | `false` |
+| toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `true` |
+| footer <sup>2.8.16+</sup> | 是否隐藏底部栏 | boolean | `true` |
 | tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - |
 
 该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。 
@@ -606,4 +607,4 @@ layer.min(index);
 
 ## 贴士
 
-> layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。
+> layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。

docs/table/detail/demo.md

@@ -198,5 +198,4 @@
 
 <h3 id="more-examples" class="ws-anchor ws-bold">更多示例</h3>
 
-> - [🎉 分享：在 table 组件中使用 select/dropdown/laydate 等组件实现多样化编辑](https://gitee.com/layui/layui/issues/I5JBUE)
-> - 不定期分享在 [Gitee Issues](https://gitee.com/layui/layui/issues)
+> - 🎉 不定期分享在 [Gitee Issues](https://gitee.com/layui/layui/issues)

docs/table/examples/css.md

@@ -80,4 +80,4 @@
   });
   </script>
 </body>
-</html>
+</html>

docs/table/examples/demo.md

@@ -75,7 +75,7 @@ layui.use(['table', 'dropdown'], function(){
       {field:'username', width:80, title: '用户'},
       {field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},
       {field:'sex', width:80, title: '性别', sort: true},
-      {field:'sign', title: '签名', edit: 'textarea', minWidth: 260, expandedWidth: 260, style: '-moz-box-align: start;', totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'},
+      {field:'sign', title: '签名', edit: 'textarea', minWidth: 260, expandedWidth: 260, totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'},
       {field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'}, 
       {field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'},
       {field:'ip', title:'IP', width: 120},
@@ -368,4 +368,4 @@ layui.use(['table', 'dropdown'], function(){
 });
 </script>
 </body>
-</html>
+</html>

examples/code.html

@@ -116,6 +116,8 @@
   // 通用实例，根据元素属性定制化参数
   layui.code({
     //about: 'code' // 右上角默认显示 code
+    tools: ['tips'],
+    preview: true
   });
 
   // custom more about

examples/layer.html

@@ -1,20 +1,15 @@
-
-
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<title>layer 弹层 - layui</title>
-
-<link rel="stylesheet" href="../src/css/layui.css">
-
-<style>
-body{padding: 100px;}
-
-#photos li{float: left; margin: 0 1px 1px;}
-#photos img{max-height: 38px;}
-</style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>layer 弹层 - layui</title>
+  <link rel="stylesheet" href="../src/css/layui.css">
+  <style>
+  body{padding: 100px;}
+  #photos li{float: left; margin: 0 1px 1px;}
+  #photos img{max-height: 38px;}
+  </style>
 </head>
 <body>
 
@@ -30,10 +25,10 @@
   <button class="layui-btn" lay-on="test8">Tab</button>
   <button class="layui-btn" lay-on="test9">Photo</button>
   <button class="layui-btn" lay-on="testTime">自动关闭</button>
-  <a href="https://layui.gitee.io/v2/demo/layer.html" target="_blank" class="layui-btn">更多例子</a>
+  <a href="https://layui.dev/docs/2.8/layer/" target="_blank" class="layui-btn">更多例子</a>
 </div>
 
-<div id="test11111" style="display: none; padding: 20px;">
+<div id="test11111" style="display: none; padding: 16px;">
   content 指向放置在页面的一段隐藏元素
 </div>
 
@@ -48,8 +43,8 @@
 
 <script>
 var LAYUI_GLOBAL = {
-  //path: '../src/'
-  //,layerPath: '../release/layer/src/'
+  // path: '../src/',
+  // layerPath: '../release/layer/src/'
 };
 </script>
 
@@ -224,7 +219,9 @@
 
   // 相册层
   layer.photos({
-    photos: '#photos' //$('#photos')
+    photos: '#photos', // $('#photos')
+    // toolbar: false,
+    // footer: false
   });
 
   //动态追加

src/css/layui.css

@@ -1136,7 +1136,9 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
 .layui-table-grid-down:hover{background-color: #fbfbfb;}
 
 .layui-table-expanded{height: 95px;}
-.layui-table-expanded .layui-table-cell{height: auto; max-height: 95px; white-space: normal; text-overflow: clip;}
+.layui-table-expanded .layui-table-cell,
+.layui-table-view .layui-table[lay-size="sm"] .layui-table-expanded .layui-table-cell,
+.layui-table-view .layui-table[lay-size="lg"] .layui-table-expanded .layui-table-cell{height: auto; max-height: 94px; white-space: normal; text-overflow: clip;}
 .layui-table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;}
 .layui-table-cell-c:hover{border-color: #16b777;}
 .layui-table-expanded td:hover .layui-table-cell{overflow: auto;}

src/css/modules/layer.css

@@ -238,21 +238,28 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-tabmain .layui-layer-tabli{display:none;}
 .layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
 
-/* photo模式 */
+/* photos */
 .layui-layer-photos{background: none; box-shadow: none;}
-.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
-.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
-.layui-layer-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;}
-.layui-layer-imgprev{left: 32px;}
-.layui-layer-imgnext{right: 32px;}
-.layui-layer-imgprev:hover,
-.layui-layer-imgnext:hover{color: #959595;}
-.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
-.layui-layer-imgtit{/*position:absolute; left:20px;*/}
-.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding: 0 5px; font-size:12px; color: #fff;}
-.layui-layer-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;}
-.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;}
-.layui-layer-imgtit em{font-style: normal;}
+.layui-layer-photos .layui-layer-content{overflow: visible; text-align: center;}
+.layui-layer-photos .layer-layer-photos-main img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
+.layui-layer-photos-prev,
+.layui-layer-photos-next{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;}
+.layui-layer-photos-prev{left: 32px;}
+.layui-layer-photos-next{right: 32px;}
+.layui-layer-photos-prev:hover,
+.layui-layer-photos-next:hover{color: #959595;}
+
+.layui-layer-photos-toolbar{position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; line-height: 52px; background-color: #000\9; filter: Alpha(opacity=60); background-color: rgba(0,0,0,.32); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
+.layui-layer-photos-toolbar > *{display:inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display:inline; *zoom: 1;}
+.layui-layer-photos-toolbar *{font-size: 12px;}
+.layui-layer-photos-header{top: 0; bottom: auto;}
+.layui-layer-photos-header > span{cursor: pointer;}
+.layui-layer-photos-header > span:hover{background-color: rgba(51,51,51,.32);}
+.layui-layer-photos-header .layui-icon{font-size: 18px;}
+.layui-layer-photos-footer > h3{max-width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
+.layui-layer-photos-footer a:hover{text-decoration: underline;}
+.layui-layer-photos-footer em{font-style: normal;}
+
 
 /* 关闭动画 */
 @-webkit-keyframes layer-bounceOut {

src/modules/code.js

@@ -209,12 +209,12 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
         elemToolbar.on('click', '>i', function(){
           var oi = $(this);
           var type = oi.data('type');
-          typeof tools[type].event === 'function' && tools[type].event(oi, type);
+          tools[type] && typeof tools[type].event === 'function' && tools[type].event(oi, type);
           typeof options.toolsEvent === 'function' && options.toolsEvent(oi, type);
         });
         layui.each(options.tools, function(i, v){
           var className = (tools[v] && tools[v].className) || v;
-          var title = tools[v].title || [''];
+          var title = (tools[v] && tools[v].title) || [''];
           elemToolbar.append(
             '<i class="layui-icon layui-icon-'+ className +'" data-type="'+ v +'" title="'+ title[0] +'"></i>'
           );

src/modules/lay.js

@@ -111,32 +111,54 @@
     return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
   };
 
+  // 获取 style rules
+  lay.getStyleRules = function(style, callback) {
+    if (!style) return;
+
+    var sheet = style.sheet || style.styleSheet || {};
+    var rules = sheet.cssRules || sheet.rules;
+
+    if (typeof callback === 'function') {
+      layui.each(rules, function(i, item){
+        if (callback(item)) return true;
+      });
+    }
+
+    return rules;
+  };
+
   // 创建 style 样式
   lay.style = function(options){
     options = options || {};
 
     var style = lay.elem('style');
     var styleText = options.text || '';
-    var target = options.target || lay('body')[0];
+    var target = options.target;
 
-    if(!styleText) return;
+    if (!styleText) return;
 
     // 添加样式
-    if('styleSheet' in style){
+    if ('styleSheet' in style) {
       style.setAttribute('type', 'text/css');
       style.styleSheet.cssText = styleText;
     } else {
       style.innerHTML = styleText;
     }
 
-    lay.style.index = lay.style.index || 0;
-    lay.style.index++;
-
-    var id = style.id = 'LAY-STYLE-'+ (options.id || 'DF-'+ lay.style.index)
-    var styleElem = lay(target).find('#'+ id);
-
-    styleElem[0] && styleElem.remove();
-    lay(target).append(style);
+    // ID
+    style.id = 'LAY-STYLE-'+ (options.id || function(index) {
+      lay.style.index++;
+      return 'DF-'+ index;
+    }(lay.style.index || 0));
+
+    // 是否向目标容器中追加 style 元素
+    if (target) {
+      var styleElem = lay(target).find('#'+ style.id);
+      styleElem[0] && styleElem.remove();
+      lay(target).append(style);
+    }
+
+    return style;
   };
 
   // 元素定位
@@ -467,4 +489,4 @@
     });
   }
 
-}(window, window.document); // gulp build: lay-footer
+}(window, window.document); // gulp build: lay-footer