plain-design 0.0.81 → 0.0.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "0.0.81",
3
+ "version": "0.0.85",
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.103",
24
+ "plain-design-composition": "0.0.105",
25
25
  "react": "^17.0.1",
26
26
  "react-dom": "^17.0.1"
27
27
  },
@@ -66,7 +66,7 @@
66
66
  "fork-ts-checker-webpack-plugin": "^6.2.4",
67
67
  "mini-css-extract-plugin": "^1.6.2",
68
68
  "mockjs": "^1.1.0",
69
- "plain-design-composition": "0.0.103",
69
+ "plain-design-composition": "0.0.105",
70
70
  "postcss": "^8.2.13",
71
71
  "postcss-loader": "^4.2.0",
72
72
  "qs": "^6.10.1",
@@ -1,6 +1,5 @@
1
- import {reactive, computed, designComponent, PropType, watch, useStyles, useRefs} from 'plain-design-composition'
1
+ import {computed, designComponent, PropType, reactive, useClasses, useRefs, useStyles, watch} from 'plain-design-composition'
2
2
  import './image.scss'
3
- import {useClasses} from "plain-design-composition";
4
3
  import {unit} from "plain-utils/string/unit";
5
4
  import React from 'react';
6
5
  import PlIcon from "../PlIcon";
@@ -28,8 +27,23 @@ export const PlImageProps = {
28
27
  position: {type: String, default: 'top center'}, // 图片 object-position 属性
29
28
  }
30
29
 
