Skip to content

Commit

Permalink
Refactor #5612 - Sidebar / Drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
tugcekucukoglu committed Apr 18, 2024
1 parent 365879a commit fcf8599
Show file tree
Hide file tree
Showing 16 changed files with 614 additions and 503 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import SidebarStyle from 'primevue/sidebar/style';
import DrawerStyle from 'primevue/drawer/style';
export default {
name: 'BaseSidebar',
name: 'BaseDrawer',
extends: BaseComponent,
props: {
visible: {
Expand Down Expand Up @@ -53,7 +53,7 @@ export default {
default: false
}
},
style: SidebarStyle,
style: DrawerStyle,
provide() {
return {
$parentInstance: this
Expand Down
285 changes: 285 additions & 0 deletions components/lib/drawer/Drawer.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,285 @@
/**
*
* Drawer is a panel component displayed as an overlay at the edges of the screen.
*
* [Live Demo](https://primevue.org/drawer)
*
* @module drawer
*
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';

export declare type DrawerPassThroughOptionType = DrawerPassThroughAttributes | ((options: DrawerPassThroughMethodOptions) => DrawerPassThroughAttributes | string) | string | null | undefined;

export declare type DrawerPassThroughTransitionType = TransitionProps | ((options: DrawerPassThroughMethodOptions) => TransitionProps) | undefined;

/**
* Custom passthrough(pt) option method.
*/
export interface DrawerPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DrawerProps;
/**
* Defines current inline state.
*/
state: DrawerState;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}

/**
* Custom shared passthrough(pt) option method.
*/
export interface DrawerSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DrawerProps;
/**
* Defines current inline state.
*/
state: DrawerState;
}

/**
* Custom passthrough(pt) options.
* @see {@link DrawerProps.pt}
*/
export interface DrawerPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the header's DOM element.
*/
header?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the header content's DOM element.
*/
title?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
toggler?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the mask's DOM element.
*/
mask?: DrawerPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: DrawerPassThroughTransitionType;
}

/**
* Custom passthrough attributes for each DOM elements
*/
export interface DrawerPassThroughAttributes {
[key: string]: any;
}

/**
* Defines current inline state in Drawer component.
*/
export interface DrawerState {
/**
* Current container visible state as a boolean.
* @defaultValue false
*/
containerVisible: boolean;
}

/**
* Defines valid properties in Drawer component.
*/
export interface DrawerProps {
/**
* Specifies the visibility of the dialog.
* @defaultValue false
*/
visible?: boolean | undefined;
/**
* Specifies the position of the drawer.
* @defaultValue left
*/
position?: 'left' | 'right' | 'top' | 'bottom' | 'full' | undefined;
/**
* Title content of the dialog.
*/
header?: string | undefined;
/**
* Base zIndex value to use in layering.
* @defaultValue 0
*/
baseZIndex?: number | undefined;
/**
* Whether to automatically manage layering.
* @defaultValue true
*/
autoZIndex?: boolean | undefined;
/**
* Whether clicking outside closes the panel.
* @defaultValue true
*/
dismissable?: boolean | undefined;
/**
* Whether to display a close icon inside the panel.
* @defaultValue true
*/
showCloseIcon?: boolean | undefined;
/**
* Used to pass the custom value to read for the button inside the component.
* @defaultValue { severity: 'secondary', text: true, rounded: true }
*/
closeButtonProps?: object | undefined;
/**
* Icon to display in the drawer close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/
closeIcon?: string | undefined;
/**
* Whether to a modal layer behind the drawer.
* @defaultValue true
*/
modal?: boolean | undefined;
/**
* Whether background scroll should be blocked when drawer is visible.
* @defaultValue false
*/
blockScroll?: boolean | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/
dt?: DesignToken<any>;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {DrawerPassThroughOptions}
*/
pt?: PassThrough<DrawerPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
* Defines valid slots in Drawer component.
*/
export interface DrawerSlots {
/**
* Custom content template.
*/
default(): VNode[];
/**
* Custom header template.
* @param {Object} scope - header slot's params.
*/
header(scope: {
/**
* Style class of the header title
*/
class: any;
}): VNode[];
/**
* Custom close icon template.
* @param {Object} scope - close icon slot's params.
*/
closeicon(scope: {
/**
* Style class of the close icon
*/
class: any;
}): VNode[];
/**
* Custom container slot.
* @param {Object} scope - container slot's params.
*/
container(scope: {
/**
* Close drawer function.
* @deprecated since v3.39.0. Use 'closeCallback' property instead.
*/
onClose: () => void;
/**
* Close drawer function.
*/
closeCallback: () => void;
}): VNode[];
}

/**
* Defines valid emits in Drawer component.
*/
export interface DrawerEmits {
/**
* Emitted when the value changes.
* @param {boolean} value - New value.
*/
'update:modelValue'(value: boolean): void;
/**
* Callback to invoke when drawer gets shown.
*/
show(): void;
/**
* Callback to invoke when drawer gets hidden.
*/
hide(): void;
}

/**
* **PrimeVue - Drawer**
*
* _Drawer is a panel component displayed as an overlay._
*
* [Live Demo](https://www.primevue.org/drawer/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
declare class Drawer extends ClassComponent<DrawerProps, DrawerSlots, DrawerEmits> {}

declare module 'vue' {
export interface GlobalComponents {
Drawer: GlobalComponentConstructor<Drawer>;
}
}

export default Drawer;
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import { describe, expect, it } from 'vitest';
import DomHandler from '../utils/DomHandler';
import Sidebar from './Sidebar.vue';
describe('Sidebar.vue', () => {
import Drawer from './Drawer.vue';

describe('Drawer.vue', () => {
let wrapper;

beforeEach(async () => {
wrapper = mount(Sidebar, {
wrapper = mount(Drawer, {
global: {
plugins: [PrimeVue],
stubs: {
Expand All @@ -19,7 +20,7 @@ describe('Sidebar.vue', () => {
bazeZIndex: 1000
},
slots: {
default: `<h3>Left Sidebar</h3>`,
default: `<h3>Left Drawer</h3>`,
header: `<span class="header">Header Template</span>`
}
});
Expand All @@ -29,16 +30,16 @@ describe('Sidebar.vue', () => {
vi.clearAllMocks();
});

it('When mask element triggered, sidebar should be hide', async () => {
it('When mask element triggered, drawer should be hide', async () => {
const hideSpy = vi.spyOn(wrapper.vm, 'hide');

await wrapper.find('.p-sidebar-mask').trigger('mousedown');
await wrapper.find('.p-drawer-mask').trigger('mousedown');

expect(wrapper.emitted()['update:visible'].length).toBe(1);
expect(hideSpy).toHaveBeenCalled();
});

it('When transition trigger to onEnter, sidebar should be visible', async () => {
it('When transition trigger to onEnter, drawer should be visible', async () => {
const focusSpy = vi.spyOn(wrapper.vm, 'focus');

await wrapper.vm.onEnter();
Expand Down Expand Up @@ -73,7 +74,7 @@ describe('Sidebar.vue', () => {
it('When keydown is triggered , hide method should be triggered', async () => {
const hideSpy = vi.spyOn(wrapper.vm, 'hide');

await wrapper.find('.p-sidebar-close').trigger('click');
await wrapper.find('.p-drawer-close').trigger('click');

expect(hideSpy).toHaveBeenCalled();
});
Expand All @@ -84,7 +85,7 @@ describe('Sidebar.vue', () => {
await wrapper.unmount();

expect(unbindOutsideClickListenerSpy).toHaveBeenCalled();
expect(Sidebar.container).toBe(null);
expect(Drawer.container).toBe(null);
});

it('When hide is triggered , removeClass util should be called', async () => {
Expand Down
Loading

0 comments on commit fcf8599

Please sign in to comment.