vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/1751/head
Cagatay Civici 2021-11-12 18:13:08 +03:00
parent 32c8b7723d c5a81a8d9c
commit b991539ba1
17 changed files with 278 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
api-generator/components/colorpicker.js
View File

@ -67,10 +67,38 @@ const ColorPickerProps = [
}
];
const ColorPickerEvents = [
{
name: "change",
description: "Callback to invoke when a color is selected.",
arguments: [
{
name: "event.originalEvent",
type: "object",
description: "Original event"
},
{
name: "event.value",
type: "any",
description: "Selected color"
}
]
},
{
name: "show",
description: "Callback to invoke when popup is shown."
},
{
name: "hide",
description: "Callback to invoke when popup is hidden."
}
];
module.exports = {
colorpicker: {
name: "ColorPicker",
description: "ColorPicker is an input component to select a color.",
props: ColorPickerProps
props: ColorPickerProps,
events: ColorPickerEvents
}
};

16
api-generator/components/selectbutton.js
View File

@ -56,6 +56,22 @@ const SelectButtonProps = [
];
const SelectButtonEvents = [
{
name: "change",
description: "Callback to invoke on value change.",
arguments: [
{
name: "event.originalEvent",
type: "object",
description: "Browser event"
},
{
name: "event.value",
type: "any",
description: "Single value or an array of values that are selected."
}
]
},
{
name: "focus",
description: "Callback to invoke on focus.",

1
src/components/calendar/Calendar.d.ts vendored
View File

@ -10,6 +10,7 @@ interface CalendarProps {
showIcon?: boolean;
icon?: string;
numberOfMonths?: number;
responsiveOptions?: any[];
view?: string;
touchUI?: boolean;
monthNavigator?: boolean;

90
src/components/calendar/Calendar.vue
View File

@ -11,14 +11,14 @@
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
<div class="p-datepicker-header">
<slot name="header"></slot>
<button class="p-datepicker-prev p-link" v-if="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
<button class="p-datepicker-prev p-link" v-show="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-datepicker-title">
<button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="$attrs.disabled">
<button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="switchViewButtonDisabled">
{{getMonthName(month.month)}}
</button>
<button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="$attrs.disabled">
<button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="switchViewButtonDisabled">
{{currentYear}}
</button>
<span class="p-datepicker-decade" v-if="currentView === 'year'">
@ -27,7 +27,7 @@
</slot>
</span>
</div>
<button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
<button class="p-datepicker-next p-link" v-show="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
@click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
<span class="p-datepicker-next-icon pi pi-chevron-right"></span>
</button>
@ -142,7 +142,7 @@
</template>
<script>
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import InputText from 'primevue/inputtext';
import Button from 'primevue/button';
@ -186,6 +186,7 @@ export default {
type: Number,
default: 1
},
responsiveOptions: Array,
view: {
type: String,
default: 'date'
@ -320,10 +321,16 @@ export default {
this.updateCurrentMetaData();
},
mounted() {
if (this.inline && !this.$attrs.disabled) {
this.createResponsiveStyle();
if (this.inline) {
this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
if (!this.$attrs.disabled) {
this.initFocusableCell();
this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
}
}
},
updated() {
if (this.overlay) {
@ -345,6 +352,7 @@ export default {
if (this.mask) {
this.destroyMask();
}
this.destroyResponsiveStyleElement();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -383,6 +391,14 @@ export default {
if (this.overlay) {
setTimeout(this.updateFocus, 0);
}
},
numberOfMonths() {
this.destroyResponsiveStyleElement();
this.createResponsiveStyle();
},
responsiveOptions() {
this.destroyResponsiveStyleElement();
this.createResponsiveStyle();
}
},
methods: {
@ -551,12 +567,15 @@ export default {
return validMin && validMax && validDate && validDay;
},
onOverlayEnter(el) {
el.setAttribute(this.attributeSelector, '');
if (this.autoZIndex) {
if (this.touchUI)
ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
else
ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
}
this.alignOverlay();
this.$emit('show');
},
@ -2116,6 +2135,53 @@ export default {
target: this.$el
});
}
},
createResponsiveStyle() {
if (this.numberOfMonths > 1 && this.responsiveOptions) {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css';
document.body.appendChild(this.responsiveStyleElement);
}
let innerHTML = '';
if (this.responsiveOptions) {
let responsiveOptions = [...this.responsiveOptions]
.filter(o => !!(o.breakpoint && o.numMonths))
.sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
for (let i = 0; i < responsiveOptions.length; i++) {
let { breakpoint, numMonths } = responsiveOptions[i];
let styles = `
.p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
display: inline-flex !important;
}
`;
for (let j = numMonths; j < this.numberOfMonths; j++) {
styles += `
.p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
display: none !important;
}
`
}
innerHTML += `
@media screen and (max-width: ${breakpoint}) {
${styles}
}
`
}
}
this.responsiveStyleElement.innerHTML = innerHTML;
}
},
destroyResponsiveStyleElement() {
if (this.responsiveStyleElement) {
this.responsiveStyleElement.remove();
this.responsiveStyleElement = null;
}
}
},
computed: {
@ -2315,6 +2381,12 @@ export default {
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
attributeSelector() {
return UniqueComponentId();
},
switchViewButtonDisabled() {
return this.numberOfMonths > 1 || this.$attrs.disabled;
}
},
components: {
@ -2331,6 +2403,7 @@ export default {
.p-calendar {
position: relative;
display: inline-flex;
max-width: 100%;
}
.p-calendar .p-inputtext {
@ -2372,6 +2445,7 @@ export default {
.p-datepicker-inline {
display: inline-block;
position: static;
overflow-x: auto;
}
/* Header */
@ -2400,6 +2474,10 @@ export default {
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;

3
src/components/colorpicker/ColorPicker.d.ts vendored
View File

@ -15,6 +15,9 @@ interface ColorPickerProps {
declare class ColorPicker {
$props: ColorPickerProps;
$emit(eventName: 'update:modelValue', value: any): this;
$emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
}
export default ColorPicker;

7
src/components/colorpicker/ColorPicker.vue
View File

@ -29,7 +29,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
export default {
name: 'ColorPicker',
emits: ['update:modelValue'],
emits: ['update:modelValue', 'change', 'show', 'hide'],
props: {
modelValue: {
type: null,
@ -141,6 +141,7 @@ export default {
this.updateColorHandle();
this.updateInput();
this.updateModel();
this.$emit('change', {event: event, value: this.modelValue});
},
pickHue(event) {
let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
@ -155,6 +156,7 @@ export default {
this.updateHue();
this.updateModel();
this.updateInput();
this.$emit('change', {event: event, value: this.modelValue});
},
updateModel() {
switch(this.format) {
@ -354,12 +356,15 @@ export default {
if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
}
this.$emit('show');
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.clearRefs();
this.$emit('hide');
},
onOverlayAfterLeave(el) {
if (this.autoZIndex) {

4
src/components/common/Common.css
View File

@ -93,6 +93,10 @@ button {
user-select: none;
}
.p-link:disabled {
cursor: default;
}
/* Non vue overlay animations */
.p-connected-overlay {
opacity: 0;

1
src/components/selectbutton/SelectButton.d.ts vendored
View File

@ -18,6 +18,7 @@ interface SelectButtonOptionSlotInterface {
declare class SelectButton {
$props: SelectButtonProps;
$emit(eventName: 'update:modelValue', value: any): this;
$emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$slots: {

3
src/components/selectbutton/SelectButton.vue
View File

@ -17,7 +17,7 @@ import Ripple from 'primevue/ripple';
export default {
name: 'SelectButton',
emits: ['update:modelValue', 'focus', 'blur'],
emits: ['update:modelValue', 'focus', 'blur', 'change'],
props: {
modelValue: null,
options: Array,
@ -62,6 +62,7 @@ export default {
}
this.$emit('update:modelValue', newValue);
this.$emit('change', {event: event, value: newValue});
},
isSelected(option) {
let selected = false;

14
src/views/calendar/CalendarDemo.vue
View File

@ -62,7 +62,7 @@
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
@ -131,7 +131,17 @@ export default {
dates2: null,
minDate: null,
maxDate: null,
invalidDates: null
invalidDates: null,
responsiveOptions: [
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]
}
},
components: {

48
src/views/calendar/CalendarDoc.vue
View File

@ -241,6 +241,12 @@ export default {
<td>1</td>
<td>Number of months to display.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>view</td>
<td>string</td>
@ -656,7 +662,7 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
@ -719,7 +725,17 @@ export default {
dates2: null,
minDate: null,
maxDate: null,
invalidDates: null
invalidDates: null,
responsiveOptions: [
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]
}
}
}
@ -789,7 +805,7 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
@ -843,6 +859,16 @@ export default {
const date14 = ref();
const dates1 = ref();
const dates2 = ref();
const responsiveOptions = ref([
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]);
minDate.value.setMonth(prevMonth);
minDate.value.setFullYear(prevYear);
@ -854,7 +880,7 @@ export default {
invalidDates.value = [today, invalidDate];
return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
}
}
<\\/script>
@ -922,7 +948,7 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
@ -975,6 +1001,16 @@ export default {
const date14 = ref();
const dates1 = ref();
const dates2 = ref();
const responsiveOptions = ref([
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]);
minDate.value.setMonth(prevMonth);
minDate.value.setFullYear(prevYear);
@ -986,7 +1022,7 @@ export default {
invalidDates.value = [today, invalidDate];
return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
},
components: {
"p-calendar": primevue.calendar

32
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -122,6 +122,38 @@ export default {
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Browser event <br >
event.value: Selected color
</td>
<td>Callback to invoke when a color is selected.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when popup is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when popup is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper">

8
src/views/confirmdialog/ConfirmDialogDemo.vue
View File

@ -24,14 +24,14 @@
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div>
</div>
</div>

24
src/views/confirmdialog/ConfirmDialogDoc.vue
View File

@ -281,14 +281,14 @@ export default {
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div>
</div>
</div>
@ -366,14 +366,14 @@ export default {
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div>
<div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div>
</div>
</div>
@ -464,14 +464,14 @@ export default defineComponent({
<p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button>
</div>
<div class="p-col">
<p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
<p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
<p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></p-button>
<p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></p-button>
<p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button>
</div>
<div class="p-col">
<p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
<p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
<p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></p-button>
<p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></p-button>
<p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button>
</div>
</div>
</div>

8
src/views/dialog/DialogDemo.vue
View File

@ -103,13 +103,13 @@
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</div>

24
src/views/dialog/DialogDoc.vue
View File

@ -447,13 +447,13 @@ export default {
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</div>
@ -650,13 +650,13 @@ p {
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</div>
@ -854,13 +854,13 @@ p {
</div>
<div class="p-col">
<p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button>
<p-button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning"></p-button>
<p-button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning"></p-button>
<p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button>
<p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button>
</div>
<div class="p-col">
<p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button>
<p-button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
<p-button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
<p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
<p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
</div>
</div>

6
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -139,6 +139,12 @@ export default {
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: browser event <br>
event.value: Single value or an array of values that are selected.</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>focus</td>
<td>event: Browser event</td>