From 5e3b4e98f34a7fb34bf9aee7d190227e85f75e1b Mon Sep 17 00:00:00 2001
From: mrundef <imnull@outlook.com>
Date: Tue, 16 Nov 2021 22:11:08 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6InputIcon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/input-icon/index.ts  | 17 +++++++
 .../devui/input-icon/src/input-icon.scss      | 23 +++++++++
 .../devui/input-icon/src/input-icon.tsx       | 50 +++++++++++++++++++
 .../docs/components/input-icon/index.md       | 29 +++++++++++
 4 files changed, 119 insertions(+)
 create mode 100644 packages/devui-vue/devui/input-icon/index.ts
 create mode 100644 packages/devui-vue/devui/input-icon/src/input-icon.scss
 create mode 100644 packages/devui-vue/devui/input-icon/src/input-icon.tsx
 create mode 100644 packages/devui-vue/docs/components/input-icon/index.md

diff --git a/packages/devui-vue/devui/input-icon/index.ts b/packages/devui-vue/devui/input-icon/index.ts
new file mode 100644
index 00000000..01e76773
--- /dev/null
+++ b/packages/devui-vue/devui/input-icon/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import InputIcon from './src/input-icon'
+
+InputIcon.install = function(app: App) {
+  app.component(InputIcon.name, InputIcon)
+}
+
+export { InputIcon }
+
+export default {
+  title: 'InputIcon输入框',
+  category: '数据录入',
+  status: '75%',
+  install(app: App): void {
+    app.use(InputIcon as any)
+  }
+}
diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.scss b/packages/devui-vue/devui/input-icon/src/input-icon.scss
new file mode 100644
index 00000000..a3067afc
--- /dev/null
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.scss
@@ -0,0 +1,23 @@
+$icon-size: 26px;
+$icon-offset: 4px;
+.d-input-icon-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    label {
+        flex: 1;
+        background-color: #ccc;
+        input {
+            padding-right: $icon-size + $icon-offset;
+        }
+    }
+    span {
+        position: absolute;
+        right: $icon-offset;
+        width: $icon-size;
+        display: flex;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.tsx b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
new file mode 100644
index 00000000..7fcf918c
--- /dev/null
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
@@ -0,0 +1,50 @@
+import { defineComponent, reactive, PropType } from 'vue'
+import Input from '../../input/src/input'
+import { inputProps } from '../../input/src/use-input'
+import Icon from '../../icon/src/icon'
+// import { inputProps, InputType } from './use-input'
+// import './input.scss'
+// import { dFormItemEvents, IFormItem, formItemInjectionKey } from '../../form/src/form-types'
+
+import './input-icon.scss'
+
+const inputIconProps = {
+    ...inputProps,
+    name: {
+        type: String,
+        value: 'calendar',
+        required: false,
+    },
+    onIconclick: {
+        type: Function as PropType<(e: MouseEvent) => void>,
+        required: false,
+    }
+}
+
+export default defineComponent({
+    name: 'DInputIcon',
+    props: inputIconProps,
+    setup(props, ctx) {
+        const { name, onIconclick, onChange, ...inputProps } = props
+        const state = reactive({ value: '' })
+        const onInputChange = (v: string) => {
+            state.value = v
+            typeof onChange === 'function' && onChange(state.value)
+        }
+        const onIconClick = (e: MouseEvent) => {
+            typeof onIconclick === 'function' && onIconclick(state.value, e)
+        }
+        return () => {
+            return (
+                <div class="d-input-icon-container">
+                    <label>
+                        <Input { ...inputProps } onChange={onInputChange} />
+                    </label>
+                    <span onClick={onIconClick}>
+                        <Icon size="small" name={name} />
+                    </span>
+                </div>
+            )
+        }
+    },
+})
diff --git a/packages/devui-vue/docs/components/input-icon/index.md b/packages/devui-vue/docs/components/input-icon/index.md
new file mode 100644
index 00000000..31e47b1f
--- /dev/null
+++ b/packages/devui-vue/docs/components/input-icon/index.md
@@ -0,0 +1,29 @@
+# InputIcon 输入框
+
+文本输入框。
+
+### 何时使用
+
+需要手动输入文字使用。
+
+### 基本用法
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+
+    const eventValue = ref<string>('')
+    const handleIconClick = (val: string) => {
+        console.log(eventValue.value = val)
+    }
+
+    return {
+      eventValue,
+      handleIconClick,
+    }
+  }
+})
+</script>
+<d-input :value="eventValue" />
+<d-input-icon name="calendar" @iconclick="handleIconClick" />
\ No newline at end of file
-- 
Gitee


