From 259a7b7bddbde87543e3fee053db7ab625ad5d6b Mon Sep 17 00:00:00 2001
From: qiang <itaco@qq.com>
Date: Fri, 14 Oct 2022 22:21:28 +0800
Subject: [PATCH 1/3] feat: init input component

---
 src/components/Form/input.story.vue | 199 ++++++++++++++++++++++++++++
 1 file changed, 199 insertions(+)
 create mode 100644 src/components/Form/input.story.vue

diff --git a/src/components/Form/input.story.vue b/src/components/Form/input.story.vue
new file mode 100644
index 0000000..e19d7db
--- /dev/null
+++ b/src/components/Form/input.story.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar, Search } from '@element-plus/icons-vue'
+const input = ref('')
+const input1 = ref('')
+const input2 = ref('')
+const input3 = ref('')
+const input4 = ref('')
+const textarea = ref('')
+const textarea1 = ref('')
+const textarea2 = ref('')
+const select = ref('')
+const text = ref('')
+</script>
+
+<template>
+  <Story title="Form/Input">
+    <Variant title="Basic Usage">
+      <el-input v-model="input" placeholder="Please input" />
+    </Variant>
+    <Variant title="Disabled">
+      <el-input v-model="input" disabled placeholder="Please input" />
+    </Variant>
+    <Variant title="Clearable">
+      <el-input v-model="input" clearable placeholder="Please input" />
+    </Variant>
+    <Variant title="Formatter">
+      <el-input
+        v-model="input"
+        placeholder="Please input"
+        :formatter="(value:string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+        :parser="(value:string) => value.replace(/\$\s?|(,*)/g, '')"
+      />
+    </Variant>
+    <Variant title="Show Password">
+      <el-input
+        v-model="input"
+        type="password"
+        placeholder="Please input password"
+        show-password
+      />
+    </Variant>
+    <Variant title="Icon">
+      <el-input
+        v-model="input1"
+        class="w-50 m-2"
+        placeholder="Pick a date"
+        :suffix-icon="Calendar"
+      />
+      <el-input
+        v-model="input2"
+        class="w-50 m-2"
+        placeholder="Type something"
+        :prefix-icon="Search"
+      />
+      <el-input v-model="input3" class="w-50 m-2" placeholder="Pick a date">
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <calendar />
+          </el-icon>
+        </template>
+      </el-input>
+      <el-input v-model="input4" class="w-50 m-2" placeholder="Type something">
+        <template #prefix>
+          <el-icon class="el-input__icon">
+            <search />
+          </el-icon>
+        </template>
+      </el-input>
+    </Variant>
+    <Variant title="Textarea">
+      <el-input
+        v-model="textarea"
+        :rows="2"
+        type="textarea"
+        placeholder="Please input"
+      />
+    </Variant>
+    <Variant title="Autosize Textarea">
+      <el-input
+        v-model="textarea1"
+        autosize
+        type="textarea"
+        placeholder="Please input"
+      />
+      <div style="margin: 20px 0" />
+      <el-input
+        v-model="textarea2"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        type="textarea"
+        placeholder="Please input"
+      />
+    </Variant>
+    <Variant title="Composite Input">
+      <div>
+        <el-input v-model="input1" placeholder="Please input">
+          <template #prepend>
+            Http://
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input2" placeholder="Please input">
+          <template #append>
+            .com
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input
+          v-model="input3"
+          placeholder="Please input"
+          class="input-with-select"
+        >
+          <template #prepend>
+            <el-select v-model="select" placeholder="Select" style="width: 115px">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+          <template #append>
+            <el-button :icon="Search" />
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input
+          v-model="input3"
+          placeholder="Please input"
+          class="input-with-select"
+        >
+          <template #prepend>
+            <el-button :icon="Search" />
+          </template>
+          <template #append>
+            <el-select v-model="select" placeholder="Select" style="width: 115px">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+    </Variant>
+    <Variant title="Size">
+      <div class="demo-input-size">
+        <el-input
+          v-model="input1"
+          class="w-50 m-2"
+          size="large"
+          placeholder="Please Input"
+        />
+        <el-input v-model="input2" class="w-50 m-2" placeholder="Please Input" />
+        <el-input
+          v-model="input3"
+          class="w-50 m-2"
+          size="small"
+          placeholder="Please Input"
+        />
+      </div>
+    </Variant>
+    <Variant title="Length limit">
+      <el-input
+        v-model="text"
+        maxlength="10"
+        placeholder="Please input"
+        show-word-limit
+        type="text"
+      />
+      <div style="margin: 20px 0" />
+      <el-input
+        v-model="textarea"
+        maxlength="30"
+        placeholder="Please input"
+        show-word-limit
+        type="textarea"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<style>
+.mt-4{
+  margin-top: 4px;
+}
+.w-50{
+  width: 500px;
+}
+.m-2 {
+  margin: 2px;
+}
+</style>
+
+<docs lang="md">
+## Basic usage
+
+Input usage
+</docs>

