@signalplus/params-about 1.0.8 → 1.0.9-alpha1

package/index.d.ts

@@ -13,7 +13,10 @@ declare enum ParamType {
     Phone = 8,
     Text = 9,
     ExpiryValue = 10,
-    InstrumentValue = 11
+    InstrumentValue = 11,
+    TextNumberList = 12,
+    TextPercentageList = 13,
+    HardLimitHandler = 15
 }
 interface BaseInputProps {
     value?: any;

package/lib/css/TextSelector.scss

@@ -0,0 +1,117 @@
+@import './var';
+
+.param-text-selector {
+  position: relative;
+  flex: 1;
+  max-width: 100%;
+  min-width: calc(7em + 24px + 2px);
+  padding: calc((#{$input-height} - 22px) / 2) calc(1em + 14px) calc((#{$input-height} - 22px) / 2)
+    10px;
+  line-height: 0;
+  border: 1px solid $border-color;
+  border-radius: 2px;
+  cursor: pointer;
+  background: $bg;
+
+  &.readonly {
+    padding: calc((#{$input-readonly-height} - 20px) / 2) 0;
+    border-color: transparent;
+    overflow: initial;
+    white-space: initial;
+    cursor: default;
+    background: transparent;
+
+    &.multiple {
+      white-space: pre-wrap;
+    }
+  }
+
+  &.multiple {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.param-text-selector-arrow {
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  margin: -0.5em 0 0;
+  color: $border-color !important;
+}
+
+.param-text-selector-val {
+  display: inline-block;
+  margin: 0 6px 0 0;
+  line-height: 20px;
+  white-space: initial;
+  vertical-align: middle;
+}
+
+.param-text-selector-placeholder {
+  display: inline-block;
+  margin: 0 6px 0 0;
+  line-height: 20px;
+  color: $placeholder-color;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+.param-text-selector-multi-val {
+  display: inline-block;
+  margin: 0 6px 0 0;
+  padding: 0 3px 0 8px;
+  line-height: 20px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+
+  svg {
+    display: inline-block;
+    margin: 0 0 0 4px;
+    color: #999;
+    cursor: pointer;
+  }
+}
+
+.param-text-selector-popover {
+  .ant-popover-inner-content {
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+
+.param-text-selector-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 240px;
+  margin: 0 -16px;
+  padding: 0 16px;
+  line-height: 30px;
+  color: rgba($text-color, 0.6);
+  cursor: pointer;
+
+  &.param-text-selector-option-checked {
+    font-weight: bold;
+    color: $text-color;
+  }
+
+  &.param-text-selector-option-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:hover {
+    color: $text-color;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  svg {
+    color: #57be6a;
+  }
+}

package/lib/css/index.css

@@ -1 +1 @@
-.param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label,.param-group-editor.param-value-editor .ant-form-item-label,.param-mover.param-value-editor .ant-form-item-label{width:150px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label,.param-group-editor .ant-form-item-label,.param-mover .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label,.param-group-editor .ant-form-item-label>label,.param-mover .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after,.param-group-editor .ant-form-item-label>label:after,.param-mover .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader,.param-group-editor input.ant-input.ant-input,.param-group-editor .ant-select-selector.ant-select-selector,.param-group-editor .ant-cascader.ant-cascader,.param-mover input.ant-input.ant-input,.param-mover .ant-select-selector.ant-select-selector,.param-mover .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-group-editor input.ant-input.ant-input input,.param-group-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-group-editor input.ant-input.ant-input .ant-select-selection-item,.param-group-editor .ant-select-selector.ant-select-selector input,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-group-editor .ant-cascader.ant-cascader input,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-mover input.ant-input.ant-input input,.param-mover input.ant-input.ant-input .ant-select-selection-placeholder,.param-mover input.ant-input.ant-input .ant-select-selection-item,.param-mover .ant-select-selector.ant-select-selector input,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-mover .ant-cascader.ant-cascader input,.param-mover .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-mover .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input,.param-group-editor textarea.ant-input.ant-input,.param-mover textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-group-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-mover .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain,.param-group-editor .ant-form-item-explain.ant-form-item-explain,.param-mover .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-form .react-file-name,.param-value-editor .react-file-name,.param-group-editor .react-file-name,.param-mover .react-file-name{display:none !important}.param-form .ant-row,.param-value-editor .ant-row,.param-group-editor .ant-row,.param-mover .ant-row{display:flex}.param-form .param-default-value,.param-form .param-value-before,.param-value-editor .param-default-value,.param-value-editor .param-value-before,.param-group-editor .param-default-value,.param-group-editor .param-value-before,.param-mover .param-default-value,.param-mover .param-value-before{padding:calc((40px - 30px) / 2) 0}.param-form .param-default-value .ant-form-item-label>label,.param-form .param-value-before .ant-form-item-label>label,.param-value-editor .param-default-value .ant-form-item-label>label,.param-value-editor .param-value-before .ant-form-item-label>label,.param-group-editor .param-default-value .ant-form-item-label>label,.param-group-editor .param-value-before .ant-form-item-label>label,.param-mover .param-default-value .ant-form-item-label>label,.param-mover .param-value-before .ant-form-item-label>label{height:30px}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool.readonly{height:30px}.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}.active{color:#006fa7}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);padding:calc((40px - 22px) / 2) calc(1em + 14px) calc((40px - 22px) / 2) 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:calc((30px - 20px) / 2) 0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.readonly.multiple{white-space:pre-wrap}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:0 6px 0 0;line-height:20px;white-space:initial;vertical-align:middle}.param-expiries-placeholder{display:inline-block;margin:0 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle}.param-expiries-multi-val{display:inline-block;margin:0 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1);vertical-align:middle}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.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.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit.readonly{padding:calc((30px - 20px) / 2) 0}.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-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.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;padding-top:0;padding-right:0;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;line-height:18px}.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-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly{height:30px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.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 #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly{height:30px}.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-text-array{padding:calc((40px - 30px) / 2) 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-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:#006FA7}.param-text{flex:1;display:flex;align-items:center;height:40px}.param-text.readonly{height:30px}.param-text-val{position:relative;z-index:1;margin:0}.param-expiries-value{padding:calc((40px - 20px) / 2) 0}.param-expiries-value.readonly{padding:calc((30px - 20px) / 2) 0}.param-expiries-value .param-number-range{margin:0 0 0 10px}.param-expiries-value .param-number-range-prefix{display:none}.param-expiries-value .param-number-suffix{padding:0 7px}.param-expiries-value-val{display:block}.param-expiries-value-val:after{content:';'}.param-expiries-value-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-value-inputs .param-expiries,.param-expiries-value-inputs .param-number-range,.param-expiries-value-inputs .param-arr-ops{height:30px;padding-top:0;padding-right:0;margin:0}.param-expiries-value-inputs .param-expiries.readonly,.param-expiries-value-inputs .param-number-range.readonly,.param-expiries-value-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-value-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-value-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-value-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-value-inputs .param-expiries .param-expiries-placeholder,.param-expiries-value-inputs .param-expiries .param-expiries-val,.param-expiries-value-inputs .param-number-range .param-expiries-placeholder,.param-expiries-value-inputs .param-number-range .param-expiries-val,.param-expiries-value-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-value-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-value-inputs .param-expiries .param-number-range-sep,.param-expiries-value-inputs .param-number-range .param-number-range-sep,.param-expiries-value-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-value-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer.readonly textarea{padding:calc((30px - 20px - 2px) / 2) 10px}.param-renderer *{box-sizing:border-box}.param-renderer textarea,.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer textarea::placeholder,.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer textarea:hover,.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer textarea:focus,.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-renderer textarea{width:100%;padding:calc((40px - 20px - 2px) / 2) 10px}
+.param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label,.param-group-editor.param-value-editor .ant-form-item-label,.param-mover.param-value-editor .ant-form-item-label{width:150px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label,.param-group-editor .ant-form-item-label,.param-mover .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label,.param-group-editor .ant-form-item-label>label,.param-mover .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after,.param-group-editor .ant-form-item-label>label:after,.param-mover .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader,.param-group-editor input.ant-input.ant-input,.param-group-editor .ant-select-selector.ant-select-selector,.param-group-editor .ant-cascader.ant-cascader,.param-mover input.ant-input.ant-input,.param-mover .ant-select-selector.ant-select-selector,.param-mover .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-group-editor input.ant-input.ant-input input,.param-group-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-group-editor input.ant-input.ant-input .ant-select-selection-item,.param-group-editor .ant-select-selector.ant-select-selector input,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-group-editor .ant-cascader.ant-cascader input,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-mover input.ant-input.ant-input input,.param-mover input.ant-input.ant-input .ant-select-selection-placeholder,.param-mover input.ant-input.ant-input .ant-select-selection-item,.param-mover .ant-select-selector.ant-select-selector input,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-mover .ant-cascader.ant-cascader input,.param-mover .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-mover .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input,.param-group-editor textarea.ant-input.ant-input,.param-mover textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-group-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-mover .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain,.param-group-editor .ant-form-item-explain.ant-form-item-explain,.param-mover .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-form .react-file-name,.param-value-editor .react-file-name,.param-group-editor .react-file-name,.param-mover .react-file-name{display:none !important}.param-form .ant-row,.param-value-editor .ant-row,.param-group-editor .ant-row,.param-mover .ant-row{display:flex}.param-form .param-default-value,.param-form .param-value-before,.param-value-editor .param-default-value,.param-value-editor .param-value-before,.param-group-editor .param-default-value,.param-group-editor .param-value-before,.param-mover .param-default-value,.param-mover .param-value-before{padding:calc((40px - 30px) / 2) 0}.param-form .param-default-value .ant-form-item-label>label,.param-form .param-value-before .ant-form-item-label>label,.param-value-editor .param-default-value .ant-form-item-label>label,.param-value-editor .param-value-before .ant-form-item-label>label,.param-group-editor .param-default-value .ant-form-item-label>label,.param-group-editor .param-value-before .ant-form-item-label>label,.param-mover .param-default-value .ant-form-item-label>label,.param-mover .param-value-before .ant-form-item-label>label{height:30px}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool.readonly{height:30px}.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}.active{color:#006fa7}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);padding:calc((40px - 22px) / 2) calc(1em + 14px) calc((40px - 22px) / 2) 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:calc((30px - 20px) / 2) 0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.readonly.multiple{white-space:pre-wrap}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:0 6px 0 0;line-height:20px;white-space:initial;vertical-align:middle}.param-expiries-placeholder{display:inline-block;margin:0 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle}.param-expiries-multi-val{display:inline-block;margin:0 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1);vertical-align:middle}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.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.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit.readonly{padding:calc((30px - 20px) / 2) 0}.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-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.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;padding-top:0;padding-right:0;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;line-height:18px}.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-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly{height:30px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.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 #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly{height:30px}.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-text-array{padding:calc((40px - 30px) / 2) 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-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:#006FA7}.param-text{flex:1;display:flex;align-items:center;height:40px}.param-text.readonly{height:30px}.param-text-val{position:relative;z-index:1;margin:0}.param-expiries-value{padding:calc((40px - 20px) / 2) 0}.param-expiries-value.readonly{padding:calc((30px - 20px) / 2) 0}.param-expiries-value .param-number-range{margin:0 0 0 10px}.param-expiries-value .param-number-range-prefix{display:none}.param-expiries-value .param-number-suffix{padding:0 7px}.param-expiries-value-val{display:block}.param-expiries-value-val:after{content:';'}.param-expiries-value-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-value-inputs .param-expiries,.param-expiries-value-inputs .param-number-range,.param-expiries-value-inputs .param-arr-ops{height:30px;padding-top:0;padding-right:0;margin:0}.param-expiries-value-inputs .param-expiries.readonly,.param-expiries-value-inputs .param-number-range.readonly,.param-expiries-value-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-value-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-value-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-value-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-value-inputs .param-expiries .param-expiries-placeholder,.param-expiries-value-inputs .param-expiries .param-expiries-val,.param-expiries-value-inputs .param-number-range .param-expiries-placeholder,.param-expiries-value-inputs .param-number-range .param-expiries-val,.param-expiries-value-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-value-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-value-inputs .param-expiries .param-number-range-sep,.param-expiries-value-inputs .param-number-range .param-number-range-sep,.param-expiries-value-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-value-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-text-selector{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);padding:calc((40px - 22px) / 2) calc(1em + 14px) calc((40px - 22px) / 2) 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-text-selector.readonly{padding:calc((30px - 20px) / 2) 0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-text-selector.readonly.multiple{white-space:pre-wrap}.param-text-selector.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-text-selector-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-text-selector-val{display:inline-block;margin:0 6px 0 0;line-height:20px;white-space:initial;vertical-align:middle}.param-text-selector-placeholder{display:inline-block;margin:0 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle}.param-text-selector-multi-val{display:inline-block;margin:0 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1);vertical-align:middle}.param-text-selector-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-text-selector-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-text-selector-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-text-selector-option.param-text-selector-option-checked{font-weight:bold;color:#333}.param-text-selector-option.param-text-selector-option-disabled{cursor:not-allowed;opacity:0.5}.param-text-selector-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-text-selector-option svg{color:#57be6a}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer.readonly textarea{padding:calc((30px - 20px - 2px) / 2) 10px}.param-renderer *{box-sizing:border-box}.param-renderer textarea,.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer textarea::placeholder,.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer textarea:hover,.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer textarea:focus,.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-renderer textarea{width:100%;padding:calc((40px - 20px - 2px) / 2) 10px}

package/lib/css/index.scss

@@ -8,6 +8,7 @@
 @import './TextArray';
 @import './Text';
 @import './ExpiriesValue';
+@import './TextSelector';
 
 .param-renderer {
   box-sizing: border-box;

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2023-08-21
- * Version: 1.0.8
+ * Generated: 2024-01-10
+ * Version: 1.0.9-alpha1
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -12,8 +12,8 @@ import dayjs from 'dayjs';
 import Big from 'big.js';
 import { PlusOutlined, DeleteOutlined, CloseOutlined, CheckOutlined, DownOutlined } from '@ant-design/icons';
 import { Popover, Cascader, Input, Select, Form, Button, message, Modal } from 'antd';
+import { isArray, isEqual } from 'lodash-es';
 import ReactGlobalComp from 'react-global-comp';
-import { isEqual } from 'lodash-es';
 import ReactFileInput from '@livelybone/react-file-input';
 import { useRequest } from 'ahooks';
 
@@ -195,6 +195,9 @@ var ParamType;
   ParamType[ParamType["Text"] = 9] = "Text";
   ParamType[ParamType["ExpiryValue"] = 10] = "ExpiryValue";
   ParamType[ParamType["InstrumentValue"] = 11] = "InstrumentValue";
+  ParamType[ParamType["TextNumberList"] = 12] = "TextNumberList";
+  ParamType[ParamType["TextPercentageList"] = 13] = "TextPercentageList";
+  ParamType[ParamType["HardLimitHandler"] = 15] = "HardLimitHandler";
 })(ParamType || (ParamType = {}));
 
 function _arrayWithHoles(arr) {
@@ -1581,6 +1584,390 @@ var Text = /*#__PURE__*/function (_PureComponent) {
   return Text;
 }(PureComponent);
 
+var TextValueList = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TextValueList, _PureComponent);
+
+  var _super = _createSuper(TextValueList);
+
+  function TextValueList() {
+    var _this;
+
+    _classCallCheck(this, TextValueList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "value", []);
+
+    _defineProperty(_assertThisInitialized(_this), "isEmptyItem", function (item) {
+      var _item$key;
+
+      return !((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.trim()) && isNullLike(item.value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (i, val, key) {
+      var _this$props$onChange, _this$props;
+
+      var value = _toConsumableArray(_this.value);
+
+      if (!value[i]) value[i] = {
+        key: ''
+      };
+      if (key) value[i][key] = val;else value[i] = _objectSpread2(_objectSpread2({}, value[i]), val);
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAdd", function (i) {
+      var _this$props$onChange2, _this$props2, _this$props$onBlur, _this$props3;
+
+      var value = _toConsumableArray(_this.value);
+
+      value.splice(i + 1, 0, {
+        key: ''
+      });
+      (_this$props$onChange2 = (_this$props2 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props2, value);
+      (_this$props$onBlur = (_this$props3 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDel", function (i) {
+      var _this$props$onChange3, _this$props4, _this$props$onBlur2, _this$props5;
+
+      var value = _toConsumableArray(_this.value);
+
+      value.splice(i, 1);
+      (_this$props$onChange3 = (_this$props4 = _this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props4, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      (_this$props$onBlur2 = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props5);
+    });
+
+    return _this;
+  }
+
+  _createClass(TextValueList, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value,
+          _this2 = this;
+
+      this.value = this.props.value || [];
+      if (!this.value.length) this.value.push({
+        key: ''
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-expiries-limit', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? ((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.length) ? this.value.filter(function (it) {
+        return it.key;
+      }).map(function (it, i) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-limit-val",
+          key: i
+        }, it.key, /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-limit-val-sep"
+        }, "/"), !isNullLike(it.value) ? it.value : '-');
+      }) : '-' : /*#__PURE__*/React.createElement("div", {
+        className: "param-expiries-limit-inputs"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "param-expiries readonly"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-val"
+      }, "Text")), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }, "Value"), /*#__PURE__*/React.createElement("div", {
+        className: "param-arr-ops readonly"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "param-arr-ops readonly"
+      }), this.value.map(function (it, i) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: i
+        }, /*#__PURE__*/React.createElement("input", {
+          style: {
+            width: 200
+          },
+          className: "param-text-val",
+          type: "text",
+          placeholder: _this2.props.placeholder || 'Text',
+          value: it.key,
+          onChange: function onChange(e) {
+            return _this2.onChange(i, e.target.value, 'key');
+          },
+          onBlur: _this2.props.onBlur,
+          autoComplete: "off"
+        }), /*#__PURE__*/React.createElement(Num, {
+          style: {
+            height: 30,
+            width: 180
+          },
+          value: it.value,
+          onChange: function onChange(val) {
+            return _this2.onChange(i, {
+              value: val
+            });
+          },
+          onBlur: _this2.props.onBlur,
+          isPercentage: _this2.props.isPercentage
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "param-arr-ops readonly"
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "param-arr-ops"
+        }, /*#__PURE__*/React.createElement(PlusOutlined, {
+          className: "param-arr-ops-add",
+          onClick: _this2.onAdd.bind(null, i)
+        }), /*#__PURE__*/React.createElement(DeleteOutlined, {
+          className: "param-arr-ops-del",
+          onClick: _this2.onDel.bind(null, i)
+        })));
+      })));
+    }
+  }]);
+
+  return TextValueList;
+}(PureComponent);
+
+var TextSelector = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TextSelector, _PureComponent);
+
+  var _super = _createSuper(TextSelector);
+
+  function TextSelector() {
+    var _this;
+
+    _classCallCheck(this, TextSelector);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      visible: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleVisibleChange", function (visible) {
+      return _this.setState({
+        visible: visible
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (val) {
+      var _this$props$value, _this$props$onChange, _this$props, _this$props$onBlur, _this$props2;
+
+      var value = _toConsumableArray(((_this$props$value = _this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.filter(function (item) {
+        var _this$props$options;
+
+        return (_this$props$options = _this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.includes(item);
+      })) || []);
+
+      if (_this.props.multiple !== false) {
+        var index = value.findIndex(function (it) {
+          return it === val;
+        });
+        if (index > -1) value.splice(index, 1);else value.push(val);
+      } else {
+        value = [val];
+      }
+
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+      (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
+      if (_this.props.multiple === false) _this.handleVisibleChange(false);
+    });
+
+    return _this;
+  }
+
+  _createClass(TextSelector, [{
+    key: "renderValue",
+    value: function renderValue() {
+      var _this$props$value2,
+          _this2 = this;
+
+      var value = (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.filter(function (it) {
+        return it && !isExpired(it);
+      });
+
+      if (this.props.readonly) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-val"
+        }, (value === null || value === void 0 ? void 0 : value.join(', ')) || '-');
+      }
+
+      var placeholder = /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-placeholder",
+        style: {
+          marginTop: 10
+        }
+      }, "Choose");
+
+      if (this.props.multiple === false) {
+        var _this$props$value3;
+
+        var _val = (_this$props$value3 = this.props.value) === null || _this$props$value3 === void 0 ? void 0 : _this$props$value3[0];
+
+        return !_val || isExpired(_val) ? placeholder : /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-val"
+        }, _val);
+      }
+
+      if (!(value === null || value === void 0 ? void 0 : value.length)) return placeholder;
+      return value.map(function (it) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-multi-val",
+          key: it,
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }, it, /*#__PURE__*/React.createElement(CloseOutlined, {
+          onClick: _this2.onChange.bind(null, it)
+        }));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$options2,
+          _this3 = this;
+
+      return /*#__PURE__*/React.createElement(Popover, {
+        overlayClassName: "param-expiries-popover",
+        trigger: 'click',
+        placement: 'bottomLeft',
+        visible: !this.props.readonly && this.state.visible,
+        onVisibleChange: this.handleVisibleChange,
+        content: (_this$props$options2 = this.props.options) === null || _this$props$options2 === void 0 ? void 0 : _this$props$options2.map(function (it) {
+          var _this3$props$value, _this3$props$calcDisa, _this3$props, _this3$onChange;
+
+          var checked = (_this3$props$value = _this3.props.value) === null || _this3$props$value === void 0 ? void 0 : _this3$props$value.includes(it);
+          var disabled = (_this3$props$calcDisa = (_this3$props = _this3.props).calcDisabled) === null || _this3$props$calcDisa === void 0 ? void 0 : _this3$props$calcDisa.call(_this3$props, it);
+          return /*#__PURE__*/React.createElement("div", {
+            className: classNames('param-expiries-option', {
+              'param-expiries-option-checked': checked,
+              'param-expiries-option-disabled': disabled
+            }),
+            key: it,
+            onClick: disabled ? undefined : (_this3$onChange = _this3.onChange) === null || _this3$onChange === void 0 ? void 0 : _this3$onChange.bind(null, it)
+          }, it, checked && /*#__PURE__*/React.createElement(CheckOutlined, null));
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-expiries', {
+          readonly: this.props.readonly,
+          multiple: this.props.multiple !== false
+        }, this.props.className),
+        style: _objectSpread2(_objectSpread2({}, this.props.style), {}, {
+          height: 40
+        })
+      }, this.renderValue(), !this.props.readonly && this.props.options && /*#__PURE__*/React.createElement(DownOutlined, {
+        className: "param-expiries-arrow"
+      })));
+    }
+  }]);
+
+  return TextSelector;
+}(PureComponent);
+
+var HardLimitHandler = /*#__PURE__*/function (_PureComponent) {
+  _inherits(HardLimitHandler, _PureComponent);
+
+  var _super = _createSuper(HardLimitHandler);
+
+  function HardLimitHandler() {
+    var _this;
+
+    _classCallCheck(this, HardLimitHandler);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "value", []);
+
+    _defineProperty(_assertThisInitialized(_this), "isEmptyItem", function (item) {
+      var _item$name;
+
+      return !((_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.trim()) && isNullLike(item.protectThreshold) && isNullLike(item.wideningScaler);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (key, val) {
+      var _this$props$onChange, _this$props;
+
+      var value = _objectSpread2({}, _this.props.value);
+
+      value[key] = isArray(val) ? val[0] : val;
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+    });
+
+    return _this;
+  }
+
+  _createClass(HardLimitHandler, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value,
+          _this$props$value2,
+          _this$props$value3,
+          _this$props$value4,
+          _this$props$value5,
+          _this$props$value6,
+          _this2 = this,
+          _this$props$value7,
+          _this$props$value8;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-expiries-limit', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-limit-val"
+      }, (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.name, /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-limit-val-sep"
+      }, "/"), !isNullLike((_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.protectThreshold) ? "".concat(+Big(Number((_this$props$value3 = this.props.value) === null || _this$props$value3 === void 0 ? void 0 : _this$props$value3.protectThreshold)).times(100), "%") : '-', /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-limthis.props.value?-val-sep"
+      }, "/"), !isNullLike((_this$props$value4 = this.props.value) === null || _this$props$value4 === void 0 ? void 0 : _this$props$value4.wideningScaler) ? "".concat(+Big(Number((_this$props$value5 = this.props.value) === null || _this$props$value5 === void 0 ? void 0 : _this$props$value5.wideningScaler)).times(100), "%") : '-') : /*#__PURE__*/React.createElement("div", {
+        className: "param-expiries-limit-inputs"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "param-expiries readonly"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "param-expiries-val"
+      }, "Name")), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }, "ProtectThreshold(%)"), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }, "WideningScaler(%)"), /*#__PURE__*/React.createElement("div", {
+        className: "param-arr-ops readonly"
+      }), /*#__PURE__*/React.createElement(TextSelector, {
+        multiple: false,
+        value: [((_this$props$value6 = this.props.value) === null || _this$props$value6 === void 0 ? void 0 : _this$props$value6.name) || ''],
+        onChange: function onChange(val) {
+          return _this2.onChange('name', val);
+        } // onBlur={this.props.onBlur}
+        ,
+        options: ['OneWayQuote', 'OneWayWider', 'TwoWayWider', 'Nothing']
+      }), /*#__PURE__*/React.createElement(Num, {
+        value: (_this$props$value7 = this.props.value) === null || _this$props$value7 === void 0 ? void 0 : _this$props$value7.protectThreshold,
+        onChange: function onChange(val) {
+          return _this2.onChange('protectThreshold', val);
+        },
+        isPercentage: true
+      }), /*#__PURE__*/React.createElement(Num, {
+        value: (_this$props$value8 = this.props.value) === null || _this$props$value8 === void 0 ? void 0 : _this$props$value8.wideningScaler,
+        onChange: function onChange(val) {
+          return _this2.onChange('wideningScaler', val);
+        },
+        isPercentage: true
+      })));
+    }
+  }]);
+
+  return HardLimitHandler;
+}(PureComponent);
+
 var _ParamTypeConfig;
 var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
   name: '参数组',
