vxe-pc-ui 1.7.16 → 1.7.17

package/es/components.js

@@ -48,6 +48,7 @@ import VxeSelect from './select';
 import VxeSwitch from './switch';
 import VxeTabPane from './tab-pane';
 import VxeTabs from './tabs';
+import VxeText from './text';
 import VxeTextarea from './textarea';
 import VxeTips from './tips';
 import VxeTooltip from './tooltip';
@@ -104,6 +105,7 @@ const components = [
     VxeSwitch,
     VxeTabPane,
     VxeTabs,
+    VxeText,
     VxeTextarea,
     VxeTips,
     VxeTooltip,
@@ -166,6 +168,7 @@ export * from './select';
 export * from './switch';
 export * from './tab-pane';
 export * from './tabs';
+export * from './text';
 export * from './textarea';
 export * from './tips';
 export * from './tooltip';

package/es/form/style.css

@@ -240,8 +240,8 @@
   align-items: initial;
 }
 .vxe-form--item.is--vertical .vxe-form--item-inner .vxe-form--item-title {
-  height: 2.2em;
-  line-height: 2.2em;
+  height: 2.5em;
+  line-height: 2.3em;
   padding-right: 0;
   max-width: none;
 }

package/es/form/style.min.css

@@ -1 +1 @@
-.vxe-form--item .vxe-default-input[type=reset]:hover,.vxe-form--item .vxe-default-input[type=submit]:hover{color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-form{position:relative;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color);text-align:left}.vxe-form .vxe-row{flex-shrink:0}.vxe-form--item-content,.vxe-form--item-row{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form--item-content>.vxe-form--item-col_1,.vxe-form--item-row>.vxe-form--item-col_1{width:4.16667%}.vxe-form--item-content>.vxe-form--item-col_2,.vxe-form--item-row>.vxe-form--item-col_2{width:8.33333%}.vxe-form--item-content>.vxe-form--item-col_3,.vxe-form--item-row>.vxe-form--item-col_3{width:12.5%}.vxe-form--item-content>.vxe-form--item-col_4,.vxe-form--item-row>.vxe-form--item-col_4{width:16.66667%}.vxe-form--item-content>.vxe-form--item-col_5,.vxe-form--item-row>.vxe-form--item-col_5{width:20.83333%}.vxe-form--item-content>.vxe-form--item-col_6,.vxe-form--item-row>.vxe-form--item-col_6{width:25%}.vxe-form--item-content>.vxe-form--item-col_7,.vxe-form--item-row>.vxe-form--item-col_7{width:29.16667%}.vxe-form--item-content>.vxe-form--item-col_8,.vxe-form--item-row>.vxe-form--item-col_8{width:33.33333%}.vxe-form--item-content>.vxe-form--item-col_9,.vxe-form--item-row>.vxe-form--item-col_9{width:37.5%}.vxe-form--item-content>.vxe-form--item-col_10,.vxe-form--item-row>.vxe-form--item-col_10{width:41.66667%}.vxe-form--item-content>.vxe-form--item-col_11,.vxe-form--item-row>.vxe-form--item-col_11{width:45.83333%}.vxe-form--item-content>.vxe-form--item-col_12,.vxe-form--item-row>.vxe-form--item-col_12{width:50%}.vxe-form--item-content>.vxe-form--item-col_13,.vxe-form--item-row>.vxe-form--item-col_13{width:54.16667%}.vxe-form--item-content>.vxe-form--item-col_14,.vxe-form--item-row>.vxe-form--item-col_14{width:58.33333%}.vxe-form--item-content>.vxe-form--item-col_15,.vxe-form--item-row>.vxe-form--item-col_15{width:62.5%}.vxe-form--item-content>.vxe-form--item-col_16,.vxe-form--item-row>.vxe-form--item-col_16{width:66.66667%}.vxe-form--item-content>.vxe-form--item-col_17,.vxe-form--item-row>.vxe-form--item-col_17{width:70.83333%}.vxe-form--item-content>.vxe-form--item-col_18,.vxe-form--item-row>.vxe-form--item-col_18{width:75%}.vxe-form--item-content>.vxe-form--item-col_19,.vxe-form--item-row>.vxe-form--item-col_19{width:79.16667%}.vxe-form--item-content>.vxe-form--item-col_20,.vxe-form--item-row>.vxe-form--item-col_20{width:83.33333%}.vxe-form--item-content>.vxe-form--item-col_21,.vxe-form--item-row>.vxe-form--item-col_21{width:87.5%}.vxe-form--item-content>.vxe-form--item-col_22,.vxe-form--item-row>.vxe-form--item-col_22{width:91.66667%}.vxe-form--item-content>.vxe-form--item-col_23,.vxe-form--item-row>.vxe-form--item-col_23{width:95.83333%}.vxe-form--item-content>.vxe-form--item-col_24,.vxe-form--item-row>.vxe-form--item-col_24{width:100%}.vxe-form-slots{display:none}.vxe-form--item-content,.vxe-form--item-trigger-node{display:inline-block;vertical-align:middle}.vxe-form--item-title{display:flex;flex-direction:row;max-width:320px;padding-right:.8em}.vxe-form--item-title.is--ellipsis .vxe-form--item-title-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-form--item-title .vxe-form--item-title-postfix,.vxe-form--item-title .vxe-form--item-title-prefix,.vxe-form--item-title .vxe-form--item-title-suffix{flex-shrink:0}.vxe-form--item-title .vxe-form--item-title-prefix,.vxe-form--item-title .vxe-form--item-title-suffix{cursor:help;vertical-align:middle}.vxe-form--item-title .vxe-form--item-title-prefix{margin-right:.25em}.vxe-form--item-title .vxe-form--item-title-suffix{margin-left:.2em}.vxe-form--item-title .vxe-form--item-title-postfix{display:flex;align-items:center}.vxe-form--item-title .vxe-form--item-title-content{flex-grow:1}.vxe-form--item-title .vxe-form--item-title-label{vertical-align:middle}.vxe-form--item-trigger-node{font-size:12px;min-width:100px;color:#909399;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-form--item-trigger-node .vxe-form--item-trigger-icon{display:inline-block;margin:0 .25em;transition:all .1s}.vxe-form--item-valid{position:absolute;width:100%;font-size:12px;line-height:1.2em;color:var(--vxe-ui-form-validate-error-color);background-color:var(--vxe-ui-form-validate-error-background-color);z-index:1;opacity:0;transform-origin:center top;transform:scaleY(0);transition:all .2s ease-in-out}.vxe-form .vxe-form--gather{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.vxe-form .vxe-form--wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form .vxe-form--item{display:none;padding:.5em .8em .5em 0}.vxe-form .vxe-form--item.is--vertical{padding:.25em 0 .25em 0}.vxe-form .vxe-form--item.is--active:not(.is--hidden){display:inline-flex}.vxe-form--item.is--bold>.vxe-form--item-inner>.vxe-form--item-title{font-weight:700}.vxe-form--item.is--colon .vxe-form--item-title-postfix:after{content:":";font-weight:400;margin-left:.2em}.vxe-form--item.is--asterisk.is--required .vxe-form--item-title-content:before{content:"*";color:var(--vxe-ui-form-validate-error-color);font-family:Verdana,Arial,Tahoma;margin-right:.2em;font-weight:400;vertical-align:middle}.vxe-form--item.is--vertical .vxe-form--item-inner{flex-direction:column;align-items:initial}.vxe-form--item.is--vertical .vxe-form--item-inner .vxe-form--item-title{height:2.2em;line-height:2.2em;padding-right:0;max-width:none}.vxe-form--item.is--vertical .vxe-form--item-inner .vxe-form--item-title-content{flex-grow:initial}.vxe-form--item.is--span .vxe-default-input:not([type=submit]):not([type=reset]),.vxe-form--item.is--span .vxe-default-select,.vxe-form--item.is--span .vxe-default-textarea,.vxe-form--item.is--span .vxe-input,.vxe-form--item.is--span .vxe-select,.vxe-form--item.is--span .vxe-textarea{width:100%}.vxe-form--item.is--error .vxe-default-input,.vxe-form--item.is--error .vxe-default-select,.vxe-form--item.is--error .vxe-default-textarea,.vxe-form--item.is--error .vxe-input>.vxe-input--inner,.vxe-form--item.is--error .vxe-select,.vxe-form--item.is--error .vxe-select.is--active>.vxe-input .vxe-input--inner,.vxe-form--item.is--error .vxe-textarea>.vxe-textarea--inner{border-color:var(--vxe-ui-form-validate-error-color)}.vxe-form--item.is--error .vxe-default-input[type=search]:focus,.vxe-form--item.is--error .vxe-default-input[type=text]:focus,.vxe-form--item.is--error .vxe-default-select:focus,.vxe-form--item.is--error .vxe-default-textarea:focus,.vxe-form--item.is--error .vxe-input>.vxe-input--inner:focus,.vxe-form--item.is--error .vxe-textarea>.vxe-textarea--inner:focus{border-color:var(--vxe-ui-form-validate-error-color)}.vxe-form--item.is--error .vxe-form--item-valid{opacity:1;transform:scaleY(1)}.vxe-form--item .vxe-form--item-inner{display:flex;flex-direction:row;align-items:center;flex-grow:1}.vxe-form--item .vxe-form--item-inner .vxe-form--item-title{flex-shrink:0}.vxe-form--item .vxe-form--item-inner .vxe-form--item-content{position:relative;flex-grow:1;word-break:break-all}.vxe-form--item .vxe-default-input,.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{outline:0;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form--item .vxe-default-input,.vxe-form--item .vxe-default-select{height:var(--vxe-ui-button-height-default)}.vxe-form--item .vxe-default-input{padding:0 .8em}.vxe-form--item .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-default) * 2);padding:.3em .6em}.vxe-form--item .vxe-default-input[type=number]{padding-right:.2em}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text]{padding:0 1em}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text],.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{color:var(--vxe-ui-font-color)}.vxe-form--item .vxe-default-input[type=search]:focus,.vxe-form--item .vxe-default-input[type=text]:focus,.vxe-form--item .vxe-default-select:focus,.vxe-form--item .vxe-default-textarea:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-form--item .vxe-default-input[type=search][disabled],.vxe-form--item .vxe-default-input[type=text][disabled],.vxe-form--item .vxe-default-select[disabled],.vxe-form--item .vxe-default-textarea[disabled]{cursor:not-allowed;background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-form--item .vxe-default-input[type=reset],.vxe-form--item .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-default) - 2px);background-color:#fff;cursor:pointer}.vxe-form--item .vxe-default-input[type=reset]:active,.vxe-form--item .vxe-default-input[type=submit]:active{color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-form--item .vxe-default-input[type=date]::-webkit-inner-spin-button{margin-top:6px}.vxe-form--item .vxe-default-input[type=date]::-webkit-inner-spin-button,.vxe-form--item .vxe-default-input[type=number]::-webkit-inner-spin-button{height:24px}.vxe-form--item .vxe-default-input::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-input::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text],.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{width:180px}.vxe-form--item .vxe-default-textarea{resize:none;vertical-align:middle}.vxe-form--item .vxe-default-textarea::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-textarea::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-default)}.vxe-form .vxe-form--item-inner>.align--center{text-align:center}.vxe-form .vxe-form--item-inner>.align--left{text-align:left}.vxe-form .vxe-form--item-inner>.align--right{text-align:right}.vxe-form.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-form.size--medium .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-medium)}.vxe-form.size--medium .vxe-default-input[type=reset],.vxe-form.size--medium .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-medium) - 2px)}.vxe-form.size--medium .vxe-default-input,.vxe-form.size--medium .vxe-default-select{height:var(--vxe-ui-button-height-medium)}.vxe-form.size--medium .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-medium) * 2)}.vxe-form.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-form.size--small .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-small)}.vxe-form.size--small .vxe-default-input[type=reset],.vxe-form.size--small .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-small) - 2px)}.vxe-form.size--small .vxe-default-input,.vxe-form.size--small .vxe-default-select{height:var(--vxe-ui-button-height-small)}.vxe-form.size--small .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-small) * 2)}.vxe-form.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-form.size--mini .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-mini)}.vxe-form.size--mini .vxe-default-input[type=reset],.vxe-form.size--mini .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-mini) - 2px)}.vxe-form.size--mini .vxe-default-input,.vxe-form.size--mini .vxe-default-select{height:var(--vxe-ui-button-height-mini)}.vxe-form.size--mini .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-mini) * 2)}
+.vxe-form--item .vxe-default-input[type=reset]:hover,.vxe-form--item .vxe-default-input[type=submit]:hover{color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-form{position:relative;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color);text-align:left}.vxe-form .vxe-row{flex-shrink:0}.vxe-form--item-content,.vxe-form--item-row{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form--item-content>.vxe-form--item-col_1,.vxe-form--item-row>.vxe-form--item-col_1{width:4.16667%}.vxe-form--item-content>.vxe-form--item-col_2,.vxe-form--item-row>.vxe-form--item-col_2{width:8.33333%}.vxe-form--item-content>.vxe-form--item-col_3,.vxe-form--item-row>.vxe-form--item-col_3{width:12.5%}.vxe-form--item-content>.vxe-form--item-col_4,.vxe-form--item-row>.vxe-form--item-col_4{width:16.66667%}.vxe-form--item-content>.vxe-form--item-col_5,.vxe-form--item-row>.vxe-form--item-col_5{width:20.83333%}.vxe-form--item-content>.vxe-form--item-col_6,.vxe-form--item-row>.vxe-form--item-col_6{width:25%}.vxe-form--item-content>.vxe-form--item-col_7,.vxe-form--item-row>.vxe-form--item-col_7{width:29.16667%}.vxe-form--item-content>.vxe-form--item-col_8,.vxe-form--item-row>.vxe-form--item-col_8{width:33.33333%}.vxe-form--item-content>.vxe-form--item-col_9,.vxe-form--item-row>.vxe-form--item-col_9{width:37.5%}.vxe-form--item-content>.vxe-form--item-col_10,.vxe-form--item-row>.vxe-form--item-col_10{width:41.66667%}.vxe-form--item-content>.vxe-form--item-col_11,.vxe-form--item-row>.vxe-form--item-col_11{width:45.83333%}.vxe-form--item-content>.vxe-form--item-col_12,.vxe-form--item-row>.vxe-form--item-col_12{width:50%}.vxe-form--item-content>.vxe-form--item-col_13,.vxe-form--item-row>.vxe-form--item-col_13{width:54.16667%}.vxe-form--item-content>.vxe-form--item-col_14,.vxe-form--item-row>.vxe-form--item-col_14{width:58.33333%}.vxe-form--item-content>.vxe-form--item-col_15,.vxe-form--item-row>.vxe-form--item-col_15{width:62.5%}.vxe-form--item-content>.vxe-form--item-col_16,.vxe-form--item-row>.vxe-form--item-col_16{width:66.66667%}.vxe-form--item-content>.vxe-form--item-col_17,.vxe-form--item-row>.vxe-form--item-col_17{width:70.83333%}.vxe-form--item-content>.vxe-form--item-col_18,.vxe-form--item-row>.vxe-form--item-col_18{width:75%}.vxe-form--item-content>.vxe-form--item-col_19,.vxe-form--item-row>.vxe-form--item-col_19{width:79.16667%}.vxe-form--item-content>.vxe-form--item-col_20,.vxe-form--item-row>.vxe-form--item-col_20{width:83.33333%}.vxe-form--item-content>.vxe-form--item-col_21,.vxe-form--item-row>.vxe-form--item-col_21{width:87.5%}.vxe-form--item-content>.vxe-form--item-col_22,.vxe-form--item-row>.vxe-form--item-col_22{width:91.66667%}.vxe-form--item-content>.vxe-form--item-col_23,.vxe-form--item-row>.vxe-form--item-col_23{width:95.83333%}.vxe-form--item-content>.vxe-form--item-col_24,.vxe-form--item-row>.vxe-form--item-col_24{width:100%}.vxe-form-slots{display:none}.vxe-form--item-content,.vxe-form--item-trigger-node{display:inline-block;vertical-align:middle}.vxe-form--item-title{display:flex;flex-direction:row;max-width:320px;padding-right:.8em}.vxe-form--item-title.is--ellipsis .vxe-form--item-title-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-form--item-title .vxe-form--item-title-postfix,.vxe-form--item-title .vxe-form--item-title-prefix,.vxe-form--item-title .vxe-form--item-title-suffix{flex-shrink:0}.vxe-form--item-title .vxe-form--item-title-prefix,.vxe-form--item-title .vxe-form--item-title-suffix{cursor:help;vertical-align:middle}.vxe-form--item-title .vxe-form--item-title-prefix{margin-right:.25em}.vxe-form--item-title .vxe-form--item-title-suffix{margin-left:.2em}.vxe-form--item-title .vxe-form--item-title-postfix{display:flex;align-items:center}.vxe-form--item-title .vxe-form--item-title-content{flex-grow:1}.vxe-form--item-title .vxe-form--item-title-label{vertical-align:middle}.vxe-form--item-trigger-node{font-size:12px;min-width:100px;color:#909399;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-form--item-trigger-node .vxe-form--item-trigger-icon{display:inline-block;margin:0 .25em;transition:all .1s}.vxe-form--item-valid{position:absolute;width:100%;font-size:12px;line-height:1.2em;color:var(--vxe-ui-form-validate-error-color);background-color:var(--vxe-ui-form-validate-error-background-color);z-index:1;opacity:0;transform-origin:center top;transform:scaleY(0);transition:all .2s ease-in-out}.vxe-form .vxe-form--gather{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.vxe-form .vxe-form--wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form .vxe-form--item{display:none;padding:.5em .8em .5em 0}.vxe-form .vxe-form--item.is--vertical{padding:.25em 0 .25em 0}.vxe-form .vxe-form--item.is--active:not(.is--hidden){display:inline-flex}.vxe-form--item.is--bold>.vxe-form--item-inner>.vxe-form--item-title{font-weight:700}.vxe-form--item.is--colon .vxe-form--item-title-postfix:after{content:":";font-weight:400;margin-left:.2em}.vxe-form--item.is--asterisk.is--required .vxe-form--item-title-content:before{content:"*";color:var(--vxe-ui-form-validate-error-color);font-family:Verdana,Arial,Tahoma;margin-right:.2em;font-weight:400;vertical-align:middle}.vxe-form--item.is--vertical .vxe-form--item-inner{flex-direction:column;align-items:initial}.vxe-form--item.is--vertical .vxe-form--item-inner .vxe-form--item-title{height:2.5em;line-height:2.3em;padding-right:0;max-width:none}.vxe-form--item.is--vertical .vxe-form--item-inner .vxe-form--item-title-content{flex-grow:initial}.vxe-form--item.is--span .vxe-default-input:not([type=submit]):not([type=reset]),.vxe-form--item.is--span .vxe-default-select,.vxe-form--item.is--span .vxe-default-textarea,.vxe-form--item.is--span .vxe-input,.vxe-form--item.is--span .vxe-select,.vxe-form--item.is--span .vxe-textarea{width:100%}.vxe-form--item.is--error .vxe-default-input,.vxe-form--item.is--error .vxe-default-select,.vxe-form--item.is--error .vxe-default-textarea,.vxe-form--item.is--error .vxe-input>.vxe-input--inner,.vxe-form--item.is--error .vxe-select,.vxe-form--item.is--error .vxe-select.is--active>.vxe-input .vxe-input--inner,.vxe-form--item.is--error .vxe-textarea>.vxe-textarea--inner{border-color:var(--vxe-ui-form-validate-error-color)}.vxe-form--item.is--error .vxe-default-input[type=search]:focus,.vxe-form--item.is--error .vxe-default-input[type=text]:focus,.vxe-form--item.is--error .vxe-default-select:focus,.vxe-form--item.is--error .vxe-default-textarea:focus,.vxe-form--item.is--error .vxe-input>.vxe-input--inner:focus,.vxe-form--item.is--error .vxe-textarea>.vxe-textarea--inner:focus{border-color:var(--vxe-ui-form-validate-error-color)}.vxe-form--item.is--error .vxe-form--item-valid{opacity:1;transform:scaleY(1)}.vxe-form--item .vxe-form--item-inner{display:flex;flex-direction:row;align-items:center;flex-grow:1}.vxe-form--item .vxe-form--item-inner .vxe-form--item-title{flex-shrink:0}.vxe-form--item .vxe-form--item-inner .vxe-form--item-content{position:relative;flex-grow:1;word-break:break-all}.vxe-form--item .vxe-default-input,.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{outline:0;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form--item .vxe-default-input,.vxe-form--item .vxe-default-select{height:var(--vxe-ui-button-height-default)}.vxe-form--item .vxe-default-input{padding:0 .8em}.vxe-form--item .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-default) * 2);padding:.3em .6em}.vxe-form--item .vxe-default-input[type=number]{padding-right:.2em}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text]{padding:0 1em}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text],.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{color:var(--vxe-ui-font-color)}.vxe-form--item .vxe-default-input[type=search]:focus,.vxe-form--item .vxe-default-input[type=text]:focus,.vxe-form--item .vxe-default-select:focus,.vxe-form--item .vxe-default-textarea:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-form--item .vxe-default-input[type=search][disabled],.vxe-form--item .vxe-default-input[type=text][disabled],.vxe-form--item .vxe-default-select[disabled],.vxe-form--item .vxe-default-textarea[disabled]{cursor:not-allowed;background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-form--item .vxe-default-input[type=reset],.vxe-form--item .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-default) - 2px);background-color:#fff;cursor:pointer}.vxe-form--item .vxe-default-input[type=reset]:active,.vxe-form--item .vxe-default-input[type=submit]:active{color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-form--item .vxe-default-input[type=date]::-webkit-inner-spin-button{margin-top:6px}.vxe-form--item .vxe-default-input[type=date]::-webkit-inner-spin-button,.vxe-form--item .vxe-default-input[type=number]::-webkit-inner-spin-button{height:24px}.vxe-form--item .vxe-default-input::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-input::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-input[type=search],.vxe-form--item .vxe-default-input[type=text],.vxe-form--item .vxe-default-select,.vxe-form--item .vxe-default-textarea{width:180px}.vxe-form--item .vxe-default-textarea{resize:none;vertical-align:middle}.vxe-form--item .vxe-default-textarea::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form--item .vxe-default-textarea::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-form .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-default)}.vxe-form .vxe-form--item-inner>.align--center{text-align:center}.vxe-form .vxe-form--item-inner>.align--left{text-align:left}.vxe-form .vxe-form--item-inner>.align--right{text-align:right}.vxe-form.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-form.size--medium .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-medium)}.vxe-form.size--medium .vxe-default-input[type=reset],.vxe-form.size--medium .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-medium) - 2px)}.vxe-form.size--medium .vxe-default-input,.vxe-form.size--medium .vxe-default-select{height:var(--vxe-ui-button-height-medium)}.vxe-form.size--medium .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-medium) * 2)}.vxe-form.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-form.size--small .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-small)}.vxe-form.size--small .vxe-default-input[type=reset],.vxe-form.size--small .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-small) - 2px)}.vxe-form.size--small .vxe-default-input,.vxe-form.size--small .vxe-default-select{height:var(--vxe-ui-button-height-small)}.vxe-form.size--small .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-small) * 2)}.vxe-form.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-form.size--mini .vxe-form--item-inner{min-height:var(--vxe-ui-form-item-min-height-mini)}.vxe-form.size--mini .vxe-default-input[type=reset],.vxe-form.size--mini .vxe-default-input[type=submit]{line-height:calc(var(--vxe-ui-button-height-mini) - 2px)}.vxe-form.size--mini .vxe-default-input,.vxe-form.size--mini .vxe-default-select{height:var(--vxe-ui-button-height-mini)}.vxe-form.size--mini .vxe-default-textarea{height:calc(var(--vxe-ui-button-height-mini) * 2)}

package/es/form-design/render/index.js

@@ -1,7 +1,7 @@
 import { h } from 'vue';
 import { renderer } from '@vxe-ui/core';
 import { getWidgetRowConfig, WidgetRowEditComponent, WidgetRowViewComponent, WidgetRowFormComponent } from '../widget-row';
-import { getWidgetInputConfig, createWidgetInputViewRules, WidgetInputViewComponent, WidgetInputFormComponent } from '../widget-input';
+import { getWidgetInputConfig, WidgetInputViewComponent, WidgetInputFormComponent } from '../widget-input';
 import { getWidgetTextareaConfig, WidgetTextareaViewComponent, WidgetTextareaFormComponent } from '../widget-textarea';
 import { getWidgetSelectConfig, WidgetSelectViewComponent, WidgetSelectFormComponent } from '../widget-select';
 /**
@@ -27,8 +27,7 @@ renderer.mixin({
         createFormDesignWidgetConfig: getWidgetInputConfig,
         renderFormDesignWidgetFormView(renderOpts, renderParams) {
             return h(WidgetInputFormComponent, { renderOpts, renderParams });
-        },
-        createFormDesignWidgetRules: createWidgetInputViewRules
+        }
     },
     textarea: {
         renderFormDesignWidgetView(renderOpts, renderParams) {

package/es/form-design/render/util.js

@@ -2,3 +2,6 @@ import { getI18n } from '@vxe-ui/core';
 export const getFormDesignWidgetName = (name) => {
     return getI18n(`vxe.formDesign.widget.component.${name}`);
 };
+export const handleGetFormDesignWidgetName = (params) => {
+    return getFormDesignWidgetName(params.name);
+};

package/es/form-design/src/default-setting-data.js

@@ -3,22 +3,36 @@ export const getDefaultSettingFormData = (defOpts) => {
         pcVisible: defOpts ? !!defOpts.pcVisible : true,
         pcVertical: true,
         pcTitleBold: false,
+        pcTitleColon: false,
+        pcTitleAlign: '',
+        pcTitleWidth: '',
+        pcTitleWidthUnit: '',
         mobileVisible: defOpts ? !!defOpts.mobileVisible : true,
         mobileVertical: true,
-        mobileTitleBold: false
+        mobileTitleBold: false,
+        mobileTitleColon: false,
+        mobileTitleAlign: '',
+        mobileTitleWidth: '',
+        mobileTitleWidthUnit: ''
     };
 };
 export const createDefaultFormViewPCFormConfig = (params) => {
     const { formConfig } = params;
     return {
         vertical: formConfig.pcVertical,
-        titleBold: formConfig.pcTitleBold
+        titleBold: formConfig.pcTitleBold,
+        titleColon: formConfig.pcTitleColon,
+        titleAlign: formConfig.pcTitleAlign,
+        titleWidth: formConfig.pcTitleWidth
     };
 };
 export const createDefaultFormViewMobileFormConfig = (params) => {
     const { formConfig } = params;
     return {
         vertical: formConfig.mobileVertical,
-        titleBold: formConfig.mobileTitleBold
+        titleBold: formConfig.mobileTitleBold,
+        titleColon: formConfig.mobileTitleColon,
+        titleAlign: formConfig.mobileTitleAlign,
+        titleWidth: formConfig.mobileTitleWidth
     };
 };

package/es/form-design/src/default-setting-form.js

@@ -1,7 +1,9 @@
 import { h, defineComponent, inject, createCommentVNode } from 'vue';
+import { getIcon, getI18n } from '@vxe-ui/core';
 import VxeFormComponent from '../../form/src/form';
 import VxeFormItemComponent from '../../form/src/form-item';
 import VxeSwitchComponent from '../../switch/src/switch';
+import VxeTextComponent from '../../text/src/text';
 export const DefaultSettingFormComponent = defineComponent({
     name: 'DefaultSettingForm',
     props: {
@@ -22,41 +24,48 @@ export const DefaultSettingFormComponent = defineComponent({
             return h(VxeFormComponent, {
                 data: formData,
                 span: 24,
-                vertical: true
+                vertical: true,
+                titleBold: true
             }, {
                 default() {
                     const { showPC, showMobile } = formDesignProps;
                     return [
                         showPC && showMobile
                             ? h(VxeFormItemComponent, {
-                                title: '显示设置'
+                                title: getI18n('vxe.formDesign.widgetProp.displaySetting.name')
                             }, {
                                 default() {
                                     return [
                                         h('div', {
-                                            class: 'vxe-design-form--widget-form-item-devices'
+                                            class: 'vxe-form-design--widget-form-item-devices'
                                         }, [
                                             h('div', {
-                                                class: 'vxe-design-form--widget-form-item-pc'
+                                                class: 'vxe-form-design--widget-form-item-pc'
                                             }, [
-                                                h('span', {}, '电脑端'),
+                                                h(VxeTextComponent, {
+                                                    icon: getIcon().DESIGN_FORM_PROPS_PC,
+                                                    content: getI18n('vxe.formDesign.widgetProp.displaySetting.pc')
+                                                }),
                                                 h(VxeSwitchComponent, {
                                                     modelValue: formData.pcVisible,
-                                                    openLabel: '显示',
-                                                    closeLabel: '隐藏',
+                                                    openLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.visible'),
+                                                    closeLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.hidden'),
                                                     'onUpdate:modelValue'(val) {
                                                         formData.pcVisible = val;
                                                     }
                                                 })
                                             ]),
                                             h('div', {
-                                                class: 'vxe-design-form--widget-form-item-mobile'
+                                                class: 'vxe-form-design--widget-form-item-mobile'
                                             }, [
-                                                h('span', {}, '手机端'),
+                                                h(VxeTextComponent, {
+                                                    icon: getIcon().DESIGN_FORM_PROPS_MOBILE,
+                                                    content: getI18n('vxe.formDesign.widgetProp.displaySetting.mobile')
+                                                }),
                                                 h(VxeSwitchComponent, {
                                                     modelValue: formData.mobileVisible,
-                                                    openLabel: '显示',
-                                                    closeLabel: '隐藏',
+                                                    openLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.visible'),
+                                                    closeLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.hidden'),
                                                     'onUpdate:modelValue'(val) {
                                                         formData.mobileVisible = val;
                                                     }

package/es/form-design/src/default-style-form.js

@@ -1,29 +1,52 @@
-import { h, defineComponent, ref, computed, inject } from 'vue';
+import { h, defineComponent, ref, inject, createCommentVNode } from 'vue';
+import { getI18n } from '@vxe-ui/core';
 import VxeFormComponent from '../../form/src/form';
 import VxeFormItemComponent from '../../form/src/form-item';
+import VxeInputComponent from '../../input/src/input';
+import VxeRadioGroupComponent from '../../radio/src/group';
+import VxeSelectGroupComponent from '../../select/src/select';
 const getBoldOptions = () => {
     return [
-        { label: '常规', value: false },
-        { label: '加粗', value: true }
+        { label: getI18n('vxe.formDesign.styleSetting.fontNormal'), value: false },
+        { label: getI18n('vxe.formDesign.styleSetting.fontBold'), value: true }
+    ];
+};
+const getColonOptions = () => {
+    return [
+        { label: getI18n('vxe.formDesign.styleSetting.colonVisible'), value: true },
+        { label: getI18n('vxe.formDesign.styleSetting.colonHidden'), value: false }
+    ];
+};
+const getAlignOptions = () => {
+    return [
+        { label: getI18n('vxe.formDesign.styleSetting.alignLeft'), value: '' },
+        { label: getI18n('vxe.formDesign.styleSetting.alignRight'), value: 'right' }
+    ];
+};
+const getWidthUnitOptions = () => {
+    return [
+        { label: getI18n('vxe.formDesign.styleSetting.unitPx'), value: '' },
+        { label: getI18n('vxe.formDesign.styleSetting.unitPct'), value: '%' }
     ];
 };
 const renderLayoutOption = (formData, field, type, changeEvent) => {
+    const isVertical = type === 'vertical';
     return h('div', {
-        class: ['vxe-design-form--widget-form-item-option', `is--${type}`, {
-                'is--active': type === 'vertical' ? formData[field] : !formData[field]
+        class: ['vxe-form-design--widget-form-item-option', `is--${type}`, {
+                'is--active': isVertical ? formData[field] : !formData[field]
             }],
         onClick() {
-            formData[field] = type === 'vertical';
+            formData[field] = isVertical;
             changeEvent();
         }
     }, [
         h('div', {
-            class: 'vxe-design-form--widget-form-item-option-row'
+            class: 'vxe-form-design--widget-form-item-option-row'
         }),
         h('div', {
-            class: 'vxe-design-form--widget-form-item-option-row'
+            class: 'vxe-form-design--widget-form-item-option-row'
         }),
-        h('div', {}, '上下布局')
+        h('div', {}, isVertical ? getI18n('vxe.formDesign.styleSetting.verticalLayout') : getI18n('vxe.formDesign.styleSetting.horizontalLayout'))
     ]);
 };
 export const DefaultPCStyleFormComponent = defineComponent({
@@ -38,53 +61,122 @@ export const DefaultPCStyleFormComponent = defineComponent({
     setup(props) {
         const $xeFormDesign = inject('$xeFormDesign', null);
         const verticalField = 'pcVertical';
-        const boldOpsRef = ref(getBoldOptions());
-        const computeTitleBold = computed(() => {
-            return {
-                title: '标题加粗',
-                field: 'pcTitleBold',
-                itemRender: {
-                    name: 'VxeRadioGroup',
-                    options: boldOpsRef.value,
-                    props: {
-                        type: 'button'
-                    },
-                    events: {
-                        change: refreshPreview
-                    }
-                }
-            };
-        });
+        const refBoldOpts = ref(getBoldOptions());
+        const refColonOpts = ref(getColonOptions());
+        const refAlignOpts = ref(getAlignOptions());
+        const refWidthUnitOpts = ref(getWidthUnitOptions());
         const refreshPreview = () => {
             if ($xeFormDesign) {
                 $xeFormDesign.refreshPreviewView();
             }
         };
+        const changeLayoutEvent = () => {
+            const { formData } = props;
+            if (!formData.pcTitleWidth) {
+                formData.pcTitleWidth = 100;
+            }
+            refreshPreview();
+        };
         return () => {
             const { formData } = props;
             return h(VxeFormComponent, {
                 data: formData,
                 span: 24,
-                vertical: true
+                vertical: true,
+                titleBold: true
             }, {
                 default() {
                     return [
                         h(VxeFormItemComponent, {
-                            title: '控件布局',
+                            title: getI18n('vxe.formDesign.styleSetting.layoutTitle'),
                             field: verticalField
                         }, {
                             default() {
                                 return [
                                     h('div', {
-                                        class: 'vxe-design-form--widget-form-item-layout'
+                                        class: 'vxe-form-design--widget-form-item-layout'
                                     }, [
-                                        renderLayoutOption(formData, verticalField, 'vertical', refreshPreview),
-                                        renderLayoutOption(formData, verticalField, 'horizontal', refreshPreview)
+                                        renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent),
+                                        renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)
                                     ])
                                 ];
                             }
                         }),
-                        h(VxeFormItemComponent, computeTitleBold.value)
+                        h(VxeFormItemComponent, {
+                            title: getI18n('vxe.formDesign.styleSetting.styleTitle')
+                        }, {
+                            default() {
+                                return [
+                                    h('div', {
+                                        class: 'vxe-form-design--widget-form-item-prop-list'
+                                    }, [
+                                        h('span', {}, getI18n('vxe.formDesign.styleSetting.boldTitle')),
+                                        h(VxeRadioGroupComponent, {
+                                            modelValue: formData.pcTitleBold,
+                                            options: refBoldOpts.value,
+                                            onChange: refreshPreview,
+                                            'onUpdate:modelValue'(val) {
+                                                formData.pcTitleBold = val;
+                                            }
+                                        })
+                                    ]),
+                                    h('div', {
+                                        class: 'vxe-form-design--widget-form-item-prop-list'
+                                    }, [
+                                        h('span', {}, getI18n('vxe.formDesign.styleSetting.colonTitle')),
+                                        h(VxeRadioGroupComponent, {
+                                            modelValue: formData.pcTitleColon,
+                                            options: refColonOpts.value,
+                                            onChange: refreshPreview,
+                                            'onUpdate:modelValue'(val) {
+                                                formData.pcTitleColon = val;
+                                            }
+                                        })
+                                    ]),
+                                    formData.pcVertical
+                                        ? createCommentVNode()
+                                        : h('div', {
+                                            class: 'vxe-form-design--widget-form-item-prop-list'
+                                        }, [
+                                            h('span', {}, getI18n('vxe.formDesign.styleSetting.alignTitle')),
+                                            h(VxeRadioGroupComponent, {
+                                                modelValue: formData.pcTitleAlign,
+                                                options: refAlignOpts.value,
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.pcTitleAlign = val;
+                                                }
+                                            })
+                                        ]),
+                                    formData.pcVertical
+                                        ? createCommentVNode()
+                                        : h('div', {
+                                            class: 'vxe-form-design--widget-form-item-prop-list'
+                                        }, [
+                                            h('span', {}, getI18n('vxe.formDesign.styleSetting.alignTitle')),
+                                            h(VxeInputComponent, {
+                                                class: 'vxe-form-design--widget-form-item-prop-width',
+                                                modelValue: formData.pcTitleWidth,
+                                                type: 'integer',
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.pcTitleWidth = val;
+                                                }
+                                            }),
+                                            h(VxeSelectGroupComponent, {
+                                                class: 'vxe-form-design--widget-form-item-prop-unit',
+                                                modelValue: formData.pcTitleWidthUnit,
+                                                options: refWidthUnitOpts.value,
+                                                transfer: true,
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.pcTitleWidthUnit = val;
+                                                }
+                                            })
+                                        ])
+                                ];
+                            }
+                        })
                     ];
                 }
             });
@@ -103,53 +195,122 @@ export const DefaultMobileStyleFormComponent = defineComponent({
     setup(props) {
         const $xeFormDesign = inject('$xeFormDesign', null);
         const verticalField = 'mobileVertical';
-        const boldOpsRef = ref(getBoldOptions());
-        const computeTitleBold = computed(() => {
-            return {
-                title: '标题加粗',
-                field: 'mobileTitleBold',
-                itemRender: {
-                    name: 'VxeRadioGroup',
-                    options: boldOpsRef.value,
-                    props: {
-                        type: 'button'
-                    }
-                },
-                events: {
-                    change: refreshPreview
-                }
-            };
-        });
+        const refBoldOpts = ref(getBoldOptions());
+        const refColonOpts = ref(getColonOptions());
+        const refAlignOpts = ref(getAlignOptions());
+        const refWidthUnitOpts = ref(getWidthUnitOptions());
         const refreshPreview = () => {
             if ($xeFormDesign) {
                 $xeFormDesign.refreshPreviewView();
             }
         };
+        const changeLayoutEvent = () => {
+            const { formData } = props;
+            if (!formData.mobileTitleWidth) {
+                formData.mobileTitleWidth = 100;
+            }
+            refreshPreview();
+        };
         return () => {
             const { formData } = props;
             return h(VxeFormComponent, {
                 data: formData,
                 span: 24,
-                vertical: true
+                vertical: true,
+                titleBold: true
             }, {
                 default() {
                     return [
                         h(VxeFormItemComponent, {
-                            title: '控件布局',
+                            title: getI18n('vxe.formDesign.styleSetting.layoutTitle'),
                             field: verticalField
                         }, {
                             default() {
                                 return [
                                     h('div', {
-                                        class: 'vxe-design-form--widget-form-item-layout'
+                                        class: 'vxe-form-design--widget-form-item-layout'
                                     }, [
-                                        renderLayoutOption(formData, verticalField, 'vertical', refreshPreview),
-                                        renderLayoutOption(formData, verticalField, 'horizontal', refreshPreview)
+                                        renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent),
+                                        renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)
                                     ])
                                 ];
                             }
                         }),
-                        h(VxeFormItemComponent, computeTitleBold.value)
+                        h(VxeFormItemComponent, {
+                            title: getI18n('vxe.formDesign.styleSetting.styleTitle')
+                        }, {
+                            default() {
+                                return [
+                                    h('div', {
+                                        class: 'vxe-form-design--widget-form-item-prop-list'
+                                    }, [
+                                        h('span', {}, getI18n('vxe.formDesign.styleSetting.boldTitle')),
+                                        h(VxeRadioGroupComponent, {
+                                            modelValue: formData.mobileTitleBold,
+                                            options: refBoldOpts.value,
+                                            onChange: refreshPreview,
+                                            'onUpdate:modelValue'(val) {
+                                                formData.mobileTitleBold = val;
+                                            }
+                                        })
+                                    ]),
+                                    h('div', {
+                                        class: 'vxe-form-design--widget-form-item-prop-list'
+                                    }, [
+                                        h('span', {}, getI18n('vxe.formDesign.styleSetting.colonTitle')),
+                                        h(VxeRadioGroupComponent, {
+                                            modelValue: formData.mobileTitleColon,
+                                            options: refColonOpts.value,
+                                            onChange: refreshPreview,
+                                            'onUpdate:modelValue'(val) {
+                                                formData.mobileTitleColon = val;
+                                            }
+                                        })
+                                    ]),
+                                    formData.mobileVertical
+                                        ? createCommentVNode()
+                                        : h('div', {
+                                            class: 'vxe-form-design--widget-form-item-prop-list'
+                                        }, [
+                                            h('span', {}, getI18n('vxe.formDesign.styleSetting.alignTitle')),
+                                            h(VxeRadioGroupComponent, {
+                                                modelValue: formData.mobileTitleAlign,
+                                                options: refAlignOpts.value,
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.mobileTitleAlign = val;
+                                                }
+                                            })
+                                        ]),
+                                    formData.mobileVertical
+                                        ? createCommentVNode()
+                                        : h('div', {
+                                            class: 'vxe-form-design--widget-form-item-prop-list'
+                                        }, [
+                                            h('span', {}, getI18n('vxe.formDesign.styleSetting.widthTitle')),
+                                            h(VxeInputComponent, {
+                                                class: 'vxe-form-design--widget-form-item-prop-width',
+                                                modelValue: formData.mobileTitleWidth,
+                                                type: 'integer',
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.mobileTitleWidth = val;
+                                                }
+                                            }),
+                                            h(VxeSelectGroupComponent, {
+                                                class: 'vxe-form-design--widget-form-item-prop-unit',
+                                                modelValue: formData.mobileTitleWidthUnit,
+                                                options: refWidthUnitOpts.value,
+                                                transfer: true,
+                                                onChange: refreshPreview,
+                                                'onUpdate:modelValue'(val) {
+                                                    formData.mobileTitleWidthUnit = val;
+                                                }
+                                            })
+                                        ])
+                                ];
+                            }
+                        })
                     ];
                 }
             });