diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index d50ff39f2..249768142 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -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, diff --git a/components/lib/themes/primeone/base/stepper/index.js b/components/lib/themes/primeone/base/stepper/index.js new file mode 100644 index 000000000..8a011e736 --- /dev/null +++ b/components/lib/themes/primeone/base/stepper/index.js @@ -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; +} +` +}; diff --git a/components/lib/themes/primeone/base/stepper/package.json b/components/lib/themes/primeone/base/stepper/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/stepper/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 50587e128..770f5b686 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -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, diff --git a/components/lib/themes/primeone/presets/aura/stepper/index.js b/components/lib/themes/primeone/presets/aura/stepper/index.js new file mode 100644 index 000000000..7d3c0885f --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/stepper/index.js @@ -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}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/stepper/package.json b/components/lib/themes/primeone/presets/aura/stepper/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/stepper/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index df94b723b..3fb7532e1 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -233,6 +233,7 @@ const THEME_COMPONENTS = [ 'splitbutton', 'splitter', 'steps', + 'stepper', 'tabmenu', 'tabview', 'tag',