mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
147
components/lib/splitbutton/SplitButton.d.ts
vendored
Executable file
147
components/lib/splitbutton/SplitButton.d.ts
vendored
Executable file
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
*
|
||||
* SplitButton groups a set of commands in an overlay with a default command.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/splitbutton/)
|
||||
*
|
||||
* @module splitbutton
|
||||
*
|
||||
*/
|
||||
import { ButtonHTMLAttributes, VNode } from 'vue';
|
||||
import { MenuItem } from '../menuitem';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
/**
|
||||
* Defines valid properties in SplitButton component.
|
||||
*/
|
||||
export interface SplitButtonProps {
|
||||
/**
|
||||
* Text of the button.
|
||||
*/
|
||||
label?: string | undefined;
|
||||
/**
|
||||
* Name of the icon.
|
||||
*/
|
||||
icon?: string | undefined;
|
||||
/**
|
||||
* MenuModel instance to define the overlay items.
|
||||
*/
|
||||
model?: MenuItem[] | undefined;
|
||||
/**
|
||||
* Whether to automatically manage layering.
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoZIndex?: boolean | undefined;
|
||||
/**
|
||||
* Base zIndex value to use in layering.
|
||||
* @defaultValue 0
|
||||
*/
|
||||
baseZIndex?: number | undefined;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
||||
* Special keywords are 'body' for document body and 'self' for the element itself.
|
||||
* @defaultValue body
|
||||
*/
|
||||
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
|
||||
/**
|
||||
* When present, it specifies that the element should be disabled.
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* Style class of the component.
|
||||
*/
|
||||
class?: any | undefined;
|
||||
/**
|
||||
* Inline style of the component.
|
||||
*/
|
||||
style?: any | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLButtonElement to the default button.
|
||||
*/
|
||||
buttonProps?: ButtonHTMLAttributes | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLButtonElement to the menu button.
|
||||
*/
|
||||
menuButtonProps?: ButtonHTMLAttributes | undefined;
|
||||
/**
|
||||
* Name of the menu button icon.
|
||||
*/
|
||||
menuButtonIcon?: string | undefined;
|
||||
/**
|
||||
* Defines the style of the button.
|
||||
*/
|
||||
severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | undefined;
|
||||
/**
|
||||
* Add a shadow to indicate elevation.
|
||||
* @defaultValue false
|
||||
*/
|
||||
raised?: boolean | undefined;
|
||||
/**
|
||||
* Add a circular border radius to the button.
|
||||
* @defaultValue false
|
||||
*/
|
||||
rounded?: boolean | undefined;
|
||||
/**
|
||||
* Add a textual class to the button without a background initially.
|
||||
* @defaultValue false
|
||||
*/
|
||||
text?: boolean | undefined;
|
||||
/**
|
||||
* Add a border class without a background initially.
|
||||
* @defaultValue false
|
||||
*/
|
||||
outlined?: boolean | undefined;
|
||||
/**
|
||||
* Defines the size of the button.
|
||||
*/
|
||||
size?: 'small' | 'large' | undefined;
|
||||
/**
|
||||
* Add a plain textual class to the button without a background initially.
|
||||
* @defaultValue false
|
||||
*/
|
||||
plain?: boolean | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in SplitButton component.
|
||||
*/
|
||||
export interface SplitButtonSlots {
|
||||
/**
|
||||
* Button part of the content can easily be customized with the default slot instead of using the built-in modes.
|
||||
*/
|
||||
default(): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid emits in SplitButton component.
|
||||
*/
|
||||
export interface SplitButtonEmits {
|
||||
/**
|
||||
* Callback to invoke when main button is clicked.
|
||||
* @param {Event} event - Browser event.
|
||||
*/
|
||||
click(event: Event): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - SplitButton**
|
||||
*
|
||||
* _SplitButton groups a set of commands in an overlay with a default command._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/splitbutton/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
SplitButton: GlobalComponentConstructor<SplitButton>;
|
||||
}
|
||||
}
|
||||
|
||||
export default SplitButton;
|
||||
56
components/lib/splitbutton/SplitButton.spec.js
Normal file
56
components/lib/splitbutton/SplitButton.spec.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import SplitButton from './SplitButton.vue';
|
||||
|
||||
describe('SplitButton.vue', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(SplitButton, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true,
|
||||
'router-link': true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
label: 'Save',
|
||||
model: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.vm.onDropdownButtonClick();
|
||||
});
|
||||
|
||||
it('should exist', () => {
|
||||
expect(wrapper.find('.p-splitbutton.p-component').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-tieredmenu.p-component').exists()).toBe(true);
|
||||
expect(wrapper.findAll('li.p-menuitem').length).toBe(4);
|
||||
expect(wrapper.find('.p-splitbutton-defaultbutton').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-button-label').text()).toBe('Save');
|
||||
});
|
||||
|
||||
it('should hide when default button is clicked', async () => {
|
||||
await wrapper.vm.onDefaultButtonClick();
|
||||
|
||||
expect(wrapper.emitted()['click'][0]).toEqual([undefined]);
|
||||
});
|
||||
});
|
||||
192
components/lib/splitbutton/SplitButton.vue
Executable file
192
components/lib/splitbutton/SplitButton.vue
Executable file
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<div :class="containerClass" :style="style">
|
||||
<slot>
|
||||
<PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
|
||||
</slot>
|
||||
<PVSButton
|
||||
ref="button"
|
||||
type="button"
|
||||
class="p-splitbutton-menubutton"
|
||||
:icon="menuButtonIcon"
|
||||
:disabled="disabled"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="isExpanded"
|
||||
:aria-controls="ariaId + '_overlay'"
|
||||
@click="onDropdownButtonClick"
|
||||
@keydown="onDropdownKeydown"
|
||||
v-bind="menuButtonProps"
|
||||
/>
|
||||
<PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from 'primevue/button';
|
||||
import TieredMenu from 'primevue/tieredmenu';
|
||||
import { UniqueComponentId } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'SplitButton',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
class: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
style: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
buttonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-chevron-down'
|
||||
},
|
||||
severity: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
raised: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpanded: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDropdownButtonClick() {
|
||||
this.$refs.menu.toggle({ currentTarget: this.$el, relatedTarget: this.$refs.button.$el });
|
||||
this.isExpanded = !this.$refs.menu.visible;
|
||||
},
|
||||
onDropdownKeydown(event) {
|
||||
if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
|
||||
this.onDropdownButtonClick();
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onDefaultButtonClick(event) {
|
||||
if (this.isExpanded) {
|
||||
this.$refs.menu.hide(event);
|
||||
}
|
||||
|
||||
this.$emit('click', event);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ariaId() {
|
||||
return UniqueComponentId();
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
'p-splitbutton p-component',
|
||||
this.class,
|
||||
{
|
||||
[`p-button-${this.severity}`]: this.severity,
|
||||
'p-button-raised': this.raised,
|
||||
'p-button-rounded': this.rounded,
|
||||
'p-button-text': this.text,
|
||||
'p-button-outlined': this.outlined,
|
||||
'p-button-sm': this.size === 'small',
|
||||
'p-button-lg': this.size === 'large'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
PVSButton: Button,
|
||||
PVSMenu: TieredMenu
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-splitbutton {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-splitbutton-defaultbutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
|
||||
flex: 1 1 auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-splitbutton {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
9
components/lib/splitbutton/package.json
Normal file
9
components/lib/splitbutton/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./splitbutton.cjs.js",
|
||||
"module": "./splitbutton.esm.js",
|
||||
"unpkg": "./splitbutton.min.js",
|
||||
"types": "./SplitButton.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./SplitButton.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue