fix(pagination): 切换页码后下拉不自动收起等问题 (DevCloudFE#1718)

GreatZPP · web-flow · commit 815b1759c795 · 2023-09-03T14:15:11.000+08:00
diff --git a/packages/devui-vue/devui/pagination/src/components/config-menu.tsx b/packages/devui-vue/devui/pagination/src/components/config-menu.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
 import { on, off } from '../../../shared/devui-directive/utils';
 import clickoutsideDirective from '../../../shared/devui-directive/clickoutside';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 export default defineComponent({
   directives: {
diff --git a/packages/devui-vue/devui/pagination/src/components/jump-page.tsx b/packages/devui-vue/devui/pagination/src/components/jump-page.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, PropType, ref, watch, toRefs, ExtractPropTypes } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const jumpPageProps = {
   goToText: String,
@@ -42,9 +42,16 @@ export default defineComponent({
     };
     // 跳转指定页码
     const jump = (e: KeyboardEvent | 'btn') => {
+      if (isNaN(curPage)) {
+        curPage = 1;
+      }
       if (curPage > totalPages?.value) {
-        return;
+        curPage = totalPages?.value;
+      }
+      if (curPage < 1) {
+        curPage = 1;
       }
+
       if ((e === 'btn' || e.key === 'Enter') && cursor?.value !== curPage) {
         emit('changeCursorEmit', curPage);
       }
diff --git a/packages/devui-vue/devui/pagination/src/components/page-nums.tsx b/packages/devui-vue/devui/pagination/src/components/page-nums.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, PropType, computed, ExtractPropTypes } from 'vue';
 import { handlePages } from '../utils';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { PreLinkIcon, NextLinkIcon } from '../components/page-link-icons';
 
 const pageNumBtnProps = {
diff --git a/packages/devui-vue/devui/pagination/src/components/page-size.tsx b/packages/devui-vue/devui/pagination/src/components/page-size.tsx
@@ -1,22 +1,22 @@
 import { defineComponent, inject, withModifiers, ref } from 'vue';
-import { Icon } from '../../../icon';
+import { Icon } from '@devui/shared/components/icon';
 import { Dropdown } from '../../../dropdown';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { paginationInjectionKey, IPagination } from '../pagination-types';
 
 export default defineComponent({
   setup() {
     const ns = useNamespace('pagination');
     const paginationContext = inject(paginationInjectionKey) as IPagination;
     const iconRotate = ref(0);
-    const { size, currentPageSize, pageSizeOptions, pageSizeChange, t } = paginationContext;
+    const { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t } = paginationContext;
     const onDropdownToggle = (e: boolean) => {
       iconRotate.value = e ? 180 : 0;
     };
 
     return () => (
       <>
-        <Dropdown position={['bottom', 'top']} class={ns.e('size-list')} onToggle={onDropdownToggle}>
+        <Dropdown position={pageSizeDirection.value} class={ns.e('size-list')} onToggle={onDropdownToggle}>
           {{
             default: () => (
               <div tabindex="0" class={[ns.e('size'), size.value ? ns.em('size', size.value) : '']}>
@@ -28,8 +28,11 @@ export default defineComponent({
             menu: () => (
               <ul>
                 {pageSizeOptions.value.map((item, index) => (
-                  <li class={{ active: item === currentPageSize.value }}
-                    onClick={withModifiers(pageSizeChange.bind(null, { value: item }), ['stop'])}
+                  <li
+                    class={{ active: item === currentPageSize.value }}
+                    onClick={() => {
+                      pageSizeChange(item);
+                    }}
                     key={index}>
                     {item}
                   </li>
diff --git a/packages/devui-vue/devui/pagination/src/pagination-types.ts b/packages/devui-vue/devui/pagination/src/pagination-types.ts
@@ -1,19 +1,6 @@
 import type { PropType, ExtractPropTypes, InjectionKey, Ref, WritableComputedRef } from 'vue';
 
-type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
-
-interface ConnectedPosition {
-  originX: 'start' | 'center' | 'end';
-  originY: 'top' | 'center' | 'bottom';
-
-  overlayX: 'start' | 'center' | 'end';
-  overlayY: 'top' | 'center' | 'bottom';
-
-  weight?: number;
-  offsetX?: number;
-  offsetY?: number;
-  panelClass?: string | string[];
-}
+export type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';
 
 type Size = 'lg' | '' | 'sm';
 
@@ -31,8 +18,8 @@ export const paginationProps = {
     default: () => [5, 10, 20, 50],
   },
   pageSizeDirection: {
-    type: Array as PropType<Array<AppendToBodyDirection | ConnectedPosition>>,
-    default: () => ['centerDown', 'centerUp'],
+    type: Array as PropType<Array<PageSizeDirection>>,
+    default: () => ['bottom', 'top'],
   },
   pageIndex: {
     type: Number,
@@ -121,7 +108,8 @@ export interface IPagination {
   size: Ref<Size>;
   currentPageSize: WritableComputedRef<number>;
   pageSizeOptions: Ref<number[]>;
-  pageSizeChange: (val: Record<string, string | number>) => void;
+  pageSizeDirection: Ref<PageSizeDirection[]>;
+  pageSizeChange: (val: number) => void;
   t: (path: string) => void;
 }
 
diff --git a/packages/devui-vue/devui/pagination/src/pagination.scss b/packages/devui-vue/devui/pagination/src/pagination.scss
@@ -41,6 +41,11 @@
     &.#{$devui-prefix}-pagination__size--lg {
       height: 46px;
     }
+
+    & > .#{$devui-prefix}-icon__container {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .#{$devui-prefix}-pagination__total-size {
@@ -384,7 +389,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
-    transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
+    transition:
+      color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
       background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
 
     &:hover:not(.active) {
diff --git a/packages/devui-vue/devui/pagination/src/pagination.tsx b/packages/devui-vue/devui/pagination/src/pagination.tsx
@@ -6,8 +6,8 @@ import ConfigMenu from './components/config-menu';
 import JumpPage from './components/jump-page';
 import PageNumBtn from './components/page-nums';
 import PageSize from './components/page-size';
-import { useNamespace } from '../../shared/hooks/use-namespace';
-import { createI18nTranslate } from '../../locale/create';
+import { useNamespace } from '@devui/shared/utils';
+import { createI18nTranslate } from '@devui/shared/components/locale/create';
 import './pagination.scss';
 
 export default defineComponent({
@@ -26,6 +26,7 @@ export default defineComponent({
     const {
       autoHide,
       pageSizeOptions,
+      pageSizeDirection,
       total,
       canChangePageSize,
       lite,
@@ -82,8 +83,8 @@ export default defineComponent({
     };
 
     // 每页条数改变
-    const pageSizeChange = (val: Record<string, string | number>) => {
-      currentPageSize.value = val.value as number;
+    const pageSizeChange = (val: number) => {
+      currentPageSize.value = val as number;
       // 页数改变后，如果当前页码超出最大页码时修正
       if (props.autoFixPageIndex) {
         nextTick(() => {
@@ -92,15 +93,15 @@ export default defineComponent({
           }
         });
       }
-      emit('pageSizeChange', val.value as number);
+      emit('pageSizeChange', val);
     };
 
     // 极简模式下的跳转页码
     const litePageIndexChange = (page: { name: string; value: number }) => {
       changeCursorEmit(page.value);
     };
 
-    provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeChange, t });
+    provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t });
 
     return () =>
       // autoHide 为 true，并且 pageSizeOptions 最小值大于 total，则不展示分页
diff --git a/packages/devui-vue/docs/components/pagination/index.md b/packages/devui-vue/docs/components/pagination/index.md
@@ -243,7 +243,7 @@ export default defineComponent({
     @page-index-change="pageIndexChangeWithoutFix"
     @page-size-change="pageSizeChangeWithoutFix"
     :page-size-options="pager.pageSizeOptions"
-    :page-size-direction="['centerUp']"
+    :page-size-direction="['right']"
   />
 </template>
 <script>
@@ -423,8 +423,8 @@ export default defineComponent({
 | :------------------- | :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :-------------------- |
 | page-size            | `number`                                                                                              | 10                                                             | 可选，每页显示最大条目数量                                                                                         | [基本用法](#基本用法) |
 | total                | `number`                                                                                              | 0                                                              | 可选，显示的总条目数                                                                                               | [基本用法](#基本用法) |
-| page-size-options    | `number[] `                                                                                           | 10                                                             | 可选，分页每页最大条目数量的下拉框的数据源，<br>默认有四种选择 5, 10, 20, 50                                       | [多种配置](#多种配置) |
-| page-size-direction  | [AppendToBodyDirection](#appendtobodydirection)\[\]<br>\| [ConnectedPosition](#connectedposition)\[\] | [<br>&nbsp;&nbsp;'centerDown', <br>&nbsp;&nbsp;'centerUp'<br>] | 可选，设置分页每页条目的下拉框展示的方向                                                                           | [多种配置](#多种配置) |
+| page-size-options    | `number[]`                                                                                           | 10                                                             | 可选，分页每页最大条目数量的下拉框的数据源，<br>默认有四种选择 5, 10, 20, 50                                       | [多种配置](#多种配置) |
+| page-size-direction  | [PageSizeDirection](#pagesizedirection) | ['bottom', 'top'] | 可选，设置分页每页条目的下拉框展示的方向                                                                           | [多种配置](#多种配置) |
 | page-index           | `number`                                                                                              | 1                                                              | 可选，初始化页码                                                                                                   | [基本用法](#基本用法) |
 | max-items            | `number`                                                                                              | 10                                                             | 可选，分页最多显示几个按钮                                                                                         | [基本用法](#基本用法) |
 | pre-link             | `string`                                                                                              | --                                                             | 可选，上一页按钮显示图标，<br>默认设置为左箭头图标                                                                 | [基本用法](#基本用法) |
@@ -458,19 +458,8 @@ export default defineComponent({
 type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
 ```
 
-#### ConnectedPosition
+#### PageSizeDirection
 
 ```ts
-interface ConnectedPosition {
-  originX: 'start' | 'center' | 'end';
-  originY: 'top' | 'center' | 'bottom';
-
-  overlayX: 'start' | 'center' | 'end';
-  overlayY: 'top' | 'center' | 'bottom';
-
-  weight?: number;
-  offsetX?: number;
-  offsetY?: number;
-  panelClass?: string | string[];
-}
+type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';
 ```
