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

Refactor #5592 - For ScrollPanel, Splitter, Stepper

pull/5677/head
tugcekucukoglu 2024-04-30 17:09:49 +03:00
parent 8c6c62db04
commit 6d688ef675
12 changed files with 49 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/scrollpanel/ScrollPanel.d.ts vendored
View File

@ -54,9 +54,9 @@ export interface ScrollPanelPassThroughOptions {
*/
root?: ScrollPanelPassThroughOptionType;
/**
* Used to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the content container's DOM element.
*/
wrapper?: ScrollPanelPassThroughOptionType;
contentContainer?: ScrollPanelPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/

2
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
<div :class="cx('contentContainer')" v-bind="ptm('contentContainer')">
<div ref="content" :id="contentId" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
<slot></slot>
</div>

2
components/lib/scrollpanel/style/ScrollPanelStyle.js
View File

@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-scrollpanel p-component',
wrapper: 'p-scrollpanel-content-container',
contentContainer: 'p-scrollpanel-content-container',
content: 'p-scrollpanel-content',
barX: 'p-scrollpanel-bar p-scrollpanel-bar-x',
barY: 'p-scrollpanel-bar p-scrollpanel-bar-y'

4
components/lib/splitter/Splitter.d.ts vendored
View File

@ -107,9 +107,9 @@ export interface SplitterPassThroughOptions {
*/
gutter?: SplitterPassThroughOptionType;
/**
* Used to pass attributes to the gutter handler's DOM element.
* Used to pass attributes to the gutter handle's DOM element.
*/
gutterHandler?: SplitterPassThroughOptionType;
gutterHandle?: SplitterPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

2
components/lib/splitter/Splitter.vue
View File

@ -15,7 +15,7 @@
:data-p-gutter-resizing="false"
v-bind="ptm('gutter')"
>
<div :class="cx('gutterHandler')" tabindex="0" :style="[gutterStyle]" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterHandler')"></div>
<div :class="cx('gutterHandle')" tabindex="0" :style="[gutterStyle]" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterHandle')"></div>
</div>
</template>
</div>

2
components/lib/splitter/style/SplitterStyle.js
View File

@ -3,7 +3,7 @@ import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
gutter: 'p-splitter-gutter',
gutterHandler: 'p-splitter-gutter-handle'
gutterHandle: 'p-splitter-gutter-handle'
};
const inlineStyles = {

8
components/lib/stepper/Stepper.d.ts vendored
View File

@ -55,13 +55,13 @@ export interface StepperPassThroughOptions {
*/
root?: StepperPassThroughOptionType;
/**
* Used to pass attributes to the nav's DOM element.
* Used to pass attributes to the list's DOM element.
*/
nav?: StepperPassThroughOptionType;
list?: StepperPassThroughOptionType;
/**
* Used to pass attributes to the panel container's DOM element.
* Used to pass attributes to the panels' DOM element.
*/
panelContainer?: StepperPassThroughOptionType;
panels?: StepperPassThroughOptionType;
/**
* Used to pass attributes to the end handler's DOM element.
*/

16
components/lib/stepper/Stepper.vue
View File

@ -3,14 +3,14 @@
<slot v-if="$slots.start" name="start" />
<template v-if="orientation === 'horizontal'">
<ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
<ul ref="nav" :class="cx('list')" v-bind="ptm('list')">
<li
v-for="(step, index) of stepperpanels"
:key="getStepKey(step, index)"
:class="cx('stepper.header', { step, index })"
:class="cx('stepper.item', { step, index })"
:aria-current="isStepActive(index) ? 'step' : undefined"
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'item', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
@ -26,7 +26,7 @@
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:class="cx('stepper.itemHeader')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
@ -46,7 +46,7 @@
</slot>
</li>
</ul>
<div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
<div :class="cx('panels')" v-bind="ptm('panels')">
<template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
<StepperContent
v-show="isStepActive(index)"
@ -79,7 +79,7 @@
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<div :class="cx('stepper.header', { step, index })" v-bind="getStepPT(step, 'header', index)">
<div :class="cx('stepper.item', { step, index })" v-bind="getStepPT(step, 'item', index)">
<slot name="header">
<StepperHeader
:id="getStepHeaderActionId(index)"
@ -89,7 +89,7 @@
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:class="cx('stepper.itemHeader')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
@ -99,7 +99,7 @@
</div>
<transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
<div v-show="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
<div v-show="isStepActive(index)" :class="cx('stepper.panelContentContainer')" v-bind="getStepPT(step, 'panelContentContainer', index)">
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
:template="step.children?.separator"

4
components/lib/stepper/StepperContent.vue
View File

@ -1,10 +1,10 @@
<template>
<div
:id="id"
:class="cx('stepper.content', { stepperpanel, index })"
:class="cx('stepper.panelContent', { stepperpanel, index })"
role="tabpanel"
:aria-labelledby="ariaLabelledby"
v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'content', index) }"
v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'panelContent', index) }"
data-pc-name="stepperpanel"
:data-pc-index="index"
:data-p-active="active"

