From 0ca06b14973dd1cde1f3f40dbe7f17ba5e9e0b85 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Fri, 3 Jan 2025 00:25:12 -0800
Subject: [PATCH 1/3] fix(time-select): [time-select] Fix and optimize issues
 with invalid input data and backfill data, and add input filtering
 functionality

---
 .../app/time-select/range-placeholder.spec.ts | 10 +++---
 packages/renderless/src/picker/index.ts       | 15 +++++++++
 packages/renderless/src/time-panel/index.ts   | 11 +++++--
 packages/renderless/src/time-panel/vue.ts     |  2 ++
 .../theme-saas/src/time-select/index.less     | 20 ++++++++++++
 packages/theme/src/time-select/index.less     | 12 +++++--
 packages/vue/src/time-panel/src/pc.vue        | 31 ++++++++++---------
 7 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/examples/sites/demos/pc/app/time-select/range-placeholder.spec.ts b/examples/sites/demos/pc/app/time-select/range-placeholder.spec.ts
index c32cb048cf..16cef7f798 100644
--- a/examples/sites/demos/pc/app/time-select/range-placeholder.spec.ts
+++ b/examples/sites/demos/pc/app/time-select/range-placeholder.spec.ts
@@ -8,18 +8,18 @@ test('固定时间范围', async ({ page }) => {
   await timeInput.click()
   // options的第一条是options.first()，时间是08:30；最后一条（最大时间）是options.nth(43)，时间是18：30
   await expect(options.first()).toContainText('08:30')
-  await expect(options.nth(43)).toContainText('18:30')
+  await expect(options.nth(44)).toContainText('18:30')
   // 起始时间选择10:00，稍后验证结束时间10:00是否disabled。
-  options.nth(9).click()
+  options.nth(10).click()
   await expect(page.locator('.tiny-input-suffix .tiny-input__inner').first()).toHaveValue('10:00')
 
   const timeEnd = page.getByRole('textbox', { name: '结束时间' })
   const endOptions = page.locator('.tiny-picker-panel').nth(1).locator('div')
   await timeEnd.click()
   await expect(endOptions.first()).toContainText('08:30')
-  await expect(endOptions.nth(43)).toContainText('18:30')
+  await expect(endOptions.nth(44)).toContainText('18:30')
   // 验证结束时间10:00是否disabled
-  await expect(endOptions.nth(9)).toHaveClass('tiny-time-select__item disabled')
-  endOptions.nth(10).click()
+  await expect(endOptions.nth(10)).toHaveClass('tiny-time-select__item disabled')
+  endOptions.nth(11).click()
   await expect(page.locator('.tiny-input-suffix .tiny-input__inner').last()).toHaveValue('10:15')
 })
diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts
index 05a3ca4e47..65f5f41ac4 100644
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@@ -544,6 +544,12 @@ export const handleInput =
       const val = event.target.value
       state.userInput = val
     }
+
+    // time-selelt 组件中，输入值开启过滤逻辑，将值传递给生成选项数据的计算属性中生成过滤后的数据面板
+    if (state.type === 'time-select') {
+      state.picker.state.isFilter = true
+      state.picker.state.filterVal = state.userInput
+    }
   }
 
 export const formatInputValue =
