plain-design 0.0.88 → 0.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -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",

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 = (() => {

package/src/styles/data/scan.scss.json

@@ -96,10 +96,10 @@
     {
       "name": "PlColorPicker",
       "codes": [
-        "@include theme {\r\n\r\n  .pl-color-button {\r\n    border-radius: 2px;\r\n    height: 24px;\r\n    width: 24px;\r\n    border: solid 1px $ibc;\r\n    padding: 2px;\r\n    box-sizing: border-box;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n\r\n    .pl-color-button-background {\r\n      background-size: 7px 7px;\r\n      border-radius: 2px;\r\n      box-sizing: border-box;\r\n      height: 100%;\r\n      width: 100%;\r\n\r\n      .pl-color-button-color {\r\n        height: 100%;\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-color-picker {\r\n    @include sizeMixin(input) {\r\n      .pl-color-button {\r\n        height: $value/2;\r\n        width: $value/2;\r\n      }\r\n    }\r\n  }\r\n}",
         "@include theme {\r\n  .pl-color-panel {\r\n    display: inline-block;\r\n    font-size: 0;\r\n    padding: 8px 12px;\r\n\r\n    & > div:first-child {\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .pl-color-hue-slider {\r\n      margin-top: 8px;\r\n      display: block;\r\n    }\r\n\r\n    .pl-color-alpha-slider {\r\n      margin-left: 8px;\r\n    }\r\n\r\n    .pl-color-panel-input-group {\r\n      margin-top: 8px;\r\n\r\n      .pl-input {\r\n\r\n        .pl-input-inner {\r\n          text-align: center;\r\n          border-top-right-radius: 0;\r\n          border-bottom-right-radius: 0;\r\n          border-right: none;\r\n        }\r\n      }\r\n\r\n      .pl-button-group {\r\n        & > .pl-button:first-child {\r\n          border-top-left-radius: 0;\r\n          border-bottom-left-radius: 0;\r\n          border-left: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}",
-        "@include theme {\r\n  .pl-color-hue-slider {\r\n    background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);\r\n    display: inline-block;\r\n    height: 10px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n\r\n    .pl-color-hue-slider-thumb {\r\n      display: inline-block;\r\n      height: 100%;\r\n      background-color: white;\r\n      position: absolute;\r\n      top: 0;\r\n      border: solid 1px $colorInfo;\r\n      box-sizing: border-box;\r\n      border-radius: 100px;\r\n    }\r\n  }\r\n}",
+        "@include theme {\r\n\r\n  .pl-color-button {\r\n    border-radius: 2px;\r\n    height: 24px;\r\n    width: 24px;\r\n    border: solid 1px $ibc;\r\n    padding: 2px;\r\n    box-sizing: border-box;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n\r\n    .pl-color-button-background {\r\n      background-size: 7px 7px;\r\n      border-radius: 2px;\r\n      box-sizing: border-box;\r\n      height: 100%;\r\n      width: 100%;\r\n\r\n      .pl-color-button-color {\r\n        height: 100%;\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .pl-color-picker {\r\n    @include sizeMixin(input) {\r\n      .pl-color-button {\r\n        height: $value/2;\r\n        width: $value/2;\r\n      }\r\n    }\r\n  }\r\n}",
         "@include theme {\r\n  .pl-color-alpha-slider {\r\n    width: 10px;\r\n    background-size: 10px 10px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n    display: inline-block;\r\n\r\n    .pl-color-alpha-shadow, .pl-color-alpha-thumb {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .pl-color-alpha-shadow {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .pl-color-alpha-thumb {\r\n      width: 10px;\r\n      height: 10px;\r\n      border-radius: 10px;\r\n      border: solid 1px $colorInfo;\r\n      display: inline-block;\r\n      background-color: white;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      box-sizing: border-box;\r\n    }\r\n  }\r\n}",
+        "@include theme {\r\n  .pl-color-hue-slider {\r\n    background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);\r\n    display: inline-block;\r\n    height: 10px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n\r\n    .pl-color-hue-slider-thumb {\r\n      display: inline-block;\r\n      height: 100%;\r\n      background-color: white;\r\n      position: absolute;\r\n      top: 0;\r\n      border: solid 1px $colorInfo;\r\n      box-sizing: border-box;\r\n      border-radius: 100px;\r\n    }\r\n  }\r\n}",
         "@include theme {\r\n  .pl-color-sv-panel {\r\n    position: relative;\r\n    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.4);\r\n    cursor: pointer;\r\n    display: inline-block;\r\n\r\n    &:before, &:after, & span {\r\n      pointer-events: none;\r\n    }\r\n\r\n    &, &:before, &:after {\r\n      border-radius: 2px;\r\n    }\r\n\r\n    &:before, &:after {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      content: '';\r\n    }\r\n\r\n    &:before {\r\n      background: linear-gradient(to right, white, rgba(255, 255, 255, 0));\r\n    }\r\n\r\n    &:after {\r\n      background: linear-gradient(to top, black, rgba(255, 255, 255, 0));\r\n    }\r\n\r\n    .pl-color-sv-thumb {\r\n      display: inline-block;\r\n      position: absolute;\r\n      width: 1px;\r\n      height: 1px;\r\n      left: 0;\r\n      top: 0;\r\n      z-index: 1;\r\n\r\n      &:after {\r\n        display: inline-block;\r\n        width: 10px;\r\n        height: 10px;\r\n        border: solid 1px #999;\r\n        border-radius: 10px;\r\n        position: absolute;\r\n        top: -5px;\r\n        left: -5px;\r\n        content: '';\r\n        box-sizing: border-box;\r\n        background-color: white;\r\n      }\r\n    }\r\n  }\r\n}"
       ],
       "seq": 27
@@ -425,9 +425,9 @@
       "codes": [
         "@include theme {\r\n  .pro-column-filter-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    width: 360px;\r\n    padding: 0 12px;\r\n\r\n    & > div {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 4px 0;\r\n\r\n      & > .pl-filter {\r\n        width: 100%;\r\n        display: flex;\r\n      }\r\n\r\n      .pl-button-group {\r\n        width: 100%;\r\n        display: flex;\r\n\r\n        .pl-button:not(.pl-button-icon-only) {\r\n          flex: 1;\r\n        }\r\n      }\r\n\r\n      & > .pl-button {\r\n        flex: 1;\r\n\r\n        &:first-child {\r\n          margin-right: 2px;\r\n        }\r\n\r\n        &:last-child {\r\n          margin-left: 2px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pro-column-filter-sort-container {\r\n      background-color: $ibl;\r\n      height: plv(sizeNormal);\r\n      border-radius: 100px;\r\n      width: 100%;\r\n      display: flex;\r\n      align-items: stretch;\r\n      box-sizing: border-box;\r\n      padding: 2px;\r\n\r\n      & > div {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        border-radius: 100px;\r\n        cursor: pointer;\r\n        background-color: $ibl;\r\n        transition: background-color 300ms linear;\r\n\r\n        &:hover {\r\n          background-color: #fcfcfc;\r\n        }\r\n\r\n        &.pro-column-filter-sort-item-active {\r\n          background-color: white;\r\n          box-shadow: 0 2px 8px #ddd;\r\n          color: $colorPrimary;\r\n        }\r\n\r\n      }\r\n    }\r\n  }\r\n}\r\n",
         "@include theme {\r\n  .pl-table-pro-distinct-filter-item {\r\n    display: flex;\r\n    align-items: stretch;\r\n    line-height: 28px;\r\n\r\n    padding: 8px 0;\r\n\r\n    background-color: white;\r\n    transition: background-color 300ms linear;\r\n\r\n    &:not(:last-child) {\r\n      border-bottom: solid 1px $ibl;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: #f6f6f6;\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-title {\r\n      color: $colorPrimary;\r\n      margin: 0 8px;\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-tags {\r\n\r\n      cursor: pointer;\r\n\r\n      & > div {\r\n        display: inline-block;\r\n        font-size: 12px;\r\n        background-color: $colorPrimaryLight;\r\n        padding: 0 12px;\r\n        margin: 1px 2px;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-distinct-filter-item-button {\r\n\r\n    }\r\n  }\r\n}\r\n",
+        ".pl-table-pro-setting-config {\r\n  .pl-table-pro-setting-config-button {\r\n    margin-bottom: 16px;\r\n\r\n    & > * {\r\n      margin-right: 8px;\r\n    }\r\n  }\r\n}\r\n",
         "@include theme {\r\n  .pl-table-pro-setting-export {\r\n    .pl-table-pro-setting-export-option {\r\n      padding: 12px 12px 12px 50px;\r\n      transition: background-color linear 300ms;\r\n      position: relative;\r\n\r\n      &:hover {\r\n        background-color: $colorPrimaryLight;\r\n        cursor: pointer;\r\n      }\r\n\r\n      &:not(:first-child) {\r\n        border-top: solid 1px $ibl;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-radio {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 50px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-title {\r\n        font-size: 16px;\r\n        margin-bottom: 8px;\r\n      }\r\n\r\n      .pl-table-pro-setting-export-option-desc {\r\n        font-size: 12px;\r\n        color: $icc;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-export-foot {\r\n      text-align: center;\r\n      margin-top: 20px;\r\n\r\n      .pl-button + .pl-button {\r\n        margin-left: 8px;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-export-loading {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      .pl-loading, .pl-icon {\r\n        font-size: 32px;\r\n      }\r\n\r\n      & > span {\r\n        color: $icc;\r\n      }\r\n\r\n      & > * {\r\n        margin-bottom: 24px;\r\n      }\r\n    }\r\n  }\r\n}\r\n",
         "@include theme {\r\n  .pl-table-pro-setting-all-filter {\r\n\r\n    background-color: #fafafa;\r\n    min-height: 100%;\r\n    width: 100%;\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    padding: 16px;\r\n\r\n    & > * {\r\n      margin-bottom: 16px;\r\n\r\n      &:first-child {\r\n        text-align: right;\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-all-filter-item {\r\n      background-color: white;\r\n      box-sizing: border-box;\r\n      border-radius: 2px;\r\n      box-shadow: 1px 1px 8px 1px #e2e3e4;\r\n\r\n      .pl-table-pro-setting-all-filter-item-head {\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        border-bottom: solid 1px $ibl;\r\n        padding: 16px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n      }\r\n\r\n      .pl-table-pro-setting-all-filter-item-body {\r\n        padding: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n",
-        ".pl-table-pro-setting-config {\r\n  .pl-table-pro-setting-config-button {\r\n    margin-bottom: 16px;\r\n\r\n    & > * {\r\n      margin-right: 8px;\r\n    }\r\n  }\r\n}\r\n",
         ".pl-table-pro-setting-senior-filter {\r\n  .pl-table-pro-setting-senior-filter-button {\r\n    display: flex;\r\n    justify-content: space-between;\r\n\r\n    .pl-button + * {\r\n      margin-left: 8px;\r\n    }\r\n  }\r\n\r\n  .pl-table-pro-setting-senior-filter-item {\r\n    margin-bottom: 16px;\r\n\r\n    .pl-table-pro-setting-senior-filter-item-id {\r\n      width: 80px;\r\n      display: inline-block;\r\n      text-align: center;\r\n    }\r\n\r\n    .pl-table-pro-setting-senior-filter-item-content {\r\n      width: calc(100% - 80px);\r\n      display: inline-block;\r\n    }\r\n  }\r\n}\r\n",
         "@include theme {\r\n  .pl-table-pro-setting {\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: stretch;\r\n\r\n    $nav-bg: #fcfcfc;\r\n\r\n    .pl-table-pro-setting-nav {\r\n      background-color: $nav-bg;\r\n      display: flex;\r\n      flex-direction: column;\r\n\r\n      .pl-table-pro-setting-nav-item:last-child {\r\n        flex: 1;\r\n      }\r\n\r\n      .pl-table-pro-setting-nav-item {\r\n        padding: 12px 24px;\r\n        cursor: pointer;\r\n        background-color: white;\r\n        position: relative;\r\n\r\n        .pl-table-pro-setting-nav-item-inner {\r\n          position: relative;\r\n          z-index: 1;\r\n        }\r\n\r\n        &:hover, &.pl-table-pro-setting-nav-item-active {\r\n          color: $colorPrimary;\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-active {\r\n          &:after {\r\n            position: absolute;\r\n            content: '';\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 2px;\r\n            background-color: $colorPrimary;\r\n          }\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-prev {\r\n          &:before {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border-bottom-right-radius: 4px;\r\n            background-color: $nav-bg;\r\n            content: '';\r\n            border-bottom: solid 1px $ibl;\r\n            border-right: solid 1px $ibl;\r\n          }\r\n        }\r\n\r\n        &.pl-table-pro-setting-nav-item-next {\r\n          &:before {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border-top-right-radius: 4px;\r\n            background-color: $nav-bg;\r\n            content: '';\r\n            border-top: solid 1px $ibl;\r\n            border-right: solid 1px $ibl;\r\n          }\r\n        }\r\n\r\n        &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {\r\n          background-color: $nav-bg;\r\n          border-right: solid 1px $ibl;\r\n        }\r\n      }\r\n    }\r\n\r\n    .pl-table-pro-setting-content {\r\n      flex: 1;\r\n      overflow-y: scroll;\r\n      overflow-x: hidden;\r\n      width: 650px;\r\n      box-sizing: border-box;\r\n\r\n      &.pl-table-pro-setting-content-pending {\r\n        padding: 16px;\r\n      }\r\n\r\n      &::-webkit-scrollbar {\r\n        background: white;\r\n        width: 6px;\r\n        height: 6px;\r\n      }\r\n\r\n      &::-webkit-scrollbar-thumb {\r\n        background: rgba(black, 0.25);\r\n        border-radius: 6px;\r\n      }\r\n\r\n      .pl-table-pro-setting-content-header {\r\n        text-align: right;\r\n\r\n        & > .pl-button + .pl-button {\r\n          margin-left: 8px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"
       ],