plain-design 0.0.86 → 0.0.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "0.0.86",
+  "version": "0.0.90",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -21,7 +21,7 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "plain-design-composition": "0.0.105",
+    "plain-design-composition": "0.0.109",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
@@ -55,7 +55,6 @@
     "axios": "^0.21.1",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "choerodon-ui": "0.8.77",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
@@ -66,7 +65,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.6.2",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "0.0.105",
+    "plain-design-composition": "0.0.109",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/PlCascadePanel/cascade-panel.scss

@@ -1,106 +1,107 @@
 @include theme {
-    .pl-cascade-panel {
-        display: inline-block;
-        height: 200px;
-        border: solid 1px $ibc;
-        border-radius: $popperRadius;
-        color: $itc;
-
-        & > .pl-list {
-            height: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-        }
+  .pl-cascade-panel {
+    display: inline-block;
+    height: 200px;
+    border: solid 1px $ibc;
+    border-radius: $popperRadius;
+    color: $itc;
 
-        .pl-cascade-list {
-            width: 180px;
-            height: 100%;
-            padding: 6px 0;
-            font-size: 14px;
-            display: inline-block;
-            vertical-align: top;
-            overflow: hidden;
-            box-sizing: border-box;
-
-            &:not(:last-child) {
-                border-right: solid 1px $ibc;
-            }
+    & > .pl-list {
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-            .pl-list {
-                overflow: hidden;
-            }
+    .pl-cascade-list {
+      width: 180px;
+      height: 100%;
+      padding: 6px 0;
+      font-size: 14px;
+      display: inline-block;
+      vertical-align: top;
+      overflow: hidden;
+      box-sizing: border-box;
 
-            .pl-cascade-item {
-                padding: 5px 0 5px 12px;
-                font-weight: 400;
-                font-size: 13px;
-                color: $itc;
-                background-color: white;
-                transition: all 300ms $transition;
-                cursor: pointer;
+      &:not(:last-child) {
+        border-right: solid 1px $ibc;
+      }
 
-                .pl-cascade-content {
-                    padding-right: 30px;
-                    position: relative;
+      .pl-list {
+        overflow: hidden;
+      }
 
-                    .pl-cascade-arrow {
-                        position: absolute;
-                        top: 0;
-                        bottom: 0;
-                        right: 0;
-                        width: 30px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: $icc;
-                    }
-                }
+      .pl-cascade-item {
+        padding: 5px 0 5px 12px;
+        line-height: 22px;
+        font-weight: 400;
+        font-size: 13px;
+        color: $itc;
+        background-color: white;
+        transition: all 300ms $transition;
+        cursor: pointer;
 
-                &.pl-cascade-item-expand, &:hover {
-                    color: $ihc;
-                    background-color: $disabled;
-                }
+        .pl-cascade-content {
+          padding-right: 30px;
+          position: relative;
 
-                &.pl-cascade-item-active {
-                    color: $colorPrimary;
-                    background-color: rgba($colorPrimary, 0.1);
-                }
+          .pl-cascade-arrow {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $icc;
+          }
+        }
 
-                &.pl-cascade-empty {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: center;
+        &.pl-cascade-item-expand, &:hover {
+          color: $ihc;
+          background-color: $disabled;
+        }
 
-                    padding-left: 0;
-                    font-size: 12px;
-                    color: $disabledText;
-                    background-color: transparent;
-                    cursor: auto;
+        &.pl-cascade-item-active {
+          color: $colorPrimary;
+          background-color: rgba($colorPrimary, 0.1);
+        }
 
-                    .pl-icon {
-                        margin-bottom: 8px;
-                        font-size: 20px;
-                    }
-                }
+        &.pl-cascade-empty {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
 
-                &.pl-cascade-item-disabled {
-                    background-color: transparent;
-                    color: $disabledText;
-                    cursor: not-allowed;
-                }
-            }
+          padding-left: 0;
+          font-size: 12px;
+          color: $disabledText;
+          background-color: transparent;
+          cursor: auto;
 
-            &.pl-cascade-filter-list {
-                width: 360px;
-            }
+          .pl-icon {
+            margin-bottom: 8px;
+            font-size: 20px;
+          }
         }
 
-        .pl-loading-mask {
-            top: 1px;
-            bottom: 1px;
-            left: 1px;
-            right: 1px;
+        &.pl-cascade-item-disabled {
+          background-color: transparent;
+          color: $disabledText;
+          cursor: not-allowed;
         }
+      }
+
+      &.pl-cascade-filter-list {
+        width: 360px;
+      }
+    }
+
+    .pl-loading-mask {
+      top: 1px;
+      bottom: 1px;
+      left: 1px;
+      right: 1px;
     }
-}
+  }
+}

package/src/packages/PlInput/input.scss

@@ -31,6 +31,7 @@
 
     .pl-input-custom-placeholder {
       color: $ipc;
+      margin-left: 6px;
     }
 
     input, textarea {

package/src/packages/PlScroll/scroll.scss

@@ -112,13 +112,6 @@
   }
 }
 
-.pl-scroll-disabled-y .pl-scroll, .pl-scroll.pl-scroll-disabled-y {
-  .pl-scroll-wrapper {
-    width: 100%;
-    overflow-y: hidden;
-  }
-}
-
 .pl-scroll-sticky {
   position: sticky;
 

package/src/packages/PlSlider/slider.scss

@@ -52,6 +52,7 @@
               background-color: rgba(black, 0.8);
               color: white;
               padding: 3px 6px;
+              line-height: initial;
               position: absolute;
               left: 50%;
               transform: translateX(-50%);
@@ -172,4 +173,4 @@
       }
     }
   }