From 22ee3ca4c698967f530edec2ad561cf21d1b5511 Mon Sep 17 00:00:00 2001
From: qiang <itaco@qq.com>
Date: Sat, 15 Oct 2022 10:53:32 +0800
Subject: [PATCH 2/3] feat: update variant title

---
 src/components/Form/input.story.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/input.story.vue b/src/components/Form/input.story.vue
index e19d7db..955239b 100644
--- a/src/components/Form/input.story.vue
+++ b/src/components/Form/input.story.vue
@@ -32,7 +32,7 @@ const text = ref('')
         :parser="(value:string) => value.replace(/\$\s?|(,*)/g, '')"
       />
     </Variant>
-    <Variant title="Show Password">
+    <Variant title="Password box">
       <el-input
         v-model="input"
         type="password"
@@ -40,7 +40,7 @@ const text = ref('')
         show-password
       />
     </Variant>
-    <Variant title="Icon">
+    <Variant title="Input with icon">
       <el-input
         v-model="input1"
         class="w-50 m-2"
@@ -91,7 +91,7 @@ const text = ref('')
         placeholder="Please input"
       />
     </Variant>
-    <Variant title="Composite Input">
+    <Variant title="Mixed input">
       <div>
         <el-input v-model="input1" placeholder="Please input">
           <template #prepend>
@@ -143,7 +143,7 @@ const text = ref('')
         </el-input>
       </div>
     </Variant>
-    <Variant title="Size">
+    <Variant title="Sizes">
       <div class="demo-input-size">
         <el-input
           v-model="input1"
@@ -160,7 +160,7 @@ const text = ref('')
         />
       </div>
     </Variant>
-    <Variant title="Length limit">
+    <Variant title="Limit length">
       <el-input
         v-model="text"
         maxlength="10"

From 60e2233db2f637b8cac2eb364598177e4a4b8a85 Mon Sep 17 00:00:00 2001
From: iDestin <itaco@qq.com>
Date: Sun, 16 Oct 2022 16:13:22 +0800
Subject: [PATCH 3/3] feat: add controls

---
 src/components/Form/input.story.vue | 233 ++++++++++++++++++++--------
 1 file changed, 169 insertions(+), 64 deletions(-)

diff --git a/src/components/Form/input.story.vue b/src/components/Form/input.story.vue
index 955239b..01bd582 100644
--- a/src/components/Form/input.story.vue
+++ b/src/components/Form/input.story.vue
@@ -1,32 +1,81 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Calendar, Search } from '@element-plus/icons-vue'
-const input = ref('')
+import type { InputProps } from 'element-plus'
 const input1 = ref('')
 const input2 = ref('')
 const input3 = ref('')
 const input4 = ref('')
+const input5 = ref('')
+const input6 = ref('')
+const input7 = ref('')
+const input8 = ref('')
+const input9 = ref('')
+const input10 = ref('')
+const input11 = ref('')
+const input12 = ref('')
 const textarea = ref('')
 const textarea1 = ref('')
 const textarea2 = ref('')
 const select = ref('')
 const text = ref('')
