Implemented Splitter

components/lib/theme/aura/index.js

@@ -3,6 +3,7 @@ import divider from 'primevue/theme/aura/divider';
 import fieldset from 'primevue/theme/aura/fieldset';
 import global from 'primevue/theme/aura/global';
 import panel from 'primevue/theme/aura/panel';
+import splitter from 'primevue/theme/aura/splitter';
 
 export default {
     primitive: {
@@ -127,7 +128,7 @@ export default {
             borderRadius: '6px',
             transitionDuration: '.2s',
             focusRing: {
-                width: '2px',
+                width: '1px',
                 style: 'solid',
                 color: '{primary.500}',
                 offset: '2px'
@@ -163,6 +164,7 @@ export default {
         panel,
         divider,
         fieldset,
-        avatar
+        avatar,
+        splitter
     }
 };

components/lib/theme/aura/splitter/index.js

@@ -0,0 +1,79 @@
+export default {
+    css: `
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    background: var(--p-dark-surface-900, var(--p-surface-0));
+    border-radius: 6px;
+    color: var(--p-text-color);
+}
+
+.p-splitter-vertical {
+    flex-direction: column;
+}
+
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: var(--p-dark-surface-700, var(--p-surface-200));
+}
+
+.p-splitter-gutter-handle {
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+}
+
+.p-splitter-gutter-handle: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-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    user-select: none;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+
+.p-splitter-panel {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.p-splitter-panel-nested {
+    display: flex;
+}
+
+.p-splitter-panel .p-splitter {
+    flex-grow: 1;
+    border: 0 none;
+}
+`
+};