plain-design 0.0.91 → 0.0.92

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "0.0.91",
3
+ "version": "0.0.92",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
@@ -21,7 +21,7 @@
21
21
  "author": "",
22
22
  "license": "ISC",
23
23
  "peerDependencies": {
24
- "plain-design-composition": "0.0.109",
24
+ "plain-design-composition": "0.0.114",
25
25
  "react": "^17.0.1",
26
26
  "react-dom": "^17.0.1"
27
27
  },
@@ -65,7 +65,7 @@
65
65
  "fork-ts-checker-webpack-plugin": "^6.2.4",
66
66
  "mini-css-extract-plugin": "^1.6.2",
67
67
  "mockjs": "^1.1.0",
68
- "plain-design-composition": "^0.0.113",
68
+ "plain-design-composition": "^0.0.114",
69
69
  "postcss": "^8.2.13",
70
70
  "postcss-loader": "^4.2.0",
71
71
  "qs": "^6.10.1",
@@ -61,6 +61,14 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
61
61
  requestConfig,
62
62
  }
63
63
  },
64
+ getChangeNode: (node: TableNode) => {
65
+ const {editRow, data} = node
66
+ const changeKey = Object.keys({...editRow, ...data}).find(key => editRow[key] !== data[key])
67
+ /*if (!!changeKey) {
68
+ console.log(editRow[changeKey], data[changeKey])
69
+ }*/
70
+ return !!changeKey ? node : null
71
+ },
64
72
  }
65
73
 
