From 2f73cc74263299fd90a04a0a127f8fd59bd12943 Mon Sep 17 00:00:00 2001 From: Sergey Arzamasov Date: Wed, 4 Dec 2024 12:15:24 +0400 Subject: [PATCH 1/6] add base Vue demo --- .../Demos/Pagination/Overview/Vue/App.vue | 19 +++++++++++++++++++ .../Demos/Pagination/Overview/Vue/index.html | 2 +- .../Demos/Pagination/Overview/Vue/index.js | 2 +- apps/demos/testing/common.test.js | 3 --- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue index ad7848d2eb91..2bffecfcb16f 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue +++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue @@ -4,15 +4,34 @@ :columns="columns" :show-borders="true" /> + diff --git a/apps/demos/Demos/Pagination/Overview/Vue/data.js b/apps/demos/Demos/Pagination/Overview/Vue/data.js deleted file mode 100644 index 6380157422df..000000000000 --- a/apps/demos/Demos/Pagination/Overview/Vue/data.js +++ /dev/null @@ -1,121 +0,0 @@ -export const customers = [{ - ID: 1, - CompanyName: 'Super Mart of the West', - Address: '702 SW 8th Street', - City: 'Bentonville', - State: 'Arkansas', - Zipcode: 72716, - Phone: '(800) 555-2797', - Fax: '(800) 555-2171', - Website: 'http://www.nowebsitesupermart.dx', -}, { - ID: 2, - CompanyName: 'Electronics Depot', - Address: '2455 Paces Ferry Road NW', - City: 'Atlanta', - State: 'Georgia', - Zipcode: 30339, - Phone: '(800) 595-3232', - Fax: '(800) 595-3231', - Website: 'http://www.nowebsitedepot.dx', -}, { - ID: 3, - CompanyName: 'K&S Music', - Address: '1000 Nicllet Mall', - City: 'Minneapolis', - State: 'Minnesota', - Zipcode: 55403, - Phone: '(612) 304-6073', - Fax: '(612) 304-6074', - Website: 'http://www.nowebsitemusic.dx', -}, { - ID: 4, - CompanyName: "Tom's Club", - Address: '999 Lake Drive', - City: 'Issaquah', - State: 'Washington', - Zipcode: 98027, - Phone: '(800) 955-2292', - Fax: '(800) 955-2293', - Website: 'http://www.nowebsitetomsclub.dx', -}, { - ID: 5, - CompanyName: 'E-Mart', - Address: '3333 Beverly Rd', - City: 'Hoffman Estates', - State: 'Illinois', - Zipcode: 60179, - Phone: '(847) 286-2500', - Fax: '(847) 286-2501', - Website: 'http://www.nowebsiteemart.dx', -}, { - ID: 6, - CompanyName: 'Walters', - Address: '200 Wilmot Rd', - City: 'Deerfield', - State: 'Illinois', - Zipcode: 60015, - Phone: '(847) 940-2500', - Fax: '(847) 940-2501', - Website: 'http://www.nowebsitewalters.dx', -}, { - ID: 7, - CompanyName: 'StereoShack', - Address: '400 Commerce S', - City: 'Fort Worth', - State: 'Texas', - Zipcode: 76102, - Phone: '(817) 820-0741', - Fax: '(817) 820-0742', - Website: 'http://www.nowebsiteshack.dx', -}, { - ID: 8, - CompanyName: 'Circuit Town', - Address: '2200 Kensington Court', - City: 'Oak Brook', - State: 'Illinois', - Zipcode: 60523, - Phone: '(800) 955-2929', - Fax: '(800) 955-9392', - Website: 'http://www.nowebsitecircuittown.dx', -}, { - ID: 9, - CompanyName: 'Premier Buy', - Address: '7601 Penn Avenue South', - City: 'Richfield', - State: 'Minnesota', - Zipcode: 55423, - Phone: '(612) 291-1000', - Fax: '(612) 291-2001', - Website: 'http://www.nowebsitepremierbuy.dx', -}, { - ID: 10, - CompanyName: 'ElectrixMax', - Address: '263 Shuman Blvd', - City: 'Naperville', - State: 'Illinois', - Zipcode: 60563, - Phone: '(630) 438-7800', - Fax: '(630) 438-7801', - Website: 'http://www.nowebsiteelectrixmax.dx', -}, { - ID: 11, - CompanyName: 'Video Emporium', - Address: '1201 Elm Street', - City: 'Dallas', - State: 'Texas', - Zipcode: 75270, - Phone: '(214) 854-3000', - Fax: '(214) 854-3001', - Website: 'http://www.nowebsitevideoemporium.dx', -}, { - ID: 12, - CompanyName: 'Screen Shop', - Address: '1000 Lowes Blvd', - City: 'Mooresville', - State: 'North Carolina', - Zipcode: 28117, - Phone: '(800) 445-6937', - Fax: '(800) 445-6938', - Website: 'http://www.nowebsitescreenshop.dx', -}]; diff --git a/apps/demos/Demos/Pagination/Overview/Vue/data.ts b/apps/demos/Demos/Pagination/Overview/Vue/data.ts new file mode 100644 index 000000000000..ee0d580fe540 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Vue/data.ts @@ -0,0 +1,419 @@ +export interface Employee { + ID: number; + FullName: string; + Title: string; + Employee_Picture: string; + Picture: string; + MobilePhone: string; +} + +export const employees: Employee[] = [ + { + ID: 1, + FullName: 'John Heart', + Title: 'CEO', + Employee_Picture: '01.png', + Picture: '../../../../images/employees/01.png', + MobilePhone: '2135559392', + }, + { + ID: 2, + FullName: 'Samantha Bright', + Title: 'COO', + Employee_Picture: '30.png', + Picture: '../../../../images/employees/30.png', + MobilePhone: '2135552858', + }, + { + ID: 3, + FullName: 'Arthur Miller', + Title: 'CTO', + Employee_Picture: '10.png', + Picture: '../../../../images/employees/10.png', + MobilePhone: '3105558583', + }, + { + ID: 4, + FullName: 'Robert Reagan', + Title: 'CMO', + Employee_Picture: '03.png', + Picture: '../../../../images/employees/03.png', + MobilePhone: '8185552387', + }, + { + ID: 5, + FullName: 'Greta Sims', + Title: 'HR Manager', + Employee_Picture: '04.png', + Picture: '../../../../images/employees/04.png', + MobilePhone: '8185556546', + }, + { + ID: 6, + FullName: 'Brett Wade', + Title: 'IT Manager', + Employee_Picture: '05.png', + Picture: '../../../../images/employees/05.png', + MobilePhone: '6265550358', + }, + { + ID: 7, + FullName: 'Sandra Johnson', + Title: 'Controller', + Employee_Picture: '06.png', + Picture: '../../../../images/employees/06.png', + MobilePhone: '5625552082', + }, + { + ID: 8, + FullName: 'Ed Holmes', + Title: 'Sales Manager', + Employee_Picture: '11.png', + Picture: '../../../../images/employees/11.png', + MobilePhone: '3105551288', + }, + { + ID: 9, + FullName: 'Barb Banks', + Title: 'Support Manager', + Employee_Picture: '20.png', + Picture: '../../../../images/employees/20.png', + MobilePhone: '3105553355', + }, + { + ID: 10, + FullName: 'Kevin Carter', + Title: 'Shipping Manager', + Employee_Picture: '07.png', + Picture: '../../../../images/employees/07.png', + MobilePhone: '2135552840', + }, + { + ID: 11, + FullName: 'Cindy Stanwick', + Title: 'HR Assistant', + Employee_Picture: '08.png', + Picture: '../../../../images/employees/08.png', + MobilePhone: '8185556655', + }, + { + ID: 12, + FullName: 'Sammy Hill', + Title: 'Sales Assistant', + Employee_Picture: '12.png', + Picture: '../../../../images/employees/12.png', + MobilePhone: '6265557292', + }, + { + ID: 13, + FullName: 'Davey Jones', + Title: 'Shipping Assistant', + Employee_Picture: '13.png', + Picture: '../../../../images/employees/13.png', + MobilePhone: '6265550281', + }, + { + ID: 14, + FullName: 'Victor Norris', + Title: 'Shipping Assistant', + Employee_Picture: '14.png', + Picture: '../../../../images/employees/14.png', + MobilePhone: '2135559278', + }, + { + ID: 15, + FullName: 'Mary Stern', + Title: 'Shipping Assistant', + Employee_Picture: '15.png', + Picture: '../../../../images/employees/15.png', + MobilePhone: '8185557857', + }, + { + ID: 16, + FullName: 'Robin Cosworth', + Title: 'Shipping Assistant', + Employee_Picture: '16.png', + Picture: '../../../../images/employees/16.png', + MobilePhone: '8185550942', + }, + { + ID: 17, + FullName: 'Kelly Rodriguez', + Title: 'Support Assistant', + Employee_Picture: '17.png', + Picture: '../../../../images/employees/17.png', + MobilePhone: '8185559248', + }, + { + ID: 18, + FullName: 'James Anderson', + Title: 'Support Assistant', + Employee_Picture: '18.png', + Picture: '../../../../images/employees/18.png', + MobilePhone: '3235554702', + }, + { + ID: 19, + FullName: 'Antony Remmen', + Title: 'Support Assistant', + Employee_Picture: '19.png', + Picture: '../../../../images/employees/19.png', + MobilePhone: '3105556625', + }, + { + ID: 20, + FullName: 'Olivia Peyton', + Title: 'Sales Assistant', + Employee_Picture: '09.png', + Picture: '../../../../images/employees/09.png', + MobilePhone: '3105552728', + }, + { + ID: 21, + FullName: 'Taylor Riley', + Title: 'Network Admin', + Employee_Picture: '21.png', + Picture: '../../../../images/employees/21.png', + MobilePhone: '3105557276', + }, + { + ID: 22, + FullName: 'Amelia Harper', + Title: 'Network Admin', + Employee_Picture: '22.png', + Picture: '../../../../images/employees/22.png', + MobilePhone: '2135554276', + }, + { + ID: 23, + FullName: 'Wally Hobbs', + Title: 'Programmer', + Employee_Picture: '23.png', + Picture: '../../../../images/employees/23.png', + MobilePhone: '8185558872', + }, + { + ID: 24, + FullName: 'Brad Jameson', + Title: 'Programmer', + Employee_Picture: '24.png', + Picture: '../../../../images/employees/24.png', + MobilePhone: '8185554646', + }, + { + ID: 25, + FullName: 'Karen Goodson', + Title: 'Programmer', + Employee_Picture: '25.png', + Picture: '../../../../images/employees/25.png', + MobilePhone: '6265550908', + }, + { + ID: 26, + FullName: 'Marcus Orbison', + Title: 'Travel Coordinator', + Employee_Picture: '26.png', + Picture: '../../../../images/employees/26.png', + MobilePhone: '2135557098', + }, + { + ID: 27, + FullName: 'Sandy Bright', + Title: 'Benefits Coordinator', + Employee_Picture: '27.png', + Picture: '../../../../images/employees/27.png', + MobilePhone: '8185550524', + }, + { + ID: 28, + FullName: 'Morgan Kennedy', + Title: 'Graphic Designer', + Employee_Picture: '28.png', + Picture: '../../../../images/employees/28.png', + MobilePhone: '8185558238', + }, + { + ID: 29, + FullName: 'Violet Bailey', + Title: 'Jr Graphic Designer', + Employee_Picture: '29.png', + Picture: '../../../../images/employees/29.png', + MobilePhone: '8185552478', + }, + { + ID: 30, + FullName: 'Ken Samuelson', + Title: 'Ombudsman', + Employee_Picture: '02.png', + Picture: '../../../../images/employees/02.png', + MobilePhone: '5625559282', + }, + { + ID: 31, + FullName: 'Nat Maguiree', + Title: 'Trainer', + Employee_Picture: '31.png', + Picture: '../../../../images/employees/31.png', + MobilePhone: '5625558377', + }, + { + ID: 32, + FullName: 'Bart Arnaz', + Title: 'Director of Engineering', + Employee_Picture: '32.png', + Picture: '../../../../images/employees/32.png', + MobilePhone: '7145552000', + }, + { + ID: 33, + FullName: 'Leah Simpson', + Title: 'Test Coordinator', + Employee_Picture: '33.png', + Picture: '../../../../images/employees/33.png', + MobilePhone: '5625595830', + }, + { + ID: 34, + FullName: 'Arnie Schwartz', + Title: 'Engineer', + Employee_Picture: '34.png', + Picture: '../../../../images/employees/34.png', + MobilePhone: '7145558882', + }, + { + ID: 35, + FullName: 'Billy Zimmer', + Title: 'Engineer', + Employee_Picture: '51.png', + Picture: '../../../../images/employees/51.png', + MobilePhone: '9095556939', + }, + { + ID: 36, + FullName: 'Samantha Piper', + Title: 'Engineer', + Employee_Picture: '35.png', + Picture: '../../../../images/employees/35.png', + MobilePhone: '3235554512', + }, + { + ID: 37, + FullName: 'Maggie Boxter', + Title: 'Engineer', + Employee_Picture: '36.png', + Picture: '../../../../images/employees/36.png', + MobilePhone: '7145557239', + }, + { + ID: 38, + FullName: 'Terry Bradley', + Title: 'QA Engineer', + Employee_Picture: '37.png', + Picture: '../../../../images/employees/37.png', + MobilePhone: '8055552788', + }, + { + ID: 39, + FullName: 'Gabe Jones', + Title: 'Retail Coordinator', + Employee_Picture: '38.png', + Picture: '../../../../images/employees/38.png', + MobilePhone: '3105555395', + }, + { + ID: 40, + FullName: 'Lucy Ball', + Title: 'Sales Assistant', + Employee_Picture: '39.png', + Picture: '../../../../images/employees/39.png', + MobilePhone: '3105553357', + }, + { + ID: 41, + FullName: 'Jim Packard', + Title: 'Retail Sales Manager', + Employee_Picture: '40.png', + Picture: '../../../../images/employees/40.png', + MobilePhone: '6615558224', + }, + { + ID: 42, + FullName: 'Hannah Brookly', + Title: 'Online Sales Manager', + Employee_Picture: '41.png', + Picture: '../../../../images/employees/41.png', + MobilePhone: '8055553627', + }, + { + ID: 43, + FullName: 'Harv Mudd', + Title: 'Retail Sales Manager', + Employee_Picture: '42.png', + Picture: '../../../../images/employees/42.png', + MobilePhone: '8315553895', + }, + { + ID: 44, + FullName: 'Clark Morgan', + Title: 'Retail Sales Manager', + Employee_Picture: '43.png', + Picture: '../../../../images/employees/43.png', + MobilePhone: '9255552525', + }, + { + ID: 45, + FullName: 'Todd Hoffman', + Title: 'Retail Sales Manager', + Employee_Picture: '44.png', + Picture: '../../../../images/employees/44.png', + MobilePhone: '9255553579', + }, + { + ID: 46, + FullName: 'Jackie Garmin', + Title: 'Support Assistant', + Employee_Picture: '45.png', + Picture: '../../../../images/employees/45.png', + MobilePhone: '2135551824', + }, + { + ID: 47, + FullName: 'Lincoln Bartlett', + Title: 'Sales Assistant', + Employee_Picture: '46.png', + Picture: '../../../../images/employees/46.png', + MobilePhone: '2135558272', + }, + { + ID: 48, + FullName: 'Brad Farkus', + Title: 'Engineer', + Employee_Picture: '47.png', + Picture: '../../../../images/employees/47.png', + MobilePhone: '2135553626', + }, + { + ID: 49, + FullName: 'Jenny Hobbs', + Title: 'Shipping Assistant', + Employee_Picture: '48.png', + Picture: '../../../../images/employees/48.png', + MobilePhone: '3105552668', + }, + { + ID: 50, + FullName: 'Dallas Lou', + Title: 'Shipping Assistant', + Employee_Picture: '49.png', + Picture: '../../../../images/employees/49.png', + MobilePhone: '2135558357', + }, + { + ID: 51, + FullName: 'Stu Pizaro', + Title: 'Engineer', + Employee_Picture: '50.png', + Picture: '../../../../images/employees/50.png', + MobilePhone: '2135552552', + }, +]; diff --git a/apps/demos/Demos/Pagination/Overview/Vue/index.html b/apps/demos/Demos/Pagination/Overview/Vue/index.html index 4f3bc92c6f1d..7ebc7f30a85a 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/index.html +++ b/apps/demos/Demos/Pagination/Overview/Vue/index.html @@ -17,7 +17,7 @@ diff --git a/apps/demos/Demos/Pagination/Overview/Vue/index.js b/apps/demos/Demos/Pagination/Overview/Vue/index.ts similarity index 100% rename from apps/demos/Demos/Pagination/Overview/Vue/index.js rename to apps/demos/Demos/Pagination/Overview/Vue/index.ts From 25e1d91565ead119a208a16612474cd4796840be Mon Sep 17 00:00:00 2001 From: Sergey Arzamasov Date: Wed, 4 Dec 2024 15:04:33 +0400 Subject: [PATCH 3/6] add employee gallery --- .../Demos/Pagination/Overview/Vue/App.vue | 156 +++++++++++++++++- 1 file changed, 150 insertions(+), 6 deletions(-) diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue index ab595353bbef..e8ef75381193 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue +++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue @@ -1,4 +1,32 @@ - + + \ No newline at end of file From 9ce8bfd85a3a1c1280a2a5a588d2234baea349c3 Mon Sep 17 00:00:00 2001 From: Sergey Arzamasov Date: Wed, 4 Dec 2024 15:28:45 +0400 Subject: [PATCH 4/6] migrate to composition API --- .../Demos/Pagination/Overview/Vue/App.vue | 46 ++++--------------- 1 file changed, 9 insertions(+), 37 deletions(-) diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue index e8ef75381193..1c640528dbe9 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue +++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue @@ -31,14 +31,16 @@ :show-info="showInfo" :show-navigation-buttons="showPageSizeSelector" :allowed-page-sizes="pageSizes" - :page-index="pageIndex" - :page-size="pageSize" + v-model:page-index="pageIndex" + v-model:page-size="pageSize" :item-count="itemCount" - @option-changed="handlePropertyChange" /> -