Refactor #3965 - data-pc-* structure & class props fixes

pull/3997/head
Tuğçe Küçükoğlu 2023-05-24 12:06:21 +03:00
parent 6b3fe54feb
commit 354e4f21b9
4 changed files with 48 additions and 78 deletions

View File

@ -1,11 +1,11 @@
<template>
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" data-pc-name="autocomplete" data-pc-section="root" v-bind="ptm('root')">
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="autocomplete">
<input
v-if="!multiple"
ref="focusInput"
:id="inputId"
type="text"
:class="cx('input')"
:class="[cx('input'), inputClass]"
:style="inputStyle"
:value="inputValue"
:placeholder="placeholder"
@ -25,7 +25,6 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
<ul
@ -39,7 +38,6 @@
@focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown"
data-pc-section="container"
v-bind="ptm('container')"
>
<li
@ -52,17 +50,16 @@
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
data-pc-section="token"
v-bind="ptm('token')"
>
<slot name="chip" :value="option">
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')" data-pc-section="tokenlabel">{{ getOptionLabel(option) }}</span>
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
</slot>
<slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="cx(removeTokenIcon)" @click="removeOption($event, i)" aria-hidden="true" data-pc-section="removetokenicon" v-bind="ptm('removeTokenIcon')" />
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx(removeTokenIcon), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>
<li :class="cx('inputToken')" role="option" data-pc-section="inputtoken" v-bind="ptm('inputToken')">
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
<input
ref="focusInput"
:id="inputId"
@ -86,23 +83,33 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
</li>
</ul>
<slot v-if="searching" name="loadingicon">
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon')]" aria-hidden="true" data-pc-section="loaidngicon" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
<slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="cx('dropdownButton')" :disabled="disabled" aria-hidden="true" data-pc-section="dropdownbutton" @click="onDropdownClick" :pt="ptm('dropdownButton')">
<Button
v-if="dropdown"
ref="dropdownButton"
type="button"
tabindex="-1"
:class="[cx('dropdownButton'), dropdownClass]"
:disabled="disabled"
aria-hidden="true"
@click="onDropdownClick"
:pt="ptm('dropdownButton')"
data-pc-section="dropdownbutton"
>
<template #icon>
<slot name="dropdownicon" :class="cx('dropdownIcon')">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="cx('dropdownIcon')" data-pc-section="dropdownbuttonicon" v-bind="ptm('dropdownButton')['icon']" />
<slot name="dropdownicon" :class="dropdownIcon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
</slot>
</template>
</Button>
<span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddensearchresult" v-bind="ptm('hiddenSearchResult')">
<span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')">
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
@ -110,27 +117,18 @@
<div
v-if="overlayVisible"
:ref="overlayRef"
:class="cx('panel')"
:class="[cx('panel'), panelClass]"
:style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
data-pc-section="panel"
v-bind="{ ...panelProps, ...ptm('panel') }"
>
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
<VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" data-pc-section="list" v-bind="ptm('list')">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('itemGroup')"
role="option"
data-pc-section="itemgroup"
v-bind="ptm('itemGroup')"
>
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
@ -147,7 +145,6 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
data-pc-section="item"
:data-p-highlight="isSelected(option)"
:data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
@ -158,7 +155,7 @@
<!--TODO: Deprecated since v3.16.0-->
</li>
</template>
<li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" data-pc-section="emptymessage" v-bind="ptm('emptyMessage')">
<li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
<slot name="empty">{{ searchResultMessageText }}</slot>
</li>
</ul>
@ -168,7 +165,7 @@
</template>
</VirtualScroller>
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddenselectedmessage" v-bind="ptm('hiddenSelectedMessage')">
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')">
{{ selectedMessageText }}
</span>
</div>

View File

