feat: intput v15 (#2889)

* feat: intput v15

* feat: intput v15

Author: xiaoyatong

migrate-from-v2.md

@@ -410,6 +410,10 @@ plugins: [
 
 #### Input
 
+- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
+- 区分了 readonly 和 disabled 的样式；
+- 删除一些样式变量，统一到由通用变量控制，如`$input-color`、`$input-disabled-color`
+
 #### InputNumber
 
 - 增加 `allowEmpty`, 用于允许内容是否为空

src/config.json

@@ -539,6 +539,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "VickyYe"
         },
         {

src/packages/formitem/formitem.scss

@@ -1,5 +1,7 @@
 .nut-form-item {
   display: flex;
+  align-items: center;
+  padding: 4px 12px;
 
   &.error {
     &.line {

src/packages/input/demos/h5/demo1.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Divider, Input } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
     <>
-      <Input placeholder="请输入文本" />
+      <Input placeholder="请输入文本：容器型" />
+      <Divider />
+      <Input placeholder="请输入文本：纯文本型" plain />
     </>
   )
 }

src/packages/input/demos/h5/demo10.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo10 = () => {
   const formatter = (value: string) => value.replace(/\d/g, '')
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input formatter={formatter} placeholder="在输入时移除数字" />
       <Input
         formatter={formatter}
         formatTrigger="onBlur"
         placeholder="在失焦时移除数字"
       />
-    </>
+    </Space>
   )
 }
 export default Demo10

src/packages/input/demos/h5/demo11.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo11 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input align="left" placeholder="文本内容对齐" />
       <Input align="right" placeholder="文本内容对齐" />
-    </>
+    </Space>
   )
 }
 export default Demo11

src/packages/input/demos/h5/demo13.tsx

@@ -4,27 +4,25 @@ import { Tips } from '@nutui/icons-react'
 
 const Demo13 = () => {
   return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
-      >
-        <Tips color="var(--nutui-gray-7)" />
-        <Input
-          placeholder="请输入短信验证码"
-          style={{ '--nutui-input-padding': '10px' }}
-        />
-        <div className="right">
-          <Button type="primary" size="small">
-            获取验证码
-          </Button>
-        </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Tips color="var(--nutui-gray-7)" />
+      <Input
+        placeholder="请输入短信验证码"
+        style={{ '--nutui-input-padding': '10px' }}
+      />
+      <div className="right">
+        <Button type="primary" size="small">
+          获取验证码
+        </Button>
       </div>
-    </>
+    </div>
   )
 }
 export default Demo13

src/packages/input/demos/h5/demo4.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input type="text" placeholder="请输入文本" />
       <Input type="password" placeholder="请输入密码" />
       <Input type="digit" placeholder="请输入数字" />
       <Input type="number" placeholder="请输入整数" />
-    </>
+    </Space>
   )
 }
 export default Demo4

src/packages/input/demos/h5/demo5.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <>
-      <Input readOnly placeholder="输入框只读" />
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input readOnly value="输入框只读" />
       <Input disabled placeholder="输入框禁用" />
-    </>
+    </Space>
   )
 }
 export default Demo5

src/packages/input/demos/h5/demo6.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 import { Close } from '@nutui/icons-react'
 
 const Demo6 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input clearable placeholder="显示清除图标" />
       <Input clearable clearIcon={<Close />} placeholder="显示清除图标" />
-    </>
+    </Space>
   )
 }
 export default Demo6