feat(input): [input] add memorySpace props which can set max number of addMemory (#1188)

* feat(input): [input] add memorySpace props which can set max number of addMemory

* feat(input): [input] add memorySpace props which can set max number of addMemory 2

examples/sites/demos/pc/app/input/method-addMemory-composition-api.vue

@@ -5,6 +5,7 @@
       v-model="input"
       name="textMemory"
       placeholder="Please input"
+      :memory-space="3"
       @change="addMemory"
     ></tiny-input>
   </div>

examples/sites/demos/pc/app/input/method-addMemory.spec.ts

@@ -17,4 +17,15 @@ test('[Input]method-addMemory', async ({ page }) => {
   await input.fill('')
   const box = await page.locator('.tiny-modal__body').getByText('1234')
   await expect(box).toBeVisible()
+
+  // memory-space = 3
+  await input.fill('2222')
+  await input.blur()
+  await input.fill('3333')
+  await input.blur()
+  await input.fill('4444')
+  await input.blur()
+  await input.fill('')
+  await input.click()
+  await expect(page.locator('.tiny-tall-storage .tiny-storage-item')).toHaveCount(3)
 })

examples/sites/demos/pc/app/input/method-addMemory.vue

@@ -5,6 +5,7 @@
       v-model="input"
       name="textMemory"
       placeholder="Please input"
+      :memory-space="3"
       @change="addMemory"
     ></tiny-input>
   </div>

examples/sites/demos/pc/app/input/webdoc/input.js

@@ -295,6 +295,16 @@ export default {
           },
           'demoId': 'native'
         },
+        {
+          'name': 'memory-space',
+          'type': 'number',
+          'defaultValue': '5',
+          'desc': {
+            'zh-CN': '设置 addMemory 方法中，最大能保存条目的数量',
+            'en-US': 'Sets the maximum number of entries that can be saved in the addMemory method'
+          },
+          'demoId': 'method-addMemory'
+        },
         {
           'name': 'maxlength',
           'type': 'number',

packages/renderless/src/tall-storage/index.ts

@@ -63,8 +63,7 @@ export const keydown =
     }
   }
 
-const sortDeduplication = (array) => {
+const sortDeduplication = (array, memorySpace = 5) => {
-  const memorySpace = 5 // 一个name的记忆量
   const length = array.length
   let newArray = []
   let fillterObj = {}
@@ -106,7 +105,7 @@ const isJSONobject = (string, type) => {
   }
 }
 
-const setLocalStorageage = (name, value) => {
+const setLocalStorageage = (name, value, memorySpace = 5) => {
   if (typeof value === 'string') {
     const oldValue = localStorage.getItem(name)
     const isArray = isJSONobject(oldValue, Array)
@@ -116,7 +115,7 @@ const setLocalStorageage = (name, value) => {
       let oldArray = JSON.parse(localStorage.getItem(name))
 
       oldArray.unshift(value)
-      oldArray = sortDeduplication(oldArray)
+      oldArray = sortDeduplication(oldArray, memorySpace)
       newValue = JSON.stringify(oldArray)
     } else if (oldValue === null || oldValue === value) {
       newValue = value
@@ -130,7 +129,7 @@ const setLocalStorageage = (name, value) => {
 
 export const addMemory = (props) => (value) => {
   if (props.name && value) {
-    setLocalStorageage(props.name, value)
+    setLocalStorageage(props.name, value, props.memorySpace)
   }
 }
 

packages/theme/src/tall-storage/index.less

@@ -22,7 +22,6 @@
   .component-css-vars-tall-storage();
 
   position: relative;
-  margin-top: 2px;
 
   .@{storage-list-style-prefix-cls} {
     position: absolute;
@@ -36,6 +35,8 @@
     .@{storage-list-prefix-cls} {
       padding: 0;
       list-style: none;
+      overflow-y: auto;
+      max-height: calc(var(--ti-tall-storage-item-height) * 5);
 
       .@{storage-item-prefix-cls} {
         height: var(--ti-tall-storage-item-height);

packages/vue/src/input/src/index.ts

@@ -60,6 +60,10 @@ export const inputProps = {
     type: String,
     default: 'text'
   },
+  memorySpace: {
+    type: Number,
+    default: 5
+  },
   vertical: {
     type: Boolean,
     default: false

packages/vue/src/input/src/pc.vue

@@ -247,6 +247,7 @@ export default defineComponent({
     'prefixIcon',
     'autocomplete',
     'showPassword',
+    'memorySpace',
     'validateEvent',
     'showWordLimit',
     'displayOnly',