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

Fixed #2913 - Improve Splitter implementation for Accessibility

pull/2929/head
Tuğçe Küçükoğlu 2022-08-31 14:44:48 +03:00
parent 5761c63410
commit bc17ff6022
47 changed files with 447 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api-generator/components/splitter.js
View File

@ -22,7 +22,13 @@ const SplitterProps = [
type: "string",
default: "storage",
description: 'Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.'
}
},
{
name: "step",
type: "number",
default: "1",
description: "Step factor to increment/decrement the size of the panels while pressing the arrow keys."
},
];
const SplitterEvents = [

6
public/themes/arya-blue/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #383838;
}

6
public/themes/arya-green/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #383838;
}

6
public/themes/arya-orange/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #383838;
}

6
public/themes/arya-purple/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #383838;
}

6
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -3980,6 +3980,12 @@
transition: color 0.15s, box-shadow 0.15s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #e3f3fe;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #3f4b5b;
}

6
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -3980,6 +3980,12 @@
transition: color 0.15s, box-shadow 0.15s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #f0e6f5;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #3f4b5b;
}

6
public/themes/bootstrap4-light-blue/theme.css
View File

@ -3980,6 +3980,12 @@
transition: box-shadow 0.15s;
background: #efefef;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/bootstrap4-light-purple/theme.css
View File

@ -3980,6 +3980,12 @@
transition: box-shadow 0.15s;
background: #efefef;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/fluent-light/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #faf9f8;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset inset 0 0 0 1px #605e5c;
border-radius: 2px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #edebe9;
}

6
public/themes/lara-dark-blue/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #0b213f;
}

6
public/themes/lara-dark-indigo/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #0b213f;
}

6
public/themes/lara-dark-purple/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #0b213f;
}

6
public/themes/lara-dark-teal/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #0b213f;
}

6
public/themes/lara-light-blue/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #BFDBFE;
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/lara-light-indigo/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #C7D2FE;
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/lara-light-purple/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #DDD6FE;
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/lara-light-teal/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #99F6E4;
border-radius: 6px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/luna-amber/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #191919;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #4b4b4b;
}

6
public/themes/luna-blue/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #191919;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #4b4b4b;
}

6
public/themes/luna-green/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #191919;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #4b4b4b;
}

6
public/themes/luna-pink/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #191919;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #4b4b4b;
}

6
public/themes/md-dark-deeppurple/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(255, 255, 255, 0.12);
}

6
public/themes/md-dark-indigo/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(255, 255, 255, 0.12);
}

6
public/themes/md-light-deeppurple/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(0, 0, 0, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(0, 0, 0, 0.12);
}

6
public/themes/md-light-indigo/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(0, 0, 0, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(0, 0, 0, 0.12);
}

6
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(255, 255, 255, 0.12);
}

6
public/themes/mdc-dark-indigo/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(255, 255, 255, 0.12);
}

6
public/themes/mdc-light-deeppurple/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(0, 0, 0, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(0, 0, 0, 0.12);
}

6
public/themes/mdc-light-indigo/theme.css
View File

@ -3992,6 +3992,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(0, 0, 0, 0.04);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
border-radius: 4px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: rgba(0, 0, 0, 0.12);
}

6
public/themes/nova-accent/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #eaeaea;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #d8dae2;
}

6
public/themes/nova-alt/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #eaeaea;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #d8dae2;
}

6
public/themes/nova-vue/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #eaeaea;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #c2e9d8;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #d8dae2;
}

6
public/themes/nova/theme.css
View File

@ -3955,6 +3955,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #eaeaea;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #d8dae2;
}

6
public/themes/rhea/theme.css
View File

@ -3943,6 +3943,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #eaeaea;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #e4e9ec;
border-radius: 2px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dadada;
}

6
public/themes/saga-blue/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #a6d5fa;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/saga-green/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #b7e0b8;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/saga-orange/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ffe69c;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/saga-purple/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: #f8f9fa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #df9eea;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #dee2e6;
}

6
public/themes/tailwind-light/theme.css
View File

@ -4003,6 +4003,12 @@
transition: none;
background: #fafafa;
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #6366F1;
border-radius: 0.375rem;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #e5e7eb;
}

6
public/themes/vela-blue/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #304562;
}

6
public/themes/vela-green/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #304562;
}

6
public/themes/vela-orange/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #304562;
}

6
public/themes/vela-purple/theme.css
View File

@ -3968,6 +3968,12 @@
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
border-radius: 3px;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
background: #304562;
}

5
src/components/splitter/Splitter.d.ts vendored
View File