@ -118,19 +118,17 @@ const classes = {
'p-overlay-open': instance.overlayVisible
}
],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', props.inputClass, { 'p-autocomplete-dd-input': props.dropdown }],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
container: 'p-autocomplete-multiple-container p-component p-inputtext',
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
tokenLabel: 'p-autocomplete-token-label',
removeTokenIcon: ({ props }) => [props.removeTokenIcon, 'p-autocomplete-token-icon'],
removeTokenIcon: 'p-autocomplete-token-icon',
inputToken: 'p-autocomplete-input-token',
loadingIcon: ({ props }) => [props.loadingIcon, 'p-autocomplete-loader'],
dropdownButton: ({ props }) => ['p-autocomplete-dropdown', props.dropdownClass],
dropdownIcon: ({ props }) => props.dropdownIcon,
loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown',
hiddenSearchResult: 'p-hidden-accessible',
panel: ({ instance, props }) => [
panel: ({ instance }) => [
'p-autocomplete-panel p-component',
props.panelClass,
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false

View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :id="id" :class="cx('root')" :style="sx('root')" data-pc-name="dropdown" data-pc-section="root" @click="onContainerClick" v-bind="ptm('root')">
<div ref="container" :id="id" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')">
<input
v-if="editable"
ref="focusInput"
@ -23,7 +23,6 @@
@blur="onBlur"
@keydown="onKeyDown"
@input="onEditableInput"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
<span
@ -44,26 +43,25 @@
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
data-pc-section="input"
v-bind="{ ...inputProps, ...ptm('input') }"
>
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span>
<slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick">
<component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" data-pc-section="clearicon" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" />
<component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" />
</slot>
<div :class="cx('trigger')" data-pc-section="trigger" v-bind="ptm('trigger')">
<div :class="cx('trigger')" v-bind="ptm('trigger')">
<slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
<slot v-else name="dropdownicon" :class="cx('dropdownIcon')">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" data-pc-section="dropdownicon" v-bind="ptm('dropdownIcon')" />
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
</slot>
</div>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" data-pc-section="panel" v-bind="{ ...panelProps, ...ptm('panel') }">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
<span
ref="firstHiddenFocusableElementOnOverlay"
role="presentation"
@ -74,12 +72,11 @@
@focus="onFirstHiddenFocus"
:data-p-hidden-accessible="true"
:data-p-hidden-focusable="true"
data-pc-section="hiddenfirstfocusableel"
v-bind="ptm('hiddenFirstFocusableEl')"
></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" :class="cx('header')" data-pc-section="header" v-bind="ptm('header')">
<div :class="cx('filterContainer')" data-pc-section="filtercontainer" v-bind="ptm('filterContainer')">
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<input
ref="filterInput"
type="text"
@ -94,31 +91,22 @@
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@input="onFilterChange"
data-pc-section="filterinput"
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" data-pc-section="filtericon" v-bind="ptm('filterIcon')" />
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" :data-p-hidden-accessible="true" data-pc-section="hiddenfilterresult" v-bind="ptm('hiddenFilterResult')">
<span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" :data-p-hidden-accessible="true" v-bind="ptm('hiddenFilterResult')">
{{ filterResultMessageText }}
</span>
</div>
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" data-pc-section="wrapper" v-bind="ptm('wrapper')">
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" data-pc-section="list" v-bind="ptm('list')">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('itemGroup')"
role="option"
data-pc-section="itemgroup"
v-bind="ptm('itemGroup')"
>
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
@ -138,7 +126,6 @@
:data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
data-pc-section="item"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
@ -150,20 +137,11 @@
:style="sx('hiddenAccessible', isUnstyled)"
role="option"
:data-p-hidden-accessible="true"
data-pc-section="emptymessage"
v-bind="ptm('emptyMessage')"
>
<slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
</li>
<li
v-else-if="!options || (options && options.length === 0)"
:class="cx('emptyMessage')"
:style="sx('hiddenAccessible', isUnstyled)"
role="option"
:data-p-hidden-accessible="true"
data-pc-section="emptymessage"
v-bind="ptm('emptyMessage')"
>
<li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" role="option" :data-p-hidden-accessible="true" v-bind="ptm('emptyMessage')">
<slot name="empty">{{ emptyMessageText }}</slot>
</li>
</ul>
@ -198,7 +176,6 @@
@focus="onLastHiddenFocus"
:data-p-hidden-accessible="true"
:data-p-hidden-focusable="true"
data-pc-section="hiddenlastfocusableel"
v-bind="ptm('hiddenLastFocusableEl')"
></span>
</div>

View File

@ -83,7 +83,6 @@ const classes = {
],
navContainer: 'p-tabview-nav-container',
previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
previousIcon: ({ props }) => props.prevIcon,
navContent: 'p-tabview-nav-content',
nav: 'p-tabview-nav',
tab: {
@ -101,7 +100,6 @@ const classes = {
},
inkbar: 'p-tabview-ink-bar',
nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
nextIcon: ({ props }) => props.nextIcon,
panelContainer: 'p-tabview-panels'
};