fix(time-select): fix editable prop and add disabled prop (#1899)

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

packages/time-select/__tests__/time-select.spec.ts

@@ -109,6 +109,40 @@ describe('TimeSelect', () => {
     expect(input.element.value).toBe('11:00')
   })
 
+  it('set disabled', async () => {
+    const wrapper = _mount(
+      `<el-time-select v-model="value" :disabled="disabled" />`,
+      () => ({
+        value: '10:00',
+        disabled: false,
+      }),
+    )
+    const vm = wrapper.vm as any
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    expect(select.props().disabled).toBe(false)
+
+    vm.disabled = true
+    await nextTick()
+    expect(select.props().disabled).toBe(true)
+  })
+
+  it('set editable', async () => {
+    const wrapper = _mount(
+      `<el-time-select v-model="value" :editable="editable" />`,
+      () => ({
+        value: '10:00',
+        editable: false,
+      }),
+    )
+    const vm = wrapper.vm as any
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    expect(select.props().filterable).toBe(false)
+
+    vm.editable = true
+    await nextTick()
+    expect(select.props().filterable).toBe(true)
+  })
+
   it('ref focus', async () => {
     _mount(`<el-time-select ref="input" />`, () => ({}), {
       mounted() {

packages/time-select/src/time-select.vue

@@ -2,17 +2,17 @@
   <el-select
     ref="select"
     :model-value="value"
-    :disabled="!editable"
+    :disabled="disabled"
     :clearable="clearable"
     :clear-icon="clearIcon"
     :size="size"
     :placeholder="placeholder"
     default-first-option
-    filterable
-    @update:model-value="(event) => $emit('update:modelValue', event)"
-    @change="(event) => $emit('change', event)"
-    @blur="(event) => $emit('blur', event)"
-    @focus="(event) => $emit('focus', event)"
+    :filterable="editable"
+    @update:model-value="event => $emit('update:modelValue', event)"
+    @change="event => $emit('change', event)"
+    @blur="event => $emit('blur', event)"
+    @focus="event => $emit('focus', event)"
   >
     <el-option
       v-for="item in items"
@@ -89,6 +89,10 @@ export default defineComponent({
   },
   props: {
     modelValue: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     editable: {
       type: Boolean,
       default: true,
@@ -100,7 +104,8 @@ export default defineComponent({
     size: {
       type: String,
       default: '',
-      validator: (value: string) => !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,
+      validator: (value: string) =>
+        !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,
     },
     placeholder: {
       type: String,

website/docs/en-US/time-select.md

@@ -70,6 +70,7 @@ If start time is picked at first, then the end time will change accordingly.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | binding value | string | — | — |
+| disabled | whether TimeSelect is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |

website/docs/es/time-select.md

@@ -69,6 +69,7 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
 | model-value / v-model    | valor enlazado                           | string    | —                                        | —                    |
+| disabled | si el TimeSelect se encuentra deshabilitado | boolean | — | false |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
 | clearable         | si mostrar el botón de borrado           | boolean                                  | —                                        | true                 |
 | size              | tamaño del input                         | string                                   | medium / small / mini                    | —                    |

website/docs/fr-FR/time-select.md

@@ -70,6 +70,7 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | La valeur liée. | string | — | — |
+| disabled | Si TimeSelect est désactivé. | boolean | — | false |
 | editable | Si le champ d'input est éditable. | boolean | — | true |
 | clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
 | size | Taille du champ. | string | medium / small / mini | — |

website/docs/jp/time-select.md

@@ -69,6 +69,7 @@
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | バインディング値 | — | — |
+| disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
 | editable | 入力が編集可能かどうか | boolean | — | true |
 | clearable | クリアボタンを表示するかどうか | boolean | — | true |
 | size | 入力のサイズ | string | medium / small / mini | — |

website/docs/zh-CN/time-select.md

@@ -69,6 +69,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | 绑定值 | string | — | — |
+| disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | medium / small / mini  | — |