@@ -986,6 +992,11 @@ export const handleKeydown =
     // Enter
     if (keyCode === 13) {
       if (state.userInput === '' || api.isValidValue(api.parseString(state.displayValue))) {
+        // time-select组件中，对输入的数据进行校验，如果有效则取默认过滤后数据的第一个。
+        if (state.type === 'time-select') {
+          state.userInput = /^(0[0-9]|1[0-9]|2[0-4])$/.test(state.userInput) ? state.picker.state.items[0]?.value : ''
+        }
+
         api.handleChange()
         state.pickerVisible = state.picker.state.visible = false
         api.blur()
@@ -1010,6 +1021,10 @@ export const hidePicker =
   ({ destroyPopper, state }) =>
   () => {
     if (state.picker) {
+      // time-select组件中，选中面板关闭则清除过滤，保证下次面板打开时原始items数据。
+      if (state.type === 'time-select') {
+        state.picker.state.isFilter = false
+      }
       state.picker.resetView && state.picker.resetView()
       state.pickerVisible = state.picker.visible = state.picker.state.visible = false
       destroyPopper()
diff --git a/packages/renderless/src/time-panel/index.ts b/packages/renderless/src/time-panel/index.ts
index 48c5a3f4e9..ec8a4f830e 100644
--- a/packages/renderless/src/time-panel/index.ts
+++ b/packages/renderless/src/time-panel/index.ts
@@ -106,8 +106,15 @@ export const computItems =
         current = api.nextTime(current, step)
       }
     }
-
-    return result
+    // 生成选项数据时若开启过滤，则进行选项数据过滤，否则返回原始选项数据
+    if (state.isFilter) {
+      const newItems = result.filter((item) => {
+        return item.value.includes(state.filterVal)
+      })
+      return newItems
+    } else {
+      return result
+    }
   }
 
 export const handleClick = (api) => (item) => !item.disabled && api.emitPick({ value: item.value })
diff --git a/packages/renderless/src/time-panel/vue.ts b/packages/renderless/src/time-panel/vue.ts
index d53164550c..bb4e4b8465 100644
--- a/packages/renderless/src/time-panel/vue.ts
+++ b/packages/renderless/src/time-panel/vue.ts
@@ -47,6 +47,8 @@ const initState = ({ reactive, computed, api }) => {
     maxTime: '',
     width: 0,
     lastEmitValue: '',
+    isFilter: false,
+    filterVal: '',
     items: computed(() => api.computItems()),
     default: computed(() => state.defaultValue || state.defaultTime || ''),
     value: computed({
diff --git a/packages/theme-saas/src/time-select/index.less b/packages/theme-saas/src/time-select/index.less
index 593774b44d..fe741ea015 100644
--- a/packages/theme-saas/src/time-select/index.less
+++ b/packages/theme-saas/src/time-select/index.less
@@ -1,8 +1,20 @@
 @import '../custom.less';
 
 @time-select-prefix-cls: ~'@{css-prefix}time-select';
+@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
+@time-select-scrollbar-cls: ~'@{css-prefix}scrollbar';
 
 .@{time-select-prefix-cls} {
+
+  &.noMatchHeight {
+    height: 36px;
+  }
+  height: 242px;
+  padding-top: 8px;
+  .@{time-select-scrollbar-cls} {
+    height: 100%;
+  }
+
   .@{scrollbar-prefix-cls}__wrap {
     @apply p-0;
     @apply !mb-0;
@@ -37,4 +49,12 @@
       }
     }
   }
+
+  .@{picker-panel-prefix-cls} {
+    &__content {
+      .noMatch {
+        text-align: center;
+      }
+    }
+  }
 }
diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less
index 09503075b3..edaf0a52ad 100644
--- a/packages/theme/src/time-select/index.less
+++ b/packages/theme/src/time-select/index.less
@@ -19,10 +19,14 @@
 
 .@{time-select-prefix-cls} {
   .inject-TimeSelect-vars();
-  
+
+  &.noMatchHeight {
+    height: 36px;
+  }
   height: 242px;
+  padding-top: var(--tv-TimeSelect-content-padding-top);
   .@{time-select-scrollbar-cls} {
-    height: 242px;
+    height: 100%;
     .@{css-prefix}scrollbar__wrap {
       max-height: unset;
     }
@@ -54,7 +58,9 @@
     &__content {
       padding-left: 0;
       padding-right: 0;
-      padding-top: var(--tv-TimeSelect-content-padding-top);
+      .noMatch {
+        text-align: center;
+      }
     }
   }
 }
diff --git a/packages/vue/src/time-panel/src/pc.vue b/packages/vue/src/time-panel/src/pc.vue
index 91aa7bfdbc..f6a165f378 100644
--- a/packages/vue/src/time-panel/src/pc.vue
+++ b/packages/vue/src/time-panel/src/pc.vue
@@ -15,24 +15,27 @@
       ref="popper"
       v-show="state.visible"
       :style="{ width: state.width + 'px' }"
-      :class="state.popperClass"
+      :class="[state.popperClass, { noMatchHeight: !state.items.length }]"
       class="tiny-picker-panel tiny-time-select tiny-popper"
     >
       <tiny-scrollbar noresize wrap-class="tiny-picker-panel__content">
-        <div
-          class="tiny-time-select__item"
-          v-for="item in state.items"
-          :class="{
-            selected: state.value === item.value,
-            disabled: item.disabled,
-            default: item.value === state.default
-          }"
-          :disabled="item.disabled"
-          :key="item.value"
-          @click="handleClick(item)"
-        >
-          {{ item.value }}
+        <div v-if="state.items.length">
+          <div
+            class="tiny-time-select__item"
+            v-for="item in state.items"
+            :class="{
+              selected: state.value === item.value,
+              disabled: item.disabled,
+              default: item.value === state.default
+            }"
+            :disabled="item.disabled"
+            :key="item.value"
+            @click="handleClick(item)"
+          >
+            {{ item.value }}
+          </div>
         </div>
