Merge branch 'master' of https://github.com/primefaces/primevue
Cagatay Civici
commit
b991539ba1
|
|
@ -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
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface CalendarProps {
|
|||
showIcon?: boolean;
|
||||
icon?: string;
|
||||
numberOfMonths?: number;
|
||||
responsiveOptions?: any[];
|
||||
view?: string;
|
||||
touchUI?: boolean;
|
||||
monthNavigator?: boolean;
|
||||
|
|
|
|||
|
|
@ -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,9 +321,15 @@ export default {
|
|||
this.updateCurrentMetaData();
|
||||
},
|
||||
mounted() {
|
||||
if (this.inline && !this.$attrs.disabled) {
|
||||
this.initFocusableCell();
|
||||
this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
|
||||
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() {
|
||||
|
|
@ -343,8 +350,9 @@ export default {
|
|||
}
|
||||
|
||||
if (this.mask) {
|
||||
this.destroyMask();
|
||||
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');
|
||||
},
|
||||
|
|
@ -756,7 +775,7 @@ export default {
|
|||
else {
|
||||
this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
|
||||
}
|
||||
|
||||
|
||||
DomHandler.absolutePosition(this.overlay, this.$el);
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -93,6 +93,10 @@ button {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.p-link:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Non vue overlay animations */
|
||||
.p-connected-overlay {
|
||||
opacity: 0;
|
||||
|
|
@ -161,4 +165,4 @@ button {
|
|||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
@ -144,4 +154,4 @@ export default {
|
|||
.special-day {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -447,18 +447,18 @@ 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>
|
||||
|
||||
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -650,18 +650,18 @@ 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>
|
||||
|
||||
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue