Merge branch 'next' into feat-popup-menu

2022-07-01 18:14:56 +08:00 · 2022-07-01 18:14:56 +08:00 · 212332a0c1
commit 212332a0c1
parent 03ffdb5a9f 76a57dd897
7 changed files with 161 additions and 43 deletions
--- a/package/component/src/component/page/index.less
+++ b/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;
--- a/package/component/src/component/page/index.vue
+++ b/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>
--- a/package/component/src/component/transfer/index.less
+++ b/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;
 }
--- a/package/component/src/component/transfer/index.vue
+++ b/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>
--- a/package/document-component/src/document/zh-CN/components/page.md
+++ b/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`|

 :::

--- a/package/document-component/src/document/zh-CN/components/transfer.md
+++ b/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 | 右侧盒子底部内容      | --        |

 :::

--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/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>