14
components/lib/stepper/StepperHeader.vue
View File

@ -5,15 +5,15 @@
:index="index"
:active="active"
:highlighted="highlighted"
:class="cx('stepper.action')"
:headerClass="cx('stepper.action')"
:numberClass="cx('stepper.number')"
:titleClass="cx('stepper.title')"
:class="cx('stepper.itemHeader')"
:headerClass="cx('stepper.itemHeader')"
:numberClass="cx('stepper.itemNumber')"
:titleClass="cx('stepper.itemTitle')"
:clickCallback="(event) => clickCallback(event, index)"
/>
<button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
<span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
<span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>
<button v-else :id="id" :class="cx('stepper.itemHeader')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'itemHeader', index)">
<span :class="cx('stepper.itemNumber')" v-bind="getStepPT(stepperpanel, 'itemNumber', index)">{{ index + 1 }}</span>
<span :class="cx('stepper.itemTitle')" v-bind="getStepPT(stepperpanel, 'itemTitle', index)">{{ getStepProp(stepperpanel, 'item') }}</span>
</button>
</template>

16
components/lib/stepper/style/StepperStyle.js
View File

@ -9,23 +9,23 @@ const classes = {
'p-readonly': props.linear
}
],
nav: 'p-stepper-list',
list: 'p-stepper-list',
stepper: {
header: ({ instance, step, index }) => [
item: ({ instance, step, index }) => [
'p-stepper-item',
{
'p-stepper-item-active': instance.isStepActive(index),
'p-disabled': instance.isItemDisabled(index)
}
],
action: 'p-stepper-item-header',
number: 'p-stepper-item-number',
title: 'p-stepper-item-title',
itemHeader: 'p-stepper-item-header',
itemNumber: 'p-stepper-item-number',
itemTitle: 'p-stepper-item-title',
separator: 'p-stepper-separator',
toggleableContent: 'p-stepper-panel-content-container',
content: 'p-stepper-panel-content'
panelContentContainer: 'p-stepper-panel-content-container',
panelContent: 'p-stepper-panel-content'
},
panelContainer: 'p-stepper-panels',
panels: 'p-stepper-panels',
panel: ({ instance, props, index }) => [
'p-stepper-panel',
{

28
components/lib/stepperpanel/StepperPanel.d.ts vendored
View File

@ -56,37 +56,33 @@ export interface StepperPanelPassThroughOptions {
*/
root?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the header's DOM element.
* Used to pass attributes to the item's DOM element.
*/
header?: StepperPanelPassThroughOptionType;
item?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the action's DOM element.
* Used to pass attributes to the item header's DOM element.
*/
action?: StepperPanelPassThroughOptionType;
itemHeader?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the number's DOM element.
* Used to pass attributes to the item number's DOM element.
*/
number?: StepperPanelPassThroughOptionType;
itemNumber?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the title's DOM element.
* Used to pass attributes to the item title's DOM element.
*/
title?: StepperPanelPassThroughOptionType;
itemTitle?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the separator's DOM element.
*/
separator?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
* Used to pass attributes to the panel content container's DOM element.
*/
content?: StepperPanelPassThroughOptionType;
panelContentContainer?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel content's DOM element.
*/
panel?: StepperPanelPassThroughOptionType;
/**
* Used to pass attributes to the toggleable content's DOM element.
*/
toggleableContent?: StepperPanelPassThroughOptionType;
panelContent?: StepperPanelPassThroughOptionType;
/**
* Used to control Vue Transition API.
*/