@@ -1744,6 +2131,76 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
     return '';
   },
   sort: 11
+}), _defineProperty(_ParamTypeConfig, ParamType.TextNumberList, {
+  name: '文本列表+普通数值',
+  key: 'textNumberList',
+  Comp: TextValueList,
+  validator: function validator($val) {
+    if (!($val === null || $val === void 0 ? void 0 : $val.length)) return '';
+
+    for (var i = 0; i < $val.length; i++) {
+      var val = $val[i];
+      if (isNullLike(val.key) && isNullLike(val.value)) return '';
+
+      if (isNullLike(val.key) && !isNullLike(val.value)) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: key should not be empty");
+      }
+
+      if (!isNullLike(val.key) && isNullLike(val.value)) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: value should not be empty");
+      }
+    }
+
+    return '';
+  },
+  sort: 12
+}), _defineProperty(_ParamTypeConfig, ParamType.TextPercentageList, {
+  name: '文本列表+百分比数值',
+  key: 'textPercentageList',
+  Comp: function Comp(props) {
+    return /*#__PURE__*/React.createElement(TextValueList, Object.assign({}, props, {
+      isPercentage: true
+    }));
+  },
+  validator: function validator($val) {
+    if (!($val === null || $val === void 0 ? void 0 : $val.length)) return '';
+
+    for (var i = 0; i < $val.length; i++) {
+      var val = $val[i];
+      if (isNullLike(val.key) && isNullLike(val.value)) return '';
+
+      if (isNullLike(val.key) && !isNullLike(val.value)) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: key should not be empty");
+      }
+
+      if (!isNullLike(val.key) && isNullLike(val.value)) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: value should not be empty");
+      }
+    }
+
+    return '';
+  },
+  sort: 13
+}), _defineProperty(_ParamTypeConfig, ParamType.HardLimitHandler, {
+  name: 'HardLimitHandler',
+  key: 'hardLimitHandler',
+  Comp: HardLimitHandler,
+  validator: function validator($val) {
+    if (isNullLike($val.name)) {
+      return "The Name should not be empty";
+    }
+
+    if (isNullLike($val.protectThreshold)) {
+      return "The ProtectThreshold should not be empty";
+    }
+
+    if (isNullLike($val.wideningScaler)) {
+      return "The WideningScaler should not be empty";
+    }
+
+    return '';
+  },
+  sort: 14
 }), _ParamTypeConfig);
 function paramValidator(val, values, enableEmpty) {
   var _config$validator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "1.0.8",
+  "version": "1.0.9-alpha1",
   "description": "A description for the module",
   "main": "./lib/umd/index.js",
   "module": "./lib/es/index.js",