Refactor #5266

primefaces · Feb 20, 2024 · 5cc61a3 · 5cc61a3
1 parent 89610aa
commit 5cc61a3
Show file tree

Hide file tree

Showing 82 changed files with 233 additions and 146 deletions.
diff --git a/components/lib/stepper/Stepper.d.ts b/components/lib/stepper/Stepper.d.ts
@@ -7,6 +7,7 @@
  * @module stepper
  *
  */
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { StepperPanelPassThroughOptionType } from '../stepperpanel';
@@ -53,10 +54,6 @@ export interface StepperPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the nav container's DOM element.
-     */
-    navContainer?: StepperPassThroughOptionType;
     /**
      * Used to pass attributes to the nav's DOM element.
      */
@@ -151,7 +148,16 @@ export interface StepperProps {
 /**
  * Defines valid slots in Stepper component.
  */
-export interface StepperSlots {}
+export interface StepperSlots {
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
+}
 
 /**
  * Defines valid emits in Stepper component.

diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
@@ -3,52 +3,50 @@
         <slot v-if="$slots.start" name="start" />
 
         <template v-if="orientation === 'horizontal'">
-            <div :class="cx('navContainer')" v-bind="ptm('navContainer')">
-                <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
-                    <li
-                        v-for="(step, index) of stepperpanels"
-                        :key="getStepKey(step, index)"
-                        :class="cx('stepper.header', { step, index })"
-                        :aria-current="isStepActive(index) ? 'step' : undefined"
-                        role="presentation"
-                        v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
-                        data-pc-name="stepperpanel"
-                        :data-p-highlight="isStepActive(index)"
-                        :data-p-disabled="isItemDisabled(index)"
-                        :data-pc-index="index"
-                        :data-p-active="isStepActive(index)"
-                    >
-                        <slot name="header">
-                            <StepperHeader
-                                :id="getStepHeaderActionId(index)"
-                                :template="step.children?.header"
-                                :stepperpanel="step"
-                                :index="index"
-                                :disabled="isItemDisabled(index)"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :class="cx('stepper.action')"
-                                :aria-controls="getStepContentId(index)"
-                                :clickCallback="(event) => onItemClick(event, index)"
-                                :getStepPT="getStepPT"
-                                :getStepProp="getStepProp"
-                            />
-                        </slot>
-                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                            <StepperSeparator
-                                v-if="index !== stepperpanels.length - 1"
-                                :template="step.children?.separator"
-                                :separatorClass="cx('stepper.separator')"
-                                :stepperpanel="step"
-                                :index="index"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :getStepPT="getStepPT(step, 'separator', index)"
-                            />
-                        </slot>
-                    </li>
-                </ul>
-            </div>
+            <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
+                <li
+                    v-for="(step, index) of stepperpanels"
+                    :key="getStepKey(step, index)"
+                    :class="cx('stepper.header', { step, index })"
+                    :aria-current="isStepActive(index) ? 'step' : undefined"
+                    role="presentation"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
+                    data-pc-name="stepperpanel"
+                    :data-p-highlight="isStepActive(index)"
+                    :data-p-disabled="isItemDisabled(index)"
+                    :data-pc-index="index"
+                    :data-p-active="isStepActive(index)"
+                >
+                    <slot name="header">
+                        <StepperHeader
+                            :id="getStepHeaderActionId(index)"
+                            :template="step.children?.header"
+                            :stepperpanel="step"
+                            :index="index"
+                            :disabled="isItemDisabled(index)"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :class="cx('stepper.action')"
+                            :aria-controls="getStepContentId(index)"
+                            :clickCallback="(event) => onItemClick(event, index)"
+                            :getStepPT="getStepPT"
+                            :getStepProp="getStepProp"
+                        />
+                    </slot>
+                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                        <StepperSeparator
+                            v-if="index !== stepperpanels.length - 1"
+                            :template="step.children?.separator"
+                            :separatorClass="cx('stepper.separator')"
+                            :stepperpanel="step"
+                            :index="index"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :getStepPT="getStepPT(step, 'separator', index)"
+                        />
+                    </slot>
+                </li>
+            </ul>
             <div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
                 <template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
                     <StepperContent
@@ -100,20 +98,21 @@
                         />
                     </slot>
                 </div>
-                <div :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
-                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                        <StepperSeparator
-                            v-if="index !== stepperpanels.length - 1"
-                            :template="step.children?.separator"
-                            :separatorClass="cx('stepper.separator')"
-                            :stepperpanel="step"
-                            :index="index"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :getStepPT="getStepPT(step, 'separator', index)"
-                        />
-                    </slot>
-                    <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+
+                <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+                    <div v-if="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
+                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                            <StepperSeparator
+                                v-if="index !== stepperpanels.length - 1"
+                                :template="step.children?.separator"
+                                :separatorClass="cx('stepper.separator')"
+                                :stepperpanel="step"
+                                :index="index"
+                                :active="isStepActive(index)"
+                                :highlighted="index < d_activeStep"
+                                :getStepPT="getStepPT(step, 'separator', index)"
+                            />
+                        </slot>
                         <slot name="content">
                             <StepperContent
                                 v-show="isStepActive(index)"
@@ -130,8 +129,8 @@
                                 :aria-labelledby="getStepHeaderActionId(index)"
                             />
                         </slot>
-                    </transition>
-                </div>
+                    </div>
+                </transition>
             </div>
         </template>
         <slot v-if="$slots.end" name="end" />

diff --git a/components/lib/stepper/StepperHeader.vue b/components/lib/stepper/StepperHeader.vue
@@ -1,5 +1,16 @@
 <template>
-    <component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :clickCallback="(event) => clickCallback(event, index)" />
+    <component
+        v-if="template"
+        :is="template"
+        :index="index"
+        :active="active"
+        :highlighted="highlighted"
+        :class="cx('stepper.action')"
+        :headerClass="cx('stepper.action')"
+        :numberClass="cx('stepper.number')"
+        :titleClass="cx('stepper.title')"
+        :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>

diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js
@@ -9,7 +9,6 @@ const classes = {
             'p-readonly': props.linear
         }
     ],
-    navContainer: 'p-stepper-nav-container',
     nav: 'p-stepper-nav',
     stepper: {
         header: ({ instance, step, index }) => [

diff --git a/components/lib/stepperpanel/StepperPanel.d.ts b/components/lib/stepperpanel/StepperPanel.d.ts
@@ -184,6 +184,18 @@ export interface StepperPanelSlots {
          * Style class of the stepperpanel
          */
         class: string;
+        /**
+         * Style class of the stepperpanel
+         */
+        headerClass: string;
+        /**
+         * Style class of the number content container
+         */
+        numberClass: string;
+        /**
+         * Style class of the title content container
+         */
+        titleClass: string;
         /**
          * Header click function.
          * @param {Event} event - Browser event

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }

diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }

diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }

diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }

diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #fbbf24;

diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #60a5fa;

diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #22d3ee;

diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #34d399;