30
+ const PathPattern = /^(https?|data:image)/
31
+
32
+ const formatImagePath = (url: string | null | undefined, urlPrefix?: string) => {
33
+ if (!url) {return ''}
34
+ if (!urlPrefix) {return url}
35
+ if (url == null) {return url}
36
+ if (PathPattern.test(url)) {return url}
37
+ urlPrefix = urlPrefix[urlPrefix.length - 1] === '/' ? urlPrefix.slice(0, -1) : urlPrefix
38
+ const imgUrl = url[0] === '/' ? url.slice(1) : url
39
+ return [urlPrefix, imgUrl].join('/')
40
+ }
41
+
31
42
  export const PlImage = designComponent({
32
43
  name: 'pl-image',
44
+ expose: {
45
+ formatImagePath,
46
+ },
33
47
  props: {
34
48
  src: {type: String as PropType<string | null>}, // 图片地址
35
49
  status: {type: String as PropType<keyof typeof ImageStatus>}, // 当前转股固态,fill, container, cover, none, scale-down
@@ -40,6 +54,7 @@ export const PlImage = designComponent({
40
54
  minWidth: {type: [String, Number]}, // 最小宽度
41
55
  width: {type: [String, Number]}, // 图片宽度
42
56
  height: {type: [String, Number]}, // 图片高度
57
+ urlPrefix: {type: String}, // 图片地址前缀
43
58
  ...PlImageProps,
44
59
  },
45
60
  emits: {
@@ -62,7 +77,7 @@ export const PlImage = designComponent({
62
77
  const status = computed(() => props.status == null ? state.status : props.status)
63
78
 
64
79
  watch(() => props.src, val => {
65
- state.src = val
80
+ state.src = formatImagePath(val, props.urlPrefix)
66
81
  if (!val) {
67
82
  return state.status = ImageStatus.empty
68
83
  }
@@ -70,13 +85,13 @@ export const PlImage = designComponent({
70
85
  const image = new Image()
71
86
  image.onload = () => {
72
87
  state.status = ImageStatus.success
73
- emit.onSuccess(val)
88
+ emit.onSuccess(state.src!)
74
89
  }
75
90
  image.onerror = (e) => {
76
91
  state.status = ImageStatus.error
77
92
  emit.onError(e)
78
93
  }
79
- image.src = val
94
+ image.src = state.src
80
95
  }, {immediate: true})
81
96
 
82
97
  const classes = useClasses(() => [
@@ -1,8 +1,7 @@
1
- import {designComponent, PropType, reactive, useModel, useRefs, useStyles, watch} from "plain-design-composition"
1
+ import {designComponent, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition"
2
2
  import {EditProps, useEdit} from "../../use/useEdit";
3
3
  import PlImage, {PlImageProps} from "../PlImage";
4
4
  import $$file, {FileServiceDefaultAccept, FileServiceUploadConfig} from "../$$file";
5
- import {useClasses} from "plain-design-composition";
6
5
  import {unit} from "plain-utils/string/unit";
7
6
  import {deepcopy} from "plain-utils/object/deepcopy";
8
7
  import {defer} from "plain-utils/utils/defer";
@@ -36,6 +35,7 @@ export const PlImageUploader = designComponent({
36
35
  handleDelete: {type: Function as PropType<() => void | Promise<void>>}, // 自定义删除图片逻辑
37
36
  handleUpload: {type: Function as PropType<(file: File) => void | Promise<void>>}, // 自定义上传图片逻辑
38
37
  handlePreview: {type: Function as PropType<(url?: string) => void>}, // 自定义预览逻辑
38
+ urlPrefix: {type: String},
39
39
  },
40
40
  inheritPropsType: HTMLDivElement,
41
41
  emits: {
@@ -60,22 +60,22 @@ export const PlImageUploader = designComponent({
60
60
  })
61
61
 
62
62
  watch(() => props.modelValue, val => {
63
- model.value = val
63
+ model.value = PlImage.formatImagePath(val, props.urlPrefix)
64
64
  state.chooseBase64 = undefined
65
- if (!val) {
65
+ if (!model.value) {
66
66
  return state.status = ImageUploaderStatus.empty
67
67
  }
68
68
  state.status = ImageUploaderStatus.pending
69
69
  const image = new Image()
70
70
  image.onload = () => {
71
71
  state.status = ImageUploaderStatus.success
72
- emit.onLoadSuccess(val)
72
+ emit.onLoadSuccess(model.value!)
73
73
  }
74
74
  image.onerror = (e) => {
75
75
  state.status = ImageUploaderStatus.error
76
76
  emit.onLoadError(e)
77
77
  }
78
- image.src = val
78
+ image.src = model.value
79
79
  }, {immediate: true})
80
80
 
81
81
  const classes = useClasses(() => [
@@ -147,7 +147,7 @@ export const PlImageUploader = designComponent({
147
147
  if (state.status === ImageUploaderStatus.error) {
148
148
  return await handler.onClick()
149
149
  }
150
- const url = props.previewImage || model.value || state.chooseBase64
150
+ const url = PlImage.formatImagePath(props.previewImage! || model.value! || state.chooseBase64!, props.urlPrefix)
151
151
  if (!!props.handlePreview) {
152
152
  return props.handlePreview(url)
153
153
  } else {
@@ -178,6 +178,7 @@ export const PlImageUploader = designComponent({
178
178
  previewOnClick={false}
179
179
  height={props.height}
180
180
  width={props.width}
181
+ urlPrefix={props.urlPrefix}
181
182
  onClick={handler.onClickImage}
182
183
  />
183
184
  )}
@@ -75,6 +75,10 @@ export default designComponent({
75
75
  collapseAll: () => {
76
76
  state.expandKeys = {}
77
77
  },
78
+ isExpand,
79
+ toggle,
80
+ expand,
81
+ close,
78
82
  }
79
83
 
80
84
  const {refer, render} = useExternalPlc({
@@ -36,19 +36,8 @@ export const PlcImage = designComponent({
36
36
  data: {},
37
37
  }
38
38
 
39
- const formatUrl = (url: string | undefined | null): string | null | undefined => {
40
- if (!props.urlPrefix) {return }
41
- if (url == null) {return url}
42
- if (/^(https?|data:image)/.test(url)) {return url}
43
-
44
- const urlPrefix = props.urlPrefix[props.urlPrefix.length - 1] === '/' ? props.urlPrefix.slice(0, -1) : props.urlPrefix
45
- const imgUrl = url[0] === '/' ? url.slice(1) : url
46
-
47
- return [urlPrefix, imgUrl].join('/')
48
- }
49
-
50
39
  const preview = (index: number) => {
51
- $$image.preview((table.dataModel.value || []).map(i => formatUrl(i[props.field!])), index)
40
+ $$image.preview((table.dataModel.value || []).map(i => PlImage.formatImagePath(i[props.field!], props.urlPrefix)), index)
52
41
  }
53
42
 
54
43
  return useExternalPlc({
@@ -59,8 +48,9 @@ export const PlcImage = designComponent({
59
48
  defaultScopeSlots: {
60
49
  normal: ({row, plc, node}) => (
61
50
  !plc.props.field ? null : <PlImage
51
+ urlPrefix={props.urlPrefix}
62
52
  previewOnClick={false}
63
- src={formatUrl(row[plc.props.field])}
53
+ src={row[plc.props.field]}
64
54
  height={size}
65
55
  width={size}
66
56
  fit="cover"
@@ -69,7 +59,8 @@ export const PlcImage = designComponent({
69
59
  ),
70
60
  edit: ({row, plc}) => !plc.props.field ? null :
71
61
  <PlImageUploader
72
- modelValue={formatUrl(row[plc.props.field])!}
62
+ urlPrefix={props.urlPrefix}
63
+ modelValue={row[plc.props.field]}
73
64
  onUpdateModelValue={val => row[plc.props.field!] = val}
74
65
  uploadConfig={uploadConfig}
75
66
  height={size}
@@ -65,8 +65,7 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
65
65
 
66
66
  const pageMethods = useAsyncMethods((() => {
67
67
 
68
- const load = async (loadConfig?: { page?: number, size?: number }) => {
69
- if (confirm.state.status !== eTableProStatus.select) {await editMethods.save()}
68
+ const getParams = async (loadConfig?: { page?: number, size?: number }) => {
70
69
  await hooks.onBeginLoad.exec(undefined)
71
70
  let targetLoadConfig = {
72
71
  page: !!loadConfig && loadConfig.page != null ? loadConfig.page : pagination.pageState.page,
@@ -89,6 +88,12 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
89
88
  requestData = newRequestData
90
89
  requestConfig.method === 'GET' ? (requestConfig.query = requestData) : (requestConfig.body = requestData)
91
90
  }
91
+ return {requestConfig, request, requestData, targetLoadConfig}
92
+ }
93
+
94
+ const load = async (loadConfig?: { page?: number, size?: number }) => {
95
+ if (confirm.state.status !== eTableProStatus.select) {await editMethods.save()}
96
+ let {requestConfig, request, requestData, targetLoadConfig} = await getParams(loadConfig)
92
97
  requestConfig = await hooks.onBeforeLoad.exec(requestConfig)
93
98
  await hooks.onStartLoad.exec({requestConfig, requestData, request})
94
99
  let {rows, hasNext} = await request(requestConfig)
@@ -101,16 +106,17 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
101
106
 
102
107
  const reload = async (reloadConfig?: { size?: number }) => {
103
108
  const rows = await load({page: 0, size: !reloadConfig ? undefined : reloadConfig.size})
104
- pagination.updateTotal(null)
109
+ if (pagination.pageState.hasNext) {pagination.updateTotal(null)}
105
110
  return rows
106
111
  }
107
112
 
108
113
  const queryCount = async () => {
109
114
  if (confirm.state.status !== eTableProStatus.select) {await editMethods.save()}
110
- await hooks.onBeginLoad.exec(undefined)
111
- let {request, requestData, requestConfig} = utils.getUrlConfig('query')
112
- Object.assign(requestData, {onlyCount: true})
115
+ let {requestConfig, request, requestData} = await getParams()
113
116
  requestConfig = await hooks.onBeforeLoad.exec(requestConfig)
117
+ Object.assign(requestData, {onlyCount: true, page: undefined, size: undefined})
118
+ requestConfig = await hooks.onBeforeLoad.exec(requestConfig)
119
+ await hooks.onStartLoad.exec({requestConfig, requestData, request})
114
120
  let {total} = await request(requestConfig)
115
121
  pagination.updateTotal(total || null)
116
122
  return total
@@ -3,7 +3,6 @@ import {tTableOptionConfig} from "../createUseTableOption.utils";
3
3
  import PlPagination from "../../PlPagination";
4
4
  import React from "react";
5
5
  import {tTableOptionHooks} from "./use.hooks";
6
- import {delay} from "plain-utils/utils/delay";
7
6
 
8
7
  export function useTableOptionPagination({tableState, config, hooks, onPrev, onNext, onJump, onSizeChange}: {
9
8
  tableState: { list: any[] },
@@ -28,7 +27,7 @@ export function useTableOptionPagination({tableState, config, hooks, onPrev, onN
28
27
  pageState.size = data.size
29
28
  pageState.hasNext = data.hasNext
30
29
  if (pageState.hasNext === false) {
31
- pageState.total = pageState.page * pageState.size + data.list.length
30
+ updateTotal(pageState.page * pageState.size + data.list.length)
32
31
  }
33
32
  }
34
33
 
@@ -1,4 +1,4 @@
1
- import {onBeforeUnmount, onMounted, provide, reactive, ref, useRefs, useStyles} from "plain-design-composition";
1
+ import {onBeforeUnmount, onMounted, provide, reactive, ref, Portal, useRefs, useStyles} from "plain-design-composition";
2
2
  import {createDefaultService} from "../PlRoot/createDefaultService";
3
3
  import {nextIndex} from "plain-design-composition"
4
4
  import {ReactNode} from "react";
@@ -153,20 +153,22 @@ export const PlContextMenuService = createDefaultService({
153
153
  }
154
154
 
155
155
  return (
156
- <div className="pl-contextmenu-service" style={styles.value} ref={onRef.el} {...{show: String(isShow.value)} as any}>
157
- <PlTransition
158
- key={state.zIndex}
159
- name="pl-transition-scale"
160
- show={isShow.value}
161
- unmount={false}
162
- onEnter={() => state.bodyPos = {width: refs.el!.offsetWidth, height: refs.el!.offsetHeight}}
163
- onEntered={handler.onTransitionEnd}
164
- onExited={handler.onTransitionEnd}>
165
- <div className="pl-contextmenu-service-body" style={bodyStyles.value}>
166
- {content}
167
- </div>
168
- </PlTransition>
169
- </div>
156
+ <Portal to=".pl-root-service-container">
157
+ <div className="pl-contextmenu-service" style={styles.value} ref={onRef.el} {...{show: String(isShow.value)} as any}>
158
+ <PlTransition
159
+ key={state.zIndex}
160
+ name="pl-transition-scale"
161
+ show={isShow.value}
162
+ unmount={false}
163
+ onEnter={() => state.bodyPos = {width: refs.el!.offsetWidth, height: refs.el!.offsetHeight}}
164
+ onEntered={handler.onTransitionEnd}
165
+ onExited={handler.onTransitionEnd}>
166
+ <div className="pl-contextmenu-service-body" style={bodyStyles.value}>
167
+ {content}
168
+ </div>
169
+ </PlTransition>
170
+ </div>
171
+ </Portal>
170
172
  )
171
173
  }
172
174
  }
@@ -1,5 +1,5 @@
1
1
  import {createDefaultService} from "../PlRoot/createDefaultService";
2
- import {reactive, onMounted, ref, useStyles, computed, onBeforeUnmount} from "plain-design-composition";
2
+ import {reactive, onMounted, ref, useStyles, computed, onBeforeUnmount, nextIndex} from "plain-design-composition";
3
3
  import PlTransition from "../PlTransition";
4
4
  import React from "react";
5
5
  import {PlImage} from "../PlImage";
@@ -37,7 +37,8 @@ const Service = createDefaultService({
37
37
  left: null as null | number, // 当前图片拖拽left距离
38
38
  rotate: null as null | number, // 当前图片旋转距离
39
39
  },
40
- mounted: new Promise<void>(resolve => onMounted(resolve))
40
+ mounted: new Promise<void>(resolve => onMounted(resolve)),
41
+ zIndex: nextIndex(),
41
42
  })
42
43
 
43
44
  const imgStyles = useStyles(style => {
@@ -65,6 +66,7 @@ const Service = createDefaultService({
65
66
  state.count = nextCount()
66
67
  await state.mounted
67
68
  isShow.value = true
69
+ state.zIndex = nextIndex()
68
70
 
69
71
  setTimeout(() => {
70
72
  const activeElement = document.activeElement as HTMLElement
@@ -212,7 +214,7 @@ const Service = createDefaultService({
212
214
  },
213
215
  render: () => (
214
216
  createPortal(<PlTransition name="pl-image-preview" show={isShow.value}>
215
- <div className="pl-image-preview-service" onClick={handler.onClickMask}>
217
+ <div className="pl-image-preview-service" style={{zIndex: state.zIndex}} onClick={handler.onClickMask}>
216
218
  <div className="pl-image-preview-service-img-wrapper">
217
219
  <PlTransition switch name={'pl-transition-scale'} key={state.count}>
218
220
  {/*不加这个div,switch动画没有效果,真是奇怪。PlButton可以,PlCard可以,就PlImage不行*/}
@@ -60,8 +60,8 @@
60
60
  {
61
61
  "name": "PlCascadePanel",
62
62
  "codes": [
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 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}"
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 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}",
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}"
65
65
  ],
66
66
  "seq": 18
67
67
  },
@@ -370,11 +370,11 @@
370
370
  "name": "PlTabs",
371
371
  "codes": [
372
372
  "@include theme {\r\n .pl-tabs {\r\n .pl-tabs-collector {\r\n height: 0;\r\n width: 0;\r\n overflow: hidden;\r\n display: block;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n cursor: pointer;\r\n user-select: none;\r\n\r\n .pl-icon {\r\n margin-left: 8px;\r\n }\r\n\r\n &:not(.pl-tabs-header-item-active) {\r\n .pl-icon {\r\n color: $icc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-header-item-operator {\r\n flex-grow: 1;\r\n flex-shrink: 0;\r\n position: sticky;\r\n right: 4px;\r\n height: 45px;\r\n line-height: 45px;\r\n padding-left: 16px;\r\n justify-self: flex-end;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n background-color: white;\r\n\r\n & > * + * {\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n}\r\n",
373
- "@include theme {\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-text {\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n\r\n & + .pl-tabs-header-item {\r\n margin-left: 32px;\r\n }\r\n\r\n &.pl-tabs-header-item-active, &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n .pl-tabs-header-list {\r\n position: relative;\r\n\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n background-color: $disabled;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n\r\n .pl-tabs-header-horizontal-text-indicator {\r\n position: absolute;\r\n width: 0;\r\n left: 0;\r\n height: 100%;\r\n background-color: $colorPrimary;\r\n display: block;\r\n transition: $transition 150ms all;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n bottom: 0;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n top: 0;\r\n }\r\n }\r\n }\r\n}\r\n",
373
+ "@include theme {\r\n .pl-tabs.pl-tabs-head-type-shadow {\r\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);\r\n border: solid 1px $ibl;\r\n box-sizing: border-box;\r\n\r\n & + * {\r\n margin-top: 16px;\r\n }\r\n\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-shadow {\r\n background-color: $disabled;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n padding: 0 20px;\r\n color: $itl;\r\n box-sizing: border-box;\r\n transition: all linear 300ms;\r\n border-left: solid 1px transparent;\r\n border-right: solid 1px transparent;\r\n\r\n &:first-child {\r\n border-left: none;\r\n }\r\n\r\n &:hover, &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: transparent;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n content: '';\r\n transition: all linear 300ms;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n background-color: white;\r\n border-color: $ibl;\r\n\r\n &:before {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-list {\r\n border-bottom: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n top: 100%\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-list {\r\n border-top: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n bottom: 100%\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
374
374
  "@include theme {\r\n .pl-tabs-header-horizontal {\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .pl-tabs-header-list {\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n min-width: 100%;\r\n position: relative;\r\n transition: 300ms $transitionFlexible left;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n display: inline-block;\r\n font-size: 14px;\r\n }\r\n\r\n &.pl-tabs-header-show-more {\r\n padding-right: 80px;\r\n\r\n .pl-tabs-header-more-button {\r\n z-index: 1;\r\n position: absolute;\r\n background-color: rgba(white, 0.9);\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 80px;\r\n box-shadow: 0 2px 8px #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $ihc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-head-position-top, .pl-tabs-head-position-bottom {\r\n &.pl-tabs-fit-height {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n\r\n & > .pl-tabs-body {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
375
- "@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n",
376
375
  "@include theme {\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-card {\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n padding: 0 20px;\r\n border-left: solid 1px $ibc;\r\n\r\n &:last-child {\r\n border-right: solid 1px $ibc;\r\n }\r\n\r\n &:hover, &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-list {\r\n border-bottom: solid 1px $ibc;\r\n\r\n .pl-tabs-header-item {\r\n border-top: solid 1px $ibc;\r\n\r\n &:first-child {\r\n border-top-left-radius: $shapeFillet;\r\n }\r\n\r\n &:last-child {\r\n border-top-right-radius: $shapeFillet;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: white;\r\n left: 0;\r\n right: 0;\r\n top: 100%;\r\n height: 1px;\r\n content: '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-list {\r\n border-top: solid 1px $ibc;\r\n\r\n .pl-tabs-header-item {\r\n border-bottom: solid 1px $ibc;\r\n\r\n &:first-child {\r\n border-bottom-left-radius: $shapeFillet;\r\n }\r\n\r\n &:last-child {\r\n border-bottom-right-radius: $shapeFillet;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: white;\r\n left: 0;\r\n right: 0;\r\n bottom: 100%;\r\n height: 1px;\r\n content: '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}",
377
- "@include theme {\r\n .pl-tabs.pl-tabs-head-type-shadow {\r\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);\r\n border: solid 1px $ibl;\r\n box-sizing: border-box;\r\n\r\n & + * {\r\n margin-top: 16px;\r\n }\r\n\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-shadow {\r\n background-color: $disabled;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n padding: 0 20px;\r\n color: $itl;\r\n box-sizing: border-box;\r\n transition: all linear 300ms;\r\n border-left: solid 1px transparent;\r\n border-right: solid 1px transparent;\r\n\r\n &:first-child {\r\n border-left: none;\r\n }\r\n\r\n &:hover, &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: transparent;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n content: '';\r\n transition: all linear 300ms;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n background-color: white;\r\n border-color: $ibl;\r\n\r\n &:before {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-list {\r\n border-bottom: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n top: 100%\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-list {\r\n border-top: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n bottom: 100%\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
376
+ "@include theme {\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-text {\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n\r\n & + .pl-tabs-header-item {\r\n margin-left: 32px;\r\n }\r\n\r\n &.pl-tabs-header-item-active, &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n .pl-tabs-header-list {\r\n position: relative;\r\n\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n background-color: $disabled;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n\r\n .pl-tabs-header-horizontal-text-indicator {\r\n position: absolute;\r\n width: 0;\r\n left: 0;\r\n height: 100%;\r\n background-color: $colorPrimary;\r\n display: block;\r\n transition: $transition 150ms all;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n bottom: 0;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n top: 0;\r\n }\r\n }\r\n }\r\n}\r\n",
377
+ "@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n"
378
378
  ],
379
379
  "seq": 80
380
380
  },
@@ -423,13 +423,13 @@
423
423
  {
424
424
  "name": "createUseTableOption",
425
425
  "codes": [
426
- ".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",
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
- "@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
427
  "@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",
428
+ ".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",
429
+ "@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",
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
- ".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"
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"
433
433
  ],
434
434
  "seq": 92
435
435
  },