From 004a6ac387458e80461ffec66054ceeceda6ce60 Mon Sep 17 00:00:00 2001
From: mrundef <imnull@outlook.com>
Date: Tue, 16 Nov 2021 22:19:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/input-icon/src/input-icon.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.tsx b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
index 7fcf918c..678ac0c7 100644
--- a/packages/devui-vue/devui/input-icon/src/input-icon.tsx
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
@@ -2,9 +2,6 @@ import { defineComponent, reactive, PropType } from 'vue'
 import Input from '../../input/src/input'
 import { inputProps } from '../../input/src/use-input'
 import Icon from '../../icon/src/icon'
-// import { inputProps, InputType } from './use-input'
-// import './input.scss'
-// import { dFormItemEvents, IFormItem, formItemInjectionKey } from '../../form/src/form-types'
 
 import './input-icon.scss'
 
-- 
Gitee


From 4fcd77b95be38c501a9a8fccc41371edf76f661d Mon Sep 17 00:00:00 2001
From: mrundef <imnull@outlook.com>
Date: Wed, 24 Nov 2021 20:32:46 +0800
Subject: [PATCH 3/3] feat: update input-icon doc, add some icon's props

---
 .../devui/input-icon/src/input-icon.scss      |   8 +-
 .../devui/input-icon/src/input-icon.tsx       |  14 ++-
 .../docs/components/input-icon/index.md       | 111 +++++++++++++++++-
 3 files changed, 124 insertions(+), 9 deletions(-)

diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.scss b/packages/devui-vue/devui/input-icon/src/input-icon.scss
index a3067afc..8a38b1d1 100644
--- a/packages/devui-vue/devui/input-icon/src/input-icon.scss
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.scss
@@ -1,5 +1,6 @@
 $icon-size: 26px;
-$icon-offset: 4px;
+$icon-offset: 1px;
+$icon-left: 2px;
 .d-input-icon-container {
     display: flex;
     flex-direction: row;
@@ -9,15 +10,18 @@ $icon-offset: 4px;
         flex: 1;
         background-color: #ccc;
         input {
-            padding-right: $icon-size + $icon-offset;
+            padding-right: $icon-size + $icon-offset + $icon-left;
         }
     }
     span {
         position: absolute;
+        top: 1px;
+        bottom: 1px;
         right: $icon-offset;
         width: $icon-size;
         display: flex;
         justify-content: center;
+        align-items: center;
         box-sizing: border-box;
     }
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.tsx b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
index 678ac0c7..34a9b34c 100644
--- a/packages/devui-vue/devui/input-icon/src/input-icon.tsx
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.tsx
@@ -15,6 +15,14 @@ const inputIconProps = {
     onIconclick: {
         type: Function as PropType<(e: MouseEvent) => void>,
         required: false,
+    },
+    iconBgColor: {
+        type: String,
+        value: 'transparent',
+    },
+    iconColor: {
+        type: String,
+        value: '#000000',
     }
 }
 
