diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 2c2238a5a..44459b8c7 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -26,6 +26,7 @@ import menubar from 'primevue/theme/aura/menubar'; import message from 'primevue/theme/aura/message'; import metergroup from 'primevue/theme/aura/metergroup'; import orderlist from 'primevue/theme/aura/orderlist'; +import organizationchart from 'primevue/theme/aura/organizationchart'; import overlaypanel from 'primevue/theme/aura/overlaypanel'; import panel from 'primevue/theme/aura/panel'; import panelmenu from 'primevue/theme/aura/panelmenu'; @@ -195,6 +196,7 @@ export default { inlinemessage, inplace, orderlist, + organizationchart, overlaypanel, panel, panelmenu, diff --git a/components/lib/theme/aura/organizationchart/index.js b/components/lib/theme/aura/organizationchart/index.js new file mode 100644 index 000000000..59cc2ea58 --- /dev/null +++ b/components/lib/theme/aura/organizationchart/index.js @@ -0,0 +1,133 @@ +export default { + variables: { + colorScheme: { + light: { + node: { + background: '{surface.0}', + backgroundHover: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + toggleIcon: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{surface.500}' + }, + connector: { + color: '{surface.200}' + } + }, + dark: {} + } + }, + css: ` +.p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; +} + +.p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; +} + +.p-organizationchart-node-content { + display: inline-block; + position: relative; + border: 1px solid var(--p-organizationchart-node-border-color); + background: var(--p-organizationchart-node-background); + color: var(--p-organizationchart-node-text-color); + padding: 0.75rem 1rem; + border-radius: var(--p-rounded-base); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration); +} + +.p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; +} + +.p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: var(--p-organizationchart-node-background-hover); + color: var(--p-organizationchart-node-text-color-hover); +} + +.p-organizationchart-node-content.p-highlight { + background: var(--p-list-item-highlight-background); + color: var(--p-list-item-highlight-text-color); +} + +.p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + background: var(--p-organizationchart-toggle-icon-background); + color: var(--p-organizationchart-toggle-icon-color); + border-radius: 50%; + border: 1px solid var(--p-organizationchart-toggle-icon-border-color); + display: inline-flex; + justify-content: center; + align-items: center; + outline-color: transparent; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration); +} + +.p-organizationchart-node-content .p-node-toggler: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-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 1px; +} + +.p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + background: var(--p-organizationchart-connector-color); +} + +.p-organizationchart-line-right { + border-radius: 0; + border-left: 1px solid var(--p-organizationchart-connector-color); + border-top-left-radius: var(--p-rounded-base); +} + +.p-organizationchart-line-left { + border-radius: 0; + border-right: 1px solid var(--p-organizationchart-connector-color); +} + +.p-organizationchart-line-top { + border-top: 1px solid var(--p-organizationchart-connector-color); +} + +.p-organizationchart-selectable-node { + cursor: pointer; +} + +.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; +} + +.p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: var(--p-rounded-base); +} + +.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid var(--p-organizationchart-connector-color); + border-top-left-radius: var(--p-rounded-base); +} +` +}; diff --git a/components/lib/theme/aura/organizationchart/package.json b/components/lib/theme/aura/organizationchart/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/organizationchart/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}