Repository: element-plus/element-plus
File: packages/components/time-picker/src/common/picker-range-trigger.vue (Vue)

Code before:
import { useFormItem, useFormItemInputId } from '@element-plus/components/form'

import type { CSSProperties } from 'vue'

defineOptions({
  name: 'PickerRangeTrigger',
  inheritAttrs: false,
})

const props = defineProps(timePickerRangeTriggerProps)
const emit = defineEmits([
  'mouseenter',
  'mouseleave',
  'click',
  'touchstart',
  'focus',
  'blur',
  'startInput',
  'endInput',
  'startChange',
  'endChange',
])

const { formItem: elFormItem } = useFormItem()
const { inputId } = useFormItemInputId(
  { ...props, id: props.id && props.id[0] },
  {
    formItemContext: elFormItem,
  }
)

const attrs = useAttrs()
const nsDate = useNamespace('date')
const nsRange = useNamespace('range')

const inputRef = ref<HTMLInputElement>()
const endInputRef = ref<HTMLInputElement>()

const { wrapperRef, isFocused } = useFocusController(inputRef, {
  disabled: computed(() => props.disabled),
})

const handleClick = (evt: MouseEvent) => {
  emit('click', evt)
}

const handleMouseEnter = (evt: MouseEvent) => {
  emit('mouseenter', evt)
}

