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-box {
-  display: inline-block;
-  vertical-align: middle;
+.layui-transfer-active {
+  display: flex;
+  align-items: center;
+  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,37 +209,43 @@ 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">
-        <LayButton
-          type="primary"
-          :disabled="leftSelectedKeys.length == 0"
-          @click="add"
-          ><i class="layui-icon layui-icon-next"></i
-        ></LayButton>
-        <LayButton
-          type="primary"
-          :disabled="rightSelectedKeys.length == 0"
-          @click="remove"
-          ><i class="layui-icon layui-icon-prev"></i
-        ></LayButton>
+        <div class="layui-transfer-button-group">
+          <LayButton
+            type="primary"
+            :disabled="leftSelectedKeys.length == 0"
+            @click="add"
+            ><i class="layui-icon layui-icon-next"></i
+          ></LayButton>
+          <LayButton
+            type="primary"
+            :disabled="rightSelectedKeys.length == 0"
+            @click="remove"
+            ><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>