-}
+}

package/src/packages/PlTable/table/body/body.tsx

@@ -1,7 +1,7 @@
 import {PltRow} from "./row";
 import {TableHoverPart} from "../utils/table.utils";
 import {TableNode} from "../use/useTableNode";
-import {designComponent, onMounted, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, onMounted, useRefs} from "plain-design-composition";
 import React from "react";
 import {PlainTable} from "../../index";
 import {renderColgroup} from "../../plc/utils/renderColgroup";
@@ -43,17 +43,12 @@ export const PltBody = designComponent({
             refs.virtual!.refs.scroll!.refs.wrapper!.addEventListener('wheel', handler.onWheel)
         })
 
-        const classes = useClasses(() => [
-            'plt-body',
-            {'pl-scroll-disabled-y': props.table.props.showRows >= (props.table.props.data || []).length}
-        ])
-
         return {
             render: () => {
                 // console.log('props.table.disabledVirtual.value', props.table.disabledVirtual.value)
                 return (
                     <PlVirtualTable
-                        className={classes.value}
+                        className="plt-body"
                         ref={onRef.virtual}
                         key={props.table.plcData.value!.plcKeyString}
                         width={props.table.plcData.value!.targetTableWidth!}

package/src/packages/PlTable/table.scss

@@ -19,6 +19,10 @@
         min-width: 100%;
       }
 
+      .pl-scroll-wrapper {
+        height: calc(100% + 20px);
+      }
+
       .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {
         z-index: 10;
       }

package/src/packages/createUseTableOption/use/use.buttons.tsx

@@ -220,6 +220,10 @@ export function useTableOptionButtons({hooks, methods, command, setting, config,
 
     command.on('esc', () => methods.editMethods.cancel())
     command.on('alt+s', () => methods.editMethods.save())
+    command.on('up', () => methods.pageMethods.selectPrevRow())
+    command.on('down', () => methods.pageMethods.selectNextRow())
+    command.on('left', () => methods.pageMethods.prev())
+    command.on('right', () => methods.pageMethods.next())
 
     const outerButtons = computed(() => {
         return [...Object.values(standardButtons), ...config.buttons || []]

package/src/packages/createUseTableOption/use/use.methods.tsx

@@ -1,4 +1,4 @@
-import {eTableProEditType, iTableProDefaultConfig, iTableSortData, iTableOptionState, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
+import {eTableProEditType, iTableOptionState, iTableProDefaultConfig, iTableSortData, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
 import {tTablePagination} from "./use.paginaiton";
 import {tTableOptionHooks} from "./use.hooks";
 import $$notice from "../../$$notice";
@@ -155,7 +155,36 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
             }
         }
 
-        return {load, reload, queryCount, next, prev, jump,}
+        /*选中下一条数据*/
+        const selectNextRow = async () => {
+            const {list, currentKey} = tableState
+            if (list.length === 0 || !currentKey) {return}
+            const index = list.findIndex(i => i[config.keyField] === currentKey)
+            if (index === list.length - 1) {
+                // 当前应是选中当前页的最后一条数据了
+                if (pagination.pageState.hasNext) {
+                    pageMethods.next()
+                }
+            } else {
+                editMethods.selectCurrent(list[index + 1][config.keyField])
+            }
+        }
+        /*选中上一条数据*/
+        const selectPrevRow = async () => {
+            const {list, currentKey} = tableState
+            if (list.length === 0 || !currentKey) {return}
+            const index = list.findIndex(i => i[config.keyField] === currentKey)
+            if (index === 0) {
+                // 当前应是选中当前页的第一条数据了
+                if (pagination.pageState.page > 0) {
+                    pageMethods.prev()
+                }
+            } else {
+                editMethods.selectCurrent(list[index - 1][config.keyField])
+            }
+        }
+
+        return {load, reload, queryCount, next, prev, jump, selectNextRow, selectPrevRow}
     })())
 
     const editMethods = (() => {