Merge branch 'next' into feat-popup-menu

package/component/src/component/page/index.less

@@ -47,6 +47,33 @@
 .layui-laypage a:hover {
   color: var(--global-primary-color);
 }
+.layui-laypage-a-red:hover{
+  color: #ff5722 !important;
+}
+
+.layui-laypage-a-orange:hover{
+  color: #ffb800 !important;
+}
+
+.layui-laypage-a-green:hover{
+  color: #009688 !important;
+}
+
+.layui-laypage-a-cyan:hover{
+  color: #2f4056 !important;
+}
+
+.layui-laypage-a-blue:hover{
+  color: #01aaed !important;
+}
+
+.layui-laypage-a-black:hover{
+  color: #000 !important;
+}
+
+.layui-laypage-a-gray:hover{
+  color: #c2c2c2 !important;
+}
 
 .layui-laypage em {
   font-style: normal;

package/component/src/component/page/index.vue

@@ -119,7 +119,7 @@ watch(currentPage, function () {
     <a
       href="javascript:;"
       class="layui-laypage-prev"
-      :class="[currentPage === 1 ? 'layui-disabled' : '']"
+      :class="[currentPage === 1 ? 'layui-disabled' : '',theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '']"
       @click="prev()"
     >
       <slot v-if="slots.prev" name="prev"></slot>
@@ -134,14 +134,14 @@ watch(currentPage, function () {
           ></em>
           <em>{{ index }}</em>
         </span>
-        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+        <a v-else href="javascript:;" @click="jump(index)" :class="[theme ? 'layui-laypage-a-' + theme : '']">{{ index }}</a>
       </template>
     </template>
 
     <a
       href="javascript:;"
       class="layui-laypage-next"
-      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      :class="[currentPage === maxPage ? 'layui-disabled' : '',theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '']"
       @click="next()"
     >
       <slot v-if="slots.next" name="next"></slot>

package/component/src/component/transfer/index.less

@@ -5,6 +5,10 @@
   --transfer-box-border-radius: var(--global-border-radius);
 }
 
+.layui-transfer {
+  display: flex;
+}
+
 .layui-transfer .layui-btn + .layui-btn {
   margin-left: 0;
 }
@@ -22,6 +26,8 @@
   border-width: 1px;
   width: 200px;
   height: 360px;
+  display: flex;
+  flex-direction: column;
   border-radius: var(--transfer-box-border-radius);
   background-color: #fff;
 }
@@ -36,12 +42,14 @@
   line-height: 38px;
   padding: 0 10px;
   border-bottom-width: 1px;
+  flex: 0;
 }
 
 .layui-transfer-search {
   position: relative;
   padding: 10px;
   border-bottom-width: 1px;
+  flex: 0;
 }
 
 .layui-transfer-search .layui-input {
@@ -86,6 +94,7 @@
 .layui-transfer-data {
   padding: 5px 0;
   overflow: auto;
+  flex: 1;
 }
 
 .layui-transfer-data li {
@@ -105,8 +114,15 @@
   color: #999;
 }
 
-.layui-transfer-active,
+.layui-transfer-active {
-.layui-transfer-box {
+  display: flex;
-  display: inline-block;
+  align-items: center;
-  vertical-align: middle;
+  justify-items: center;
+}
+
+.layui-transfer-footer {
+  flex: 0;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 10px;
 }

package/component/src/component/transfer/index.vue

@@ -12,7 +12,6 @@ import LayButton from "../button/index.vue";
 import LayCheckbox from "../checkbox/index.vue";
 import { computed, Ref, ref, useSlots, watch } from "vue";
 import { BooleanOrString, Recordable } from "../../types";
-import { computedAsync } from "@vueuse/core";
 
 export interface LayTransferProps {
   id?: string;
@@ -24,7 +23,7 @@ export interface LayTransferProps {
   selectedKeys?: Recordable[];
 }
 
-const slot = useSlots();
+const slots = useSlots();
 
 const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
@@ -38,17 +37,16 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
 
 const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
 const rightDataSource: Ref<any[]> = ref([]);
-
 const _leftDataSource: Ref<any[]> = ref([...props.dataSource]);
 const _rightDataSource: Ref<any[]> = ref([]);
-
 const leftSelectedKeys: Ref<string[]> = ref([]);
 const rightSelectedKeys: Ref<string[]> = ref([]);
-
 const allLeftChecked = ref(false);
 const allRightChecked = ref(false);
+const hasLeftChecked = ref(false);
+const hasRightChecked = ref(false);
 
-const allLeftChange = function (checked: any) {
+const allLeftChange = (checked: any) => {
   if (checked) {
     const ids = leftDataSource.value.map((item: any) => {
       return item[props.id];
@@ -70,11 +68,16 @@ watch(
     } else {
       allLeftChecked.value = false;
     }
+    if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) {
+      hasLeftChecked.value = true;
+    } else {
+      hasLeftChecked.value = false;
+    }
   },
   { deep: true }
 );
 
-const allRightChange = function (checked: any) {
+const allRightChange = (checked: any) => {
   if (checked) {
     const ids = rightDataSource.value.map((item: any) => {
       return item[props.id];
@@ -90,17 +93,25 @@ watch(
   () => {
     if (
       rightDataSource.value.length === rightSelectedKeys.value.length &&
-      rightDataSource.value.length != 0
+      rightDataSource.value.length > 0
     ) {
       allRightChecked.value = true;
     } else {
       allRightChecked.value = false;
     }
+    if (
+      rightSelectedKeys.value.length > 0 &&
+      rightDataSource.value.length != 0
+    ) {
+      hasRightChecked.value = true;
+    } else {
+      hasRightChecked.value = false;
+    }
   },
   { deep: true }
 );
 
-const add = function () {
+const add = () => {
   if (leftSelectedKeys.value.length === 0) {
     return;
   }
@@ -123,7 +134,7 @@ const add = function () {
   leftSelectedKeys.value = [];
 };
 
-const remove = function () {
+const remove = () => {
   if (rightSelectedKeys.value.length === 0) {
     return;
   }
@@ -174,12 +185,6 @@ const boxStyle = computed(() => {
     height: props.height,
   };
 });
-
-const dataStyle = computed(() => {
-  return {
-    height: props.showSearch ? "calc(100% - 97px)" : "calc(100% - 38px)",
-  };
-});
 </script>
 
 <template>
@@ -188,7 +193,8 @@ const dataStyle = computed(() => {
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
           <LayCheckbox
-            v-model="allLeftChecked"
+            v-model="hasLeftChecked"
+            :is-indeterminate="!allLeftChecked"
             skin="primary"
             label="all"
             @change="allLeftChange"
@@ -203,20 +209,24 @@ const dataStyle = computed(() => {
             placeholder="关键词搜索"
           ></lay-input>
         </div>
-        <ul class="layui-transfer-data" :style="dataStyle">
+        <ul class="layui-transfer-data">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
             <LayCheckbox
               v-model="leftSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
-              <slot v-if="slot.item" name="item" :data="dataSource"></slot>
+              <slot v-if="slots.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
+        <div class="layui-transfer-footer" v-if="slots.leftFooter">
+          <slot name="leftFooter"></slot>
+        </div>
       </div>
       <div class="layui-transfer-active">
+        <div class="layui-transfer-button-group">
           <LayButton
             type="primary"
             :disabled="leftSelectedKeys.length == 0"
@@ -230,10 +240,12 @@ const dataStyle = computed(() => {
             ><i class="layui-icon layui-icon-prev"></i
           ></LayButton>
         </div>
+      </div>
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
           <LayCheckbox
-            v-model="allRightChecked"
+            v-model="hasRightChecked"
+            :is-indeterminate="!allRightChecked"
             skin="primary"
             label="all"
             @change="allRightChange"
@@ -248,18 +260,21 @@ const dataStyle = computed(() => {
             placeholder="关键词搜索"
           ></lay-input>
         </div>
-        <ul class="layui-transfer-data" :style="dataStyle">
+        <ul class="layui-transfer-data">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
             <LayCheckbox
               v-model="rightSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
-              <slot v-if="slot.item" name="item" :data="dataSource"></slot>
+              <slot v-if="slots.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
+        <div class="layui-transfer-footer" v-if="slots.rightFooter">
+          <slot name="rightFooter"></slot>
+        </div>
       </div>
     </div>
   </div>

package/document-component/src/document/zh-CN/components/page.md

@@ -285,6 +285,7 @@ export default {
 | showSkip    | 显示跳转     | `false` |
 | pages       | 显示切页按钮数量     | `10` |
 | limits       | 切换每页数量的选择项     | `[10,20,30,40,50]` |
+| theme       | 主题色        |`green`|
 
 :::
 

package/document-component/src/document/zh-CN/components/transfer.md

@@ -98,7 +98,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-transfer :dataSource="dataSource5" showSearch="true"></lay-transfer>
+  <lay-transfer :dataSource="dataSource5" :showSearch="true"></lay-transfer>
 </template>
 
 <script>
@@ -148,7 +148,24 @@ export default {
       {id:'4', title:'十字斩刀-斗'},
       {id:'5', title:'落炎魔杖'},
       {id:'6', title:'石中剑'},
-      {id:'7', title:'屠戮之刃'}
+      {id:'7', title:'屠戮之刃'},
+      {id:'8', title:'无影剑'},
+      {id:'9', title:'逸龙剑'},
+      {id:'10', title:'精灵之语'},
+      {id:'11', title:'十字斩刀-斗'},
+      {id:'12', title:'落炎魔杖'},
+      {id:'13', title:'石中剑'},
+      {id:'14', title:'屠戮之刃'},
+      {id:'15', title:'落炎魔杖'},
+      {id:'16', title:'石中剑'},
+      {id:'17', title:'屠戮之刃'},
+      {id:'18', title:'无影剑'},
+      {id:'19', title:'逸龙剑'},
+      {id:'20', title:'精灵之语'},
+      {id:'21', title:'十字斩刀-斗'},
+      {id:'22', title:'落炎魔杖'},
+      {id:'23', title:'石中剑'},
+      {id:'24', title:'屠戮之刃'}
     ]
     
     return {
@@ -160,6 +177,43 @@ export default {
 
 :::
 
+::: title 底部插槽
+:::
+
+::: demo
+
+<template>
+  <lay-transfer :dataSource="dataSource5">
+    <template v-slot:leftFooter>左侧底部</template>
+    <template v-slot:rightFooter>右侧底部</template>
+  </lay-transfer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const dataSource5 = [
+      {id:'1', title:'无影剑'},
+      {id:'2', title:'逸龙剑'},
+      {id:'3', title:'精灵之语'},
+      {id:'4', title:'十字斩刀-斗'},
+      {id:'5', title:'落炎魔杖'},
+      {id:'6', title:'石中剑'},
+      {id:'7', title:'屠戮之刃'}
+    ]
+    
+    return {
+      dataSource5
+    }
+  }
+}
+</script>
+
+::: 
+
 ::: title Transfer 属性
 :::
 
@@ -184,6 +238,8 @@ export default {
 | Name | Description | Accepted Values |
 | ---- | ----------- | --------------- |
 | item | 列表项      | { data }        |
+| leftFooter | 左侧盒子底部内容      | --      |
+| rightFooter | 右侧盒子底部内容      | --        |
 
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -16,8 +16,11 @@
       <li> 
         <h3>1.2.6 <span class="layui-badge-rim">2022-07-01</span></h3> 
         <ul>
+          <li>[新增] transfer 组件 leftFooter 与 rightFooter 插槽, 用于自定义穿梭框底部内容。by @Jmysy</li>
           <li>[修复] tooltip 组件设置isAutoShow 属性时，宽度设置max-width 时拖动浏览器时出现...时，tooltip不显示问题。 by @dingyongya</li>
           <li>[修复] table 组件设置 ellipsisTooltip 属性时 出现...时，tooltip不显示问题。by @dingyongya</li>
+          <li>[优化] transfer 组件 selectedKeys 选中效果, 加入 checkbox 半选状态。by @Jmysy</li>
+          <li>[优化] page 组件 hover状态下文字颜色跟当前设置的theme主题色保持一致。by @0o张不歪o0</li>
         </ul>
       </li>
     </ul>