+const isDisabled = ref(true)
+const isClearable = ref(true)
+const showPassword = ref(true)
+const isAutoSize = ref(true)
+const withIcon = ref('attributes')
+const rows = ref(2)
+const autoSizeConfig = ref({ minRows: 2, maxRows: 4 })
+const size = ref('default')
+const maxlength = ref(10)
+const inputSizeList: Record<'label' & 'value', InputProps['size']>[] = [
+  {
+    label: 'large',
+    value: 'large',
+  },
+  {
+    label: 'default',
+    value: 'default',
+  },
+  {
+    label: 'small',
+    value: 'small',
+  },
+]
+const withIconList: Array<{ label: string; value: string }> = [
+  {
+    label: 'use slot',
+    value: 'slot',
+  },
+  {
+    label: 'use attributes',
+    value: 'attributes',
+  },
+]
+
+const useSlot = computed(() => withIcon.value === 'slot')
 </script>
 
 <template>
-  <Story title="Form/Input">
+  <Story title="Form/Input" :layout="{ type: 'grid', width: 500 }" auto-props-disabled>
     <Variant title="Basic Usage">
-      <el-input v-model="input" placeholder="Please input" />
+      <el-input v-model="input1" placeholder="Please input" />
     </Variant>
     <Variant title="Disabled">
-      <el-input v-model="input" disabled placeholder="Please input" />
+      <el-input v-model="input2" :disabled="isDisabled" placeholder="Please input" />
+      <template #controls>
+        <HstCheckbox v-model="isDisabled" title="Disabled" />
+      </template>
     </Variant>
     <Variant title="Clearable">
-      <el-input v-model="input" clearable placeholder="Please input" />
+      <el-input v-model="input3" :clearable="isClearable" placeholder="Please input" />
+      <template #controls>
+        <HstCheckbox v-model="isClearable" title="Clearable" />
+      </template>
     </Variant>
     <Variant title="Formatter">
       <el-input
-        v-model="input"
+        v-model="input4"
         placeholder="Please input"
         :formatter="(value:string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
         :parser="(value:string) => value.replace(/\$\s?|(,*)/g, '')"
@@ -34,47 +83,54 @@ const text = ref('')
     </Variant>
     <Variant title="Password box">
       <el-input
-        v-model="input"
+        v-model="input5"
         type="password"
         placeholder="Please input password"
-        show-password
+        :show-password="showPassword"
       />
+      <template #controls>
+        <HstCheckbox v-model="showPassword" title="ShowPassword" />
+      </template>
     </Variant>
     <Variant title="Input with icon">
-      <el-input
-        v-model="input1"
-        class="w-50 m-2"
-        placeholder="Pick a date"
-        :suffix-icon="Calendar"
-      />
-      <el-input
-        v-model="input2"
-        class="w-50 m-2"
-        placeholder="Type something"
-        :prefix-icon="Search"
-      />
-      <el-input v-model="input3" class="w-50 m-2" placeholder="Pick a date">
-        <template #suffix>
-          <el-icon class="el-input__icon">
-            <calendar />
-          </el-icon>
-        </template>
-      </el-input>
-      <el-input v-model="input4" class="w-50 m-2" placeholder="Type something">
-        <template #prefix>
-          <el-icon class="el-input__icon">
-            <search />
-          </el-icon>
-        </template>
-      </el-input>
+      <template v-if="useSlot">
+        <el-input v-model="input6" placeholder="Pick a date">
+          <template #suffix>
+            <el-icon class="el-input__icon">
+              <calendar />
+            </el-icon>
+          </template>
+        </el-input>
+        <el-input v-model="input7" class="mt-4" placeholder="Type something">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <search />
+            </el-icon>
+          </template>
+        </el-input>
+      </template>
+      <template v-else>
+        <el-input v-model="input6" placeholder="Pick a date" :suffix-icon="Calendar" />
+        <el-input v-model="input7" class="mt-4" placeholder="Type something" :prefix-icon="Search" />
+      </template>
+      <template #controls>
+        <HstSelect
+          v-model="withIcon"
+          title="With Icon"
+          :options="withIconList"
+        />
+      </template>
     </Variant>
     <Variant title="Textarea">
       <el-input
         v-model="textarea"
-        :rows="2"
+        :rows="rows"
         type="textarea"
         placeholder="Please input"
       />
+      <template #controls>
+        <HstNumber v-model="rows" title="Rows" />
+      </template>
     </Variant>
     <Variant title="Autosize Textarea">
       <el-input
