Refactor #3965 - Update data-pc-* structure
mertsincan
parent
f3c29933b5
commit
5b759e898a
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="accordion" data-pc-section="root">
|
||||
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" data-pc-name="accordiontab" data-pc-section="root" :data-pc-index="i" :data-p-active="isTabActive(i)">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" :data-pc-index="i" :data-p-active="isTabActive(i)">
|
||||
<div
|
||||
:style="getTabProp(tab, 'headerStyle')"
|
||||
:class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
|
||||
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
|
||||
data-pc-section="header"
|
||||
:data-p-highlight="isTabActive(i)"
|
||||
:data-p-disabled="getTabProp(tab, 'disabled')"
|
||||
>
|
||||
|
|
@ -20,12 +19,11 @@
|
|||
@click="onTabClick($event, tab, i)"
|
||||
@keydown="onTabKeyDown($event, tab, i)"
|
||||
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
|
||||
data-pc-section="headeraction"
|
||||
>
|
||||
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
|
||||
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
|
||||
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
|
||||
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)" data-pc-section="headertitle">{{ tab.props.header }}</span>
|
||||
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
|
||||
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
|
||||
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -39,9 +37,8 @@
|
|||
role="region"
|
||||
:aria-labelledby="getTabHeaderActionId(i)"
|
||||
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
|
||||
data-pc-section="toggleablecontent"
|
||||
>
|
||||
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)" data-pc-section="content">
|
||||
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)">
|
||||
<component :is="tab"></component>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -99,6 +96,7 @@ export default {
|
|||
},
|
||||
getTabPT(tab, key, index) {
|
||||
const tabMetaData = {
|
||||
name: 'accordiontab',
|
||||
props: tab.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughA
|
|||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface AccordionTabPassThroughMethodOptions {
|
||||
name?: string | undefined;
|
||||
props: AccordionTabProps;
|
||||
parent: AccordionPassThroughOptions;
|
||||
context: AccordionTabContext;
|
||||
|
|
|
|||
|
|
@ -39,9 +39,13 @@ export default {
|
|||
: ObjectUtils.getItemValue(options, params);
|
||||
},
|
||||
getPTValue(obj = {}, key = '', params = {}) {
|
||||
const datasetPrefix = 'data-pc-';
|
||||
const self = this.getOptionValue(obj, key, params);
|
||||
const globalPT = this.getOptionValue(this.defaultPT, key, params);
|
||||
const merged = mergeProps(self, globalPT);
|
||||
const merged = mergeProps(self, globalPT, {
|
||||
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(params['name'] || this.$.type.name) }),
|
||||
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
|
||||
});
|
||||
|
||||
return merged;
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span ref="container" :id="id" :class="cx('root')" :style="sx('root')" data-pc-name="calendar" data-pc-section="root" v-bind="ptm('root')">
|
||||
<span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
|
||||
<input
|
||||
v-if="!inline"
|
||||
:ref="inputRef"
|
||||
|
|
@ -38,10 +38,11 @@
|
|||
:aria-expanded="overlayVisible"
|
||||
:aria-controls="panelId"
|
||||
:pt="ptm('dropdownButton')"
|
||||
data-pc-section="dropdownbutton"
|
||||
>
|
||||
<template #icon>
|
||||
<slot name="dropdownicon">
|
||||
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" />
|
||||
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="icon" />
|
||||
</slot>
|
||||
</template>
|
||||
</CalendarButton>
|
||||
|
|
@ -132,7 +133,7 @@
|
|||
<table :class="cx('table')" role="grid" v-bind="ptm('table')">
|
||||
<thead v-bind="ptm('tableHeader')">
|
||||
<tr v-bind="ptm('tableHeaderRow')">
|
||||
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" :data-p-disabled="true" v-bind="ptm('weekHeader')">
|
||||
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader')" :data-p-disabled="true">
|
||||
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
|
||||
</th>
|
||||
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
|
||||
|
|
@ -143,12 +144,12 @@
|
|||
<tbody v-bind="ptm('tableBody')">
|
||||
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
|
||||
<td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')">
|
||||
<span :class="cx('weekLabelContainer')" :data-p-disabled="true" v-bind="ptm('weekLabelContainer')">
|
||||
<span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer')" :data-p-disabled="true">
|
||||
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
|
||||
{{ month.weekNumbers[i] }}
|
||||
</span>
|
||||
</td>
|
||||
<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')">
|
||||
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" v-bind="ptm('day')" :data-p-today="date.today" :data-p-other-month="date.otherMonth">
|
||||
<span
|
||||
v-ripple
|
||||
:class="cx('dayLabel', { date })"
|
||||
|
|
@ -157,13 +158,13 @@
|
|||
@keydown="onDateCellKeydown($event, date, groupIndex)"
|
||||
:aria-selected="isSelected(date)"
|
||||
:aria-disabled="!date.selectable"
|
||||
v-bind="ptm('dayLabel')"
|
||||
:data-p-disabled="!date.selectable"
|
||||
:data-p-highlight="isSelected(date)"
|
||||
v-bind="ptm('dayLabel')"
|
||||
>
|
||||
<slot name="date" :date="date">{{ date.day }}</slot>
|
||||
</span>
|
||||
<div v-if="isSelected(date)" :class="cx('ariaSelectedDay')" :style="sx('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" v-bind="ptm('ariaSelectedDay')" :data-p-hidden-accessible="true">
|
||||
{{ date.day }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -173,7 +174,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentView === 'month'" :class="cx('monthPicker')" data-pc-section="monthpicker" v-bind="ptm('monthPicker')">
|
||||
<div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
|
||||
<span
|
||||
v-for="(m, i) of monthPickerValues"
|
||||
:key="m"
|
||||
|
|
@ -181,18 +182,17 @@
|
|||
@click="onMonthSelect($event, { month: m, index: i })"
|
||||
@keydown="onMonthCellKeydown($event, { month: m, index: i })"
|
||||
:class="cx('month', { month: m, index: i })"
|
||||
data-pc-section="month"
|
||||
v-bind="ptm('month')"
|
||||
:data-p-disabled="!m.selectable"
|
||||
:data-p-highlight="isMonthSelected(i)"
|
||||
v-bind="ptm('month')"
|
||||
>
|
||||
{{ m.value }}
|
||||
<div v-if="isMonthSelected(i)" :class="cx('ariaMonth')" :style="sx('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" v-bind="ptm('ariaMonth')" :data-p-hidden-accessible="true">
|
||||
{{ m.value }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="currentView === 'year'" :class="cx('yearPicker')" data-pc-section="yearpicker" v-bind="ptm('yearPicker')">
|
||||
<div v-if="currentView === 'year'" :class="cx('yearPicker')" v-bind="ptm('yearPicker')">
|
||||
<span
|
||||
v-for="y of yearPickerValues"
|
||||
:key="y.value"
|
||||
|
|
@ -200,13 +200,12 @@
|
|||
@click="onYearSelect($event, y)"
|
||||
@keydown="onYearCellKeydown($event, y)"
|
||||
:class="cx('year', { year: y })"
|
||||
data-pc-section="year"
|
||||
v-bind="ptm('year')"
|
||||
:data-p-disabled="!y.selectable"
|
||||
:data-p-highlight="isYearSelected(y.value)"
|
||||
v-bind="ptm('year')"
|
||||
>
|
||||
{{ y.value }}
|
||||
<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')">
|
||||
<div v-if="isYearSelected(y.value)" :class="cx('ariaYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaYear')" :data-p-hidden-accessible="true">
|
||||
{{ y.value }}
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -364,8 +363,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
|
||||
<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="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" />
|
||||
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" data-pc-section="todaybutton" />
|
||||
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" data-pc-section="clearbutton" />
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<fieldset :class="cx('root')" data-pc-name="fieldset" v-bind="ptm('root')">
|
||||
<fieldset :class="cx('root')" v-bind="ptm('root')">
|
||||
<legend :class="cx('legend')" v-bind="ptm('legend')">
|
||||
<slot v-if="!toggleable" name="legend">
|
||||
<span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="cx('root')" data-pc-name="panel" v-bind="ptm('root')">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<div :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot :id="ariaId + '_header'" name="header" :class="cx('title')">
|
||||
<span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue