From bac64b48010fccd9ddb16d504bcd2938f42a3d2e Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Sun, 4 Jun 2023 12:58:31 +0800
Subject: [PATCH] docs(components): [time-picker] use new display tag (#12691)

* docs(components): [time-picker] use new display tag

* docs(components): [time-picker] update default of attributes
---
 docs/en-US/component/time-picker.md           | 12 ++---
 .../time-picker/src/common/picker.vue         | 48 ++++++++++++-------
 .../src/time-picker-com/panel-time-range.vue  | 31 ++++++------
 3 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md
index 428404261f..4def6fb67b 100644
--- a/docs/en-US/component/time-picker.md
+++ b/docs/en-US/component/time-picker.md
@@ -49,23 +49,23 @@ time-picker/range
 
 | Name                  | Description                                              | Type                                                                                            | Default     |
 | --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
-| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | —           |
+| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | ''          |
 | readonly              | whether TimePicker is read only                          | ^[boolean]                                                                                      | false       |
 | disabled              | whether TimePicker is disabled                           | ^[boolean]                                                                                      | false       |
 | editable              | whether the input is editable                            | ^[boolean]                                                                                      | true        |
 | clearable             | whether to show clear button                             | ^[boolean]                                                                                      | true        |
 | size                  | size of Input                                            | ^[enum]`'large' \| 'default' \| 'small'`                                                        | —           |
-| placeholder           | placeholder in non-range mode                            | ^[string]                                                                                       | —           |
+| placeholder           | placeholder in non-range mode                            | ^[string]                                                                                       | ''          |
 | start-placeholder     | placeholder for the start time in range mode             | ^[string]                                                                                       | —           |
 | end-placeholder       | placeholder for the end time in range mode               | ^[string]                                                                                       | —           |
 | is-range              | whether to pick a time range                             | ^[boolean]                                                                                      | false       |
 | arrow-control         | whether to pick time using arrow buttons                 | ^[boolean]                                                                                      | false       |
-| popper-class          | custom class name for TimePicker's dropdown              | ^[string]                                                                                       | —           |
+| popper-class          | custom class name for TimePicker's dropdown              | ^[string]                                                                                       | ''          |
 | range-separator       | range separator                                          | ^[string]                                                                                       | '-'         |
 | format                | format of the displayed value in the input box           | ^[string] see [date formats](/en-US/component/date-picker#date-formats)                         | —           |
-| default-value         | optional, default date of the calendar                   | ^[Date] / ^[array]`[Date, Date]`                                                                | —           |
-| id                    | same as `id` in native input                             | ^[string] / ^[array]`[string, string]`                                                          | —           |
-| name                  | same as `name` in native input                           | ^[string]                                                                                       | —           |
+| default-value         | optional, default date of the calendar                   | ^[Date] / ^[object]`[Date, Date]`                                                               | —           |
+| id                    | same as `id` in native input                             | ^[string] / ^[object]`[string, string]`                                                         | —           |
+| name                  | same as `name` in native input                           | ^[string]                                                                                       | ''          |
 | label ^(a11y)         | same as `aria-label` in native input                     | ^[string]                                                                                       | —           |
 | prefix-icon           | Custom prefix icon component                             | ^[string] / ^[Component]                                                                        | Clock       |
 | clear-icon            | Custom clear icon component                              | ^[string] / ^[Component]                                                                        | CircleClose |
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index bda7a76de4..d1a6c94ae9 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -74,16 +74,7 @@
       <div
         v-else
         ref="inputRef"
-        :class="[
-          nsDate.b('editor'),
-          nsDate.bm('editor', type),
-          nsInput.e('wrapper'),
-          nsDate.is('disabled', pickerDisabled),
-          nsDate.is('active', pickerVisible),
-          nsRange.b('editor'),
-          pickerSize ? nsRange.bm('editor', pickerSize) : '',
-          $attrs.class,
-        ]"
+        :class="rangeInputKls"
         :style="($attrs.style as any)"
         @click="handleFocusInput"
         @mouseenter="onMouseEnter"
@@ -134,13 +125,7 @@
         />
         <el-icon
           v-if="clearIcon"
-          :class="[
-            nsInput.e('icon'),
-            nsRange.e('close-icon'),
-            {
-              [nsRange.e('close-icon--hidden')]: !showClose,
-            },
-          ]"
+          :class="clearIconKls"
           @click="onClearIconClick"
         >
           <component :is="clearIcon" />
