feat(time-picker): add input-readonly prop (#1140)

* feat(time-picker): add inputReadonly prop

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-cascader` show `Empty` component when `options` prop is empty, closes [#1092](https://github.com/TuSimple/naive-ui/issues/1092).
 - `n-tree` add `check-strategy` prop.
 - `n-date-picker` add `input-readonly` prop, closes [#1120](https://github.com/TuSimple/naive-ui/issues/1120).
+- `n-time-picker` add `input-readonly` prop, closes [#1120](https://github.com/TuSimple/naive-ui/issues/1120).
 
 ## 2.18.1 (2021-09-08)
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,7 @@
 - `n-cascader` 当 `options` 为空时显示 `Empty` 组件，关闭 [#1092](https://github.com/TuSimple/naive-ui/issues/1092)
 - `n-tree` 增加 `check-strategy` 文档属性
 - `n-date-picker` 新增 `input-readonly` 属性，关闭 [#1120](https://github.com/TuSimple/naive-ui/issues/1120)
+- `n-time-picker` 新增 `input-readonly` 属性，关闭 [#1120](https://github.com/TuSimple/naive-ui/issues/1120)
 
 ## 2.18.1 (2021-09-08)
 

src/time-picker/demos/enUS/index.demo-entry.md

@@ -25,6 +25,7 @@ actions
 | hours | `number \| number[]` | `undefined` | The hours to be displayed. If it's a number, it'll be viewed as step. |
 | minutes | `number \| number[]` | `undefined` | The minutes to be displayed. If it's a number, it'll be viewed as step. |
 | seconds | `number \| number[]` | `undefined` | The seconds to be displayed. If it's a number, it'll be viewed as step. |
+| input-readonly | `boolean` | `false` | Set the `readonly` attribute of the input (avoids virtual keyboard on touch devices). |
 | is-hour-disabled | `(hour: number) => boolean` | `() => false` | Callback function for disabling hours. |
 | is-minute-disabled | `(minute: number, hour: number) => boolean` | `() => false` | Callback function for disabling minutes. |
 | is-second-disabled | `(second: number, minute: number, hour: number) => boolean` | `() => false` | Callback function for disabling seconds. |

src/time-picker/demos/zhCN/index.demo-entry.md

@@ -25,6 +25,7 @@ actions
 | hours | `number \| number[]` | `undefined` | 通过数组指定显示的小时。当值为 `number` 时，将被当做时间步进处理 |
 | minutes | `number \| number[]` | `undefined` | 通过数组指定显示的分钟。当值为 `number` 时，将被当做时间步进处理 |
 | seconds | `number \| number[]` | `undefined` | 通过数组指定显示的秒。当值为 `number` 时，将被当做时间步进处理 |
+| input-readonly | `boolean` | `false` | 设置输入框为只读（避免在移动设备上打开虚拟键盘） |
 | is-hour-disabled | `(hour: number) => boolean` | `() => false` | 用于禁用小时的回调函数 |
 | is-minute-disabled | `(minute: number, hour: number) => boolean` | `() => false` | 用于禁用分钟的回调函数 |
 | is-second-disabled | `(second: number, minute: number, hour: number) => boolean` | `() => false` | 用于禁用秒钟的回调函数 |

src/time-picker/src/TimePicker.tsx

@@ -98,6 +98,7 @@ const timePickerProps = {
   size: String as PropType<Size>,
   isMinuteDisabled: Function as PropType<IsMinuteDisabled>,
   isSecondDisabled: Function as PropType<IsSecondDisabled>,
+  inputReadonly: Boolean,
   clearable: Boolean,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
@@ -665,6 +666,7 @@ export default defineComponent({
                       onClear={this.handleTimeInputClear}
                       internalDeactivateOnEnter
                       internalForceFocus={this.active}
+                      readonly={this.inputReadonly || this.mergedDisabled}
                       onClick={this.handleTriggerClick}
                     >
                       {this.showIcon

src/time-picker/tests/TimePicker.spec.ts

@@ -5,4 +5,13 @@ describe('n-time-picker', () => {
   it('should work with import on demand', () => {
     mount(NTimePicker)
   })
+
+  it('should work with `inputReadonly` prop', async () => {
+    const wrapper = mount(NTimePicker)
+    expect(wrapper.find('input').attributes('readonly')).not.toBe('')
+    await wrapper.setProps({
+      inputReadonly: true
+    })
+    expect(wrapper.find('input').attributes('readonly')).toBe('')
+  })
 })