refactor(comp:layout): remove onCollapse (#747)

BREAKING CHANGE: `onCollapse` was removed
IDuxFE · Feb 9, 2022 · 3001bbd · 3001bbd
1 parent af525d9
commit 3001bbd
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 22 deletions.
diff --git a/packages/components/divider/docs/Index.zh.md b/packages/components/divider/docs/Index.zh.md
@@ -16,7 +16,7 @@ cover:
 | --- | --- | --- | --- | --- | --- |
 | `dashed` | 是否虚线 | `boolean` | `false` | ✅ | - |
 | `label` | 分割线显示文字 | `string \| #default` | - | - | `vertical` 模式下不可用 |
-| `labelPlacement` | 文字显示位置 | `left \|center\| right` | `center`| ✅ | - |
+| `labelPlacement` | 文字显示位置 | `'start' \| 'center' \| 'end'` | `center`| ✅ | - |
 | `plain` | 文字是否显示为普通正文样式 | `boolean` | `false` | ✅ | - |
 | `size` | 分割线大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
 | `vertical` | 是否为垂直分割线 | `boolean` | - | - | - |
diff --git a/packages/components/grid/demo/Align.vue b/packages/components/grid/demo/Align.vue
@@ -1,6 +1,6 @@
 <template>
-  <IxDivider position="left" dashed>Align top</IxDivider>
-  <IxRow justify="center" align="top">
+  <IxDivider position="left" dashed>Align start</IxDivider>
+  <IxRow justify="space-between" align="start">
     <IxCol :span="4">
       <div class="height-80">col-4</div>
     </IxCol>
@@ -15,8 +15,8 @@
     </IxCol>
   </IxRow>
 
-  <IxDivider position="left" dashed>Align middle</IxDivider>
-  <IxRow justify="space-around" align="middle">
+  <IxDivider position="left" dashed>Align center</IxDivider>
+  <IxRow justify="space-between" align="center">
     <IxCol :span="4">
       <div class="height-80">col-4</div>
     </IxCol>
@@ -31,8 +31,8 @@
     </IxCol>
   </IxRow>
 
-  <IxDivider position="left" dashed>Align bottom</IxDivider>
-  <IxRow justify="space-between" align="bottom">
+  <IxDivider position="left" dashed>Align end</IxDivider>
+  <IxRow justify="space-between" align="end">
     <IxCol :span="4">
       <div class="height-80">col-4</div>
     </IxCol>

diff --git a/packages/components/header/docs/Index.zh.md b/packages/components/header/docs/Index.zh.md
@@ -18,7 +18,7 @@ order: 0
 | `description` | 标题下方的说明文字 | `string \| #description` | - | - | - |
 | `disabled` | 是否禁用 | `boolean` | `false` | - | - |
 | `prefix` | 标题前缀图标 | `string \| VNode \| #prefix` | - | - | - |
-| `size` | 标题大小 | `xl \| lg \| md \| sm` | `md` | - | - |
+| `size` | 标题大小 | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | - | - |
 | `showBar` | 是否显示标题前的竖条 | `boolean` | `false` | - | - |
 | `subTitle` | 二级标题文字 | `string \| #subTitle` | - | - | - |
 | `suffix` | 标题后缀图标 | `string \| VNode \| #suffix` | - | - | 通常用于额外操作 |

diff --git a/packages/components/layout/docs/Index.zh.md b/packages/components/layout/docs/Index.zh.md
@@ -34,4 +34,3 @@ order: 0
 | --- | --- | --- | --- | --- | --- |
 | `v-model:collapsed` | 是否折叠状态 | `boolean` | - | - | -  |
 | `breakpoint` | 触发响应式布局的断点 | `xs`, `sm`, `md`, `lg`, `xl` | - | - |  - |
-| `onCollapse` | 折叠状态发生变量时的回调 | `(collapsed: boolean, type: 'breakpoint \| trigger') => void` | - | - |  - |
diff --git a/packages/components/layout/src/LayoutSider.tsx b/packages/components/layout/src/LayoutSider.tsx
@@ -5,15 +5,13 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { LayoutSiderProps } from './types'
-
-import { WatchStopHandle, computed, defineComponent, normalizeClass, watch, watchEffect } from 'vue'
+import { type WatchStopHandle, computed, defineComponent, normalizeClass, watch, watchEffect } from 'vue'
 
 import { BREAKPOINTS_KEYS, useSharedBreakpoints } from '@idux/cdk/breakpoint'
-import { callEmit, useControlledProp } from '@idux/cdk/utils'
+import { useControlledProp } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
-import { layoutSiderProps } from './types'
+import { type LayoutSiderProps, layoutSiderProps } from './types'
 
 export default defineComponent({
   name: 'IxLayoutSider',
@@ -39,12 +37,7 @@ export default defineComponent({
 })
 
 const useCollapsed = (props: LayoutSiderProps) => {
-  const [collapsed, _setCollapsed] = useControlledProp(props, 'collapsed', false)
-
-  const changeCollapsed = (collapsed: boolean, type: 'trigger' | 'breakpoint') => {
-    _setCollapsed(collapsed)
-    callEmit(props.onCollapse, collapsed, type)
-  }
+  const [collapsed, setCollapsed] = useControlledProp(props, 'collapsed', false)
 
   const breakpointIndex = computed(() => {
     const { breakpoint } = props
@@ -62,7 +55,7 @@ const useCollapsed = (props: LayoutSiderProps) => {
         const breakpoints = useSharedBreakpoints()
         stopBreakpoints = watchEffect(() => {
           const currBreakpointIndex = BREAKPOINTS_KEYS.findIndex(key => breakpoints[key])
-          changeCollapsed(currBreakpointIndex <= breakpointIndex.value, 'breakpoint')
+          setCollapsed(currBreakpointIndex <= breakpointIndex.value)
         })
       }
     },

diff --git a/packages/components/layout/src/types.ts b/packages/components/layout/src/types.ts
@@ -51,7 +51,6 @@ export const layoutSiderProps = {
 
   // events
   'onUpdate:collapsed': IxPropTypes.emit<(collapsed: boolean) => void>(),
-  onCollapse: IxPropTypes.emit<(collapsed: boolean, type: 'trigger' | 'breakpoint') => void>(),
 }
 
 export type LayoutSiderProps = IxInnerPropTypes<typeof layoutSiderProps>