@signalplus/params-about 0.1.0
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/LICENSE +21 -0
- package/README-CN.md +81 -0
- package/README.md +81 -0
- package/index.d.ts +114 -0
- package/lib/css/index.css +1 -0
- package/lib/css/index.scss +319 -0
- package/lib/es/index.js +1125 -0
- package/package.json +120 -0
- package/pnpm-lock.yaml +11087 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 2631541504@qq.com
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README-CN.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @signalplus/params-about
|
|
2
|
+
[](https://www.npmjs.com/package/@signalplus/params-about)
|
|
3
|
+
[](https://www.npmjs.com/package/@signalplus/params-about)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
> `pkg.module supported`, 天然支持 tree-shaking, 使用 es module 引用即可
|
|
9
|
+
|
|
10
|
+
[English Document](./README.md)
|
|
11
|
+
|
|
12
|
+
A description for the module
|
|
13
|
+
|
|
14
|
+
## repository
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Demo
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## Run Example
|
|
21
|
+
你可以通过运行项目的 example 来了解这个组件的使用，以下是启动步骤：
|
|
22
|
+
|
|
23
|
+
1. 克隆项目到本地 `git clone `
|
|
24
|
+
2. 进入本地克隆目录 `cd [the-module-directory]`
|
|
25
|
+
3. 安装项目依赖 `npm i`(使用 taobao 源: `npm i --registry=http://registry.npm.taobao.org`)
|
|
26
|
+
4. 启动服务 `npm run dev`
|
|
27
|
+
5. 在你的浏览器看 example (地址通常是 `http://127.0.0.1:3000/examples/test.html`)
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
```bash
|
|
31
|
+
npm i -S @signalplus/params-about
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Global name - The variable the module exported in `umd` bundle
|
|
35
|
+
`ParamsAbout`
|
|
36
|
+
|
|
37
|
+
## Interface
|
|
38
|
+
去 [index.d.ts](./index.d.ts) 查看可用方法和参数
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
```js
|
|
42
|
+
import * as ParamsAbout from '@signalplus/params-about'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## CDN
|
|
46
|
+
在 HTML 文件中直接引用，你可以在 [CDN: unpkg](https://unpkg.com/@signalplus/params-about/lib/umd/) 看到你能用到的所有 js 脚本
|
|
47
|
+
```html
|
|
48
|
+
<-- 然后使用你需要的 -->
|
|
49
|
+
<script src="https://unpkg.com/@signalplus/params-about/lib/umd/<--module-->.js"></script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
或者，你也可以使用 [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/) 看到你能用到的所有 js 脚本
|
|
53
|
+
```html
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/<--module-->.js"></script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## style
|
|
58
|
+
你可能需要主动引入样式文件来应用组件的样式：
|
|
59
|
+
```js
|
|
60
|
+
// scss
|
|
61
|
+
import '@signalplus/params-about/lib/css/index.scss'
|
|
62
|
+
|
|
63
|
+
// css
|
|
64
|
+
import '@signalplus/params-about/lib/css/index.css'
|
|
65
|
+
```
|
|
66
|
+
Or
|
|
67
|
+
```scss
|
|
68
|
+
// scss
|
|
69
|
+
@import '~@signalplus/params-about/lib/css/index.scss'
|
|
70
|
+
|
|
71
|
+
// css
|
|
72
|
+
@import '~@signalplus/params-about/lib/css/index.css'
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
你也可以通过引入自定义的组件样式文件来自定义样式，文件可以通过复制并修改 `node_modules/@signalplus/params-about/lib/css/index.scss` 得到
|
|
76
|
+
|
|
77
|
+
## QA
|
|
78
|
+
|
|
79
|
+
1. Error `Error: spawn node-sass ENOENT`
|
|
80
|
+
|
|
81
|
+
> 你可能需要全局安装 node-sass，`npm i -g node-sass`
|
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @signalplus/params-about
|
|
2
|
+
[](https://www.npmjs.com/package/@signalplus/params-about)
|
|
3
|
+
[](https://www.npmjs.com/package/@signalplus/params-about)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
> `pkg.module supported`, which means that you can apply tree-shaking in you project
|
|
9
|
+
|
|
10
|
+
[中文文档](./README-CN.md)
|
|
11
|
+
|
|
12
|
+
A description for the module
|
|
13
|
+
|
|
14
|
+
## repository
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Demo
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## Run Example
|
|
21
|
+
you can see the usage by run the example of the module, here is the step:
|
|
22
|
+
|
|
23
|
+
1. Clone the library `git clone `
|
|
24
|
+
2. Go to the directory `cd [the-module-directory]`
|
|
25
|
+
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
|
|
26
|
+
4. Open service `npm run dev`
|
|
27
|
+
5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
```bash
|
|
31
|
+
npm i -S @signalplus/params-about
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Global name - The variable the module exported in `umd` bundle
|
|
35
|
+
`ParamsAbout`
|
|
36
|
+
|
|
37
|
+
## Interface
|
|
38
|
+
See what method or params you can use in [index.d.ts](./index.d.ts)
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
```js
|
|
42
|
+
import * as ParamsAbout from '@signalplus/params-about'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## CDN
|
|
46
|
+
Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@signalplus/params-about/lib/umd/)
|
|
47
|
+
```html
|
|
48
|
+
<-- use what you want -->
|
|
49
|
+
<script src="https://unpkg.com/@signalplus/params-about/lib/umd/<--module-->.js"></script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/)
|
|
53
|
+
```html
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/<--module-->.js"></script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## style
|
|
58
|
+
For building style, you may need to import the css or scss file:
|
|
59
|
+
```js
|
|
60
|
+
// scss
|
|
61
|
+
import '@signalplus/params-about/lib/css/index.scss'
|
|
62
|
+
|
|
63
|
+
// css
|
|
64
|
+
import '@signalplus/params-about/lib/css/index.css'
|
|
65
|
+
```
|
|
66
|
+
Or
|
|
67
|
+
```scss
|
|
68
|
+
// scss
|
|
69
|
+
@import '~@signalplus/params-about/lib/css/index.scss'
|
|
70
|
+
|
|
71
|
+
// css
|
|
72
|
+
@import '~@signalplus/params-about/lib/css/index.css'
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Or, you can build your custom style by copying, editing and importing `node_modules/@signalplus/params-about/lib/css/index.scss`
|
|
76
|
+
|
|
77
|
+
## QA
|
|
78
|
+
|
|
79
|
+
1. Error `Error: spawn node-sass ENOENT`
|
|
80
|
+
|
|
81
|
+
> You may need install node-sass globally, `npm i -g node-sass`
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React, { PureComponent } from 'react'
|
|
2
|
+
|
|
3
|
+
declare enum ParamType {
|
|
4
|
+
ParamGroup = -1,
|
|
5
|
+
Number = 1,
|
|
6
|
+
Percentage = 2,
|
|
7
|
+
Bool = 3,
|
|
8
|
+
NumberRange = 4,
|
|
9
|
+
PercentageRange = 5,
|
|
10
|
+
ExpiryLimit = 6,
|
|
11
|
+
Expiry = 7,
|
|
12
|
+
Phone = 8,
|
|
13
|
+
}
|
|
14
|
+
interface BaseInputProps {
|
|
15
|
+
value?: any
|
|
16
|
+
onChange?(val: any): void
|
|
17
|
+
readonly?: boolean
|
|
18
|
+
className?: string
|
|
19
|
+
style?: any
|
|
20
|
+
[key: string]: any
|
|
21
|
+
}
|
|
22
|
+
interface ValidateInfo {
|
|
23
|
+
[key: string]: undefined | string | ValidateInfo
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
interface ParamValueStruct {
|
|
27
|
+
valueId?: string
|
|
28
|
+
[key: string]: any
|
|
29
|
+
}
|
|
30
|
+
interface ParamRendererProps extends BaseInputProps {
|
|
31
|
+
valueType: ParamType
|
|
32
|
+
value?: ParamValueStruct
|
|
33
|
+
onChange?(val: ParamValueStruct): void
|
|
34
|
+
}
|
|
35
|
+
declare class ParamRenderer extends PureComponent<ParamRendererProps> {
|
|
36
|
+
get typeConfig(): {
|
|
37
|
+
name: string
|
|
38
|
+
key?: string | undefined
|
|
39
|
+
defaultValue?: any
|
|
40
|
+
Comp: React.ComponentType<BaseInputProps>
|
|
41
|
+
validator?(
|
|
42
|
+
value: any,
|
|
43
|
+
enableEmpty?: boolean | undefined,
|
|
44
|
+
): string | ValidateInfo | undefined
|
|
45
|
+
}
|
|
46
|
+
get value(): any
|
|
47
|
+
onChange: (val: any) => void
|
|
48
|
+
render(): JSX.Element
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
declare const ParamTypeConfig: Record<
|
|
52
|
+
ParamType,
|
|
53
|
+
{
|
|
54
|
+
name: string
|
|
55
|
+
key?: string
|
|
56
|
+
defaultValue?: any
|
|
57
|
+
Comp: React.ComponentType<BaseInputProps>
|
|
58
|
+
validator?(value: any, enableEmpty?: boolean): ValidateInfo['key']
|
|
59
|
+
}
|
|
60
|
+
>
|
|
61
|
+
|
|
62
|
+
declare function formatNum(val: string): number | undefined
|
|
63
|
+
declare function isNullLike(val: any): val is undefined | null
|
|
64
|
+
declare function emptyValidator(
|
|
65
|
+
val: any,
|
|
66
|
+
enableEmpty?: boolean,
|
|
67
|
+
): 'should not be empty' | ''
|
|
68
|
+
declare function numRangeValidator(
|
|
69
|
+
val: {
|
|
70
|
+
min?: string
|
|
71
|
+
max?: string
|
|
72
|
+
},
|
|
73
|
+
enableEmpty?: boolean,
|
|
74
|
+
):
|
|
75
|
+
| ''
|
|
76
|
+
| 'Max should bigger than Min'
|
|
77
|
+
| {
|
|
78
|
+
min: string
|
|
79
|
+
max?: undefined
|
|
80
|
+
}
|
|
81
|
+
| {
|
|
82
|
+
max: string
|
|
83
|
+
min?: undefined
|
|
84
|
+
}
|
|
85
|
+
declare function expiryValidator(
|
|
86
|
+
val: string,
|
|
87
|
+
enableEmpty?: boolean,
|
|
88
|
+
): 'should not be empty' | '' | 'out of format'
|
|
89
|
+
declare function expiriesValidator(
|
|
90
|
+
val: string[],
|
|
91
|
+
enableEmpty?: boolean,
|
|
92
|
+
):
|
|
93
|
+
| string
|
|
94
|
+
| {
|
|
95
|
+
[x: number]: string
|
|
96
|
+
}
|
|
97
|
+
declare function isExpired(val?: string): boolean
|
|
98
|
+
|
|
99
|
+
export {
|
|
100
|
+
BaseInputProps,
|
|
101
|
+
ParamRenderer,
|
|
102
|
+
ParamRendererProps,
|
|
103
|
+
ParamType,
|
|
104
|
+
ParamTypeConfig,
|
|
105
|
+
ParamValueStruct,
|
|
106
|
+
ValidateInfo,
|
|
107
|
+
emptyValidator,
|
|
108
|
+
expiriesValidator,
|
|
109
|
+
expiryValidator,
|
|
110
|
+
formatNum,
|
|
111
|
+
isExpired,
|
|
112
|
+
isNullLike,
|
|
113
|
+
numRangeValidator,
|
|
114
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.param-renderer{margin:0;box-sizing:border-box;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none !important}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #ccc;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}.param-number,.param-bool,.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-range .param-number{height:100%}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #ccc;background:#f2f2f2}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-item:first-child:last-child .param-arr-ops-del{visibility:hidden;pointer-events:none}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);height:40px;padding:0 calc(1em + 14px) 0 10px;border:1px solid #ccc;border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer}.param-expiries.readonly{padding:0;border-color:transparent;overflow:initial;white-space:initial;cursor:default}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0}.param-expiries-val{display:inline-block;margin:9px 6px 0 0}.param-expiries-placeholder{display:inline-block;margin:9px 6px 0 0;color:rgba(0,0,0,0.25)}.param-expiries-multi-val{display:inline-block;margin:9px 6px 0 0;padding:0 3px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-limit-inputs .param-arr-ops:nth-child(8):last-child .param-arr-ops-del{visibility:hidden;pointer-events:none}
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
$placeholder-color: rgba(0, 0, 0, 0.25);
|
|
2
|
+
$border-color: #ccc;
|
|
3
|
+
$primary: #006FA7;
|
|
4
|
+
$bg: #fff;
|
|
5
|
+
$red: #d51414;
|
|
6
|
+
$text-color: #333;
|
|
7
|
+
|
|
8
|
+
.param-renderer {
|
|
9
|
+
margin: 0;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
color: $text-color;
|
|
12
|
+
|
|
13
|
+
&.readonly {
|
|
14
|
+
|
|
15
|
+
input, select, .select {
|
|
16
|
+
padding: 0;
|
|
17
|
+
border: none;
|
|
18
|
+
box-shadow: none !important;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
* {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
input, select, .select {
|
|
27
|
+
flex: 1;
|
|
28
|
+
width: 50px;
|
|
29
|
+
height: 100%;
|
|
30
|
+
padding: 0 10px;
|
|
31
|
+
border: 1px solid $border-color;
|
|
32
|
+
border-radius: 2px;
|
|
33
|
+
outline: none;
|
|
34
|
+
box-shadow: none;
|
|
35
|
+
background: $bg;
|
|
36
|
+
|
|
37
|
+
&::placeholder {
|
|
38
|
+
color: $placeholder-color;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
border-color: $primary;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:focus {
|
|
46
|
+
border-color: $primary;
|
|
47
|
+
box-shadow: 0 0 0 2px rgba($primary, 0.1);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.param-number, .param-bool, .param-number-range {
|
|
53
|
+
flex: 1;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
height: 40px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.param-number {
|
|
60
|
+
|
|
61
|
+
&.readonly {
|
|
62
|
+
|
|
63
|
+
.param-number-suffix {
|
|
64
|
+
padding: 0;
|
|
65
|
+
margin: 0 0 0 1px;
|
|
66
|
+
border: none;
|
|
67
|
+
background: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.param-number-range {
|
|
73
|
+
|
|
74
|
+
.param-number {
|
|
75
|
+
height: 100%;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.readonly {
|
|
79
|
+
|
|
80
|
+
.param-number {
|
|
81
|
+
flex: none;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
//.param-number-range-prefix {
|
|
85
|
+
// display: none;
|
|
86
|
+
//}
|
|
87
|
+
//
|
|
88
|
+
//.param-number-range-sep {
|
|
89
|
+
// display: none;
|
|
90
|
+
//}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.param-number-range-prefix {
|
|
94
|
+
margin: 0 8px 0 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.param-number-range-sep {
|
|
98
|
+
margin: 0 10px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.param-number-val {
|
|
103
|
+
position: relative;
|
|
104
|
+
z-index: 1;
|
|
105
|
+
margin: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.param-number-suffix {
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
position: relative;
|
|
113
|
+
z-index: 0;
|
|
114
|
+
flex: none;
|
|
115
|
+
height: 100%;
|
|
116
|
+
padding: 0 14px;
|
|
117
|
+
margin: 0 0 0 -2px;
|
|
118
|
+
border-radius: 2px;
|
|
119
|
+
border: 1px solid $border-color;
|
|
120
|
+
background: #f2f2f2;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.param-bool-option {
|
|
124
|
+
display: inline-flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
margin: 0 16px 0 0;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
|
|
129
|
+
> svg {
|
|
130
|
+
margin: 0 5px 0 0;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.param-arr-item {
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
height: 30px;
|
|
138
|
+
margin: 0 0 4px;
|
|
139
|
+
|
|
140
|
+
> input {
|
|
141
|
+
flex: none;
|
|
142
|
+
width: 160px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&:first-child:last-child {
|
|
146
|
+
|
|
147
|
+
.param-arr-ops-del {
|
|
148
|
+
visibility: hidden;
|
|
149
|
+
pointer-events: none;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.param-arr-ops {
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
flex-wrap: nowrap;
|
|
159
|
+
height: 100%;
|
|
160
|
+
padding: 0 10px;
|
|
161
|
+
|
|
162
|
+
.param-arr-ops-add, .param-arr-ops-del {
|
|
163
|
+
display: flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
justify-content: center;
|
|
166
|
+
width: 30px;
|
|
167
|
+
height: 100%;
|
|
168
|
+
border-radius: 4px;
|
|
169
|
+
color: $primary;
|
|
170
|
+
|
|
171
|
+
&:hover {
|
|
172
|
+
background: rgba(0, 0, 0, 0.1);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.param-arr-ops-del {
|
|
177
|
+
color: $red;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.param-expiries {
|
|
182
|
+
position: relative;
|
|
183
|
+
flex: 1;
|
|
184
|
+
max-width: 100%;
|
|
185
|
+
min-width: calc(7em + 24px + 2px);
|
|
186
|
+
height: 40px;
|
|
187
|
+
padding: 0 calc(1em + 14px) 0 10px;
|
|
188
|
+
border: 1px solid $border-color;
|
|
189
|
+
border-radius: 2px;
|
|
190
|
+
text-overflow: ellipsis;
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
white-space: nowrap;
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
|
|
195
|
+
&.readonly {
|
|
196
|
+
padding: 0;
|
|
197
|
+
border-color: transparent;
|
|
198
|
+
overflow: initial;
|
|
199
|
+
white-space: initial;
|
|
200
|
+
cursor: default;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.param-expiries-arrow {
|
|
205
|
+
position: absolute;
|
|
206
|
+
top: 50%;
|
|
207
|
+
right: 7px;
|
|
208
|
+
margin: -0.5em 0 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.param-expiries-val {
|
|
212
|
+
display: inline-block;
|
|
213
|
+
margin: 9px 6px 0 0;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.param-expiries-placeholder {
|
|
217
|
+
display: inline-block;
|
|
218
|
+
margin: 9px 6px 0 0;
|
|
219
|
+
color: $placeholder-color;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.param-expiries-multi-val {
|
|
223
|
+
display: inline-block;
|
|
224
|
+
margin: 9px 6px 0 0;
|
|
225
|
+
padding: 0 3px;
|
|
226
|
+
line-height: 20px;
|
|
227
|
+
border-radius: 2px;
|
|
228
|
+
background: rgba(0, 0, 0, 0.1);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.param-expiries-popover {
|
|
232
|
+
|
|
233
|
+
.ant-popover-inner-content {
|
|
234
|
+
max-height: 50vh;
|
|
235
|
+
overflow-y: auto;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.param-expiries-option {
|
|
240
|
+
display: flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: space-between;
|
|
243
|
+
width: 240px;
|
|
244
|
+
margin: 0 -16px;
|
|
245
|
+
padding: 0 16px;
|
|
246
|
+
line-height: 30px;
|
|
247
|
+
color: rgba($text-color, 0.6);
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
|
|
250
|
+
&.param-expiries-option-checked {
|
|
251
|
+
font-weight: bold;
|
|
252
|
+
color: $text-color;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&:hover {
|
|
256
|
+
color: $text-color;
|
|
257
|
+
background: rgba(0, 0, 0, 0.1);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
svg {
|
|
261
|
+
color: #57be6a;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.param-expiries-limit {
|
|
266
|
+
|
|
267
|
+
.param-number-range {
|
|
268
|
+
margin: 0 0 0 10px;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.param-number-range-prefix {
|
|
272
|
+
display: none;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.param-number-suffix {
|
|
276
|
+
padding: 0 7px;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.param-expiries-limit-inputs {
|
|
281
|
+
display: grid;
|
|
282
|
+
grid-row-gap: 10px;
|
|
283
|
+
grid-column-gap: 10px;
|
|
284
|
+
grid-template-rows: auto;
|
|
285
|
+
grid-template-columns: auto auto auto auto;
|
|
286
|
+
|
|
287
|
+
.param-expiries, .param-number-range, .param-arr-ops {
|
|
288
|
+
height: 30px;
|
|
289
|
+
margin: 0;
|
|
290
|
+
|
|
291
|
+
&.readonly {
|
|
292
|
+
height: 20px;
|
|
293
|
+
|
|
294
|
+
.param-expiries-val {
|
|
295
|
+
margin-top: 0;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.param-expiries-placeholder, .param-expiries-val {
|
|
300
|
+
margin-top: 4px;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.param-number-range-sep {
|
|
304
|
+
margin: 0 6px;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.param-arr-ops {
|
|
309
|
+
padding: 0;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.param-arr-ops:nth-child(8):last-child {
|
|
313
|
+
|
|
314
|
+
.param-arr-ops-del {
|
|
315
|
+
visibility: hidden;
|
|
316
|
+
pointer-events: none;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
}
|