Fixed #3802 - Improve folder structure for nuxt configurations

This commit is contained in:
mertsincan 2023-03-26 06:22:57 +01:00
parent 851950270b
commit f5fe822afb
563 changed files with 1703 additions and 1095 deletions

116
components/lib/sidebar/Sidebar.d.ts vendored Executable file
View file

@ -0,0 +1,116 @@
/**
*
* Sidebar is a panel component displayed as an overlay at the edges of the screen.
*
* [Live Demo](https://primevue.org/sidebar)
*
* @module sidebar
*
*/
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
/**
* Defines valid properties in Sidebar component.
*/
export interface SidebarProps {
/**
* Specifies the visibility of the dialog.
* @defaultValue false
*/
visible?: boolean | undefined;
/**
* Specifies the position of the sidebar.
* @defaultValue left
*/
position?: 'left' | 'right' | 'top' | 'bottom' | 'full' | 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;
/**
* Icon to display in the sidebar close button.
* @defaultValue pi pi-times
*/
closeIcon?: string | undefined;
/**
* Whether to a modal layer behind the sidebar.
* @defaultValue true
*/
modal?: boolean | undefined;
/**
* Whether background scroll should be blocked when sidebar is visible.
* @defaultValue false
*/
blockScroll?: boolean | undefined;
}
/**
* Defines valid slots in Sidebar component.
*/
export interface SidebarSlots {
/**
* Custom content template.
*/
default(): VNode[];
/**
* Custom header template.
*/
header(): VNode[];
}
/**
* Defines valid emits in Sidebar component.
*/
export interface SidebarEmits {
/**
* Emitted when the value changes.
* @param {boolean} value - New value.
*/
'update:modelValue'(value: boolean): void;
/**
* Callback to invoke when sidebar gets shown.
*/
show(): void;
/**
* Callback to invoke when sidebar gets hidden.
*/
hide(): void;
}
/**
* **PrimeVue - Sidebar**
*
* _Sidebar is a panel component displayed as an overlay._
*
* [Live Demo](https://www.primevue.org/sidebar/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
declare class Sidebar extends ClassComponent<SidebarProps, SidebarSlots, SidebarEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Sidebar: GlobalComponentConstructor<Sidebar>;
}
}
export default Sidebar;

View file

@ -0,0 +1,122 @@
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', () => {
let wrapper;
beforeEach(async () => {
wrapper = mount(Sidebar, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true
}
},
props: {
visible: true,
bazeZIndex: 1000
},
slots: {
default: `<h3>Left Sidebar</h3>`,
header: `<span class="header">Header Template</span>`
}
});
});
afterEach(() => {
vi.clearAllMocks();
});
it('When mask element triggered, sidebar should be hide', async () => {
const hideSpy = vi.spyOn(wrapper.vm, 'hide');
await wrapper.find('.p-sidebar-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 () => {
const focusSpy = vi.spyOn(wrapper.vm, 'focus');
await wrapper.vm.onEnter();
expect(wrapper.emitted().show.length).toBe(1);
expect(wrapper.vm.containerVisible).toBeTruthy();
expect(focusSpy).toHaveBeenCalled();
});
it('When transition trigger to onLeave, hide should be triggered', async () => {
await wrapper.vm.onLeave();
expect(wrapper.emitted().hide.length).toBe(1);
});
it('When transition trigger to onAfterEnter, enableDocumentSettings should be triggered', async () => {
const enableDocumentSettingsSpy = vi.spyOn(wrapper.vm, 'enableDocumentSettings');
await wrapper.vm.onAfterEnter();
expect(enableDocumentSettingsSpy).toHaveBeenCalled();
});
it('When keydown is triggered , hide method should be triggered', async () => {
const hideSpy = vi.spyOn(wrapper.vm, 'hide');
await wrapper.find('.p-sidebar').trigger('keydown', { code: 'Escape' });
expect(hideSpy).toHaveBeenCalled();
});
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');
expect(hideSpy).toHaveBeenCalled();
});
it('When component is unmount , unbindOutsideClickListenerSpy method should be triggered', async () => {
const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener');
await wrapper.unmount();
expect(unbindOutsideClickListenerSpy).toHaveBeenCalled();
expect(Sidebar.container).toBe(null);
});
it('When hide is triggered , removeClass util should be called', async () => {
const removeClassSpy = vi.spyOn(DomHandler, 'removeClass');
await wrapper.setProps({ blockScroll: true });
wrapper.vm.disableDocumentSettings();
expect(removeClassSpy).toHaveBeenCalled();
});
it('When onEnter is triggered , addClass util should be called', async () => {
const addClassSpy = vi.spyOn(DomHandler, 'addClass');
await wrapper.setProps({ blockScroll: true });
wrapper.vm.enableDocumentSettings();
expect(addClassSpy).toHaveBeenCalled();
});
it('When onBeforeLeave is triggered , addClass util should be called', async () => {
const addClassSpy = vi.spyOn(DomHandler, 'addClass');
await wrapper.setProps({ modal: true });
wrapper.vm.onBeforeLeave();
expect(addClassSpy).toHaveBeenCalled();
});
it('When onAfterLeave is triggered , containerVisible should be false', async () => {
wrapper.vm.onAfterLeave();
expect(wrapper.vm.containerVisible).toBeFalsy();
});
});

View file

@ -0,0 +1,427 @@
<template>
<Portal>
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick">
<transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
<div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
<div :ref="headerContainerRef" class="p-sidebar-header">
<div v-if="$slots.header" class="p-sidebar-header-content">
<slot name="header"></slot>
</div>
<button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
<span :class="['p-sidebar-close-icon', closeIcon]" />
</button>
</div>
<div :ref="contentRef" class="p-sidebar-content">
<slot></slot>
</div>
</div>
</transition>
</div>
</Portal>
</template>
<script>
import FocusTrap from 'primevue/focustrap';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { DomHandler, ZIndexUtils } from 'primevue/utils';
export default {
name: 'Sidebar',
inheritAttrs: false,
emits: ['update:visible', 'show', 'hide', 'after-hide'],
props: {
visible: {
type: Boolean,
default: false
},
position: {
type: String,
default: 'left'
},
baseZIndex: {
type: Number,
default: 0
},
autoZIndex: {
type: Boolean,
default: true
},
dismissable: {
type: Boolean,
default: true
},
showCloseIcon: {
type: Boolean,
default: true
},
closeIcon: {
type: String,
default: 'pi pi-times'
},
modal: {
type: Boolean,
default: true
},
blockScroll: {
type: Boolean,
default: false
}
},
data() {
return {
containerVisible: this.visible
};
},
container: null,
mask: null,
content: null,
headerContainer: null,
closeButton: null,
outsideClickListener: null,
updated() {
if (this.visible) {
this.containerVisible = this.visible;
}
},
beforeUnmount() {
this.disableDocumentSettings();
if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask);
}
this.container = null;
this.mask = null;
},
methods: {
hide() {
this.$emit('update:visible', false);
},
onEnter() {
this.$emit('show');
this.focus();
if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
}
},
onAfterEnter() {
this.enableDocumentSettings();
},
onBeforeLeave() {
if (this.modal) {
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}
},
onLeave() {
this.$emit('hide');
},
onAfterLeave() {
if (this.autoZIndex) {
ZIndexUtils.clear(this.mask);
}
this.containerVisible = false;
this.disableDocumentSettings();
this.$emit('after-hide');
},
onMaskClick(event) {
if (this.dismissable && this.modal && this.mask === event.target) {
this.hide();
}
},
focus() {
const findFocusableElement = (container) => {
return container.querySelector('[autofocus]');
};
let focusTarget = this.$slots.default && findFocusableElement(this.content);
if (!focusTarget) {
focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
if (!focusTarget) {
focusTarget = findFocusableElement(this.container);
}
}
focusTarget && focusTarget.focus();
},
enableDocumentSettings() {
if (this.dismissable && !this.modal) {
this.bindOutsideClickListener();
}
if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
disableDocumentSettings() {
this.unbindOutsideClickListener();
if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
onKeydown(event) {
if (event.code === 'Escape') {
this.hide();
}
},
containerRef(el) {
this.container = el;
},
maskRef(el) {
this.mask = el;
},
contentRef(el) {
this.content = el;
},
headerContainerRef(el) {
this.headerContainer = el;
},
closeButtonRef(el) {
this.closeButton = el;
},
getPositionClass() {
const positions = ['left', 'right', 'top', 'bottom'];
const pos = positions.find((item) => item === this.position);
return pos ? `p-sidebar-${pos}` : '';
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.isOutsideClicked(event)) {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
isOutsideClicked(event) {
return this.container && !this.container.contains(event.target);
}
},
computed: {
containerClass() {
return [
'p-sidebar p-component',
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false,
'p-sidebar-full': this.fullScreen
}
];
},
fullScreen() {
return this.position === 'full';
},
closeAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
},
maskClass() {
return [
'p-sidebar-mask',
this.getPositionClass(),
{
'p-component-overlay p-component-overlay-enter': this.modal,
'p-sidebar-mask-scrollblocker': this.blockScroll,
'p-sidebar-visible': this.containerVisible,
'p-sidebar-full': this.fullScreen
}
];
}
},
directives: {
focustrap: FocusTrap,
ripple: Ripple
},
components: {
Portal: Portal
}
};
</script>
<style>
.p-sidebar-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
pointer-events: none;
background-color: transparent;
transition-property: background-color;
}
.p-sidebar-mask.p-component-overlay {
pointer-events: auto;
}
.p-sidebar-visible {
display: flex;
}
.p-sidebar {
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
}
.p-sidebar-content {
overflow-y: auto;
flex-grow: 1;
}
.p-sidebar-header {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
.p-sidebar-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-sidebar-full .p-sidebar {
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
max-height: 100%;
top: 0px !important;
left: 0px !important;
}
/* Animation */
/* Center */
.p-sidebar-left .p-sidebar-enter-from,
.p-sidebar-left .p-sidebar-leave-to {
transform: translateX(-100%);
}
.p-sidebar-right .p-sidebar-enter-from,
.p-sidebar-right .p-sidebar-leave-to {
transform: translateX(100%);
}
.p-sidebar-top .p-sidebar-enter-from,
.p-sidebar-top .p-sidebar-leave-to {
transform: translateY(-100%);
}
.p-sidebar-bottom .p-sidebar-enter-from,
.p-sidebar-bottom .p-sidebar-leave-to {
transform: translateY(100%);
}
.p-sidebar-full .p-sidebar-enter-from,
.p-sidebar-full .p-sidebar-leave-to {
opacity: 0;
}
.p-sidebar-full .p-sidebar-enter-active,
.p-sidebar-full .p-sidebar-leave-active {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Position */
.p-sidebar-left {
justify-content: flex-start;
}
.p-sidebar-right {
justify-content: flex-end;
}
.p-sidebar-top {
align-items: flex-start;
}
.p-sidebar-bottom {
align-items: flex-end;
}
/* Size */
.p-sidebar-left .p-sidebar {
width: 20rem;
height: 100%;
}
.p-sidebar-right .p-sidebar {
width: 20rem;
height: 100%;
}
.p-sidebar-top .p-sidebar {
height: 10rem;
width: 100%;
}
.p-sidebar-bottom .p-sidebar {
height: 10rem;
width: 100%;
}
.p-sidebar-left .p-sidebar-sm,
.p-sidebar-right .p-sidebar-sm {
width: 20rem;
}
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-md {
width: 40rem;
}
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-right .p-sidebar-lg {
width: 60rem;
}
.p-sidebar-top .p-sidebar-sm,
.p-sidebar-bottom .p-sidebar-sm {
height: 10rem;
}
.p-sidebar-top .p-sidebar-md,
.p-sidebar-bottom .p-sidebar-md {
height: 20rem;
}
.p-sidebar-top .p-sidebar-lg,
.p-sidebar-bottom .p-sidebar-lg {
height: 30rem;
}
.p-sidebar-left .p-sidebar-content,
.p-sidebar-right .p-sidebar-content,
.p-sidebar-top .p-sidebar-content,
.p-sidebar-bottom .p-sidebar-content {
width: 100%;
height: 100%;
}
@media screen and (max-width: 64em) {
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-lg,
.p-sidebar-right .p-sidebar-md {
width: 20rem;
}
}
</style>

View file

@ -0,0 +1,9 @@
{
"main": "./sidebar.cjs.js",
"module": "./sidebar.esm.js",
"unpkg": "./sidebar.min.js",
"types": "./Sidebar.d.ts",
"browser": {
"./sfc": "./Sidebar.vue"
}
}