@@ -86,21 +142,26 @@ const text = ref('')
       <div style="margin: 20px 0" />
       <el-input
         v-model="textarea2"
-        :autosize="{ minRows: 2, maxRows: 4 }"
+        :autosize="autoSizeConfig"
         type="textarea"
         placeholder="Please input"
       />
+      <template #controls>
+        <HstCheckbox v-model="isAutoSize" title="AutoSize" />
+        <HstNumber v-model="autoSizeConfig.minRows" title="minRows" />
+        <HstNumber v-model="autoSizeConfig.maxRows" title="maxRows" />
+      </template>
     </Variant>
     <Variant title="Mixed input">
       <div>
-        <el-input v-model="input1" placeholder="Please input">
+        <el-input v-model="input8" placeholder="Please input">
           <template #prepend>
             Http://
           </template>
         </el-input>
       </div>
       <div class="mt-4">
-        <el-input v-model="input2" placeholder="Please input">
+        <el-input v-model="input9" placeholder="Please input">
           <template #append>
             .com
           </template>
@@ -108,7 +169,7 @@ const text = ref('')
       </div>
       <div class="mt-4">
         <el-input
-          v-model="input3"
+          v-model="input10"
           placeholder="Please input"
           class="input-with-select"
         >
@@ -126,7 +187,7 @@ const text = ref('')
       </div>
       <div class="mt-4">
         <el-input
-          v-model="input3"
+          v-model="input11"
           placeholder="Please input"
           class="input-with-select"
         >
@@ -144,26 +205,23 @@ const text = ref('')
       </div>
     </Variant>
     <Variant title="Sizes">
-      <div class="demo-input-size">
-        <el-input
-          v-model="input1"
-          class="w-50 m-2"
-          size="large"
-          placeholder="Please Input"
-        />
-        <el-input v-model="input2" class="w-50 m-2" placeholder="Please Input" />
-        <el-input
-          v-model="input3"
-          class="w-50 m-2"
-          size="small"
-          placeholder="Please Input"
+      <el-input
+        v-model="input12"
+        :size="size"
+        placeholder="Please Input"
+      />
+      <template #controls>
+        <HstSelect
+          v-model="size"
+          title="Size"
+          :options="inputSizeList"
         />
-      </div>
+      </template>
     </Variant>
     <Variant title="Limit length">
       <el-input
         v-model="text"
-        maxlength="10"
+        :maxlength="maxlength"
         placeholder="Please input"
         show-word-limit
         type="text"
@@ -171,11 +229,14 @@ const text = ref('')
       <div style="margin: 20px 0" />
       <el-input
         v-model="textarea"
-        maxlength="30"
+        :maxlength="maxlength"
         placeholder="Please input"
         show-word-limit
         type="textarea"
       />
+      <template #controls>
+        <HstNumber v-model="maxlength" title="Limit length" />
+      </template>
     </Variant>
   </Story>
 </template>
@@ -184,16 +245,60 @@ const text = ref('')
 .mt-4{
   margin-top: 4px;
 }
-.w-50{
-  width: 500px;
-}
-.m-2 {
-  margin: 2px;
-}
 </style>
 
 <docs lang="md">
 ## Basic usage
 
-Input usage
+Input is a controlled component, it **always shows Vue binding value**.
+
+Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change.
+
+Do not support `v-model` modifiers.
+
+## Disabled
+
+Disable the Input with the `disabled` attribute.
+
+## Clearable
+
+Make the Input clearable with the `clearable` attribute.
+
+## Formatter
+
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
+
+## Password box
+
+Make a toggle-able password Input with the `show-password` attribute.
+
+## Input with icon
+
+Add an icon to indicate input type.
+
+To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
+
+## Textarea
+
+Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
+
+Control the height by setting the `rows` prop.
+
+## Autosize Textarea
+
+Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
+
+## Mixed input
+
+Prepend or append an element, generally a label or a button.
+
+Use `slot` to distribute elements that prepend or append to Input.
+
+## Sizes
+
+Add `size` attribute to change the size of Input. In addition to the default size, there are two other options: `large`, `small`.
+
+## Limit length
+
+`maxlength` and `minlength` attributes of input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
 </docs>