@ -38,6 +38,11 @@ export interface SplitterProps {
* Default value is 'session'.
*/
stateStorage?: SplitterStateStorageType;
/**
* Step factor to increment/decrement the size of the panels while pressing the arrow keys.
* Default value is 1.
*/
step?: number | undefined;
}
export interface SplitterSlots {

138
src/components/splitter/Splitter.vue
View File

@ -1,12 +1,9 @@
<template>
<div :class="containerClass">
<template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
<component :is="panel"></component>
<div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
@mousedown="onGutterMouseDown($event, i)"
@touchstart="onGutterTouchStart($event, i)"
@touchmove="onGutterTouchMove($event, i)"
@touchend="onGutterTouchEnd($event, i)">
<component :is="panel" tabindex="-1"></component>
<div class="p-splitter-gutter" role="separator" tabindex="0" v-if="i !== (panels.length -1)" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize"
@mousedown="onGutterMouseDown($event, i)" @touchstart="onGutterTouchStart($event, i)" @touchmove="onGutterTouchMove($event, i)" @touchend="onGutterTouchEnd($event, i)" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)">
<div class="p-splitter-gutter-handle"></div>
</div>
</template>
@ -35,6 +32,10 @@ export default {
stateStorage: {
type: String,
default: 'session'
},
step: {
type: Number,
default: 1
}
},
dragging: false,
@ -51,6 +52,12 @@ export default {
prevPanelSize: null,
panelSizes: null,
prevPanelIndex: null,
timer: null,
data() {
return {
prevSize: null
}
},
mounted() {
if (this.panels && this.panels.length) {
let initialized = false;
@ -70,6 +77,7 @@ export default {
});
this.panelSizes = _panelSizes;
this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
}
}
},
@ -81,28 +89,54 @@ export default {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
onResizeStart(event, index) {
this.gutterElement = event.currentTarget;
onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target;
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
this.dragging = true;
this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
if (!isKeyDown) {
this.dragging = true;
this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
}
this.prevPanelElement = this.gutterElement.previousElementSibling;
this.nextPanelElement = this.gutterElement.nextElementSibling;
this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
if (isKeyDown) {
this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true);
this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true);
}
else {
this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
}
this.prevPanelIndex = index;
DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
DomHandler.addClass(this.$el, 'p-splitter-resizing');
},
onResize(event) {
let newPos;
if (this.horizontal)
newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
else
newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
onResize(event, step, isKeyDown) {
let newPos, newPrevPanelSize, newNextPanelSize;
if (isKeyDown) {
if (this.horizontal) {
newPrevPanelSize = 100 * (this.prevPanelSize + step) / this.size;
newNextPanelSize = 100 * (this.nextPanelSize - step) / this.size;
}
else {
newPrevPanelSize = 100 * (this.prevPanelSize - step) / this.size;
newNextPanelSize = 100 * (this.nextPanelSize + step) / this.size;
}
}
else {
if (this.horizontal)
newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
else
newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
let newPrevPanelSize = this.prevPanelSize + newPos;
let newNextPanelSize = this.nextPanelSize - newPos;
newPrevPanelSize = this.prevPanelSize + newPos;
newNextPanelSize = this.nextPanelSize - newPos;
}
this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
@ -121,6 +155,68 @@ export default {
DomHandler.removeClass(this.$el, 'p-splitter-resizing');
this.clear();
},
repeat(event, index, step) {
this.onResizeStart(event, index, true);
this.onResize(event, step, true);
},
setTimer(event, index, step) {
this.clearTimer();
this.timer = setTimeout(() => {
this.repeat(event, index, step);
}, 40);
},
clearTimer() {
if (this.timer) {
clearTimeout(this.timer);
}
},
onGutterKeyUp() {
this.clearTimer();
this.onResizeEnd();
},
onGutterKeyDown(event, index) {
switch(event.code) {
case 'ArrowLeft': {
if (this.layout === 'horizontal') {
this.setTimer(event, index, this.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowRight': {
if (this.layout === 'horizontal') {
this.setTimer(event, index, this.step);
}
event.preventDefault();
break;
}
case 'ArrowDown': {
if (this.layout === 'vertical') {
this.setTimer(event, index, this.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowUp': {
if (this.layout === 'vertical') {
this.setTimer(event, index, this.step);
}
event.preventDefault();
break;
}
default:
//no op
break;
}
},
onGutterMouseDown(event, index) {
this.onResizeStart(event, index);
this.bindMouseListeners();
@ -261,7 +357,7 @@ export default {
else if (child.children instanceof Array) {
child.children.forEach(nestedChild => {
if (this.isSplitterPanel(nestedChild)) {
panels.push(nestedChild)
panels.push(nestedChild);
}
});
}

60
src/views/splitter/SplitterDoc.vue
View File

@ -124,6 +124,20 @@ import SplitterPanel from 'primevue/splitterpanel';
&lt;/SplitterPanel&gt;
&lt;/Splitter&gt;
</code></pre>
<h5>Steps</h5>
<p>Step factor is 1px by default and can be customized with <i>step</i> option.</p>
<pre v-code><code>
&lt;Splitter :step="10"&gt;
&lt;SplitterPanel&gt;
Panel 1
&lt;/SplitterPanel&gt;
&lt;SplitterPanel&gt;
Panel 2
&lt;/SplitterPanel&gt;
&lt;/Splitter&gt;
</code></pre>
<h5>Properties of SplitterPanel</h5>
@ -191,6 +205,12 @@ import SplitterPanel from 'primevue/splitterpanel';
<td>string</td>
<td>session</td>
<td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>1</td>
<td>Step factor to increment/decrement the size of the panels while pressing the arrow keys.</td>
</tr>
</tbody>
</table>
@ -260,6 +280,46 @@ import SplitterPanel from 'primevue/splitterpanel';
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus through the splitter bar.</td>
</tr>
<tr>
<td><i>down arrow</i></td>
<td>Moves a vertical splitter down.</td>
</tr>
<tr>
<td><i>up arrow</i></td>
<td>Moves a vertical splitter up.</td>
</tr>
<tr>
<td><i>left arrow</i></td>
<td>Moves a horizontal splitter to the left.</td>
</tr>
<tr>
<td><i>right arrow</i></td>
<td>Moves a horizontal splitter to the right.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>