+        <div v-else class="noMatch">{{ $t('ui.select.noMatch') }}</div>
       </tiny-scrollbar>
     </div>
   </transition>

From 19092aea3212ebb27e2a355bbee00e9e2e55824f Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 6 Jan 2025 03:13:11 -0800
Subject: [PATCH 2/3] feat(time-select): [time-select] Modify monitoring
 opinions

---
 packages/renderless/src/picker/index.ts        | 2 +-
 packages/theme-saas/src/time-select/index.less | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts
index 65f5f41ac4..b30e676704 100644
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@@ -994,7 +994,7 @@ export const handleKeydown =
       if (state.userInput === '' || api.isValidValue(api.parseString(state.displayValue))) {
         // time-select组件中，对输入的数据进行校验，如果有效则取默认过滤后数据的第一个。
         if (state.type === 'time-select') {
-          state.userInput = /^(0[0-9]|1[0-9]|2[0-4])$/.test(state.userInput) ? state.picker.state.items[0]?.value : ''
+          state.userInput = state.picker.state.items.length ? state.picker.state.items[0].value : ''
         }
 
         api.handleChange()
diff --git a/packages/theme-saas/src/time-select/index.less b/packages/theme-saas/src/time-select/index.less
index fe741ea015..fa9ef951ad 100644
--- a/packages/theme-saas/src/time-select/index.less
+++ b/packages/theme-saas/src/time-select/index.less
@@ -9,8 +9,9 @@
   &.noMatchHeight {
     height: 36px;
   }
-  height: 242px;
-  padding-top: 8px;
+  height: 252px;
+  padding-top: 6px;
+  border-radius: 8px;
   .@{time-select-scrollbar-cls} {
     height: 100%;
   }

From 80aa126a468db6bbef422993e810b86a3121c461 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 6 Jan 2025 03:29:16 -0800
Subject: [PATCH 3/3] fix(time-select): [time-select] Modify monitoring
 opinions

---
 packages/theme-saas/src/time-select/index.less | 4 ++--
 packages/theme/src/time-select/index.less      | 4 ++--
 packages/vue/src/time-panel/src/pc.vue         | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/theme-saas/src/time-select/index.less b/packages/theme-saas/src/time-select/index.less
index fa9ef951ad..02a78d6704 100644
--- a/packages/theme-saas/src/time-select/index.less
+++ b/packages/theme-saas/src/time-select/index.less
@@ -6,7 +6,7 @@
 
 .@{time-select-prefix-cls} {
 
-  &.noMatchHeight {
+  &.not-match-height {
     height: 36px;
   }
   height: 252px;
@@ -53,7 +53,7 @@
 
   .@{picker-panel-prefix-cls} {
     &__content {
-      .noMatch {
+      .no-match {
         text-align: center;
       }
     }
diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less
index edaf0a52ad..dd2f425834 100644
--- a/packages/theme/src/time-select/index.less
+++ b/packages/theme/src/time-select/index.less
@@ -20,7 +20,7 @@
 .@{time-select-prefix-cls} {
   .inject-TimeSelect-vars();
 
-  &.noMatchHeight {
+  &.not-match-height {
     height: 36px;
   }
   height: 242px;
@@ -58,7 +58,7 @@
     &__content {
       padding-left: 0;
       padding-right: 0;
-      .noMatch {
+      .no-match {
         text-align: center;
       }
     }
diff --git a/packages/vue/src/time-panel/src/pc.vue b/packages/vue/src/time-panel/src/pc.vue
index f6a165f378..ea9b902c4b 100644
--- a/packages/vue/src/time-panel/src/pc.vue
+++ b/packages/vue/src/time-panel/src/pc.vue
@@ -15,7 +15,7 @@
       ref="popper"
       v-show="state.visible"
       :style="{ width: state.width + 'px' }"
-      :class="[state.popperClass, { noMatchHeight: !state.items.length }]"
+      :class="[state.popperClass, { 'not-match-height': !state.items.length }]"
       class="tiny-picker-panel tiny-time-select tiny-popper"
     >
       <tiny-scrollbar noresize wrap-class="tiny-picker-panel__content">
@@ -35,7 +35,7 @@
             {{ item.value }}
           </div>
         </div>
-        <div v-else class="noMatch">{{ $t('ui.select.noMatch') }}</div>
+        <div v-else class="no-match">{{ $t('ui.select.noMatch') }}</div>
       </tiny-scrollbar>
     </div>
   </transition>