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

Refactor #3965 - Update method name

pull/3997/head
mertsincan 2023-05-19 12:14:50 +01:00
parent 717e0d79e6
commit 202c208e7a
4 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/basecomponent/BaseComponent.vue
View File

@ -51,10 +51,10 @@ export default {
ptmo(obj = {}, key = '', params = {}) { ptmo(obj = {}, key = '', params = {}) {
return this.getPTValue(obj, key, params); return this.getPTValue(obj, key, params);
}, },
css(key = '', params = {}) { cx(key = '', params = {}) {
return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.style && this.$options.style.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined; return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.style && this.$options.style.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
}, },
style(key = '', when = true, params = {}) { sx(key = '', when = true, params = {}) {
if (when) { if (when) {
const self = ObjectUtils.getItemValue(this.getOption(this.$options.style && this.$options.style.inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params }); const self = ObjectUtils.getItemValue(this.getOption(this.$options.style && this.$options.style.inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });
const base = ObjectUtils.getItemValue(this.getOption(inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params }); const base = ObjectUtils.getItemValue(this.getOption(inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });

100
components/lib/calendar/Calendar.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<span ref="container" :id="id" :class="css('root')" :style="style('root')" data-pc-name="calendar" data-pc-section="root" v-bind="ptm('root')"> <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" data-pc-name="calendar" data-pc-section="root" v-bind="ptm('root')">
<input <input
v-if="!inline" v-if="!inline"
:ref="inputRef" :ref="inputRef"
:id="inputId" :id="inputId"
type="text" type="text"
role="combobox" role="combobox"
:class="[css('input'), inputClass]" :class="[cx('input'), inputClass]"
:style="inputStyle" :style="inputStyle"
:placeholder="placeholder" :placeholder="placeholder"
autocomplete="off" autocomplete="off"
@ -29,7 +29,7 @@
/> />
<CalendarButton <CalendarButton
v-if="showIcon" v-if="showIcon"
:class="css('dropdownButton')" :class="cx('dropdownButton')"
:disabled="disabled" :disabled="disabled"
@click="onButtonClick" @click="onButtonClick"
type="button" type="button"
@ -51,7 +51,7 @@
v-if="inline || overlayVisible" v-if="inline || overlayVisible"
:ref="overlayRef" :ref="overlayRef"
:id="panelId" :id="panelId"
:class="css('panel')" :class="cx('panel')"
:style="panelStyle" :style="panelStyle"
:role="inline ? null : 'dialog'" :role="inline ? null : 'dialog'"
:aria-modal="inline ? null : 'true'" :aria-modal="inline ? null : 'true'"
@ -62,15 +62,15 @@
v-bind="{ ...panelProps, ...ptm('panel') }" v-bind="{ ...panelProps, ...ptm('panel') }"
> >
<template v-if="!timeOnly"> <template v-if="!timeOnly">
<div :class="css('groupContainer')" v-bind="ptm('groupContainer')"> <div :class="cx('groupContainer')" v-bind="ptm('groupContainer')">
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="css('group')" v-bind="ptm('group')"> <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('group')" v-bind="ptm('group')">
<div :class="css('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot> <slot name="header"></slot>
<button <button
v-show="showOtherMonths ? groupIndex === 0 : false" v-show="showOtherMonths ? groupIndex === 0 : false"
:ref="previousButtonRef" :ref="previousButtonRef"
v-ripple v-ripple
:class="css('previousButton')" :class="cx('previousButton')"
@click="onPrevButtonClick" @click="onPrevButtonClick"
type="button" type="button"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
@ -79,16 +79,16 @@
v-bind="ptm('previousButton')" v-bind="ptm('previousButton')"
> >
<slot name="previousicon"> <slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[css('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" /> <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
</slot> </slot>
</button> </button>
<div :class="css('title')" v-bind="ptm('title')"> <div :class="cx('title')" v-bind="ptm('title')">
<button <button
v-if="currentView === 'date'" v-if="currentView === 'date'"
type="button" type="button"
@click="switchToMonthView" @click="switchToMonthView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="css('monthTitle')" :class="cx('monthTitle')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')" v-bind="ptm('monthTitle')"
@ -100,14 +100,14 @@
type="button" type="button"
@click="switchToYearView" @click="switchToYearView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="css('yearTitle')" :class="cx('yearTitle')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')" v-bind="ptm('yearTitle')"
> >
{{ getYear(month) }} {{ getYear(month) }}
</button> </button>
<span v-if="currentView === 'year'" :class="css('decadeTitle')" v-bind="ptm('decadeTitle')"> <span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
<slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot> <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span> </span>
</div> </div>
@ -115,7 +115,7 @@
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false" v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
:ref="nextButtonRef" :ref="nextButtonRef"
v-ripple v-ripple
:class="css('nextButton')" :class="cx('nextButton')"
@click="onNextButtonClick" @click="onNextButtonClick"
type="button" type="button"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
@ -124,15 +124,15 @@
v-bind="ptm('nextButton')" v-bind="ptm('nextButton')"
> >
<slot name="nexticon"> <slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[css('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" /> <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="currentView === 'date'" :class="css('container')" v-bind="ptm('container')"> <div v-if="currentView === 'date'" :class="cx('container')" v-bind="ptm('container')">
<table :class="css('table')" role="grid" v-bind="ptm('table')"> <table :class="cx('table')" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')"> <thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')"> <tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" :class="css('weekHeader')" :data-p-disabled="true" v-bind="ptm('weekHeader')"> <th v-if="showWeek" scope="col" :class="cx('weekHeader')" :data-p-disabled="true" v-bind="ptm('weekHeader')">
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span> <span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
</th> </th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')"> <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
@ -142,16 +142,16 @@
</thead> </thead>
<tbody v-bind="ptm('tableBody')"> <tbody v-bind="ptm('tableBody')">
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')"> <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
<td v-if="showWeek" :class="css('weekNumber')" v-bind="ptm('weekNumber')"> <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')">
<span :class="css('weekLabelContainer')" :data-p-disabled="true" v-bind="ptm('weekLabelContainer')"> <span :class="cx('weekLabelContainer')" :data-p-disabled="true" v-bind="ptm('weekLabelContainer')">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span> <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
{{ month.weekNumbers[i] }} {{ month.weekNumbers[i] }}
</span> </span>
</td> </td>
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="css('day', { date })" :data-p-today="date.today" :data-p-other-month="date.otherMonth" v-bind="ptm('day')"> <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" :data-p-today="date.today" :data-p-other-month="date.otherMonth" v-bind="ptm('day')">
<span <span
v-ripple v-ripple
:class="css('dayLabel', { date })" :class="cx('dayLabel', { date })"
@click="onDateSelect($event, date)" @click="onDateSelect($event, date)"
draggable="false" draggable="false"
@keydown="onDateCellKeydown($event, date, groupIndex)" @keydown="onDateCellKeydown($event, date, groupIndex)"
@ -163,7 +163,7 @@
> >
<slot name="date" :date="date">{{ date.day }}</slot> <slot name="date" :date="date">{{ date.day }}</slot>
</span> </span>
<div v-if="isSelected(date)" :class="css('ariaSelectedDay')" :style="style('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaSelectedDay')"> <div v-if="isSelected(date)" :class="cx('ariaSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaSelectedDay')">
{{ date.day }} {{ date.day }}
</div> </div>
</td> </td>
@ -173,50 +173,50 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="currentView === 'month'" :class="css('monthPicker')" data-pc-section="monthpicker" v-bind="ptm('monthPicker')"> <div v-if="currentView === 'month'" :class="cx('monthPicker')" data-pc-section="monthpicker" v-bind="ptm('monthPicker')">
<span <span
v-for="(m, i) of monthPickerValues" v-for="(m, i) of monthPickerValues"
:key="m" :key="m"
v-ripple v-ripple
@click="onMonthSelect($event, { month: m, index: i })" @click="onMonthSelect($event, { month: m, index: i })"
@keydown="onMonthCellKeydown($event, { month: m, index: i })" @keydown="onMonthCellKeydown($event, { month: m, index: i })"
:class="css('month', { month: m, index: i })" :class="cx('month', { month: m, index: i })"
data-pc-section="month" data-pc-section="month"
:data-p-disabled="!m.selectable" :data-p-disabled="!m.selectable"
:data-p-highlight="isMonthSelected(i)" :data-p-highlight="isMonthSelected(i)"
v-bind="ptm('month')" v-bind="ptm('month')"
> >
{{ m.value }} {{ m.value }}
<div v-if="isMonthSelected(i)" :class="css('ariaMonth')" :style="style('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaMonth')"> <div v-if="isMonthSelected(i)" :class="cx('ariaMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaMonth')">
{{ m.value }} {{ m.value }}
</div> </div>
</span> </span>
</div> </div>
<div v-if="currentView === 'year'" :class="css('yearPicker')" data-pc-section="yearpicker" v-bind="ptm('yearPicker')"> <div v-if="currentView === 'year'" :class="cx('yearPicker')" data-pc-section="yearpicker" v-bind="ptm('yearPicker')">
<span <span
v-for="y of yearPickerValues" v-for="y of yearPickerValues"
:key="y.value" :key="y.value"
v-ripple v-ripple
@click="onYearSelect($event, y)" @click="onYearSelect($event, y)"
@keydown="onYearCellKeydown($event, y)" @keydown="onYearCellKeydown($event, y)"
:class="css('year', { year: y })" :class="cx('year', { year: y })"
data-pc-section="year" data-pc-section="year"
:data-p-disabled="!y.selectable" :data-p-disabled="!y.selectable"
:data-p-highlight="isYearSelected(y.value)" :data-p-highlight="isYearSelected(y.value)"
v-bind="ptm('year')" v-bind="ptm('year')"
> >
{{ y.value }} {{ y.value }}
<div v-if="isYearSelected(y.value)" :class="css('ariaYear')" :style="style('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaYear')"> <div v-if="isYearSelected(y.value)" :class="cx('ariaYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" :data-p-hidden-accessible="true" v-bind="ptm('ariaYear')">
{{ y.value }} {{ y.value }}
</div> </div>
</span> </span>
</div> </div>
</template> </template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="css('timePicker')" v-bind="ptm('timePicker')"> <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="css('hourPicker')" v-bind="ptm('hourPicker')"> <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')">
<button <button
v-ripple v-ripple
:class="css('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextHour" :aria-label="$primevue.config.locale.nextHour"
@mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -236,7 +236,7 @@
<span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span> <span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span>
<button <button
v-ripple v-ripple
:class="css('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevHour" :aria-label="$primevue.config.locale.prevHour"
@mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -254,13 +254,13 @@
</slot> </slot>
</button> </button>
</div> </div>
<div :class="css('separatorContainer')" v-bind="ptm('separatorContainer')"> <div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div> </div>
<div :class="css('minutePicker')" v-bind="ptm('minutePicker')"> <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')">
<button <button
v-ripple v-ripple
:class="css('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextMinute" :aria-label="$primevue.config.locale.nextMinute"
@mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mousedown="onTimePickerElementMouseDown($event, 1, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -281,7 +281,7 @@
<span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span> <span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span>
<button <button
v-ripple v-ripple
:class="css('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevMinute" :aria-label="$primevue.config.locale.prevMinute"
@mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -300,13 +300,13 @@
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="showSeconds" :class="css('separatorContainer')" v-bind="ptm('separatorContainer')"> <div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div> </div>
<div v-if="showSeconds" :class="css('secondPicker')" v-bind="ptm('secondPicker')"> <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')">
<button <button
v-ripple v-ripple
:class="css('incrementButton')" :class="cx('incrementButton')"
:aria-label="$primevue.config.locale.nextSecond" :aria-label="$primevue.config.locale.nextSecond"
@mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mousedown="onTimePickerElementMouseDown($event, 2, 1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -327,7 +327,7 @@
<span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span> <span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span>
<button <button
v-ripple v-ripple
:class="css('decrementButton')" :class="cx('decrementButton')"
:aria-label="$primevue.config.locale.prevSecond" :aria-label="$primevue.config.locale.prevSecond"
@mousedown="onTimePickerElementMouseDown($event, 2, -1)" @mousedown="onTimePickerElementMouseDown($event, 2, -1)"
@mouseup="onTimePickerElementMouseUp($event)" @mouseup="onTimePickerElementMouseUp($event)"
@ -346,26 +346,26 @@
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="hourFormat == '12'" :class="css('separatorContainer')" v-bind="ptm('separatorContainer')"> <div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
</div> </div>
<div v-if="hourFormat == '12'" :class="css('ampmPicker')" v-bind="ptm('ampmPicker')"> <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button v-ripple :class="css('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')"> <button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="css('incrementIcon')" v-bind="ptm('incrementIcon')" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" />
</slot> </slot>
</button> </button>
<span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span> <span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple :class="css('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')"> <button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="css('decrementIcon')" v-bind="ptm('decrementIcon')" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" />
</slot> </slot>
</button> </button>
</div> </div>
</div> </div>
<div v-if="showButtonBar" :class="css('buttonbar')" v-bind="ptm('buttonbar')"> <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="css('todayButton')" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" /> <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" />
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="css('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" /> <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" />
</div> </div>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

14
components/lib/fieldset/Fieldset.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<fieldset :class="css('root')" data-pc-name="fieldset" v-bind="ptm('root')"> <fieldset :class="cx('root')" data-pc-name="fieldset" v-bind="ptm('root')">
<legend :class="css('legend')" v-bind="ptm('legend')"> <legend :class="cx('legend')" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend"> <slot v-if="!toggleable" name="legend">
<span :id="ariaId + '_header'" :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot> </slot>
<a <a
v-if="toggleable" v-if="toggleable"
@ -18,16 +18,16 @@
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }" v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
> >
<slot name="togglericon" :collapsed="d_collapsed"> <slot name="togglericon" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="css('togglericon')" v-bind="ptm('togglericon')" /> <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('togglericon')" v-bind="ptm('togglericon')" />
</slot> </slot>
<slot name="legend"> <slot name="legend">
<span :class="css('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span> <span :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot> </slot>
</a> </a>
</legend> </legend>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')"> <div v-show="!d_collapsed" :id="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="css('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>

18
components/lib/panel/Panel.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="css('root')" data-pc-name="panel" v-bind="ptm('root')"> <div :class="cx('root')" data-pc-name="panel" v-bind="ptm('root')">
<div :class="css('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="css('title')"> <slot :id="ariaId + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="ariaId + '_header'" :class="css('title')" v-bind="ptm('title')">{{ header }}</span> <span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot> </slot>
<div :class="css('icons')" v-bind="ptm('icons')"> <div :class="cx('icons')" v-bind="ptm('icons')">
<slot name="icons"></slot> <slot name="icons"></slot>
<button <button
v-if="toggleable" v-if="toggleable"
@ -12,7 +12,7 @@
v-ripple v-ripple
type="button" type="button"
role="button" role="button"
:class="css('toggler')" :class="cx('toggler')"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
:aria-controls="ariaId + '_content'" :aria-controls="ariaId + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
@ -27,11 +27,11 @@
</div> </div>
</div> </div>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')"> <div v-show="!d_collapsed" :id="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="css('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>
<div v-if="$slots.footer" :class="css('footer')" v-bind="ptm('footer')"> <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>