@@ -22,7 +30,7 @@ export default defineComponent({
     name: 'DInputIcon',
     props: inputIconProps,
     setup(props, ctx) {
-        const { name, onIconclick, onChange, ...inputProps } = props
+        const { name, onIconclick, onChange, iconBgColor, iconColor, ...inputProps } = props
         const state = reactive({ value: '' })
         const onInputChange = (v: string) => {
             state.value = v
@@ -37,8 +45,8 @@ export default defineComponent({
                     <label>
                         <Input { ...inputProps } onChange={onInputChange} />
                     </label>
-                    <span onClick={onIconClick}>
-                        <Icon size="small" name={name} />
+                    <span onClick={onIconClick} style={{ backgroundColor: iconBgColor }}>
+                        <Icon size="small" name={name} color={iconColor} />
                     </span>
                 </div>
             )
diff --git a/packages/devui-vue/docs/components/input-icon/index.md b/packages/devui-vue/docs/components/input-icon/index.md
index 31e47b1f..97067f55 100644
--- a/packages/devui-vue/docs/components/input-icon/index.md
+++ b/packages/devui-vue/docs/components/input-icon/index.md
@@ -6,8 +6,6 @@
 
 需要手动输入文字使用。
 
-### 基本用法
-
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 export default defineComponent({
@@ -16,6 +14,7 @@ export default defineComponent({
     const eventValue = ref<string>('')
     const handleIconClick = (val: string) => {
         console.log(eventValue.value = val)
+        alert('AHHHH~!! InputIcon!!!!')
     }
 
     return {
@@ -25,5 +24,109 @@ export default defineComponent({
   }
 })
 </script>
-<d-input :value="eventValue" />
-<d-input-icon name="calendar" @iconclick="handleIconClick" />
\ No newline at end of file
+
+### 属性 name
+
+使用`name`属性定义`icon`类型，取值与`icon`组件一致。详细列表[https://devui.design/icon/ruleResource](https://devui.design/icon/ruleResource)
+
+```vue
+<d-input-icon name="calendar" />
+```
+
+<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;height:300px;">
+<d-input-icon value="calendar" name="calendar" />
+<d-input-icon value="code" name="code" />
+<d-input-icon value="close" name="close" />
+<d-input-icon value="edit" name="edit" />
+<d-input-icon value="buy" name="buy" />
+<d-input-icon value="letter-a" name="letter-a" />
+</div>
+
+### 属性 `icon-color` `icon-bg-color`
+
+- `icon-color` 定义`icon`颜色。
+- `icon-bg-color` 定义`icon`区域的背景色。
+
+由于字体图标本身有点布局偏移，加上背景可以有效抑制这种视觉偏移影响。
+
+```vue
+<d-input-icon name="letter-a" icon-bg-color="#afa" icon-color="#33a" />
+```
+
+<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;height:300px;">
+<d-input-icon value="calendar" name="calendar" icon-bg-color="#afa" icon-color="#33a"/>
+<d-input-icon value="code" name="code" icon-bg-color="#afa" icon-color="#33a" />
+<d-input-icon value="close" name="close" icon-bg-color="#afa" icon-color="#33a" />
+<d-input-icon value="edit" name="edit" icon-bg-color="#afa" icon-color="#33a" />
+<d-input-icon value="buy" name="buy" icon-bg-color="#afa" icon-color="#33a" />
+<d-input-icon value="letter-a" name="letter-a" icon-bg-color="#afa" icon-color="#33a" />
+</div>
+
+### 事件 `onIconclick`
+
+响应图标区域的点击。
+
+```vue
+<d-input-icon name="calendar" @iconclick="handleIconClick" />
+```
+
+<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;">
+<d-input-icon name="calendar" value="click the icon --->" @iconclick="handleIconClick" />
+</div>
+
+### 传递原始`Input`组件属性
+
+`InputIcon`组件的属性定义，沿用`Input`组件的属性定义对象并进行扩展：
+
+```js
+import { inputProps } from '../../input/src/use-input'
+const inputIconProps = {
+    ...inputProps,
+    name: {
+        type: String,
+        value: 'calendar',
+        required: false,
+    },
+    onIconclick: {
+        type: Function as PropType<(e: MouseEvent) => void>,
+        required: false,
+    },
+    iconBgColor: {
+        type: String,
+        value: 'transparent',
+    },
+    iconColor: {
+        type: String,
+        value: '#000000',
+    }
+}
+```
+
+在使用组件时，剔除`InputIcon`自身的几个额外属性，其余的属性全部直接传递给内置的`Input`组件。这样做的好处，是`Input`组件和`InputIcon`组件之间可以无缝替换。
+
+```js
+setup(props, ctx) {
+    // Rest剩余属性到inputProps对象
+    const { name, onIconclick, onChange, iconBgColor, iconColor, ...inputProps } = props
+    // ...
+    const onInputChange = (v: string) => {
+        state.value = v
+        typeof onChange === 'function' && onChange(state.value)
+    }
+    // ...
+    return () => {
+        return (
+            <div class="d-input-icon-container">
+                <label>
+                    <Input { ...inputProps } onChange={onInputChange} />
+                </label>
+                <span onClick={onIconClick} style={{ backgroundColor: iconBgColor }}>
+                    <Icon size="small" name={name} color={iconColor} />
+                </span>
+            </div>
+        )
+    }
+},
+```
+
+其中`onInputChange`的二次封装，是为了从`Input`组件中同步状态到本地。
\ No newline at end of file
-- 
Gitee