Merge pull request #1216 from layui/2.x

release v2.8.0-rc.14
2023-03-22 00:01:47 +08:00 · 2023-03-22 00:01:47 +08:00 · 45556a8fe7
parent 01975579d4 46c53ac3cf
commit 45556a8fe7
18 changed files with 176 additions and 88 deletions
--- a/dist/css/layui.css
+++ b/dist/css/layui.css
--- a/dist/layui.js
+++ b/dist/layui.js
--- a/examples/slider.html
+++ b/examples/slider.html
@ -12,11 +12,11 @@
 </head>
 <body>

-  <div class="layui-container">
-    <div id="slideTest1"></div>
-    <br>
-    <div id="slideTest2" style="margin: 45px 30px; display: inline-block;"></div>
-  </div>
+<div class="layui-container">
+  <div id="slideTest1"></div>
+  <br>
+  <div id="slideTest2" style="margin: 45px 30px; display: inline-block;"></div>
+</div>

 <script src="../src/layui.js"></script>
 <script>
--- a/examples/upload.html
+++ b/examples/upload.html
@ -193,6 +193,7 @@ layui.use(['upload', 'element'], function(){
    ,number: 3
    ,auto: false
    ,bindAction: '#testListAction'
+    ,size: 30
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
@ -213,7 +214,9 @@ layui.use(['upload', 'element'], function(){
        });
        
        //删除
+        var that = this;
        tr.find('.demo-delete').on('click', function(){
+          console.log(files, index);
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
@ -308,6 +311,7 @@ layui.use(['upload', 'element'], function(){
    ,choose: function(obj){   
      var that = this;
      obj.preview(function(index, file){
+        that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
        console.log(file.name);
        //obj.resetFile(index, file, '123.jpg');
      });
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "layui",
-  "version": "2.8.0-rc.13",
+  "version": "2.8.0-rc.14",
  "description": "Classic modular Front-End UI library",
  "main": "dist/layui.js",
  "license": "MIT",
--- a/src/css/layui.css
+++ b/src/css/layui.css
@ -1261,7 +1261,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 /** Tab 选项卡 **/
 .layui-tab{margin: 10px 0; text-align: left !important;}
 .layui-tab[overflow]>.layui-tab-title{overflow: hidden;}
-.layui-tab .layui-tab-title{position: relative; left: 0; height: 40px; padding-left: 0; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
+.layui-tab .layui-tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
 .layui-tab .layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
 .layui-tab .layui-tab-title li{position: relative; line-height: 40px; min-width: 65px; margin: 0; padding: 0 15px; text-align: center; cursor: pointer;}
 .layui-tab .layui-tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;}
@ -1405,24 +1405,25 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
 .layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
 .layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
-.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
-.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
+.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 11px; border-bottom-width: 1px;}
+.layui-transfer-search{position:relative; padding: 11px; border-bottom-width: 1px;}
 .layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
-.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #5F5F5F;}
+.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; line-height: normal; margin-top: -8px; color: #5F5F5F;}
 .layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
 .layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
 .layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
 .layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
 .layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
 .layui-transfer-data{padding: 5px 0; overflow: auto;}
-.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
+.layui-transfer-data li{height: 32px; line-height: 32px; margin-top: 0 !important; padding: 0 11px;list-style-type: none !important;}
 .layui-transfer-data li:hover{background-color: #f8f8f8; transition: .5s all;}
-.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
+.layui-transfer-data .layui-none{padding: 15px 11px; text-align: center; color: #999;}

 /** 评分组件 **/
 .layui-rate,
 .layui-rate *{display: inline-block; vertical-align: middle;}
-.layui-rate{padding: 10px 5px 10px 0; font-size: 0;}
+.layui-rate{padding: 11px 6px 11px 0; font-size: 0;}
+.layui-rate li{margin-top: 0 !important;}
 .layui-rate li i.layui-icon{ font-size: 20px; color: #FFB800;}
 .layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
 .layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
--- a/src/layui.js
+++ b/src/layui.js
@ -15,7 +15,7 @@
  }

  ,Layui = function(){
-    this.v = '2.8.0-rc.13'; // Layui 版本号
+    this.v = '2.8.0-rc.14'; // Layui 版本号
  }
  
  //识别预先可能定义的指定全局对象
--- a/src/modules/carousel.js
+++ b/src/modules/carousel.js
@ -3,15 +3,17 @@
 * MIT Licensed  
 */
 
-layui.define('jquery', function(exports){
+layui.define(['jquery', 'lay'], function(exports){
  "use strict";
  
-  var $ = layui.$
-  ,hint = layui.hint()
-  ,device = layui.device()
+  var $ = layui.$;
+  var lay = layui.lay;
+
+  var hint = layui.hint();
+  var device = layui.device();

  //外部接口
-  ,carousel = {
+  var carousel = {
    config: {} //全局配置项

    //设置全局项
@ -55,8 +57,22 @@ layui.define('jquery', function(exports){
  
  //轮播渲染
  Class.prototype.render = function(){
-    var that = this
-    ,options = that.config;
+    var that = this;
+    var options = that.config;
+
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        carousel.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));

    options.elem = $(options.elem);
    if(!options.elem[0]) return;
@ -196,7 +212,7 @@ layui.define('jquery', function(exports){
  };

  // 跳转到特定下标
-  Class.prototype.jump = function(index){
+  Class.prototype.goto = function(index){
    var that = this;
    var options = that.config;

@ -236,9 +252,9 @@ layui.define('jquery', function(exports){
      tplInd.css('margin-top', -(tplInd.height()/2));
    }
    
-    //事件
+    // 事件
    tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){
-      that.jump($(this).index());
+      that.goto($(this).index());
    });
  };
  
--- a/src/modules/code.js
+++ b/src/modules/code.js
@ -14,6 +14,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
  // 常量
  var CONST = {
    ELEM_VIEW: 'layui-code-view',
+    ELEM_TAB: 'layui-tab',
    ELEM_TITLE: 'layui-code-title',
    ELEM_FULL: 'layui-code-full',
    ELEM_PREVIEW: 'layui-code-preview',
@ -24,11 +25,11 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
  // 默认参数项
  var config = {
    elem: '.layui-code', // 元素选择器
-    title: '&lt;/&gt;', // 标题
-    about: '', // 右上角信息
-    ln: true, // 是否显示行号
-    header: false, // 是否显示头部区域
-
+    title: '&lt;/&gt;', // 代码栏标题
+    about: '', // 代码栏右上角信息
+    ln: true, // 代码区域是否显示行号
+    header: false, // 是否显示代码栏头部区域
+    // 默认文本
    text: {
      code: util.escape('</>'),
      preview: 'Preview'
@ -50,7 +51,6 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
    // 从内至外渲染
    layui.each(options.elem.get().reverse(), function(index, item){
      var othis = $(item);
-      var html = trim(othis.html());

      // 合并属性上的参数，并兼容旧版本属性写法 lay-*
      var options = $.extend(true, {}, opts, lay.options(item), function(obj){
@ -65,7 +65,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
      }({}));

      // 获得代码
-      var codes = function(){
+      var codes = othis.data('code') || function(){
        var arr = [];
        var textarea = othis.children('textarea');
        
@ -73,10 +73,6 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
        textarea.each(function(){
          arr.push(trim(this.value));
        });
-
-        if(textarea[0]){
-          html = util.escape(arr.join(''));
-        }
        
        // 内容直接放置在元素外层
        if(arr.length === 0){
@ -86,6 +82,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
        return arr;
      }();

+      othis.data('code', codes);
+
      // 是否开启预览
      if(options.preview){
        var FILTER_VALUE = 'LAY-CODE-DF-'+ index;
@ -102,7 +100,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
          'layui-border'
        ].join(' ') +'">');
        var elemToolbar = $('<div class="layui-code-tools"></div>');
-        var elemViewHas = othis.prev('.' + CONST.ELEM_PREVIEW);
+        var elemViewHas = othis.parent('.' + CONST.ELEM_PREVIEW);
+        var elemTabHas = othis.prev('.'+ CONST.ELEM_TAB);
        var elemPreviewViewHas = othis.next('.' + CONST.ELEM_ITEM +'-preview');

        if(options.id) elemView.attr('id', options.id);
@ -168,8 +167,9 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
        });

        // 移除旧结构
-        if(elemViewHas[0]) elemViewHas.remove();
-        if(elemPreviewViewHas[0]) elemPreviewViewHas.remove();
+        if(elemTabHas[0]) elemTabHas.remove(); // 移除 tab
+        if(elemPreviewViewHas[0]) elemPreviewViewHas.remove(); // 移除预览区域
+        if(elemViewHas[0]) othis.unwrap(); // 移除外层容器

        elemTabView.append(elemHeaderView); // 追加标签头
        options.tools && elemTabView.append(elemToolbar); // 追加工具栏
@ -247,9 +247,14 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
      // 自定义风格
      if(options.skin){
        if(options.skin === 'notepad') options.skin = 'dark';
+        othis.removeClass('layui-code-dark layui-code-light');
        othis.addClass('layui-code-'+ options.skin);
      } 

+      
+      // code
+      var html = util.escape(codes.join(''));
+
      // 转义 HTML 标签
      if(options.encode) html = util.escape(html);
      html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
--- a/src/modules/colorpicker.js
+++ b/src/modules/colorpicker.js
@ -214,16 +214,18 @@ layui.define(['jquery', 'lay'], function(exports){
    ,'</div>'].join(''))

    //初始化颜色选择框
-    var othis = options.elem = $(options.elem);  
+    var elem = options.elem = $(options.elem);  
    options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
    
    // 插入颜色选择框
-    othis.addClass('layui-inline').html(
+    elem.addClass('layui-inline').html(
      that.elemColorBox = elemColorBox
    );

-    //初始化 id 参数
-    options.id = ('id' in options) ? options.id : that.index;
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
    
    // 获取背景色值
    that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
--- a/src/modules/dropdown.js
+++ b/src/modules/dropdown.js
@ -89,13 +89,13 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
    that.init(true);
  };

-  //初始化准备
+  // 初始化准备
  Class.prototype.init = function(rerender){
-    var that = this
-    ,options = that.config
-    ,elem = options.elem = $(options.elem);
+    var that = this;
+    var options = that.config;
    
-    //若 elem 非唯一
+    // 若 elem 非唯一
+    var elem = $(options.elem);
    if(elem.length > 1){
      layui.each(elem, function(){
        dropdown.render($.extend({}, options, {
@ -105,19 +105,26 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
      return that;
    }

-    //若重复执行 render，则视为 reload 处理
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
+
+    // 若重复执行 render，则视为 reload 处理
    if(!rerender && elem[0] && elem.data(MOD_INDEX)){
      var newThat = thisModule.getThis(elem.data(MOD_INDEX));
      if(!newThat) return;

      return newThat.reload(options);
    }
+
+    options.elem = $(options.elem);
    
-    //初始化 id 参数
-    options.id = ('id' in options) ? options.id : that.index;
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
    
-    if(options.show) that.render(rerender); //初始即显示
-    that.events(); //事件
+    if(options.show) that.render(rerender); // 初始即显示
+    that.events(); // 事件
  };
  
  //渲染
@ -446,7 +453,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
        if(
          e.target === options.elem[0] || 
          options.elem.find(e.target)[0] ||
-          e.target === that.elemView[0] ||
+          (that.elemView && e.target === that.elemView[0]) ||
          (that.elemView && that.elemView.find(e.target)[0])
        ) return;
      }
@ -524,8 +531,17 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
    });
    
  }();
+
+  // 关闭面板
+  dropdown.close = function(id){
+    var that = thisModule.getThis(id);
+    if(!that) return this;
+    
+    that.remove();
+    return thisModule.call(that);
+  };
  
-  //重载实例
+  // 重载实例
  dropdown.reload = function(id, options){
    var that = thisModule.getThis(id);
    if(!that) return this;
@ -534,7 +550,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
    return thisModule.call(that);
  };

-  //核心入口
+  // 核心入口
  dropdown.render = function(options){
    var inst = new Class(options);
    return thisModule.call(inst);
--- a/src/modules/lay.js
+++ b/src/modules/lay.js
@ -206,6 +206,8 @@
  lay.options = function(elem, opts){
    opts = typeof opts === 'object' ? opts : {attr: opts};

+    if(elem === document) return {};
+
    var othis = lay(elem);
    var attrName = opts.attr || 'lay-options';
    var attrValue = othis.attr(attrName);
--- a/src/modules/rate.js
+++ b/src/modules/rate.js
@ -2,12 +2,14 @@
 * rate 评分评星组件
 */

-layui.define('jquery',function(exports){
+layui.define(['jquery', 'lay'],function(exports){
  "use strict";
-  var $ = layui.jquery

-  //外部接口
-  ,rate = {
+  var $ = layui.jquery;
+  var lay = layui.lay;
+
+  // 外部接口
+  var rate = {
    config: {}
    ,index: layui.rate ? (layui.rate.index + 10000) : 0

@ -24,7 +26,7 @@ layui.define('jquery',function(exports){
    }
  }

-  //操作当前实例
+  // 操作当前实例
  ,thisRate = function(){
    var that = this
    ,options = that.config;
@ -62,10 +64,26 @@ layui.define('jquery',function(exports){

  //评分渲染
  Class.prototype.render = function(){
-    var that = this
-    ,options = that.config
-    ,style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
+    var that = this;
+    var options = that.config;
+    
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        rate.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }

+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
+
+    // 自定义主题
+    var style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
+    
    options.elem = $(options.elem);
    
    //最大值不能大于总长度
--- a/src/modules/slider.js
+++ b/src/modules/slider.js
@ -2,10 +2,11 @@
 * slider 滑块组件
 */

-layui.define('jquery', function(exports){
+layui.define(['jquery', 'lay'], function(exports){
  'use strict';

-  var $ = layui.$
+  var $ = layui.$;
+  var lay = layui.lay;

  // 外部接口
  var slider = {
@ -80,8 +81,22 @@ layui.define('jquery', function(exports){

  //滑块渲染
  Class.prototype.render = function(){
-    var that = this
-    ,options = that.config;
+    var that = this;
+    var options = that.config;
+
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        slider.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
    
    //间隔值不能小于 1
    if(options.step < 1) options.step = 1;
--- a/src/modules/table.js
+++ b/src/modules/table.js
@ -1720,7 +1720,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
    // 固定列区域高度
    var mainHeight = that.layMain.height();
    var fixHeight = mainHeight - scollHeight;
-    
+
    that.layFixed.find(ELEM_BODY).css(
      'height', 
      layMainTable.height() >= fixHeight ? fixHeight : 'auto'
@ -1728,7 +1728,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){

    // 表格宽度小于容器宽度时，隐藏固定列
    that.layFixRight[
-      table.cache[that.key].length && outWidth > 0 
+      (table.cache[that.key] && table.cache[that.key].length) && outWidth > 0 
        ? 'removeClass' 
      : 'addClass'
    ](HIDE);
--- a/src/modules/transfer.js
+++ b/src/modules/transfer.js
@ -148,8 +148,11 @@ layui.define(['laytpl', 'form'], function(exports){
    options.data = options.data || [];
    options.value = options.value || [];
    
-    //索引
-    that.key = options.id || that.index;
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
+    that.key = options.id;
    
    //插入组件结构
    othis.html(that.elem);
--- a/src/modules/upload.js
+++ b/src/modules/upload.js
@ -171,17 +171,23 @@ layui.define(['lay','layer'], function(exports){
    }
  };
  
-  //执行上传
+  // 执行上传
  Class.prototype.upload = function(files, type){
-    var that = this
-    ,options = that.config
-    ,elemFile = that.elemFile[0]
+    var that = this;
+    var options = that.config;
+    var elemFile = that.elemFile[0];
+
+    // 获取文件队列
+    var getFiles = function(){
+      return files || that.files || that.chooseFiles || elemFile.files;
+    };
    
    //高级浏览器处理方式，支持跨域
-    ,ajaxSend = function(){
-      var successful = 0, failed = 0
-      ,items = files || that.files || that.chooseFiles || elemFile.files
-      ,allDone = function(){ //多文件全部上传完毕的回调
+    var ajaxSend = function(){
+      var successful = 0;
+      var failed = 0
+      var items = getFiles();
+      var allDone = function(){ // 多文件全部上传完毕的回调
        if(options.multiple && successful + failed === that.fileLength){
          typeof options.allDone === 'function' && options.allDone({
            total: that.fileLength
@ -412,8 +418,8 @@ layui.define(['lay','layer'], function(exports){
    
    //检验文件数量
    that.fileLength = function(){
-      var length = 0
-      ,items = files || that.files || that.chooseFiles || elemFile.files;
+      var length = 0;
+      var items = getFiles();
      layui.each(items, function(){
        length++;
      });
@ -427,11 +433,11 @@ layui.define(['lay','layer'], function(exports){
      );
    }
    
-    //检验文件大小
+    // 检验文件大小
    if(options.size > 0 && !(device.ie && device.ie < 10)){
      var limitSize;
      
-      layui.each(that.chooseFiles, function(index, file){
+      layui.each(getFiles(), function(index, file){
        if(file.size > 1024*options.size){
          var size = options.size/1024;
          size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB'
--- a/src/modules/util.js
+++ b/src/modules/util.js
@ -183,11 +183,11 @@ layui.define('jquery', function(exports){
      
      //30天以内，返回“多久前”
      if(stamp >= 1000*60*60*24){
-        return ((stamp/1000/60/60/24)|0) + '天前';
+        return ((stamp/1000/60/60/24)|0) + ' 天前';
      } else if(stamp >= 1000*60*60){
-        return ((stamp/1000/60/60)|0) + '小时前';
+        return ((stamp/1000/60/60)|0) + ' 小时前';
      } else if(stamp >= 1000*60*3){ //3分钟以内为：刚刚
-        return ((stamp/1000/60)|0) + '分钟前';
+        return ((stamp/1000/60)|0) + ' 分钟前';
      } else if(stamp < 0){
        return '未来';
      } else {