From 7d22e21eb0292b070c7b984d274f113cf09e0731 Mon Sep 17 00:00:00 2001 From: dong Date: Thu, 2 Sep 2021 21:45:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0pagination=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=B5=8B=E8=AF=95=E6=96=87=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0clickoutside=E6=8C=87=E4=BB=A4=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=84=E4=BB=B6=E6=9C=8D=E5=8A=A1=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E5=88=9B=E5=BB=BA=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/loading/src/directive.ts | 2 +- devui/loading/src/service.ts | 2 +- devui/pagination/__tests__/pagination.spec.ts | 307 ++++++++++++++++++ .../pagination/src/components/config-menu.tsx | 4 +- devui/pagination/src/pagination.tsx | 7 +- devui/pagination/src/utils.ts | 24 -- .../devui-directive/clickoutside.ts} | 2 +- devui/shared/devui-directive/utils.ts | 23 ++ .../src => shared/scripts}/component.ts | 2 +- 9 files changed, 340 insertions(+), 33 deletions(-) create mode 100644 devui/pagination/__tests__/pagination.spec.ts rename devui/{pagination/src/directive.ts => shared/devui-directive/clickoutside.ts} (96%) create mode 100644 devui/shared/devui-directive/utils.ts rename devui/{loading/src => shared/scripts}/component.ts (91%) diff --git a/devui/loading/src/directive.ts b/devui/loading/src/directive.ts index 5a2b02ad..859a6156 100644 --- a/devui/loading/src/directive.ts +++ b/devui/loading/src/directive.ts @@ -3,7 +3,7 @@ import { defineComponent } from 'vue' import Loading from './loading' import { LoadingProps, BindingType, TargetHTMLElement } from './types' -import { createComponent, unmountComponent } from './component' +import { createComponent, unmountComponent } from '../../shared/scripts/component' const loadingConstructor = defineComponent(Loading) diff --git a/devui/loading/src/service.ts b/devui/loading/src/service.ts index 2794dc1f..76517e34 100644 --- a/devui/loading/src/service.ts +++ b/devui/loading/src/service.ts @@ -1,6 +1,6 @@ /* eslint-disable */ import { defineComponent } from 'vue' -import { createComponent } from './component' +import { createComponent } from '../../shared/scripts/component' import Loading from './loading' import { LoadingProps } from './types' diff --git a/devui/pagination/__tests__/pagination.spec.ts b/devui/pagination/__tests__/pagination.spec.ts new file mode 100644 index 00000000..99bc8f76 --- /dev/null +++ b/devui/pagination/__tests__/pagination.spec.ts @@ -0,0 +1,307 @@ +import { mount } from '@vue/test-utils'; +import { reactive } from 'vue'; +import { Pagination } from '../index' +import { Select } from '../../select' +import { Input } from '../../input' + +const globalOption = { + global: { + components: { + DSelect: Select, + DInput: Input + } + } +} + +describe('pagination: ', () => { + it('test pageSize', async () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 20, + pageIndex: 5 + }) + return { pager } + } + }, globalOption) + + expect(wrapper.find('.devui-pagination-item.active').text()).toEqual('5') + expect((wrapper.find('.devui-select-input').element as HTMLInputElement).value).toEqual('20') + + const btns = wrapper.findAll('a.devui-pagination-link') + expect(btns.map((ele: any) => ele.text()).join()).toEqual('<,1,...,4,5,6,...,16,>'); + expect(wrapper.find('.devui-pagination-list').classes()).toContain('devui-pagination-sm') + + // 跳转按钮 + expect(wrapper.find('.devui-jump-container').exists()).toBeTruthy() + expect(wrapper.find('.devui-jump-button').exists()).toBeTruthy() + + // 翻页 + await btns[0].trigger('click') + expect(wrapper.find('.devui-pagination-item.active').text()).toEqual('4') + const btns1 = wrapper.findAll('a.devui-pagination-link') + expect(btns1.map((ele: any) => ele.text()).join()).toEqual('<,1,...,3,4,5,...,16,>'); + + // 改变每页条数 + await wrapper.find('.devui-select-input').trigger('click') + await wrapper.findAll('.devui-select-item')[1].trigger('click') + + expect((wrapper.find('.devui-select-input').element as HTMLInputElement).value).toEqual('10') + const btns2 = wrapper.findAll('a.devui-pagination-link') + expect(btns2.map((ele: any) => ele.text()).join()).toEqual('<,1,...,3,4,5,...,31,>'); + }) + + it('test callback', async () => { + const pageIndexChange = jest.fn() + const pageSizeChange = jest.fn() + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 10, + pageIndex: 10 + }) + return { pager, pageIndexChange, pageSizeChange } + } + }, globalOption) + + expect(wrapper.find('.devui-pagination-list').classes()).toContain('devui-pagination-lg') + const btns = wrapper.findAll('a.devui-pagination-link') + const pageIndexs = btns.map((ele: any) => ele.text()) + expect(pageIndexs.join()).toEqual('<,1,...,6,7,8,9,10,11,12,13,...,31,>'); + + // 当前页改变回调 + await btns[0].trigger('click') + expect(pageIndexChange).toHaveBeenCalled() + + // 每页条数改变回调 + await wrapper.find('.devui-select-input').trigger('click') + await wrapper.findAll('.devui-select-item')[1].trigger('click') + expect(pageSizeChange).toHaveBeenCalled() + }) + + it('test first or lastest pageIndex disabled', async () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 20, + pageIndex: 1 + }) + return { pager } + } + }, globalOption) + + const btns = wrapper.findAll('.devui-pagination-item') + expect(btns[0].classes()).toContain('disabled') + + await btns[btns.length - 2].trigger('click') + const btns1 = wrapper.findAll('.devui-pagination-item') + expect(btns1[btns1.length - 1].classes()).toContain('disabled') + + }) + + it('test lite', () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 10, + pageIndex: 10 + }) + return { pager } + } + }, globalOption) + + expect(wrapper.find('.devui-total-size').text()).toContain('Total') + expect(wrapper.findAll('a.devui-pagination-link').length).toBe(2) + expect(wrapper.find('.devui-jump-container').exists()).toBeFalsy() + }) + + it('test super lite', () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 10, + pageIndex: 10 + }) + return { pager } + } + }, globalOption) + + expect(wrapper.find('.devui-total-size').exists()).toBeFalsy() + expect(wrapper.find('.devui-page-size').exists()).toBeFalsy() + expect(wrapper.findAll('a.devui-pagination-link').length).toBe(2) + expect(wrapper.find('.devui-jump-container').exists()).toBeFalsy() + }) + + it('test haveConfigMenu', async () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + +
+
show field
+
setting
+
+
+
display method
+
+ + +
+
+ + `, + setup() { + const pager = reactive({ + total: 306, + pageSize: 10, + pageIndex: 10 + }) + return { pager } + } + }, globalOption) + + expect(wrapper.findAll('a.devui-pagination-link').length).toBe(2) + expect(wrapper.find('.devui-pagination-config').exists()).toBeTruthy() + expect(wrapper.find('.devui-config-container').exists()).toBeFalsy() + + await wrapper.find('.devui-pagination-config').trigger('click') + expect(wrapper.find('.devui-config-container').exists()).toBeTruthy() + expect(wrapper.find('.config-item-words').exists()).toBeTruthy() + expect(wrapper.find('.choosed').text()).toBe('10') + }) + + it('test special', async () => { + const wrapper = mount({ + components: { + DPagination: Pagination + }, + template: ` + + `, + setup() { + const pager = reactive({ + total: 10, + pageIndex: 3, + pageSize: 10 + }) + return { pager } + } + }, globalOption) + + const btns = wrapper.findAll('.devui-pagination-item') + expect(btns.length).toBe(5) + expect(wrapper.findAll('.devui-pagination-item.disabled').length).toBe(3) + expect(wrapper.find('.devui-pagination-item.active.disabled').text()).toBe('3') + + await btns[0].trigger('click') + expect(wrapper.findAll('.devui-pagination-item').length).toBe(4) + expect(wrapper.findAll('.devui-pagination-item.disabled').length).toBe(2) + + await wrapper.setProps({ + showTruePageIndex: false + }) + + expect(wrapper.findAll('.devui-pagination-item').length).toBe(3) + expect(wrapper.findAll('.devui-pagination-item.disabled').length).toBe(2) + expect(wrapper.find('.devui-pagination-item.active').text()).toBe('1') + }) +}) \ No newline at end of file diff --git a/devui/pagination/src/components/config-menu.tsx b/devui/pagination/src/components/config-menu.tsx index a08edfad..837beefa 100644 --- a/devui/pagination/src/components/config-menu.tsx +++ b/devui/pagination/src/components/config-menu.tsx @@ -1,7 +1,7 @@ import { defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'; -import { on, off } from '../utils' +import { on, off } from '../../../shared/devui-directive/utils' -import clickoutsideDirective from '../directive' +import clickoutsideDirective from '../../../shared/devui-directive/clickoutside' export default defineComponent({ directives: { diff --git a/devui/pagination/src/pagination.tsx b/devui/pagination/src/pagination.tsx index d150c809..6e7fd2e8 100644 --- a/devui/pagination/src/pagination.tsx +++ b/devui/pagination/src/pagination.tsx @@ -2,7 +2,7 @@ import { defineComponent, computed, ref, nextTick } from 'vue' import { ComponentProps, componentProps } from './use-pagination' import { liteSelectOptions } from './utils' -import clickoutsideDirective from './directive' +import clickoutsideDirective from '../../shared/devui-directive/clickoutside' import ConfigMenu from './components/config-menu' import JumpPage from './components/jump-page' @@ -119,8 +119,7 @@ export default defineComponent({ const { total, pageSizeOptions, - // TODO 依赖select组件，待完善 - // pageSizeDirection, + pageSizeDirection, preLink, nextLink, size, @@ -162,6 +161,7 @@ export default defineComponent({ options={pageSizeOptions} modelValue={currentPageSize} onValueChange={pageSizeChange} + pageSizeDirection={pageSizeDirection} /> } @@ -179,6 +179,7 @@ export default defineComponent({ disabled={total === 0} modelValue={cursor} onValueChange={litePageIndexChange} + pageSizeDirection={pageSizeDirection} /> } diff --git a/devui/pagination/src/utils.ts b/devui/pagination/src/utils.ts index 8584c1a5..095b5a43 100644 --- a/devui/pagination/src/utils.ts +++ b/devui/pagination/src/utils.ts @@ -40,27 +40,3 @@ export function liteSelectOptions(total: number): Array<{name: string; value: nu }) } -// 事件处理 -export function on(element: HTMLElement | Document, eventName: string, handler: (this: Element, ev: Event) => any): void { - if (document.addEventListener) { - if (element && eventName && handler) { - element.addEventListener(eventName, handler, false) - } - } else { - if (element && eventName && handler) { - (element as any).attachEvent('on' + eventName, handler) - } - } -} -export function off(element: HTMLElement | Document, eventName: string, handler: (this: Element, ev: Event) => any): void { - if (document.removeEventListener) { - if (element && eventName && handler) { - element.removeEventListener(eventName, handler, false) - } - } else { - if (element && eventName && handler) { - (element as any).detachEvent('on' + eventName, handler) - } - } -} - diff --git a/devui/pagination/src/directive.ts b/devui/shared/devui-directive/clickoutside.ts similarity index 96% rename from devui/pagination/src/directive.ts rename to devui/shared/devui-directive/clickoutside.ts index 43ce9178..b6b6ad81 100644 --- a/devui/pagination/src/directive.ts +++ b/devui/shared/devui-directive/clickoutside.ts @@ -23,7 +23,7 @@ on(document, 'mouseup', (e: Event) => { }) function createDocumentHandler(el: HTMLElement, binding: Record, vnode: any) { - return function(mousedown: Event, mouseup: Event) { + return function(mouseup: Event, mousedown: Event) { if ( !vnode || !binding.instance || diff --git a/devui/shared/devui-directive/utils.ts b/devui/shared/devui-directive/utils.ts new file mode 100644 index 00000000..5af8184d --- /dev/null +++ b/devui/shared/devui-directive/utils.ts @@ -0,0 +1,23 @@ +// 事件处理 +export function on(element: HTMLElement | Document, eventName: string, handler: (this: Element, ev: Event) => any): void { + if (document.addEventListener) { + if (element && eventName && handler) { + element.addEventListener(eventName, handler, false) + } + } else { + if (element && eventName && handler) { + (element as any).attachEvent('on' + eventName, handler) + } + } +} +export function off(element: HTMLElement | Document, eventName: string, handler: (this: Element, ev: Event) => any): void { + if (document.removeEventListener) { + if (element && eventName && handler) { + element.removeEventListener(eventName, handler, false) + } + } else { + if (element && eventName && handler) { + (element as any).detachEvent('on' + eventName, handler) + } + } +} \ No newline at end of file diff --git a/devui/loading/src/component.ts b/devui/shared/scripts/component.ts similarity index 91% rename from devui/loading/src/component.ts rename to devui/shared/scripts/component.ts index 6b1d28eb..090fd7a3 100644 --- a/devui/loading/src/component.ts +++ b/devui/shared/scripts/component.ts @@ -20,5 +20,5 @@ export function createComponent(Component: any, props: any, children: any = null * @param {*} ComponnetInstance 通过createComponent方法得到的组件实例对象 */ export function unmountComponent(ComponnetInstance: any) { - render(null, ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]) + render(null, ComponnetInstance?.vnode[COMPONENT_CONTAINER_SYMBOL]) } -- Gitee