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

Migrated Stepper

pull/5507/head
Cagatay Civici 2024-02-23 10:36:24 +03:00
parent 99da2883b7
commit e1ee7669bd
7 changed files with 224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/themes/primeone/base/index.js
View File

@ -65,6 +65,7 @@ import slider from 'primevue/themes/primeone/base/slider';
import speeddial from 'primevue/themes/primeone/base/speeddial';
import splitbutton from 'primevue/themes/primeone/base/splitbutton';
import splitter from 'primevue/themes/primeone/base/splitter';
import stepper from 'primevue/themes/primeone/base/stepper';
import steps from 'primevue/themes/primeone/base/steps';
import tabmenu from 'primevue/themes/primeone/base/tabmenu';
import tabview from 'primevue/themes/primeone/base/tabview';
@ -151,6 +152,7 @@ export default {
splitter,
splitbutton,
steps,
stepper,
tabmenu,
tabview,
textarea,

161
components/lib/themes/primeone/base/stepper/index.js Normal file
View File

@ -0,0 +1,161 @@
export default {
css: `
.p-stepper-nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
}
.p-stepper-header {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
padding: 0.5rem;
}
.p-stepper-header:last-of-type {
flex: initial;
}
.p-stepper-action {
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
outline-color: transparent;
background: transparent;
}
.p-stepper-header .p-stepper-action:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-stepper.p-stepper-readonly .p-stepper-header {
cursor: auto;
}
.p-stepper-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-left: 0.5rem;
color: var(--p-stepper-title-text-color);
font-weight: 500;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
}
.p-stepper-number {
display: flex;
align-items: center;
justify-content: center;
color: var(--p-stepper-marker-text-color);
border: 1px solid var(--p-stepper-marker-border-color);
border-width: 2px;
background: var(--p-stepper-marker-background);
min-width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.143rem;
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
}
.p-stepper-header.p-highlight .p-stepper-action {
cursor: default;
}
.p-stepper-header.p-highlight .p-stepper-number {
background: var(--p-stepper-marker-background-highlight);
color: var(--p-stepper-marker-text-color-highlight);
}
.p-stepper-header.p-highlight .p-stepper-title {
color: var(--p-stepper-title-text-color-highlight);
}
.p-stepper-header:not(.p-disabled):focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
background: var(--p-stepper-connector-background-highlight);
}
.p-stepper-separator {
flex: 1 1 0;
background: var(--p-stepper-connector-background);
width: 100%;
height: 2px;
margin-inline-start: 1rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
}
.p-stepper-content {
background: var(--p-stepper-content-background);
color: var(--p-stepper-content-text-color);
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
.p-stepper-vertical .p-stepper-nav {
flex-direction: column;
}
.p-stepper-vertical {
display: flex;
flex-direction: column;
}
.p-stepper-vertical .p-stepper-toggleable-content {
display: flex;
flex: 1 1 auto;
}
.p-stepper-vertical .p-stepper-panel {
display: flex;
flex-direction: column;
flex: initial;
}
.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
flex: 1 1 auto;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-header {
flex: initial;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
background: var(--p-stepper-connector-background-highlight);
}
.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
padding-left: 3rem;
}
`
};

6
components/lib/themes/primeone/base/stepper/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

2
components/lib/themes/primeone/presets/aura/index.js
View File

@ -64,6 +64,7 @@ import slider from 'primevue/themes/primeone/presets/aura/slider';
import speeddial from 'primevue/themes/primeone/presets/aura/speeddial';
import splitbutton from 'primevue/themes/primeone/presets/aura/splitbutton';
import splitter from 'primevue/themes/primeone/presets/aura/splitter';
import stepper from 'primevue/themes/primeone/presets/aura/stepper';
import steps from 'primevue/themes/primeone/presets/aura/steps';
import tabmenu from 'primevue/themes/primeone/presets/aura/tabmenu';
import tabview from 'primevue/themes/primeone/presets/aura/tabview';
@ -297,6 +298,7 @@ export default {
speeddial,
splitter,
splitbutton,
stepper,
steps,
tabmenu,
tabview,

46
components/lib/themes/primeone/presets/aura/stepper/index.js Normal file
View File

@ -0,0 +1,46 @@
export default {
colorScheme: {
light: {
connector: {
background: '{surface.200}',
backgroundHighlight: '{primary.color}'
},
title: {
textColor: '{surface.700}',
textColorHighlight: '{primary.color}'
},
marker: {
background: '{surface.0}',
backgroundHighlight: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.500}',
textColorHighlight: '{primary.color}'
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
}
},
dark: {
connector: {
background: '{surface.700}',
backgroundHighlight: '{primary.color}'
},
title: {
textColor: '{surface.0}',
textColorHighlight: '{primary.color}'
},
marker: {
background: '{surface.900}',
backgroundHighlight: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.400}',
textColorHighlight: '{primary.color}'
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
}
}
}
};

6
components/lib/themes/primeone/presets/aura/stepper/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

1
nuxt-vite.config.js
View File

@ -233,6 +233,7 @@ const THEME_COMPONENTS = [
'splitbutton',
'splitter',
'steps',
'stepper',
'tabmenu',
'tabview',
'tag',