From ea1693dd329b1fd0146ea6130743ff1c66496a59 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Mon, 3 Jun 2024 22:12:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E5=A2=9E=E5=BC=BA=20tab=20?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20(#1955)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(tab): 增强 tab 功能

  1. lay-allowclose="false" 可以添加到 tab 容器或 tab title 元素上，遵循就近原则。
    - 添加到 tab 容器时，控制所有选项卡是否允许关闭，
   -  添加到 tab title 元素时，控制单个选项卡是否允许关闭。
   - tabAdd 参数新增 allowclose 选项，效果同 tab title 元素上的 lay-allowclose 属性

  2. 当 tab title 元素上有 lay-id 属性时，将根据 id 显示/删除对应的 content 元素，方便实现拖拽选项卡

  3. 新增 tabBeforeDelete 事件，返回 false 时阻止关闭对应的选项卡
 4. 因为 2，事件参数新增 id 属性

* refactor: 移除 title 和 content 同步 id，改为如果 content 中找不到 id, 就回退到默认行为

* docs(tab): 更新 tab 文档

* docs(tab): 优化文案

* style(tab): 避免某些分辨率下默认风格的当前选中标签头出现下边框的问题

* docs(tab): 优化文档及示例细节

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
 docs/tab/index.md      | 35 +++++++++++++++++++++++++++++++----
 src/css/layui.css      |  2 +-
 src/modules/element.js | 38 +++++++++++++++++++++++++++++++-------
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/docs/tab/index.md b/docs/tab/index.md
index 44b4a168..e97e7850 100644
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@@ -118,8 +118,8 @@ tab 组件提供了三种 UI 风格，分别为：
 
 | 属性 | 描述 |
 | --- | --- |
-| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 |
-| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上 |
+| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 <br><sup>2.9.11+</sup>: 若需要单独关闭某一个选项卡的删除图标，可在选项卡标题元素 `<li>` 上设置 `lay-allowclose="false"`|
+| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上。在外部附加选项卡拖拽排序时，`layui-tab-item` 元素也要设置 ID |
 
 <h3 id="allowclose" lay-toc="{level: 2}" class="ws-bold">开启删除</h3>
 
@@ -129,14 +129,14 @@ tab 组件提供了三种 UI 风格，分别为：
   <textarea>
 <div class="layui-tab" lay-allowclose="true">
   <ul class="layui-tab-title">
-    <li class="layui-this">标签1</li>
+    <li class="layui-this" lay-allowclose="false">标签1</li>
     <li>标签2</li>
     <li>标签3</li>
     <li>标签4</li>
     <li>标签5</li>
   </ul>
   <div class="layui-tab-content">
-    <div class="layui-tab-item layui-show">内容-1</div>
+    <div class="layui-tab-item layui-show">单独设置「标签1」不允许删除 <sup>2.9.11+</sup></div>
     <div class="layui-tab-item">内容-2</div>
     <div class="layui-tab-item">内容-3</div>
     <div class="layui-tab-item">内容-4</div>
@@ -191,6 +191,7 @@ layui.use(function(){
 | content | 选项卡的内容，支持传入 `html` | string | - |
 | id | 选项卡标题元素的 `lay-id` 属性值 | string | - |
 | change | 是否添加 tab 完毕后即自动切换 | boolean | `false` |
+| allowClose <sup>2.9.11+</sup>| 是否开启删除图标 | boolean | `false` |
 
 该方法用于添加 tab 选项。用法详见 : [#示例](#examples)
 
@@ -285,6 +286,7 @@ element.on('tab(filter)', function(data){
   console.log(this); // 当前 tab 标题所在的原始 DOM 元素
   console.log(data.index); // 得到当前 tab 项的所在下标
   console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到当前的 tab ID(2.9.11+)
 });
 ```
 
@@ -307,6 +309,31 @@ var element = layui.element;
 element.on('tabDelete(filter)', function(data){
   console.log(data.index); // 得到被删除的 tab 项的所在下标
   console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
+});
+```
+
+<h3 id="on-tabBeforeDelete" lay-toc="{level: 2}" class="ws-bold">tab 删除前的事件 <sup>2.9.11+</sup></h3>
+
+`element.on('tabBeforeDelete(filter)', callback);`
+
+- 参数 `tabBeforeDelete(filter)` 是一个特定结构。
+  - `tabBeforeDelete` 为 tab 删除事件固定值；
+  - `filter` 为 tab 容器属性 `lay-filter` 对应的值。
+- 参数 `callback` 为事件执行时的回调函数，并返回一个 `object` 类型的参数。
+
+点击 tab 选项删除前触发。
+
+```
+var element = layui.element;
+ 
+// tab 删除前的事件
+element.on('tabBeforeDelete(filter)', function(data){
+  console.log(data.index); // 得到被删除的 tab 项的所在下标
+  console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
+
+  if(data.id === 'home') return false; // 返回 false 时阻止关闭对应的选项卡
 });
 ```
 
diff --git a/src/css/layui.css b/src/css/layui.css
index 30826b26..c537aa78 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -1376,7 +1376,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-tab .layui-tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;}
 .layui-tab-title .layui-this{color: #000;}
 
-.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
+.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-bottom-width: 2px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
 .layui-tab-bar{position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 39px; line-height: 39px; border-width: 1px; border-style: solid; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer;}
 .layui-tab-bar .layui-icon{position: relative; display: inline-block; top: 3px; transition: all .3s; -webkit-transition: all .3s;}
 .layui-tab-item{display: none;}
diff --git a/src/modules/element.js b/src/modules/element.js
index 3d73631a..bcbcf812 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -48,7 +48,7 @@ layui.define('jquery', function(exports){
     }() +'>'+ (options.title || 'unnaming') +'</li>';
     
     barElem[0] ? barElem.before(li) : titElem.append(li);
-    contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
+    contElem.append('<div class="layui-tab-item" ' + (options.id ? 'lay-id=' + options.id : '') + '>'+ (options.content || '') +'</div>');
     // call.hideTabMore(true);
     // 是否添加即切换
     options.change && this.tabChange(filter, options.id);
@@ -134,6 +134,7 @@ layui.define('jquery', function(exports){
       var isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank'; // 是否存在跳转
       var unselect = typeof othis.attr('lay-unselect') === 'string'; // 是否禁用选中
       var filter = parents.attr('lay-filter');
+      var hasId = othis.attr('lay-id');
 
       // 下标
       var index = 'index' in obj 
@@ -143,12 +144,19 @@ layui.define('jquery', function(exports){
       // 执行切换
       if(!(isJump || unselect)){
         othis.addClass(THIS).siblings().removeClass(THIS);
-        item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
+        if(hasId){
+          var contentElem = item.filter('[lay-id="' +  hasId + '"]');
+          contentElem = contentElem.length ? contentElem : item.eq(index);
+          contentElem.addClass(SHOW).siblings().removeClass(SHOW);
+        }else{
+          item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
+        }
       }
       
       layui.event.call(this, MOD_NAME, 'tab('+ filter +')', {
         elem: parents,
-        index: index
+        index: index,
+        id: hasId
       });
     }
     
@@ -159,6 +167,14 @@ layui.define('jquery', function(exports){
       var tabElem = li.closest('.layui-tab');
       var item = tabElem.children('.layui-tab-content').children('.layui-tab-item');
       var filter = tabElem.attr('lay-filter');
+      var hasId = li.attr('lay-id');
+
+      var shouldClose = layui.event.call(li[0], MOD_NAME, 'tabBeforeDelete('+ filter +')', {
+        elem: tabElem,
+        index: index,
+        id: hasId
+      });
+      if(shouldClose === false) return;
       
       if(li.hasClass(THIS)){
         if (li.next()[0] && li.next().is('li')){
@@ -171,14 +187,21 @@ layui.define('jquery', function(exports){
       }
       
       li.remove();
-      item.eq(index).remove();
+      if(hasId){
+        var contentElem = item.filter('[lay-id="' +  hasId + '"]');
+        contentElem = contentElem.length ? contentElem : item.eq(index)
+        contentElem.remove()
+      }else{
+        item.eq(index).remove();
+      }
       setTimeout(function(){
         call.tabAuto();
       }, 50);
       
       layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', {
         elem: tabElem,
-        index: index
+        index: index,
+        id: hasId
       });
     }
     
@@ -202,10 +225,11 @@ layui.define('jquery', function(exports){
         }
         
         // 开启关闭图标
-        if(othis.attr('lay-allowclose')){
+        var allowclose = othis.attr('lay-allowclose');
+        if(allowclose && allowclose !== 'false'){
           title.find('li').each(function(){
             var li = $(this);
-            if(!li.find('.'+CLOSE)[0]){
+            if(!li.find('.'+CLOSE)[0] && li.attr('lay-allowclose') !== 'false'){
               var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ CLOSE +'"></i>');
               close.on('click', call.tabDelete);
               li.append(close);