mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 20:58:22 +08:00
refactor(components): [time-picker] props (#8108)
* Extract props to separate files. Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
parent
6cde29f559
commit
364014a35a
@ -0,0 +1,49 @@
|
|||||||
|
import { buildProps, definePropType } from '@element-plus/utils'
|
||||||
|
|
||||||
|
import type { ExtractPropTypes } from 'vue'
|
||||||
|
import type { Dayjs } from 'dayjs'
|
||||||
|
|
||||||
|
export const basicTimeSpinnerProps = buildProps({
|
||||||
|
role: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
spinnerDate: {
|
||||||
|
type: definePropType<Dayjs>(Object),
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showSeconds: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
arrowControl: Boolean,
|
||||||
|
amPmMode: {
|
||||||
|
// 'a': am/pm; 'A': AM/PM
|
||||||
|
type: definePropType<'a' | 'A'>(String),
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
disabledHours: {
|
||||||
|
type: definePropType<(role: string, comparingDate?: Dayjs) => boolean[]>(
|
||||||
|
Function
|
||||||
|
),
|
||||||
|
},
|
||||||
|
disabledMinutes: {
|
||||||
|
type: definePropType<
|
||||||
|
(hour: number, role: string, comparingDate?: Dayjs) => boolean[]
|
||||||
|
>(Function),
|
||||||
|
},
|
||||||
|
disabledSeconds: {
|
||||||
|
type: definePropType<
|
||||||
|
(
|
||||||
|
hour: number,
|
||||||
|
minute: number,
|
||||||
|
role: string,
|
||||||
|
comparingDate?: Dayjs
|
||||||
|
) => boolean[]
|
||||||
|
>(Function),
|
||||||
|
},
|
||||||
|
} as const)
|
||||||
|
|
||||||
|
export type BasicTimeSpinnerProps = ExtractPropTypes<
|
||||||
|
typeof basicTimeSpinnerProps
|
||||||
|
>
|
@ -0,0 +1,22 @@
|
|||||||
|
import { buildProps, definePropType } from '@element-plus/utils'
|
||||||
|
|
||||||
|
import type { ExtractPropTypes } from 'vue'
|
||||||
|
import type { Dayjs } from 'dayjs'
|
||||||
|
|
||||||
|
export const panelTimePickerProps = buildProps({
|
||||||
|
visible: Boolean,
|
||||||
|
actualVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
datetimeRole: String,
|
||||||
|
parsedValue: {
|
||||||
|
type: definePropType<string | Dayjs>([Object, String]),
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
} as const)
|
||||||
|
|
||||||
|
export type PanelTimePickerProps = ExtractPropTypes<typeof panelTimePickerProps>
|
@ -0,0 +1,18 @@
|
|||||||
|
import { buildProps, definePropType } from '@element-plus/utils'
|
||||||
|
|
||||||
|
import type { ExtractPropTypes } from 'vue'
|
||||||
|
import type { Dayjs } from 'dayjs'
|
||||||
|
|
||||||
|
export const panelTimeRangeProps = buildProps({
|
||||||
|
visible: Boolean,
|
||||||
|
actualVisible: Boolean,
|
||||||
|
parsedValue: {
|
||||||
|
type: definePropType<Dayjs[]>(Array),
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
} as const)
|
||||||
|
|
||||||
|
export type PanelTimeRangeProps = ExtractPropTypes<typeof panelTimeRangeProps>
|
@ -85,10 +85,10 @@ import ElScrollbar from '@element-plus/components/scrollbar'
|
|||||||
import ElIcon from '@element-plus/components/icon'
|
import ElIcon from '@element-plus/components/icon'
|
||||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
||||||
import { useNamespace } from '@element-plus/hooks'
|
import { useNamespace } from '@element-plus/hooks'
|
||||||
|
import { basicTimeSpinnerProps } from '../props/basic-time-spinner'
|
||||||
import { getTimeLists } from './useTimePicker'
|
import { getTimeLists } from './useTimePicker'
|
||||||
|
|
||||||
import type { PropType, Ref } from 'vue'
|
import type { Ref } from 'vue'
|
||||||
import type { Dayjs } from 'dayjs'
|
|
||||||
import type { Nullable } from '@element-plus/utils'
|
import type { Nullable } from '@element-plus/utils'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -103,34 +103,7 @@ export default defineComponent({
|
|||||||
ArrowDown,
|
ArrowDown,
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: basicTimeSpinnerProps,
|
||||||
role: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
spinnerDate: {
|
|
||||||
type: Object as PropType<Dayjs>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
showSeconds: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
arrowControl: Boolean,
|
|
||||||
amPmMode: {
|
|
||||||
type: String,
|
|
||||||
default: '', // 'a': am/pm; 'A': AM/PM
|
|
||||||
},
|
|
||||||
disabledHours: {
|
|
||||||
type: Function,
|
|
||||||
},
|
|
||||||
disabledMinutes: {
|
|
||||||
type: Function,
|
|
||||||
},
|
|
||||||
disabledSeconds: {
|
|
||||||
type: Function,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['change', 'select-range', 'set-option'],
|
emits: ['change', 'select-range', 'set-option'],
|
||||||
|
|
||||||
|
@ -43,10 +43,10 @@ import dayjs from 'dayjs'
|
|||||||
import { EVENT_CODE } from '@element-plus/constants'
|
import { EVENT_CODE } from '@element-plus/constants'
|
||||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||||
import { isUndefined } from '@element-plus/utils'
|
import { isUndefined } from '@element-plus/utils'
|
||||||
|
import { panelTimePickerProps } from '../props/panel-time-picker'
|
||||||
import TimeSpinner from './basic-time-spinner.vue'
|
import TimeSpinner from './basic-time-spinner.vue'
|
||||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import type { Dayjs } from 'dayjs'
|
import type { Dayjs } from 'dayjs'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -54,23 +54,7 @@ export default defineComponent({
|
|||||||
TimeSpinner,
|
TimeSpinner,
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: panelTimePickerProps,
|
||||||
visible: Boolean,
|
|
||||||
actualVisible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: undefined,
|
|
||||||
},
|
|
||||||
datetimeRole: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
parsedValue: {
|
|
||||||
type: [Object, String] as PropType<string | Dayjs>,
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['pick', 'select-range', 'set-picker-option'],
|
emits: ['pick', 'select-range', 'set-picker-option'],
|
||||||
|
|
||||||
|
@ -87,10 +87,10 @@ import dayjs from 'dayjs'
|
|||||||
import { union } from 'lodash-unified'
|
import { union } from 'lodash-unified'
|
||||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||||
import { EVENT_CODE } from '@element-plus/constants'
|
import { EVENT_CODE } from '@element-plus/constants'
|
||||||
|
import { panelTimeRangeProps } from '../props/panel-time-range'
|
||||||
import TimeSpinner from './basic-time-spinner.vue'
|
import TimeSpinner from './basic-time-spinner.vue'
|
||||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import type { Dayjs } from 'dayjs'
|
import type { Dayjs } from 'dayjs'
|
||||||
|
|
||||||
const makeSelectRange = (start: number, end: number) => {
|
const makeSelectRange = (start: number, end: number) => {
|
||||||
@ -103,17 +103,7 @@ const makeSelectRange = (start: number, end: number) => {
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { TimeSpinner },
|
components: { TimeSpinner },
|
||||||
|
|
||||||
props: {
|
props: panelTimeRangeProps,
|
||||||
visible: Boolean,
|
|
||||||
actualVisible: Boolean,
|
|
||||||
parsedValue: {
|
|
||||||
type: [Array] as PropType<Array<Dayjs>>,
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['pick', 'select-range', 'set-picker-option'],
|
emits: ['pick', 'select-range', 'set-picker-option'],
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user