@@ -168,7 +153,16 @@
   </el-tooltip>
 </template>
 <script lang="ts" setup>
-import { computed, inject, nextTick, provide, ref, unref, watch } from 'vue'
+import {
+  computed,
+  inject,
+  nextTick,
+  provide,
+  ref,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue'
 import { isEqual } from 'lodash-unified'
 import { onClickOutside } from '@vueuse/core'
 import { useLocale, useNamespace } from '@element-plus/hooks'
@@ -213,6 +207,7 @@ const emit = defineEmits([
   'visible-change',
   'keydown',
 ])
+const attrs = useAttrs()
 
 const { lang } = useLocale()
 
@@ -232,6 +227,23 @@ const valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)
 let hasJustTabExitedInput = false
 let ignoreFocusEvent = false
 
+const rangeInputKls = computed(() => [
+  nsDate.b('editor'),
+  nsDate.bm('editor', props.type),
+  nsInput.e('wrapper'),
+  nsDate.is('disabled', pickerDisabled.value),
+  nsDate.is('active', pickerVisible.value),
+  nsRange.b('editor'),
+  pickerSize ? nsRange.bm('editor', pickerSize.value) : '',
+  attrs.class,
+])
+
+const clearIconKls = computed(() => [
+  nsInput.e('icon'),
+  nsRange.e('close-icon'),
+  !showClose.value ? nsRange.e('close-icon--hidden') : '',
+])
+
 watch(pickerVisible, (val) => {
   if (!val) {
     userInput.value = null
diff --git a/packages/components/time-picker/src/time-picker-com/panel-time-range.vue b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
index 21d275ecbb..452f4eedff 100644
--- a/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
+++ b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue
@@ -8,14 +8,7 @@
         <div :class="nsTime.be('range-picker', 'header')">
           {{ t('el.datepicker.startTime') }}
         </div>
-        <div
-          :class="[
-            nsTime.be('range-picker', 'body'),
-            nsTime.be('panel', 'content'),
-            nsTime.is('arrow', arrowControl),
-            { 'has-seconds': showSeconds },
-          ]"
-        >
+        <div :class="startContainerKls">
           <time-spinner
             ref="minSpinner"
             role="start"
@@ -36,14 +29,7 @@
         <div :class="nsTime.be('range-picker', 'header')">
           {{ t('el.datepicker.endTime') }}
         </div>
-        <div
-          :class="[
-            nsTime.be('range-picker', 'body'),
-            nsTime.be('panel', 'content'),
-            nsTime.is('arrow', arrowControl),
-            { 'has-seconds': showSeconds },
-          ]"
-        >
+        <div :class="endContainerKls">
           <time-spinner
             ref="maxSpinner"
             role="end"
@@ -121,6 +107,19 @@ const {
   defaultValue,
 } = pickerBase.props
 
+const startContainerKls = computed(() => [
+  nsTime.be('range-picker', 'body'),
+  nsTime.be('panel', 'content'),
+  nsTime.is('arrow', arrowControl),
+  showSeconds.value ? 'has-seconds' : '',
+])
+const endContainerKls = computed(() => [
+  nsTime.be('range-picker', 'body'),
+  nsTime.be('panel', 'content'),
+  nsTime.is('arrow', arrowControl),
+  showSeconds.value ? 'has-seconds' : '',
+])
+
 const startTime = computed(() => props.parsedValue![0])
 const endTime = computed(() => props.parsedValue![1])
 const oldValue = useOldValue(props)