Merge branch 'master' of https://github.com/primefaces/primevue
Cagatay Civici
commit
1e0e3e6155
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f7fbff;
|
||||
--primary-100:#daedfd;
|
||||
--primary-200:#bcdffb;
|
||||
--primary-300:#9fd1f9;
|
||||
--primary-400:#81c3f8;
|
||||
--primary-500:#64b5f6;
|
||||
--primary-600:#559ad1;
|
||||
--primary-700:#467fac;
|
||||
--primary-800:#376487;
|
||||
--primary-900:#284862;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f9fcf9;
|
||||
--primary-100:#e1f2e1;
|
||||
--primary-200:#c9e7ca;
|
||||
--primary-300:#b1dcb3;
|
||||
--primary-400:#99d29b;
|
||||
--primary-500:#81c784;
|
||||
--primary-600:#6ea970;
|
||||
--primary-700:#5a8b5c;
|
||||
--primary-800:#476d49;
|
||||
--primary-900:#345035;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#fffdf6;
|
||||
--primary-100:#fff5d5;
|
||||
--primary-200:#ffedb3;
|
||||
--primary-300:#ffe592;
|
||||
--primary-400:#ffdd70;
|
||||
--primary-500:#ffd54f;
|
||||
--primary-600:#d9b543;
|
||||
--primary-700:#b39537;
|
||||
--primary-800:#8c752b;
|
||||
--primary-900:#665520;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#fcf7fc;
|
||||
--primary-100:#eedbf2;
|
||||
--primary-200:#e1bee7;
|
||||
--primary-300:#d4a1dd;
|
||||
--primary-400:#c785d2;
|
||||
--primary-500:#ba68c8;
|
||||
--primary-600:#9e58aa;
|
||||
--primary-700:#82498c;
|
||||
--primary-800:#66396e;
|
||||
--primary-900:#4a2a50;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#9a2530;
|
||||
--red-800:#791d26;
|
||||
--red-900:#58151c;
|
||||
--primary-50:#f9fdff;
|
||||
--primary-100:#e4f4ff;
|
||||
--primary-200:#ceebff;
|
||||
--primary-300:#b8e2ff;
|
||||
--primary-400:#a3d9ff;
|
||||
--primary-500:#8dd0ff;
|
||||
--primary-600:#78b1d9;
|
||||
--primary-700:#6392b3;
|
||||
--primary-800:#4e728c;
|
||||
--primary-900:#385366;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#9a2530;
|
||||
--red-800:#791d26;
|
||||
--red-900:#58151c;
|
||||
--primary-50:#fcfafd;
|
||||
--primary-100:#f0e6f6;
|
||||
--primary-200:#e5d3ee;
|
||||
--primary-300:#d9bfe7;
|
||||
--primary-400:#ceacdf;
|
||||
--primary-500:#c298d8;
|
||||
--primary-600:#a581b8;
|
||||
--primary-700:#886a97;
|
||||
--primary-800:#6b5477;
|
||||
--primary-900:#4e3d56;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#9a2530;
|
||||
--red-800:#791d26;
|
||||
--red-900:#58151c;
|
||||
--primary-50:#f2f8ff;
|
||||
--primary-100:#c2dfff;
|
||||
--primary-200:#91c6ff;
|
||||
--primary-300:#61adff;
|
||||
--primary-400:#3094ff;
|
||||
--primary-500:#007bff;
|
||||
--primary-600:#0069d9;
|
||||
--primary-700:#0056b3;
|
||||
--primary-800:#00448c;
|
||||
--primary-900:#003166;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#9a2530;
|
||||
--red-800:#791d26;
|
||||
--red-900:#58151c;
|
||||
--primary-50:#f9f5fb;
|
||||
--primary-100:#e2d0ec;
|
||||
--primary-200:#ccabdc;
|
||||
--primary-300:#b586cd;
|
||||
--primary-400:#9f61bd;
|
||||
--primary-500:#883cae;
|
||||
--primary-600:#743394;
|
||||
--primary-700:#5f2a7a;
|
||||
--primary-800:#4b2160;
|
||||
--primary-900:#361846;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#922427;
|
||||
--red-800:#731d1f;
|
||||
--red-900:#541516;
|
||||
--primary-50:#f2f8fd;
|
||||
--primary-100:#c2dff5;
|
||||
--primary-200:#91c5ed;
|
||||
--primary-300:#61abe4;
|
||||
--primary-400:#3092dc;
|
||||
--primary-500:#0078d4;
|
||||
--primary-600:#0066b4;
|
||||
--primary-700:#005494;
|
||||
--primary-800:#004275;
|
||||
--primary-900:#003055;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#fafcff;
|
||||
--primary-100:#e5f1ff;
|
||||
--primary-200:#d1e6fe;
|
||||
--primary-300:#bcdbfe;
|
||||
--primary-400:#a8d0fd;
|
||||
--primary-500:#93c5fd;
|
||||
--primary-600:#7da7d7;
|
||||
--primary-700:#678ab1;
|
||||
--primary-800:#516c8b;
|
||||
--primary-900:#3b4f65;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#fbfbff;
|
||||
--primary-100:#e9edfe;
|
||||
--primary-200:#d8dffe;
|
||||
--primary-300:#c7d1fd;
|
||||
--primary-400:#b6c2fd;
|
||||
--primary-500:#a5b4fc;
|
||||
--primary-600:#8c99d6;
|
||||
--primary-700:#747eb0;
|
||||
--primary-800:#5b638b;
|
||||
--primary-900:#424865;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#fcfbff;
|
||||
--primary-100:#f1edff;
|
||||
--primary-200:#e6dffe;
|
||||
--primary-300:#dad1fe;
|
||||
--primary-400:#cfc3fd;
|
||||
--primary-500:#c4b5fd;
|
||||
--primary-600:#a79ad7;
|
||||
--primary-700:#897fb1;
|
||||
--primary-800:#6c648b;
|
||||
--primary-900:#4e4865;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#f7fefd;
|
||||
--primary-100:#d8faf5;
|
||||
--primary-200:#baf6ed;
|
||||
--primary-300:#9bf2e4;
|
||||
--primary-400:#7deedc;
|
||||
--primary-500:#5eead4;
|
||||
--primary-600:#50c7b4;
|
||||
--primary-700:#42a494;
|
||||
--primary-800:#348175;
|
||||
--primary-900:#265e55;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#f5f9ff;
|
||||
--primary-100:#d0e1fd;
|
||||
--primary-200:#abc9fb;
|
||||
--primary-300:#85b2f9;
|
||||
--primary-400:#609af8;
|
||||
--primary-500:#3b82f6;
|
||||
--primary-600:#326fd1;
|
||||
--primary-700:#295bac;
|
||||
--primary-800:#204887;
|
||||
--primary-900:#183462;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#f7f7fe;
|
||||
--primary-100:#dadafc;
|
||||
--primary-200:#bcbdf9;
|
||||
--primary-300:#9ea0f6;
|
||||
--primary-400:#8183f4;
|
||||
--primary-500:#6366f1;
|
||||
--primary-600:#5457cd;
|
||||
--primary-700:#4547a9;
|
||||
--primary-800:#363885;
|
||||
--primary-900:#282960;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#f9f7ff;
|
||||
--primary-100:#e3d8fd;
|
||||
--primary-200:#cdb9fb;
|
||||
--primary-300:#b79af9;
|
||||
--primary-400:#a17bf8;
|
||||
--primary-500:#8b5cf6;
|
||||
--primary-600:#764ed1;
|
||||
--primary-700:#6140ac;
|
||||
--primary-800:#4c3387;
|
||||
--primary-900:#382562;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32b23;
|
||||
--red-800:#8c221c;
|
||||
--red-900:#661814;
|
||||
--primary-50:#f3fbfb;
|
||||
--primary-100:#c7eeea;
|
||||
--primary-200:#9ae0d9;
|
||||
--primary-300:#6dd3c8;
|
||||
--primary-400:#41c5b7;
|
||||
--primary-500:#14b8a6;
|
||||
--primary-600:#119c8d;
|
||||
--primary-700:#0e8174;
|
||||
--primary-800:#0b655b;
|
||||
--primary-900:#084a42;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#fffdf9;
|
||||
--primary-100:#fff8e1;
|
||||
--primary-200:#fff2c9;
|
||||
--primary-300:#ffecb2;
|
||||
--primary-400:#ffe69a;
|
||||
--primary-500:#ffe082;
|
||||
--primary-600:#d9be6f;
|
||||
--primary-700:#b39d5b;
|
||||
--primary-800:#8c7b48;
|
||||
--primary-900:#665a34;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#f9fdff;
|
||||
--primary-100:#e1f5fe;
|
||||
--primary-200:#c9edfd;
|
||||
--primary-300:#b1e4fc;
|
||||
--primary-400:#99dcfb;
|
||||
--primary-500:#81d4fa;
|
||||
--primary-600:#6eb4d5;
|
||||
--primary-700:#5a94af;
|
||||
--primary-800:#47758a;
|
||||
--primary-900:#345564;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#fcfefb;
|
||||
--primary-100:#f1f8e9;
|
||||
--primary-200:#e6f2d8;
|
||||
--primary-300:#dbecc7;
|
||||
--primary-400:#d0e7b6;
|
||||
--primary-500:#c5e1a5;
|
||||
--primary-600:#a7bf8c;
|
||||
--primary-700:#8a9e74;
|
||||
--primary-800:#6c7c5b;
|
||||
--primary-900:#4f5a42;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#fef9fb;
|
||||
--primary-100:#fce4ec;
|
||||
--primary-200:#facfdd;
|
||||
--primary-300:#f8bacf;
|
||||
--primary-400:#f6a4c0;
|
||||
--primary-500:#f48fb1;
|
||||
--primary-600:#cf7a96;
|
||||
--primary-700:#ab647c;
|
||||
--primary-800:#864f61;
|
||||
--primary-900:#623947;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#fdfafd;
|
||||
--primary-100:#f3e5f6;
|
||||
--primary-200:#ead1ee;
|
||||
--primary-300:#e1bce7;
|
||||
--primary-400:#d7a8df;
|
||||
--primary-500:#ce93d8;
|
||||
--primary-600:#af7db8;
|
||||
--primary-700:#906797;
|
||||
--primary-800:#715177;
|
||||
--primary-900:#523b56;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#fafbfd;
|
||||
--primary-100:#e8eaf6;
|
||||
--primary-200:#d6daef;
|
||||
--primary-300:#c3c9e8;
|
||||
--primary-400:#b1b9e1;
|
||||
--primary-500:#9fa8da;
|
||||
--primary-600:#878fb9;
|
||||
--primary-700:#6f7699;
|
||||
--primary-800:#575c78;
|
||||
--primary-900:#404357;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#f7f5fb;
|
||||
--primary-100:#dbd0ee;
|
||||
--primary-200:#beaae0;
|
||||
--primary-300:#a185d2;
|
||||
--primary-400:#845fc5;
|
||||
--primary-500:#673ab7;
|
||||
--primary-600:#58319c;
|
||||
--primary-700:#482980;
|
||||
--primary-800:#392065;
|
||||
--primary-900:#291749;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#f5f6fb;
|
||||
--primary-100:#d1d5ed;
|
||||
--primary-200:#acb4df;
|
||||
--primary-300:#8893d1;
|
||||
--primary-400:#6372c3;
|
||||
--primary-500:#3f51b5;
|
||||
--primary-600:#36459a;
|
||||
--primary-700:#2c397f;
|
||||
--primary-800:#232d64;
|
||||
--primary-900:#192048;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#fdfafd;
|
||||
--primary-100:#f3e5f6;
|
||||
--primary-200:#ead1ee;
|
||||
--primary-300:#e1bce7;
|
||||
--primary-400:#d7a8df;
|
||||
--primary-500:#ce93d8;
|
||||
--primary-600:#af7db8;
|
||||
--primary-700:#906797;
|
||||
--primary-800:#715177;
|
||||
--primary-900:#523b56;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#fafbfd;
|
||||
--primary-100:#e8eaf6;
|
||||
--primary-200:#d6daef;
|
||||
--primary-300:#c3c9e8;
|
||||
--primary-400:#b1b9e1;
|
||||
--primary-500:#9fa8da;
|
||||
--primary-600:#878fb9;
|
||||
--primary-700:#6f7699;
|
||||
--primary-800:#575c78;
|
||||
--primary-900:#404357;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#f7f5fb;
|
||||
--primary-100:#dbd0ee;
|
||||
--primary-200:#beaae0;
|
||||
--primary-300:#a185d2;
|
||||
--primary-400:#845fc5;
|
||||
--primary-500:#673ab7;
|
||||
--primary-600:#58319c;
|
||||
--primary-700:#482980;
|
||||
--primary-800:#392065;
|
||||
--primary-900:#291749;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
--red-700:#ab2f26;
|
||||
--red-800:#86251e;
|
||||
--red-900:#621b16;
|
||||
--primary-50:#f5f6fb;
|
||||
--primary-100:#d1d5ed;
|
||||
--primary-200:#acb4df;
|
||||
--primary-300:#8893d1;
|
||||
--primary-400:#6372c3;
|
||||
--primary-500:#3f51b5;
|
||||
--primary-600:#36459a;
|
||||
--primary-700:#2c397f;
|
||||
--primary-800:#232d64;
|
||||
--primary-900:#192048;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
@ -6085,9 +6095,7 @@
|
|||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
|
||||
}
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
|
||||
.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#f2f8fd;
|
||||
--primary-100:#c2dff6;
|
||||
--primary-200:#91c6ef;
|
||||
--primary-300:#61ade7;
|
||||
--primary-400:#3093e0;
|
||||
--primary-500:#007ad9;
|
||||
--primary-600:#0068b8;
|
||||
--primary-700:#005598;
|
||||
--primary-800:#004377;
|
||||
--primary-900:#003157;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#f2f8fd;
|
||||
--primary-100:#c2dff6;
|
||||
--primary-200:#91c6ef;
|
||||
--primary-300:#61ade7;
|
||||
--primary-400:#3093e0;
|
||||
--primary-500:#007ad9;
|
||||
--primary-600:#0068b8;
|
||||
--primary-700:#005598;
|
||||
--primary-800:#004377;
|
||||
--primary-900:#003157;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#f6fbf9;
|
||||
--primary-100:#d1eee1;
|
||||
--primary-200:#ade0ca;
|
||||
--primary-300:#89d3b2;
|
||||
--primary-400:#65c59b;
|
||||
--primary-500:#41b883;
|
||||
--primary-600:#379c6f;
|
||||
--primary-700:#2e815c;
|
||||
--primary-800:#246548;
|
||||
--primary-900:#1a4a34;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#971d0d;
|
||||
--red-800:#77170a;
|
||||
--red-900:#561108;
|
||||
--primary-50:#f2f8fd;
|
||||
--primary-100:#c2dff6;
|
||||
--primary-200:#91c6ef;
|
||||
--primary-300:#61ade7;
|
||||
--primary-400:#3093e0;
|
||||
--primary-500:#007ad9;
|
||||
--primary-600:#0068b8;
|
||||
--primary-700:#005598;
|
||||
--primary-800:#004377;
|
||||
--primary-900:#003157;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b33d25;
|
||||
--red-800:#8c301d;
|
||||
--red-900:#662315;
|
||||
--primary-50:#f8fafa;
|
||||
--primary-100:#dfe6e9;
|
||||
--primary-200:#c6d1d7;
|
||||
--primary-300:#adbdc6;
|
||||
--primary-400:#94a9b4;
|
||||
--primary-500:#7b95a3;
|
||||
--primary-600:#697f8b;
|
||||
--primary-700:#566872;
|
||||
--primary-800:#44525a;
|
||||
--primary-900:#313c41;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f4fafe;
|
||||
--primary-100:#cae6fc;
|
||||
--primary-200:#a0d2fa;
|
||||
--primary-300:#75bef8;
|
||||
--primary-400:#4baaf5;
|
||||
--primary-500:#2196f3;
|
||||
--primary-600:#1c80cf;
|
||||
--primary-700:#1769aa;
|
||||
--primary-800:#125386;
|
||||
--primary-900:#0d3c61;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f6fbf6;
|
||||
--primary-100:#d4ecd5;
|
||||
--primary-200:#b2ddb4;
|
||||
--primary-300:#90cd93;
|
||||
--primary-400:#6ebe71;
|
||||
--primary-500:#4caf50;
|
||||
--primary-600:#419544;
|
||||
--primary-700:#357b38;
|
||||
--primary-800:#2a602c;
|
||||
--primary-900:#1e4620;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#fffcf3;
|
||||
--primary-100:#fff0c3;
|
||||
--primary-200:#ffe494;
|
||||
--primary-300:#ffd965;
|
||||
--primary-400:#ffcd36;
|
||||
--primary-500:#ffc107;
|
||||
--primary-600:#d9a406;
|
||||
--primary-700:#b38705;
|
||||
--primary-800:#8c6a04;
|
||||
--primary-900:#664d03;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#faf4fb;
|
||||
--primary-100:#e7cbec;
|
||||
--primary-200:#d4a2dd;
|
||||
--primary-300:#c279ce;
|
||||
--primary-400:#af50bf;
|
||||
--primary-500:#9c27b0;
|
||||
--primary-600:#852196;
|
||||
--primary-700:#6d1b7b;
|
||||
--primary-800:#561561;
|
||||
--primary-900:#3e1046;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -257,6 +257,16 @@
|
|||
--red-700:#a73030;
|
||||
--red-800:#832525;
|
||||
--red-900:#601b1b;
|
||||
--primary-50:#f6f6fe;
|
||||
--primary-100:#d5d3f9;
|
||||
--primary-200:#b3aff4;
|
||||
--primary-300:#928cef;
|
||||
--primary-400:#7069ea;
|
||||
--primary-500:#4f46e5;
|
||||
--primary-600:#433cc3;
|
||||
--primary-700:#3731a0;
|
||||
--primary-800:#2b277e;
|
||||
--primary-900:#201c5c;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f7fbff;
|
||||
--primary-100:#daedfd;
|
||||
--primary-200:#bcdffb;
|
||||
--primary-300:#9fd1f9;
|
||||
--primary-400:#81c3f8;
|
||||
--primary-500:#64b5f6;
|
||||
--primary-600:#559ad1;
|
||||
--primary-700:#467fac;
|
||||
--primary-800:#376487;
|
||||
--primary-900:#284862;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#f9fcf9;
|
||||
--primary-100:#e1f2e1;
|
||||
--primary-200:#c9e7ca;
|
||||
--primary-300:#b1dcb3;
|
||||
--primary-400:#99d29b;
|
||||
--primary-500:#81c784;
|
||||
--primary-600:#6ea970;
|
||||
--primary-700:#5a8b5c;
|
||||
--primary-800:#476d49;
|
||||
--primary-900:#345035;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#fffdf6;
|
||||
--primary-100:#fff5d5;
|
||||
--primary-200:#ffedb3;
|
||||
--primary-300:#ffe592;
|
||||
--primary-400:#ffdd70;
|
||||
--primary-500:#ffd54f;
|
||||
--primary-600:#d9b543;
|
||||
--primary-700:#b39537;
|
||||
--primary-800:#8c752b;
|
||||
--primary-900:#665520;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -222,6 +222,16 @@
|
|||
--red-700:#b32d23;
|
||||
--red-800:#8c231c;
|
||||
--red-900:#661a14;
|
||||
--primary-50:#fcf7fc;
|
||||
--primary-100:#eedbf2;
|
||||
--primary-200:#e1bee7;
|
||||
--primary-300:#d4a1dd;
|
||||
--primary-400:#c785d2;
|
||||
--primary-500:#ba68c8;
|
||||
--primary-600:#9e58aa;
|
||||
--primary-700:#82498c;
|
||||
--primary-800:#66396e;
|
||||
--primary-900:#4a2a50;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-loader {
|
||||
|
|
|
|||
|
|
@ -198,38 +198,17 @@ describe('DataTable.vue', () => {
|
|||
<Column header="Profits" :colspan="2" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearSale"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearSale"/>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearProfit"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
||||
<Column header="Last Year"/>
|
||||
<Column header="This Year"/>
|
||||
<Column header="Last Year"/>
|
||||
<Column header="This Year"/>
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
<Column field="product" />
|
||||
<Column field="lastYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.lastYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.thisYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="lastYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.lastYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.thisYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<ColumnGroup type="footer">
|
||||
<Row>
|
||||
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
|
||||
<Column :footer="lastYearTotal" />
|
||||
<Column :footer="thisYearTotal" />
|
||||
<Column footer="Totals:" :colspan="3"/>
|
||||
<Column footer="Last Year Total" />
|
||||
<Column footer="This Year Total" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
</DataTable>
|
||||
|
|
@ -270,102 +249,10 @@ describe('DataTable.vue', () => {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header');
|
||||
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer');
|
||||
});
|
||||
|
||||
it('should column group and row templating', () => {
|
||||
wrapper = mount({
|
||||
components: {
|
||||
DataTable,
|
||||
ColumnGroup,
|
||||
Row,
|
||||
Column
|
||||
},
|
||||
template: `
|
||||
<DataTable :value="sales" responsiveLayout="scroll">
|
||||
<ColumnGroup type="header">
|
||||
<Row>
|
||||
<Column header="Product" :rowspan="3" />
|
||||
<Column header="Sale Rate" :colspan="4" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Sales" :colspan="2" />
|
||||
<Column header="Profits" :colspan="2" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearSale"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearSale"/>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearProfit"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
<Column field="product" />
|
||||
<Column field="lastYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.lastYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.thisYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="lastYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.lastYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.thisYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<ColumnGroup type="footer">
|
||||
<Row>
|
||||
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
|
||||
<Column :footer="lastYearTotal" />
|
||||
<Column :footer="thisYearTotal" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
</DataTable>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
sales: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.sales = [
|
||||
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
||||
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lastYearTotal() {
|
||||
let total = 0;
|
||||
for(let sale of this.sales) {
|
||||
total += sale.lastYearProfit;
|
||||
}
|
||||
|
||||
return this.formatCurrency(total);
|
||||
},
|
||||
thisYearTotal() {
|
||||
let total = 0;
|
||||
for(let sale of this.sales) {
|
||||
total += sale.thisYearProfit;
|
||||
}
|
||||
|
||||
return this.formatCurrency(total);
|
||||
}
|
||||
}
|
||||
});
|
||||
const headerRows = wrapper.findAll('.p-datatable-thead > tr');
|
||||
|
||||
expect(headerRows.length).toEqual(3);
|
||||
|
|
@ -384,150 +271,78 @@ describe('DataTable.vue', () => {
|
|||
expect(headerRows[2].findAll('th')[1].text()).toEqual('This Year');
|
||||
expect(headerRows[2].findAll('th')[2].text()).toEqual('Last Year');
|
||||
expect(headerRows[2].findAll('th')[3].text()).toEqual('This Year');
|
||||
});
|
||||
|
||||
it('should column group templating', () => {
|
||||
wrapper = mount({
|
||||
components: {
|
||||
DataTable,
|
||||
ColumnGroup,
|
||||
Row,
|
||||
Column
|
||||
},
|
||||
template: `
|
||||
<DataTable :value="sales" responsiveLayout="scroll">
|
||||
<ColumnGroup type="header">
|
||||
<Row>
|
||||
<Column header="Product" :rowspan="3" />
|
||||
<Column header="Sale Rate" :colspan="4" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Sales" :colspan="2" />
|
||||
<Column header="Profits" :colspan="2" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearSale"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearSale"/>
|
||||
<Column header="Last Year" :sortable="true" field="lastYearProfit"/>
|
||||
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
<Column field="product" />
|
||||
<Column field="lastYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.lastYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearSale">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.data.thisYearSale}}%
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="lastYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.lastYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="thisYearProfit">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.thisYearProfit)}}
|
||||
</template>
|
||||
</Column>
|
||||
<ColumnGroup type="footer">
|
||||
<Row>
|
||||
<Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
|
||||
<Column :footer="lastYearTotal" />
|
||||
<Column :footer="thisYearTotal" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
</DataTable>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
sales: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.sales = [
|
||||
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
||||
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lastYearTotal() {
|
||||
let total = 0;
|
||||
for(let sale of this.sales) {
|
||||
total += sale.lastYearProfit;
|
||||
}
|
||||
|
||||
return this.formatCurrency(total);
|
||||
},
|
||||
thisYearTotal() {
|
||||
let total = 0;
|
||||
for(let sale of this.sales) {
|
||||
total += sale.thisYearProfit;
|
||||
}
|
||||
|
||||
return this.formatCurrency(total);
|
||||
}
|
||||
}
|
||||
});
|
||||
const footerRows = wrapper.findAll('.p-datatable-tfoot > tr');
|
||||
|
||||
expect(footerRows.length).toEqual(1);
|
||||
|
||||
expect(footerRows[0].findAll('td')[0].attributes().colspan).toEqual('3');
|
||||
expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
|
||||
expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
|
||||
});
|
||||
|
||||
|
||||
// pagination
|
||||
it('should have a paginator', async () => {
|
||||
await wrapper.setProps({ value: data, paginator: true, rows: 5 });
|
||||
|
||||
expect(wrapper.find('.p-paginator').exists()).toBe(true);
|
||||
expect(wrapper.findAll('.p-paginator-page').length).toEqual(2);
|
||||
expect(wrapper.find('.p-paginator-next').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled');
|
||||
expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-highlight');
|
||||
expect(wrapper.find('.p-paginator-current').text()).toBe('Showing 1 to 5 of 10');
|
||||
|
||||
await wrapper.vm.onPage({page: 1, first: 5, rows: 5, pageCount: 2});
|
||||
|
||||
expect(wrapper.findAll('.p-paginator-page')[0].classes()).not.toContain('p-highlight');
|
||||
expect(wrapper.findAll('.p-paginator-page')[1].classes()).toContain('p-highlight');
|
||||
expect(footerRows[0].findAll('td')[1].text()).toEqual('Last Year Total');
|
||||
expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
|
||||
});
|
||||
|
||||
|
||||
// sorting
|
||||
it('should single sort', async () => {
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
Column
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
const sortableTH = wrapper.findAll('.p-sortable-column')[0];
|
||||
const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
|
||||
const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
|
||||
|
||||
await sortableTH.trigger('click');
|
||||
|
||||
expect(headerClick).toHaveBeenCalled();
|
||||
expect(sortableTH.classes()).toContain('p-highlight');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
|
||||
expect(wrapper.emitted()['update:sortField'][0]).toEqual(['code']);
|
||||
expect(wrapper.emitted()['value-change'][0]).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should multiple sort', async () => {
|
||||
const sortableTHs = wrapper.findAll('.p-sortable-column');
|
||||
const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
Column
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData,
|
||||
sortMode: 'multiple'
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.setProps({ sortMode: 'multiple' });
|
||||
const sortableTHs = wrapper.findAll('.p-sortable-column');
|
||||
const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
|
||||
const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
|
||||
|
||||
await sortableTHs[0].trigger('click');
|
||||
|
||||
expect(headerClick).toHaveBeenCalled();
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
|
||||
|
||||
const seconCellText = wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text();
|
||||
|
||||
await sortableTHs[1].trigger('click');
|
||||
|
||||
|
|
@ -536,31 +351,74 @@ describe('DataTable.vue', () => {
|
|||
expect(wrapper.emitted()['update:multiSortMeta'][0]).toEqual([[{ field: 'code', order: 1 }]]);
|
||||
expect(wrapper.emitted()['update:multiSortMeta'][1]).toEqual([[{ field: 'name', order: 1 }]]);
|
||||
expect(wrapper.emitted()['value-change'][0]).not.toEqual(wrapper.emitted()['value-change'][1]);
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text()).not.toEqual(seconCellText);
|
||||
});
|
||||
|
||||
it('should have presort', async () => {
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
Column
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData,
|
||||
sortOrder: -1,
|
||||
sortField: 'code'
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
const presortedTH = wrapper.findAll('.p-sortable-column')[0];
|
||||
|
||||
await wrapper.setProps({ sortOrder: -1, sortField: 'code' });
|
||||
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual('Game Controller');
|
||||
expect(presortedTH.classes()).toContain('p-highlight');
|
||||
});
|
||||
|
||||
it('should remove sort', async () => {
|
||||
const sortableTH = wrapper.findAll('.p-sortable-column')[0];
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
Column
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData,
|
||||
removableSort: true
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.setProps({ removableSort: true });
|
||||
const sortableTH = wrapper.findAll('.p-sortable-column')[0];
|
||||
const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
|
||||
|
||||
await sortableTH.trigger('click');
|
||||
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
|
||||
expect(sortableTH.attributes()['aria-sort']).toBe('ascending');
|
||||
|
||||
const updatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
|
||||
|
||||
await sortableTH.trigger('click');
|
||||
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(updatedFirstCellText);
|
||||
expect(sortableTH.attributes()['aria-sort']).toBe('descending');
|
||||
|
||||
const latestUpdatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
|
||||
|
||||
await sortableTH.trigger('click');
|
||||
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(latestUpdatedFirstCellText);
|
||||
expect(sortableTH.attributes()['aria-sort']).toBe('none');
|
||||
});
|
||||
|
||||
|
|
@ -1301,8 +1159,7 @@ describe('DataTable.vue', () => {
|
|||
expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating');
|
||||
});
|
||||
|
||||
// expandable row groups
|
||||
it('should expand', () => {
|
||||
it('should have expandable row groups and expand rows', async () => {
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
|
|
@ -1310,31 +1167,124 @@ describe('DataTable.vue', () => {
|
|||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData,
|
||||
value: [
|
||||
{
|
||||
"id":1000,
|
||||
"name":"James Butt",
|
||||
"country":{
|
||||
"name":"Algeria",
|
||||
"code":"dz"
|
||||
},
|
||||
"company":"Benton, John B Jr",
|
||||
"representative":{
|
||||
"name":"Ioni Bowcher",
|
||||
"image":"ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id":1001,
|
||||
"name":"Josephine Darakjy",
|
||||
"country":{
|
||||
"name":"Egypt",
|
||||
"code":"eg"
|
||||
},
|
||||
"company":"Chanay, Jeffrey A Esq",
|
||||
"representative":{
|
||||
"name":"Amy Elsner",
|
||||
"image":"amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id":1013,
|
||||
"name":"Graciela Ruta",
|
||||
"country":{
|
||||
"name":"Chile",
|
||||
"code":"cl"
|
||||
},
|
||||
"company":"Buckley Miller & Wright",
|
||||
"representative":{
|
||||
"name":"Amy Elsner",
|
||||
"image":"amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id":1021,
|
||||
"name":"Veronika Inouye",
|
||||
"country":{
|
||||
"name":"Ecuador",
|
||||
"code":"ec"
|
||||
},
|
||||
"company":"C 4 Network Inc",
|
||||
"representative":{
|
||||
"name":"Ioni Bowcher",
|
||||
"image":"ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id":1026,
|
||||
"name":"Chanel Caudy",
|
||||
"country":{
|
||||
"name":"Argentina",
|
||||
"code":"ar"
|
||||
},
|
||||
"company":"Professional Image Inc",
|
||||
"representative":{
|
||||
"name":"Ioni Bowcher",
|
||||
"image":"ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id":1027,
|
||||
"name":"Ezekiel Chui",
|
||||
"country":{
|
||||
"name":"Ireland",
|
||||
"code":"ie"
|
||||
},
|
||||
"company":"Sider, Donald C Esq",
|
||||
"representative":{
|
||||
"name":"Amy Elsner",
|
||||
"image":"amyelsner.png"
|
||||
}
|
||||
}
|
||||
],
|
||||
rowGroupMode: 'subheader',
|
||||
groupRowsBy: 'name',
|
||||
groupRowsBy: 'representative.name',
|
||||
sortMode: 'single',
|
||||
sortField: 'name',
|
||||
sortField: 'representative.name',
|
||||
sortOrder: 1,
|
||||
scrollable: true,
|
||||
expandableRowGroups: true,
|
||||
expandedRowGroups: ['Blue Band']
|
||||
expandedRowGroups: null,
|
||||
responsiveLayout: 'scroll'
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="country" header="Country"></Column>
|
||||
<Column field="company" header="Company"></Column>
|
||||
`,
|
||||
groupheader: `GroupHeader Templating`,
|
||||
groupfooter: `GroupFooter Templating`
|
||||
groupheader: `
|
||||
<template #groupheader="slotProps">
|
||||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.p-column-title').text()).toBe('Code');
|
||||
expect(wrapper.findAll('.p-datatable-thead > tr > th').length).toBe(3);
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header').length).toBe(2);
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header')[0].text()).toBe('Amy Elsner');
|
||||
|
||||
const firstToggler = wrapper.findAll('.p-row-toggler')[0];
|
||||
|
||||
await firstToggler.trigger('click');
|
||||
|
||||
expect(wrapper.emitted()['update:expandedRowGroups'][0]).toEqual([['Amy Elsner']]);
|
||||
expect(wrapper.emitted()['rowgroup-expand'][0][0].data).toBe('Amy Elsner');
|
||||
});
|
||||
|
||||
// rowspan grouping
|
||||
it('should rowspan', async () => {
|
||||
it('should have rowspan grouping', async () => {
|
||||
wrapper = mount(DataTable, {
|
||||
global: {
|
||||
components: {
|
||||
|
|
@ -1342,25 +1292,65 @@ describe('DataTable.vue', () => {
|
|||
}
|
||||
},
|
||||
props: {
|
||||
value: smallData,
|
||||
value: [
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller"
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch"
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band"
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "vbb124btrvbb124btr",
|
||||
"name": "Game Controller"
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "nvklal433nvklal433",
|
||||
"name": "Black Watch"
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "zz21cz3c1zz21cz3c1",
|
||||
"name": "Blue Band"
|
||||
}
|
||||
],
|
||||
rowGroupMode: 'rowspan',
|
||||
groupRowsBy: 'name',
|
||||
sortMode: 'single',
|
||||
sortField: 'name',
|
||||
sortOrder: 1,
|
||||
scrollable: true
|
||||
scrollable: true,
|
||||
responsiveLayout: 'scroll'
|
||||
},
|
||||
slots: {
|
||||
default: `
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column header="#">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.index}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
`,
|
||||
groupheader: `GroupHeader Templating`,
|
||||
groupfooter: `GroupFooter Templating`
|
||||
<Column field="code" header="Code"></Column>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('td > span').text()).toBe('Code');
|
||||
expect(wrapper.find('.p-datatable-thead > tr').findAll('th')[0].text()).toBe('#');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[0].text()).toBe('0');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).toBe('Black Watch');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].attributes().rowspan).toBe('2');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[2].findAll('td')[1].attributes().rowspan).toBe('2');
|
||||
expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import InputText from '@/components/inputText/InputText.vue';
|
||||
import InputText from './InputText.vue';
|
||||
|
||||
describe('InputText.vue', () => {
|
||||
it('is InputText component exists', async () => {
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray'],
|
||||
colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray', 'primary'],
|
||||
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,135 +25,134 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
},
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
},
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -192,8 +191,8 @@ export default {
|
|||
|
||||
</code></pre>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
||||
<h5>Templating</h5>
|
||||
<p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<ContextMenu :model="items">
|
||||
<template #item="{item}">
|
||||
|
|
@ -298,23 +297,23 @@ export default {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Slots</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>item</td>
|
||||
<td>item: Menuitem instance</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h5>Slots</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>item</td>
|
||||
<td>item: Menuitem instance</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
|
|
|
|||
|
|
@ -435,7 +435,7 @@ export default {
|
|||
<td>option: OptionGroup instance <br />
|
||||
index: Index of the option group</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>value: Value of the component <br />
|
||||
placeholder: Placeholder prop value</td>
|
||||
|
|
|
|||
|
|
@ -16,23 +16,23 @@
|
|||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2" />
|
||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
|
||||
<h3>Left Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
|
||||
<h3>Right Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
|
||||
<h3>Top Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
|
||||
<h3>Bottom Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
|
||||
<h3>Full Screen</h3>
|
||||
</Sidebar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -225,23 +225,23 @@ export default {
|
|||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2" />
|
||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
|
||||
<h3>Left Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
|
||||
<h3>Right Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
|
||||
<h3>Top Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
|
||||
<h3>Bottom Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
|
||||
<h3>Full Screen</h3>
|
||||
</Sidebar>
|
||||
</div>
|
||||
|
|
@ -273,23 +273,23 @@ export default {
|
|||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2" />
|
||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
|
||||
<h3>Left Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
|
||||
<Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
|
||||
<h3>Right Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
|
||||
<Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
|
||||
<h3>Top Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
|
||||
<h3>Bottom Sidebar</h3>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
|
||||
<Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
|
||||
<h3>Full Screen</h3>
|
||||
</Sidebar>
|
||||
</div>
|
||||
|
|
@ -322,23 +322,23 @@ export default {
|
|||
<p-button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"></p-button>
|
||||
<p-button icon="pi pi-th-large" @click="visibleFull = true"></p-button>
|
||||
|
||||
<p-sidebar v-model:visible="visibleLeft" :base-z-index="1000">
|
||||
<p-sidebar v-model:visible="visibleLeft" :base-z-index="10000">
|
||||
<h3>Left Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar v-model:visible="visibleRight" :base-z-index="1000" position="right">
|
||||
<p-sidebar v-model:visible="visibleRight" :base-z-index="10000" position="right">
|
||||
<h3>Right Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar v-model:visible="visibleTop" :base-z-index="1000" position="top">
|
||||
<p-sidebar v-model:visible="visibleTop" :base-z-index="10000" position="top">
|
||||
<h3>Top Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar v-model:visible="visibleBottom" :base-z-index="1000" position="bottom">
|
||||
<p-sidebar v-model:visible="visibleBottom" :base-z-index="10000" position="bottom">
|
||||
<h3>Bottom Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar v-model:visible="visibleFull" :base-z-index="1000" position="full">
|
||||
<p-sidebar v-model:visible="visibleFull" :base-z-index="10000" position="full">
|
||||
<h3>Full Screen</h3>
|
||||
</p-sidebar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -149,20 +149,20 @@ export default {
|
|||
<h5>Slots</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>item</td>
|
||||
<td>item: Menuitem instance</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>item</td>
|
||||
<td>item: Menuitem instance</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ import TabPanel from 'primevue/tabpanel';
|
|||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
Content III
|
||||
Content III
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
||||
|
|
|
|||
185
untitled
185
untitled
|
|
@ -1,185 +0,0 @@
|
|||
// window.HTMLElement.prototype.getBoundingClientRect = function () {};
|
||||
|
||||
it('should filtercallback work', async () => {
|
||||
wrapper = mount({
|
||||
components: {
|
||||
DataTable,
|
||||
Column,
|
||||
Button,
|
||||
InputText
|
||||
},
|
||||
template: `
|
||||
<DataTable :value="value" v-model:filters="filters" :globalFilterFields="['code', 'name']" filterDisplay="row">
|
||||
<template #header>
|
||||
<div class="flex justify-content-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<Column field="code" header="Code">
|
||||
<template #body="{data}">
|
||||
{{data.code}}
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="{data}">
|
||||
{{data.name}}
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
value: smallData,
|
||||
filters: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initFilters1();
|
||||
},
|
||||
methods: {
|
||||
clearFilter1() {
|
||||
this.initFilters1();
|
||||
},
|
||||
initFilters1() {
|
||||
this.filters = {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'code': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
const inputs = wrapper.findAll('input.p-column-filter');
|
||||
// const onFilterApply = jest.spyOn(wrapper.vm, 'onFilterApply');
|
||||
console.log(inputs[0].html())
|
||||
// inputs[0].element.value = 'z';
|
||||
// await inputs[0].setValue('z');
|
||||
// await inputs[0].trigger('keydown.enter');
|
||||
await inputs[0].trigger('input', { key: 'z' });
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// expect(onFilterApply).toHaveBeenCalled();
|
||||
console.log(wrapper.vm.filters.code)
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
it('should start drag over the column', async () => {
|
||||
const firstTH = wrapper.findAll('th')[0];
|
||||
const headerContent = wrapper.findAll('.p-column-header-content')[0];
|
||||
console.log(firstTH)
|
||||
|
||||
await wrapper.setProps({ reorderableColumns: true });
|
||||
|
||||
await wrapper.vm.onColumnHeaderDragStart({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, dataTransfer: { setData: () => {}} });
|
||||
|
||||
await wrapper.vm.onColumnHeaderDragOver({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
|
||||
|
||||
await wrapper.vm.onColumnHeaderDragLeave({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
|
||||
|
||||
await wrapper.vm.onColumnHeaderDrop({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
|
||||
|
||||
|
||||
|
||||
console.log(wrapper.componentVM.draggedColumn)
|
||||
|
||||
});
|
||||
|
||||
it('should have row styling', async () => {
|
||||
await wrapper.setProps({ rowClass: (data) => {console.log(data)}});
|
||||
|
||||
console.log()
|
||||
});
|
||||
|
||||
|
||||
// describe('DataTable and ContextMenu', () => {
|
||||
// it('should exist', async () => {
|
||||
// const wrapper = mount({
|
||||
// global: {
|
||||
// mocks: {
|
||||
// $primevue: {
|
||||
// config: {
|
||||
// 'ripple': true,
|
||||
// 'inputStyle': 'outlined'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// stubs: ['router-link'],
|
||||
// },
|
||||
// components: {
|
||||
// DataTable,
|
||||
// Column,
|
||||
// ContextMenu
|
||||
// },
|
||||
// template: `
|
||||
// <DataTable :value="smallData" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
|
||||
// <Column field="code" header="Code"></Column>
|
||||
// <Column field="name" header="Name"></Column>
|
||||
// </DataTable>
|
||||
|
||||
// <ContextMenu :model="menuModel" ref="cm" />
|
||||
// `,
|
||||
// data() {
|
||||
// return {
|
||||
// smallData: [
|
||||
// {
|
||||
// "id": "1000",
|
||||
// "code": "vbb124btr",
|
||||
// "name": "Game Controller"
|
||||
// },
|
||||
// {
|
||||
// "id": "1001",
|
||||
// "code": "nvklal433",
|
||||
// "name": "Black Watch"
|
||||
// },
|
||||
// {
|
||||
// "id": "1002",
|
||||
// "code": "zz21cz3c1",
|
||||
// "name": "Blue Band"
|
||||
// }
|
||||
// ],
|
||||
// selectedProduct: null,
|
||||
// menuModel: [
|
||||
// {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
|
||||
// {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// methods: {
|
||||
// onRowContextMenu(event) {
|
||||
// this.$refs.cm.show(event.originalEvent);
|
||||
// },
|
||||
// viewProduct(product) {
|
||||
// console.log(product);
|
||||
// },
|
||||
// deleteProduct(product) {
|
||||
// this.products = this.products.filter((p) => p.id !== product.id);
|
||||
// this.selectedProduct = null;
|
||||
// },
|
||||
// }
|
||||
// });
|
||||
|
||||
// const firstTD = wrapper.findAll('td')[0];
|
||||
|
||||
// const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}};
|
||||
|
||||
// wrapper.componentVM.onRowContextMenu({ originalEvent: { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}} });
|
||||
|
||||
// // console.log(wrapper.html())
|
||||
|
||||
// });
|
||||
// });
|
||||
Loading…
Reference in New Issue