66
74
  const pageMethods = useAsyncMethods((() => {
@@ -381,6 +389,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
381
389
  $$message.error(`第${index + 1}条记录校验不通过,${errors[0].label}:${errors[0].message}`)
382
390
  return Promise.reject(validateResult)
383
391
  }
392
+ const changeNode = utils.getChangeNode(node)
393
+ if (!changeNode) {
394
+ // 没有改变任何字段
395
+ node.closeEdit()
396
+ await selectCurrent(node.editRow[config.keyField])
397
+ return
398
+ }
384
399
  const saveRow = await saveUpdate(node.editRow)
385
400
  node.saveEdit(saveRow)
386
401
  node.closeEdit()
@@ -425,8 +440,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
425
440
  $$message.error(`第${index + 1}条记录校验不通过,${errors[0].label}:${errors[0].message}`)
426
441
  return Promise.reject(validateResults[0])
427
442
  }
443
+ const changeNodes = updateNodes.map(node => utils.getChangeNode(node)).filter(Boolean) as TableNode[]
444
+ if (changeNodes.length === 0) {
445
+ updateNodes.forEach(node => node.cancelEdit())
446
+ return confirm.close.clear()
447
+ }
428
448
  let {request, requestConfig} = utils.getUrlConfig('batchUpdate')
429
- requestConfig.body = {rows: await Promise.all(deepcopy(updateNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
449
+ requestConfig.body = {rows: await Promise.all(deepcopy(changeNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
430
450
  requestConfig = await hooks.onBeforeUpdate.exec(requestConfig)
431
451
  await request!(requestConfig)
432
452
  confirm.close.clear()
@@ -60,8 +60,8 @@
60
60
  {
61
61
  "name": "PlCascadePanel",
62
62
  "codes": [
63
- "@include theme {\r\n .pl-cascade-panel {\r\n display: inline-block;\r\n height: 200px;\r\n border: solid 1px $ibc;\r\n border-radius: $popperRadius;\r\n color: $itc;\r\n\r\n & > .pl-list {\r\n height: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n .pl-cascade-list {\r\n width: 180px;\r\n height: 100%;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n display: inline-block;\r\n vertical-align: top;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n\r\n &:not(:last-child) {\r\n border-right: solid 1px $ibc;\r\n }\r\n\r\n .pl-list {\r\n overflow: hidden;\r\n }\r\n\r\n .pl-cascade-item {\r\n padding: 5px 0 5px 12px;\r\n line-height: 22px;\r\n font-weight: 400;\r\n font-size: 13px;\r\n color: $itc;\r\n background-color: white;\r\n transition: all 300ms $transition;\r\n cursor: pointer;\r\n\r\n .pl-cascade-content {\r\n padding-right: 30px;\r\n position: relative;\r\n\r\n .pl-cascade-arrow {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $icc;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-expand, &:hover {\r\n color: $ihc;\r\n background-color: $disabled;\r\n }\r\n\r\n &.pl-cascade-item-active {\r\n color: $colorPrimary;\r\n background-color: rgba($colorPrimary, 0.1);\r\n }\r\n\r\n &.pl-cascade-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n padding-left: 0;\r\n font-size: 12px;\r\n color: $disabledText;\r\n background-color: transparent;\r\n cursor: auto;\r\n\r\n .pl-icon {\r\n margin-bottom: 8px;\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-disabled {\r\n background-color: transparent;\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &.pl-cascade-filter-list {\r\n width: 360px;\r\n }\r\n }\r\n\r\n .pl-loading-mask {\r\n top: 1px;\r\n bottom: 1px;\r\n left: 1px;\r\n right: 1px;\r\n }\r\n }\r\n}\r\n",
64
- "@include theme {\r\n [service-name=pl-popper-service-cascade] {\r\n .pl-popper-content-inner {\r\n padding: 0 !important;\r\n }\r\n\r\n .pl-cascade-panel {\r\n border: none !important;\r\n }\r\n }\r\n}"
63
+ "@include theme {\r\n [service-name=pl-popper-service-cascade] {\r\n .pl-popper-content-inner {\r\n padding: 0 !important;\r\n }\r\n\r\n .pl-cascade-panel {\r\n border: none !important;\r\n }\r\n }\r\n}",
64
+ "@include theme {\r\n .pl-cascade-panel {\r\n display: inline-block;\r\n height: 200px;\r\n border: solid 1px $ibc;\r\n border-radius: $popperRadius;\r\n color: $itc;\r\n\r\n & > .pl-list {\r\n height: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n .pl-cascade-list {\r\n width: 180px;\r\n height: 100%;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n display: inline-block;\r\n vertical-align: top;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n\r\n &:not(:last-child) {\r\n border-right: solid 1px $ibc;\r\n }\r\n\r\n .pl-list {\r\n overflow: hidden;\r\n }\r\n\r\n .pl-cascade-item {\r\n padding: 5px 0 5px 12px;\r\n line-height: 22px;\r\n font-weight: 400;\r\n font-size: 13px;\r\n color: $itc;\r\n background-color: white;\r\n transition: all 300ms $transition;\r\n cursor: pointer;\r\n\r\n .pl-cascade-content {\r\n padding-right: 30px;\r\n position: relative;\r\n\r\n .pl-cascade-arrow {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $icc;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-expand, &:hover {\r\n color: $ihc;\r\n background-color: $disabled;\r\n }\r\n\r\n &.pl-cascade-item-active {\r\n color: $colorPrimary;\r\n background-color: rgba($colorPrimary, 0.1);\r\n }\r\n\r\n &.pl-cascade-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n padding-left: 0;\r\n font-size: 12px;\r\n color: $disabledText;\r\n background-color: transparent;\r\n cursor: auto;\r\n\r\n .pl-icon {\r\n margin-bottom: 8px;\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-disabled {\r\n background-color: transparent;\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &.pl-cascade-filter-list {\r\n width: 360px;\r\n }\r\n }\r\n\r\n .pl-loading-mask {\r\n top: 1px;\r\n bottom: 1px;\r\n left: 1px;\r\n right: 1px;\r\n }\r\n }\r\n}\r\n"
65
65
  ],
66
66
  "seq": 18
67
67
  },
@@ -98,9 +98,9 @@
98
98
  "codes": [
99
99
  "@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}",
100
100
  "@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}",
101
- "@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}",
102
101
  "@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}",
103
- "@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}"
102
+ "@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}",
103
+ "@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}"
104
104
  ],
105
105
  "seq": 27
106
106
  },
@@ -423,13 +423,13 @@
423
423
  {
424
424
  "name": "createUseTableOption",
425
425
  "codes": [
426
- "@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",
427
426
  "@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",
428
427
  ".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",
428
+ "@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",
429
429
  "@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",
430
430
  "@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",
431
- "@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",
432
- ".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"
431
+ ".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",
432
+ "@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"
433
433
  ],
434
434
  "seq": 92
435
435
  },