Skip to content

Commit

Permalink
docs(components): [time-select] use new display tag (element-plus#12700)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wzc520pyfm @dannyhebertbell
wzc520pyfm authored and dannyhebertbell committed Nov 10, 2023
1 parent 5fdc25d commit f8e4563
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 35 deletions.
72 changes: 37 additions & 35 deletions docs/en-US/component/time-select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,38 +53,40 @@ time-select/time-range

:::

## Attributes

| Name | 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 | large / default / small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| name | same as `name` in native input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
| format | set format of time | string | see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |

## Events

| Name | Description | Parameters |
| ------ | ------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |

## Methods

| Method | Description | Parameters |
| ------ | ------------------------- | ---------- |
| focus | focus the Input component | — |
| blur | blur the Input component | — |
## API

### Attributes

| Name | Description | Type | 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 | ^[enum]`'large' \| 'default' \| 'small'` | default |
| placeholder | placeholder in non-range mode | ^[string] | — |
| name | same as `name` in native input | ^[string] | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | ^[string] / ^[enum]`'dark' \| 'light'` | light |
| prefix-icon | custom prefix icon component | ^[string] / ^[Component] | Clock |
| clear-icon | custom clear icon component | ^[string] / ^[Component] | CircleClose |
| start | start time | ^[string] | 09:00 |
| end | end time | ^[string] | 18:00 |
| step | time step | ^[string] | 00:30 |
| min-time | minimum time, any time before this time will be disabled | ^[string] | — |
| max-time | maximum time, any time after this time will be disabled | ^[string] | — |
| format | set format of time | ^[string] see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |

### Events

| Name | Description | Type |
| ------ | ------------------------------------- | ---------------------------------------- |
| change | triggers when user confirms the value | ^[Function]`(value: string) => void` |
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |

### Exposes

| Method | Description | Type |
| ------ | ------------------------- | ----------------------- |
| focus | focus the Input component | ^[Function]`() => void` |
| blur | blur the Input component | ^[Function]`() => void` |
48 changes: 48 additions & 0 deletions packages/components/time-select/src/time-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,93 @@ import type TimeSelect from './time-select.vue'
import type { Component, ExtractPropTypes, PropType } from 'vue'

export const timeSelectProps = buildProps({
/**
* @description set format of time
*/
format: {
type: String,
default: 'HH:mm',
},
/**
* @description binding value
*/
modelValue: String,
/**
* @description whether TimeSelect is disabled
*/
disabled: Boolean,
/**
* @description whether the input is editable
*/
editable: {
type: Boolean,
default: true,
},
/**
* @description Tooltip theme, built-in theme: `dark` / `light`
*/
effect: {
type: String as PropType<'light' | 'dark' | string>,
default: 'light',
},
/**
* @description whether to show clear button
*/
clearable: {
type: Boolean,
default: true,
},
/**
* @description size of Input
*/
size: useSizeProp,
/**
* @description placeholder in non-range mode
*/
placeholder: String,
/**
* @description start time
*/
start: {
type: String,
default: '09:00',
},
/**
* @description end time
*/
end: {
type: String,
default: '18:00',
},
/**
* @description time step
*/
step: {
type: String,
default: '00:30',
},
/**
* @description minimum time, any time before this time will be disabled
*/
minTime: String,
/**
* @description maximum time, any time after this time will be disabled
*/
maxTime: String,
/**
* @description same as `name` in native input
*/
name: String,
/**
* @description custom prefix icon component
*/
prefixIcon: {
type: definePropType<string | Component>([String, Object]),
default: () => Clock,
},
/**
* @description custom clear icon component
*/
clearIcon: {
type: definePropType<string | Component>([String, Object]),
default: () => CircleClose,
Expand Down
6 changes: 6 additions & 0 deletions packages/components/time-select/src/time-select.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,13 @@ const focus = () => {
}
defineExpose({
/**
* @description focus the Input component
*/
blur,
/**
* @description blur the Input component
*/
focus,
})
</script>

0 comments on commit f8e4563

Please sign in to comment.