feat: intput v15

migrate-from-v2.md

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

src/config.json

@@ -538,6 +538,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

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

@@ -4,20 +4,18 @@ import Form from '@/packages/form'
 
 const Demo7 = () => {
   return (
-    <>
-      <Form>
-        <Form.Item label="文本" name="username">
-          <Input
-            className="nut-input-text"
-            placeholder="请输入文本"
-            type="text"
-            onChange={(val) => {
-              console.log('change value:', val)
-            }}
-          />
-        </Form.Item>
-      </Form>
-    </>
+    <Form>
+      <Form.Item label="文本" name="username">
+        <Input
+          className="nut-input-text"
+          placeholder="请输入文本"
+          type="text"
+          onChange={(val) => {
+            console.log('change value:', val)
+          }}
+        />
+      </Form.Item>
+    </Form>
   )
 }
 export default Demo7

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

@@ -4,25 +4,23 @@ import { Input } from '@nutui/nutui-react'
 const Demo8 = () => {
   const [currentLength, setCurrentLength] = useState(0)
   return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
-      >
-        <Input
-          type="text"
-          maxLength={20}
-          onChange={(val) => setCurrentLength(val.length)}
-        />
-        <div className="right" style={{ fontSize: '12px' }}>
-          {currentLength} / 20
-        </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Input
+        type="text"
+        maxLength={20}
+        onChange={(val) => setCurrentLength(val.length)}
+      />
+      <div className="right" style={{ fontSize: '12px' }}>
+        {currentLength} / 20
       </div>
-    </>
+    </div>
   )
 }
 export default Demo8

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

@@ -5,30 +5,26 @@ import { Eye, Marshalling } from '@nutui/icons-react'
 const Demo9 = () => {
   const [inputType, setInputType] = useState('password')
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Input type={inputType} placeholder="请输入密码" />
       <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
+        className="right"
+        onClick={() => setInputType(inputType === 'text' ? 'password' : 'text')}
       >
-        <Input type={inputType} placeholder="请输入密码" />
-        <div
-          className="right"
-          onClick={() =>
-            setInputType(inputType === 'text' ? 'password' : 'text')
-          }
-        >
-          {inputType === 'text' ? (
-            <Eye color="var(--nutui-gray-7)" />
-          ) : (
-            <Marshalling color="var(--nutui-gray-7)" />
-          )}
-        </div>
+        {inputType === 'text' ? (
+          <Eye color="var(--nutui-gray-7)" />
+        ) : (
+          <Marshalling color="var(--nutui-gray-7)" />
+        )}
       </div>
-    </>
+    </div>
   )
 }
 export default Demo9

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

@@ -1,16 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Divider, Input } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
     <>
-      <Input
-        placeholder="请输入文本"
-        placeholderTextColor="#757575"
-        onChange={(v) => {
-          console.log('onChange', v)
-        }}
-      />
+      <Input placeholder="请输入文本：容器型" />
+      <Divider />
+      <Input plain placeholder="请输入文本：纯文本型" />
     </>
   )
 }

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

@@ -1,22 +1,17 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
   const formatter = (value: string) => value.replace(/\d/g, '')
   return (
-    <>
-      <Input
-        formatter={formatter}
-        placeholder="在输入时执行格式化"
-        placeholderTextColor="#757575"
-      />
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input formatter={formatter} placeholder="在输入时执行格式化" />
       <Input
         formatter={formatter}
         formatTrigger="onBlur"
         placeholder="在失焦时执行格式化"
-        placeholderTextColor="#757575"
       />
-    </>
+    </Space>
   )
 }
 export default Demo10

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

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

src/packages/input/demos/taro/demo12.tsx

@@ -4,7 +4,7 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo12 = () => {
   return (
     <>
-      <Input placeholder="事件" placeholderTextColor="#757575" />
+      <Input placeholder="事件" />
     </>
   )
 }