const handleMouseLeave = (evt: MouseEvent) => {

Review comment (bug):
```suggestion
  reactive({ ...props, id: computed(() => props.id?.[0]) }),
```

Because currently cannot respond to `id` changes.

Failed [examples](https://element-plus.run/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmNvbnN0IHF1ZXJ5Rm9ybSA9IHJlZih7XG4gIHVzZXI6ICcnLFxuICBkZXBhcnRtZW50OiAnJyxcbiAgaXA6ICcnLFxuICB0aW1lOiAnJyxcbn0pXG5cbmNvbnN0IGlkID0gcmVmPFtzdHJpbmcsIHN0cmluZ10+KClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxlbC1idXR0b24gQGNsaWNrID0gXCJpZCA9IFsndGVzdDEnLCAndGVzdDInXVwiPmNoYW5nZSBpZDwvZWwtYnV0dG9uPlxuXG4gIDxociAvPlxuXG4gIDxlbC1mb3JtIHJlZj1cInF1ZXJ5Rm9ybVJlZlwiIDptb2RlbD1cInF1ZXJ5Rm9ybVwiIGxhYmVsLXdpZHRoPVwiYXV0b1wiPlxuICAgIDxlbC1yb3cgOmd1dHRlcj1cIjEwXCI+XG4gICAgICA8ZWwtY29sIDpzcGFuPVwiNVwiPlxuICAgICAgICA8ZWwtZm9ybS1pdGVtIGxhYmVsPVwiSVBcIiBwcm9wPVwiaXBcIj5cbiAgICAgICAgICA8ZWwtaW5wdXQgc3R5bGU9XCJ3aWR0aDogMTAwJVwiIHYtbW9kZWw9XCJxdWVyeUZvcm0uaXBcIiAvPlxuICAgICAgICA8L2VsLWZvcm0taXRlbT5cbiAgICAgIDwvZWwtY29sPlxuICAgICAgPGVsLWNvbCA6c3Bhbj1cIjdcIj5cbiAgICAgICAgPGVsLWZvcm0taXRlbSBsYWJlbD1cIuaXtumXtFwiPlxuICAgICAgICAgIDxlbC1kYXRlLXBpY2tlclxuICAgICAgICAgICAgOmlkPVwiaWRcIlxuICAgICAgICAgICAgdi1tb2RlbD1cInF1ZXJ5Rm9ybS50aW1lXCJcbiAgICAgICAgICAgIHR5cGU9XCJkYXRlcmFuZ2VcIlxuICAgICAgICAgICAgcmFuZ2Utc2VwYXJhdG9yPVwiLVwiXG4gICAgICAgICAgLz5cbiAgICAgICAgPC9lbC1mb3JtLWl0ZW0+XG4gICAgICA8L2VsLWNvbD5cbiAgICA8L2VsLXJvdz5cbiAgPC9lbC1mb3JtPlxuPC90ZW1wbGF0ZT5cbiIsImVsZW1lbnQtcGx1cy5qcyI6ImltcG9ydCBFbGVtZW50UGx1cyBmcm9tICdlbGVtZW50LXBsdXMnXG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuYXdhaXQgbG9hZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIHNldHVwRWxlbWVudFBsdXMoKSB7XG4gIGlmIChpbnN0YWxsZWQpIHJldHVyblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShFbGVtZW50UGx1cylcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICBjb25zdCBzdHlsZXMgPSBbJ2h0dHBzOi8vcHJldmlldy0yMTc0Ni1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguY3NzJywgJ2h0dHBzOi8vcHJldmlldy0yMTc0Ni1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL3RoZW1lLWNoYWxrL2RhcmsvY3NzLXZhcnMuY3NzJ10ubWFwKChzdHlsZSkgPT4ge1xuICAgIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgICBjb25zdCBsaW5rID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpXG4gICAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgICAgbGluay5ocmVmID0gc3R5bGVcbiAgICAgIGxpbmsuYWRkRXZlbnRMaXN0ZW5lcignbG9hZCcsIHJlc29sdmUpXG4gICAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgICAgZG9jdW1lbnQuYm9keS5hcHBlbmQobGluaylcbiAgICB9KVxuICB9KVxuICByZXR1cm4gUHJvbWlzZS5hbGxTZXR0bGVkKHN0eWxlcylcbn1cbiIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcInR5cGVzXCI6IFtcImVsZW1lbnQtcGx1cy9nbG9iYWwuZC50c1wiXSxcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWUsXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXG4gICAgXCJjaGVja0pzXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59XG4iLCJQbGF5Z3JvdW5kTWFpbi52dWUiOiI8c2NyaXB0IHNldHVwPlxuaW1wb3J0IEFwcCBmcm9tICcuL0FwcC52dWUnXG5pbXBvcnQgeyBzZXR1cEVsZW1lbnRQbHVzIH0gZnJvbSAnLi9lbGVtZW50LXBsdXMuanMnXG5zZXR1cEVsZW1lbnRQbHVzKClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0B2dWUvcnVudGltZS1kb21AbGF0ZXN0L2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AdnVlL3NoYXJlZEBsYXRlc3QvZGlzdC9zaGFyZWQuZXNtLWJ1bmRsZXIuanNcIixcbiAgICBcImVsZW1lbnQtcGx1c1wiOiBcImh0dHBzOi8vcHJldmlldy0yMTc0Ni1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguZnVsbC5taW4ubWpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXMvXCI6IFwidW5zdXBwb3J0ZWRcIixcbiAgICBcIkBlbGVtZW50LXBsdXMvaWNvbnMtdnVlXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AZWxlbWVudC1wbHVzL2ljb25zLXZ1ZUAyL2Rpc3QvaW5kZXgubWluLmpzXCJcbiAgfSxcbiAgXCJzY29wZXNcIjoge31cbn0iLCJfbyI6eyJzaG93SGlkZGVuIjp0cnVlLCJzdHlsZVNvdXJjZSI6Imh0dHBzOi8vcHJldmlldy0yMTc0Ni1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguY3NzIn19)

Code after:
import { useFormItem, useFormItemInputId } from '@element-plus/components/form'

import type { CSSProperties } from 'vue'

defineOptions({
  name: 'PickerRangeTrigger',
  inheritAttrs: false,
})

const props = defineProps(timePickerRangeTriggerProps)
const emit = defineEmits([
  'mouseenter',
  'mouseleave',
  'click',
  'touchstart',
  'focus',
  'blur',
  'startInput',
  'endInput',
  'startChange',
  'endChange',
])

const { formItem } = useFormItem()
const { inputId } = useFormItemInputId(
  reactive({ id: computed(() => props.id?.[0]) }),
  {
    formItemContext: formItem,
  }
)

const attrs = useAttrs()
const nsDate = useNamespace('date')
const nsRange = useNamespace('range')

const inputRef = ref<HTMLInputElement>()
const endInputRef = ref<HTMLInputElement>()

const { wrapperRef, isFocused } = useFocusController(inputRef, {
  disabled: computed(() => props.disabled),
})

const handleClick = (evt: MouseEvent) => {
  emit('click', evt)
}

const handleMouseEnter = (evt: MouseEvent) => {
  emit('mouseenter', evt)
}

const handleMouseLeave = (evt: MouseEvent) => {