@signalplus/params-about 0.1.34 → 0.1.35

package/index.d.ts

@@ -10,7 +10,8 @@ declare enum ParamType {
     PercentageRange = 5,
     ExpiryLimit = 6,
     Expiry = 7,
-    Phone = 8
+    Phone = 8,
+    Text = 9
 }
 interface BaseInputProps {
     value?: any;

package/lib/css/Text.scss

@@ -0,0 +1,18 @@
+@import "./var";
+
+.param-text {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: $input-height;
+
+  &.readonly {
+    height: $input-readonly-height;
+  }
+}
+
+.param-text-val {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+}

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:100px}.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-value-before,.param-value-editor .param-value-before,.param-group-editor .param-value-before,.param-mover .param-value-before{padding:calc((40px - 30px) / 2) 0}.param-form .param-value-before .ant-form-item-label>label,.param-value-editor .param-value-before .ant-form-item-label>label,.param-group-editor .param-value-before .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}.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.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}.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}.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)}.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:#d51414}.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 *{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 #d9d9d9;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-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:100px}.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-value-before,.param-value-editor .param-value-before,.param-group-editor .param-value-before,.param-mover .param-value-before{padding:calc((40px - 30px) / 2) 0}.param-form .param-value-before .ant-form-item-label>label,.param-value-editor .param-value-before .ant-form-item-label>label,.param-group-editor .param-value-before .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}.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.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}.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}.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)}.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:#d51414}.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-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

@@ -6,6 +6,7 @@
 @import "./Num";
 @import "./NumRange";
 @import "./TextArray";
+@import "./Text";
 
 .param-renderer {
   box-sizing: border-box;
@@ -20,13 +21,17 @@
       border: none;
       box-shadow: none;
     }
+
+    textarea {
+      padding: calc((#{$input-readonly-height} - 20px - 2px) / 2) 10px;
+    }
   }
 
   * {
     box-sizing: border-box;
   }
 
-  input, select, .select {
+  textarea, input, select, .select {
     flex: 1;
     width: 50px;
     height: 100%;
@@ -50,4 +55,9 @@
       box-shadow: 0 0 0 2px rgba($primary, 0.1);
     }
   }
+
+  textarea {
+    width: 100%;
+    padding: calc((#{$input-height} - 20px - 2px) / 2) 10px;
+  }
 }

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2022-04-14
- * Version: 0.1.34
+ * Generated: 2022-04-15
+ * Version: 0.1.35
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -192,6 +192,7 @@ var ParamType;
   ParamType[ParamType["ExpiryLimit"] = 6] = "ExpiryLimit";
   ParamType[ParamType["Expiry"] = 7] = "Expiry";
   ParamType[ParamType["Phone"] = 8] = "Phone";
+  ParamType[ParamType["Text"] = 9] = "Text";
 })(ParamType || (ParamType = {}));
 
 function _arrayWithHoles(arr) {
@@ -577,7 +578,7 @@ var NumCvt = /*#__PURE__*/function () {
   return NumCvt;
 }();
 
-function initState$1(props) {
+function initState$2(props) {
   return {
     preProps: props,
     tempValue: NumCvt.show(props.value, props.isPercentage)
@@ -600,7 +601,7 @@ var Num = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "state", initState$1(_this.props));
+    _defineProperty(_assertThisInitialized(_this), "state", initState$2(_this.props));
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
       var $value = e.target.value;
@@ -1134,6 +1135,77 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
   return ExpiriesLimit;
 }(PureComponent);
 
+function initState$1(props) {
+  return {
+    preProps: props
+  };
+}
+
+var Text = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Text, _PureComponent);
+
+  var _super = _createSuper(Text);
+
+  function Text() {
+    var _this;
+
+    _classCallCheck(this, Text);
+
+    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", initState$1(_this.props));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+      var _this$props$onChange, _this$props;
+
+      var $value = e.target.value;
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, $value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
+      var _this$props$onBlur, _this$props2;
+
+      (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
+    });
+
+    return _this;
+  }
+
+  _createClass(Text, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-text', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
+        className: "param-text-val"
+      }, this.props.value || '-') : /*#__PURE__*/React.createElement("input", {
+        className: "param-text-val",
+        type: "text",
+        placeholder: this.props.placeholder || 'Text',
+        value: this.props.value || '',
+        onChange: this.onChange,
+        onBlur: this.onBlur
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        preProps: props
+      });
+    }
+  }]);
+
+  return Text;
+}(PureComponent);
+
 var _ParamTypeConfig;
 var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
   name: '参数组',
@@ -1226,6 +1298,11 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
     if (index > -1) return "The ".concat(index + 1, "th item: should not be empty");
     return '';
   }
+}), _defineProperty(_ParamTypeConfig, ParamType.Text, {
+  name: '文本',
+  key: 'text',
+  Comp: Text,
+  validator: emptyValidator
 }), _ParamTypeConfig);
 function paramValidator(val, values) {
   var _config$validator;

package/package.json

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