feat: temp

IDuxFE · Jun 27, 2022 · 3ed8a44 · 3ed8a44
1 parent f4cb34f
commit 3ed8a44
Show file tree

Hide file tree

Showing 19 changed files with 314 additions and 329 deletions.
diff --git a/packages/components/date-picker/__tests__/datePicker.spec.ts b/packages/components/date-picker/__tests__/datePicker.spec.ts
@@ -145,24 +145,12 @@ describe('DatePicker', () => {
     expect(onUpdateValue).toBeCalledWith(newDate)
   })
 
-  test('defaultOpenValue work', async () => {
-    const wrapper = DatePickerMount({
-      props: {
-        value: undefined,
-        defaultOpenValue: new Date('2021-10-11'),
-      },
-    })
-
-    const headerContentBtns = wrapper.findComponent(DatePanel).find('.ix-date-panel-header-content').findAll('button')
-    expect(headerContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(headerContentBtns.some(btn => btn.text().indexOf('10') > -1)).toBeTruthy()
-  })
-
   test('datetime panel switch work', async () => {
     const wrapper = DatePickerMount({
       props: {
         type: 'datetime',
         value: new Date('2021-10-11'),
+        allowInput: true,
       },
     })
 

diff --git a/packages/components/date-picker/__tests__/dateRangePicker.spec.ts b/packages/components/date-picker/__tests__/dateRangePicker.spec.ts
@@ -181,23 +181,6 @@ describe('DateRangePicker', () => {
     expect(onUpdateValue).toBeCalledWith([newFromDate, newToDate])
   })
 
-  test('defaultOpenValue work', async () => {
-    const wrapper = DateRangePickerMount({
-      props: {
-        value: undefined,
-        defaultOpenValue: [new Date('2021-10-11 00:00:00'), new Date('2021-11-11 00:00:00')],
-      },
-    })
-
-    const [fromDatePanel, toDatePanel] = wrapper.findAllComponents(DatePanel)
-    const fromHeaderContentBtns = fromDatePanel.find('.ix-date-panel-header-content').findAll('button')
-    const toHeaderContentBtns = toDatePanel.find('.ix-date-panel-header-content').findAll('button')
-    expect(fromHeaderContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(fromHeaderContentBtns.some(btn => btn.text().indexOf('10') > -1)).toBeTruthy()
-    expect(toHeaderContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(toHeaderContentBtns.some(btn => btn.text().indexOf('11') > -1)).toBeTruthy()
-  })
-
   test('datetime time select work', async () => {
     const onChange = vi.fn()
     const onUpdateValue = vi.fn()

diff --git a/packages/components/date-picker/docs/Index.zh.md b/packages/components/date-picker/docs/Index.zh.md
@@ -70,7 +70,6 @@ const defaultFormat = {
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `v-model:value` | 当前选中的日期 | `number \| string \| Date` | - | - | 如果传入 `string` 类型，会根据 `format` 解析成 `Date`，使用 `control` 时，此配置无效  |
-| `defaultOpenValue` | 打开面板时默认选中的值 | `number \| string \| Date` | - | - | `value` 为空时，高亮的值 |
 | `footer` | 自定义底部按钮 | `boolean \| ButtonProps[] \| VNode \| #footer` | `false` | - | 默认会根据 `type` 的不同渲染相应的按钮，如果传入 `false` 则不显示 |
 | `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | 可以通过国际化配置默认值 |
 | `timePanelOptions` | 时间选择面板配置 | `PickerTimePanelOptions` | - | - | 仅在 `type='datetime'` 时生效 |
@@ -96,7 +95,6 @@ const defaultFormat = {
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `v-model:value` | 当前选中的日期 | `Array<number \| string \| Date>` | - | - | 如果传入 `string` 类型，会根据 `format` 解析成 `Date`，使用 `control` 时，此配置无效 |
-| `defaultOpenValue` | 打开面板时默认选中的值 | `Array<number \| string \| Date>` | - | - | `value` 为空时，高亮的值 |
 | `footer` | 自定义底部按钮 | `boolean \| ButtonProps[] \| VNode \| #footer` | `false` | - | 默认会根据 `type` 的不同渲染相应的按钮，如果传入 `false` 则不显示 |
 | `placeholder` | 选择框默认文本 | `string[] \| #placeholder=placement:'start'\|'end'` | - | - | 默认使用 `i18n` 配置 |
 | `separator` | 自定义分隔符图标 | `string \| VNode \| #separator` | - | ✅ | - |
@@ -113,10 +111,9 @@ const defaultFormat = {
 | `v-model:activeValue` | 当前激活状态的日期 | `Date` | - | - | 配合键盘操作使用 |
 | `cellTooltip` | 日期节点的tooltip | `(cell: { value: Date, disabled: boolean }) => string | void` | - | - | - |
 | `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
-| `defaultOpenValue` | 打开面板时默认选中的值 | `Date` | - | - | - |
 | `type` | 设置选择器面板类型 | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year' \| 'datetime'` | `'date'` | - | - |
 | `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions` | - | - | - |
-| `visiblePanel` | 当前可见的面板 | `'datePanel' \| 'timePanel'` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
+| `visible` | 当前可见的面板 | `'datePanel' \| 'timePanel' \| visible` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
 | `onChange` | 值改变后的回调 | `(value: Date | undefined) => void` | - | - | - |
 
 ### IxDateRangePickerPanel
@@ -128,10 +125,9 @@ const defaultFormat = {
 | `v-model:activeValue` | 当前激活状态的日期 | `Date[]` | - | - | 配合键盘操作使用 |
 | `cellTooltip` | 日期节点的tooltip | `(cell: { value: Date, disabled: boolean }) => string | void` | - | - | - |
 | `disabledDate` | 不可选择的日期 | `(date: Date) => boolean` | - | - | - |
-| `defaultOpenValue` | 打开面板时默认选中的值 | `Date[]` | - | - | - |
 | `type` | 设置选择器面板类型 | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year' \| 'datetime'` | `'date'` | - | - |
 | `timePanelOptions` | 时间选择面板配置 | `TimePanelOptions \| TimePanelOptions[]` | - | - | 如果需要对前后的时间选择器使用不同配置，可以传入一个数组 |
-| `visiblePanel` | 当前可见的面板 | `'datePanel' \| 'timePanel'` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
+| `visible` | 当前可见的面板 | `'datePanel' \| 'timePanel' \| boolean` | - | - | 在非 `datetime` 类型时，`timepanel` 无效 |
 | `onChange` | 值改变后的回调 | `(value: Date[] | undefined) => void` | - | - | - |
 
 #### TimePanelOptions

diff --git a/packages/components/date-picker/index.ts b/packages/components/date-picker/index.ts
@@ -5,31 +5,36 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { DatePickerComponent, DatePickerPanelComponent, DateRangePickerComponent } from './src/types'
+import type {
+  DatePanelComponent,
+  DatePickerComponent,
+  DateRangePanelComponent,
+  DateRangePickerComponent,
+} from './src/types'
 
 import DatePicker from './src/DatePicker'
 import DateRangePicker from './src/DateRangePicker'
-import DatePickerPanel from './src/panel/Panel'
-import DateRangePickerPanel from './src/panel/RangePanel'
+import DatePanel from './src/panel/Panel'
+import DateRangePanel from './src/panel/RangePanel'
 
 const IxDatePicker = DatePicker as unknown as DatePickerComponent
-const IxDatePickerPanel = DatePickerPanel as unknown as DatePickerPanelComponent
+const IxDatePanel = DatePanel as unknown as DatePanelComponent
 const IxDateRangePicker = DateRangePicker as unknown as DateRangePickerComponent
-const IxDateRangePickerPanel = DateRangePickerPanel as unknown as DateRangePickerComponent
+const IxDateRangePanel = DateRangePanel as unknown as DateRangePanelComponent
 
-export { IxDatePicker, IxDatePickerPanel, IxDateRangePicker, IxDateRangePickerPanel }
+export { IxDatePicker, IxDatePanel, IxDateRangePicker, IxDateRangePanel }
 
 export type {
   DatePickerInstance,
   DatePickerComponent,
   DatePickerPublicProps as DatePickerProps,
-  DatePickerPanelInstance,
-  DatePickerPanelComponent,
-  DatePickerPanelPublicProps as DatePickerPanelProps,
+  DatePanelInstance,
+  DatePanelComponent,
+  DatePanelPublicProps as DatePanelProps,
   DateRangePickerInstance,
   DateRangePickerComponent,
   DateRangePickerPublicProps as DateRangePickerProps,
-  DateRangePickerPanelInstance,
-  DateRangePickerPanelComponent,
-  DateRangePickerPanelPublicProps as DateRangePickerPanelProps,
+  DateRangePanelInstance,
+  DateRangePanelComponent,
+  DateRangePanelPublicProps as DateRangePanelProps,
 } from './src/types'
diff --git a/packages/components/date-picker/src/DatePicker.tsx b/packages/components/date-picker/src/DatePicker.tsx
@@ -45,7 +45,7 @@ export default defineComponent({
     const { accessor, handleChange } = pickerStateContext
 
     const controlContext = useControl(dateConfig, formatContext, inputEnableStatus, accessor.valueRef, handleChange)
-    const { overlayOpened, setOverlayOpened } = useOverlayState(props, controlContext)
+    const { overlayOpened, overlayVisible, onAfterLeave, setOverlayOpened } = useOverlayState(props, controlContext)
     const handleKeyDown = useKeyboardEvents(setOverlayOpened)
 
     const context = {
@@ -58,6 +58,8 @@ export default defineComponent({
       inputRef,
       inputEnableStatus,
       overlayOpened,
+      overlayVisible,
+      onAfterLeave,
       setOverlayOpened,
       handleKeyDown,
       controlContext,

diff --git a/packages/components/date-picker/src/DateRangePicker.tsx b/packages/components/date-picker/src/DateRangePicker.tsx
@@ -45,7 +45,10 @@ export default defineComponent({
     const { accessor, handleChange } = pickerStateContext
 
     const rangeControlContext = useRangeControl(dateConfig, formatContext, inputEnableStatus, accessor.valueRef)
-    const { overlayOpened, setOverlayOpened } = useOverlayState(props, rangeControlContext)
+    const { overlayOpened, overlayVisible, onAfterLeave, setOverlayOpened } = useOverlayState(
+      props,
+      rangeControlContext,
+    )
     const handleKeyDown = useRangeKeyboardEvents(rangeControlContext, setOverlayOpened, handleChange)
 
     const renderSeparator = () => slots.separator?.() ?? props.separator ?? locale.dateRangePicker.separator
@@ -60,6 +63,8 @@ export default defineComponent({
       inputRef,
       inputEnableStatus,
       overlayOpened,
+      overlayVisible,
+      onAfterLeave,
       setOverlayOpened,
       rangeControlContext,
       renderSeparator,

diff --git a/packages/components/date-picker/src/composables/useActiveDate.ts b/packages/components/date-picker/src/composables/useActiveDate.ts