diff --git a/.github/workflows/update_version.yml b/.github/workflows/update_version.yml index ba52c68d223d..db5200824ca1 100644 --- a/.github/workflows/update_version.yml +++ b/.github/workflows/update_version.yml @@ -59,7 +59,7 @@ jobs: git config --global user.name "DX Robot" - name: Bump version - run: pnpm run all:update-version -- ${{ inputs.version }} + run: pnpm run all:update-version ${{ inputs.version }} - name: Commit changes and make PR env: diff --git a/README.md b/README.md index 7f920ee7cf24..e8f65f4b59e9 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ The DevExtreme website includes "Getting Started" guides for every aspect of Dev - [Demo Gallery](https://js.devexpress.com/Demos/WidgetsGallery) - [Responsive UI Templates](https://js.devexpress.com/Templates/UITemplates) - [Documentation](https://js.devexpress.com/Documentation) -- [Examples on GitHub](https://github.com/DevExpress/DevExtreme-examples) +- [Examples on GitHub](https://github.com/DevExpress-Examples) - [YouTube videos](https://www.youtube.com/playlist?list=PL8h4jt35t1wjGvgflbHEH_e3b23AA30-z) ## Contributing diff --git a/apps/angular/package.json b/apps/angular/package.json index dd3ca1f02ed0..7475db83a5a3 100644 --- a/apps/angular/package.json +++ b/apps/angular/package.json @@ -2,7 +2,7 @@ "name": "devextreme-angular-playground", "description": "DevExtreme Angular UI and Visualization Components", "private": true, - "version": "24.2.2", + "version": "24.2.3", "author": "Developer Express Inc.", "license": "MIT", "dependencies": { diff --git a/apps/demos/Demos/Chat/Customization/description.md b/apps/demos/Demos/Chat/Customization/description.md new file mode 100644 index 000000000000..d2a48de2bfb3 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/description.md @@ -0,0 +1,14 @@ +Use the following properties to customize the Chat component: + +- To display/hide Chat UI elements: + - [showAvatar](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showAvatar) + - [showUserName](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showUserName) + - [showDayHeaders](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showDayHeaders) + - [showMessageTimestamp](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showMessageTimestamp) + +- To modify date/time formats: + - [dayHeaderFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dayHeaderFormat) + - [messageTimestampFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTimestampFormat) + +- To deactivate Chat, use the [disabled](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#disabled) property. + \ No newline at end of file diff --git a/apps/demos/Demos/Pagination/Overview/React/App.tsx b/apps/demos/Demos/Pagination/Overview/React/App.tsx index e453a174cbfa..43ffc99aae3b 100644 --- a/apps/demos/Demos/Pagination/Overview/React/App.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/App.tsx @@ -1,13 +1,32 @@ -import React from "react"; -import Pagination from "devextreme-react/pagination"; -import { customers } from "./data.ts"; +import React, { useState } from 'react'; +import Pagination from 'devextreme-react/pagination'; +import EmployeeGallery from './EmployeesGallery.tsx'; -const columns = ["CompanyName", "City", "State", "Phone", "Fax"]; +import { employees } from './data.ts'; + +const PAGE_SIZES = [4, 6]; const App = () => { + const [pageSize, setPageSize] = useState(4); + const [pageIndex, setPageIndex] = useState(1); + return ( <> - + + ); }; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx new file mode 100644 index 000000000000..cf450dd52775 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Employee } from './data'; + +interface EmployeeCardProps { + employee: Employee; +} + +const EmployeeCard = ({ employee }: EmployeeCardProps) => { + return ( +
+
+ {employee.FullName} +
+
+
+ Full Name: + {employee.FullName} +
+ +
+ Position: + {employee.Title} +
+ +
+ Phone: + {employee.MobilePhone} +
+
+
+ ); +}; + +export default EmployeeCard; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx new file mode 100644 index 000000000000..c8667c9b344f --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import EmployeeCard from './EmployeeCard.tsx'; +import { Employee } from './data'; + +interface EmployeeGalleryProps { + employees: Employee[]; + pageSize: number; + pageIndex: number; +} + +const EmployeeGallery = ({ employees, pageSize, pageIndex }: EmployeeGalleryProps) => { + const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; + const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); + + return ( +
+ {pageEmployees.map((employee) => ( + + ))} +
+ ); +}; + +export default EmployeeGallery; diff --git a/apps/demos/Demos/Pagination/Overview/React/data.ts b/apps/demos/Demos/Pagination/Overview/React/data.ts index 6380157422df..bd2e43e18ba2 100644 --- a/apps/demos/Demos/Pagination/Overview/React/data.ts +++ b/apps/demos/Demos/Pagination/Overview/React/data.ts @@ -1,121 +1,419 @@ -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', -}]; +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', + }, +]; \ No newline at end of file diff --git a/apps/demos/Demos/Pagination/Overview/React/index.html b/apps/demos/Demos/Pagination/Overview/React/index.html index bc116ceea64c..637762a048ae 100644 --- a/apps/demos/Demos/Pagination/Overview/React/index.html +++ b/apps/demos/Demos/Pagination/Overview/React/index.html @@ -6,6 +6,7 @@ + @@ -17,7 +18,7 @@
-
+
diff --git a/apps/demos/Demos/Pagination/Overview/React/index.tsx b/apps/demos/Demos/Pagination/Overview/React/index.tsx index 8acbec4b6179..4677a2c67a3f 100644 --- a/apps/demos/Demos/Pagination/Overview/React/index.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/index.tsx @@ -5,5 +5,5 @@ import App from './App.tsx'; ReactDOM.render( , - document.getElementById('app'), + document.querySelector('.container'), ); diff --git a/apps/demos/Demos/Pagination/Overview/React/styles.css b/apps/demos/Demos/Pagination/Overview/React/styles.css new file mode 100644 index 000000000000..346ba3ee6b1e --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/styles.css @@ -0,0 +1,100 @@ +body { + overflow-x: hidden; +} + +.demo-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + min-width: 720px; + width: 100%; +} + +.employees { + display: flex; + flex-wrap: wrap; + gap: 16px; + min-height: 644px; + padding-bottom: 24px; +} + +.employees__card { + width: 100%; + max-height: 312px; + align-self: stretch; + overflow: hidden; + border: var(--dx-border-width) solid var(--dx-color-border); + border-radius: var(--dx-border-radius); + background-color: var(--dx-component-color-bg); +} + +.employees.employees--forth .employees__card { + min-width: 250px; + width: 390px; + flex-basis: calc(50% - 10px); +} + +.employees.employees--six .employees__card { + flex-basis: calc(33.3% - 12.5px); +} + +.employees__img-wrapper { + height: 180px; + position: relative; + overflow: hidden; + border-bottom: var(--dx-border-width) solid var(--dx-color-border); + background-color: #fff; +} + +.employees__img { + display: block; + height: 220px; + position: absolute; + content: ""; + left: 50%; + top: 0; + transform: translateX(-50%); +} + +.employees__info { + padding: 24px; +} + +.employees__info-row { + margin-bottom: 8px; + text-wrap: nowrap; +} + +.employees__info-label { + display: inline-block; + font-weight: 600; + vertical-align: middle; +} + +.employees.employees--forth .employees__info-label { + width: 160px; +} + +.employees.employees--six .employees__info-label { + width: 80px; +} + +.employees__info-value { + display: inline-block; + text-wrap: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + overflow: hidden; + white-space:nowrap +} + +.employees.employees--forth .employees__info-value { + max-width: 180px; +} + +.employees.employees--six .employees__info-value { + max-width: 120px; +} diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/App.js b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js index dd3fc58e798b..23eb27a81f2c 100644 --- a/apps/demos/Demos/Pagination/Overview/ReactJs/App.js +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js @@ -1,15 +1,30 @@ -import React from "react"; -import Pagination from "devextreme-react/pagination"; -import { customers } from "./data.js"; - -const columns = ["CompanyName", "City", "State", "Phone", "Fax"]; +import React, { useState } from 'react'; +import Pagination from 'devextreme-react/pagination'; +import EmployeeGallery from './EmployeesGallery.js'; +import { employees } from './data.js'; +const PAGE_SIZES = [4, 6]; const App = () => { + const [pageSize, setPageSize] = useState(4); + const [pageIndex, setPageIndex] = useState(1); return ( - <> - - + + + + ); }; - export default App; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js new file mode 100644 index 000000000000..378fb1f24a84 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const EmployeeCard = ({ employee }) => ( +
+
+ {employee.FullName} +
+
+
+ Full Name: + {employee.FullName} +
+ +
+ Position: + {employee.Title} +
+ +
+ Phone: + {employee.MobilePhone} +
+
+
+); +export default EmployeeCard; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js new file mode 100644 index 000000000000..a3714d8df614 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js @@ -0,0 +1,18 @@ +import React from 'react'; +import EmployeeCard from './EmployeeCard.js'; + +const EmployeeGallery = ({ employees, pageSize, pageIndex }) => { + const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; + const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); + return ( +
+ {pageEmployees.map((employee) => ( + + ))} +
+ ); +}; +export default EmployeeGallery; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/data.js b/apps/demos/Demos/Pagination/Overview/ReactJs/data.js index 6380157422df..e25402db0d59 100644 --- a/apps/demos/Demos/Pagination/Overview/ReactJs/data.js +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/data.js @@ -1,121 +1,410 @@ -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', -}]; +export const employees = [ + { + 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/ReactJs/index.html b/apps/demos/Demos/Pagination/Overview/ReactJs/index.html index d6d83f735a76..1614ae6aee3d 100644 --- a/apps/demos/Demos/Pagination/Overview/ReactJs/index.html +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/index.html @@ -17,7 +17,12 @@ + @@ -33,7 +38,7 @@
-
+
diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/index.js b/apps/demos/Demos/Pagination/Overview/ReactJs/index.js index d9d7442ce766..d2d994b6c49d 100644 --- a/apps/demos/Demos/Pagination/Overview/ReactJs/index.js +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/index.js @@ -1,9 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; - import App from './App.js'; -ReactDOM.render( - , - document.getElementById('app'), -); +ReactDOM.render(, document.querySelector('.container')); diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css new file mode 100644 index 000000000000..346ba3ee6b1e --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css @@ -0,0 +1,100 @@ +body { + overflow-x: hidden; +} + +.demo-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + min-width: 720px; + width: 100%; +} + +.employees { + display: flex; + flex-wrap: wrap; + gap: 16px; + min-height: 644px; + padding-bottom: 24px; +} + +.employees__card { + width: 100%; + max-height: 312px; + align-self: stretch; + overflow: hidden; + border: var(--dx-border-width) solid var(--dx-color-border); + border-radius: var(--dx-border-radius); + background-color: var(--dx-component-color-bg); +} + +.employees.employees--forth .employees__card { + min-width: 250px; + width: 390px; + flex-basis: calc(50% - 10px); +} + +.employees.employees--six .employees__card { + flex-basis: calc(33.3% - 12.5px); +} + +.employees__img-wrapper { + height: 180px; + position: relative; + overflow: hidden; + border-bottom: var(--dx-border-width) solid var(--dx-color-border); + background-color: #fff; +} + +.employees__img { + display: block; + height: 220px; + position: absolute; + content: ""; + left: 50%; + top: 0; + transform: translateX(-50%); +} + +.employees__info { + padding: 24px; +} + +.employees__info-row { + margin-bottom: 8px; + text-wrap: nowrap; +} + +.employees__info-label { + display: inline-block; + font-weight: 600; + vertical-align: middle; +} + +.employees.employees--forth .employees__info-label { + width: 160px; +} + +.employees.employees--six .employees__info-label { + width: 80px; +} + +.employees__info-value { + display: inline-block; + text-wrap: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + overflow: hidden; + white-space:nowrap +} + +.employees.employees--forth .employees__info-value { + max-width: 180px; +} + +.employees.employees--six .employees__info-value { + max-width: 120px; +} diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/index.js b/apps/demos/Demos/Pagination/Overview/jQuery/index.js index 006e2e84a1da..4c937a274e7d 100644 --- a/apps/demos/Demos/Pagination/Overview/jQuery/index.js +++ b/apps/demos/Demos/Pagination/Overview/jQuery/index.js @@ -2,8 +2,6 @@ $(() => { const pagination = $('#pagination') .dxPagination({ showInfo: true, - lightModeEnabled: false, - pagesNavigatorVisible: true, showNavigationButtons: true, allowedPageSizes: [4, 6], itemCount: employees.length, @@ -12,12 +10,12 @@ $(() => { onOptionChanged: (evt) => { if (evt.name === 'pageSize') { const pageSize = evt.value; - const pageIndex = pagination.option('pageIndex'); pagination.option('pageSize', pageSize); + const pageIndex = pagination.option('pageIndex'); renderEmployeeGallery(pageSize, pageIndex); } - + if (evt.name === 'pageIndex') { const pageSize = pagination.option('pageSize'); const pageIndex = evt.value; diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css index e8cf2907c6d0..346ba3ee6b1e 100644 --- a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css @@ -1,16 +1,8 @@ body { - padding: 0; - margin: 0; - background-color: var(--dx-color-main-bg); - overflow: hidden; - font-size: var(--dx-font-size); - line-height: var(--dx-line-height); - color: var(--dx-color-text); + overflow-x: hidden; } .demo-container { - width: 100vw; - height: 100vh; display: flex; flex-direction: column; align-items: center; @@ -25,7 +17,7 @@ body { display: flex; flex-wrap: wrap; gap: 16px; - min-height: 640px; + min-height: 644px; padding-bottom: 24px; } @@ -95,7 +87,7 @@ body { text-wrap: nowrap; text-overflow: ellipsis; vertical-align: middle; - overflow:hidden; + overflow: hidden; white-space:nowrap } diff --git a/apps/demos/package.json b/apps/demos/package.json index 0a20f7be473f..44b6bdcd5046 100644 --- a/apps/demos/package.json +++ b/apps/demos/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-demos", - "version": "24.2.2", + "version": "24.2.3", "description": "", "repository": { "type": "git", diff --git a/apps/demos/testing/widgets/chat/Customization.test.js b/apps/demos/testing/widgets/chat/Customization.test.js index e69de29bb2d1..413f5d8a7a07 100644 --- a/apps/demos/testing/widgets/chat/Customization.test.js +++ b/apps/demos/testing/widgets/chat/Customization.test.js @@ -0,0 +1,67 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import { Selector } from 'testcafe'; +import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper'; +import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils'; + +fixture('Chat.Customization') + .page('http://localhost:8080/') + .before(async (ctx) => { + ctx.initialWindowSize = [900, 800]; + }); + +runManualTest('Chat', 'Customization', ['jQuery'], (test) => { + test('Customization', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t + .click('#day-headers-format') + .click(Selector('.dx-list-item').nth(2)) + .wait(500); + + await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_format_is_changed.png'); + + await t + .click('#show-day-headers'); + + await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_is_hidden.png'); + + await t + .click('#show-avatar'); + + await testScreenshot(t, takeScreenshot, 'chat_customization_avatar_is_hidden.png'); + + await t + .click('#show-avatar'); + + await t + .click('#show-user-name'); + + await testScreenshot(t, takeScreenshot, 'chat_customization_username_is_hidden.png'); + + await t + .click('#show-user-name'); + + await t + .click('#message-timestamp-format') + .click(Selector('.dx-list-item').nth(5)) + .wait(500); + + await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamp_format_is_changed.png'); + + await t + .click('#show-message-timestamp'); + + await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamps_is_hidden.png'); + + await t + .typeText('.dx-texteditor-input', 'testing') + .pressKey('enter') + .click('#chat-disabled'); + + await testScreenshot(t, takeScreenshot, 'chat_customization_is_disabled_after_sent.png'); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }); +}); diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png new file mode 100644 index 000000000000..f97b59122487 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png new file mode 100644 index 000000000000..6e47a00b50e9 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png new file mode 100644 index 000000000000..07fc10edcd2c Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png new file mode 100644 index 000000000000..31e56f4a4e31 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png new file mode 100644 index 000000000000..29b2c5ea10f1 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png new file mode 100644 index 000000000000..a283e2666acf Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png new file mode 100644 index 000000000000..e1b6f2c94233 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png new file mode 100644 index 000000000000..3def9b0fdebf Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png new file mode 100644 index 000000000000..dd3480655f7f Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png new file mode 100644 index 000000000000..c4f870a6120a Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png new file mode 100644 index 000000000000..27a04b6f7769 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png new file mode 100644 index 000000000000..3c6cf81c6278 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png new file mode 100644 index 000000000000..0b34ad01eb8f Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png new file mode 100644 index 000000000000..51f3efff5e5b Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png new file mode 100644 index 000000000000..b6832efab930 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png new file mode 100644 index 000000000000..ec6fba4c65d4 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png new file mode 100644 index 000000000000..79e20da545b0 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png new file mode 100644 index 000000000000..50c6f53aec0b Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png new file mode 100644 index 000000000000..6fd639a60521 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png new file mode 100644 index 000000000000..972a2bf36fcd Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png new file mode 100644 index 000000000000..a04f06ef1476 Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png differ diff --git a/apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js b/apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js index 4494825c965d..41c9e83008ec 100644 --- a/apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js +++ b/apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js @@ -20,6 +20,7 @@ const testStub = { page() { return this; }, }, page() { return this; }, + clientScripts() { return this; } }; function updateChanges(value, options) { diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js index cc57cc8c0289..d1ca6e9a2fc1 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.js +++ b/apps/demos/utils/visual-tests/matrix-test-helper.js @@ -328,7 +328,14 @@ export function runManualTestCore(testObject, product, demo, framework, callback return; } - const test = testObject.page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`); + const clientScriptSource = globalReadFrom(__dirname, `../../Demos/${product}/${demo}/client-script.js`, (x) => [{ content: x }]) || []; + + const test = testObject + .clientScripts([ + { module: 'mockdate' }, + ...clientScriptSource + ]) + .page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`); test.before?.(async (t) => { const [width, height] = t.fixtureCtx.initialWindowSize; diff --git a/apps/react-storybook/package.json b/apps/react-storybook/package.json index 7a7978d19b04..09be6de05ae9 100644 --- a/apps/react-storybook/package.json +++ b/apps/react-storybook/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-react-storybook", - "version": "24.2.2", + "version": "24.2.3", "description": "", "main": "index.js", "scripts": { diff --git a/apps/react/package.json b/apps/react/package.json index eca13c771dec..e291b7f15f1c 100644 --- a/apps/react/package.json +++ b/apps/react/package.json @@ -2,7 +2,7 @@ "author": "Developer Express Inc.", "name": "devextreme-react-playground", "private": true, - "version": "24.2.2", + "version": "24.2.3", "description": "DevExtreme React UI and Visualization Components Sandbox", "repository": { "type": "git", diff --git a/apps/vue/package.json b/apps/vue/package.json index 7471568802ce..e6b96489e899 100644 --- a/apps/vue/package.json +++ b/apps/vue/package.json @@ -2,7 +2,7 @@ "name": "devextreme-vue-playground", "description": "DevExtreme Vue UI and Visualization Components", "private": true, - "version": "24.2.2", + "version": "24.2.3", "author": "Developer Express Inc.", "license": "MIT", "repository": { diff --git a/e2e/bundlers/package.json b/e2e/bundlers/package.json index 3e67ad3cd108..4a18b6e9e7df 100644 --- a/e2e/bundlers/package.json +++ b/e2e/bundlers/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-modules-test", - "version": "24.2.2", + "version": "24.2.3", "devDependencies": { "@rollup/plugin-alias": "3.1.9", "@rollup/plugin-commonjs": "19.0.2", diff --git a/e2e/compilation-cases/package.json b/e2e/compilation-cases/package.json index ef202cf5fcc0..bd5cbcdeaa46 100644 --- a/e2e/compilation-cases/package.json +++ b/e2e/compilation-cases/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "devextreme-compilation-cases", - "version": "24.2.2", + "version": "24.2.3", "author": "Developer Express Inc.", "scripts": { "test": "tsc --noEmit" diff --git a/e2e/testcafe-devextreme/package.json b/e2e/testcafe-devextreme/package.json index 5988de3f482f..1d7a40de06c9 100644 --- a/e2e/testcafe-devextreme/package.json +++ b/e2e/testcafe-devextreme/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-testcafe-tests", - "version": "24.2.2", + "version": "24.2.3", "scripts": { "test": "node ./runner.js", "lint": "eslint --ext .js,.ts .", diff --git a/package.json b/package.json index 19c449e9c6a3..4bbc346a3036 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-monorepo", - "version": "24.2.2", + "version": "24.2.3", "license": "MIT", "author": "Developer Express Inc.", "scripts": { @@ -44,7 +44,7 @@ "axe-core": "4.10.2", "cheerio": "1.0.0-rc.10", "codelyzer": "6.0.2", - "devextreme-internal-tools": "16.0.0-beta.15", + "devextreme-internal-tools": "16.0.0-beta.16", "http-server": "14.1.1", "husky": "8.0.3", "jest": "29.7.0", diff --git a/packages/devextreme-angular/package.json b/packages/devextreme-angular/package.json index 7f809d4a4dca..b8cfc6ea1b43 100644 --- a/packages/devextreme-angular/package.json +++ b/packages/devextreme-angular/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-angular", - "version": "24.2.2", + "version": "24.2.3", "description": "Angular UI and visualization components based on DevExtreme widgets", "repository": { "type": "git", diff --git a/packages/devextreme-monorepo-tools/package.json b/packages/devextreme-monorepo-tools/package.json index c103523506ad..013fd27512e7 100644 --- a/packages/devextreme-monorepo-tools/package.json +++ b/packages/devextreme-monorepo-tools/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-monorepo-tools", - "version": "24.2.2", + "version": "24.2.3", "devDependencies": { "@types/jest": "29.5.12", "ts-jest": "29.1.3" diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json index 3b8cbd773bb7..ac58a17a6f7d 100644 --- a/packages/devextreme-react/package.json +++ b/packages/devextreme-react/package.json @@ -1,7 +1,7 @@ { "author": "Developer Express Inc.", "name": "devextreme-react", - "version": "24.2.2", + "version": "24.2.3", "description": "DevExtreme React UI and Visualization Components", "repository": { "type": "git", diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index 61c8f5102b33..7e60505cfc10 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -24,5 +24,5 @@ "test": "jest --no-coverage --runInBand --config=./tests/jest.config.json", "watch": "gulp watch" }, - "version": "24.2.2" + "version": "24.2.3" } diff --git a/packages/devextreme-themebuilder/package.json b/packages/devextreme-themebuilder/package.json index 0aa9804ddd03..3e1e41ce19ba 100644 --- a/packages/devextreme-themebuilder/package.json +++ b/packages/devextreme-themebuilder/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-themebuilder", - "version": "24.2.2", + "version": "24.2.3", "description": "DevExtreme ThemeBuilder", "keywords": [ "devextreme", diff --git a/packages/devextreme-vue/package.json b/packages/devextreme-vue/package.json index 93a4486bf9ba..5baa002cda37 100644 --- a/packages/devextreme-vue/package.json +++ b/packages/devextreme-vue/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-vue", - "version": "24.2.2", + "version": "24.2.3", "description": "DevExtreme Vue UI and Visualization Components", "repository": { "type": "git", diff --git a/packages/devextreme-vue/src/accordion.ts b/packages/devextreme-vue/src/accordion.ts index a50b12accf6f..3fc2789d558f 100644 --- a/packages/devextreme-vue/src/accordion.ts +++ b/packages/devextreme-vue/src/accordion.ts @@ -1,7 +1,28 @@ export { ExplicitTypes } from "devextreme/ui/accordion"; -import Accordion, { Properties } from "devextreme/ui/accordion"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Accordion, { Properties } from "devextreme/ui/accordion"; +import DataSource from "devextreme/data/data_source"; +import { + dxAccordionItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + ItemTitleClickEvent, + OptionChangedEvent, + SelectionChangedEvent, +} from "devextreme/ui/accordion"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, itemTitleTemplate: {}, - keyExpr: [Function, String], + keyExpr: [Function, String] as PropType<((() => void)) | string>, multiple: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onItemTitleClick: Function, - onOptionChanged: Function, - onSelectionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onItemTitleClick: Function as PropType<((e: ItemTitleClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, repaintChangesOnly: Boolean, rtlEnabled: Boolean, selectedIndex: Number, selectedItem: {}, - selectedItemKeys: Array, - selectedItems: Array, + selectedItemKeys: Array as PropType>, + selectedItems: Array as PropType>, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/action-sheet.ts b/packages/devextreme-vue/src/action-sheet.ts index 41d6cacea10f..04792e583d60 100644 --- a/packages/devextreme-vue/src/action-sheet.ts +++ b/packages/devextreme-vue/src/action-sheet.ts @@ -1,7 +1,34 @@ export { ExplicitTypes } from "devextreme/ui/action_sheet"; -import ActionSheet, { Properties } from "devextreme/ui/action_sheet"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ActionSheet, { Properties } from "devextreme/ui/action_sheet"; +import DataSource from "devextreme/data/data_source"; +import { + dxActionSheetItem, + CancelClickEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, +} from "devextreme/ui/action_sheet"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + NativeEventInfo, +} from "devextreme/events/index"; +import { + ButtonStyle, + ButtonType, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - height: {}, - hint: {}, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, - onCancelClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, + onCancelClick: Function as PropType<((e: CancelClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, showCancelButton: Boolean, showTitle: Boolean, @@ -66,7 +93,7 @@ const componentConfig = { title: String, usePopover: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -133,11 +160,11 @@ const DxItemConfig = { props: { disabled: Boolean, icon: String, - onClick: Function, - stylingMode: {}, + onClick: Function as PropType<((e: NativeEventInfo) => void)>, + stylingMode: String as PropType, template: {}, text: String, - type: {} + type: String as PropType } }; diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts index 1ee767818226..fb680a5dde2c 100644 --- a/packages/devextreme-vue/src/autocomplete.ts +++ b/packages/devextreme-vue/src/autocomplete.ts @@ -1,6 +1,97 @@ -import Autocomplete, { Properties } from "devextreme/ui/autocomplete"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Autocomplete, { Properties } from "devextreme/ui/autocomplete"; +import DataSource from "devextreme/data/data_source"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + TextEditorButton, + LabelMode, + SimplifiedSearchMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + ItemClickEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + SelectionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/autocomplete"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayValue: {}, + displayValue: String, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, grouped: Boolean, groupTemplate: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, label: String, - labelMode: {}, + labelMode: String as PropType, maxItemCount: Number, maxLength: [Number, String], minSearchLength: Number, name: String, - onChange: Function, - onClosed: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onItemClick: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onSelectionChanged: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, searchTimeout: Number, selectedItem: {}, showClearButton: Boolean, showDropDownButton: Boolean, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useItemTextAsTitle: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, valueChangeEvent: String, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapItemText: Boolean }, emits: { @@ -266,8 +357,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -289,8 +380,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -328,9 +419,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -352,8 +443,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -419,10 +510,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -433,28 +524,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -465,9 +556,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -496,7 +587,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -527,16 +618,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -584,8 +675,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -645,31 +736,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -692,13 +783,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -724,16 +815,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -756,7 +847,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -787,19 +878,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/bar-gauge.ts b/packages/devextreme-vue/src/bar-gauge.ts index e7223b67a20e..28007a51b561 100644 --- a/packages/devextreme-vue/src/bar-gauge.ts +++ b/packages/devextreme-vue/src/bar-gauge.ts @@ -1,6 +1,43 @@ -import BarGauge, { Properties } from "devextreme/viz/bar_gauge"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import BarGauge, { Properties } from "devextreme/viz/bar_gauge"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + BarGaugeBarInfo, + BarGaugeLegendItem, +} from "devextreme/viz/bar_gauge"; +import { + Palette, + PaletteExtensionMode, + ShiftLabelOverlap, + Theme, + AnimationEaseMode, + Font, + TextOverflow, + WordWrap, + DashStyle, +} from "devextreme/common/charts"; +import { + HorizontalAlignment, + VerticalEdge, + ExportFormat, + Format, + Position, + Orientation, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, endValue: Number, - export: Object, - geometry: Object, - label: Object, - legend: Object, - loadingIndicator: Object, - margin: Object, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, - palette: {}, - paletteExtensionMode: {}, + export: Object as PropType>, + geometry: Object as PropType>, + label: Object as PropType>, + legend: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, pathModified: Boolean, redrawOnResize: Boolean, relativeInnerRadius: Number, - resolveLabelOverlapping: {}, + resolveLabelOverlapping: String as PropType, rtlEnabled: Boolean, - size: Object, + size: Object as PropType>, startValue: Number, - theme: {}, - title: [Object, String], - tooltip: Object, - values: Array + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, + values: Array as PropType> }, emits: { "update:isActive": null, @@ -167,7 +204,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean } }; @@ -193,15 +230,15 @@ const DxBarGaugeTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -228,11 +265,11 @@ const DxBarGaugeTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -259,8 +296,8 @@ const DxBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -288,10 +325,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -339,10 +376,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -385,10 +422,10 @@ const DxItemTextFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -412,11 +449,11 @@ const DxLabelConfig = { "update:visible": null, }, props: { - connectorColor: {}, + connectorColor: String, connectorWidth: Number, - customizeText: Function, - font: Object, - format: {}, + customizeText: Function as PropType<((barValue: { value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indent: Number, visible: Boolean } @@ -461,28 +498,28 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - itemsAlignment: {}, - itemTextFormat: {}, - itemTextPosition: {}, - margin: [Number, Object], + customizeHint: Function as PropType<((arg: { item: BarGaugeBarInfo, text: string }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((arg: { item: BarGaugeBarInfo, text: string }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + itemsAlignment: String as PropType, + itemTextFormat: [Object, String, Function] as PropType string)) | Record | string>, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, rowCount: Number, rowItemSpacing: Number, - title: [Object, String], - verticalAlignment: {}, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -516,8 +553,8 @@ const DxLegendBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -542,13 +579,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -573,7 +610,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -599,7 +636,7 @@ const DxLoadingIndicatorConfig = { }, props: { backgroundColor: String, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -670,8 +707,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -692,11 +729,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -724,15 +761,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Object, Number], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Object, Number] as PropType | number>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -771,21 +808,21 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((scaleValue: { index: number, value: number, valueText: string }) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -814,8 +851,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } diff --git a/packages/devextreme-vue/src/box.ts b/packages/devextreme-vue/src/box.ts index 75902d940762..48414bc22150 100644 --- a/packages/devextreme-vue/src/box.ts +++ b/packages/devextreme-vue/src/box.ts @@ -1,7 +1,30 @@ export { ExplicitTypes } from "devextreme/ui/box"; -import Box, { Properties } from "devextreme/ui/box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Box, { Properties } from "devextreme/ui/box"; +import DataSource from "devextreme/data/data_source"; +import { + Distribution, + CrosswiseDistribution, + dxBoxItem, + BoxDirection, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + dxBoxOptions, +} from "devextreme/ui/box"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + crossAlign: String as PropType, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, + direction: String as PropType, disabled: Boolean, - elementAttr: Object, - height: {}, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -119,7 +142,7 @@ const DxItemConfig = { }, props: { baseSize: [Number, String], - box: {}, + box: Object as PropType>, disabled: Boolean, html: String, ratio: Number, diff --git a/packages/devextreme-vue/src/bullet.ts b/packages/devextreme-vue/src/bullet.ts index efa9b7f80c2d..8c1b11e0c400 100644 --- a/packages/devextreme-vue/src/bullet.ts +++ b/packages/devextreme-vue/src/bullet.ts @@ -1,6 +1,30 @@ -import Bullet, { Properties } from "devextreme/viz/bullet"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Bullet, { Properties } from "devextreme/viz/bullet"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, +} from "devextreme/viz/bullet"; +import { + Theme, + DashStyle, + Font, +} from "devextreme/common/charts"; +import { + Format, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + endScaleValue: Number, + margin: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, pathModified: Boolean, rtlEnabled: Boolean, showTarget: Boolean, showZeroLevel: Boolean, - size: Object, + size: Object as PropType>, startScaleValue: Number, target: Number, targetColor: String, targetWidth: Number, - theme: {}, - tooltip: Object, + theme: String as PropType, + tooltip: Object as PropType>, value: Number }, emits: { @@ -131,8 +155,8 @@ const DxBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -182,10 +206,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -252,8 +276,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -286,21 +310,21 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((pointsInfo: any) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; diff --git a/packages/devextreme-vue/src/button-group.ts b/packages/devextreme-vue/src/button-group.ts index 7fc1907a01ed..b2c6a9d4a246 100644 --- a/packages/devextreme-vue/src/button-group.ts +++ b/packages/devextreme-vue/src/button-group.ts @@ -1,6 +1,21 @@ -import ButtonGroup, { Properties } from "devextreme/ui/button_group"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ButtonGroup, { Properties } from "devextreme/ui/button_group"; +import { + dxButtonGroupItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + OptionChangedEvent, + SelectionChangedEvent, +} from "devextreme/ui/button_group"; +import { + SingleMultipleOrNone, + ButtonStyle, + ButtonType, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - items: Array, - keyExpr: [Function, String], - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onOptionChanged: Function, - onSelectionChanged: Function, + items: Array as PropType>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, rtlEnabled: Boolean, - selectedItemKeys: Array, - selectedItems: Array, - selectionMode: {}, - stylingMode: {}, + selectedItemKeys: Array as PropType>, + selectedItems: Array as PropType>, + selectionMode: String as PropType, + stylingMode: String as PropType, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -126,12 +141,12 @@ const DxItemConfig = { }, props: { disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, hint: String, icon: String, template: {}, text: String, - type: {}, + type: String as PropType, visible: Boolean } }; diff --git a/packages/devextreme-vue/src/button.ts b/packages/devextreme-vue/src/button.ts index 3e52160f7401..09c68ca681a7 100644 --- a/packages/devextreme-vue/src/button.ts +++ b/packages/devextreme-vue/src/button.ts @@ -1,6 +1,18 @@ -import Button, { Properties } from "devextreme/ui/button"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Button, { Properties } from "devextreme/ui/button"; +import { + ClickEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/button"; +import { + ButtonStyle, + ButtonType, +} from "devextreme/common"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/calendar.ts b/packages/devextreme-vue/src/calendar.ts index 4711ae24dae7..ba0d2cfa80bd 100644 --- a/packages/devextreme-vue/src/calendar.ts +++ b/packages/devextreme-vue/src/calendar.ts @@ -1,6 +1,23 @@ -import Calendar, { Properties } from "devextreme/ui/calendar"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Calendar, { Properties } from "devextreme/ui/calendar"; +import { + DisabledDate, + CalendarZoomLevel, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, + CalendarSelectionMode, + WeekNumberRule, +} from "devextreme/ui/calendar"; +import { + FirstDayOfWeek, + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick | (((data: DisabledDate) => boolean))>, + elementAttr: Object as PropType>, + firstDayOfWeek: Number as PropType, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, max: [Date, Number, String], - maxZoomLevel: {}, + maxZoomLevel: String as PropType, min: [Date, Number, String], - minZoomLevel: {}, + minZoomLevel: String as PropType, name: String, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, - selectionMode: {}, + selectionMode: String as PropType, selectWeekOnClick: Boolean, showTodayButton: Boolean, showWeekNumbers: Boolean, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: [Array, Date, Number, String], + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: [Array, Date, Number, String] as PropType<(Array) | Date | number | string>, visible: Boolean, - weekNumberRule: {}, - width: {}, - zoomLevel: {} + weekNumberRule: String as PropType, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + zoomLevel: String as PropType }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/chart.ts b/packages/devextreme-vue/src/chart.ts index d05ae442f3ec..a5c5b82d817b 100644 --- a/packages/devextreme-vue/src/chart.ts +++ b/packages/devextreme-vue/src/chart.ts @@ -1,6 +1,101 @@ -import Chart, { Properties } from "devextreme/viz/chart"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Chart, { Properties } from "devextreme/viz/chart"; +import DataSource from "devextreme/data/data_source"; +import { + dxChartAnnotationConfig, + dxChartCommonAnnotationConfig, + ArgumentAxisClickEvent, + DisposingEvent, + DoneEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + LegendClickEvent, + OptionChangedEvent, + PointClickEvent, + PointHoverChangedEvent, + PointSelectionChangedEvent, + SeriesClickEvent, + SeriesHoverChangedEvent, + SeriesSelectionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + ZoomEndEvent, + ZoomStartEvent, + chartPointAggregationInfoObject, + chartSeriesObject, + ChartSeriesAggregationMethod, + AggregatedPointsPosition, + ChartLabelDisplayMode, + chartPointObject, + FinancialChartReductionLevel, + ChartTooltipLocation, + ChartZoomAndPanMode, + EventKeyModifier, +} from "devextreme/viz/chart"; +import { + SeriesLabel, + SeriesPoint, + Palette, + PaletteExtensionMode, + ChartsLabelOverlap, + Theme, + AnimationEaseMode, + Font, + TextOverflow, + AnnotationType, + WordWrap, + DashStyle, + TimeInterval, + ChartsDataType, + ScaleBreak, + DiscreteAxisDivisionMode, + ArgumentAxisHoverMode, + AxisScaleType, + VisualRangeUpdateMode, + RelativePosition, + ChartsAxisLabelOverlap, + ScaleBreakLineStyle, + ChartsColor, + SeriesHoverMode, + SeriesSelectionMode, + SeriesType, + HatchDirection, + LegendItem, + LegendHoverMode, + PointInteractionMode, + PointSymbol, + ValueErrorBarDisplayMode, + ValueErrorBarType, +} from "devextreme/common/charts"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + SingleOrMultiple, + Position, + Format, + HorizontalAlignment, + VerticalAlignment, + VerticalEdge, + ExportFormat, + Orientation, +} from "devextreme/common"; +import { + ChartSeries, +} from "devextreme/viz/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; +import * as CommonChartTypes from "devextreme/common/charts"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, adjustOnZoom: Boolean, - animation: [Boolean, Object], - annotations: Array, - argumentAxis: Object, + animation: [Boolean, Object] as PropType>, + annotations: Array as PropType>, + argumentAxis: Object as PropType>, autoHidePointMarkers: Boolean, barGroupPadding: Number, - barGroupWidth: {}, - commonAnnotationSettings: Object, - commonAxisSettings: Object, - commonPaneSettings: Object, - commonSeriesSettings: Object, + barGroupWidth: Number, + commonAnnotationSettings: Object as PropType>, + commonAxisSettings: Object as PropType>, + commonPaneSettings: Object as PropType>, + commonSeriesSettings: Object as PropType>, containerBackgroundColor: String, - crosshair: Object, - customizeAnnotation: {}, - customizeLabel: Function, - customizePoint: Function, - dataPrepareSettings: Object, - dataSource: {}, - defaultPane: {}, + crosshair: Object as PropType>, + customizeAnnotation: Function as PropType<((annotation: dxChartAnnotationConfig | any) => dxChartAnnotationConfig)>, + customizeLabel: Function as PropType<((pointInfo: any) => SeriesLabel)>, + customizePoint: Function as PropType<((pointInfo: any) => SeriesPoint)>, + dataPrepareSettings: Object as PropType>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + defaultPane: String, disabled: Boolean, - elementAttr: Object, - export: Object, - legend: Object, - loadingIndicator: Object, - margin: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, + legend: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, maxBubbleSize: Number, minBubbleSize: Number, negativesAsZeroes: Boolean, - onArgumentAxisClick: Function, - onDisposing: Function, - onDone: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onLegendClick: Function, - onOptionChanged: Function, - onPointClick: Function, - onPointHoverChanged: Function, - onPointSelectionChanged: Function, - onSeriesClick: Function, - onSeriesHoverChanged: Function, - onSeriesSelectionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, - onZoomEnd: Function, - onZoomStart: Function, - palette: {}, - paletteExtensionMode: {}, - panes: [Array, Object], + onArgumentAxisClick: Function as PropType<((e: ArgumentAxisClickEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDone: Function as PropType<((e: DoneEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onLegendClick: Function as PropType<((e: LegendClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPointClick: Function as PropType<((e: PointClickEvent) => void)>, + onPointHoverChanged: Function as PropType<((e: PointHoverChangedEvent) => void)>, + onPointSelectionChanged: Function as PropType<((e: PointSelectionChangedEvent) => void)>, + onSeriesClick: Function as PropType<((e: SeriesClickEvent) => void)>, + onSeriesHoverChanged: Function as PropType<((e: SeriesHoverChangedEvent) => void)>, + onSeriesSelectionChanged: Function as PropType<((e: SeriesSelectionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, + onZoomEnd: Function as PropType<((e: ZoomEndEvent) => void)>, + onZoomStart: Function as PropType<((e: ZoomStartEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, + panes: [Array, Object] as PropType> | Record>, pathModified: Boolean, - pointSelectionMode: {}, + pointSelectionMode: String as PropType, redrawOnResize: Boolean, resizePanesOnZoom: Boolean, - resolveLabelOverlapping: {}, + resolveLabelOverlapping: String as PropType, rotated: Boolean, rtlEnabled: Boolean, - scrollBar: Object, - series: {}, - seriesSelectionMode: {}, - seriesTemplate: Object, - size: Object, + scrollBar: Object as PropType>, + series: [Array, Object] as PropType | ChartSeries | Record>, + seriesSelectionMode: String as PropType, + seriesTemplate: Object as PropType>, + size: Object as PropType>, stickyHovering: Boolean, synchronizeMultiAxes: Boolean, - theme: {}, - title: [Object, String], - tooltip: Object, - valueAxis: [Array, Object], - zoomAndPan: Object + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, + valueAxis: [Array, Object] as PropType> | Record>, + zoomAndPan: Object as PropType> }, emits: { "update:isActive": null, @@ -305,9 +400,9 @@ const DxAggregationConfig = { "update:method": null, }, props: { - calculate: {}, + calculate: Function as PropType<((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record | Array>)>, enabled: Boolean, - method: {} + method: String as PropType } }; @@ -361,7 +456,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean, maxPointCountSupported: Number } @@ -412,37 +507,37 @@ const DxAnnotationConfig = { }, props: { allowDragging: Boolean, - argument: {}, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - axis: {}, - border: Object, + axis: String, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - name: {}, - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + name: String, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - series: {}, - shadow: Object, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - value: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + value: [Date, Number, String], + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -475,8 +570,8 @@ const DxAnnotationBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -498,7 +593,7 @@ const DxAnnotationImageConfig = { }, props: { height: Number, - url: {}, + url: String, width: Number } }; @@ -566,55 +661,55 @@ const DxArgumentAxisConfig = { }, props: { aggregateByCategory: Boolean, - aggregatedPointsPosition: {}, - aggregationGroupWidth: {}, - aggregationInterval: {}, - allowDecimals: {}, - argumentType: {}, + aggregatedPointsPosition: String as PropType, + aggregationGroupWidth: Number, + aggregationInterval: [Number, Object, String] as PropType | TimeInterval>, + allowDecimals: Boolean, + argumentType: String as PropType, axisDivisionFactor: Number, - breaks: Array, - breakStyle: Object, - categories: Array, + breaks: Array as PropType>, + breakStyle: Object as PropType>, + categories: Array as PropType>, color: String, - constantLines: Array, - constantLineStyle: Object, - customPosition: {}, - customPositionAxis: {}, - discreteAxisDivisionMode: {}, + constantLines: Array as PropType>>, + constantLineStyle: Object as PropType>, + customPosition: [Date, Number, String], + customPositionAxis: String, + discreteAxisDivisionMode: String as PropType, endOnTick: Boolean, - grid: Object, - holidays: Array, - hoverMode: {}, + grid: Object as PropType>, + holidays: Array as PropType<(Array) | Array>, + hoverMode: String as PropType, inverted: Boolean, - label: Object, - linearThreshold: {}, + label: Object as PropType>, + linearThreshold: Number, logarithmBase: Number, - maxValueMargin: {}, - minorGrid: Object, - minorTick: Object, - minorTickCount: {}, - minorTickInterval: {}, - minValueMargin: {}, - minVisualRangeLength: {}, - offset: {}, - opacity: {}, + maxValueMargin: Number, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + minorTickCount: Number, + minorTickInterval: [Number, Object, String] as PropType | TimeInterval>, + minValueMargin: Number, + minVisualRangeLength: [Number, Object, String] as PropType | TimeInterval>, + offset: Number, + opacity: Number, placeholderSize: Number, - position: {}, - singleWorkdays: Array, - strips: Array, - stripStyle: Object, - tick: Object, - tickInterval: {}, - title: [Object, String], - type: {}, + position: String as PropType, + singleWorkdays: Array as PropType<(Array) | Array>, + strips: Array as PropType>>, + stripStyle: Object as PropType>, + tick: Object as PropType>, + tickInterval: [Number, Object, String] as PropType | TimeInterval>, + title: [Object, String] as PropType | string>, + type: String as PropType, valueMarginsEnabled: Boolean, visible: Boolean, - visualRange: [Array, Object], - visualRangeUpdateMode: {}, - wholeRange: {}, + visualRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, + visualRangeUpdateMode: String as PropType, + wholeRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, width: Number, workdaysOnly: Boolean, - workWeek: Array + workWeek: Array as PropType> } }; @@ -660,10 +755,10 @@ const DxArgumentFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -687,8 +782,8 @@ const DxAxisConstantLineStyleConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, + dashStyle: String as PropType, + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number, width: Number @@ -712,10 +807,10 @@ const DxAxisConstantLineStyleLabelConfig = { "update:visible": null, }, props: { - font: Object, - horizontalAlignment: {}, - position: {}, - verticalAlignment: {}, + font: Object as PropType>, + horizontalAlignment: String as PropType, + position: String as PropType, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -747,21 +842,21 @@ const DxAxisLabelConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - customizeHint: Function, - customizeText: Function, - displayMode: {}, - font: Object, - format: {}, + alignment: String as PropType, + customizeHint: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + customizeText: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + displayMode: String as PropType, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indentFromAxis: Number, - overlappingBehavior: {}, - position: {}, + overlappingBehavior: String as PropType, + position: String as PropType, rotationAngle: Number, staggeringSpacing: Number, template: {}, - textOverflow: {}, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -783,12 +878,12 @@ const DxAxisTitleConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - font: Object, + alignment: String as PropType, + font: Object as PropType>, margin: Number, - text: {}, - textOverflow: {}, - wordWrap: {} + text: String, + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -806,8 +901,8 @@ const DxBackgroundColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -834,11 +929,11 @@ const DxBorderConfig = { }, props: { bottom: Boolean, - color: {}, + color: String, cornerRadius: Number, - dashStyle: {}, + dashStyle: String as PropType, left: Boolean, - opacity: {}, + opacity: Number, right: Boolean, top: Boolean, visible: Boolean, @@ -860,8 +955,8 @@ const DxBreakConfig = { "update:startValue": null, }, props: { - endValue: {}, - startValue: {} + endValue: [Date, Number, String], + startValue: [Date, Number, String] } }; @@ -882,7 +977,7 @@ const DxBreakStyleConfig = { }, props: { color: String, - line: {}, + line: String as PropType, width: Number } }; @@ -908,15 +1003,15 @@ const DxChartTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -943,11 +1038,11 @@ const DxChartTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -968,8 +1063,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -1017,36 +1112,36 @@ const DxCommonAnnotationSettingsConfig = { }, props: { allowDragging: Boolean, - argument: {}, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - axis: {}, - border: Object, + axis: String, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - series: {}, - shadow: Object, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - value: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + value: [Date, Number, String], + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -1084,25 +1179,25 @@ const DxCommonAxisSettingsConfig = { "update:width": null, }, props: { - aggregatedPointsPosition: {}, - allowDecimals: {}, - breakStyle: Object, + aggregatedPointsPosition: String as PropType, + allowDecimals: Boolean, + breakStyle: Object as PropType>, color: String, - constantLineStyle: Object, - discreteAxisDivisionMode: {}, - endOnTick: {}, - grid: Object, + constantLineStyle: Object as PropType>, + discreteAxisDivisionMode: String as PropType, + endOnTick: Boolean, + grid: Object as PropType>, inverted: Boolean, - label: Object, - maxValueMargin: {}, - minorGrid: Object, - minorTick: Object, - minValueMargin: {}, - opacity: {}, + label: Object as PropType>, + maxValueMargin: Number, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + minValueMargin: Number, + opacity: Number, placeholderSize: Number, - stripStyle: Object, - tick: Object, - title: Object, + stripStyle: Object as PropType>, + tick: Object as PropType>, + title: Object as PropType>, valueMarginsEnabled: Boolean, visible: Boolean, width: Number @@ -1136,8 +1231,8 @@ const DxCommonAxisSettingsConstantLineStyleConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, + dashStyle: String as PropType, + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number, width: Number @@ -1163,8 +1258,8 @@ const DxCommonAxisSettingsConstantLineStyleLabelConfig = { "update:visible": null, }, props: { - font: Object, - position: {}, + font: Object as PropType>, + position: String as PropType, visible: Boolean } }; @@ -1193,18 +1288,18 @@ const DxCommonAxisSettingsLabelConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - displayMode: {}, - font: Object, + alignment: String as PropType, + displayMode: String as PropType, + font: Object as PropType>, indentFromAxis: Number, - overlappingBehavior: {}, - position: {}, + overlappingBehavior: String as PropType, + position: String as PropType, rotationAngle: Number, staggeringSpacing: Number, template: {}, - textOverflow: {}, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -1225,11 +1320,11 @@ const DxCommonAxisSettingsTitleConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - font: Object, + alignment: String as PropType, + font: Object as PropType>, margin: Number, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -1247,8 +1342,8 @@ const DxCommonPaneSettingsConfig = { "update:border": null, }, props: { - backgroundColor: [Object, String], - border: Object + backgroundColor: [Object, String] as PropType>, + border: Object as PropType> } }; @@ -1330,48 +1425,48 @@ const DxCommonSeriesSettingsConfig = { "update:width": null, }, props: { - aggregation: Object, + aggregation: Object as PropType>, area: {}, argumentField: String, - axis: {}, + axis: String, bar: {}, - barOverlapGroup: {}, - barPadding: {}, - barWidth: {}, - border: Object, + barOverlapGroup: String, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, bubble: {}, candlestick: {}, closeValueField: String, - color: {}, + color: [Object, String] as PropType>, cornerRadius: Number, - dashStyle: {}, + dashStyle: String as PropType, fullstackedarea: {}, fullstackedbar: {}, fullstackedline: {}, fullstackedspline: {}, fullstackedsplinearea: {}, highValueField: String, - hoverMode: {}, - hoverStyle: Object, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, innerColor: String, - label: Object, + label: Object as PropType>, line: {}, lowValueField: String, - maxLabelCount: {}, - minBarSize: {}, + maxLabelCount: Number, + minBarSize: Number, opacity: Number, openValueField: String, pane: String, - point: Object, + point: Object as PropType>, rangearea: {}, rangebar: {}, rangeValue1Field: String, rangeValue2Field: String, - reduction: Object, + reduction: Object as PropType>, scatter: {}, - selectionMode: {}, - selectionStyle: Object, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, sizeField: String, spline: {}, @@ -1386,8 +1481,8 @@ const DxCommonSeriesSettingsConfig = { stepline: {}, stock: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -1427,10 +1522,10 @@ const DxCommonSeriesSettingsHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -1469,17 +1564,17 @@ const DxCommonSeriesSettingsLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, + alignment: String as PropType, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((pointInfo: any) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, horizontalOffset: Number, - position: {}, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, verticalOffset: Number, @@ -1513,10 +1608,10 @@ const DxCommonSeriesSettingsSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -1543,7 +1638,7 @@ const DxConnectorConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -1571,13 +1666,13 @@ const DxConstantLineConfig = { }, props: { color: String, - dashStyle: {}, + dashStyle: String as PropType, displayBehindSeries: Boolean, extendAxis: Boolean, - label: Object, + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number, - value: {}, + value: [Date, Number, String], width: Number } }; @@ -1601,11 +1696,11 @@ const DxConstantLineLabelConfig = { "update:visible": null, }, props: { - font: Object, - horizontalAlignment: {}, - position: {}, - text: {}, - verticalAlignment: {}, + font: Object as PropType>, + horizontalAlignment: String as PropType, + position: String as PropType, + text: String, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -1629,8 +1724,8 @@ const DxConstantLineStyleConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, + dashStyle: String as PropType, + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number, width: Number @@ -1661,12 +1756,12 @@ const DxCrosshairConfig = { }, props: { color: String, - dashStyle: {}, + dashStyle: String as PropType, enabled: Boolean, - horizontalLine: [Boolean, Object], - label: Object, - opacity: {}, - verticalLine: [Boolean, Object], + horizontalLine: [Boolean, Object] as PropType>, + label: Object as PropType>, + opacity: Number, + verticalLine: [Boolean, Object] as PropType>, width: Number } }; @@ -1694,7 +1789,7 @@ const DxDataPrepareSettingsConfig = { props: { checkTypeForAllData: Boolean, convertToAxisDataType: Boolean, - sortingMethod: [Boolean, Function] + sortingMethod: [Boolean, Function] as PropType number))> } }; @@ -1712,8 +1807,8 @@ const DxDragBoxStyleConfig = { "update:opacity": null, }, props: { - color: {}, - opacity: {} + color: String, + opacity: Number } }; @@ -1739,10 +1834,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -1790,10 +1885,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -1815,7 +1910,7 @@ const DxGridConfig = { }, props: { color: String, - opacity: {}, + opacity: Number, visible: Boolean, width: Number } @@ -1837,7 +1932,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -1858,8 +1953,8 @@ const DxHeightConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: Number, + rangeMinPoint: Number } }; @@ -1882,9 +1977,9 @@ const DxHorizontalLineConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, - opacity: {}, + dashStyle: String as PropType, + label: Object as PropType>, + opacity: Number, visible: Boolean, width: Number } @@ -1912,9 +2007,9 @@ const DxHorizontalLineLabelConfig = { }, props: { backgroundColor: String, - customizeText: Function, - font: Object, - format: {}, + customizeText: Function as PropType<((info: { point: chartPointObject, value: Date | number | string, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, visible: Boolean } }; @@ -1938,12 +2033,12 @@ const DxHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, - size: {}, + size: Number, width: Number } }; @@ -1970,9 +2065,9 @@ const DxImageConfig = { "update:width": null, }, props: { - height: [Number, Object], - url: {}, - width: [Number, Object] + height: [Number, Object] as PropType>, + url: [String, Object] as PropType>, + width: [Number, Object] as PropType> } }; @@ -2019,32 +2114,32 @@ const DxLabelConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeHint: Function, - customizeText: Function, - displayFormat: {}, - displayMode: {}, - font: Object, - format: {}, - horizontalAlignment: {}, + alignment: String as PropType, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeHint: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + customizeText: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + displayFormat: String, + displayMode: String as PropType, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + horizontalAlignment: String as PropType, horizontalOffset: Number, indentFromAxis: Number, - overlappingBehavior: {}, - position: {}, + overlappingBehavior: String as PropType, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, staggeringSpacing: Number, template: {}, - text: {}, - textOverflow: {}, - verticalAlignment: {}, + text: String, + textOverflow: String as PropType, + verticalAlignment: String as PropType, verticalOffset: Number, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -2092,29 +2187,29 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - hoverMode: {}, - itemsAlignment: {}, - itemTextPosition: {}, - margin: [Number, Object], + customizeHint: Function as PropType<((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + hoverMode: String as PropType, + itemsAlignment: String as PropType, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, - position: {}, + position: String as PropType, rowCount: Number, rowItemSpacing: Number, - title: [Object, String], - verticalAlignment: {}, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -2146,13 +2241,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -2177,7 +2272,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -2238,7 +2333,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -2287,7 +2382,7 @@ const DxMinorGridConfig = { }, props: { color: String, - opacity: {}, + opacity: Number, visible: Boolean, width: Number } @@ -2402,10 +2497,10 @@ const DxPaneConfig = { "update:name": null, }, props: { - backgroundColor: [Object, String], - border: Object, - height: {}, - name: {} + backgroundColor: [Object, String] as PropType>, + border: Object as PropType>, + height: [Number, String], + name: String } }; @@ -2433,9 +2528,9 @@ const DxPaneBorderConfig = { props: { bottom: Boolean, color: String, - dashStyle: {}, + dashStyle: String as PropType, left: Boolean, - opacity: {}, + opacity: Number, right: Boolean, top: Boolean, visible: Boolean, @@ -2465,15 +2560,15 @@ const DxPointConfig = { "update:visible": null, }, props: { - border: Object, - color: {}, - hoverMode: {}, - hoverStyle: Object, - image: {}, - selectionMode: {}, - selectionStyle: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, + image: [Object, String] as PropType | string>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, size: Number, - symbol: {}, + symbol: String as PropType, visible: Boolean } }; @@ -2504,7 +2599,7 @@ const DxPointBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -2525,9 +2620,9 @@ const DxPointHoverStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, - size: {} + border: Object as PropType>, + color: [Object, String] as PropType>, + size: Number } }; @@ -2551,9 +2646,9 @@ const DxPointImageConfig = { "update:width": null, }, props: { - height: [Number, Object], - url: {}, - width: [Number, Object] + height: [Number, Object] as PropType>, + url: [Object, String] as PropType | string>, + width: [Number, Object] as PropType> } }; @@ -2577,9 +2672,9 @@ const DxPointSelectionStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, - size: {} + border: Object as PropType>, + color: [Object, String] as PropType>, + size: Number } }; @@ -2603,7 +2698,7 @@ const DxReductionConfig = { }, props: { color: String, - level: {} + level: String as PropType } }; @@ -2627,8 +2722,8 @@ const DxScrollBarConfig = { props: { color: String, offset: Number, - opacity: {}, - position: {}, + opacity: Number, + position: String as PropType, visible: Boolean, width: Number } @@ -2653,12 +2748,12 @@ const DxSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, - size: {}, + size: Number, width: Number } }; @@ -2722,43 +2817,43 @@ const DxSeriesConfig = { "update:width": null, }, props: { - aggregation: Object, + aggregation: Object as PropType>, argumentField: String, - axis: {}, - barOverlapGroup: {}, - barPadding: {}, - barWidth: {}, - border: Object, + axis: String, + barOverlapGroup: String, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, closeValueField: String, - color: {}, + color: [Object, String] as PropType>, cornerRadius: Number, - dashStyle: {}, + dashStyle: String as PropType, highValueField: String, - hoverMode: {}, - hoverStyle: Object, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, innerColor: String, - label: Object, + label: Object as PropType>, lowValueField: String, - maxLabelCount: {}, - minBarSize: {}, - name: {}, + maxLabelCount: Number, + minBarSize: Number, + name: String, opacity: Number, openValueField: String, pane: String, - point: Object, + point: Object as PropType>, rangeValue1Field: String, rangeValue2Field: String, - reduction: Object, - selectionMode: {}, - selectionStyle: Object, + reduction: Object as PropType>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, sizeField: String, stack: String, tag: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -2782,8 +2877,8 @@ const DxSeriesBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, + color: String, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -2803,7 +2898,7 @@ const DxSeriesTemplateConfig = { "update:nameField": null, }, props: { - customizeSeries: Function, + customizeSeries: Function as PropType<((seriesName: any) => ChartSeries)>, nameField: String } }; @@ -2847,8 +2942,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -2870,12 +2965,12 @@ const DxStripConfig = { "update:startValue": null, }, props: { - color: {}, - endValue: {}, - label: Object, + color: String, + endValue: [Date, Number, String], + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number, - startValue: {} + startValue: [Date, Number, String] } }; @@ -2896,10 +2991,10 @@ const DxStripLabelConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - text: {}, - verticalAlignment: {} + font: Object as PropType>, + horizontalAlignment: String as PropType, + text: String, + verticalAlignment: String as PropType } }; @@ -2918,7 +3013,7 @@ const DxStripStyleConfig = { "update:paddingTopBottom": null, }, props: { - label: Object, + label: Object as PropType>, paddingLeftRight: Number, paddingTopBottom: Number } @@ -2943,9 +3038,9 @@ const DxStripStyleLabelConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - verticalAlignment: {} + font: Object as PropType>, + horizontalAlignment: String as PropType, + verticalAlignment: String as PropType } }; @@ -2966,11 +3061,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -2997,7 +3092,7 @@ const DxTickConfig = { props: { color: String, length: Number, - opacity: {}, + opacity: Number, shift: Number, visible: Boolean, width: Number @@ -3059,16 +3154,16 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - alignment: {}, - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], - text: {}, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + alignment: String as PropType, + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, + text: String, + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -3109,25 +3204,25 @@ const DxTooltipConfig = { "update:zIndex": null, }, props: { - argumentFormat: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((pointInfo: any) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - location: {}, - opacity: {}, + location: String as PropType, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, + shadow: Object as PropType>, shared: Boolean, - zIndex: {} + zIndex: Number } }; @@ -3157,8 +3252,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -3178,8 +3273,8 @@ const DxUrlConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: String, + rangeMinPoint: String } }; @@ -3243,53 +3338,53 @@ const DxValueAxisConfig = { "update:width": null, }, props: { - aggregatedPointsPosition: {}, - allowDecimals: {}, + aggregatedPointsPosition: String as PropType, + allowDecimals: Boolean, autoBreaksEnabled: Boolean, axisDivisionFactor: Number, - breaks: Array, - breakStyle: Object, - categories: Array, + breaks: Array as PropType>, + breakStyle: Object as PropType>, + categories: Array as PropType>, color: String, - constantLines: Array, - constantLineStyle: Object, - customPosition: {}, - discreteAxisDivisionMode: {}, - endOnTick: {}, - grid: Object, + constantLines: Array as PropType>>, + constantLineStyle: Object as PropType>, + customPosition: [Date, Number, String], + discreteAxisDivisionMode: String as PropType, + endOnTick: Boolean, + grid: Object as PropType>, inverted: Boolean, - label: Object, - linearThreshold: {}, + label: Object as PropType>, + linearThreshold: Number, logarithmBase: Number, maxAutoBreakCount: Number, - maxValueMargin: {}, - minorGrid: Object, - minorTick: Object, - minorTickCount: {}, - minorTickInterval: {}, - minValueMargin: {}, - minVisualRangeLength: {}, + maxValueMargin: Number, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + minorTickCount: Number, + minorTickInterval: [Number, Object, String] as PropType | TimeInterval>, + minValueMargin: Number, + minVisualRangeLength: [Number, Object, String] as PropType | TimeInterval>, multipleAxesSpacing: Number, - name: {}, - offset: {}, - opacity: {}, - pane: {}, + name: String, + offset: Number, + opacity: Number, + pane: String, placeholderSize: Number, - position: {}, - showZero: {}, - strips: Array, - stripStyle: Object, - synchronizedValue: {}, - tick: Object, - tickInterval: {}, - title: [Object, String], - type: {}, + position: String as PropType, + showZero: Boolean, + strips: Array as PropType>>, + stripStyle: Object as PropType>, + synchronizedValue: Number, + tick: Object as PropType>, + tickInterval: [Number, Object, String] as PropType | TimeInterval>, + title: [Object, String] as PropType | string>, + type: String as PropType, valueMarginsEnabled: Boolean, - valueType: {}, + valueType: String as PropType, visible: Boolean, - visualRange: [Array, Object], - visualRangeUpdateMode: {}, - wholeRange: {}, + visualRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, + visualRangeUpdateMode: String as PropType, + wholeRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, width: Number } }; @@ -3333,13 +3428,13 @@ const DxValueErrorBarConfig = { }, props: { color: String, - displayMode: {}, + displayMode: String as PropType, edgeLength: Number, - highValueField: {}, + highValueField: String, lineWidth: Number, - lowValueField: {}, - opacity: {}, - type: {}, + lowValueField: String, + opacity: Number, + type: String as PropType, value: Number } }; @@ -3363,9 +3458,9 @@ const DxVerticalLineConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, - opacity: {}, + dashStyle: String as PropType, + label: Object as PropType>, + opacity: Number, visible: Boolean, width: Number } @@ -3390,9 +3485,9 @@ const DxVisualRangeConfig = { "update:startValue": null, }, props: { - endValue: {}, - length: {}, - startValue: {} + endValue: [Date, Number, String], + length: [Number, Object, String] as PropType | TimeInterval>, + startValue: [Date, Number, String] } }; @@ -3411,9 +3506,9 @@ const DxWholeRangeConfig = { "update:startValue": null, }, props: { - endValue: {}, - length: {}, - startValue: {} + endValue: [Date, Number, String], + length: [Number, Object, String] as PropType | TimeInterval>, + startValue: [Date, Number, String] } }; @@ -3431,8 +3526,8 @@ const DxWidthConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: Number, + rangeMinPoint: Number } }; @@ -3457,11 +3552,11 @@ const DxZoomAndPanConfig = { props: { allowMouseWheel: Boolean, allowTouchGestures: Boolean, - argumentAxis: {}, - dragBoxStyle: Object, + argumentAxis: String as PropType, + dragBoxStyle: Object as PropType>, dragToZoom: Boolean, - panKey: {}, - valueAxis: {} + panKey: String as PropType, + valueAxis: String as PropType } }; diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts index 03786b1f6a34..d7da98cb6f99 100644 --- a/packages/devextreme-vue/src/chat.ts +++ b/packages/devextreme-vue/src/chat.ts @@ -1,6 +1,31 @@ -import Chat, { Properties } from "devextreme/ui/chat"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Chat, { Properties } from "devextreme/ui/chat"; +import DataSource from "devextreme/data/data_source"; +import { + Alert, + Message, + DisposingEvent, + InitializedEvent, + MessageEnteredEvent, + OptionChangedEvent, + TypingEndEvent, + TypingStartEvent, + User, +} from "devextreme/ui/chat"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Format, +} from "devextreme/localization"; +import { + Format as CommonFormat, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + dayHeaderFormat: [Object, String, Function] as PropType string)) | Record | string>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - items: Array, + items: Array as PropType>, messageTemplate: {}, - messageTimestampFormat: {}, - onDisposing: Function, - onInitialized: Function, - onMessageEntered: {}, - onOptionChanged: Function, - onTypingEnd: {}, - onTypingStart: {}, + messageTimestampFormat: [Object, String, Function] as PropType string)) | Record | string>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onMessageEntered: Function as PropType<((e: MessageEnteredEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTypingEnd: Function as PropType<((e: TypingEndEvent) => void)>, + onTypingStart: Function as PropType<((e: TypingStartEvent) => void)>, reloadOnChange: Boolean, rtlEnabled: Boolean, showAvatar: Boolean, showDayHeaders: Boolean, showMessageTimestamp: Boolean, showUserName: Boolean, - typingUsers: Array, - user: Object, + typingUsers: Array as PropType>, + user: Object as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -187,10 +212,10 @@ const DxDayHeaderFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -211,7 +236,7 @@ const DxItemConfig = { "update:timestamp": null, }, props: { - author: Object, + author: Object as PropType>, id: [Number, String], text: String, timestamp: [Date, Number, String] @@ -241,10 +266,10 @@ const DxMessageTimestampFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; diff --git a/packages/devextreme-vue/src/check-box.ts b/packages/devextreme-vue/src/check-box.ts index 28545c7d0184..1af385a835d6 100644 --- a/packages/devextreme-vue/src/check-box.ts +++ b/packages/devextreme-vue/src/check-box.ts @@ -1,6 +1,19 @@ -import CheckBox, { Properties } from "devextreme/ui/check_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import CheckBox, { Properties } from "devextreme/ui/check_box"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/check_box"; +import { + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick>, enableThreeStateBehavior: Boolean, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - iconSize: {}, + iconSize: [Number, String], isDirty: Boolean, isValid: Boolean, name: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, tabIndex: Number, text: String, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: Boolean as PropType, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/circular-gauge.ts b/packages/devextreme-vue/src/circular-gauge.ts index 78ba174608cb..57e9b96f1ddc 100644 --- a/packages/devextreme-vue/src/circular-gauge.ts +++ b/packages/devextreme-vue/src/circular-gauge.ts @@ -1,6 +1,46 @@ -import CircularGauge, { Properties } from "devextreme/viz/circular_gauge"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import CircularGauge, { Properties } from "devextreme/viz/circular_gauge"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + CircularGaugeLabelOverlap, + CircularGaugeElementOrientation, +} from "devextreme/viz/circular_gauge"; +import { + GaugeIndicator, +} from "devextreme/viz/gauges/base_gauge"; +import { + Theme, + AnimationEaseMode, + DashStyle, + Font, + LabelOverlap, + ChartsColor, + Palette, + PaletteExtensionMode, + TextOverflow, + WordWrap, +} from "devextreme/common/charts"; +import { + ExportFormat, + Format, + HorizontalEdge, + VerticalEdge, + HorizontalAlignment, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, centerTemplate: {}, containerBackgroundColor: String, disabled: Boolean, - elementAttr: Object, - export: Object, - geometry: Object, - loadingIndicator: Object, - margin: Object, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, + elementAttr: Object as PropType>, + export: Object as PropType>, + geometry: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, pathModified: Boolean, - rangeContainer: Object, + rangeContainer: Object as PropType>, redrawOnResize: Boolean, rtlEnabled: Boolean, - scale: Object, - size: Object, - subvalueIndicator: Object, - subvalues: Array, - theme: {}, - title: [Object, String], - tooltip: Object, - value: {}, - valueIndicator: Object + scale: Object as PropType>, + size: Object as PropType>, + subvalueIndicator: Object as PropType>, + subvalues: Array as PropType>, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, + value: Number, + valueIndicator: Object as PropType> }, emits: { "update:isActive": null, @@ -153,7 +193,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean } }; @@ -172,8 +212,8 @@ const DxBackgroundColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -195,8 +235,8 @@ const DxBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -216,8 +256,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -243,10 +283,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -294,10 +334,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -341,12 +381,12 @@ const DxLabelConfig = { "update:visible": null, }, props: { - customizeText: Function, - font: Object, - format: {}, - hideFirstOrLast: {}, + customizeText: Function as PropType<((scaleValue: { value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + hideFirstOrLast: String as PropType, indentFromTick: Number, - overlappingBehavior: {}, + overlappingBehavior: String as PropType, useRangeColors: Boolean, visible: Boolean } @@ -373,7 +413,7 @@ const DxLoadingIndicatorConfig = { }, props: { backgroundColor: String, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -445,7 +485,7 @@ const DxRangeConfig = { "update:startValue": null, }, props: { - color: [Object, String], + color: [Object, String] as PropType>, endValue: Number, startValue: Number } @@ -474,12 +514,12 @@ const DxRangeContainerConfig = { "update:width": null, }, props: { - backgroundColor: [Object, String], + backgroundColor: [Object, String] as PropType>, offset: Number, - orientation: {}, - palette: {}, - paletteExtensionMode: {}, - ranges: Array, + orientation: String as PropType, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, + ranges: Array as PropType>>, width: Number } }; @@ -512,18 +552,18 @@ const DxScaleConfig = { "update:tickInterval": null, }, props: { - allowDecimals: {}, - customMinorTicks: Array, - customTicks: Array, + allowDecimals: Boolean, + customMinorTicks: Array as PropType>, + customTicks: Array as PropType>, endValue: Number, - label: Object, - minorTick: Object, - minorTickInterval: {}, - orientation: {}, + label: Object as PropType>, + minorTick: Object as PropType>, + minorTickInterval: Number, + orientation: String as PropType, scaleDivisionFactor: Number, startValue: Number, - tick: Object, - tickInterval: {} + tick: Object as PropType>, + tickInterval: Number } }; @@ -571,8 +611,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -593,11 +633,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -637,22 +677,22 @@ const DxSubvalueIndicatorConfig = { props: { arrowLength: Number, backgroundColor: String, - baseValue: {}, + baseValue: Number, beginAdaptingAtRadius: Number, - color: [Object, String], - horizontalOrientation: {}, + color: [Object, String] as PropType>, + horizontalOrientation: String as PropType, indentFromCenter: Number, length: Number, offset: Number, - palette: {}, + palette: [Array, String] as PropType | Palette>, secondColor: String, secondFraction: Number, size: Number, spindleGapSize: Number, spindleSize: Number, - text: Object, - type: String, - verticalOrientation: {}, + text: Object as PropType>, + type: String as PropType<"circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle">, + verticalOrientation: String as PropType, width: Number } }; @@ -677,9 +717,9 @@ const DxTextConfig = { "update:indent": null, }, props: { - customizeText: {}, - font: Object, - format: {}, + customizeText: Function as PropType<((indicatedValue: { value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indent: Number } }; @@ -734,15 +774,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -780,21 +820,21 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((scaleValue: { value: number, valueText: string }) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -837,22 +877,22 @@ const DxValueIndicatorConfig = { props: { arrowLength: Number, backgroundColor: String, - baseValue: {}, + baseValue: Number, beginAdaptingAtRadius: Number, - color: [Object, String], - horizontalOrientation: {}, + color: [Object, String] as PropType>, + horizontalOrientation: String as PropType, indentFromCenter: Number, length: Number, offset: Number, - palette: {}, + palette: [Array, String] as PropType | Palette>, secondColor: String, secondFraction: Number, size: Number, spindleGapSize: Number, spindleSize: Number, - text: Object, - type: String, - verticalOrientation: {}, + text: Object as PropType>, + type: String as PropType<"circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle">, + verticalOrientation: String as PropType, width: Number } }; diff --git a/packages/devextreme-vue/src/color-box.ts b/packages/devextreme-vue/src/color-box.ts index f5d454ff228a..1c40968bbe86 100644 --- a/packages/devextreme-vue/src/color-box.ts +++ b/packages/devextreme-vue/src/color-box.ts @@ -1,6 +1,84 @@ -import ColorBox, { Properties } from "devextreme/ui/color_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ColorBox, { Properties } from "devextreme/ui/color_box"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + ApplyValueMode, + TextEditorButton, + LabelMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/color_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + buttons: Array as PropType>, cancelButtonText: String, deferRendering: Boolean, disabled: Boolean, dropDownButtonTemplate: {}, - dropDownOptions: Object, + dropDownOptions: Object as PropType | Record>, editAlphaChannel: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, fieldTemplate: {}, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, keyStep: Number, label: String, - labelMode: {}, + labelMode: String as PropType, name: String, - onChange: Function, - onClosed: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, placeholder: String, @@ -119,17 +197,17 @@ const componentConfig = { rtlEnabled: Boolean, showClearButton: Boolean, showDropDownButton: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -223,8 +301,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -246,8 +324,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -285,9 +363,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -309,8 +387,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -376,10 +454,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -390,28 +468,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -422,9 +500,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -453,7 +531,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -484,16 +562,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -515,8 +593,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -576,31 +654,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -623,13 +701,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -655,16 +733,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -687,7 +765,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -718,19 +796,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/context-menu.ts b/packages/devextreme-vue/src/context-menu.ts index 52cf9114ea02..02c467091d51 100644 --- a/packages/devextreme-vue/src/context-menu.ts +++ b/packages/devextreme-vue/src/context-menu.ts @@ -1,7 +1,53 @@ export { ExplicitTypes } from "devextreme/ui/context_menu"; -import ContextMenu, { Properties } from "devextreme/ui/context_menu"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ContextMenu, { Properties } from "devextreme/ui/context_menu"; +import DataSource from "devextreme/data/data_source"; +import { + event, +} from "devextreme/events/index"; +import { + dxContextMenuItem, + ContentReadyEvent, + DisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemRenderedEvent, + OptionChangedEvent, + PositioningEvent, + SelectionChangedEvent, + ShowingEvent, + ShownEvent, + ContextSubmenuDirection, +} from "devextreme/ui/context_menu"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + SingleOrNone, + SubmenuShowMode, + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, +} from "devextreme/common"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, cssClass: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - disabledExpr: [Function, String], - displayExpr: [Function, String], - elementAttr: Object, + disabledExpr: [Function, String] as PropType<((() => void)) | string>, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hideOnOutsideClick: [Boolean, Function], - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, + hint: String, hoverStateEnabled: Boolean, - items: Array, - itemsExpr: [Function, String], + items: Array as PropType>, + itemsExpr: [Function, String] as PropType<((() => void)) | string>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemRendered: Function, - onOptionChanged: Function, - onPositioning: Function, - onSelectionChanged: Function, - onShowing: Function, - onShown: Function, - position: Object, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPositioning: Function as PropType<((e: PositioningEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + position: Object as PropType>, rtlEnabled: Boolean, selectByClick: Boolean, - selectedExpr: [Function, String], + selectedExpr: [Function, String] as PropType<((() => void)) | string>, selectedItem: {}, - selectionMode: {}, - showEvent: [Object, String], - showSubmenuMode: {}, - submenuDirection: {}, + selectionMode: String as PropType, + showEvent: [Object, String] as PropType | string>, + showSubmenuMode: [Object, String] as PropType | SubmenuShowMode>, + submenuDirection: String as PropType, tabIndex: Number, target: {}, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -181,8 +227,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -204,8 +250,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -242,8 +288,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -285,7 +331,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -316,16 +362,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -359,7 +405,7 @@ const DxItemConfig = { closeMenuOnClick: Boolean, disabled: Boolean, icon: String, - items: Array, + items: Array as PropType>, selectable: Boolean, selected: Boolean, template: {}, @@ -383,8 +429,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -426,13 +472,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -458,16 +504,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -485,8 +531,8 @@ const DxShowEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -504,8 +550,8 @@ const DxShowSubmenuModeConfig = { "update:name": null, }, props: { - delay: [Number, Object], - name: {} + delay: [Number, Object] as PropType>, + name: String as PropType } }; @@ -531,7 +577,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 5940ed25f179..9e1801683f11 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -1,7 +1,190 @@ export { ExplicitTypes } from "devextreme/ui/data_grid"; -import DataGrid, { Properties } from "devextreme/ui/data_grid"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DataGrid, { Properties } from "devextreme/ui/data_grid"; +import DataSource from "devextreme/data/data_source"; +import dxDataGrid from "devextreme/ui/data_grid"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import dxSortable from "devextreme/ui/sortable"; +import dxDraggable from "devextreme/ui/draggable"; +import { + ColumnResizeMode, + Pager, + DataChangeType, + FilterOperation, + FilterType, + FixedPosition, + SelectedFilterOperation, + ColumnChooserMode, + ColumnChooserSearchConfig, + ColumnChooserSelectionConfig, + HeaderFilterGroupInterval, + ColumnHeaderFilterSearchConfig, + HeaderFilterSearchConfig, + SelectionColumnDisplayMode, + DataChange, + GridsEditMode, + NewRowPosition, + GridsEditRefreshMode, + StartEditAction, + GridBase, + ApplyFilterMode, + GroupExpandMode, + SummaryType, + EnterKeyAction, + EnterKeyDirection, + PagerPageSize, + DataRenderMode, + StateStoreType, +} from "devextreme/common/grids"; +import { + dxDataGridColumn, + AdaptiveDetailRowPreparingEvent, + CellClickEvent, + CellDblClickEvent, + CellHoverChangedEvent, + CellPreparedEvent, + ContentReadyEvent, + ContextMenuPreparingEvent, + DataErrorOccurredEvent, + DisposingEvent, + EditCanceledEvent, + EditCancelingEvent, + EditingStartEvent, + EditorPreparedEvent, + EditorPreparingEvent, + ExportingEvent, + FocusedCellChangedEvent, + FocusedCellChangingEvent, + FocusedRowChangedEvent, + FocusedRowChangingEvent, + InitializedEvent, + InitNewRowEvent, + KeyDownEvent, + OptionChangedEvent, + RowClickEvent, + RowCollapsedEvent, + RowCollapsingEvent, + RowDblClickEvent, + RowExpandedEvent, + RowExpandingEvent, + RowInsertedEvent, + RowInsertingEvent, + RowPreparedEvent, + RowRemovedEvent, + RowRemovingEvent, + RowUpdatedEvent, + RowUpdatingEvent, + RowValidatingEvent, + SavedEvent, + SavingEvent, + SelectionChangedEvent, + ToolbarPreparingEvent, + dxDataGridToolbar, + dxDataGridRowObject, + DataGridPredefinedColumnButton, + ColumnButtonClickEvent, + dxDataGridColumnButton, + DataGridCommandColumnType, + SelectionSensitivity, + DataGridExportFormat, + DataGridPredefinedToolbarItem, + DataGridScrollMode, + dxDataGridToolbarItem, +} from "devextreme/ui/data_grid"; +import { + Mode, + PagerBase, + ValidationRuleType, + HorizontalAlignment, + VerticalAlignment, + DataType, + Format as CommonFormat, + SortOrder, + SearchMode, + ComparisonOperator, + SingleMultipleOrNone, + SelectAllMode, + PositionAlignment, + Direction, + ToolbarItemLocation, + ToolbarItemComponent, + DisplayMode, + DragDirection, + DragHighlight, + ScrollbarMode, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxFilterBuilderOptions, + dxFilterBuilderField, + FilterBuilderOperation, + dxFilterBuilderCustomOperation, + GroupOperation, + ContentReadyEvent as FilterBuilderContentReadyEvent, + DisposingEvent as FilterBuilderDisposingEvent, + EditorPreparedEvent as FilterBuilderEditorPreparedEvent, + EditorPreparingEvent as FilterBuilderEditorPreparingEvent, + InitializedEvent as FilterBuilderInitializedEvent, + OptionChangedEvent as FilterBuilderOptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/filter_builder"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + Format, +} from "devextreme/localization"; +import { + dxFormSimpleItem, + dxFormOptions, + dxFormGroupItem, + dxFormTabbedItem, + dxFormEmptyItem, + dxFormButtonItem, + LabelLocation, + FormLabelMode, + ContentReadyEvent as FormContentReadyEvent, + DisposingEvent as FormDisposingEvent, + EditorEnterKeyEvent, + FieldDataChangedEvent, + InitializedEvent as FormInitializedEvent, + OptionChangedEvent as FormOptionChangedEvent, + FormItemComponent, + FormItemType, +} from "devextreme/ui/form"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; +import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + columnFixing: Object as PropType>, columnHidingEnabled: Boolean, - columnMinWidth: {}, - columnResizingMode: {}, - columns: Array, - columnWidth: {}, - customizeColumns: Function, + columnMinWidth: Number, + columnResizingMode: String as PropType, + columns: Array as PropType>, + columnWidth: [String, Number] as PropType, + customizeColumns: Function as PropType<((columns: Array) => void)>, dataRowTemplate: {}, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, dateSerializationFormat: String, disabled: Boolean, - editing: Object, - elementAttr: Object, + editing: Object as PropType>, + elementAttr: Object as PropType>, errorRowEnabled: Boolean, - export: Object, - filterBuilder: Object, - filterBuilderPopup: Object, - filterPanel: Object, - filterRow: Object, - filterSyncEnabled: {}, - filterValue: [Array, Function, String], + export: Object as PropType>, + filterBuilder: Object as PropType>, + filterBuilderPopup: Object as PropType | Record>, + filterPanel: Object as PropType>, + filterRow: Object as PropType>, + filterSyncEnabled: [Boolean, String] as PropType, + filterValue: [Array, Function, String] as PropType | ((() => any)) | string>, focusedColumnIndex: Number, focusedRowEnabled: Boolean, focusedRowIndex: Number, focusedRowKey: {}, - grouping: Object, - groupPanel: Object, - headerFilter: Object, - height: {}, + grouping: Object as PropType>, + groupPanel: Object as PropType>, + headerFilter: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, highlightChanges: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - keyboardNavigation: Object, - keyExpr: {}, - loadPanel: Object, - masterDetail: Object, + keyboardNavigation: Object as PropType>, + keyExpr: [Array, String] as PropType | string>, + loadPanel: Object as PropType>, + masterDetail: Object as PropType>, noDataText: String, - onAdaptiveDetailRowPreparing: Function, - onCellClick: Function, - onCellDblClick: Function, - onCellHoverChanged: Function, - onCellPrepared: Function, - onContentReady: Function, - onContextMenuPreparing: Function, - onDataErrorOccurred: Function, - onDisposing: Function, - onEditCanceled: Function, - onEditCanceling: Function, - onEditingStart: Function, - onEditorPrepared: Function, - onEditorPreparing: Function, - onExporting: Function, - onFocusedCellChanged: Function, - onFocusedCellChanging: Function, - onFocusedRowChanged: Function, - onFocusedRowChanging: Function, - onInitialized: Function, - onInitNewRow: Function, - onKeyDown: Function, - onOptionChanged: Function, - onRowClick: Function, - onRowCollapsed: Function, - onRowCollapsing: Function, - onRowDblClick: Function, - onRowExpanded: Function, - onRowExpanding: Function, - onRowInserted: Function, - onRowInserting: Function, - onRowPrepared: Function, - onRowRemoved: Function, - onRowRemoving: Function, - onRowUpdated: Function, - onRowUpdating: Function, - onRowValidating: Function, - onSaved: Function, - onSaving: Function, - onSelectionChanged: Function, - onToolbarPreparing: Function, - pager: Object, - paging: Object, - remoteOperations: {}, + onAdaptiveDetailRowPreparing: Function as PropType<((e: AdaptiveDetailRowPreparingEvent) => void)>, + onCellClick: Function as PropType<((e: CellClickEvent) => void)>, + onCellDblClick: Function as PropType<((e: CellDblClickEvent) => void)>, + onCellHoverChanged: Function as PropType<((e: CellHoverChangedEvent) => void)>, + onCellPrepared: Function as PropType<((e: CellPreparedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuPreparing: Function as PropType<((e: ContextMenuPreparingEvent) => void)>, + onDataErrorOccurred: Function as PropType<((e: DataErrorOccurredEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEditCanceled: Function as PropType<((e: EditCanceledEvent) => void)>, + onEditCanceling: Function as PropType<((e: EditCancelingEvent) => void)>, + onEditingStart: Function as PropType<((e: EditingStartEvent) => void)>, + onEditorPrepared: Function as PropType<((e: EditorPreparedEvent) => void)>, + onEditorPreparing: Function as PropType<((e: EditorPreparingEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFocusedCellChanged: Function as PropType<((e: FocusedCellChangedEvent) => void)>, + onFocusedCellChanging: Function as PropType<((e: FocusedCellChangingEvent) => void)>, + onFocusedRowChanged: Function as PropType<((e: FocusedRowChangedEvent) => void)>, + onFocusedRowChanging: Function as PropType<((e: FocusedRowChangingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInitNewRow: Function as PropType<((e: InitNewRowEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onRowClick: Function as PropType<((e: RowClickEvent) => void)>, + onRowCollapsed: Function as PropType<((e: RowCollapsedEvent) => void)>, + onRowCollapsing: Function as PropType<((e: RowCollapsingEvent) => void)>, + onRowDblClick: Function as PropType<((e: RowDblClickEvent) => void)>, + onRowExpanded: Function as PropType<((e: RowExpandedEvent) => void)>, + onRowExpanding: Function as PropType<((e: RowExpandingEvent) => void)>, + onRowInserted: Function as PropType<((e: RowInsertedEvent) => void)>, + onRowInserting: Function as PropType<((e: RowInsertingEvent) => void)>, + onRowPrepared: Function as PropType<((e: RowPreparedEvent) => void)>, + onRowRemoved: Function as PropType<((e: RowRemovedEvent) => void)>, + onRowRemoving: Function as PropType<((e: RowRemovingEvent) => void)>, + onRowUpdated: Function as PropType<((e: RowUpdatedEvent) => void)>, + onRowUpdating: Function as PropType<((e: RowUpdatingEvent) => void)>, + onRowValidating: Function as PropType<((e: RowValidatingEvent) => void)>, + onSaved: Function as PropType<((e: SavedEvent) => void)>, + onSaving: Function as PropType<((e: SavingEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onToolbarPreparing: Function as PropType<((e: ToolbarPreparingEvent) => void)>, + pager: Object as PropType | PagerBase>, + paging: Object as PropType>, + remoteOperations: [Boolean, String, Object] as PropType>, renderAsync: Boolean, repaintChangesOnly: Boolean, rowAlternationEnabled: Boolean, - rowDragging: Object, + rowDragging: Object as PropType>, rowTemplate: {}, rtlEnabled: Boolean, - scrolling: Object, - searchPanel: Object, - selectedRowKeys: Array, - selection: Object, - selectionFilter: [Array, Function, String], + scrolling: Object as PropType>, + searchPanel: Object as PropType>, + selectedRowKeys: Array as PropType>, + selection: Object as PropType>, + selectionFilter: [Array, Function, String] as PropType | ((() => any)) | string>, showBorders: Boolean, showColumnHeaders: Boolean, showColumnLines: Boolean, showRowLines: Boolean, - sortByGroupSummaryInfo: Array, - sorting: Object, - stateStoring: Object, - summary: Object, + sortByGroupSummaryInfo: Array as PropType>>, + sorting: Object as PropType>, + stateStoring: Object as PropType>, + summary: Object as PropType>, syncLookupFilterValues: Boolean, tabIndex: Number, - toolbar: {}, + toolbar: Object as PropType>, twoWayBindingEnabled: Boolean, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wordWrapEnabled: Boolean }, emits: { @@ -421,8 +604,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -450,8 +633,8 @@ const DxAsyncRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => any)> } }; @@ -473,8 +656,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -519,14 +702,14 @@ const DxButtonConfig = { }, props: { cssClass: String, - disabled: [Boolean, Function], + disabled: [Boolean, Function] as PropType boolean))>, hint: String, icon: String, - name: {}, - onClick: Function, + name: String as PropType, + onClick: Function as PropType<((e: ColumnButtonClickEvent) => void)>, template: {}, text: String, - visible: [Boolean, Function] + visible: [Boolean, Function] as PropType boolean))> } }; @@ -550,7 +733,7 @@ const DxChangeConfig = { data: {}, insertAfterKey: {}, insertBeforeKey: {}, - type: {} + type: String as PropType } }; @@ -571,10 +754,10 @@ const DxColCountByScreenConfig = { "update:xs": null, }, props: { - lg: {}, - md: {}, - sm: {}, - xs: {} + lg: Number, + md: Number, + sm: Number, + xs: Number } }; @@ -592,8 +775,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -672,7 +855,7 @@ const DxColumnConfig = { "update:width": null, }, props: { - alignment: {}, + alignment: String as PropType, allowEditing: Boolean, allowExporting: Boolean, allowFiltering: Boolean, @@ -685,56 +868,56 @@ const DxColumnConfig = { allowSearch: Boolean, allowSorting: Boolean, autoExpandGroup: Boolean, - buttons: Array, - calculateCellValue: Function, - calculateDisplayValue: [Function, String], - calculateFilterExpression: Function, - calculateGroupValue: [Function, String], - calculateSortValue: [Function, String], - caption: {}, + buttons: Array as PropType>, + calculateCellValue: Function as PropType<((rowData: any) => any)>, + calculateDisplayValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string | null, target: string) => string | (() => any) | Array)>, + calculateGroupValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + calculateSortValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + caption: String, cellTemplate: {}, - columns: Array, - cssClass: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + columns: Array as PropType>, + cssClass: String, + customizeText: Function as PropType<((cellInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, editCellTemplate: {}, editorOptions: {}, encodeHtml: Boolean, falseText: String, - filterOperations: Array, - filterType: {}, + filterOperations: Array as PropType>, + filterType: String as PropType, filterValue: {}, - filterValues: Array, + filterValues: Array as PropType>, fixed: Boolean, - fixedPosition: {}, - format: {}, - formItem: Object, + fixedPosition: String as PropType, + format: [Object, String, Function] as PropType string)) | Record | string>, + formItem: Object as PropType>, groupCellTemplate: {}, - groupIndex: {}, + groupIndex: Number, headerCellTemplate: {}, - headerFilter: Object, - hidingPriority: {}, - isBand: {}, - lookup: Object, - minWidth: {}, - name: {}, - ownerBand: {}, + headerFilter: Object as PropType>, + hidingPriority: Number, + isBand: Boolean, + lookup: Object as PropType>, + minWidth: Number, + name: String, + ownerBand: Number, renderAsync: Boolean, - selectedFilterOperation: {}, - setCellValue: Function, + selectedFilterOperation: String as PropType, + setCellValue: Function as PropType<((newData: any, value: any, currentRowData: any) => any)>, showEditorAlways: Boolean, showInColumnChooser: Boolean, showWhenGrouped: Boolean, - sortIndex: {}, - sortingMethod: {}, - sortOrder: {}, + sortIndex: Number, + sortingMethod: Function as PropType<((value1: any, value2: any) => number)>, + sortOrder: String as PropType, trueText: String, - type: {}, - validationRules: Array, + type: String as PropType, + validationRules: Array as PropType>, visible: Boolean, - visibleIndex: {}, - width: {} + visibleIndex: Number, + width: [Number, String] } }; @@ -788,12 +971,12 @@ const DxColumnChooserConfig = { emptyPanelText: String, enabled: Boolean, height: [Number, String], - mode: {}, - position: {}, - search: Object, + mode: String as PropType, + position: Object as PropType>, + search: Object as PropType>, searchTimeout: Number, - selection: Object, - sortOrder: {}, + selection: Object as PropType>, + sortOrder: String as PropType, title: String, width: [Number, String] } @@ -864,8 +1047,8 @@ const DxColumnFixingConfig = { }, props: { enabled: Boolean, - icons: Object, - texts: Object + icons: Object as PropType>, + texts: Object as PropType> } }; @@ -921,12 +1104,12 @@ const DxColumnHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, - width: {} + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, + width: [Number, String] } }; @@ -953,8 +1136,8 @@ const DxColumnHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -977,10 +1160,10 @@ const DxColumnLookupConfig = { }, props: { allowClearing: Boolean, - calculateCellValue: Function, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + calculateCellValue: Function as PropType<((rowData: any) => any)>, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { data: Record, key: any }) => Array | Store | DataSourceOptions)) | null | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: String } }; @@ -1001,11 +1184,11 @@ const DxCompareRuleConfig = { "update:type": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -1052,14 +1235,14 @@ const DxCustomOperationConfig = { "update:name": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataTypes: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, field: dxFilterBuilderField) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { field: dxFilterBuilderField, value: string | number | Date, valueText: string }) => string)>, + dataTypes: Array as PropType>, editorTemplate: {}, hasValue: Boolean, - icon: {}, - name: {} + icon: String, + name: String } }; @@ -1084,8 +1267,8 @@ const DxCustomRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; @@ -1116,9 +1299,9 @@ const DxDataGridHeaderFilterConfig = { allowSearch: Boolean, allowSelectAll: Boolean, height: [Number, String], - search: Object, + search: Object as PropType>, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, width: [Number, String] } @@ -1148,7 +1331,7 @@ const DxDataGridHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, + mode: String as PropType, timeout: Number } }; @@ -1194,10 +1377,10 @@ const DxDataGridSelectionConfig = { props: { allowSelectAll: Boolean, deferred: Boolean, - mode: {}, - selectAllMode: {}, - sensitivity: {}, - showCheckBoxesMode: {} + mode: String as PropType, + selectAllMode: String as PropType, + sensitivity: String as PropType, + showCheckBoxesMode: String as PropType } }; @@ -1230,19 +1413,19 @@ const DxEditingConfig = { }, props: { allowAdding: Boolean, - allowDeleting: [Boolean, Function], - allowUpdating: [Boolean, Function], - changes: Array, + allowDeleting: [Boolean, Function] as PropType boolean))>, + allowUpdating: [Boolean, Function] as PropType boolean))>, + changes: Array as PropType>, confirmDelete: Boolean, editColumnName: String, editRowKey: {}, - form: Object, - mode: {}, - newRowPosition: {}, - popup: Object, - refreshMode: {}, + form: Object as PropType>, + mode: String as PropType, + newRowPosition: String as PropType, + popup: Object as PropType | Record>, + refreshMode: String as PropType, selectTextOnEditStart: Boolean, - startEditAction: {}, + startEditAction: String as PropType, texts: {}, useIcons: Boolean } @@ -1309,7 +1492,7 @@ const DxEmailRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -1335,8 +1518,8 @@ const DxExportConfig = { props: { allowExportSelectedData: Boolean, enabled: Boolean, - formats: Array, - texts: Object + formats: Array as PropType>, + texts: Object as PropType> } }; @@ -1390,18 +1573,18 @@ const DxFieldConfig = { "update:trueText": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { value: string | number | Date, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, editorOptions: {}, editorTemplate: {}, falseText: String, - filterOperations: Array, - format: {}, - lookup: Object, - name: {}, + filterOperations: Array as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + lookup: Object as PropType>, + name: String, trueText: String } }; @@ -1429,9 +1612,9 @@ const DxFieldLookupConfig = { }, props: { allowClearing: Boolean, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + dataSource: [Array, Object] as PropType | DataSourceOptions | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: [Function, String] as PropType<(((data: any) => string | number | boolean)) | string> } }; @@ -1475,34 +1658,34 @@ const DxFilterBuilderConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, allowHierarchicalFields: Boolean, - bindingOptions: Object, - customOperations: Array, + bindingOptions: Object as PropType>, + customOperations: Array as PropType>, disabled: Boolean, - elementAttr: Object, - fields: Array, - filterOperationDescriptions: Object, + elementAttr: Object as PropType>, + fields: Array as PropType>, + filterOperationDescriptions: Object as PropType>, focusStateEnabled: Boolean, - groupOperationDescriptions: Object, - groupOperations: Array, - height: {}, - hint: {}, + groupOperationDescriptions: Object as PropType>, + groupOperations: Array as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - maxGroupLevel: {}, - onContentReady: Function, - onDisposing: Function, - onEditorPrepared: Function, - onEditorPreparing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + maxGroupLevel: Number, + onContentReady: Function as PropType<((e: FilterBuilderContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: FilterBuilderDisposingEvent) => void)>, + onEditorPrepared: Function as PropType<((e: FilterBuilderEditorPreparedEvent) => void)>, + onEditorPreparing: Function as PropType<((e: FilterBuilderEditorPreparingEvent) => void)>, + onInitialized: Function as PropType<((e: FilterBuilderInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: FilterBuilderOptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, rtlEnabled: Boolean, tabIndex: Number, - value: [Array, Function, String], + value: [Array, Function, String] as PropType | ((() => any)) | string>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -1574,10 +1757,10 @@ const DxFilterBuilderPopupConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -1588,28 +1771,28 @@ const DxFilterBuilderPopupConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -1620,9 +1803,9 @@ const DxFilterBuilderPopupConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -1684,9 +1867,9 @@ const DxFilterPanelConfig = { "update:visible": null, }, props: { - customizeText: Function, + customizeText: Function as PropType<((e: { component: GridBase, filterValue: Record, text: string }) => string)>, filterEnabled: Boolean, - texts: Object, + texts: Object as PropType>, visible: Boolean } }; @@ -1737,11 +1920,11 @@ const DxFilterRowConfig = { "update:visible": null, }, props: { - applyFilter: {}, + applyFilter: String as PropType, applyFilterText: String, betweenEndText: String, betweenStartText: String, - operationDescriptions: Object, + operationDescriptions: Object as PropType>, resetOperationText: String, showAllText: String, showOperationChooser: Boolean, @@ -1805,47 +1988,47 @@ const DxFormConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, alignItemLabels: Boolean, alignItemLabelsInAllGroups: Boolean, - bindingOptions: Object, - colCount: {}, - colCountByScreen: Object, - customizeItem: Function, + bindingOptions: Object as PropType>, + colCount: [String, Number] as PropType, + colCountByScreen: Object as PropType>, + customizeItem: Function as PropType<((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void)>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, formData: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, - items: Array, - labelLocation: {}, - labelMode: {}, + items: Array as PropType>, + labelLocation: String as PropType, + labelMode: String as PropType, minColWidth: Number, - onContentReady: Function, - onDisposing: Function, - onEditorEnterKey: Function, - onFieldDataChanged: Function, - onInitialized: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: FormContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: FormDisposingEvent) => void)>, + onEditorEnterKey: Function as PropType<((e: EditorEnterKeyEvent) => void)>, + onFieldDataChanged: Function as PropType<((e: FieldDataChangedEvent) => void)>, + onInitialized: Function as PropType<((e: FormInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: FormOptionChangedEvent) => void)>, optionalMark: String, readOnly: Boolean, requiredMark: String, requiredMessage: String, rtlEnabled: Boolean, - screenByWidth: Function, + screenByWidth: Function as PropType<(() => void)>, scrollingEnabled: Boolean, showColonAfterLabel: Boolean, showOptionalMark: Boolean, showRequiredMark: Boolean, showValidationSummary: Boolean, tabIndex: Number, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -1871,10 +2054,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -1905,20 +2088,20 @@ const DxFormItemConfig = { "update:visibleIndex": null, }, props: { - colSpan: {}, - cssClass: {}, - dataField: {}, + colSpan: Number, + cssClass: String, + dataField: String, editorOptions: {}, - editorType: {}, - helpText: {}, - isRequired: {}, - itemType: {}, - label: Object, - name: {}, + editorType: String as PropType, + helpText: String, + isRequired: Boolean, + itemType: String as PropType, + label: Object as PropType>, + name: String, template: {}, - validationRules: Array, + validationRules: Array as PropType>, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -1954,7 +2137,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -1983,8 +2166,8 @@ const DxGroupingConfig = { allowCollapsing: Boolean, autoExpandAll: Boolean, contextMenuEnabled: Boolean, - expandMode: {}, - texts: Object + expandMode: String as PropType, + texts: Object as PropType> } }; @@ -2040,15 +2223,15 @@ const DxGroupItemConfig = { }, props: { alignByColumn: Boolean, - column: {}, - customizeText: Function, - displayFormat: {}, - name: {}, - showInColumn: {}, + column: String, + customizeText: Function as PropType<((itemInfo: { value: string | number | Date, valueText: string }) => string)>, + displayFormat: String, + name: String, + showInColumn: String, showInGroupFooter: Boolean, skipEmptyValues: Boolean, - summaryType: {}, - valueFormat: {} + summaryType: String as PropType, + valueFormat: [Object, String, Function] as PropType string)) | Record | string> } }; @@ -2096,7 +2279,7 @@ const DxGroupPanelConfig = { props: { allowColumnDragging: Boolean, emptyPanelText: String, - visible: {} + visible: [Boolean, String] as PropType } }; @@ -2125,15 +2308,15 @@ const DxHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, - width: {} + width: [Number, String] } }; @@ -2164,16 +2347,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -2231,19 +2414,19 @@ const DxItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -2266,8 +2449,8 @@ const DxKeyboardNavigationConfig = { props: { editOnKeyPress: Boolean, enabled: Boolean, - enterKeyAction: {}, - enterKeyDirection: {} + enterKeyAction: String as PropType, + enterKeyDirection: String as PropType } }; @@ -2289,11 +2472,11 @@ const DxLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - location: {}, + alignment: String as PropType, + location: String as PropType, showColon: Boolean, template: {}, - text: {}, + text: String, visible: Boolean } }; @@ -2319,7 +2502,7 @@ const DxLoadPanelConfig = { "update:width": null, }, props: { - enabled: {}, + enabled: [Boolean, String] as PropType, height: [Number, String], indicatorSrc: String, shading: Boolean, @@ -2349,10 +2532,10 @@ const DxLookupConfig = { }, props: { allowClearing: Boolean, - calculateCellValue: Function, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + calculateCellValue: Function as PropType<((rowData: any) => any)>, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { data: Record, key: any }) => Array | Store | DataSourceOptions)) | null | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: [String, Function] as PropType string | number | boolean))> } }; @@ -2391,8 +2574,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -2413,7 +2596,7 @@ const DxNumericRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -2497,14 +2680,14 @@ const DxPagerConfig = { "update:visible": null, }, props: { - allowedPageSizes: {}, - displayMode: {}, + allowedPageSizes: [Array, String] as PropType<(Array) | Mode>, + displayMode: String as PropType, infoText: String, label: String, showInfo: Boolean, showNavigationButtons: Boolean, showPageSizeSelector: Boolean, - visible: {} + visible: [Boolean, String] as PropType } }; @@ -2548,7 +2731,7 @@ const DxPatternRuleConfig = { ignoreEmptyValue: Boolean, message: String, pattern: [RegExp, String], - type: {} + type: String as PropType } }; @@ -2618,10 +2801,10 @@ const DxPopupConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -2632,28 +2815,28 @@ const DxPopupConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -2664,9 +2847,9 @@ const DxPopupConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -2695,13 +2878,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -2728,7 +2911,7 @@ const DxRangeRuleConfig = { message: String, min: [Date, Number, String], reevaluate: Boolean, - type: {} + type: String as PropType } }; @@ -2780,7 +2963,7 @@ const DxRequiredRuleConfig = { props: { message: String, trim: Boolean, - type: {} + type: String as PropType } }; @@ -2828,21 +3011,21 @@ const DxRowDraggingConfig = { autoScroll: Boolean, boundary: {}, container: {}, - cursorOffset: [Object, String], + cursorOffset: [Object, String] as PropType | string>, data: {}, - dragDirection: {}, + dragDirection: String as PropType, dragTemplate: {}, - dropFeedbackMode: {}, + dropFeedbackMode: String as PropType, filter: String, - group: {}, + group: String, handle: String, - onAdd: Function, - onDragChange: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onRemove: Function, - onReorder: Function, + onAdd: Function as PropType<((e: { component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragChange: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragEnd: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragMove: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragStart: Function as PropType<((e: { cancel: boolean, component: GridBase, event: event, fromData: any, fromIndex: number, itemData: any, itemElement: any }) => void)>, + onRemove: Function as PropType<((e: { component: GridBase, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onReorder: Function as PropType<((e: { component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, promise: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, scrollSensitivity: Number, scrollSpeed: Number, showDragIcons: Boolean @@ -2873,15 +3056,15 @@ const DxScrollingConfig = { "update:useNative": null, }, props: { - columnRenderingMode: {}, - mode: {}, + columnRenderingMode: String as PropType, + mode: String as PropType, preloadEnabled: Boolean, - renderAsync: {}, - rowRenderingMode: {}, + renderAsync: Boolean, + rowRenderingMode: String as PropType, scrollByContent: Boolean, scrollByThumb: Boolean, - showScrollbar: {}, - useNative: {} + showScrollbar: String as PropType, + useNative: [Boolean, String] as PropType } }; @@ -2904,8 +3087,8 @@ const DxSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -2961,12 +3144,12 @@ const DxSelectionConfig = { props: { allowSelectAll: Boolean, deferred: Boolean, - mode: {}, + mode: String as PropType, recursive: Boolean, - selectAllMode: {}, + selectAllMode: String as PropType, selectByClick: Boolean, - sensitivity: {}, - showCheckBoxesMode: {} + sensitivity: String as PropType, + showCheckBoxesMode: String as PropType } }; @@ -2992,16 +3175,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -3020,9 +3203,9 @@ const DxSortByGroupSummaryInfoConfig = { "update:summaryItem": null, }, props: { - groupColumn: {}, - sortOrder: {}, - summaryItem: {} + groupColumn: String, + sortOrder: String as PropType, + summaryItem: [Number, String] } }; @@ -3047,7 +3230,7 @@ const DxSortingConfig = { ascendingText: String, clearText: String, descendingText: String, - mode: {}, + mode: String as PropType, showSortIndexes: Boolean } }; @@ -3070,12 +3253,12 @@ const DxStateStoringConfig = { "update:type": null, }, props: { - customLoad: Function, - customSave: Function, + customLoad: Function as PropType<(() => any)>, + customSave: Function as PropType<((gridState: any) => void)>, enabled: Boolean, savingTimeout: Number, storageKey: String, - type: {} + type: String as PropType } }; @@ -3102,7 +3285,7 @@ const DxStringLengthRuleConfig = { message: String, min: Number, trim: Boolean, - type: {} + type: String as PropType } }; @@ -3128,12 +3311,12 @@ const DxSummaryConfig = { "update:totalItems": null, }, props: { - calculateCustomSummary: Function, - groupItems: Array, + calculateCustomSummary: Function as PropType<((options: { component: dxDataGrid, groupIndex: number, name: string, summaryProcess: string, totalValue: any, value: any }) => void)>, + groupItems: Array as PropType>>, recalculateWhileEditing: Boolean, skipEmptyValues: Boolean, - texts: Object, - totalItems: Array + texts: Object as PropType>, + totalItems: Array as PropType>> } }; @@ -3288,7 +3471,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -3310,8 +3493,8 @@ const DxToolbarConfig = { }, props: { disabled: Boolean, - items: Array, - visible: {} + items: Array as PropType>, + visible: Boolean } }; @@ -3343,19 +3526,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -3382,16 +3565,16 @@ const DxTotalItemConfig = { "update:valueFormat": null, }, props: { - alignment: {}, - column: {}, - cssClass: {}, - customizeText: Function, - displayFormat: {}, - name: {}, - showInColumn: {}, + alignment: String as PropType, + column: String, + cssClass: String, + customizeText: Function as PropType<((itemInfo: { value: string | number | Date, valueText: string }) => string)>, + displayFormat: String, + name: String, + showInColumn: String, skipEmptyValues: Boolean, - summaryType: {}, - valueFormat: {} + summaryType: String as PropType, + valueFormat: [Object, String, Function] as PropType string)) | Record | string> } }; @@ -3422,8 +3605,8 @@ const DxValidationRuleConfig = { "update:validationCallback": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, max: [Date, Number, String], message: String, @@ -3431,8 +3614,8 @@ const DxValidationRuleConfig = { pattern: [RegExp, String], reevaluate: Boolean, trim: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; @@ -3459,10 +3642,10 @@ const DxValueFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; diff --git a/packages/devextreme-vue/src/date-box.ts b/packages/devextreme-vue/src/date-box.ts index 13d15978e0f0..7f8a3ac49ac3 100644 --- a/packages/devextreme-vue/src/date-box.ts +++ b/packages/devextreme-vue/src/date-box.ts @@ -1,6 +1,104 @@ -import DateBox, { Properties } from "devextreme/ui/date_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DateBox, { Properties } from "devextreme/ui/date_box"; +import dxDateBox from "devextreme/ui/date_box"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + ApplyValueMode, + TextEditorButton, + Format as CommonFormat, + LabelMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + FirstDayOfWeek, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + dxCalendarOptions, + DisabledDate, + CalendarZoomLevel, + DisposingEvent as CalendarDisposingEvent, + InitializedEvent as CalendarInitializedEvent, + OptionChangedEvent as CalendarOptionChangedEvent, + ValueChangedEvent as CalendarValueChangedEvent, + CalendarSelectionMode, + WeekNumberRule, +} from "devextreme/ui/calendar"; +import { + Format, +} from "devextreme/localization"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, + DatePickerType, + DateType, +} from "devextreme/ui/date_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + buttons: Array as PropType>, + calendarOptions: Object as PropType>, cancelButtonText: String, dateOutOfRangeMessage: String, - dateSerializationFormat: {}, + dateSerializationFormat: String, deferRendering: Boolean, disabled: Boolean, - disabledDates: [Array, Function], - displayFormat: {}, + disabledDates: [Array, Function] as PropType | (((data: { component: dxDateBox, date: Date, view: string }) => boolean))>, + displayFormat: [Object, String, Function] as PropType string)) | Record | string>, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, interval: Number, @@ -115,31 +213,31 @@ const componentConfig = { isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, - max: {}, + labelMode: String as PropType, + max: [Date, Number, String], maxLength: [Number, String], - min: {}, + min: [Date, Number, String], name: String, - onChange: Function, - onClosed: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, - pickerType: {}, + pickerType: String as PropType, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, @@ -147,21 +245,21 @@ const componentConfig = { showClearButton: Boolean, showDropDownButton: Boolean, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, todayButtonText: String, - type: {}, + type: String as PropType, useMaskBehavior: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: [Date, Number, String], valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -273,8 +371,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -296,8 +394,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -335,9 +433,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -398,47 +496,47 @@ const DxCalendarOptionsConfig = { "update:zoomLevel": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, cellTemplate: {}, - dateSerializationFormat: {}, + dateSerializationFormat: String, disabled: Boolean, - disabledDates: [Array, Function], - elementAttr: Object, - firstDayOfWeek: {}, + disabledDates: [Array, Function] as PropType | (((data: DisabledDate) => boolean))>, + elementAttr: Object as PropType>, + firstDayOfWeek: Number as PropType, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, max: [Date, Number, String], - maxZoomLevel: {}, + maxZoomLevel: String as PropType, min: [Date, Number, String], - minZoomLevel: {}, + minZoomLevel: String as PropType, name: String, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onDisposing: Function as PropType<((e: CalendarDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: CalendarInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: CalendarOptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: CalendarValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, - selectionMode: {}, + selectionMode: String as PropType, selectWeekOnClick: Boolean, showTodayButton: Boolean, showWeekNumbers: Boolean, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: [Array, Date, Number, String], + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: [Array, Date, Number, String] as PropType<(Array) | Date | number | string>, visible: Boolean, - weekNumberRule: {}, - width: {}, - zoomLevel: {} + weekNumberRule: String as PropType, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + zoomLevel: String as PropType } }; @@ -456,8 +554,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -480,10 +578,10 @@ const DxDisplayFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -550,10 +648,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -564,28 +662,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -596,9 +694,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -627,7 +725,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -658,16 +756,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -689,8 +787,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -750,31 +848,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -797,13 +895,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -829,16 +927,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -861,7 +959,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -892,19 +990,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/date-range-box.ts b/packages/devextreme-vue/src/date-range-box.ts index 516ec81e46f0..9f9f039c1e3e 100644 --- a/packages/devextreme-vue/src/date-range-box.ts +++ b/packages/devextreme-vue/src/date-range-box.ts @@ -1,6 +1,101 @@ -import DateRangeBox, { Properties } from "devextreme/ui/date_range_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DateRangeBox, { Properties } from "devextreme/ui/date_range_box"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + ApplyValueMode, + TextEditorButton, + Format as CommonFormat, + LabelMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + FirstDayOfWeek, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + dxCalendarOptions, + DisabledDate, + CalendarZoomLevel, + DisposingEvent as CalendarDisposingEvent, + InitializedEvent as CalendarInitializedEvent, + OptionChangedEvent as CalendarOptionChangedEvent, + ValueChangedEvent as CalendarValueChangedEvent, + CalendarSelectionMode, + WeekNumberRule, +} from "devextreme/ui/calendar"; +import { + Format, +} from "devextreme/localization"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/date_range_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + buttons: Array as PropType>, + calendarOptions: Object as PropType>, cancelButtonText: String, - dateSerializationFormat: {}, + dateSerializationFormat: String, deferRendering: Boolean, disabled: Boolean, disableOutOfRangeSelection: Boolean, - displayFormat: {}, + displayFormat: [Object, String, Function] as PropType string)) | Record | string>, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, endDate: [Date, Number, String], endDateInputAttr: {}, endDateLabel: String, @@ -115,34 +210,34 @@ const componentConfig = { endDatePlaceholder: String, endDateText: String, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, invalidEndDateMessage: String, invalidStartDateMessage: String, isDirty: Boolean, isValid: Boolean, - labelMode: {}, - max: {}, - min: {}, + labelMode: String as PropType, + max: [Date, Number, String], + min: [Date, Number, String], multiView: Boolean, - onChange: Function, - onClosed: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, readOnly: Boolean, @@ -157,19 +252,19 @@ const componentConfig = { startDateOutOfRangeMessage: String, startDatePlaceholder: String, startDateText: String, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, todayButtonText: String, useMaskBehavior: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: Array, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: Array as PropType>, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -285,8 +380,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -308,8 +403,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -347,9 +442,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -410,47 +505,47 @@ const DxCalendarOptionsConfig = { "update:zoomLevel": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, cellTemplate: {}, - dateSerializationFormat: {}, + dateSerializationFormat: String, disabled: Boolean, - disabledDates: [Array, Function], - elementAttr: Object, - firstDayOfWeek: {}, + disabledDates: [Array, Function] as PropType | (((data: DisabledDate) => boolean))>, + elementAttr: Object as PropType>, + firstDayOfWeek: Number as PropType, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, max: [Date, Number, String], - maxZoomLevel: {}, + maxZoomLevel: String as PropType, min: [Date, Number, String], - minZoomLevel: {}, + minZoomLevel: String as PropType, name: String, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onDisposing: Function as PropType<((e: CalendarDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: CalendarInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: CalendarOptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: CalendarValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, - selectionMode: {}, + selectionMode: String as PropType, selectWeekOnClick: Boolean, showTodayButton: Boolean, showWeekNumbers: Boolean, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: [Array, Date, Number, String], + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: [Array, Date, Number, String] as PropType<(Array) | Date | number | string>, visible: Boolean, - weekNumberRule: {}, - width: {}, - zoomLevel: {} + weekNumberRule: String as PropType, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + zoomLevel: String as PropType } }; @@ -468,8 +563,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -492,10 +587,10 @@ const DxDisplayFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -562,10 +657,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -576,28 +671,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -608,9 +703,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -639,7 +734,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -670,16 +765,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -701,8 +796,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -762,31 +857,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -809,13 +904,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -841,16 +936,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -873,7 +968,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -904,19 +999,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/defer-rendering.ts b/packages/devextreme-vue/src/defer-rendering.ts index 6186e1166dae..0e961b630dfe 100644 --- a/packages/devextreme-vue/src/defer-rendering.ts +++ b/packages/devextreme-vue/src/defer-rendering.ts @@ -1,6 +1,31 @@ -import DeferRendering, { Properties } from "devextreme/ui/defer_rendering"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DeferRendering, { Properties } from "devextreme/ui/defer_rendering"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + RenderedEvent, + ShownEvent, +} from "devextreme/ui/defer_rendering"; +import { + Direction, + HorizontalAlignment, + VerticalAlignment, + PositionAlignment, +} from "devextreme/common"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | string>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onRendered: Function, - onShown: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onRendered: Function as PropType<((e: RenderedEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, renderWhen: {}, rtlEnabled: Boolean, showLoadIndicator: Boolean, - staggerItemSelector: {}, + staggerItemSelector: String, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -118,16 +143,16 @@ const DxAnimationConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -149,8 +174,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -187,8 +212,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -211,7 +236,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -234,8 +259,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -277,13 +302,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -313,7 +338,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/diagram.ts b/packages/devextreme-vue/src/diagram.ts index a9cdfba82bb2..ee6b1a52706b 100644 --- a/packages/devextreme-vue/src/diagram.ts +++ b/packages/devextreme-vue/src/diagram.ts @@ -1,6 +1,42 @@ -import Diagram, { Properties } from "devextreme/ui/diagram"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Diagram, { Properties } from "devextreme/ui/diagram"; +import DataSource from "devextreme/data/data_source"; +import { + AutoZoomMode, + ContentReadyEvent, + CustomCommandEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemDblClickEvent, + OptionChangedEvent, + RequestEditOperationEvent, + RequestLayoutUpdateEvent, + SelectionChangedEvent, + Units, + DataLayoutType, + Command, + CustomCommand, + ShapeCategory, + ToolboxDisplayMode, + ShapeType, + ConnectorLineEnd, + ConnectorLineType, + PanelVisibility, +} from "devextreme/ui/diagram"; +import { + PageOrientation, + Orientation, + ToolbarItemLocation, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + contextMenu: Object as PropType>, + contextToolbox: Object as PropType>, + customShapes: Array as PropType>>, customShapeTemplate: {}, customShapeToolboxTemplate: {}, - defaultItemProperties: Object, + defaultItemProperties: Object as PropType>, disabled: Boolean, - edges: Object, - editing: Object, - elementAttr: Object, - export: Object, + edges: Object as PropType>, + editing: Object as PropType>, + elementAttr: Object as PropType>, + export: Object as PropType>, fullScreen: Boolean, - gridSize: [Number, Object], + gridSize: [Number, Object] as PropType>, hasChanges: Boolean, - height: {}, - historyToolbar: Object, - mainToolbar: Object, - nodes: Object, - onContentReady: Function, - onCustomCommand: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemDblClick: Function, - onOptionChanged: Function, - onRequestEditOperation: Function, - onRequestLayoutUpdate: Function, - onSelectionChanged: Function, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + historyToolbar: Object as PropType>, + mainToolbar: Object as PropType>, + nodes: Object as PropType>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCustomCommand: Function as PropType<((e: CustomCommandEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemDblClick: Function as PropType<((e: ItemDblClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onRequestEditOperation: Function as PropType<((e: RequestEditOperationEvent) => void)>, + onRequestLayoutUpdate: Function as PropType<((e: RequestLayoutUpdateEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, pageColor: String, - pageOrientation: {}, - pageSize: Object, - propertiesPanel: Object, + pageOrientation: String as PropType, + pageSize: Object as PropType>, + propertiesPanel: Object as PropType>, readOnly: Boolean, rtlEnabled: Boolean, showGrid: Boolean, simpleView: Boolean, snapToGrid: Boolean, - toolbox: Object, - units: {}, + toolbox: Object as PropType>, + units: String as PropType, useNativeScrolling: Boolean, - viewToolbar: Object, - viewUnits: {}, + viewToolbar: Object as PropType>, + viewUnits: String as PropType, visible: Boolean, - width: {}, - zoomLevel: [Number, Object] + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + zoomLevel: [Number, Object] as PropType> }, emits: { "update:isActive": null, @@ -197,8 +233,8 @@ const DxAutoLayoutConfig = { "update:type": null, }, props: { - orientation: {}, - type: {} + orientation: String as PropType, + type: String as PropType } }; @@ -220,9 +256,9 @@ const DxCommandConfig = { }, props: { icon: String, - items: Array, - location: {}, - name: {}, + items: Array as PropType>, + location: String as PropType, + name: String as PropType, text: String } }; @@ -246,9 +282,9 @@ const DxCommandItemConfig = { }, props: { icon: String, - items: Array, - location: {}, - name: {}, + items: Array as PropType>, + location: String as PropType, + name: String as PropType, text: String } }; @@ -288,7 +324,7 @@ const DxContextMenuConfig = { "update:enabled": null, }, props: { - commands: Array, + commands: Array as PropType>, enabled: Boolean } }; @@ -314,11 +350,11 @@ const DxContextToolboxConfig = { "update:width": null, }, props: { - category: {}, - displayMode: {}, + category: String as PropType, + displayMode: String as PropType, enabled: Boolean, shapeIconsPerRow: Number, - shapes: Array, + shapes: Array as PropType>, width: Number } }; @@ -382,9 +418,9 @@ const DxCustomShapeConfig = { backgroundImageTop: Number, backgroundImageUrl: String, backgroundImageWidth: Number, - baseType: {}, + baseType: String as PropType, category: String, - connectionPoints: Array, + connectionPoints: Array as PropType>>, defaultHeight: Number, defaultImageUrl: String, defaultText: String, @@ -439,15 +475,15 @@ const DxDefaultItemPropertiesConfig = { "update:textStyle": null, }, props: { - connectorLineEnd: {}, - connectorLineStart: {}, - connectorLineType: {}, - shapeMaxHeight: {}, - shapeMaxWidth: {}, - shapeMinHeight: {}, - shapeMinWidth: {}, - style: Object, - textStyle: Object + connectorLineEnd: String as PropType, + connectorLineStart: String as PropType, + connectorLineType: String as PropType, + shapeMaxHeight: Number, + shapeMaxWidth: Number, + shapeMinHeight: Number, + shapeMinWidth: Number, + style: Object as PropType>, + textStyle: Object as PropType> } }; @@ -479,22 +515,22 @@ const DxEdgesConfig = { "update:zIndexExpr": null, }, props: { - customDataExpr: {}, - dataSource: {}, - fromExpr: [Function, String], - fromLineEndExpr: {}, - fromPointIndexExpr: {}, - keyExpr: [Function, String], - lineTypeExpr: {}, - lockedExpr: {}, - pointsExpr: {}, - styleExpr: {}, - textExpr: {}, - textStyleExpr: {}, - toExpr: [Function, String], - toLineEndExpr: {}, - toPointIndexExpr: {}, - zIndexExpr: {} + customDataExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + fromExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + fromLineEndExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + fromPointIndexExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + keyExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + lineTypeExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + lockedExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + pointsExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + styleExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + textExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + textStyleExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + toExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + toLineEndExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + toPointIndexExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + zIndexExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string> } }; @@ -562,7 +598,7 @@ const DxGridSizeConfig = { "update:value": null, }, props: { - items: Array, + items: Array as PropType>, value: Number } }; @@ -585,11 +621,11 @@ const DxGroupConfig = { "update:title": null, }, props: { - category: {}, - commands: Array, - displayMode: {}, + category: String as PropType, + commands: Array as PropType>, + displayMode: String as PropType, expanded: Boolean, - shapes: Array, + shapes: Array as PropType>, title: String } }; @@ -612,7 +648,7 @@ const DxHistoryToolbarConfig = { "update:visible": null, }, props: { - commands: Array, + commands: Array as PropType>, visible: Boolean } }; @@ -641,9 +677,9 @@ const DxItemConfig = { props: { height: Number, icon: String, - items: Array, - location: {}, - name: {}, + items: Array as PropType>, + location: String as PropType, + name: String as PropType, text: String, width: Number } @@ -664,7 +700,7 @@ const DxMainToolbarConfig = { "update:visible": null, }, props: { - commands: Array, + commands: Array as PropType>, visible: Boolean } }; @@ -704,26 +740,26 @@ const DxNodesConfig = { "update:zIndexExpr": null, }, props: { - autoLayout: {}, + autoLayout: [String, Object] as PropType>, autoSizeEnabled: Boolean, - containerChildrenExpr: {}, - containerKeyExpr: [Function, String], - customDataExpr: {}, - dataSource: {}, - heightExpr: {}, - imageUrlExpr: {}, - itemsExpr: {}, - keyExpr: [Function, String], - leftExpr: {}, - lockedExpr: {}, - parentKeyExpr: {}, - styleExpr: {}, - textExpr: [Function, String], - textStyleExpr: {}, - topExpr: {}, - typeExpr: [Function, String], - widthExpr: {}, - zIndexExpr: {} + containerChildrenExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + containerKeyExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + customDataExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + heightExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + imageUrlExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + itemsExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + keyExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + leftExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + lockedExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + parentKeyExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + styleExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + textExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + textStyleExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + topExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + typeExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + widthExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string>, + zIndexExpr: [Function, String] as PropType<(((data: any, value: any) => any)) | string> } }; @@ -746,7 +782,7 @@ const DxPageSizeConfig = { }, props: { height: Number, - items: Array, + items: Array as PropType>>, width: Number } }; @@ -791,8 +827,8 @@ const DxPropertiesPanelConfig = { "update:visibility": null, }, props: { - tabs: Array, - visibility: {} + tabs: Array as PropType>>, + visibility: String as PropType } }; @@ -814,8 +850,8 @@ const DxTabConfig = { "update:title": null, }, props: { - commands: Array, - groups: Array, + commands: Array as PropType>, + groups: Array as PropType>>, title: String } }; @@ -840,7 +876,7 @@ const DxTabGroupConfig = { "update:title": null, }, props: { - commands: Array, + commands: Array as PropType>, title: String } }; @@ -866,11 +902,11 @@ const DxToolboxConfig = { "update:width": null, }, props: { - groups: Array, + groups: Array as PropType>>, shapeIconsPerRow: Number, showSearch: Boolean, - visibility: {}, - width: {} + visibility: String as PropType, + width: Number } }; @@ -895,10 +931,10 @@ const DxToolboxGroupConfig = { "update:title": null, }, props: { - category: {}, - displayMode: {}, + category: String as PropType, + displayMode: String as PropType, expanded: Boolean, - shapes: Array, + shapes: Array as PropType>, title: String } }; @@ -918,7 +954,7 @@ const DxViewToolbarConfig = { "update:visible": null, }, props: { - commands: Array, + commands: Array as PropType>, visible: Boolean } }; @@ -940,8 +976,8 @@ const DxZoomLevelConfig = { "update:value": null, }, props: { - items: Array, - value: {} + items: Array as PropType>, + value: Number } }; diff --git a/packages/devextreme-vue/src/draggable.ts b/packages/devextreme-vue/src/draggable.ts index 7a6b7d058262..3da778c340e0 100644 --- a/packages/devextreme-vue/src/draggable.ts +++ b/packages/devextreme-vue/src/draggable.ts @@ -1,6 +1,18 @@ -import Draggable, { Properties } from "devextreme/ui/draggable"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Draggable, { Properties } from "devextreme/ui/draggable"; +import { + DragDirection, +} from "devextreme/common"; +import { + DisposingEvent, + DragEndEvent, + DragMoveEvent, + DragStartEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/draggable"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | string>, data: {}, - dragDirection: {}, + dragDirection: String as PropType, dragTemplate: {}, - elementAttr: Object, - group: {}, + elementAttr: Object as PropType>, + group: String, handle: String, - height: {}, - onDisposing: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onInitialized: Function, - onOptionChanged: Function, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDragEnd: Function as PropType<((e: DragEndEvent) => void)>, + onDragMove: Function as PropType<((e: DragMoveEvent) => void)>, + onDragStart: Function as PropType<((e: DragStartEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, scrollSensitivity: Number, scrollSpeed: Number, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/drawer.ts b/packages/devextreme-vue/src/drawer.ts index 5843e7433e15..3ef1cab47451 100644 --- a/packages/devextreme-vue/src/drawer.ts +++ b/packages/devextreme-vue/src/drawer.ts @@ -1,6 +1,18 @@ -import Drawer, { Properties } from "devextreme/ui/drawer"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Drawer, { Properties } from "devextreme/ui/drawer"; +import { + event, +} from "devextreme/events/index"; +import { + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + OpenedStateMode, + PanelLocation, + RevealMode, +} from "devextreme/ui/drawer"; type AccessibleOptions = Pick boolean))>, disabled: Boolean, - elementAttr: Object, - height: {}, - hint: {}, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, maxSize: Number, minSize: Number, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, opened: Boolean, - openedStateMode: {}, - position: {}, - revealMode: {}, + openedStateMode: String as PropType, + position: String as PropType, + revealMode: String as PropType, rtlEnabled: Boolean, shading: Boolean, template: {}, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/drop-down-box.ts b/packages/devextreme-vue/src/drop-down-box.ts index 38a80bb2a725..1cbc58a4d2c8 100644 --- a/packages/devextreme-vue/src/drop-down-box.ts +++ b/packages/devextreme-vue/src/drop-down-box.ts @@ -1,6 +1,90 @@ -import DropDownBox, { Properties } from "devextreme/ui/drop_down_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DropDownBox, { Properties } from "devextreme/ui/drop_down_box"; +import DataSource from "devextreme/data/data_source"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + TextEditorButton, + LabelMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/drop_down_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, contentTemplate: {}, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayExpr: {}, - displayValueFormatter: Function, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + displayValueFormatter: Function as PropType<((value: string | Array) => string)>, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, fieldTemplate: {}, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, label: String, - labelMode: {}, + labelMode: String as PropType, maxLength: [Number, String], name: String, - onChange: Function, - onClosed: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, placeholder: String, @@ -123,19 +207,19 @@ const componentConfig = { rtlEnabled: Boolean, showClearButton: Boolean, showDropDownButton: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, valueChangeEvent: String, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -232,8 +316,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -255,8 +339,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -294,9 +378,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -318,8 +402,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -385,10 +469,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -399,28 +483,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -431,9 +515,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -462,7 +546,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -493,16 +577,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -524,8 +608,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -585,31 +669,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -632,13 +716,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -664,16 +748,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -696,7 +780,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -727,19 +811,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/drop-down-button.ts b/packages/devextreme-vue/src/drop-down-button.ts index 006f97bc68a0..c4c7fb7f3e99 100644 --- a/packages/devextreme-vue/src/drop-down-button.ts +++ b/packages/devextreme-vue/src/drop-down-button.ts @@ -1,6 +1,63 @@ -import DropDownButton, { Properties } from "devextreme/ui/drop_down_button"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import DropDownButton, { Properties } from "devextreme/ui/drop_down_button"; +import DataSource from "devextreme/data/data_source"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + dxDropDownButtonItem, + ButtonClickEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + OptionChangedEvent, + SelectionChangedEvent, +} from "devextreme/ui/drop_down_button"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ButtonStyle, + ButtonType, + HorizontalAlignment, + VerticalAlignment, + PositionAlignment, + Direction, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayExpr: {}, + displayExpr: [Function, String] as PropType<(((itemData: any) => string)) | string>, dropDownContentTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - icon: {}, - items: Array, + icon: String, + items: Array as PropType>, itemTemplate: {}, keyExpr: String, noDataText: String, - onButtonClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onOptionChanged: Function, - onSelectionChanged: Function, + onButtonClick: Function as PropType<((e: ButtonClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, opened: Boolean, rtlEnabled: Boolean, selectedItem: {}, selectedItemKey: [Number, String], showArrowIcon: Boolean, splitButton: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useItemTextAsTitle: Boolean, useSelectMode: Boolean, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapItemText: Boolean }, emits: { @@ -168,8 +225,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -191,8 +248,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -229,8 +286,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -296,10 +353,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -310,28 +367,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -342,9 +399,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -373,7 +430,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -404,16 +461,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -445,7 +502,7 @@ const DxItemConfig = { disabled: Boolean, html: String, icon: String, - onClick: Function, + onClick: Function as PropType<((e: ItemClickEvent) => void)>, template: {}, text: String, visible: Boolean @@ -467,8 +524,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -510,13 +567,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -542,16 +599,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -574,7 +631,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -605,19 +662,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/file-manager.ts b/packages/devextreme-vue/src/file-manager.ts index f36c576dd45f..25a67701950e 100644 --- a/packages/devextreme-vue/src/file-manager.ts +++ b/packages/devextreme-vue/src/file-manager.ts @@ -1,6 +1,55 @@ -import FileManager, { Properties } from "devextreme/ui/file_manager"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import FileManager, { Properties } from "devextreme/ui/file_manager"; +import FileSystemItem from "devextreme/file_management/file_system_item"; +import { + dxFileManagerContextMenu, + dxFileManagerDetailsColumn, + ContentReadyEvent, + ContextMenuItemClickEvent, + ContextMenuShowingEvent, + CurrentDirectoryChangedEvent, + DirectoryCreatedEvent, + DirectoryCreatingEvent, + DisposingEvent, + ErrorOccurredEvent, + FileUploadedEvent, + FileUploadingEvent, + FocusedItemChangedEvent, + InitializedEvent, + ItemCopiedEvent, + ItemCopyingEvent, + ItemDeletedEvent, + ItemDeletingEvent, + ItemDownloadingEvent, + ItemMovedEvent, + ItemMovingEvent, + ItemRenamedEvent, + ItemRenamingEvent, + OptionChangedEvent, + SelectedFileOpenedEvent, + SelectionChangedEvent, + ToolbarItemClickEvent, + dxFileManagerToolbar, + dxFileManagerContextMenuItem, + FileManagerPredefinedContextMenuItem, + FileManagerPredefinedToolbarItem, + FileManagerItemViewMode, + dxFileManagerToolbarItem, +} from "devextreme/ui/file_manager"; +import { + SingleOrMultiple, + HorizontalAlignment, + DataType, + SortOrder, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + contextMenu: Object as PropType>, currentPath: String, - currentPathKeys: Array, - customizeDetailColumns: Function, - customizeThumbnail: Function, + currentPathKeys: Array as PropType>, + customizeDetailColumns: Function as PropType<((columns: Array) => Array)>, + customizeThumbnail: Function as PropType<((fileSystemItem: FileSystemItem) => string)>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, fileSystemProvider: {}, focusedItemKey: String, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - itemView: Object, - notifications: Object, - onContentReady: Function, - onContextMenuItemClick: Function, - onContextMenuShowing: Function, - onCurrentDirectoryChanged: Function, - onDirectoryCreated: Function, - onDirectoryCreating: Function, - onDisposing: Function, - onErrorOccurred: Function, - onFileUploaded: Function, - onFileUploading: Function, - onFocusedItemChanged: Function, - onInitialized: Function, - onItemCopied: Function, - onItemCopying: Function, - onItemDeleted: Function, - onItemDeleting: Function, - onItemDownloading: Function, - onItemMoved: Function, - onItemMoving: Function, - onItemRenamed: Function, - onItemRenaming: Function, - onOptionChanged: Function, - onSelectedFileOpened: Function, - onSelectionChanged: Function, - onToolbarItemClick: Function, - permissions: Object, + itemView: Object as PropType>, + notifications: Object as PropType>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuItemClick: Function as PropType<((e: ContextMenuItemClickEvent) => void)>, + onContextMenuShowing: Function as PropType<((e: ContextMenuShowingEvent) => void)>, + onCurrentDirectoryChanged: Function as PropType<((e: CurrentDirectoryChangedEvent) => void)>, + onDirectoryCreated: Function as PropType<((e: DirectoryCreatedEvent) => void)>, + onDirectoryCreating: Function as PropType<((e: DirectoryCreatingEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onErrorOccurred: Function as PropType<((e: ErrorOccurredEvent) => void)>, + onFileUploaded: Function as PropType<((e: FileUploadedEvent) => void)>, + onFileUploading: Function as PropType<((e: FileUploadingEvent) => void)>, + onFocusedItemChanged: Function as PropType<((e: FocusedItemChangedEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemCopied: Function as PropType<((e: ItemCopiedEvent) => void)>, + onItemCopying: Function as PropType<((e: ItemCopyingEvent) => void)>, + onItemDeleted: Function as PropType<((e: ItemDeletedEvent) => void)>, + onItemDeleting: Function as PropType<((e: ItemDeletingEvent) => void)>, + onItemDownloading: Function as PropType<((e: ItemDownloadingEvent) => void)>, + onItemMoved: Function as PropType<((e: ItemMovedEvent) => void)>, + onItemMoving: Function as PropType<((e: ItemMovingEvent) => void)>, + onItemRenamed: Function as PropType<((e: ItemRenamedEvent) => void)>, + onItemRenaming: Function as PropType<((e: ItemRenamingEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectedFileOpened: Function as PropType<((e: SelectedFileOpenedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onToolbarItemClick: Function as PropType<((e: ToolbarItemClickEvent) => void)>, + permissions: Object as PropType>, rootFolderName: String, rtlEnabled: Boolean, - selectedItemKeys: Array, - selectionMode: {}, + selectedItemKeys: Array as PropType>, + selectionMode: String as PropType, tabIndex: Number, - toolbar: Object, - upload: Object, + toolbar: Object as PropType>, + upload: Object as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -217,17 +266,17 @@ const DxColumnConfig = { "update:width": null, }, props: { - alignment: {}, - caption: {}, - cssClass: {}, - dataField: {}, - dataType: {}, - hidingPriority: {}, - sortIndex: {}, - sortOrder: {}, + alignment: String as PropType, + caption: String, + cssClass: String, + dataField: String, + dataType: String as PropType, + hidingPriority: Number, + sortIndex: Number, + sortOrder: String as PropType, visible: Boolean, - visibleIndex: {}, - width: {} + visibleIndex: Number, + width: [Number, String] } }; @@ -245,7 +294,7 @@ const DxContextMenuConfig = { "update:items": null, }, props: { - items: Array + items: Array as PropType> } }; @@ -279,12 +328,12 @@ const DxContextMenuItemConfig = { closeMenuOnClick: Boolean, disabled: Boolean, icon: String, - items: Array, - name: {}, + items: Array as PropType>, + name: String as PropType, selectable: Boolean, selected: Boolean, text: String, - visible: {} + visible: Boolean } }; @@ -302,7 +351,7 @@ const DxDetailsConfig = { "update:columns": null, }, props: { - columns: Array + columns: Array as PropType> } }; @@ -332,17 +381,17 @@ const DxFileSelectionItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, icon: String, - locateInMenu: {}, - location: {}, - name: {}, + locateInMenu: String as PropType, + location: String as PropType, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, text: String, - visible: {}, - widget: {} + visible: Boolean, + widget: String as PropType } }; @@ -377,20 +426,20 @@ const DxItemConfig = { props: { beginGroup: Boolean, closeMenuOnClick: Boolean, - cssClass: {}, + cssClass: String, disabled: Boolean, icon: String, - items: Array, - locateInMenu: {}, - location: {}, - name: {}, + items: Array as PropType>, + locateInMenu: String as PropType, + location: String as PropType, + name: String as PropType, options: {}, selectable: Boolean, selected: Boolean, - showText: {}, + showText: String as PropType, text: String, - visible: {}, - widget: {} + visible: Boolean, + widget: String as PropType } }; @@ -411,8 +460,8 @@ const DxItemViewConfig = { "update:showParentFolder": null, }, props: { - details: Object, - mode: {}, + details: Object as PropType>, + mode: String as PropType, showFolders: Boolean, showParentFolder: Boolean } @@ -483,8 +532,8 @@ const DxToolbarConfig = { "update:items": null, }, props: { - fileSelectionItems: Array, - items: Array + fileSelectionItems: Array as PropType>, + items: Array as PropType> } }; @@ -516,17 +565,17 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, icon: String, - locateInMenu: {}, - location: {}, - name: {}, + locateInMenu: String as PropType, + location: String as PropType, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, text: String, - visible: {}, - widget: {} + visible: Boolean, + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/file-uploader.ts b/packages/devextreme-vue/src/file-uploader.ts index 9ebdf7f568a0..47055b58a2f5 100644 --- a/packages/devextreme-vue/src/file-uploader.ts +++ b/packages/devextreme-vue/src/file-uploader.ts @@ -1,6 +1,29 @@ -import FileUploader, { Properties } from "devextreme/ui/file_uploader"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import FileUploader, { Properties } from "devextreme/ui/file_uploader"; +import UploadInfo from "devextreme/file_management/upload_info"; +import { + BeforeSendEvent, + ContentReadyEvent, + DisposingEvent, + DropZoneEnterEvent, + DropZoneLeaveEvent, + FilesUploadedEvent, + InitializedEvent, + OptionChangedEvent, + ProgressEvent, + UploadAbortedEvent, + UploadedEvent, + UploadErrorEvent, + UploadStartedEvent, + ValueChangedEvent, + UploadHttpMethod, + FileUploadMode, +} from "devextreme/ui/file_uploader"; +import { + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick any)>, accept: String, - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, allowCanceling: Boolean, - allowedFileExtensions: Array, + allowedFileExtensions: Array as PropType>, chunkSize: Number, dialogTrigger: {}, disabled: Boolean, dropZone: {}, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, invalidFileExtensionMessage: String, @@ -101,20 +124,20 @@ const componentConfig = { minFileSize: Number, multiple: Boolean, name: String, - onBeforeSend: Function, - onContentReady: Function, - onDisposing: Function, - onDropZoneEnter: Function, - onDropZoneLeave: Function, - onFilesUploaded: Function, - onInitialized: Function, - onOptionChanged: Function, - onProgress: Function, - onUploadAborted: Function, - onUploaded: Function, - onUploadError: Function, - onUploadStarted: Function, - onValueChanged: Function, + onBeforeSend: Function as PropType<((e: BeforeSendEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDropZoneEnter: Function as PropType<((e: DropZoneEnterEvent) => void)>, + onDropZoneLeave: Function as PropType<((e: DropZoneLeaveEvent) => void)>, + onFilesUploaded: Function as PropType<((e: FilesUploadedEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onProgress: Function as PropType<((e: ProgressEvent) => void)>, + onUploadAborted: Function as PropType<((e: UploadAbortedEvent) => void)>, + onUploaded: Function as PropType<((e: UploadedEvent) => void)>, + onUploadError: Function as PropType<((e: UploadErrorEvent) => void)>, + onUploadStarted: Function as PropType<((e: UploadStartedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, progress: Number, readOnly: Boolean, readyToUploadMessage: String, @@ -124,21 +147,21 @@ const componentConfig = { tabIndex: Number, uploadAbortedMessage: String, uploadButtonText: String, - uploadChunk: Function, + uploadChunk: Function as PropType<((file: any, uploadInfo: UploadInfo) => any)>, uploadCustomData: {}, uploadedMessage: String, uploadFailedMessage: String, - uploadFile: Function, + uploadFile: Function as PropType<((file: any, progressCallback: (() => void)) => any)>, uploadHeaders: {}, - uploadMethod: {}, - uploadMode: {}, + uploadMethod: String as PropType, + uploadMode: String as PropType, uploadUrl: String, validationError: {}, - validationErrors: Array, - validationStatus: {}, - value: Array, + validationErrors: Array as PropType>, + validationStatus: String as PropType, + value: Array as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/filter-builder.ts b/packages/devextreme-vue/src/filter-builder.ts index 4661aff08347..4d5f6be6e0a9 100644 --- a/packages/devextreme-vue/src/filter-builder.ts +++ b/packages/devextreme-vue/src/filter-builder.ts @@ -1,6 +1,33 @@ -import FilterBuilder, { Properties } from "devextreme/ui/filter_builder"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import FilterBuilder, { Properties } from "devextreme/ui/filter_builder"; +import { + dxFilterBuilderCustomOperation, + dxFilterBuilderField, + GroupOperation, + ContentReadyEvent, + DisposingEvent, + EditorPreparedEvent, + EditorPreparingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, + FilterBuilderOperation, +} from "devextreme/ui/filter_builder"; +import { + DataType, + Format as CommonFormat, +} from "devextreme/common"; +import { + Format, +} from "devextreme/localization"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, disabled: Boolean, - elementAttr: Object, - fields: Array, - filterOperationDescriptions: Object, + elementAttr: Object as PropType>, + fields: Array as PropType>, + filterOperationDescriptions: Object as PropType>, focusStateEnabled: Boolean, - groupOperationDescriptions: Object, - groupOperations: Array, - height: {}, - hint: {}, + groupOperationDescriptions: Object as PropType>, + groupOperations: Array as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - maxGroupLevel: {}, - onContentReady: Function, - onDisposing: Function, - onEditorPrepared: Function, - onEditorPreparing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + maxGroupLevel: Number, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEditorPrepared: Function as PropType<((e: EditorPreparedEvent) => void)>, + onEditorPreparing: Function as PropType<((e: EditorPreparingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, rtlEnabled: Boolean, tabIndex: Number, - value: [Array, Function, String], + value: [Array, Function, String] as PropType | ((() => any)) | string>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -134,14 +161,14 @@ const DxCustomOperationConfig = { "update:name": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataTypes: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, field: dxFilterBuilderField) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { field: dxFilterBuilderField, value: string | number | Date, valueText: string }) => string)>, + dataTypes: Array as PropType>, editorTemplate: {}, hasValue: Boolean, - icon: {}, - name: {} + icon: String, + name: String } }; @@ -171,18 +198,18 @@ const DxFieldConfig = { "update:trueText": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { value: string | number | Date, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, editorOptions: {}, editorTemplate: {}, falseText: String, - filterOperations: Array, - format: {}, - lookup: Object, - name: {}, + filterOperations: Array as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + lookup: Object as PropType>, + name: String, trueText: String } }; @@ -252,10 +279,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -300,9 +327,9 @@ const DxLookupConfig = { }, props: { allowClearing: Boolean, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + dataSource: [Array, Object] as PropType | DataSourceOptions | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: [Function, String] as PropType<(((data: any) => string | number | boolean)) | string> } }; diff --git a/packages/devextreme-vue/src/form.ts b/packages/devextreme-vue/src/form.ts index de7bd15d3c55..7e04351738da 100644 --- a/packages/devextreme-vue/src/form.ts +++ b/packages/devextreme-vue/src/form.ts @@ -1,6 +1,69 @@ -import Form, { Properties } from "devextreme/ui/form"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Form, { Properties } from "devextreme/ui/form"; +import DataSource from "devextreme/data/data_source"; +import { + Mode, + ValidationRuleType, + HorizontalAlignment, + VerticalAlignment, + ButtonStyle, + ButtonType, + ComparisonOperator, + TabsIconPosition, + TabsStyle, + Position, +} from "devextreme/common"; +import { + dxFormSimpleItem, + dxFormGroupItem, + dxFormTabbedItem, + dxFormEmptyItem, + dxFormButtonItem, + LabelLocation, + FormLabelMode, + ContentReadyEvent, + DisposingEvent, + EditorEnterKeyEvent, + FieldDataChangedEvent, + InitializedEvent, + OptionChangedEvent, + FormItemType, + FormItemComponent, +} from "devextreme/ui/form"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + dxTabPanelOptions, + dxTabPanelItem, + ContentReadyEvent as TabPanelContentReadyEvent, + DisposingEvent as TabPanelDisposingEvent, + InitializedEvent as TabPanelInitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent as TabPanelOptionChangedEvent, + SelectionChangedEvent, + SelectionChangingEvent, + TitleClickEvent, + TitleHoldEvent, + TitleRenderedEvent, +} from "devextreme/ui/tab_panel"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + colCountByScreen: Object as PropType>, + customizeItem: Function as PropType<((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void)>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, formData: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, - items: Array, - labelLocation: {}, - labelMode: {}, + items: Array as PropType>, + labelLocation: String as PropType, + labelMode: String as PropType, minColWidth: Number, - onContentReady: Function, - onDisposing: Function, - onEditorEnterKey: Function, - onFieldDataChanged: Function, - onInitialized: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEditorEnterKey: Function as PropType<((e: EditorEnterKeyEvent) => void)>, + onFieldDataChanged: Function as PropType<((e: FieldDataChangedEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, optionalMark: String, readOnly: Boolean, requiredMark: String, requiredMessage: String, rtlEnabled: Boolean, - screenByWidth: Function, + screenByWidth: Function as PropType<(() => void)>, scrollingEnabled: Boolean, showColonAfterLabel: Boolean, showOptionalMark: Boolean, showRequiredMark: Boolean, showValidationSummary: Boolean, tabIndex: Number, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -176,8 +239,8 @@ const DxAsyncRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => any)> } }; @@ -206,15 +269,15 @@ const DxButtonItemConfig = { "update:visibleIndex": null, }, props: { - buttonOptions: {}, - colSpan: {}, - cssClass: {}, - horizontalAlignment: {}, - itemType: {}, - name: {}, - verticalAlignment: {}, + buttonOptions: Object as PropType>, + colSpan: Number, + cssClass: String, + horizontalAlignment: String as PropType, + itemType: String as PropType, + name: String, + verticalAlignment: String as PropType, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -262,31 +325,31 @@ const DxButtonOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -306,10 +369,10 @@ const DxColCountByScreenConfig = { "update:xs": null, }, props: { - lg: {}, - md: {}, - sm: {}, - xs: {} + lg: Number, + md: Number, + sm: Number, + xs: Number } }; @@ -330,11 +393,11 @@ const DxCompareRuleConfig = { "update:type": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -362,8 +425,8 @@ const DxCustomRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; @@ -388,7 +451,7 @@ const DxEmailRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -414,12 +477,12 @@ const DxEmptyItemConfig = { "update:visibleIndex": null, }, props: { - colSpan: {}, - cssClass: {}, - itemType: {}, - name: {}, + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -453,18 +516,18 @@ const DxGroupItemConfig = { }, props: { alignItemLabels: Boolean, - caption: {}, + caption: String, captionTemplate: {}, colCount: Number, - colCountByScreen: Object, - colSpan: {}, - cssClass: {}, - items: Array, - itemType: {}, - name: {}, + colCountByScreen: Object as PropType>, + colSpan: Number, + cssClass: String, + items: Array as PropType>, + itemType: String as PropType, + name: String, template: {}, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -521,36 +584,36 @@ const DxItemConfig = { props: { alignItemLabels: Boolean, badge: String, - buttonOptions: {}, - caption: {}, + buttonOptions: Object as PropType>, + caption: String, captionTemplate: {}, colCount: Number, - colCountByScreen: Object, - colSpan: {}, - cssClass: {}, - dataField: {}, + colCountByScreen: Object as PropType>, + colSpan: Number, + cssClass: String, + dataField: String, disabled: Boolean, editorOptions: {}, - editorType: {}, - helpText: {}, - horizontalAlignment: {}, + editorType: String as PropType, + helpText: String, + horizontalAlignment: String as PropType, html: String, icon: String, - isRequired: {}, - items: Array, - itemType: {}, - label: Object, - name: {}, - tabPanelOptions: {}, - tabs: Array, + isRequired: Boolean, + items: Array as PropType>, + itemType: String as PropType, + label: Object as PropType>, + name: String, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, tabTemplate: {}, template: {}, text: String, title: String, - validationRules: Array, - verticalAlignment: {}, + validationRules: Array as PropType>, + verticalAlignment: String as PropType, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -590,11 +653,11 @@ const DxLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - location: {}, + alignment: String as PropType, + location: String as PropType, showColon: Boolean, template: {}, - text: {}, + text: String, visible: Boolean } }; @@ -616,7 +679,7 @@ const DxNumericRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -643,7 +706,7 @@ const DxPatternRuleConfig = { ignoreEmptyValue: Boolean, message: String, pattern: [RegExp, String], - type: {} + type: String as PropType } }; @@ -674,7 +737,7 @@ const DxRangeRuleConfig = { message: String, min: [Date, Number, String], reevaluate: Boolean, - type: {} + type: String as PropType } }; @@ -699,7 +762,7 @@ const DxRequiredRuleConfig = { props: { message: String, trim: Boolean, - type: {} + type: String as PropType } }; @@ -733,20 +796,20 @@ const DxSimpleItemConfig = { "update:visibleIndex": null, }, props: { - colSpan: {}, - cssClass: {}, - dataField: {}, + colSpan: Number, + cssClass: String, + dataField: String, editorOptions: {}, - editorType: {}, - helpText: {}, - isRequired: {}, - itemType: {}, - label: Object, - name: {}, + editorType: String as PropType, + helpText: String, + isRequired: Boolean, + itemType: String as PropType, + label: Object as PropType>, + name: String, template: {}, - validationRules: Array, + validationRules: Array as PropType>, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -790,7 +853,7 @@ const DxStringLengthRuleConfig = { message: String, min: Number, trim: Boolean, - type: {} + type: String as PropType } }; @@ -821,15 +884,15 @@ const DxTabConfig = { }, props: { alignItemLabels: Boolean, - badge: {}, + badge: String, colCount: Number, - colCountByScreen: Object, + colCountByScreen: Object as PropType>, disabled: Boolean, - icon: {}, - items: Array, + icon: String, + items: Array as PropType>, tabTemplate: {}, template: {}, - title: {} + title: String } }; @@ -857,14 +920,14 @@ const DxTabbedItemConfig = { "update:visibleIndex": null, }, props: { - colSpan: {}, - cssClass: {}, - itemType: {}, - name: {}, - tabPanelOptions: {}, - tabs: Array, + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -933,38 +996,38 @@ const DxTabPanelOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, animationEnabled: Boolean, - bindingOptions: Object, - dataSource: {}, + bindingOptions: Object as PropType>, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - iconPosition: {}, + iconPosition: String as PropType, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, itemTitleTemplate: {}, loop: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - onSelectionChanging: Function, - onTitleClick: Function, - onTitleHold: Function, - onTitleRendered: Function, + onContentReady: Function as PropType<((e: TabPanelContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: TabPanelDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: TabPanelInitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: TabPanelOptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, + onTitleClick: Function as PropType<((e: TitleClickEvent) => void)>, + onTitleHold: Function as PropType<((e: TitleHoldEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, repaintChangesOnly: Boolean, rtlEnabled: Boolean, scrollByContent: Boolean, @@ -972,12 +1035,12 @@ const DxTabPanelOptionsConfig = { selectedIndex: Number, selectedItem: {}, showNavButtons: Boolean, - stylingMode: {}, + stylingMode: String as PropType, swipeEnabled: Boolean, tabIndex: Number, - tabsPosition: {}, + tabsPosition: String as PropType, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -1042,8 +1105,8 @@ const DxValidationRuleConfig = { "update:validationCallback": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, max: [Date, Number, String], message: String, @@ -1051,8 +1114,8 @@ const DxValidationRuleConfig = { pattern: [RegExp, String], reevaluate: Boolean, trim: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; diff --git a/packages/devextreme-vue/src/funnel.ts b/packages/devextreme-vue/src/funnel.ts index 5c462366e0b0..455f4b198833 100644 --- a/packages/devextreme-vue/src/funnel.ts +++ b/packages/devextreme-vue/src/funnel.ts @@ -1,6 +1,56 @@ -import Funnel, { Properties } from "devextreme/viz/funnel"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Funnel, { Properties } from "devextreme/viz/funnel"; +import DataSource from "devextreme/data/data_source"; +import { + FunnelAlgorithm, + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + HoverChangedEvent, + IncidentOccurredEvent, + InitializedEvent, + ItemClickEvent, + LegendClickEvent, + OptionChangedEvent, + SelectionChangedEvent, + dxFunnelItem, + FunnelLegendItem, +} from "devextreme/viz/funnel"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Palette, + PaletteExtensionMode, + ShiftLabelOverlap, + Theme, + DashStyle, + Font, + TextOverflow, + WordWrap, + HatchDirection, + LabelPosition, +} from "devextreme/common/charts"; +import { + SingleMultipleOrNone, + ExportFormat, + Format, + HorizontalAlignment, + VerticalEdge, + HorizontalEdge, + Position, + Orientation, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + algorithm: String as PropType, argumentField: String, colorField: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - export: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, hoverEnabled: Boolean, inverted: Boolean, - item: Object, - label: Object, - legend: Object, - loadingIndicator: Object, - margin: Object, + item: Object as PropType>, + label: Object as PropType>, + legend: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, neckHeight: Number, neckWidth: Number, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onHoverChanged: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onItemClick: Function, - onLegendClick: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - palette: {}, - paletteExtensionMode: {}, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onHoverChanged: Function as PropType<((e: HoverChangedEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onLegendClick: Function as PropType<((e: LegendClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, pathModified: Boolean, redrawOnResize: Boolean, - resolveLabelOverlapping: {}, + resolveLabelOverlapping: String as PropType, rtlEnabled: Boolean, - selectionMode: {}, - size: Object, + selectionMode: String as PropType, + size: Object as PropType>, sortData: Boolean, - theme: {}, - title: [Object, String], - tooltip: Object, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, valueField: String }, emits: { @@ -205,12 +255,12 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, - visible: {}, - width: {} + dashStyle: String as PropType, + opacity: Number, + visible: Boolean, + width: Number } }; @@ -230,7 +280,7 @@ const DxConnectorConfig = { "update:width": null, }, props: { - color: {}, + color: String, opacity: Number, visible: Boolean, width: Number @@ -259,10 +309,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -310,10 +360,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -339,15 +389,15 @@ const DxFunnelTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -374,11 +424,11 @@ const DxFunnelTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -401,7 +451,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -422,8 +472,8 @@ const DxHoverStyleConfig = { "update:hatching": null, }, props: { - border: Object, - hatching: Object + border: Object as PropType>, + hatching: Object as PropType> } }; @@ -447,9 +497,9 @@ const DxItemConfig = { "update:selectionStyle": null, }, props: { - border: Object, - hoverStyle: Object, - selectionStyle: Object + border: Object as PropType>, + hoverStyle: Object as PropType>, + selectionStyle: Object as PropType> } }; @@ -474,9 +524,9 @@ const DxItemBorderConfig = { "update:width": null, }, props: { - color: {}, - visible: {}, - width: {} + color: String, + visible: Boolean, + width: Number } }; @@ -506,18 +556,18 @@ const DxLabelConfig = { }, props: { backgroundColor: String, - border: Object, - connector: Object, - customizeText: Function, - font: Object, - format: {}, - horizontalAlignment: {}, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((itemInfo: { item: dxFunnelItem, percent: number, percentText: string, value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + horizontalAlignment: String as PropType, horizontalOffset: Number, - position: {}, + position: String as PropType, showForZeroValues: Boolean, - textOverflow: {}, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -545,7 +595,7 @@ const DxLabelBorderConfig = { }, props: { color: String, - dashStyle: {}, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -585,27 +635,27 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - itemsAlignment: {}, - itemTextPosition: {}, - margin: [Number, Object], + customizeHint: Function as PropType<((itemInfo: { item: dxFunnelItem, text: string }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((itemInfo: { item: dxFunnelItem, text: string }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + itemsAlignment: String as PropType, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, rowCount: Number, rowItemSpacing: Number, - title: [Object, String], - verticalAlignment: {}, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -638,8 +688,8 @@ const DxLegendBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -664,13 +714,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -695,7 +745,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -723,7 +773,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -769,8 +819,8 @@ const DxSelectionStyleConfig = { "update:hatching": null, }, props: { - border: Object, - hatching: Object + border: Object as PropType>, + hatching: Object as PropType> } }; @@ -818,8 +868,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -840,11 +890,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -872,15 +922,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Object, Number], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Object, Number] as PropType | number>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -918,20 +968,20 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((info: { item: dxFunnelItem, percent: number, percentText: string, value: number, valueText: string }) => Record)>, enabled: Boolean, - font: Object, - format: {}, - opacity: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -960,8 +1010,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } diff --git a/packages/devextreme-vue/src/gallery.ts b/packages/devextreme-vue/src/gallery.ts index 3b1aed4ea46b..d5430067f7b2 100644 --- a/packages/devextreme-vue/src/gallery.ts +++ b/packages/devextreme-vue/src/gallery.ts @@ -1,7 +1,27 @@ export { ExplicitTypes } from "devextreme/ui/gallery"; -import Gallery, { Properties } from "devextreme/ui/gallery"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Gallery, { Properties } from "devextreme/ui/gallery"; +import DataSource from "devextreme/data/data_source"; +import { + dxGalleryItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + SelectionChangedEvent, +} from "devextreme/ui/gallery"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, indicatorEnabled: Boolean, - initialItemWidth: {}, + initialItemWidth: Number, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, loop: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, rtlEnabled: Boolean, selectedIndex: Number, selectedItem: {}, @@ -87,7 +107,7 @@ const componentConfig = { swipeEnabled: Boolean, tabIndex: Number, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapAround: Boolean }, emits: { diff --git a/packages/devextreme-vue/src/gantt.ts b/packages/devextreme-vue/src/gantt.ts index df30b05a2f39..9be6cc9e97a9 100644 --- a/packages/devextreme-vue/src/gantt.ts +++ b/packages/devextreme-vue/src/gantt.ts @@ -1,6 +1,91 @@ -import Gantt, { Properties } from "devextreme/ui/gantt"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Gantt, { Properties } from "devextreme/ui/gantt"; +import DataSource from "devextreme/data/data_source"; +import { + dxGanttColumn, + dxGanttContextMenu, + dxGanttFilterRow, + dxGanttHeaderFilter, + ContentReadyEvent, + ContextMenuPreparingEvent, + CustomCommandEvent, + DependencyDeletedEvent, + DependencyDeletingEvent, + DependencyInsertedEvent, + DependencyInsertingEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ResourceAssignedEvent, + ResourceAssigningEvent, + ResourceDeletedEvent, + ResourceDeletingEvent, + ResourceInsertedEvent, + ResourceInsertingEvent, + ResourceManagerDialogShowingEvent, + ResourceUnassignedEvent, + ResourceUnassigningEvent, + ScaleCellPreparedEvent, + SelectionChangedEvent, + TaskClickEvent, + TaskDblClickEvent, + TaskDeletedEvent, + TaskDeletingEvent, + TaskEditDialogShowingEvent, + TaskInsertedEvent, + TaskInsertingEvent, + TaskMovingEvent, + TaskUpdatedEvent, + TaskUpdatingEvent, + GanttScaleType, + dxGanttSorting, + dxGanttStripLine, + GanttTaskTitlePosition, + dxGanttToolbar, + dxGanttContextMenuItem, + GanttPredefinedContextMenuItem, + dxGanttFilterRowOperationDescriptions, + dxGanttHeaderFilterTexts, + GanttPredefinedToolbarItem, + dxGanttToolbarItem, +} from "devextreme/ui/gantt"; +import { + FirstDayOfWeek, + HorizontalAlignment, + DataType, + Format as CommonFormat, + SortOrder, + SearchMode, + ToolbarItemLocation, + ToolbarItemComponent, + SingleMultipleOrNone, +} from "devextreme/common"; +import { + FilterOperation, + FilterType, + SelectedFilterOperation, + HeaderFilterGroupInterval, + ColumnHeaderFilterSearchConfig, + HeaderFilterSearchConfig, +} from "devextreme/common/grids"; +import { + Format, +} from "devextreme/localization"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxContextMenuItem, +} from "devextreme/ui/context_menu"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + contextMenu: Object as PropType>, + dependencies: Object as PropType>, disabled: Boolean, - editing: Object, - elementAttr: Object, + editing: Object as PropType>, + elementAttr: Object as PropType>, endDateRange: Date, - filterRow: Object, - firstDayOfWeek: {}, + filterRow: Object as PropType>, + firstDayOfWeek: Number as PropType, focusStateEnabled: Boolean, - headerFilter: Object, - height: {}, - hint: {}, + headerFilter: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - onContentReady: Function, - onContextMenuPreparing: Function, - onCustomCommand: Function, - onDependencyDeleted: Function, - onDependencyDeleting: Function, - onDependencyInserted: Function, - onDependencyInserting: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onResourceAssigned: Function, - onResourceAssigning: Function, - onResourceDeleted: Function, - onResourceDeleting: Function, - onResourceInserted: Function, - onResourceInserting: Function, - onResourceManagerDialogShowing: Function, - onResourceUnassigned: Function, - onResourceUnassigning: Function, - onScaleCellPrepared: Function, - onSelectionChanged: Function, - onTaskClick: Function, - onTaskDblClick: Function, - onTaskDeleted: Function, - onTaskDeleting: Function, - onTaskEditDialogShowing: Function, - onTaskInserted: Function, - onTaskInserting: Function, - onTaskMoving: Function, - onTaskUpdated: Function, - onTaskUpdating: Function, - resourceAssignments: Object, - resources: Object, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuPreparing: Function as PropType<((e: ContextMenuPreparingEvent) => void)>, + onCustomCommand: Function as PropType<((e: CustomCommandEvent) => void)>, + onDependencyDeleted: Function as PropType<((e: DependencyDeletedEvent) => void)>, + onDependencyDeleting: Function as PropType<((e: DependencyDeletingEvent) => void)>, + onDependencyInserted: Function as PropType<((e: DependencyInsertedEvent) => void)>, + onDependencyInserting: Function as PropType<((e: DependencyInsertingEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onResourceAssigned: Function as PropType<((e: ResourceAssignedEvent) => void)>, + onResourceAssigning: Function as PropType<((e: ResourceAssigningEvent) => void)>, + onResourceDeleted: Function as PropType<((e: ResourceDeletedEvent) => void)>, + onResourceDeleting: Function as PropType<((e: ResourceDeletingEvent) => void)>, + onResourceInserted: Function as PropType<((e: ResourceInsertedEvent) => void)>, + onResourceInserting: Function as PropType<((e: ResourceInsertingEvent) => void)>, + onResourceManagerDialogShowing: Function as PropType<((e: ResourceManagerDialogShowingEvent) => void)>, + onResourceUnassigned: Function as PropType<((e: ResourceUnassignedEvent) => void)>, + onResourceUnassigning: Function as PropType<((e: ResourceUnassigningEvent) => void)>, + onScaleCellPrepared: Function as PropType<((e: ScaleCellPreparedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onTaskClick: Function as PropType<((e: TaskClickEvent) => void)>, + onTaskDblClick: Function as PropType<((e: TaskDblClickEvent) => void)>, + onTaskDeleted: Function as PropType<((e: TaskDeletedEvent) => void)>, + onTaskDeleting: Function as PropType<((e: TaskDeletingEvent) => void)>, + onTaskEditDialogShowing: Function as PropType<((e: TaskEditDialogShowingEvent) => void)>, + onTaskInserted: Function as PropType<((e: TaskInsertedEvent) => void)>, + onTaskInserting: Function as PropType<((e: TaskInsertingEvent) => void)>, + onTaskMoving: Function as PropType<((e: TaskMovingEvent) => void)>, + onTaskUpdated: Function as PropType<((e: TaskUpdatedEvent) => void)>, + onTaskUpdating: Function as PropType<((e: TaskUpdatingEvent) => void)>, + resourceAssignments: Object as PropType>, + resources: Object as PropType>, rootValue: {}, - scaleType: {}, - scaleTypeRange: Object, + scaleType: String as PropType, + scaleTypeRange: Object as PropType>, selectedRowKey: {}, showDependencies: Boolean, showResources: Boolean, showRowLines: Boolean, - sorting: Object, + sorting: Object as PropType>, startDateRange: Date, - stripLines: Array, + stripLines: Array as PropType>, tabIndex: Number, taskContentTemplate: {}, taskListWidth: Number, taskProgressTooltipContentTemplate: {}, - tasks: Object, + tasks: Object as PropType>, taskTimeTooltipContentTemplate: {}, - taskTitlePosition: {}, + taskTitlePosition: String as PropType, taskTooltipContentTemplate: {}, - toolbar: Object, - validation: Object, + toolbar: Object as PropType>, + validation: Object as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -304,38 +389,38 @@ const DxColumnConfig = { "update:width": null, }, props: { - alignment: {}, + alignment: String as PropType, allowFiltering: Boolean, allowHeaderFiltering: Boolean, allowSorting: Boolean, - calculateCellValue: Function, - calculateDisplayValue: [Function, String], - calculateFilterExpression: Function, - calculateSortValue: [Function, String], - caption: {}, + calculateCellValue: Function as PropType<((rowData: any) => any)>, + calculateDisplayValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string | null, target: string) => string | (() => any) | Array)>, + calculateSortValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + caption: String, cellTemplate: {}, - cssClass: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + cssClass: String, + customizeText: Function as PropType<((cellInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, encodeHtml: Boolean, falseText: String, - filterOperations: Array, - filterType: {}, + filterOperations: Array as PropType>, + filterType: String as PropType, filterValue: {}, - filterValues: Array, - format: {}, + filterValues: Array as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, headerCellTemplate: {}, - headerFilter: Object, - minWidth: {}, - selectedFilterOperation: {}, - sortIndex: {}, - sortingMethod: {}, - sortOrder: {}, + headerFilter: Object as PropType>, + minWidth: Number, + selectedFilterOperation: String as PropType, + sortIndex: Number, + sortingMethod: Function as PropType<((value1: any, value2: any) => number)>, + sortOrder: String as PropType, trueText: String, visible: Boolean, - visibleIndex: {}, - width: {} + visibleIndex: Number, + width: [Number, String] } }; @@ -367,12 +452,12 @@ const DxColumnHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, - width: {} + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, + width: [Number, String] } }; @@ -399,8 +484,8 @@ const DxColumnHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -420,7 +505,7 @@ const DxContextMenuConfig = { }, props: { enabled: Boolean, - items: Array + items: Array as PropType> } }; @@ -455,8 +540,8 @@ const DxContextMenuItemConfig = { closeMenuOnClick: Boolean, disabled: Boolean, icon: String, - items: Array, - name: {}, + items: Array as PropType>, + name: String as PropType, selectable: Boolean, selected: Boolean, template: {}, @@ -483,11 +568,11 @@ const DxDependenciesConfig = { "update:typeExpr": null, }, props: { - dataSource: {}, - keyExpr: [Function, String], - predecessorIdExpr: [Function, String], - successorIdExpr: [Function, String], - typeExpr: [Function, String] + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + predecessorIdExpr: [Function, String] as PropType<((() => void)) | string>, + successorIdExpr: [Function, String] as PropType<((() => void)) | string>, + typeExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -547,7 +632,7 @@ const DxFilterRowConfig = { props: { betweenEndText: String, betweenStartText: String, - operationDescriptions: Object, + operationDescriptions: Object as PropType>, resetOperationText: String, showAllText: String, showOperationChooser: Boolean, @@ -577,10 +662,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -608,9 +693,9 @@ const DxGanttHeaderFilterConfig = { allowSearch: Boolean, allowSelectAll: Boolean, height: Number, - search: Object, + search: Object as PropType>, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, width: Number } @@ -639,7 +724,7 @@ const DxGanttHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, + mode: String as PropType, timeout: Number } }; @@ -669,15 +754,15 @@ const DxHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, - width: {} + width: [Number, String] } }; @@ -719,23 +804,23 @@ const DxItemConfig = { props: { beginGroup: Boolean, closeMenuOnClick: Boolean, - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, icon: String, - items: Array, - locateInMenu: {}, - location: {}, + items: Array as PropType>, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, selectable: Boolean, selected: Boolean, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -793,10 +878,10 @@ const DxResourceAssignmentsConfig = { "update:taskIdExpr": null, }, props: { - dataSource: {}, - keyExpr: [Function, String], - resourceIdExpr: [Function, String], - taskIdExpr: [Function, String] + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + resourceIdExpr: [Function, String] as PropType<((() => void)) | string>, + taskIdExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -816,10 +901,10 @@ const DxResourcesConfig = { "update:textExpr": null, }, props: { - colorExpr: [Function, String], - dataSource: {}, - keyExpr: [Function, String], - textExpr: [Function, String] + colorExpr: [Function, String] as PropType<((() => void)) | string>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + textExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -837,8 +922,8 @@ const DxScaleTypeRangeConfig = { "update:min": null, }, props: { - max: {}, - min: {} + max: String as PropType, + min: String as PropType } }; @@ -861,8 +946,8 @@ const DxSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -887,7 +972,7 @@ const DxSortingConfig = { ascendingText: String, clearText: String, descendingText: String, - mode: {}, + mode: String as PropType, showSortIndexes: Boolean } }; @@ -908,10 +993,10 @@ const DxStripLineConfig = { "update:title": null, }, props: { - cssClass: {}, - end: {}, - start: {}, - title: {} + cssClass: String, + end: [Date, Function, Number, String] as PropType Date | number | string)) | number | string>, + start: [Date, Function, Number, String] as PropType Date | number | string)) | number | string>, + title: String } }; @@ -936,14 +1021,14 @@ const DxTasksConfig = { "update:titleExpr": null, }, props: { - colorExpr: [Function, String], - dataSource: {}, - endExpr: [Function, String], - keyExpr: [Function, String], - parentIdExpr: [Function, String], - progressExpr: [Function, String], - startExpr: [Function, String], - titleExpr: [Function, String] + colorExpr: [Function, String] as PropType<((() => void)) | string>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + endExpr: [Function, String] as PropType<((() => void)) | string>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + parentIdExpr: [Function, String] as PropType<((() => void)) | string>, + progressExpr: [Function, String] as PropType<((() => void)) | string>, + startExpr: [Function, String] as PropType<((() => void)) | string>, + titleExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -981,7 +1066,7 @@ const DxToolbarConfig = { "update:items": null, }, props: { - items: Array + items: Array as PropType> } }; @@ -1014,19 +1099,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/html-editor.ts b/packages/devextreme-vue/src/html-editor.ts index 7b38273f8eb5..ddff5eba478a 100644 --- a/packages/devextreme-vue/src/html-editor.ts +++ b/packages/devextreme-vue/src/html-editor.ts @@ -1,6 +1,70 @@ -import HtmlEditor, { Properties } from "devextreme/ui/html_editor"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import HtmlEditor, { Properties } from "devextreme/ui/html_editor"; +import UploadInfo from "devextreme/file_management/upload_info"; +import DataSource from "devextreme/data/data_source"; +import { + Converter, + dxHtmlEditorImageUpload, + dxHtmlEditorMediaResizing, + dxHtmlEditorMention, + ContentReadyEvent, + DisposingEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, + dxHtmlEditorTableContextMenu, + dxHtmlEditorTableResizing, + dxHtmlEditorToolbar, + dxHtmlEditorVariables, + HtmlEditorImageUploadMode, + dxHtmlEditorImageUploadTabItem, + HtmlEditorImageUploadTab, + dxHtmlEditorTableContextMenuItem, + HtmlEditorPredefinedContextMenuItem, + HtmlEditorPredefinedToolbarItem, + dxHtmlEditorToolbarItem, +} from "devextreme/ui/html_editor"; +import { + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + BeforeSendEvent, + ContentReadyEvent as FileUploaderContentReadyEvent, + DisposingEvent as FileUploaderDisposingEvent, + DropZoneEnterEvent, + DropZoneLeaveEvent, + FilesUploadedEvent, + InitializedEvent as FileUploaderInitializedEvent, + OptionChangedEvent as FileUploaderOptionChangedEvent, + ProgressEvent, + UploadAbortedEvent, + UploadedEvent, + UploadErrorEvent, + UploadStartedEvent, + ValueChangedEvent as FileUploaderValueChangedEvent, + UploadHttpMethod, + FileUploadMode, + dxFileUploaderOptions, +} from "devextreme/ui/file_uploader"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + customizeModules: Function as PropType<((config: any) => void)>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - imageUpload: Object, + imageUpload: Object as PropType>, isDirty: Boolean, isValid: Boolean, - mediaResizing: Object, - mentions: Array, + mediaResizing: Object as PropType>, + mentions: Array as PropType>, name: String, - onContentReady: Function, - onDisposing: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, - tableContextMenu: Object, - tableResizing: Object, - toolbar: Object, + tableContextMenu: Object as PropType>, + tableResizing: Object as PropType>, + toolbar: Object as PropType>, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, - variables: Object, + variables: Object as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -175,8 +239,8 @@ const DxConverterConfig = { "update:toHtml": null, }, props: { - fromHtml: Function, - toHtml: Function + fromHtml: Function as PropType<((value: string) => string)>, + toHtml: Function as PropType<((value: string) => string)> } }; @@ -257,21 +321,21 @@ const DxFileUploaderOptionsConfig = { "update:width": null, }, props: { - abortUpload: Function, + abortUpload: Function as PropType<((file: any, uploadInfo?: UploadInfo) => any)>, accept: String, - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, allowCanceling: Boolean, - allowedFileExtensions: Array, - bindingOptions: Object, + allowedFileExtensions: Array as PropType>, + bindingOptions: Object as PropType>, chunkSize: Number, dialogTrigger: {}, disabled: Boolean, dropZone: {}, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, invalidFileExtensionMessage: String, @@ -284,20 +348,20 @@ const DxFileUploaderOptionsConfig = { minFileSize: Number, multiple: Boolean, name: String, - onBeforeSend: Function, - onContentReady: Function, - onDisposing: Function, - onDropZoneEnter: Function, - onDropZoneLeave: Function, - onFilesUploaded: Function, - onInitialized: Function, - onOptionChanged: Function, - onProgress: Function, - onUploadAborted: Function, - onUploaded: Function, - onUploadError: Function, - onUploadStarted: Function, - onValueChanged: Function, + onBeforeSend: Function as PropType<((e: BeforeSendEvent) => void)>, + onContentReady: Function as PropType<((e: FileUploaderContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: FileUploaderDisposingEvent) => void)>, + onDropZoneEnter: Function as PropType<((e: DropZoneEnterEvent) => void)>, + onDropZoneLeave: Function as PropType<((e: DropZoneLeaveEvent) => void)>, + onFilesUploaded: Function as PropType<((e: FilesUploadedEvent) => void)>, + onInitialized: Function as PropType<((e: FileUploaderInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: FileUploaderOptionChangedEvent) => void)>, + onProgress: Function as PropType<((e: ProgressEvent) => void)>, + onUploadAborted: Function as PropType<((e: UploadAbortedEvent) => void)>, + onUploaded: Function as PropType<((e: UploadedEvent) => void)>, + onUploadError: Function as PropType<((e: UploadErrorEvent) => void)>, + onUploadStarted: Function as PropType<((e: UploadStartedEvent) => void)>, + onValueChanged: Function as PropType<((e: FileUploaderValueChangedEvent) => void)>, progress: Number, readOnly: Boolean, readyToUploadMessage: String, @@ -307,21 +371,21 @@ const DxFileUploaderOptionsConfig = { tabIndex: Number, uploadAbortedMessage: String, uploadButtonText: String, - uploadChunk: Function, + uploadChunk: Function as PropType<((file: any, uploadInfo: UploadInfo) => any)>, uploadCustomData: {}, uploadedMessage: String, uploadFailedMessage: String, - uploadFile: Function, + uploadFile: Function as PropType<((file: any, progressCallback: (() => void)) => any)>, uploadHeaders: {}, - uploadMethod: {}, - uploadMode: {}, + uploadMethod: String as PropType, + uploadMode: String as PropType, uploadUrl: String, validationError: {}, - validationErrors: Array, - validationStatus: {}, - value: Array, + validationErrors: Array as PropType>, + validationStatus: String as PropType, + value: Array as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -342,11 +406,11 @@ const DxImageUploadConfig = { "update:uploadUrl": null, }, props: { - fileUploaderOptions: Object, - fileUploadMode: {}, - tabs: Array, - uploadDirectory: {}, - uploadUrl: {} + fileUploaderOptions: Object as PropType>, + fileUploadMode: String as PropType, + tabs: Array as PropType>, + uploadDirectory: String, + uploadUrl: String } }; @@ -388,28 +452,28 @@ const DxItemConfig = { "update:widget": null, }, props: { - acceptedValues: Array, + acceptedValues: Array as PropType>, beginGroup: Boolean, closeMenuOnClick: Boolean, - cssClass: {}, + cssClass: String, disabled: Boolean, - formatName: {}, - formatValues: Array, + formatName: String as PropType, + formatValues: Array as PropType>, html: String, icon: String, - items: Array, - locateInMenu: {}, - location: {}, + items: Array as PropType>, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, selectable: Boolean, selected: Boolean, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -428,7 +492,7 @@ const DxMediaResizingConfig = { "update:enabled": null, }, props: { - allowedTargets: Array, + allowedTargets: Array as PropType>, enabled: Boolean } }; @@ -454,15 +518,15 @@ const DxMentionConfig = { "update:valueExpr": null, }, props: { - dataSource: {}, - displayExpr: [Function, String], + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, itemTemplate: {}, marker: String, minSearchLength: Number, - searchExpr: [Array, Function, String], + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, searchTimeout: Number, template: {}, - valueExpr: [Function, String] + valueExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -480,7 +544,7 @@ const DxTabConfig = { "update:name": null, }, props: { - name: {} + name: String as PropType } }; @@ -500,7 +564,7 @@ const DxTableContextMenuConfig = { }, props: { enabled: Boolean, - items: Array + items: Array as PropType> } }; @@ -535,8 +599,8 @@ const DxTableContextMenuItemConfig = { closeMenuOnClick: Boolean, disabled: Boolean, icon: String, - items: Array, - name: {}, + items: Array as PropType>, + name: String as PropType, selectable: Boolean, selected: Boolean, template: {}, @@ -583,7 +647,7 @@ const DxToolbarConfig = { }, props: { container: {}, - items: Array, + items: Array as PropType>, multiline: Boolean } }; @@ -620,22 +684,22 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - acceptedValues: Array, - cssClass: {}, + acceptedValues: Array as PropType>, + cssClass: String, disabled: Boolean, - formatName: {}, - formatValues: Array, + formatName: String as PropType, + formatValues: Array as PropType>, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -654,8 +718,8 @@ const DxVariablesConfig = { "update:escapeChar": null, }, props: { - dataSource: {}, - escapeChar: [Array, String] + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + escapeChar: [Array, String] as PropType | string> } }; diff --git a/packages/devextreme-vue/src/linear-gauge.ts b/packages/devextreme-vue/src/linear-gauge.ts index cc9e984515bd..2f0cbed6bd49 100644 --- a/packages/devextreme-vue/src/linear-gauge.ts +++ b/packages/devextreme-vue/src/linear-gauge.ts @@ -1,6 +1,46 @@ -import LinearGauge, { Properties } from "devextreme/viz/linear_gauge"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import LinearGauge, { Properties } from "devextreme/viz/linear_gauge"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, +} from "devextreme/viz/linear_gauge"; +import { + GaugeIndicator, +} from "devextreme/viz/gauges/base_gauge"; +import { + Theme, + AnimationEaseMode, + DashStyle, + Font, + LabelOverlap, + ChartsColor, + Palette, + PaletteExtensionMode, + TextOverflow, + WordWrap, +} from "devextreme/common/charts"; +import { + ExportFormat, + Format, + Orientation, + HorizontalAlignment, + VerticalAlignment, + HorizontalEdge, + VerticalEdge, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, containerBackgroundColor: String, disabled: Boolean, - elementAttr: Object, - export: Object, - geometry: Object, - loadingIndicator: Object, - margin: Object, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, + elementAttr: Object as PropType>, + export: Object as PropType>, + geometry: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, pathModified: Boolean, - rangeContainer: Object, + rangeContainer: Object as PropType>, redrawOnResize: Boolean, rtlEnabled: Boolean, - scale: Object, - size: Object, - subvalueIndicator: Object, - subvalues: Array, - theme: {}, - title: [Object, String], - tooltip: Object, - value: {}, - valueIndicator: Object + scale: Object as PropType>, + size: Object as PropType>, + subvalueIndicator: Object as PropType>, + subvalues: Array as PropType>, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, + value: Number, + valueIndicator: Object as PropType> }, emits: { "update:isActive": null, @@ -150,7 +190,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean } }; @@ -169,8 +209,8 @@ const DxBackgroundColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -192,8 +232,8 @@ const DxBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -213,8 +253,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -240,10 +280,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -291,10 +331,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -312,7 +352,7 @@ const DxGeometryConfig = { "update:orientation": null, }, props: { - orientation: {} + orientation: String as PropType } }; @@ -335,11 +375,11 @@ const DxLabelConfig = { "update:visible": null, }, props: { - customizeText: Function, - font: Object, - format: {}, + customizeText: Function as PropType<((scaleValue: { value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indentFromTick: Number, - overlappingBehavior: {}, + overlappingBehavior: String as PropType, useRangeColors: Boolean, visible: Boolean } @@ -366,7 +406,7 @@ const DxLoadingIndicatorConfig = { }, props: { backgroundColor: String, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -438,7 +478,7 @@ const DxRangeConfig = { "update:startValue": null, }, props: { - color: [Object, String], + color: [Object, String] as PropType>, endValue: Number, startValue: Number } @@ -468,14 +508,14 @@ const DxRangeContainerConfig = { "update:width": null, }, props: { - backgroundColor: [Object, String], - horizontalOrientation: {}, + backgroundColor: [Object, String] as PropType>, + horizontalOrientation: String as PropType, offset: Number, - palette: {}, - paletteExtensionMode: {}, - ranges: Array, - verticalOrientation: {}, - width: [Number, Object] + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, + ranges: Array as PropType>>, + verticalOrientation: String as PropType, + width: [Number, Object] as PropType> } }; @@ -509,19 +549,19 @@ const DxScaleConfig = { "update:verticalOrientation": null, }, props: { - allowDecimals: {}, - customMinorTicks: Array, - customTicks: Array, + allowDecimals: Boolean, + customMinorTicks: Array as PropType>, + customTicks: Array as PropType>, endValue: Number, - horizontalOrientation: {}, - label: Object, - minorTick: Object, - minorTickInterval: {}, + horizontalOrientation: String as PropType, + label: Object as PropType>, + minorTick: Object as PropType>, + minorTickInterval: Number, scaleDivisionFactor: Number, startValue: Number, - tick: Object, - tickInterval: {}, - verticalOrientation: {} + tick: Object as PropType>, + tickInterval: Number, + verticalOrientation: String as PropType } }; @@ -569,8 +609,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -591,11 +631,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -635,22 +675,22 @@ const DxSubvalueIndicatorConfig = { props: { arrowLength: Number, backgroundColor: String, - baseValue: {}, + baseValue: Number, beginAdaptingAtRadius: Number, - color: [Object, String], - horizontalOrientation: {}, + color: [Object, String] as PropType>, + horizontalOrientation: String as PropType, indentFromCenter: Number, length: Number, offset: Number, - palette: {}, + palette: [Array, String] as PropType | Palette>, secondColor: String, secondFraction: Number, size: Number, spindleGapSize: Number, spindleSize: Number, - text: Object, - type: String, - verticalOrientation: {}, + text: Object as PropType>, + type: String as PropType<"circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle">, + verticalOrientation: String as PropType, width: Number } }; @@ -675,9 +715,9 @@ const DxTextConfig = { "update:indent": null, }, props: { - customizeText: {}, - font: Object, - format: {}, + customizeText: Function as PropType<((indicatedValue: { value: number, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indent: Number } }; @@ -732,15 +772,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -778,21 +818,21 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((scaleValue: { value: number, valueText: string }) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -835,22 +875,22 @@ const DxValueIndicatorConfig = { props: { arrowLength: Number, backgroundColor: String, - baseValue: {}, + baseValue: Number, beginAdaptingAtRadius: Number, - color: [Object, String], - horizontalOrientation: {}, + color: [Object, String] as PropType>, + horizontalOrientation: String as PropType, indentFromCenter: Number, length: Number, offset: Number, - palette: {}, + palette: [Array, String] as PropType | Palette>, secondColor: String, secondFraction: Number, size: Number, spindleGapSize: Number, spindleSize: Number, - text: Object, - type: String, - verticalOrientation: {}, + text: Object as PropType>, + type: String as PropType<"circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle">, + verticalOrientation: String as PropType, width: Number } }; diff --git a/packages/devextreme-vue/src/list.ts b/packages/devextreme-vue/src/list.ts index f0c413dbc6bf..b7fbdc2d2d88 100644 --- a/packages/devextreme-vue/src/list.ts +++ b/packages/devextreme-vue/src/list.ts @@ -1,7 +1,100 @@ export { ExplicitTypes } from "devextreme/ui/list"; -import List, { Properties } from "devextreme/ui/list"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import List, { Properties } from "devextreme/ui/list"; +import DataSource from "devextreme/data/data_source"; +import { + dxListItem, + ItemDeleteMode, + ListMenuMode, + ContentReadyEvent, + DisposingEvent, + GroupRenderedEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemDeletedEvent, + ItemDeletingEvent, + ItemHoldEvent, + ItemRenderedEvent, + ItemReorderedEvent, + ItemSwipeEvent, + OptionChangedEvent, + PageLoadingEvent, + PullRefreshEvent, + ScrollEvent, + SelectAllValueChangedEvent, + SelectionChangedEvent, + SelectionChangingEvent, +} from "devextreme/ui/list"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxSortableOptions, + AddEvent, + DisposingEvent as SortableDisposingEvent, + DragChangeEvent, + DragEndEvent, + DragMoveEvent, + DragStartEvent, + InitializedEvent as SortableInitializedEvent, + OptionChangedEvent as SortableOptionChangedEvent, + RemoveEvent, + ReorderEvent, +} from "devextreme/ui/sortable"; +import { + PageLoadMode, + SearchMode, + SelectAllMode, + SingleMultipleAllOrNone, + ScrollbarMode, + TextEditorButtonLocation, + DragDirection, + DragHighlight, + Orientation, + ButtonStyle, + ButtonType, + TextBoxPredefinedButton, + TextEditorButton, + LabelMode, + MaskMode, + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; +import { + dxTextBoxOptions, + TextBoxType, + ChangeEvent, + ContentReadyEvent as TextBoxContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent as TextBoxDisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent as TextBoxInitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OptionChangedEvent as TextBoxOptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/text_box"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - displayExpr: {}, - elementAttr: Object, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, grouped: Boolean, groupTemplate: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, indicateLoading: Boolean, - itemDeleteMode: {}, - itemDragging: Object, + itemDeleteMode: String as PropType, + itemDragging: Object as PropType>, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, - keyExpr: [Function, String], - menuItems: Array, - menuMode: {}, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + menuItems: Array as PropType>>, + menuMode: String as PropType, nextButtonText: String, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onGroupRendered: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemDeleted: Function, - onItemDeleting: Function, - onItemHold: Function, - onItemRendered: Function, - onItemReordered: Function, - onItemSwipe: Function, - onOptionChanged: Function, - onPageLoading: Function, - onPullRefresh: Function, - onScroll: Function, - onSelectAllValueChanged: Function, - onSelectionChanged: Function, - onSelectionChanging: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onGroupRendered: Function as PropType<((e: GroupRenderedEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemDeleted: Function as PropType<((e: ItemDeletedEvent) => void)>, + onItemDeleting: Function as PropType<((e: ItemDeletingEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onItemReordered: Function as PropType<((e: ItemReorderedEvent) => void)>, + onItemSwipe: Function as PropType<((e: ItemSwipeEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPageLoading: Function as PropType<((e: PageLoadingEvent) => void)>, + onPullRefresh: Function as PropType<((e: PullRefreshEvent) => void)>, + onScroll: Function as PropType<((e: ScrollEvent) => void)>, + onSelectAllValueChanged: Function as PropType<((e: SelectAllValueChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, pageLoadingText: String, - pageLoadMode: {}, + pageLoadMode: String as PropType, pulledDownText: String, pullingDownText: String, pullRefreshEnabled: Boolean, @@ -143,24 +236,24 @@ const componentConfig = { scrollByContent: Boolean, scrollByThumb: Boolean, scrollingEnabled: Boolean, - searchEditorOptions: Object, + searchEditorOptions: Object as PropType | Record>, searchEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, - searchTimeout: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, + searchTimeout: Number, searchValue: String, - selectAllMode: {}, + selectAllMode: String as PropType, selectAllText: String, selectByClick: Boolean, - selectedItemKeys: Array, - selectedItems: Array, - selectionMode: {}, - showScrollbar: {}, + selectedItemKeys: Array as PropType>, + selectedItems: Array as PropType>, + selectionMode: String as PropType, + showScrollbar: String as PropType, showSelectionControls: Boolean, tabIndex: Number, useNativeScrolling: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -271,9 +364,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -379,35 +472,35 @@ const DxItemDraggingConfig = { allowDropInsideItem: Boolean, allowReordering: Boolean, autoScroll: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, boundary: {}, container: {}, - cursorOffset: [Object, String], + cursorOffset: [Object, String] as PropType | string>, data: {}, - dragDirection: {}, + dragDirection: String as PropType, dragTemplate: {}, - dropFeedbackMode: {}, - elementAttr: Object, + dropFeedbackMode: String as PropType, + elementAttr: Object as PropType>, filter: String, - group: {}, + group: String, handle: String, - height: {}, - itemOrientation: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + itemOrientation: String as PropType, moveItemOnDrop: Boolean, - onAdd: Function, - onDisposing: Function, - onDragChange: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onInitialized: Function, - onOptionChanged: Function, - onRemove: Function, - onReorder: Function, + onAdd: Function as PropType<((e: AddEvent) => void)>, + onDisposing: Function as PropType<((e: SortableDisposingEvent) => void)>, + onDragChange: Function as PropType<((e: DragChangeEvent) => void)>, + onDragEnd: Function as PropType<((e: DragEndEvent) => void)>, + onDragMove: Function as PropType<((e: DragMoveEvent) => void)>, + onDragStart: Function as PropType<((e: DragStartEvent) => void)>, + onInitialized: Function as PropType<((e: SortableInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: SortableOptionChangedEvent) => void)>, + onRemove: Function as PropType<((e: RemoveEvent) => void)>, + onReorder: Function as PropType<((e: ReorderEvent) => void)>, rtlEnabled: Boolean, scrollSensitivity: Number, scrollSpeed: Number, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -428,7 +521,7 @@ const DxMenuItemConfig = { "update:text": null, }, props: { - action: Function, + action: Function as PropType<((itemElement: any, itemData: any) => void)>, text: String } }; @@ -471,31 +564,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -567,62 +660,62 @@ const DxSearchEditorOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, - buttons: Array, + bindingOptions: Object as PropType>, + buttons: Array as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, + labelMode: String as PropType, mask: String, maskChar: String, maskInvalidMessage: String, maskRules: {}, maxLength: [Number, String], - mode: {}, + mode: String as PropType, name: String, - onChange: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onContentReady: Function as PropType<((e: TextBoxContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: TextBoxDisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: TextBoxInitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOptionChanged: Function as PropType<((e: TextBoxOptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, showClearButton: Boolean, - showMaskMode: {}, + showMaskMode: String as PropType, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useMaskedValue: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; diff --git a/packages/devextreme-vue/src/load-indicator.ts b/packages/devextreme-vue/src/load-indicator.ts index 3022f94679c0..7abf55946a3b 100644 --- a/packages/devextreme-vue/src/load-indicator.ts +++ b/packages/devextreme-vue/src/load-indicator.ts @@ -1,6 +1,13 @@ -import LoadIndicator, { Properties } from "devextreme/ui/load_indicator"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import LoadIndicator, { Properties } from "devextreme/ui/load_indicator"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/load_indicator"; type AccessibleOptions = Pick>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, indicatorSrc: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 24a55816fa9f..81ab0fece3d9 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -1,6 +1,36 @@ -import LoadPanel, { Properties } from "devextreme/ui/load_panel"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import LoadPanel, { Properties } from "devextreme/ui/load_panel"; +import { + event, +} from "devextreme/events/index"; +import { + ContentReadyEvent, + DisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent, + OptionChangedEvent, + ShowingEvent, + ShownEvent, +} from "devextreme/ui/load_panel"; +import { + PositionAlignment, + HorizontalAlignment, + VerticalAlignment, + Direction, +} from "devextreme/common"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, deferRendering: Boolean, delay: Number, focusStateEnabled: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, indicatorSrc: String, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, message: String, - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onShowing: Function, - onShown: Function, - position: {}, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, rtlEnabled: Boolean, shading: Boolean, shadingColor: String, showIndicator: Boolean, showPane: Boolean, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} }, emits: { @@ -147,8 +177,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -170,8 +200,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -208,8 +238,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -232,7 +262,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -263,16 +293,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -294,8 +324,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -337,13 +367,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -369,16 +399,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -401,7 +431,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts index 7dcea82a3fa6..6282034421b2 100644 --- a/packages/devextreme-vue/src/lookup.ts +++ b/packages/devextreme-vue/src/lookup.ts @@ -1,6 +1,81 @@ -import Lookup, { Properties } from "devextreme/ui/lookup"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Lookup, { Properties } from "devextreme/ui/lookup"; +import DataSource from "devextreme/data/data_source"; +import { + ApplyValueMode, + LabelMode, + PageLoadMode, + SimplifiedSearchMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopoverOptions, + ContentReadyEvent as PopoverContentReadyEvent, + DisposingEvent as PopoverDisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent as PopoverInitializedEvent, + OptionChangedEvent as PopoverOptionChangedEvent, + ShowingEvent, + ShownEvent, + TitleRenderedEvent, +} from "devextreme/ui/popover"; +import { + ClosedEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + OpenedEvent, + OptionChangedEvent, + PageLoadingEvent, + PullRefreshEvent, + ScrollEvent, + SelectionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/lookup"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, +} from "devextreme/events/index"; +import { + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, cancelButtonText: String, cleanSearchOnOpening: Boolean, clearButtonText: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayExpr: {}, - displayValue: {}, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + displayValue: String, dropDownCentered: Boolean, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, fieldTemplate: {}, focusStateEnabled: Boolean, fullScreen: Boolean, grouped: Boolean, groupTemplate: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, label: String, - labelMode: {}, + labelMode: String as PropType, minSearchLength: Number, name: String, nextButtonText: String, noDataText: String, - onClosed: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onOpened: Function, - onOptionChanged: Function, - onPageLoading: Function, - onPullRefresh: Function, - onScroll: Function, - onSelectionChanged: Function, - onValueChanged: Function, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPageLoading: Function as PropType<((e: PageLoadingEvent) => void)>, + onPullRefresh: Function as PropType<((e: PullRefreshEvent) => void)>, + onScroll: Function as PropType<((e: ScrollEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, pageLoadingText: String, - pageLoadMode: {}, + pageLoadMode: String as PropType, placeholder: String, pulledDownText: String, pullingDownText: String, @@ -150,8 +225,8 @@ const componentConfig = { refreshingText: String, rtlEnabled: Boolean, searchEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, searchPlaceholder: String, searchStartEvent: String, searchTimeout: Number, @@ -159,22 +234,22 @@ const componentConfig = { showCancelButton: Boolean, showClearButton: Boolean, showDataBeforeSearch: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useItemTextAsTitle: Boolean, useNativeScrolling: Boolean, usePopover: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, valueChangeEvent: String, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapItemText: Boolean }, emits: { @@ -292,8 +367,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -315,8 +390,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -353,8 +428,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -411,46 +486,46 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, disabled: Boolean, enableBodyScroll: Boolean, - height: [Function, Number, String], - hideEvent: {}, - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideEvent: [Object, String] as PropType | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: PopoverContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: PopoverDisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: PopoverInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: PopoverOptionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, + position: [String, Object] as PropType>, rtlEnabled: Boolean, shading: Boolean, shadingColor: String, showCloseButton: Boolean, - showEvent: {}, + showEvent: [Object, String] as PropType | string>, showTitle: Boolean, target: {}, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -481,7 +556,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -512,16 +587,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -543,8 +618,8 @@ const DxHideEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -588,8 +663,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -631,13 +706,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -663,16 +738,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -690,8 +765,8 @@ const DxShowEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -714,7 +789,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -745,19 +820,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/map.ts b/packages/devextreme-vue/src/map.ts index 221e4c6ea616..c13c988a72c4 100644 --- a/packages/devextreme-vue/src/map.ts +++ b/packages/devextreme-vue/src/map.ts @@ -1,6 +1,21 @@ -import Map, { Properties } from "devextreme/ui/map"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Map, { Properties } from "devextreme/ui/map"; +import { + ClickEvent, + DisposingEvent, + InitializedEvent, + MarkerAddedEvent, + MarkerRemovedEvent, + OptionChangedEvent, + ReadyEvent, + RouteAddedEvent, + RouteRemovedEvent, + MapProvider, + MapType, + RouteMode, +} from "devextreme/ui/map"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | string>, autoAdjust: Boolean, - center: [Array, Object, String], + center: [Array, Object, String] as PropType | Record | string>, controls: Boolean, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: [Function, Number, String], - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, markerIconSrc: String, - markers: Array, - onClick: Function, - onDisposing: Function, - onInitialized: Function, - onMarkerAdded: Function, - onMarkerRemoved: Function, - onOptionChanged: Function, - onReady: Function, - onRouteAdded: Function, - onRouteRemoved: Function, - provider: {}, - providerConfig: Object, - routes: Array, + markers: Array as PropType>>, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onMarkerAdded: Function as PropType<((e: MarkerAddedEvent) => void)>, + onMarkerRemoved: Function as PropType<((e: MarkerRemovedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onReady: Function as PropType<((e: ReadyEvent) => void)>, + onRouteAdded: Function as PropType<((e: RouteAddedEvent) => void)>, + onRouteRemoved: Function as PropType<((e: RouteRemovedEvent) => void)>, + provider: String as PropType, + providerConfig: Object as PropType>, + routes: Array as PropType>>, rtlEnabled: Boolean, tabIndex: Number, - type: {}, + type: String as PropType, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, zoom: Number }, emits: { @@ -208,9 +223,9 @@ const DxMarkerConfig = { }, props: { iconSrc: String, - location: [Array, Object, String], - onClick: Function, - tooltip: [Object, String] + location: [Array, Object, String] as PropType | Record | string>, + onClick: Function as PropType<(() => void)>, + tooltip: [Object, String] as PropType | string> } }; @@ -256,8 +271,8 @@ const DxRouteConfig = { }, props: { color: String, - locations: Array, - mode: {}, + locations: Array as PropType>>, + mode: String as PropType, opacity: Number, weight: Number } diff --git a/packages/devextreme-vue/src/menu.ts b/packages/devextreme-vue/src/menu.ts index d0ffdc7c6132..ebd0e464128d 100644 --- a/packages/devextreme-vue/src/menu.ts +++ b/packages/devextreme-vue/src/menu.ts @@ -1,7 +1,50 @@ export { ExplicitTypes } from "devextreme/ui/menu"; -import Menu, { Properties } from "devextreme/ui/menu"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Menu, { Properties } from "devextreme/ui/menu"; +import DataSource from "devextreme/data/data_source"; +import { + dxMenuItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemRenderedEvent, + OptionChangedEvent, + SelectionChangedEvent, + SubmenuHiddenEvent, + SubmenuHidingEvent, + SubmenuShowingEvent, + SubmenuShownEvent, + SubmenuDirection, +} from "devextreme/ui/menu"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Orientation, + SingleOrNone, + SubmenuShowMode, + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, +} from "devextreme/common"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, cssClass: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - disabledExpr: [Function, String], - displayExpr: [Function, String], - elementAttr: Object, + disabledExpr: [Function, String] as PropType<((() => void)) | string>, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hideSubmenuOnMouseLeave: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - items: Array, - itemsExpr: [Function, String], + items: Array as PropType>, + itemsExpr: [Function, String] as PropType<((() => void)) | string>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - onSubmenuHidden: Function, - onSubmenuHiding: Function, - onSubmenuShowing: Function, - onSubmenuShown: Function, - orientation: {}, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onSubmenuHidden: Function as PropType<((e: SubmenuHiddenEvent) => void)>, + onSubmenuHiding: Function as PropType<((e: SubmenuHidingEvent) => void)>, + onSubmenuShowing: Function as PropType<((e: SubmenuShowingEvent) => void)>, + onSubmenuShown: Function as PropType<((e: SubmenuShownEvent) => void)>, + orientation: String as PropType, rtlEnabled: Boolean, selectByClick: Boolean, - selectedExpr: [Function, String], + selectedExpr: [Function, String] as PropType<((() => void)) | string>, selectedItem: {}, - selectionMode: {}, - showFirstSubmenuMode: {}, - showSubmenuMode: {}, - submenuDirection: {}, + selectionMode: String as PropType, + showFirstSubmenuMode: [Object, String] as PropType | SubmenuShowMode>, + showSubmenuMode: [Object, String] as PropType | SubmenuShowMode>, + submenuDirection: String as PropType, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -174,8 +217,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -197,8 +240,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -235,8 +278,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -278,7 +321,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -309,16 +352,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -354,8 +397,8 @@ const DxItemConfig = { closeMenuOnClick: Boolean, disabled: Boolean, icon: String, - items: Array, - linkAttr: Object, + items: Array as PropType>, + linkAttr: Object as PropType>, selectable: Boolean, selected: Boolean, template: {}, @@ -380,8 +423,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -423,13 +466,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -462,16 +505,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -489,8 +532,8 @@ const DxShowFirstSubmenuModeConfig = { "update:name": null, }, props: { - delay: [Number, Object], - name: {} + delay: [Number, Object] as PropType>, + name: String as PropType } }; @@ -511,8 +554,8 @@ const DxShowSubmenuModeConfig = { "update:name": null, }, props: { - delay: [Number, Object], - name: {} + delay: [Number, Object] as PropType>, + name: String as PropType } }; @@ -538,7 +581,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/multi-view.ts b/packages/devextreme-vue/src/multi-view.ts index 5989f4544700..579dcf15025d 100644 --- a/packages/devextreme-vue/src/multi-view.ts +++ b/packages/devextreme-vue/src/multi-view.ts @@ -1,7 +1,27 @@ export { ExplicitTypes } from "devextreme/ui/multi_view"; -import MultiView, { Properties } from "devextreme/ui/multi_view"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import MultiView, { Properties } from "devextreme/ui/multi_view"; +import DataSource from "devextreme/data/data_source"; +import { + dxMultiViewItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + SelectionChangedEvent, +} from "devextreme/ui/multi_view"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, loop: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, rtlEnabled: Boolean, selectedIndex: Number, selectedItem: {}, swipeEnabled: Boolean, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/number-box.ts b/packages/devextreme-vue/src/number-box.ts index 1a300f8abe2a..bbc411e9fa62 100644 --- a/packages/devextreme-vue/src/number-box.ts +++ b/packages/devextreme-vue/src/number-box.ts @@ -1,6 +1,49 @@ -import NumberBox, { Properties } from "devextreme/ui/number_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import NumberBox, { Properties } from "devextreme/ui/number_box"; +import { + NumberBoxPredefinedButton, + NumberBoxType, + ChangeEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/number_box"; +import { + TextEditorButton, + Format as CommonFormat, + LabelMode, + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, + TextEditorButtonLocation, + ButtonStyle, + ButtonType, +} from "devextreme/common"; +import { + Format, +} from "devextreme/localization"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - format: {}, - height: {}, - hint: {}, + format: [Object, String, Function] as PropType string)) | Record | string>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, invalidValueMessage: String, isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, - max: {}, - min: {}, - mode: {}, + labelMode: String as PropType, + max: Number, + min: Number, + mode: String as PropType, name: String, - onChange: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, showClearButton: Boolean, showSpinButtons: Boolean, step: Number, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useLargeSpinButtons: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: Number, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -209,9 +252,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -238,10 +281,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -283,31 +326,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; diff --git a/packages/devextreme-vue/src/pagination.ts b/packages/devextreme-vue/src/pagination.ts index 99441bceb72e..59b18008c71a 100644 --- a/packages/devextreme-vue/src/pagination.ts +++ b/packages/devextreme-vue/src/pagination.ts @@ -1,6 +1,17 @@ -import Pagination, { Properties } from "devextreme/ui/pagination"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Pagination, { Properties } from "devextreme/ui/pagination"; +import DOMComponent from "devextreme/core/dom_component"; +import { + DisplayMode, +} from "devextreme/common"; +import { + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; type AccessibleOptions = Pick>, disabled: Boolean, - displayMode: {}, - elementAttr: Object, + displayMode: String as PropType, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, infoText: String, itemCount: Number, label: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, pageIndex: Number, pageSize: Number, rtlEnabled: Boolean, @@ -62,7 +73,7 @@ const componentConfig = { showPageSizeSelector: Boolean, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/pie-chart.ts b/packages/devextreme-vue/src/pie-chart.ts index 1e95c71ce0a5..118a1afda2a4 100644 --- a/packages/devextreme-vue/src/pie-chart.ts +++ b/packages/devextreme-vue/src/pie-chart.ts @@ -1,6 +1,71 @@ -import PieChart, { Properties } from "devextreme/viz/pie_chart"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import PieChart, { Properties } from "devextreme/viz/pie_chart"; +import DataSource from "devextreme/data/data_source"; +import { + dxPieChartAnnotationConfig, + dxPieChartCommonAnnotationConfig, + DisposingEvent, + DoneEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + LegendClickEvent, + OptionChangedEvent, + PointClickEvent, + PointHoverChangedEvent, + PointSelectionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + PieChartSegmentDirection, + PieChartSeries, + PieChartType, + PieChartAnnotationLocation, + PieChartSeriesInteractionMode, + PieChartLegendItem, + PieChartLegendHoverMode, + SmallValuesGroupingMode, +} from "devextreme/viz/pie_chart"; +import { + SeriesLabel, + SeriesPoint, + Palette, + PaletteExtensionMode, + ShiftLabelOverlap, + Theme, + AnimationEaseMode, + Font, + TextOverflow, + AnnotationType, + WordWrap, + DashStyle, + ChartsDataType, + ChartsColor, + HatchDirection, + LabelPosition, +} from "devextreme/common/charts"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + SingleOrMultiple, + Format, + ExportFormat, + HorizontalAlignment, + Position, + Orientation, + VerticalEdge, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + animation: [Boolean, Object] as PropType>, + annotations: Array as PropType>, centerTemplate: {}, - commonAnnotationSettings: Object, + commonAnnotationSettings: Object as PropType>, commonSeriesSettings: {}, - customizeAnnotation: {}, - customizeLabel: Function, - customizePoint: Function, - dataSource: {}, - diameter: {}, + customizeAnnotation: Function as PropType<((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig)>, + customizeLabel: Function as PropType<((pointInfo: any) => SeriesLabel)>, + customizePoint: Function as PropType<((pointInfo: any) => SeriesPoint)>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + diameter: Number, disabled: Boolean, - elementAttr: Object, - export: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, innerRadius: Number, - legend: Object, - loadingIndicator: Object, - margin: Object, + legend: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, minDiameter: Number, - onDisposing: Function, - onDone: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onLegendClick: Function, - onOptionChanged: Function, - onPointClick: Function, - onPointHoverChanged: Function, - onPointSelectionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, - palette: {}, - paletteExtensionMode: {}, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDone: Function as PropType<((e: DoneEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onLegendClick: Function as PropType<((e: LegendClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPointClick: Function as PropType<((e: PointClickEvent) => void)>, + onPointHoverChanged: Function as PropType<((e: PointHoverChangedEvent) => void)>, + onPointSelectionChanged: Function as PropType<((e: PointSelectionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, pathModified: Boolean, - pointSelectionMode: {}, + pointSelectionMode: String as PropType, redrawOnResize: Boolean, - resolveLabelOverlapping: {}, + resolveLabelOverlapping: String as PropType, rtlEnabled: Boolean, - segmentsDirection: {}, - series: {}, - seriesTemplate: Object, - size: Object, - sizeGroup: {}, + segmentsDirection: String as PropType, + series: [Array, Object] as PropType | PieChartSeries | Record>, + seriesTemplate: Object as PropType>, + size: Object as PropType>, + sizeGroup: String, startAngle: Number, - theme: {}, - title: [Object, String], - tooltip: Object, - type: {} + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, + type: String as PropType }, emits: { "update:isActive": null, @@ -235,7 +300,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean, maxPointCountSupported: Number } @@ -285,36 +350,36 @@ const DxAnnotationConfig = { }, props: { allowDragging: Boolean, - argument: {}, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxPieChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - location: {}, - name: {}, - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + location: String as PropType, + name: String, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - series: {}, - shadow: Object, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -346,8 +411,8 @@ const DxAnnotationBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -372,10 +437,10 @@ const DxArgumentFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -398,10 +463,10 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -421,8 +486,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -469,35 +534,35 @@ const DxCommonAnnotationSettingsConfig = { }, props: { allowDragging: Boolean, - argument: {}, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxPieChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - location: {}, - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + location: String as PropType, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - series: {}, - shadow: Object, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -528,17 +593,17 @@ const DxCommonSeriesSettingsConfig = { }, props: { argumentField: String, - argumentType: {}, - border: Object, - color: {}, - hoverMode: {}, - hoverStyle: Object, - label: Object, - maxLabelCount: {}, - minSegmentSize: {}, - selectionMode: {}, - selectionStyle: Object, - smallValuesGrouping: Object, + argumentType: String as PropType, + border: Object as PropType>, + color: [Object, String] as PropType>, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, + label: Object as PropType>, + maxLabelCount: Number, + minSegmentSize: Number, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, + smallValuesGrouping: Object as PropType>, tagField: String, valueField: String } @@ -568,7 +633,7 @@ const DxConnectorConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -596,10 +661,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -647,10 +712,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -671,7 +736,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -694,9 +759,9 @@ const DxHoverStyleConfig = { "update:highlight": null, }, props: { - border: Object, - color: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + hatching: Object as PropType>, highlight: Boolean } }; @@ -723,7 +788,7 @@ const DxImageConfig = { }, props: { height: Number, - url: {}, + url: String, width: Number } }; @@ -754,20 +819,20 @@ const DxLabelConfig = { "update:wordWrap": null, }, props: { - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, - position: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((pointInfo: any) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, radialOffset: Number, rotationAngle: Number, - textOverflow: {}, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -814,28 +879,28 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - hoverMode: {}, - itemsAlignment: {}, - itemTextPosition: {}, - margin: [Number, Object], + customizeHint: Function as PropType<((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + hoverMode: String as PropType, + itemsAlignment: String as PropType, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, rowCount: Number, rowItemSpacing: Number, - title: [Object, String], - verticalAlignment: {}, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -867,13 +932,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -898,7 +963,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -926,7 +991,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -979,15 +1044,15 @@ const DxPieChartTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -1014,11 +1079,11 @@ const DxPieChartTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -1041,9 +1106,9 @@ const DxSelectionStyleConfig = { "update:highlight": null, }, props: { - border: Object, - color: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + hatching: Object as PropType>, highlight: Boolean } }; @@ -1083,18 +1148,18 @@ const DxSeriesConfig = { }, props: { argumentField: String, - argumentType: {}, - border: Object, - color: {}, - hoverMode: {}, - hoverStyle: Object, - label: Object, - maxLabelCount: {}, - minSegmentSize: {}, - name: {}, - selectionMode: {}, - selectionStyle: Object, - smallValuesGrouping: Object, + argumentType: String as PropType, + border: Object as PropType>, + color: [Object, String] as PropType>, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, + label: Object as PropType>, + maxLabelCount: Number, + minSegmentSize: Number, + name: String, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, + smallValuesGrouping: Object as PropType>, tag: {}, tagField: String, valueField: String @@ -1118,8 +1183,8 @@ const DxSeriesBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, + color: String, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -1139,7 +1204,7 @@ const DxSeriesTemplateConfig = { "update:nameField": null, }, props: { - customizeSeries: Function, + customizeSeries: Function as PropType<((seriesName: any) => PieChartSeries)>, nameField: String } }; @@ -1183,8 +1248,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -1205,9 +1270,9 @@ const DxSmallValuesGroupingConfig = { }, props: { groupName: String, - mode: {}, - threshold: {}, - topCount: {} + mode: String as PropType, + threshold: Number, + topCount: Number } }; @@ -1228,11 +1293,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -1260,15 +1325,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Object, Number], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Object, Number] as PropType | number>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -1308,24 +1373,24 @@ const DxTooltipConfig = { "update:zIndex": null, }, props: { - argumentFormat: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((pointInfo: any) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, + shadow: Object as PropType>, shared: Boolean, - zIndex: {} + zIndex: Number } }; @@ -1355,8 +1420,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } diff --git a/packages/devextreme-vue/src/pivot-grid-field-chooser.ts b/packages/devextreme-vue/src/pivot-grid-field-chooser.ts index 98fc3d6069f4..3a1a555b6da4 100644 --- a/packages/devextreme-vue/src/pivot-grid-field-chooser.ts +++ b/packages/devextreme-vue/src/pivot-grid-field-chooser.ts @@ -1,6 +1,23 @@ -import PivotGridFieldChooser, { Properties } from "devextreme/ui/pivot_grid_field_chooser"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import PivotGridFieldChooser, { Properties } from "devextreme/ui/pivot_grid_field_chooser"; +import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; +import { + ApplyChangesMode, + HeaderFilterSearchConfig, +} from "devextreme/common/grids"; +import { + FieldChooserLayout, + SearchMode, +} from "devextreme/common"; +import { + ContentReadyEvent, + ContextMenuPreparingEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/pivot_grid_field_chooser"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + dataSource: Object as PropType, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, encodeHtml: Boolean, focusStateEnabled: Boolean, - headerFilter: Object, - height: [Function, Number, String], - hint: {}, + headerFilter: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - layout: {}, - onContentReady: Function, - onContextMenuPreparing: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + layout: Number as PropType, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuPreparing: Function as PropType<((e: ContextMenuPreparingEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, searchTimeout: Number, state: {}, tabIndex: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -133,10 +150,10 @@ const DxHeaderFilterConfig = { allowSearch: Boolean, allowSelectAll: Boolean, height: Number, - search: Object, + search: Object as PropType>, searchTimeout: Number, showRelevantValues: Boolean, - texts: Object, + texts: Object as PropType>, width: Number } }; @@ -210,7 +227,7 @@ const DxSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, + mode: String as PropType, timeout: Number } }; diff --git a/packages/devextreme-vue/src/pivot-grid.ts b/packages/devextreme-vue/src/pivot-grid.ts index 28acaee603cd..2f6c5631c031 100644 --- a/packages/devextreme-vue/src/pivot-grid.ts +++ b/packages/devextreme-vue/src/pivot-grid.ts @@ -1,6 +1,35 @@ -import PivotGrid, { Properties } from "devextreme/ui/pivot_grid"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import PivotGrid, { Properties } from "devextreme/ui/pivot_grid"; +import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; +import { + PivotGridDataFieldArea, + CellClickEvent, + CellPreparedEvent, + ContentReadyEvent, + ContextMenuPreparingEvent, + DisposingEvent, + ExportingEvent, + InitializedEvent, + OptionChangedEvent, + PivotGridRowHeaderLayout, + PivotGridTotalDisplayMode, +} from "devextreme/ui/pivot_grid"; +import { + PivotGridDataSourceOptions, +} from "devextreme/ui/pivot_grid/data_source"; +import { + ApplyChangesMode, + HeaderFilterSearchConfig, + StateStoreType, +} from "devextreme/common/grids"; +import { + FieldChooserLayout, + ScrollMode, + Mode, + SearchMode, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + dataSource: [Array, Object] as PropType | null | PivotGridDataSource | PivotGridDataSourceOptions>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, encodeHtml: Boolean, - export: Object, - fieldChooser: Object, - fieldPanel: Object, - headerFilter: Object, - height: {}, + export: Object as PropType>, + fieldChooser: Object as PropType>, + fieldPanel: Object as PropType>, + headerFilter: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hideEmptySummaryCells: Boolean, - hint: {}, - loadPanel: Object, - onCellClick: Function, - onCellPrepared: Function, - onContentReady: Function, - onContextMenuPreparing: Function, - onDisposing: Function, - onExporting: Function, - onInitialized: Function, - onOptionChanged: Function, - rowHeaderLayout: {}, + hint: String, + loadPanel: Object as PropType>, + onCellClick: Function as PropType<((e: CellClickEvent) => void)>, + onCellPrepared: Function as PropType<((e: CellPreparedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuPreparing: Function as PropType<((e: ContextMenuPreparingEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + rowHeaderLayout: String as PropType, rtlEnabled: Boolean, - scrolling: Object, + scrolling: Object as PropType>, showBorders: Boolean, showColumnGrandTotals: Boolean, showColumnTotals: Boolean, showRowGrandTotals: Boolean, showRowTotals: Boolean, - showTotalsPrior: {}, - stateStoring: Object, + showTotalsPrior: String as PropType, + stateStoring: Object as PropType>, tabIndex: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wordWrapEnabled: Boolean }, emits: { @@ -197,12 +226,12 @@ const DxFieldChooserConfig = { }, props: { allowSearch: Boolean, - applyChangesMode: {}, + applyChangesMode: String as PropType, enabled: Boolean, height: Number, - layout: {}, + layout: Number as PropType, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, title: String, width: Number } @@ -261,7 +290,7 @@ const DxFieldPanelConfig = { showDataFields: Boolean, showFilterFields: Boolean, showRowFields: Boolean, - texts: Object, + texts: Object as PropType>, visible: Boolean } }; @@ -316,10 +345,10 @@ const DxHeaderFilterConfig = { allowSearch: Boolean, allowSelectAll: Boolean, height: Number, - search: Object, + search: Object as PropType>, searchTimeout: Number, showRelevantValues: Boolean, - texts: Object, + texts: Object as PropType>, width: Number } }; @@ -434,8 +463,8 @@ const DxScrollingConfig = { "update:useNative": null, }, props: { - mode: {}, - useNative: {} + mode: String as PropType, + useNative: [Boolean, String] as PropType } }; @@ -457,7 +486,7 @@ const DxSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, + mode: String as PropType, timeout: Number } }; @@ -480,12 +509,12 @@ const DxStateStoringConfig = { "update:type": null, }, props: { - customLoad: Function, - customSave: Function, + customLoad: Function as PropType<(() => any)>, + customSave: Function as PropType<((state: any) => void)>, enabled: Boolean, savingTimeout: Number, storageKey: String, - type: {} + type: String as PropType } }; diff --git a/packages/devextreme-vue/src/polar-chart.ts b/packages/devextreme-vue/src/polar-chart.ts index 5bab16e04b5b..0100ea41ef08 100644 --- a/packages/devextreme-vue/src/polar-chart.ts +++ b/packages/devextreme-vue/src/polar-chart.ts @@ -1,6 +1,85 @@ -import PolarChart, { Properties } from "devextreme/viz/polar_chart"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import PolarChart, { Properties } from "devextreme/viz/polar_chart"; +import DataSource from "devextreme/data/data_source"; +import { + dxPolarChartAnnotationConfig, + dxPolarChartCommonAnnotationConfig, + ArgumentAxisClickEvent, + DisposingEvent, + DoneEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + LegendClickEvent, + OptionChangedEvent, + PointClickEvent, + PointHoverChangedEvent, + PointSelectionChangedEvent, + SeriesClickEvent, + SeriesHoverChangedEvent, + SeriesSelectionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + ZoomEndEvent, + ZoomStartEvent, + PolarChartSeries, + PolarChartSeriesType, + ValueAxisVisualRangeUpdateMode, +} from "devextreme/viz/polar_chart"; +import { + SeriesLabel, + SeriesPoint, + Palette, + PaletteExtensionMode, + LabelOverlap, + Theme, + AnimationEaseMode, + Font, + TextOverflow, + AnnotationType, + WordWrap, + DashStyle, + ChartsDataType, + DiscreteAxisDivisionMode, + ArgumentAxisHoverMode, + TimeInterval, + AxisScaleType, + ChartsColor, + SeriesHoverMode, + SeriesSelectionMode, + RelativePosition, + HatchDirection, + LegendItem, + LegendHoverMode, + PointInteractionMode, + PointSymbol, + ValueErrorBarDisplayMode, + ValueErrorBarType, +} from "devextreme/common/charts"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + SingleOrMultiple, + Format, + ExportFormat, + HorizontalAlignment, + Position, + Orientation, + VerticalEdge, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; +import * as CommonChartTypes from "devextreme/common/charts"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + animation: [Boolean, Object] as PropType>, + annotations: Array as PropType>, + argumentAxis: Object as PropType>, barGroupPadding: Number, - barGroupWidth: {}, - commonAnnotationSettings: Object, - commonAxisSettings: Object, - commonSeriesSettings: Object, + barGroupWidth: Number, + commonAnnotationSettings: Object as PropType>, + commonAxisSettings: Object as PropType>, + commonSeriesSettings: Object as PropType>, containerBackgroundColor: String, - customizeAnnotation: {}, - customizeLabel: Function, - customizePoint: Function, - dataPrepareSettings: Object, - dataSource: {}, + customizeAnnotation: Function as PropType<((annotation: dxPolarChartAnnotationConfig | any) => dxPolarChartAnnotationConfig)>, + customizeLabel: Function as PropType<((pointInfo: any) => SeriesLabel)>, + customizePoint: Function as PropType<((pointInfo: any) => SeriesPoint)>, + dataPrepareSettings: Object as PropType>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - export: Object, - legend: Object, - loadingIndicator: Object, - margin: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, + legend: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, negativesAsZeroes: Boolean, - onArgumentAxisClick: Function, - onDisposing: Function, - onDone: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onLegendClick: Function, - onOptionChanged: Function, - onPointClick: Function, - onPointHoverChanged: Function, - onPointSelectionChanged: Function, - onSeriesClick: Function, - onSeriesHoverChanged: Function, - onSeriesSelectionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, - onZoomEnd: Function, - onZoomStart: Function, - palette: {}, - paletteExtensionMode: {}, + onArgumentAxisClick: Function as PropType<((e: ArgumentAxisClickEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDone: Function as PropType<((e: DoneEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onLegendClick: Function as PropType<((e: LegendClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPointClick: Function as PropType<((e: PointClickEvent) => void)>, + onPointHoverChanged: Function as PropType<((e: PointHoverChangedEvent) => void)>, + onPointSelectionChanged: Function as PropType<((e: PointSelectionChangedEvent) => void)>, + onSeriesClick: Function as PropType<((e: SeriesClickEvent) => void)>, + onSeriesHoverChanged: Function as PropType<((e: SeriesHoverChangedEvent) => void)>, + onSeriesSelectionChanged: Function as PropType<((e: SeriesSelectionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, + onZoomEnd: Function as PropType<((e: ZoomEndEvent) => void)>, + onZoomStart: Function as PropType<((e: ZoomStartEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, pathModified: Boolean, - pointSelectionMode: {}, + pointSelectionMode: String as PropType, redrawOnResize: Boolean, - resolveLabelOverlapping: {}, + resolveLabelOverlapping: String as PropType, rtlEnabled: Boolean, - series: {}, - seriesSelectionMode: {}, - seriesTemplate: Object, - size: Object, - theme: {}, - title: [Object, String], - tooltip: Object, + series: [Array, Object] as PropType | PolarChartSeries | Record>, + seriesSelectionMode: String as PropType, + seriesTemplate: Object as PropType>, + size: Object as PropType>, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, useSpiderWeb: Boolean, - valueAxis: Object + valueAxis: Object as PropType> }, emits: { "update:isActive": null, @@ -263,7 +342,7 @@ const DxAnimationConfig = { }, props: { duration: Number, - easing: {}, + easing: String as PropType, enabled: Boolean, maxPointCountSupported: Number } @@ -315,38 +394,38 @@ const DxAnnotationConfig = { }, props: { allowDragging: Boolean, - angle: {}, - argument: {}, + angle: Number, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxPolarChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - name: {}, - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + name: String, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - radius: {}, - series: {}, - shadow: Object, + radius: Number, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - value: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + value: [Date, Number, String], + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -378,8 +457,8 @@ const DxAnnotationBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -428,35 +507,35 @@ const DxArgumentAxisConfig = { "update:width": null, }, props: { - allowDecimals: {}, - argumentType: {}, + allowDecimals: Boolean, + argumentType: String as PropType, axisDivisionFactor: Number, - categories: Array, + categories: Array as PropType>, color: String, - constantLines: Array, - constantLineStyle: Object, - discreteAxisDivisionMode: {}, - endOnTick: {}, + constantLines: Array as PropType>>, + constantLineStyle: Object as PropType>, + discreteAxisDivisionMode: String as PropType, + endOnTick: Boolean, firstPointOnStartAngle: Boolean, - grid: Object, - hoverMode: {}, + grid: Object as PropType>, + hoverMode: String as PropType, inverted: Boolean, - label: Object, - linearThreshold: {}, + label: Object as PropType>, + linearThreshold: Number, logarithmBase: Number, - minorGrid: Object, - minorTick: Object, - minorTickCount: {}, - minorTickInterval: {}, - opacity: {}, - originValue: {}, - period: {}, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + minorTickCount: Number, + minorTickInterval: [Number, Object, String] as PropType | TimeInterval>, + opacity: Number, + originValue: Number, + period: Number, startAngle: Number, - strips: Array, - stripStyle: Object, - tick: Object, - tickInterval: {}, - type: {}, + strips: Array as PropType>>, + stripStyle: Object as PropType>, + tick: Object as PropType>, + tickInterval: [Number, Object, String] as PropType | TimeInterval>, + type: String as PropType, visible: Boolean, width: Number } @@ -525,7 +604,7 @@ const DxArgumentAxisTickConfig = { props: { color: String, length: Number, - opacity: {}, + opacity: Number, shift: Number, visible: Boolean, width: Number @@ -551,10 +630,10 @@ const DxArgumentFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -578,12 +657,12 @@ const DxAxisLabelConfig = { "update:visible": null, }, props: { - customizeHint: Function, - customizeText: Function, - font: Object, - format: {}, + customizeHint: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + customizeText: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indentFromAxis: Number, - overlappingBehavior: {}, + overlappingBehavior: String as PropType, visible: Boolean } }; @@ -606,10 +685,10 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -629,8 +708,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -679,37 +758,37 @@ const DxCommonAnnotationSettingsConfig = { }, props: { allowDragging: Boolean, - angle: {}, - argument: {}, + angle: Number, + argument: [Date, Number, String], arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((annotation: dxPolarChartAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - radius: {}, - series: {}, - shadow: Object, + radius: Number, + series: String, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - value: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + value: [Date, Number, String], + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -740,19 +819,19 @@ const DxCommonAxisSettingsConfig = { "update:width": null, }, props: { - allowDecimals: {}, + allowDecimals: Boolean, color: String, - constantLineStyle: Object, - discreteAxisDivisionMode: {}, - endOnTick: {}, - grid: Object, + constantLineStyle: Object as PropType>, + discreteAxisDivisionMode: String as PropType, + endOnTick: Boolean, + grid: Object as PropType>, inverted: Boolean, - label: Object, - minorGrid: Object, - minorTick: Object, - opacity: {}, - stripStyle: Object, - tick: Object, + label: Object as PropType>, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + opacity: Number, + stripStyle: Object as PropType>, + tick: Object as PropType>, visible: Boolean, width: Number } @@ -782,9 +861,9 @@ const DxCommonAxisSettingsLabelConfig = { "update:visible": null, }, props: { - font: Object, + font: Object as PropType>, indentFromAxis: Number, - overlappingBehavior: {}, + overlappingBehavior: String as PropType, visible: Boolean } }; @@ -833,7 +912,7 @@ const DxCommonAxisSettingsTickConfig = { props: { color: String, length: Number, - opacity: {}, + opacity: Number, visible: Boolean, width: Number } @@ -884,30 +963,30 @@ const DxCommonSeriesSettingsConfig = { area: {}, argumentField: String, bar: {}, - barPadding: {}, - barWidth: {}, - border: Object, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, closed: Boolean, - color: {}, - dashStyle: {}, - hoverMode: {}, - hoverStyle: Object, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, - label: Object, + label: Object as PropType>, line: {}, - maxLabelCount: {}, - minBarSize: {}, + maxLabelCount: Number, + minBarSize: Number, opacity: Number, - point: Object, + point: Object as PropType>, scatter: {}, - selectionMode: {}, - selectionStyle: Object, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, stack: String, stackedbar: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -945,10 +1024,10 @@ const DxCommonSeriesSettingsHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -984,15 +1063,15 @@ const DxCommonSeriesSettingsLabelConfig = { "update:visible": null, }, props: { - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, - position: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((pointInfo: any) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, visible: Boolean @@ -1025,10 +1104,10 @@ const DxCommonSeriesSettingsSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -1055,7 +1134,7 @@ const DxConnectorConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -1081,11 +1160,11 @@ const DxConstantLineConfig = { }, props: { color: String, - dashStyle: {}, + dashStyle: String as PropType, displayBehindSeries: Boolean, extendAxis: Boolean, - label: Object, - value: {}, + label: Object as PropType>, + value: [Date, Number, String], width: Number } }; @@ -1106,8 +1185,8 @@ const DxConstantLineLabelConfig = { "update:visible": null, }, props: { - font: Object, - text: {}, + font: Object as PropType>, + text: String, visible: Boolean } }; @@ -1129,8 +1208,8 @@ const DxConstantLineStyleConfig = { }, props: { color: String, - dashStyle: {}, - label: Object, + dashStyle: String as PropType, + label: Object as PropType>, width: Number } }; @@ -1153,7 +1232,7 @@ const DxConstantLineStyleLabelConfig = { "update:visible": null, }, props: { - font: Object, + font: Object as PropType>, visible: Boolean } }; @@ -1175,7 +1254,7 @@ const DxDataPrepareSettingsConfig = { props: { checkTypeForAllData: Boolean, convertToAxisDataType: Boolean, - sortingMethod: [Boolean, Function] + sortingMethod: [Boolean, Function] as PropType number))> } }; @@ -1201,10 +1280,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -1252,10 +1331,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -1277,7 +1356,7 @@ const DxGridConfig = { }, props: { color: String, - opacity: {}, + opacity: Number, visible: Boolean, width: Number } @@ -1299,7 +1378,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -1325,10 +1404,10 @@ const DxHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, size: Number, width: Number @@ -1358,7 +1437,7 @@ const DxImageConfig = { }, props: { height: Number, - url: {}, + url: String, width: Number } }; @@ -1391,21 +1470,21 @@ const DxLabelConfig = { "update:visible": null, }, props: { - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeHint: Function, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeHint: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + customizeText: Function as PropType<((argument: { value: Date | number | string, valueText: string }) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, indentFromAxis: Number, - overlappingBehavior: {}, - position: {}, + overlappingBehavior: String as PropType, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, - text: {}, + text: String, visible: Boolean } }; @@ -1453,28 +1532,28 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - hoverMode: {}, - itemsAlignment: {}, - itemTextPosition: {}, - margin: [Number, Object], + customizeHint: Function as PropType<((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + hoverMode: String as PropType, + itemsAlignment: String as PropType, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, rowCount: Number, rowItemSpacing: Number, - title: [Object, String], - verticalAlignment: {}, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -1506,13 +1585,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -1537,7 +1616,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -1598,7 +1677,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -1647,7 +1726,7 @@ const DxMinorGridConfig = { }, props: { color: String, - opacity: {}, + opacity: Number, visible: Boolean, width: Number } @@ -1768,15 +1847,15 @@ const DxPointConfig = { "update:visible": null, }, props: { - border: Object, - color: {}, - hoverMode: {}, - hoverStyle: Object, - image: {}, - selectionMode: {}, - selectionStyle: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, + image: [Object, String] as PropType | string>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, size: Number, - symbol: {}, + symbol: String as PropType, visible: Boolean } }; @@ -1806,7 +1885,7 @@ const DxPointBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -1827,8 +1906,8 @@ const DxPointHoverStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, + border: Object as PropType>, + color: [Object, String] as PropType>, size: Number } }; @@ -1853,8 +1932,8 @@ const DxPointSelectionStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, + border: Object as PropType>, + color: [Object, String] as PropType>, size: Number } }; @@ -1885,15 +1964,15 @@ const DxPolarChartTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -1920,11 +1999,11 @@ const DxPolarChartTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -1950,10 +2029,10 @@ const DxSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, size: Number, width: Number @@ -2007,29 +2086,29 @@ const DxSeriesConfig = { }, props: { argumentField: String, - barPadding: {}, - barWidth: {}, - border: Object, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, closed: Boolean, - color: {}, - dashStyle: {}, - hoverMode: {}, - hoverStyle: Object, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, - label: Object, - maxLabelCount: {}, - minBarSize: {}, - name: {}, + label: Object as PropType>, + maxLabelCount: Number, + minBarSize: Number, + name: String, opacity: Number, - point: Object, - selectionMode: {}, - selectionStyle: Object, + point: Object as PropType>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, stack: String, tag: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -2053,8 +2132,8 @@ const DxSeriesBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, + color: String, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -2074,7 +2153,7 @@ const DxSeriesTemplateConfig = { "update:nameField": null, }, props: { - customizeSeries: Function, + customizeSeries: Function as PropType<((seriesName: any) => PolarChartSeries)>, nameField: String } }; @@ -2118,8 +2197,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -2139,10 +2218,10 @@ const DxStripConfig = { "update:startValue": null, }, props: { - color: {}, - endValue: {}, - label: Object, - startValue: {} + color: String, + endValue: [Date, Number, String], + label: Object as PropType>, + startValue: [Date, Number, String] } }; @@ -2161,8 +2240,8 @@ const DxStripLabelConfig = { "update:text": null, }, props: { - font: Object, - text: {} + font: Object as PropType>, + text: String } }; @@ -2179,7 +2258,7 @@ const DxStripStyleConfig = { "update:label": null, }, props: { - label: Object + label: Object as PropType> } }; @@ -2200,7 +2279,7 @@ const DxStripStyleLabelConfig = { "update:font": null, }, props: { - font: Object + font: Object as PropType> } }; @@ -2221,11 +2300,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -2252,7 +2331,7 @@ const DxTickConfig = { props: { color: String, length: Number, - opacity: {}, + opacity: Number, shift: Number, visible: Boolean, width: Number @@ -2313,15 +2392,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Object, Number], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Object, Number] as PropType | number>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -2361,24 +2440,24 @@ const DxTooltipConfig = { "update:zIndex": null, }, props: { - argumentFormat: {}, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((pointInfo: any) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, + shadow: Object as PropType>, shared: Boolean, - zIndex: {} + zIndex: Number } }; @@ -2408,8 +2487,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -2461,39 +2540,39 @@ const DxValueAxisConfig = { "update:width": null, }, props: { - allowDecimals: {}, + allowDecimals: Boolean, axisDivisionFactor: Number, - categories: Array, + categories: Array as PropType>, color: String, - constantLines: Array, - constantLineStyle: Object, - discreteAxisDivisionMode: {}, + constantLines: Array as PropType>>, + constantLineStyle: Object as PropType>, + discreteAxisDivisionMode: String as PropType, endOnTick: Boolean, - grid: Object, + grid: Object as PropType>, inverted: Boolean, - label: Object, - linearThreshold: {}, + label: Object as PropType>, + linearThreshold: Number, logarithmBase: Number, - maxValueMargin: {}, - minorGrid: Object, - minorTick: Object, - minorTickCount: {}, - minorTickInterval: {}, - minValueMargin: {}, - minVisualRangeLength: {}, - opacity: {}, - showZero: {}, - strips: Array, - stripStyle: Object, - tick: Object, - tickInterval: {}, - type: {}, + maxValueMargin: Number, + minorGrid: Object as PropType>, + minorTick: Object as PropType>, + minorTickCount: Number, + minorTickInterval: [Number, Object, String] as PropType | TimeInterval>, + minValueMargin: Number, + minVisualRangeLength: [Number, Object, String] as PropType | TimeInterval>, + opacity: Number, + showZero: Boolean, + strips: Array as PropType>>, + stripStyle: Object as PropType>, + tick: Object as PropType>, + tickInterval: [Number, Object, String] as PropType | TimeInterval>, + type: String as PropType, valueMarginsEnabled: Boolean, - valueType: {}, + valueType: String as PropType, visible: Boolean, - visualRange: [Array, Object], - visualRangeUpdateMode: {}, - wholeRange: {}, + visualRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, + visualRangeUpdateMode: String as PropType, + wholeRange: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record>, width: Number } }; @@ -2533,13 +2612,13 @@ const DxValueErrorBarConfig = { }, props: { color: String, - displayMode: {}, + displayMode: String as PropType, edgeLength: Number, - highValueField: {}, + highValueField: String, lineWidth: Number, - lowValueField: {}, - opacity: {}, - type: {}, + lowValueField: String, + opacity: Number, + type: String as PropType, value: Number } }; @@ -2559,9 +2638,9 @@ const DxVisualRangeConfig = { "update:startValue": null, }, props: { - endValue: {}, - length: {}, - startValue: {} + endValue: [Date, Number, String], + length: [Number, Object, String] as PropType | TimeInterval>, + startValue: [Date, Number, String] } }; @@ -2583,9 +2662,9 @@ const DxWholeRangeConfig = { "update:startValue": null, }, props: { - endValue: {}, - length: {}, - startValue: {} + endValue: [Date, Number, String], + length: [Number, Object, String] as PropType | TimeInterval>, + startValue: [Date, Number, String] } }; diff --git a/packages/devextreme-vue/src/popover.ts b/packages/devextreme-vue/src/popover.ts index c2709be83536..1f07651bd22c 100644 --- a/packages/devextreme-vue/src/popover.ts +++ b/packages/devextreme-vue/src/popover.ts @@ -1,6 +1,48 @@ -import Popover, { Properties } from "devextreme/ui/popover"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Popover, { Properties } from "devextreme/ui/popover"; +import { + event, +} from "devextreme/events/index"; +import { + ContentReadyEvent, + DisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent, + OptionChangedEvent, + ShowingEvent, + ShownEvent, + TitleRenderedEvent, +} from "devextreme/ui/popover"; +import { + Position, + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, disabled: Boolean, enableBodyScroll: Boolean, - height: [Function, Number, String], - hideEvent: {}, - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideEvent: [Object, String] as PropType | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, + position: [String, Object] as PropType>, rtlEnabled: Boolean, shading: Boolean, shadingColor: String, showCloseButton: Boolean, - showEvent: {}, + showEvent: [Object, String] as PropType | string>, showTitle: Boolean, target: {}, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} }, emits: { @@ -168,8 +210,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -191,8 +233,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -229,8 +271,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -253,7 +295,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -284,16 +326,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -315,8 +357,8 @@ const DxHideEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -334,8 +376,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -377,13 +419,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -409,16 +451,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -436,8 +478,8 @@ const DxShowEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -460,7 +502,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -491,19 +533,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/popup.ts b/packages/devextreme-vue/src/popup.ts index 132c7b28832e..d19d09498aff 100644 --- a/packages/devextreme-vue/src/popup.ts +++ b/packages/devextreme-vue/src/popup.ts @@ -1,6 +1,43 @@ -import Popup, { Properties } from "devextreme/ui/popup"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Popup, { Properties } from "devextreme/ui/popup"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + PositionAlignment, + HorizontalAlignment, + VerticalAlignment, + Direction, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -74,28 +111,28 @@ const componentConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -106,9 +143,9 @@ const componentConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} }, emits: { @@ -193,8 +230,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -216,8 +253,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -254,8 +291,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -278,7 +315,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -309,16 +346,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -340,8 +377,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -383,13 +420,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -415,16 +452,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -447,7 +484,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -478,19 +515,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/progress-bar.ts b/packages/devextreme-vue/src/progress-bar.ts index 63349f788fad..dba4be7dbc5d 100644 --- a/packages/devextreme-vue/src/progress-bar.ts +++ b/packages/devextreme-vue/src/progress-bar.ts @@ -1,6 +1,20 @@ -import ProgressBar, { Properties } from "devextreme/ui/progress_bar"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ProgressBar, { Properties } from "devextreme/ui/progress_bar"; +import { + CompleteEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/progress_bar"; +import { + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, max: Number, min: Number, - onComplete: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onComplete: Function as PropType<((e: CompleteEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, showStatus: Boolean, - statusFormat: [Function, String], + statusFormat: [Function, String] as PropType<(((ratio: number, value: number) => string)) | string>, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/radio-group.ts b/packages/devextreme-vue/src/radio-group.ts index 850e4b2d7cdf..e3f20973fec7 100644 --- a/packages/devextreme-vue/src/radio-group.ts +++ b/packages/devextreme-vue/src/radio-group.ts @@ -1,6 +1,30 @@ -import RadioGroup, { Properties } from "devextreme/ui/radio_group"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import RadioGroup, { Properties } from "devextreme/ui/radio_group"; +import DataSource from "devextreme/data/data_source"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Orientation, + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/radio_group"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - displayExpr: {}, - elementAttr: Object, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, - layout: {}, + layout: String as PropType, name: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/range-selector.ts b/packages/devextreme-vue/src/range-selector.ts index 4bfc04cf619d..3cf6c28ce018 100644 --- a/packages/devextreme-vue/src/range-selector.ts +++ b/packages/devextreme-vue/src/range-selector.ts @@ -1,6 +1,76 @@ -import RangeSelector, { Properties } from "devextreme/viz/range_selector"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import RangeSelector, { Properties } from "devextreme/viz/range_selector"; +import DataSource from "devextreme/data/data_source"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, + BackgroundImageLocation, + ValueChangedCallMode, + AxisScale, + ChartAxisScale, +} from "devextreme/viz/range_selector"; +import { + VisualRangeUpdateMode, + Theme, + DashStyle, + ScaleBreakLineStyle, + Palette, + PaletteExtensionMode, + ChartsColor, + SeriesHoverMode, + SeriesSelectionMode, + SeriesType, + Font, + RelativePosition, + HatchDirection, + LabelOverlap, + PointInteractionMode, + PointSymbol, + TimeInterval, + ScaleBreak, + DiscreteAxisDivisionMode, + ChartsDataType, + TextOverflow, + WordWrap, + ValueErrorBarDisplayMode, + ValueErrorBarType, +} from "devextreme/common/charts"; +import { + chartPointAggregationInfoObject, + chartSeriesObject, + ChartSeriesAggregationMethod, + dxChartCommonSeriesSettings, + FinancialChartReductionLevel, +} from "devextreme/viz/chart"; +import { + Format, + SliderValueChangeMode, + HorizontalAlignment, + ExportFormat, + VerticalEdge, +} from "devextreme/common"; +import { + ChartSeries, +} from "devextreme/viz/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; +import * as CommonChartTypes from "devextreme/common/charts"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + behavior: Object as PropType>, + chart: Object as PropType>, containerBackgroundColor: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, dataSourceField: String, disabled: Boolean, - elementAttr: Object, - export: Object, - indent: Object, - loadingIndicator: Object, - margin: Object, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + elementAttr: Object as PropType>, + export: Object as PropType>, + indent: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, pathModified: Boolean, redrawOnResize: Boolean, rtlEnabled: Boolean, - scale: Object, + scale: Object as PropType>, selectedRangeColor: String, - selectedRangeUpdateMode: {}, - shutter: Object, - size: Object, - sliderHandle: Object, - sliderMarker: Object, - theme: {}, - title: [Object, String], - value: [Array, Object] + selectedRangeUpdateMode: String as PropType, + shutter: Object as PropType>, + size: Object as PropType>, + sliderHandle: Object as PropType>, + sliderMarker: Object as PropType>, + theme: String as PropType, + title: [Object, String] as PropType | string>, + value: [Array, Object] as PropType<(Array) | CommonChartTypes.VisualRange | Record> }, emits: { "update:isActive": null, @@ -160,9 +230,9 @@ const DxAggregationConfig = { "update:method": null, }, props: { - calculate: {}, + calculate: Function as PropType<((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record | Array>)>, enabled: Boolean, - method: {} + method: String as PropType } }; @@ -218,10 +288,10 @@ const DxArgumentFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -242,7 +312,7 @@ const DxBackgroundConfig = { }, props: { color: String, - image: Object, + image: Object as PropType>, visible: Boolean } }; @@ -265,8 +335,8 @@ const DxBackgroundImageConfig = { "update:url": null, }, props: { - location: {}, - url: {} + location: String as PropType, + url: String } }; @@ -291,11 +361,11 @@ const DxBehaviorConfig = { props: { allowSlidersSwap: Boolean, animationEnabled: Boolean, - callValueChanged: {}, + callValueChanged: String as PropType, manualRangeSelectionEnabled: Boolean, moveSelectedRangeByClick: Boolean, snapToTicks: Boolean, - valueChangeMode: {} + valueChangeMode: String as PropType } }; @@ -315,8 +385,8 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, + color: String, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -336,8 +406,8 @@ const DxBreakConfig = { "update:startValue": null, }, props: { - endValue: {}, - startValue: {} + endValue: [Date, Number, String], + startValue: [Date, Number, String] } }; @@ -358,7 +428,7 @@ const DxBreakStyleConfig = { }, props: { color: String, - line: {}, + line: String as PropType, width: Number } }; @@ -390,19 +460,19 @@ const DxChartConfig = { }, props: { barGroupPadding: Number, - barGroupWidth: {}, + barGroupWidth: Number, bottomIndent: Number, - commonSeriesSettings: Object, - dataPrepareSettings: Object, + commonSeriesSettings: Object as PropType>, + dataPrepareSettings: Object as PropType>, maxBubbleSize: Number, minBubbleSize: Number, negativesAsZeroes: Boolean, - palette: {}, - paletteExtensionMode: {}, - series: {}, - seriesTemplate: Object, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, + series: [Array, Object] as PropType | ChartSeries | Record>, + seriesTemplate: Object as PropType>, topIndent: Number, - valueAxis: Object + valueAxis: Object as PropType> } }; @@ -427,8 +497,8 @@ const DxColorConfig = { "update:fillId": null, }, props: { - base: {}, - fillId: {} + base: String, + fillId: String } }; @@ -505,48 +575,48 @@ const DxCommonSeriesSettingsConfig = { "update:width": null, }, props: { - aggregation: Object, + aggregation: Object as PropType>, area: {}, argumentField: String, - axis: {}, + axis: String, bar: {}, - barOverlapGroup: {}, - barPadding: {}, - barWidth: {}, - border: Object, + barOverlapGroup: String, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, bubble: {}, candlestick: {}, closeValueField: String, - color: {}, + color: [Object, String] as PropType>, cornerRadius: Number, - dashStyle: {}, + dashStyle: String as PropType, fullstackedarea: {}, fullstackedbar: {}, fullstackedline: {}, fullstackedspline: {}, fullstackedsplinearea: {}, highValueField: String, - hoverMode: {}, - hoverStyle: Object, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, innerColor: String, - label: Object, + label: Object as PropType>, line: {}, lowValueField: String, - maxLabelCount: {}, - minBarSize: {}, + maxLabelCount: Number, + minBarSize: Number, opacity: Number, openValueField: String, pane: String, - point: Object, + point: Object as PropType>, rangearea: {}, rangebar: {}, rangeValue1Field: String, rangeValue2Field: String, - reduction: Object, + reduction: Object as PropType>, scatter: {}, - selectionMode: {}, - selectionStyle: Object, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, sizeField: String, spline: {}, @@ -561,8 +631,8 @@ const DxCommonSeriesSettingsConfig = { stepline: {}, stock: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -602,10 +672,10 @@ const DxCommonSeriesSettingsHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -644,17 +714,17 @@ const DxCommonSeriesSettingsLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, + alignment: String as PropType, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((pointInfo: any) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, horizontalOffset: Number, - position: {}, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, verticalOffset: Number, @@ -688,10 +758,10 @@ const DxCommonSeriesSettingsSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, width: Number } @@ -718,7 +788,7 @@ const DxConnectorConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -741,7 +811,7 @@ const DxDataPrepareSettingsConfig = { props: { checkTypeForAllData: Boolean, convertToAxisDataType: Boolean, - sortingMethod: [Boolean, Function] + sortingMethod: [Boolean, Function] as PropType number))> } }; @@ -767,10 +837,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -818,10 +888,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -842,7 +912,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -863,8 +933,8 @@ const DxHeightConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: Number, + rangeMinPoint: Number } }; @@ -887,12 +957,12 @@ const DxHoverStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, - size: {}, + size: Number, width: Number } }; @@ -920,10 +990,10 @@ const DxImageConfig = { "update:width": null, }, props: { - height: [Number, Object], - location: {}, - url: {}, - width: [Number, Object] + height: [Number, Object] as PropType>, + location: String as PropType, + url: [String, Object] as PropType>, + width: [Number, Object] as PropType> } }; @@ -946,8 +1016,8 @@ const DxIndentConfig = { "update:right": null, }, props: { - left: {}, - right: {} + left: Number, + right: Number } }; @@ -980,18 +1050,18 @@ const DxLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - argumentFormat: {}, - backgroundColor: {}, - border: Object, - connector: Object, - customizeText: Function, - displayFormat: {}, - font: Object, - format: {}, + alignment: String as PropType, + argumentFormat: [Object, String, Function] as PropType string)) | Record | string>, + backgroundColor: String, + border: Object as PropType>, + connector: Object as PropType>, + customizeText: Function as PropType<((pointInfo: any) => string)>, + displayFormat: String, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, horizontalOffset: Number, - overlappingBehavior: {}, - position: {}, + overlappingBehavior: String as PropType, + position: String as PropType, rotationAngle: Number, showForZeroValues: Boolean, topIndent: Number, @@ -1060,7 +1130,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -1110,7 +1180,7 @@ const DxMarkerConfig = { "update:visible": null, }, props: { - label: Object, + label: Object as PropType>, separatorHeight: Number, textLeftIndent: Number, textTopIndent: Number, @@ -1137,8 +1207,8 @@ const DxMarkerLabelConfig = { "update:format": null, }, props: { - customizeText: Function, - format: {} + customizeText: Function as PropType<((markerValue: { value: Date | number, valueText: string }) => string)>, + format: [Object, String, Function] as PropType string)) | Record | string> } }; @@ -1289,15 +1359,15 @@ const DxPointConfig = { "update:visible": null, }, props: { - border: Object, - color: {}, - hoverMode: {}, - hoverStyle: Object, - image: {}, - selectionMode: {}, - selectionStyle: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, + image: [Object, String] as PropType | string>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, size: Number, - symbol: {}, + symbol: String as PropType, visible: Boolean } }; @@ -1328,7 +1398,7 @@ const DxPointBorderConfig = { "update:width": null, }, props: { - color: {}, + color: String, visible: Boolean, width: Number } @@ -1349,9 +1419,9 @@ const DxPointHoverStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, - size: {} + border: Object as PropType>, + color: [Object, String] as PropType>, + size: Number } }; @@ -1375,9 +1445,9 @@ const DxPointImageConfig = { "update:width": null, }, props: { - height: [Number, Object], - url: {}, - width: [Number, Object] + height: [Number, Object] as PropType>, + url: [Object, String] as PropType | string>, + width: [Number, Object] as PropType> } }; @@ -1401,9 +1471,9 @@ const DxPointSelectionStyleConfig = { "update:size": null, }, props: { - border: Object, - color: {}, - size: {} + border: Object as PropType>, + color: [Object, String] as PropType>, + size: Number } }; @@ -1427,7 +1497,7 @@ const DxReductionConfig = { }, props: { color: String, - level: {} + level: String as PropType } }; @@ -1474,35 +1544,35 @@ const DxScaleConfig = { }, props: { aggregateByCategory: Boolean, - aggregationGroupWidth: {}, - aggregationInterval: {}, - allowDecimals: {}, - breaks: Array, - breakStyle: Object, - categories: Array, - discreteAxisDivisionMode: {}, + aggregationGroupWidth: Number, + aggregationInterval: [Number, Object, String] as PropType | TimeInterval>, + allowDecimals: Boolean, + breaks: Array as PropType>, + breakStyle: Object as PropType>, + categories: Array as PropType>, + discreteAxisDivisionMode: String as PropType, endOnTick: Boolean, - endValue: {}, - holidays: Array, - label: Object, + endValue: [Date, Number, String], + holidays: Array as PropType<(Array) | Array>, + label: Object as PropType>, linearThreshold: Number, logarithmBase: Number, - marker: Object, - maxRange: {}, - minorTick: Object, - minorTickCount: {}, - minorTickInterval: {}, - minRange: {}, - placeholderHeight: {}, + marker: Object as PropType>, + maxRange: [Number, Object, String] as PropType | TimeInterval>, + minorTick: Object as PropType>, + minorTickCount: Number, + minorTickInterval: [Number, Object, String] as PropType | TimeInterval>, + minRange: [Number, Object, String] as PropType | TimeInterval>, + placeholderHeight: Number, showCustomBoundaryTicks: Boolean, - singleWorkdays: Array, - startValue: {}, - tick: Object, - tickInterval: {}, - type: {}, - valueType: {}, + singleWorkdays: Array as PropType<(Array) | Array>, + startValue: [Date, Number, String], + tick: Object as PropType>, + tickInterval: [Number, Object, String] as PropType | TimeInterval>, + type: String as PropType, + valueType: String as PropType, workdaysOnly: Boolean, - workWeek: Array + workWeek: Array as PropType> } }; @@ -1538,10 +1608,10 @@ const DxScaleLabelConfig = { "update:visible": null, }, props: { - customizeText: Function, - font: Object, - format: {}, - overlappingBehavior: {}, + customizeText: Function as PropType<((scaleValue: { value: Date | number | string, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + overlappingBehavior: String as PropType, topIndent: Number, visible: Boolean } @@ -1570,12 +1640,12 @@ const DxSelectionStyleConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - dashStyle: {}, - hatching: Object, + border: Object as PropType>, + color: [Object, String] as PropType>, + dashStyle: String as PropType, + hatching: Object as PropType>, highlight: Boolean, - size: {}, + size: Number, width: Number } }; @@ -1639,43 +1709,43 @@ const DxSeriesConfig = { "update:width": null, }, props: { - aggregation: Object, + aggregation: Object as PropType>, argumentField: String, - axis: {}, - barOverlapGroup: {}, - barPadding: {}, - barWidth: {}, - border: Object, + axis: String, + barOverlapGroup: String, + barPadding: Number, + barWidth: Number, + border: Object as PropType>, closeValueField: String, - color: {}, + color: [Object, String] as PropType>, cornerRadius: Number, - dashStyle: {}, + dashStyle: String as PropType, highValueField: String, - hoverMode: {}, - hoverStyle: Object, + hoverMode: String as PropType, + hoverStyle: Object as PropType>, ignoreEmptyPoints: Boolean, innerColor: String, - label: Object, + label: Object as PropType>, lowValueField: String, - maxLabelCount: {}, - minBarSize: {}, - name: {}, + maxLabelCount: Number, + minBarSize: Number, + name: String, opacity: Number, openValueField: String, pane: String, - point: Object, + point: Object as PropType>, rangeValue1Field: String, rangeValue2Field: String, - reduction: Object, - selectionMode: {}, - selectionStyle: Object, + reduction: Object as PropType>, + selectionMode: String as PropType, + selectionStyle: Object as PropType>, showInLegend: Boolean, sizeField: String, stack: String, tag: {}, tagField: String, - type: {}, - valueErrorBar: Object, + type: String as PropType, + valueErrorBar: Object as PropType>, valueField: String, visible: Boolean, width: Number @@ -1699,8 +1769,8 @@ const DxSeriesBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, + color: String, + dashStyle: String as PropType, visible: Boolean, width: Number } @@ -1720,7 +1790,7 @@ const DxSeriesTemplateConfig = { "update:nameField": null, }, props: { - customizeSeries: Function, + customizeSeries: Function as PropType<((seriesName: any) => ChartSeries)>, nameField: String } }; @@ -1739,7 +1809,7 @@ const DxShutterConfig = { "update:opacity": null, }, props: { - color: {}, + color: String, opacity: Number } }; @@ -1758,8 +1828,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -1806,13 +1876,13 @@ const DxSliderMarkerConfig = { }, props: { color: String, - customizeText: Function, - font: Object, - format: {}, + customizeText: Function as PropType<((scaleValue: { value: Date | number | string, valueText: string }) => string)>, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, invalidRangeColor: String, paddingLeftRight: Number, paddingTopBottom: Number, - placeholderHeight: {}, + placeholderHeight: Number, visible: Boolean } }; @@ -1838,11 +1908,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -1924,15 +1994,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -1955,8 +2025,8 @@ const DxUrlConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: String, + rangeMinPoint: String } }; @@ -1975,9 +2045,9 @@ const DxValueConfig = { "update:startValue": null, }, props: { - endValue: {}, - length: {}, - startValue: {} + endValue: [Date, Number, String], + length: [Number, Object, String] as PropType | TimeInterval>, + startValue: [Date, Number, String] } }; @@ -2004,10 +2074,10 @@ const DxValueAxisConfig = { props: { inverted: Boolean, logarithmBase: Number, - max: {}, - min: {}, - type: {}, - valueType: {} + max: Number, + min: Number, + type: String as PropType, + valueType: String as PropType } }; @@ -2033,13 +2103,13 @@ const DxValueErrorBarConfig = { }, props: { color: String, - displayMode: {}, + displayMode: String as PropType, edgeLength: Number, - highValueField: {}, + highValueField: String, lineWidth: Number, - lowValueField: {}, - opacity: {}, - type: {}, + lowValueField: String, + opacity: Number, + type: String as PropType, value: Number } }; @@ -2058,8 +2128,8 @@ const DxWidthConfig = { "update:rangeMinPoint": null, }, props: { - rangeMaxPoint: {}, - rangeMinPoint: {} + rangeMaxPoint: Number, + rangeMinPoint: Number } }; diff --git a/packages/devextreme-vue/src/range-slider.ts b/packages/devextreme-vue/src/range-slider.ts index c85dc9e71c6a..05b79a2bca06 100644 --- a/packages/devextreme-vue/src/range-slider.ts +++ b/packages/devextreme-vue/src/range-slider.ts @@ -1,6 +1,26 @@ -import RangeSlider, { Properties } from "devextreme/ui/range_slider"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import RangeSlider, { Properties } from "devextreme/ui/range_slider"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/range_slider"; +import { + ValidationMessageMode, + Position, + ValidationStatus, + SliderValueChangeMode, + Format, + VerticalEdge, + TooltipShowMode, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, end: Number, endName: String, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, keyStep: Number, - label: Object, + label: Object as PropType>, max: Number, min: Number, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, showRange: Boolean, @@ -78,16 +98,16 @@ const componentConfig = { startName: String, step: Number, tabIndex: Number, - tooltip: Object, + tooltip: Object as PropType>, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: Array, - valueChangeMode: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: Array as PropType>, + valueChangeMode: String as PropType, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -165,10 +185,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -188,8 +208,8 @@ const DxLabelConfig = { "update:visible": null, }, props: { - format: {}, - position: {}, + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, visible: Boolean } }; @@ -214,9 +234,9 @@ const DxTooltipConfig = { }, props: { enabled: Boolean, - format: {}, - position: {}, - showMode: {} + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, + showMode: String as PropType } }; diff --git a/packages/devextreme-vue/src/recurrence-editor.ts b/packages/devextreme-vue/src/recurrence-editor.ts index 007861c4ca35..8900dcdbda17 100644 --- a/packages/devextreme-vue/src/recurrence-editor.ts +++ b/packages/devextreme-vue/src/recurrence-editor.ts @@ -1,6 +1,19 @@ -import RecurrenceEditor, { Properties } from "devextreme/ui/recurrence_editor"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import RecurrenceEditor, { Properties } from "devextreme/ui/recurrence_editor"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/recurrence_editor"; +import { + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/resizable.ts b/packages/devextreme-vue/src/resizable.ts index c929519fdf35..fcfb87f5486c 100644 --- a/packages/devextreme-vue/src/resizable.ts +++ b/packages/devextreme-vue/src/resizable.ts @@ -1,6 +1,16 @@ -import Resizable, { Properties } from "devextreme/ui/resizable"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Resizable, { Properties } from "devextreme/ui/resizable"; +import { + ResizeHandle, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ResizeEvent, + ResizeEndEvent, + ResizeStartEvent, +} from "devextreme/ui/resizable"; type AccessibleOptions = Pick>, + handles: String as PropType, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, keepAspectRatio: Boolean, maxHeight: Number, maxWidth: Number, minHeight: Number, minWidth: Number, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onResize: Function as PropType<((e: ResizeEvent) => void)>, + onResizeEnd: Function as PropType<((e: ResizeEndEvent) => void)>, + onResizeStart: Function as PropType<((e: ResizeStartEvent) => void)>, rtlEnabled: Boolean, - width: [Function, Number, String] + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/responsive-box.ts b/packages/devextreme-vue/src/responsive-box.ts index 8d20812c8f4b..287aa7aa3d58 100644 --- a/packages/devextreme-vue/src/responsive-box.ts +++ b/packages/devextreme-vue/src/responsive-box.ts @@ -1,7 +1,26 @@ export { ExplicitTypes } from "devextreme/ui/responsive_box"; -import ResponsiveBox, { Properties } from "devextreme/ui/responsive_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ResponsiveBox, { Properties } from "devextreme/ui/responsive_box"; +import DataSource from "devextreme/data/data_source"; +import { + dxResponsiveBoxItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, +} from "devextreme/ui/responsive_box"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>>, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - height: [Function, Number, String], + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - rows: Array, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + rows: Array as PropType>>, rtlEnabled: Boolean, - screenByWidth: Function, + screenByWidth: Function as PropType<(() => void)>, singleColumnScreen: String, visible: Boolean, - width: [Function, Number, String] + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -120,7 +139,7 @@ const DxColConfig = { props: { baseSize: [Number, String], ratio: Number, - screen: {}, + screen: String, shrink: Number } }; @@ -146,7 +165,7 @@ const DxItemConfig = { props: { disabled: Boolean, html: String, - location: [Array, Object], + location: [Array, Object] as PropType> | Record>, template: {}, text: String, visible: Boolean @@ -175,10 +194,10 @@ const DxLocationConfig = { }, props: { col: Number, - colspan: {}, + colspan: Number, row: Number, - rowspan: {}, - screen: {} + rowspan: Number, + screen: String } }; @@ -201,7 +220,7 @@ const DxRowConfig = { props: { baseSize: [Number, String], ratio: Number, - screen: {}, + screen: String, shrink: Number } }; diff --git a/packages/devextreme-vue/src/sankey.ts b/packages/devextreme-vue/src/sankey.ts index e816d5297f97..beb90f8edb49 100644 --- a/packages/devextreme-vue/src/sankey.ts +++ b/packages/devextreme-vue/src/sankey.ts @@ -1,6 +1,50 @@ -import Sankey, { Properties } from "devextreme/viz/sankey"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Sankey, { Properties } from "devextreme/viz/sankey"; +import DataSource from "devextreme/data/data_source"; +import { + VerticalAlignment, + ExportFormat, + Format, + HorizontalAlignment, + VerticalEdge, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + LinkClickEvent, + LinkHoverEvent, + NodeClickEvent, + NodeHoverEvent, + OptionChangedEvent, + dxSankeyNode, + SankeyColorMode, +} from "devextreme/viz/sankey"; +import { + Palette, + PaletteExtensionMode, + Theme, + DashStyle, + HatchDirection, + Font, + TextOverflow, + WordWrap, +} from "devextreme/common/charts"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + alignment: [Array, String] as PropType | VerticalAlignment>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - export: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, hoverEnabled: Boolean, - label: Object, - link: Object, - loadingIndicator: Object, - margin: Object, - node: Object, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onLinkClick: Function, - onLinkHoverChanged: Function, - onNodeClick: Function, - onNodeHoverChanged: Function, - onOptionChanged: Function, - palette: {}, - paletteExtensionMode: {}, + label: Object as PropType>, + link: Object as PropType>, + loadingIndicator: Object as PropType>, + margin: Object as PropType>, + node: Object as PropType>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onLinkClick: Function as PropType<((e: LinkClickEvent) => void)>, + onLinkHoverChanged: Function as PropType<((e: LinkHoverEvent) => void)>, + onNodeClick: Function as PropType<((e: NodeClickEvent) => void)>, + onNodeHoverChanged: Function as PropType<((e: NodeHoverEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, pathModified: Boolean, redrawOnResize: Boolean, rtlEnabled: Boolean, - size: Object, + size: Object as PropType>, sortData: {}, sourceField: String, targetField: String, - theme: {}, - title: [Object, String], - tooltip: Object, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, weightField: String }, emits: { @@ -188,11 +232,11 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, - opacity: {}, - visible: {}, - width: {} + color: String, + dashStyle: String as PropType, + opacity: Number, + visible: Boolean, + width: Number } }; @@ -218,10 +262,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -269,10 +313,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -293,7 +337,7 @@ const DxHatchingConfig = { "update:width": null, }, props: { - direction: {}, + direction: String as PropType, opacity: Number, step: Number, width: Number @@ -316,10 +360,10 @@ const DxHoverStyleConfig = { "update:opacity": null, }, props: { - border: Object, - color: {}, - hatching: Object, - opacity: {} + border: Object as PropType>, + color: String, + hatching: Object as PropType>, + opacity: Number } }; @@ -344,12 +388,12 @@ const DxLabelConfig = { "update:visible": null, }, props: { - border: Object, - customizeText: Function, - font: Object, + border: Object as PropType>, + customizeText: Function as PropType<((itemInfo: dxSankeyNode) => string)>, + font: Object as PropType>, horizontalOffset: Number, - overlappingBehavior: {}, - shadow: Object, + overlappingBehavior: String as PropType, + shadow: Object as PropType>, useNodeColors: Boolean, verticalOffset: Number, visible: Boolean @@ -379,10 +423,10 @@ const DxLinkConfig = { "update:opacity": null, }, props: { - border: Object, + border: Object as PropType>, color: String, - colorMode: {}, - hoverStyle: Object, + colorMode: String as PropType, + hoverStyle: Object as PropType>, opacity: Number } }; @@ -411,7 +455,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -461,9 +505,9 @@ const DxNodeConfig = { "update:width": null, }, props: { - border: Object, - color: {}, - hoverStyle: Object, + border: Object as PropType>, + color: String, + hoverStyle: Object as PropType>, opacity: Number, padding: Number, width: Number @@ -490,9 +534,9 @@ const DxSankeyborderConfig = { "update:width": null, }, props: { - color: {}, - visible: {}, - width: {} + color: String, + visible: Boolean, + width: Number } }; @@ -535,8 +579,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -557,11 +601,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -589,15 +633,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -636,22 +680,22 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, cornerRadius: Number, - customizeLinkTooltip: {}, - customizeNodeTooltip: {}, + customizeLinkTooltip: Function as PropType<((info: { source: string, target: string, weight: number }) => Record)>, + customizeNodeTooltip: Function as PropType<((info: { label: string, title: string, weightIn: number, weightOut: number }) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, linkTooltipTemplate: {}, nodeTooltipTemplate: {}, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -680,8 +724,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } diff --git a/packages/devextreme-vue/src/scheduler.ts b/packages/devextreme-vue/src/scheduler.ts index 20f24039a619..48e4dca6beee 100644 --- a/packages/devextreme-vue/src/scheduler.ts +++ b/packages/devextreme-vue/src/scheduler.ts @@ -1,6 +1,51 @@ -import Scheduler, { Properties } from "devextreme/ui/scheduler"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Scheduler, { Properties } from "devextreme/ui/scheduler"; +import DataSource from "devextreme/data/data_source"; +import dxScheduler from "devextreme/ui/scheduler"; +import dxSortable from "devextreme/ui/sortable"; +import dxDraggable from "devextreme/ui/draggable"; +import { + AllDayPanelMode, + ViewType, + dxSchedulerAppointment, + CellAppointmentsLimit, + AppointmentAddedEvent, + AppointmentAddingEvent, + AppointmentClickEvent, + AppointmentContextMenuEvent, + AppointmentDblClickEvent, + AppointmentDeletedEvent, + AppointmentDeletingEvent, + AppointmentFormOpeningEvent, + AppointmentRenderedEvent, + AppointmentTooltipShowingEvent, + AppointmentUpdatedEvent, + AppointmentUpdatingEvent, + CellClickEvent, + CellContextMenuEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + RecurrenceEditMode, + dxSchedulerScrolling, +} from "devextreme/ui/scheduler"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + FirstDayOfWeek, + ScrollMode, + Orientation, +} from "devextreme/common"; +import { + event, +} from "devextreme/events/index"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, appointmentCollectorTemplate: {}, - appointmentDragging: Object, + appointmentDragging: Object as PropType>, appointmentTemplate: {}, appointmentTooltipTemplate: {}, cellDuration: Number, crossScrollingEnabled: Boolean, currentDate: [Date, Number, String], - currentView: {}, - customizeDateNavigatorText: {}, + currentView: String as PropType, + customizeDateNavigatorText: Function as PropType<((info: { endDate: Date, startDate: Date, text: string }) => string)>, dataCellTemplate: {}, - dataSource: {}, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, dateCellTemplate: {}, - dateSerializationFormat: {}, + dateSerializationFormat: String, descriptionExpr: String, disabled: Boolean, dropDownAppointmentTemplate: {}, - editing: [Boolean, Object], - elementAttr: Object, + editing: [Boolean, Object] as PropType>, + elementAttr: Object as PropType>, endDateExpr: String, endDateTimeZoneExpr: String, endDayHour: Number, - firstDayOfWeek: {}, + firstDayOfWeek: Number as PropType, focusStateEnabled: Boolean, groupByDate: Boolean, - groups: Array, - height: {}, - hint: {}, + groups: Array as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, indicatorUpdateInterval: Number, - max: {}, - maxAppointmentsPerCell: {}, - min: {}, + max: [Date, Number, String], + maxAppointmentsPerCell: [String, Number] as PropType, + min: [Date, Number, String], noDataText: String, offset: Number, - onAppointmentAdded: Function, - onAppointmentAdding: Function, - onAppointmentClick: Function, - onAppointmentContextMenu: Function, - onAppointmentDblClick: Function, - onAppointmentDeleted: Function, - onAppointmentDeleting: Function, - onAppointmentFormOpening: Function, - onAppointmentRendered: Function, - onAppointmentTooltipShowing: Function, - onAppointmentUpdated: Function, - onAppointmentUpdating: Function, - onCellClick: Function, - onCellContextMenu: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - recurrenceEditMode: {}, + onAppointmentAdded: Function as PropType<((e: AppointmentAddedEvent) => void)>, + onAppointmentAdding: Function as PropType<((e: AppointmentAddingEvent) => void)>, + onAppointmentClick: Function as PropType<((e: AppointmentClickEvent) => void)>, + onAppointmentContextMenu: Function as PropType<((e: AppointmentContextMenuEvent) => void)>, + onAppointmentDblClick: Function as PropType<((e: AppointmentDblClickEvent) => void)>, + onAppointmentDeleted: Function as PropType<((e: AppointmentDeletedEvent) => void)>, + onAppointmentDeleting: Function as PropType<((e: AppointmentDeletingEvent) => void)>, + onAppointmentFormOpening: Function as PropType<((e: AppointmentFormOpeningEvent) => void)>, + onAppointmentRendered: Function as PropType<((e: AppointmentRenderedEvent) => void)>, + onAppointmentTooltipShowing: Function as PropType<((e: AppointmentTooltipShowingEvent) => void)>, + onAppointmentUpdated: Function as PropType<((e: AppointmentUpdatedEvent) => void)>, + onAppointmentUpdating: Function as PropType<((e: AppointmentUpdatingEvent) => void)>, + onCellClick: Function as PropType<((e: CellClickEvent) => void)>, + onCellContextMenu: Function as PropType<((e: CellContextMenuEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + recurrenceEditMode: String as PropType, recurrenceExceptionExpr: String, recurrenceRuleExpr: String, remoteFiltering: Boolean, resourceCellTemplate: {}, - resources: Array, + resources: Array as PropType>>, rtlEnabled: Boolean, - scrolling: Object, - selectedCellData: Array, + scrolling: Object as PropType, + selectedCellData: Array as PropType>, shadeUntilCurrentTime: Boolean, showAllDayPanel: Boolean, showCurrentTimeIndicator: Boolean, @@ -165,9 +210,9 @@ const componentConfig = { timeCellTemplate: {}, timeZone: String, useDropDownViewSwitcher: Boolean, - views: Array, + views: Array as PropType | string>>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -292,12 +337,12 @@ const DxAppointmentDraggingConfig = { props: { autoScroll: Boolean, data: {}, - group: {}, - onAdd: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onRemove: Function, + group: String, + onAdd: Function as PropType<((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void)>, + onDragEnd: Function as PropType<((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toItemData: any }) => void)>, + onDragMove: Function as PropType<((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void)>, + onDragStart: Function as PropType<((e: { cancel: boolean, component: dxScheduler, event: event, fromData: any, itemData: any, itemElement: any }) => void)>, + onRemove: Function as PropType<((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable }) => void)>, scrollSensitivity: Number, scrollSpeed: Number } @@ -352,12 +397,12 @@ const DxResourceConfig = { props: { allowMultiple: Boolean, colorExpr: String, - dataSource: {}, - displayExpr: [Function, String], + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + displayExpr: [Function, String] as PropType<(((resource: any) => string)) | string>, fieldExpr: String, label: String, useColorAsDefault: Boolean, - valueExpr: [Function, String] + valueExpr: [Function, String] as PropType<((() => void)) | string> } }; @@ -375,7 +420,7 @@ const DxScrollingConfig = { "update:mode": null, }, props: { - mode: {} + mode: String as PropType } }; @@ -416,7 +461,7 @@ const DxViewConfig = { }, props: { agendaDuration: Number, - allDayPanelMode: {}, + allDayPanelMode: String as PropType, appointmentCollectorTemplate: {}, appointmentTemplate: {}, appointmentTooltipTemplate: {}, @@ -425,20 +470,20 @@ const DxViewConfig = { dateCellTemplate: {}, dropDownAppointmentTemplate: {}, endDayHour: Number, - firstDayOfWeek: {}, + firstDayOfWeek: Number as PropType, groupByDate: Boolean, - groupOrientation: {}, - groups: Array, + groupOrientation: String as PropType, + groups: Array as PropType>, intervalCount: Number, - maxAppointmentsPerCell: {}, - name: {}, + maxAppointmentsPerCell: [String, Number] as PropType, + name: String, offset: Number, resourceCellTemplate: {}, - scrolling: Object, - startDate: {}, + scrolling: Object as PropType, + startDate: [Date, Number, String], startDayHour: Number, timeCellTemplate: {}, - type: {} + type: String as PropType } }; diff --git a/packages/devextreme-vue/src/scroll-view.ts b/packages/devextreme-vue/src/scroll-view.ts index 3b8ccd704014..c6b290153e94 100644 --- a/packages/devextreme-vue/src/scroll-view.ts +++ b/packages/devextreme-vue/src/scroll-view.ts @@ -1,6 +1,19 @@ -import ScrollView, { Properties } from "devextreme/ui/scroll_view"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ScrollView, { Properties } from "devextreme/ui/scroll_view"; +import { + ScrollDirection, +} from "devextreme/common"; +import { + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + PullDownEvent, + ReachBottomEvent, + ScrollEvent, + UpdatedEvent, +} from "devextreme/ui/scroll_view"; type AccessibleOptions = Pick, disabled: Boolean, - elementAttr: Object, - height: {}, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onPullDown: Function, - onReachBottom: Function, - onScroll: Function, - onUpdated: Function, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPullDown: Function as PropType<((e: PullDownEvent) => void)>, + onReachBottom: Function as PropType<((e: ReachBottomEvent) => void)>, + onScroll: Function as PropType<((e: ScrollEvent) => void)>, + onUpdated: Function as PropType<((e: UpdatedEvent) => void)>, pulledDownText: String, pullingDownText: String, reachBottomText: String, @@ -52,9 +65,9 @@ const componentConfig = { rtlEnabled: Boolean, scrollByContent: Boolean, scrollByThumb: Boolean, - showScrollbar: String, + showScrollbar: String as PropType<"onScroll" | "onHover" | "always" | "never">, useNative: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/select-box.ts b/packages/devextreme-vue/src/select-box.ts index 25de8382b4b0..ef9f164df19f 100644 --- a/packages/devextreme-vue/src/select-box.ts +++ b/packages/devextreme-vue/src/select-box.ts @@ -1,6 +1,98 @@ -import SelectBox, { Properties } from "devextreme/ui/select_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import SelectBox, { Properties } from "devextreme/ui/select_box"; +import DataSource from "devextreme/data/data_source"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + TextEditorButton, + LabelMode, + SimplifiedSearchMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + ContentReadyEvent, + CopyEvent, + CustomItemCreatingEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + ItemClickEvent, + KeyDownEvent, + KeyUpEvent, + OpenedEvent, + OptionChangedEvent, + PasteEvent, + SelectionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/select_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, customItemCreateEvent: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayExpr: {}, - displayValue: {}, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + displayValue: String, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, fieldTemplate: {}, focusStateEnabled: Boolean, grouped: Boolean, groupTemplate: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, label: String, - labelMode: {}, + labelMode: String as PropType, maxLength: [Number, String], minSearchLength: Number, name: String, noDataText: String, - onChange: Function, - onClosed: Function, - onContentReady: Function, - onCopy: Function, - onCustomItemCreating: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onItemClick: Function, - onKeyDown: Function, - onKeyUp: Function, - onOpened: Function, - onOptionChanged: Function, - onPaste: Function, - onSelectionChanged: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCustomItemCreating: Function as PropType<((e: CustomItemCreatingEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, searchEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, searchTimeout: Number, selectedItem: {}, showClearButton: Boolean, @@ -159,20 +251,20 @@ const componentConfig = { showDropDownButton: Boolean, showSelectionControls: Boolean, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useItemTextAsTitle: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: {}, valueChangeEvent: String, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapItemText: Boolean }, emits: { @@ -290,8 +382,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -313,8 +405,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -352,9 +444,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -376,8 +468,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -443,10 +535,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -457,28 +549,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -489,9 +581,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -520,7 +612,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -551,16 +643,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -608,8 +700,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -669,31 +761,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -716,13 +808,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -748,16 +840,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -780,7 +872,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -811,19 +903,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/slider.ts b/packages/devextreme-vue/src/slider.ts index c7bf2d098b01..649b05e7e9f4 100644 --- a/packages/devextreme-vue/src/slider.ts +++ b/packages/devextreme-vue/src/slider.ts @@ -1,6 +1,26 @@ -import Slider, { Properties } from "devextreme/ui/slider"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Slider, { Properties } from "devextreme/ui/slider"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/slider"; +import { + ValidationMessageMode, + Position, + ValidationStatus, + SliderValueChangeMode, + Format, + VerticalEdge, + TooltipShowMode, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, keyStep: Number, - label: Object, + label: Object as PropType>, max: Number, min: Number, name: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, showRange: Boolean, step: Number, tabIndex: Number, - tooltip: Object, + tooltip: Object as PropType>, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: Number, - valueChangeMode: {}, + valueChangeMode: String as PropType, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -156,10 +176,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -179,8 +199,8 @@ const DxLabelConfig = { "update:visible": null, }, props: { - format: {}, - position: {}, + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, visible: Boolean } }; @@ -205,9 +225,9 @@ const DxTooltipConfig = { }, props: { enabled: Boolean, - format: {}, - position: {}, - showMode: {} + format: [Object, String, Function] as PropType string)) | Record | string>, + position: String as PropType, + showMode: String as PropType } }; diff --git a/packages/devextreme-vue/src/sortable.ts b/packages/devextreme-vue/src/sortable.ts index cf40368b05d5..fa2f8f4d776b 100644 --- a/packages/devextreme-vue/src/sortable.ts +++ b/packages/devextreme-vue/src/sortable.ts @@ -1,6 +1,24 @@ -import Sortable, { Properties } from "devextreme/ui/sortable"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Sortable, { Properties } from "devextreme/ui/sortable"; +import { + DragDirection, + DragHighlight, + Orientation, +} from "devextreme/common"; +import { + AddEvent, + DisposingEvent, + DragChangeEvent, + DragEndEvent, + DragMoveEvent, + DragStartEvent, + InitializedEvent, + OptionChangedEvent, + RemoveEvent, + ReorderEvent, +} from "devextreme/ui/sortable"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | string>, data: {}, - dragDirection: {}, + dragDirection: String as PropType, dragTemplate: {}, - dropFeedbackMode: {}, - elementAttr: Object, + dropFeedbackMode: String as PropType, + elementAttr: Object as PropType>, filter: String, - group: {}, + group: String, handle: String, - height: {}, - itemOrientation: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + itemOrientation: String as PropType, moveItemOnDrop: Boolean, - onAdd: Function, - onDisposing: Function, - onDragChange: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onInitialized: Function, - onOptionChanged: Function, - onRemove: Function, - onReorder: Function, + onAdd: Function as PropType<((e: AddEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDragChange: Function as PropType<((e: DragChangeEvent) => void)>, + onDragEnd: Function as PropType<((e: DragEndEvent) => void)>, + onDragMove: Function as PropType<((e: DragMoveEvent) => void)>, + onDragStart: Function as PropType<((e: DragStartEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onRemove: Function as PropType<((e: RemoveEvent) => void)>, + onReorder: Function as PropType<((e: ReorderEvent) => void)>, rtlEnabled: Boolean, scrollSensitivity: Number, scrollSpeed: Number, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/sparkline.ts b/packages/devextreme-vue/src/sparkline.ts index a2205e6e30c7..f4bc97eda985 100644 --- a/packages/devextreme-vue/src/sparkline.ts +++ b/packages/devextreme-vue/src/sparkline.ts @@ -1,6 +1,39 @@ -import Sparkline, { Properties } from "devextreme/viz/sparkline"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Sparkline, { Properties } from "devextreme/viz/sparkline"; +import DataSource from "devextreme/data/data_source"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + SparklineType, +} from "devextreme/viz/sparkline"; +import { + PointSymbol, + Theme, + DashStyle, + Font, +} from "devextreme/common/charts"; +import { + Format, +} from "devextreme/common"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, firstLastColor: String, ignoreEmptyPoints: Boolean, lineColor: String, lineWidth: Number, lossColor: String, - margin: Object, + margin: Object as PropType>, maxColor: String, - maxValue: {}, + maxValue: Number, minColor: String, - minValue: {}, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, + minValue: Number, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, pathModified: Boolean, pointColor: String, pointSize: Number, - pointSymbol: {}, + pointSymbol: String as PropType, rtlEnabled: Boolean, showFirstLast: Boolean, showMinMax: Boolean, - size: Object, - theme: {}, - tooltip: Object, - type: {}, + size: Object as PropType>, + theme: String as PropType, + tooltip: Object as PropType>, + type: String as PropType, valueField: String, winColor: String, winlossThreshold: Number @@ -170,8 +203,8 @@ const DxBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -221,10 +254,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -291,8 +324,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -325,21 +358,21 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((pointsInfo: any) => Record)>, enabled: Boolean, - font: Object, - format: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, interactive: Boolean, - opacity: {}, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; diff --git a/packages/devextreme-vue/src/speed-dial-action.ts b/packages/devextreme-vue/src/speed-dial-action.ts index f8a027d4d9d0..36ba9edaf96d 100644 --- a/packages/devextreme-vue/src/speed-dial-action.ts +++ b/packages/devextreme-vue/src/speed-dial-action.ts @@ -1,6 +1,14 @@ -import SpeedDialAction, { Properties } from "devextreme/ui/speed_dial_action"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import SpeedDialAction, { Properties } from "devextreme/ui/speed_dial_action"; +import { + ClickEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/speed_dial_action"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, icon: String, index: Number, label: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, tabIndex: Number, visible: Boolean diff --git a/packages/devextreme-vue/src/splitter.ts b/packages/devextreme-vue/src/splitter.ts index 6fabf3e5f2d4..c29ee3ea9476 100644 --- a/packages/devextreme-vue/src/splitter.ts +++ b/packages/devextreme-vue/src/splitter.ts @@ -1,7 +1,34 @@ export { ExplicitTypes } from "devextreme/ui/splitter"; -import Splitter, { Properties } from "devextreme/ui/splitter"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Splitter, { Properties } from "devextreme/ui/splitter"; +import DataSource from "devextreme/data/data_source"; +import { + dxSplitterItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemCollapsedEvent, + ItemContextMenuEvent, + ItemExpandedEvent, + ItemRenderedEvent, + OptionChangedEvent, + ResizeEvent, + ResizeEndEvent, + ResizeStartEvent, + dxSplitterOptions, +} from "devextreme/ui/splitter"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Orientation, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - height: {}, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hoverStateEnabled: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemCollapsed: Function, - onItemContextMenu: Function, - onItemExpanded: Function, - onItemRendered: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - orientation: {}, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemCollapsed: Function as PropType<((e: ItemCollapsedEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemExpanded: Function as PropType<((e: ItemExpandedEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onResize: Function as PropType<((e: ResizeEvent) => void)>, + onResizeEnd: Function as PropType<((e: ResizeEndEvent) => void)>, + onResizeStart: Function as PropType<((e: ResizeStartEvent) => void)>, + orientation: String as PropType, rtlEnabled: Boolean, separatorSize: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -130,13 +157,13 @@ const DxItemConfig = { }, props: { collapsed: Boolean, - collapsedSize: {}, + collapsedSize: [Number, String], collapsible: Boolean, - maxSize: {}, - minSize: {}, + maxSize: [Number, String], + minSize: [Number, String], resizable: Boolean, - size: {}, - splitter: {}, + size: [Number, String], + splitter: Object as PropType>, template: {}, text: String, visible: Boolean diff --git a/packages/devextreme-vue/src/switch.ts b/packages/devextreme-vue/src/switch.ts index 9aea24617b20..0a83bd068b62 100644 --- a/packages/devextreme-vue/src/switch.ts +++ b/packages/devextreme-vue/src/switch.ts @@ -1,6 +1,19 @@ -import Switch, { Properties } from "devextreme/ui/switch"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Switch, { Properties } from "devextreme/ui/switch"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + OptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/switch"; +import { + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, isValid: Boolean, name: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, readOnly: Boolean, rtlEnabled: Boolean, switchedOffText: String, switchedOnText: String, tabIndex: Number, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/tab-panel.ts b/packages/devextreme-vue/src/tab-panel.ts index 674e3e8cefbc..a27846f63cc4 100644 --- a/packages/devextreme-vue/src/tab-panel.ts +++ b/packages/devextreme-vue/src/tab-panel.ts @@ -1,7 +1,36 @@ export { ExplicitTypes } from "devextreme/ui/tab_panel"; -import TabPanel, { Properties } from "devextreme/ui/tab_panel"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TabPanel, { Properties } from "devextreme/ui/tab_panel"; +import DataSource from "devextreme/data/data_source"; +import { + dxTabPanelItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + SelectionChangedEvent, + SelectionChangingEvent, + TitleClickEvent, + TitleHoldEvent, + TitleRenderedEvent, +} from "devextreme/ui/tab_panel"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + TabsIconPosition, + TabsStyle, + Position, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - iconPosition: {}, + iconPosition: String as PropType, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, itemTitleTemplate: {}, loop: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - onSelectionChanging: Function, - onTitleClick: Function, - onTitleHold: Function, - onTitleRendered: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, + onTitleClick: Function as PropType<((e: TitleClickEvent) => void)>, + onTitleHold: Function as PropType<((e: TitleHoldEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, repaintChangesOnly: Boolean, rtlEnabled: Boolean, scrollByContent: Boolean, @@ -95,12 +124,12 @@ const componentConfig = { selectedIndex: Number, selectedItem: {}, showNavButtons: Boolean, - stylingMode: {}, + stylingMode: String as PropType, swipeEnabled: Boolean, tabIndex: Number, - tabsPosition: {}, + tabsPosition: String as PropType, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/tabs.ts b/packages/devextreme-vue/src/tabs.ts index 9439e59ea8c8..c0484d3854fe 100644 --- a/packages/devextreme-vue/src/tabs.ts +++ b/packages/devextreme-vue/src/tabs.ts @@ -1,7 +1,34 @@ export { ExplicitTypes } from "devextreme/ui/tabs"; -import Tabs, { Properties } from "devextreme/ui/tabs"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Tabs, { Properties } from "devextreme/ui/tabs"; +import DataSource from "devextreme/data/data_source"; +import { + dxTabsItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + SelectionChangedEvent, + SelectionChangingEvent, +} from "devextreme/ui/tabs"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + TabsIconPosition, + Orientation, + SingleOrMultiple, + TabsStyle, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - iconPosition: {}, + iconPosition: String as PropType, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, - keyExpr: [Function, String], + keyExpr: [Function, String] as PropType<((() => void)) | string>, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - onSelectionChanging: Function, - orientation: {}, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, + orientation: String as PropType, repaintChangesOnly: Boolean, rtlEnabled: Boolean, scrollByContent: Boolean, scrollingEnabled: Boolean, selectedIndex: Number, selectedItem: {}, - selectedItemKeys: Array, - selectedItems: Array, - selectionMode: {}, + selectedItemKeys: Array as PropType>, + selectedItems: Array as PropType>, + selectionMode: String as PropType, showNavButtons: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/tag-box.ts b/packages/devextreme-vue/src/tag-box.ts index eb97396f6879..a08333a47c27 100644 --- a/packages/devextreme-vue/src/tag-box.ts +++ b/packages/devextreme-vue/src/tag-box.ts @@ -1,6 +1,99 @@ -import TagBox, { Properties } from "devextreme/ui/tag_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TagBox, { Properties } from "devextreme/ui/tag_box"; +import DataSource from "devextreme/data/data_source"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import { + ApplyValueMode, + TextEditorButton, + LabelMode, + SimplifiedSearchMode, + SelectAllMode, + EditorStyle, + ValidationMessageMode, + Mode, + Position, + ValidationStatus, + HorizontalAlignment, + VerticalAlignment, + TextEditorButtonLocation, + PositionAlignment, + Direction, + ButtonStyle, + ButtonType, + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; +import { + DropDownPredefinedButton, +} from "devextreme/ui/drop_down_editor/ui.drop_down_editor"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + ChangeEvent, + ClosedEvent, + ContentReadyEvent, + CustomItemCreatingEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + ItemClickEvent, + KeyDownEvent, + KeyUpEvent, + MultiTagPreparingEvent, + OpenedEvent, + OptionChangedEvent, + SelectAllValueChangedEvent, + SelectionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/tag_box"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + buttons: Array as PropType>, customItemCreateEvent: String, - dataSource: {}, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string>, deferRendering: Boolean, disabled: Boolean, - displayExpr: {}, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, dropDownButtonTemplate: {}, - dropDownOptions: Object, - elementAttr: Object, + dropDownOptions: Object as PropType | Record>, + elementAttr: Object as PropType>, fieldTemplate: {}, focusStateEnabled: Boolean, grouped: Boolean, groupTemplate: {}, - height: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, hideSelectedItems: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, label: String, - labelMode: {}, - maxDisplayedTags: {}, + labelMode: String as PropType, + maxDisplayedTags: Number, maxFilterQueryLength: Number, maxLength: [Number, String], minSearchLength: Number, multiline: Boolean, name: String, noDataText: String, - onChange: Function, - onClosed: Function, - onContentReady: Function, - onCustomItemCreating: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onItemClick: Function, - onKeyDown: Function, - onKeyUp: Function, - onMultiTagPreparing: Function, - onOpened: Function, - onOptionChanged: Function, - onSelectAllValueChanged: Function, - onSelectionChanged: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onClosed: Function as PropType<((e: ClosedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCustomItemCreating: Function as PropType<((e: CustomItemCreatingEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onMultiTagPreparing: Function as PropType<((e: MultiTagPreparingEvent) => void)>, + onOpened: Function as PropType<((e: OpenedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectAllValueChanged: Function as PropType<((e: SelectAllValueChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, opened: Boolean, openOnFieldClick: Boolean, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, searchEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, searchTimeout: Number, - selectAllMode: {}, + selectAllMode: String as PropType, selectAllText: String, - selectedItems: Array, + selectedItems: Array as PropType>, showClearButton: Boolean, showDataBeforeSearch: Boolean, showDropDownButton: Boolean, showMultiTagOnly: Boolean, showSelectionControls: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, tagTemplate: {}, text: String, useItemTextAsTitle: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, - value: Array, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, + value: Array as PropType>, valueChangeEvent: String, - valueExpr: [Function, String], + valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapItemText: Boolean }, emits: { @@ -308,8 +401,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -331,8 +424,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -370,9 +463,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -394,8 +487,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -461,10 +554,10 @@ const DxDropDownOptionsConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -475,28 +568,28 @@ const DxDropDownOptionsConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -507,9 +600,9 @@ const DxDropDownOptionsConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -538,7 +631,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -569,16 +662,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -626,8 +719,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -687,31 +780,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -734,13 +827,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -766,16 +859,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -798,7 +891,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -829,19 +922,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/text-area.ts b/packages/devextreme-vue/src/text-area.ts index 553981d74922..2e3001fa7f55 100644 --- a/packages/devextreme-vue/src/text-area.ts +++ b/packages/devextreme-vue/src/text-area.ts @@ -1,6 +1,31 @@ -import TextArea, { Properties } from "devextreme/ui/text_area"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TextArea, { Properties } from "devextreme/ui/text_area"; +import { + LabelMode, + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; +import { + ChangeEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/text_area"; type AccessibleOptions = Pick>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, - maxHeight: {}, + labelMode: String as PropType, + maxHeight: [Number, String], maxLength: [Number, String], - minHeight: {}, + minHeight: [Number, String], name: String, - onChange: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/text-box.ts b/packages/devextreme-vue/src/text-box.ts index 97a762244e99..ef7f68803690 100644 --- a/packages/devextreme-vue/src/text-box.ts +++ b/packages/devextreme-vue/src/text-box.ts @@ -1,6 +1,46 @@ -import TextBox, { Properties } from "devextreme/ui/text_box"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TextBox, { Properties } from "devextreme/ui/text_box"; +import { + TextBoxPredefinedButton, + TextEditorButton, + LabelMode, + MaskMode, + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, + TextEditorButtonLocation, + ButtonStyle, + ButtonType, +} from "devextreme/common"; +import { + TextBoxType, + ChangeEvent, + ContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/text_box"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, + labelMode: String as PropType, mask: String, maskChar: String, maskInvalidMessage: String, maskRules: {}, maxLength: [Number, String], - mode: {}, + mode: String as PropType, name: String, - onChange: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, showClearButton: Boolean, - showMaskMode: {}, + showMaskMode: String as PropType, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useMaskedValue: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -211,9 +251,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -258,31 +298,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; diff --git a/packages/devextreme-vue/src/tile-view.ts b/packages/devextreme-vue/src/tile-view.ts index 73ba3365dca5..461134b50112 100644 --- a/packages/devextreme-vue/src/tile-view.ts +++ b/packages/devextreme-vue/src/tile-view.ts @@ -1,7 +1,30 @@ export { ExplicitTypes } from "devextreme/ui/tile_view"; -import TileView, { Properties } from "devextreme/ui/tile_view"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TileView, { Properties } from "devextreme/ui/tile_view"; +import DataSource from "devextreme/data/data_source"; +import { + dxTileViewItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, +} from "devextreme/ui/tile_view"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + Orientation, + ScrollbarMode, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, + direction: String as PropType, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: [Function, Number, String], - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, itemMargin: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, - showScrollbar: {}, + showScrollbar: String as PropType, tabIndex: Number, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/toast.ts b/packages/devextreme-vue/src/toast.ts index d8db89885ca4..d53834b3c496 100644 --- a/packages/devextreme-vue/src/toast.ts +++ b/packages/devextreme-vue/src/toast.ts @@ -1,6 +1,37 @@ -import Toast, { Properties } from "devextreme/ui/toast"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Toast, { Properties } from "devextreme/ui/toast"; +import { + event, +} from "devextreme/events/index"; +import { + ContentReadyEvent, + DisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent, + OptionChangedEvent, + ShowingEvent, + ShownEvent, + ToastType, +} from "devextreme/ui/toast"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, closeOnClick: Boolean, - closeOnOutsideClick: [Boolean, Function], + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, closeOnSwipe: Boolean, contentTemplate: {}, deferRendering: Boolean, displayTime: Number, focusStateEnabled: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, message: String, - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onShowing: Function, - onShown: Function, - position: [Object, String], + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + position: [Object, String] as PropType>, rtlEnabled: Boolean, shading: Boolean, shadingColor: String, tabIndex: Number, - type: {}, + type: String as PropType, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} }, emits: { @@ -153,8 +184,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -176,8 +207,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -214,8 +245,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -238,7 +269,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -269,16 +300,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -300,8 +331,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -343,13 +374,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -375,16 +406,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -407,7 +438,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/toolbar.ts b/packages/devextreme-vue/src/toolbar.ts index cd4decdb2cf0..2db3c3d3eb1c 100644 --- a/packages/devextreme-vue/src/toolbar.ts +++ b/packages/devextreme-vue/src/toolbar.ts @@ -1,7 +1,32 @@ export { ExplicitTypes } from "devextreme/ui/toolbar"; -import Toolbar, { Properties } from "devextreme/ui/toolbar"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Toolbar, { Properties } from "devextreme/ui/toolbar"; +import DataSource from "devextreme/data/data_source"; +import { + dxToolbarItem, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent, + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + ToolbarItemLocation, + ToolbarItemComponent, +} from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick) | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - hint: {}, + elementAttr: Object as PropType>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, + items: Array as PropType>, itemTemplate: {}, menuItemTemplate: {}, multiline: Boolean, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemContextMenu: Function, - onItemHold: Function, - onItemRendered: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, rtlEnabled: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -121,18 +146,18 @@ const DxItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; diff --git a/packages/devextreme-vue/src/tooltip.ts b/packages/devextreme-vue/src/tooltip.ts index c5446fa99dca..97bf2ec8f7dd 100644 --- a/packages/devextreme-vue/src/tooltip.ts +++ b/packages/devextreme-vue/src/tooltip.ts @@ -1,6 +1,37 @@ -import Tooltip, { Properties } from "devextreme/ui/tooltip"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import Tooltip, { Properties } from "devextreme/ui/tooltip"; +import { + event, +} from "devextreme/events/index"; +import { + ContentReadyEvent, + DisposingEvent, + HiddenEvent, + HidingEvent, + InitializedEvent, + OptionChangedEvent, + ShowingEvent, + ShownEvent, +} from "devextreme/ui/tooltip"; +import { + Position, + HorizontalAlignment, + VerticalAlignment, + Direction, + PositionAlignment, +} from "devextreme/common"; +import { + PositionConfig, + CollisionResolution, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, disabled: Boolean, - height: [Function, Number, String], - hideEvent: {}, - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideEvent: [Object, String] as PropType | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onShowing: Function, - onShown: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onHidden: Function as PropType<((e: HiddenEvent) => void)>, + onHiding: Function as PropType<((e: HidingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onShowing: Function as PropType<((e: ShowingEvent) => void)>, + onShown: Function as PropType<((e: ShownEvent) => void)>, + position: [String, Object] as PropType>, rtlEnabled: Boolean, shading: Boolean, shadingColor: String, - showEvent: {}, + showEvent: [Object, String] as PropType | string>, target: {}, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} }, emits: { @@ -146,8 +177,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -169,8 +200,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -207,8 +238,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -231,7 +262,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -262,16 +293,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -293,8 +324,8 @@ const DxHideEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -312,8 +343,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -355,13 +386,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -387,16 +418,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -414,8 +445,8 @@ const DxShowEventConfig = { "update:name": null, }, props: { - delay: {}, - name: {} + delay: Number, + name: String } }; @@ -438,7 +469,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index d67cc79546f4..81a9a98da040 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -1,7 +1,184 @@ export { ExplicitTypes } from "devextreme/ui/tree_list"; -import TreeList, { Properties } from "devextreme/ui/tree_list"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TreeList, { Properties } from "devextreme/ui/tree_list"; +import DataSource from "devextreme/data/data_source"; +import dxTreeList from "devextreme/ui/tree_list"; +import dxOverlay from "devextreme/ui/overlay"; +import DOMComponent from "devextreme/core/dom_component"; +import dxPopup from "devextreme/ui/popup"; +import dxSortable from "devextreme/ui/sortable"; +import dxDraggable from "devextreme/ui/draggable"; +import { + ColumnResizeMode, + Pager, + DataChangeType, + FilterOperation, + FilterType, + FixedPosition, + SelectedFilterOperation, + ColumnChooserMode, + ColumnChooserSearchConfig, + ColumnChooserSelectionConfig, + HeaderFilterGroupInterval, + ColumnHeaderFilterSearchConfig, + HeaderFilterSearchConfig, + DataChange, + GridsEditMode, + GridsEditRefreshMode, + StartEditAction, + GridBase, + ApplyFilterMode, + EnterKeyAction, + EnterKeyDirection, + PagerPageSize, + DataRenderMode, + StateStoreType, +} from "devextreme/common/grids"; +import { + dxTreeListColumn, + TreeListFilterMode, + AdaptiveDetailRowPreparingEvent, + CellClickEvent, + CellDblClickEvent, + CellHoverChangedEvent, + CellPreparedEvent, + ContentReadyEvent, + ContextMenuPreparingEvent, + DataErrorOccurredEvent, + DisposingEvent, + EditCanceledEvent, + EditCancelingEvent, + EditingStartEvent, + EditorPreparedEvent, + EditorPreparingEvent, + FocusedCellChangedEvent, + FocusedCellChangingEvent, + FocusedRowChangedEvent, + FocusedRowChangingEvent, + InitializedEvent, + InitNewRowEvent, + KeyDownEvent, + NodesInitializedEvent, + OptionChangedEvent, + RowClickEvent, + RowCollapsedEvent, + RowCollapsingEvent, + RowDblClickEvent, + RowExpandedEvent, + RowExpandingEvent, + RowInsertedEvent, + RowInsertingEvent, + RowPreparedEvent, + RowRemovedEvent, + RowRemovingEvent, + RowUpdatedEvent, + RowUpdatingEvent, + RowValidatingEvent, + SavedEvent, + SavingEvent, + SelectionChangedEvent, + ToolbarPreparingEvent, + dxTreeListToolbar, + dxTreeListRowObject, + TreeListPredefinedColumnButton, + dxTreeListColumnButton, + TreeListCommandColumnType, + TreeListPredefinedToolbarItem, + dxTreeListToolbarItem, +} from "devextreme/ui/tree_list"; +import { + Mode, + DataStructure, + PagerBase, + ValidationRuleType, + HorizontalAlignment, + VerticalAlignment, + DataType, + Format as CommonFormat, + SortOrder, + SearchMode, + ComparisonOperator, + PositionAlignment, + Direction, + ToolbarItemLocation, + ToolbarItemComponent, + DisplayMode, + DragDirection, + DragHighlight, + ScrollMode, + ScrollbarMode, + SingleMultipleOrNone, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + dxFilterBuilderOptions, + dxFilterBuilderField, + FilterBuilderOperation, + dxFilterBuilderCustomOperation, + GroupOperation, + ContentReadyEvent as FilterBuilderContentReadyEvent, + DisposingEvent as FilterBuilderDisposingEvent, + EditorPreparedEvent as FilterBuilderEditorPreparedEvent, + EditorPreparingEvent as FilterBuilderEditorPreparingEvent, + InitializedEvent as FilterBuilderInitializedEvent, + OptionChangedEvent as FilterBuilderOptionChangedEvent, + ValueChangedEvent, +} from "devextreme/ui/filter_builder"; +import { + dxPopupOptions, + dxPopupToolbarItem, + ToolbarLocation, +} from "devextreme/ui/popup"; +import { + AnimationConfig, + AnimationState, + AnimationType, +} from "devextreme/animation/fx"; +import { + event, + EventInfo, +} from "devextreme/events/index"; +import { + CollisionResolution, + PositionConfig, + CollisionResolutionCombination, +} from "devextreme/animation/position"; +import { + Format, +} from "devextreme/localization"; +import { + dxFormSimpleItem, + dxFormOptions, + dxFormGroupItem, + dxFormTabbedItem, + dxFormEmptyItem, + dxFormButtonItem, + LabelLocation, + FormLabelMode, + ContentReadyEvent as FormContentReadyEvent, + DisposingEvent as FormDisposingEvent, + EditorEnterKeyEvent, + FieldDataChangedEvent, + InitializedEvent as FormInitializedEvent, + OptionChangedEvent as FormOptionChangedEvent, + FormItemComponent, + FormItemType, +} from "devextreme/ui/form"; +import { + Component, +} from "devextreme/core/component"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; +import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + columnFixing: Object as PropType>, columnHidingEnabled: Boolean, - columnMinWidth: {}, - columnResizingMode: {}, - columns: Array, - columnWidth: {}, - customizeColumns: Function, - dataSource: {}, - dataStructure: {}, + columnMinWidth: Number, + columnResizingMode: String as PropType, + columns: Array as PropType>, + columnWidth: [String, Number] as PropType, + customizeColumns: Function as PropType<((columns: Array) => void)>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + dataStructure: String as PropType, dateSerializationFormat: String, disabled: Boolean, - editing: Object, - elementAttr: Object, + editing: Object as PropType>, + elementAttr: Object as PropType>, errorRowEnabled: Boolean, - expandedRowKeys: Array, + expandedRowKeys: Array as PropType>, expandNodesOnFiltering: Boolean, - filterBuilder: Object, - filterBuilderPopup: Object, - filterMode: {}, - filterPanel: Object, - filterRow: Object, - filterSyncEnabled: {}, - filterValue: [Array, Function, String], + filterBuilder: Object as PropType>, + filterBuilderPopup: Object as PropType | Record>, + filterMode: String as PropType, + filterPanel: Object as PropType>, + filterRow: Object as PropType>, + filterSyncEnabled: [Boolean, String] as PropType, + filterValue: [Array, Function, String] as PropType | ((() => any)) | string>, focusedColumnIndex: Number, focusedRowEnabled: Boolean, focusedRowIndex: Number, focusedRowKey: {}, - hasItemsExpr: [Function, String], - headerFilter: Object, - height: {}, + hasItemsExpr: [Function, String] as PropType<((() => void)) | string>, + headerFilter: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, highlightChanges: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - itemsExpr: [Function, String], - keyboardNavigation: Object, - keyExpr: [Function, String], - loadPanel: Object, + itemsExpr: [Function, String] as PropType<((() => void)) | string>, + keyboardNavigation: Object as PropType>, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + loadPanel: Object as PropType>, noDataText: String, - onAdaptiveDetailRowPreparing: Function, - onCellClick: Function, - onCellDblClick: Function, - onCellHoverChanged: Function, - onCellPrepared: Function, - onContentReady: Function, - onContextMenuPreparing: Function, - onDataErrorOccurred: Function, - onDisposing: Function, - onEditCanceled: Function, - onEditCanceling: Function, - onEditingStart: Function, - onEditorPrepared: Function, - onEditorPreparing: Function, - onFocusedCellChanged: Function, - onFocusedCellChanging: Function, - onFocusedRowChanged: Function, - onFocusedRowChanging: Function, - onInitialized: Function, - onInitNewRow: Function, - onKeyDown: Function, - onNodesInitialized: Function, - onOptionChanged: Function, - onRowClick: Function, - onRowCollapsed: Function, - onRowCollapsing: Function, - onRowDblClick: Function, - onRowExpanded: Function, - onRowExpanding: Function, - onRowInserted: Function, - onRowInserting: Function, - onRowPrepared: Function, - onRowRemoved: Function, - onRowRemoving: Function, - onRowUpdated: Function, - onRowUpdating: Function, - onRowValidating: Function, - onSaved: Function, - onSaving: Function, - onSelectionChanged: Function, - onToolbarPreparing: Function, - pager: Object, - paging: Object, - parentIdExpr: [Function, String], - remoteOperations: {}, + onAdaptiveDetailRowPreparing: Function as PropType<((e: AdaptiveDetailRowPreparingEvent) => void)>, + onCellClick: Function as PropType<((e: CellClickEvent) => void)>, + onCellDblClick: Function as PropType<((e: CellDblClickEvent) => void)>, + onCellHoverChanged: Function as PropType<((e: CellHoverChangedEvent) => void)>, + onCellPrepared: Function as PropType<((e: CellPreparedEvent) => void)>, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onContextMenuPreparing: Function as PropType<((e: ContextMenuPreparingEvent) => void)>, + onDataErrorOccurred: Function as PropType<((e: DataErrorOccurredEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onEditCanceled: Function as PropType<((e: EditCanceledEvent) => void)>, + onEditCanceling: Function as PropType<((e: EditCancelingEvent) => void)>, + onEditingStart: Function as PropType<((e: EditingStartEvent) => void)>, + onEditorPrepared: Function as PropType<((e: EditorPreparedEvent) => void)>, + onEditorPreparing: Function as PropType<((e: EditorPreparingEvent) => void)>, + onFocusedCellChanged: Function as PropType<((e: FocusedCellChangedEvent) => void)>, + onFocusedCellChanging: Function as PropType<((e: FocusedCellChangingEvent) => void)>, + onFocusedRowChanged: Function as PropType<((e: FocusedRowChangedEvent) => void)>, + onFocusedRowChanging: Function as PropType<((e: FocusedRowChangingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onInitNewRow: Function as PropType<((e: InitNewRowEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onNodesInitialized: Function as PropType<((e: NodesInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onRowClick: Function as PropType<((e: RowClickEvent) => void)>, + onRowCollapsed: Function as PropType<((e: RowCollapsedEvent) => void)>, + onRowCollapsing: Function as PropType<((e: RowCollapsingEvent) => void)>, + onRowDblClick: Function as PropType<((e: RowDblClickEvent) => void)>, + onRowExpanded: Function as PropType<((e: RowExpandedEvent) => void)>, + onRowExpanding: Function as PropType<((e: RowExpandingEvent) => void)>, + onRowInserted: Function as PropType<((e: RowInsertedEvent) => void)>, + onRowInserting: Function as PropType<((e: RowInsertingEvent) => void)>, + onRowPrepared: Function as PropType<((e: RowPreparedEvent) => void)>, + onRowRemoved: Function as PropType<((e: RowRemovedEvent) => void)>, + onRowRemoving: Function as PropType<((e: RowRemovingEvent) => void)>, + onRowUpdated: Function as PropType<((e: RowUpdatedEvent) => void)>, + onRowUpdating: Function as PropType<((e: RowUpdatingEvent) => void)>, + onRowValidating: Function as PropType<((e: RowValidatingEvent) => void)>, + onSaved: Function as PropType<((e: SavedEvent) => void)>, + onSaving: Function as PropType<((e: SavingEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onToolbarPreparing: Function as PropType<((e: ToolbarPreparingEvent) => void)>, + pager: Object as PropType | PagerBase>, + paging: Object as PropType>, + parentIdExpr: [Function, String] as PropType<((() => void)) | string>, + remoteOperations: [String, Object] as PropType>, renderAsync: Boolean, repaintChangesOnly: Boolean, rootValue: {}, rowAlternationEnabled: Boolean, - rowDragging: Object, + rowDragging: Object as PropType>, rtlEnabled: Boolean, - scrolling: Object, - searchPanel: Object, - selectedRowKeys: Array, - selection: Object, + scrolling: Object as PropType>, + searchPanel: Object as PropType>, + selectedRowKeys: Array as PropType>, + selection: Object as PropType>, showBorders: Boolean, showColumnHeaders: Boolean, showColumnLines: Boolean, showRowLines: Boolean, - sorting: Object, - stateStoring: Object, + sorting: Object as PropType>, + stateStoring: Object as PropType>, syncLookupFilterValues: Boolean, tabIndex: Number, - toolbar: {}, + toolbar: Object as PropType>, twoWayBindingEnabled: Boolean, visible: Boolean, - width: {}, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wordWrapEnabled: Boolean }, emits: { @@ -415,8 +592,8 @@ const DxAnimationConfig = { "update:show": null, }, props: { - hide: [Object, Number, String], - show: [Object, Number, String] + hide: [Object, Number, String] as PropType | string>, + show: [Object, Number, String] as PropType | string> } }; @@ -444,8 +621,8 @@ const DxAsyncRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => any)> } }; @@ -467,8 +644,8 @@ const DxAtConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -513,14 +690,14 @@ const DxButtonConfig = { }, props: { cssClass: String, - disabled: [Boolean, Function], + disabled: [Boolean, Function] as PropType boolean))>, hint: String, icon: String, - name: {}, - onClick: Function, + name: String as PropType, + onClick: Function as PropType<((e: { column: dxTreeListColumn, component: dxTreeList, element: any, event: event, model: any, row: dxTreeListRowObject }) => void)>, template: {}, text: String, - visible: [Boolean, Function] + visible: [Boolean, Function] as PropType boolean))> } }; @@ -544,7 +721,7 @@ const DxChangeConfig = { data: {}, insertAfterKey: {}, insertBeforeKey: {}, - type: {} + type: String as PropType } }; @@ -565,10 +742,10 @@ const DxColCountByScreenConfig = { "update:xs": null, }, props: { - lg: {}, - md: {}, - sm: {}, - xs: {} + lg: Number, + md: Number, + sm: Number, + xs: Number } }; @@ -586,8 +763,8 @@ const DxCollisionConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -659,7 +836,7 @@ const DxColumnConfig = { "update:width": null, }, props: { - alignment: {}, + alignment: String as PropType, allowEditing: Boolean, allowFiltering: Boolean, allowFixing: Boolean, @@ -669,52 +846,52 @@ const DxColumnConfig = { allowResizing: Boolean, allowSearch: Boolean, allowSorting: Boolean, - buttons: Array, - calculateCellValue: Function, - calculateDisplayValue: [Function, String], - calculateFilterExpression: Function, - calculateSortValue: [Function, String], - caption: {}, + buttons: Array as PropType>, + calculateCellValue: Function as PropType<((rowData: any) => any)>, + calculateDisplayValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string | null, target: string) => string | (() => any) | Array)>, + calculateSortValue: [Function, String] as PropType<(((rowData: any) => any)) | string>, + caption: String, cellTemplate: {}, - columns: Array, - cssClass: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + columns: Array as PropType>, + cssClass: String, + customizeText: Function as PropType<((cellInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, editCellTemplate: {}, editorOptions: {}, encodeHtml: Boolean, falseText: String, - filterOperations: Array, - filterType: {}, + filterOperations: Array as PropType>, + filterType: String as PropType, filterValue: {}, - filterValues: Array, + filterValues: Array as PropType>, fixed: Boolean, - fixedPosition: {}, - format: {}, - formItem: Object, + fixedPosition: String as PropType, + format: [Object, String, Function] as PropType string)) | Record | string>, + formItem: Object as PropType>, headerCellTemplate: {}, - headerFilter: Object, - hidingPriority: {}, - isBand: {}, - lookup: Object, - minWidth: {}, - name: {}, - ownerBand: {}, + headerFilter: Object as PropType>, + hidingPriority: Number, + isBand: Boolean, + lookup: Object as PropType>, + minWidth: Number, + name: String, + ownerBand: Number, renderAsync: Boolean, - selectedFilterOperation: {}, - setCellValue: Function, + selectedFilterOperation: String as PropType, + setCellValue: Function as PropType<((newData: any, value: any, currentRowData: any) => any)>, showEditorAlways: Boolean, showInColumnChooser: Boolean, - sortIndex: {}, - sortingMethod: {}, - sortOrder: {}, + sortIndex: Number, + sortingMethod: Function as PropType<((value1: any, value2: any) => number)>, + sortOrder: String as PropType, trueText: String, - type: {}, - validationRules: Array, + type: String as PropType, + validationRules: Array as PropType>, visible: Boolean, - visibleIndex: {}, - width: {} + visibleIndex: Number, + width: [Number, String] } }; @@ -768,12 +945,12 @@ const DxColumnChooserConfig = { emptyPanelText: String, enabled: Boolean, height: [Number, String], - mode: {}, - position: {}, - search: Object, + mode: String as PropType, + position: Object as PropType>, + search: Object as PropType>, searchTimeout: Number, - selection: Object, - sortOrder: {}, + selection: Object as PropType>, + sortOrder: String as PropType, title: String, width: [Number, String] } @@ -844,8 +1021,8 @@ const DxColumnFixingConfig = { }, props: { enabled: Boolean, - icons: Object, - texts: Object + icons: Object as PropType>, + texts: Object as PropType> } }; @@ -901,12 +1078,12 @@ const DxColumnHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, - width: {} + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, + width: [Number, String] } }; @@ -933,8 +1110,8 @@ const DxColumnHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -957,10 +1134,10 @@ const DxColumnLookupConfig = { }, props: { allowClearing: Boolean, - calculateCellValue: Function, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + calculateCellValue: Function as PropType<((rowData: any) => any)>, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { data: Record, key: any }) => Array | Store | DataSourceOptions)) | null | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: String } }; @@ -981,11 +1158,11 @@ const DxCompareRuleConfig = { "update:type": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -1032,14 +1209,14 @@ const DxCustomOperationConfig = { "update:name": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataTypes: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, field: dxFilterBuilderField) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { field: dxFilterBuilderField, value: string | number | Date, valueText: string }) => string)>, + dataTypes: Array as PropType>, editorTemplate: {}, hasValue: Boolean, - icon: {}, - name: {} + icon: String, + name: String } }; @@ -1064,8 +1241,8 @@ const DxCustomRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; @@ -1100,20 +1277,20 @@ const DxEditingConfig = { "update:useIcons": null, }, props: { - allowAdding: [Boolean, Function], - allowDeleting: [Boolean, Function], - allowUpdating: [Boolean, Function], - changes: Array, + allowAdding: [Boolean, Function] as PropType boolean))>, + allowDeleting: [Boolean, Function] as PropType boolean))>, + allowUpdating: [Boolean, Function] as PropType boolean))>, + changes: Array as PropType>, confirmDelete: Boolean, editColumnName: String, editRowKey: {}, - form: Object, - mode: {}, - popup: Object, - refreshMode: {}, + form: Object as PropType>, + mode: String as PropType, + popup: Object as PropType | Record>, + refreshMode: String as PropType, selectTextOnEditStart: Boolean, - startEditAction: {}, - texts: Object, + startEditAction: String as PropType, + texts: Object as PropType>, useIcons: Boolean } }; @@ -1181,7 +1358,7 @@ const DxEmailRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -1214,18 +1391,18 @@ const DxFieldConfig = { "update:trueText": null, }, props: { - calculateFilterExpression: Function, - caption: {}, - customizeText: Function, - dataField: {}, - dataType: {}, + calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string) => string | (() => any) | Array)>, + caption: String, + customizeText: Function as PropType<((fieldInfo: { value: string | number | Date, valueText: string }) => string)>, + dataField: String, + dataType: String as PropType, editorOptions: {}, editorTemplate: {}, falseText: String, - filterOperations: Array, - format: {}, - lookup: Object, - name: {}, + filterOperations: Array as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + lookup: Object as PropType>, + name: String, trueText: String } }; @@ -1253,9 +1430,9 @@ const DxFieldLookupConfig = { }, props: { allowClearing: Boolean, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + dataSource: [Array, Object] as PropType | DataSourceOptions | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: [Function, String] as PropType<(((data: any) => string | number | boolean)) | string> } }; @@ -1299,34 +1476,34 @@ const DxFilterBuilderConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, allowHierarchicalFields: Boolean, - bindingOptions: Object, - customOperations: Array, + bindingOptions: Object as PropType>, + customOperations: Array as PropType>, disabled: Boolean, - elementAttr: Object, - fields: Array, - filterOperationDescriptions: Object, + elementAttr: Object as PropType>, + fields: Array as PropType>, + filterOperationDescriptions: Object as PropType>, focusStateEnabled: Boolean, - groupOperationDescriptions: Object, - groupOperations: Array, - height: {}, - hint: {}, + groupOperationDescriptions: Object as PropType>, + groupOperations: Array as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, - maxGroupLevel: {}, - onContentReady: Function, - onDisposing: Function, - onEditorPrepared: Function, - onEditorPreparing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValueChanged: Function, + maxGroupLevel: Number, + onContentReady: Function as PropType<((e: FilterBuilderContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: FilterBuilderDisposingEvent) => void)>, + onEditorPrepared: Function as PropType<((e: FilterBuilderEditorPreparedEvent) => void)>, + onEditorPreparing: Function as PropType<((e: FilterBuilderEditorPreparingEvent) => void)>, + onInitialized: Function as PropType<((e: FilterBuilderInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: FilterBuilderOptionChangedEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, rtlEnabled: Boolean, tabIndex: Number, - value: [Array, Function, String], + value: [Array, Function, String] as PropType | ((() => any)) | string>, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -1398,10 +1575,10 @@ const DxFilterBuilderPopupConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -1412,28 +1589,28 @@ const DxFilterBuilderPopupConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -1444,9 +1621,9 @@ const DxFilterBuilderPopupConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -1508,9 +1685,9 @@ const DxFilterPanelConfig = { "update:visible": null, }, props: { - customizeText: Function, + customizeText: Function as PropType<((e: { component: GridBase, filterValue: Record, text: string }) => string)>, filterEnabled: Boolean, - texts: Object, + texts: Object as PropType>, visible: Boolean } }; @@ -1561,11 +1738,11 @@ const DxFilterRowConfig = { "update:visible": null, }, props: { - applyFilter: {}, + applyFilter: String as PropType, applyFilterText: String, betweenEndText: String, betweenStartText: String, - operationDescriptions: Object, + operationDescriptions: Object as PropType>, resetOperationText: String, showAllText: String, showOperationChooser: Boolean, @@ -1629,47 +1806,47 @@ const DxFormConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, alignItemLabels: Boolean, alignItemLabelsInAllGroups: Boolean, - bindingOptions: Object, - colCount: {}, - colCountByScreen: Object, - customizeItem: Function, + bindingOptions: Object as PropType>, + colCount: [String, Number] as PropType, + colCountByScreen: Object as PropType>, + customizeItem: Function as PropType<((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void)>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, formData: {}, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, isDirty: Boolean, - items: Array, - labelLocation: {}, - labelMode: {}, + items: Array as PropType>, + labelLocation: String as PropType, + labelMode: String as PropType, minColWidth: Number, - onContentReady: Function, - onDisposing: Function, - onEditorEnterKey: Function, - onFieldDataChanged: Function, - onInitialized: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: FormContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: FormDisposingEvent) => void)>, + onEditorEnterKey: Function as PropType<((e: EditorEnterKeyEvent) => void)>, + onFieldDataChanged: Function as PropType<((e: FieldDataChangedEvent) => void)>, + onInitialized: Function as PropType<((e: FormInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: FormOptionChangedEvent) => void)>, optionalMark: String, readOnly: Boolean, requiredMark: String, requiredMessage: String, rtlEnabled: Boolean, - screenByWidth: Function, + screenByWidth: Function as PropType<(() => void)>, scrollingEnabled: Boolean, showColonAfterLabel: Boolean, showOptionalMark: Boolean, showRequiredMark: Boolean, showValidationSummary: Boolean, tabIndex: Number, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -1695,10 +1872,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -1729,20 +1906,20 @@ const DxFormItemConfig = { "update:visibleIndex": null, }, props: { - colSpan: {}, - cssClass: {}, - dataField: {}, + colSpan: Number, + cssClass: String, + dataField: String, editorOptions: {}, - editorType: {}, - helpText: {}, - isRequired: {}, - itemType: {}, - label: Object, - name: {}, + editorType: String as PropType, + helpText: String, + isRequired: Boolean, + itemType: String as PropType, + label: Object as PropType>, + name: String, template: {}, - validationRules: Array, + validationRules: Array as PropType>, visible: Boolean, - visibleIndex: {} + visibleIndex: Number } }; @@ -1778,7 +1955,7 @@ const DxFromConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -1835,15 +2012,15 @@ const DxHeaderFilterConfig = { props: { allowSearch: Boolean, allowSelectAll: Boolean, - dataSource: {}, - groupInterval: {}, - height: {}, - search: Object, - searchMode: {}, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { component: Record, dataSource: DataSourceOptions | null }) => void)) | null | Store>, + groupInterval: [String, Number] as PropType, + height: [Number, String], + search: Object as PropType>, + searchMode: String as PropType, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, - width: {} + width: [Number, String] } }; @@ -1874,16 +2051,16 @@ const DxHideConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -1941,19 +2118,19 @@ const DxItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, - name: {}, + name: String as PropType, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -1976,8 +2153,8 @@ const DxKeyboardNavigationConfig = { props: { editOnKeyPress: Boolean, enabled: Boolean, - enterKeyAction: {}, - enterKeyDirection: {} + enterKeyAction: String as PropType, + enterKeyDirection: String as PropType } }; @@ -1999,11 +2176,11 @@ const DxLabelConfig = { "update:visible": null, }, props: { - alignment: {}, - location: {}, + alignment: String as PropType, + location: String as PropType, showColon: Boolean, template: {}, - text: {}, + text: String, visible: Boolean } }; @@ -2029,7 +2206,7 @@ const DxLoadPanelConfig = { "update:width": null, }, props: { - enabled: {}, + enabled: [Boolean, String] as PropType, height: [Number, String], indicatorSrc: String, shading: Boolean, @@ -2059,10 +2236,10 @@ const DxLookupConfig = { }, props: { allowClearing: Boolean, - calculateCellValue: Function, - dataSource: {}, - displayExpr: {}, - valueExpr: {} + calculateCellValue: Function as PropType<((rowData: any) => any)>, + dataSource: [Array, Object, Function] as PropType | DataSourceOptions | (((options: { data: Record, key: any }) => Array | Store | DataSourceOptions)) | null | Store>, + displayExpr: [Function, String] as PropType<(((data: any) => string)) | string>, + valueExpr: [String, Function] as PropType string | number | boolean))> } }; @@ -2080,8 +2257,8 @@ const DxMyConfig = { "update:y": null, }, props: { - x: {}, - y: {} + x: String as PropType, + y: String as PropType } }; @@ -2102,7 +2279,7 @@ const DxNumericRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -2186,14 +2363,14 @@ const DxPagerConfig = { "update:visible": null, }, props: { - allowedPageSizes: {}, - displayMode: {}, + allowedPageSizes: [Array, String] as PropType<(Array) | Mode>, + displayMode: String as PropType, infoText: String, label: String, showInfo: Boolean, showNavigationButtons: Boolean, showPageSizeSelector: Boolean, - visible: {} + visible: [Boolean, String] as PropType } }; @@ -2237,7 +2414,7 @@ const DxPatternRuleConfig = { ignoreEmptyValue: Boolean, message: String, pattern: [RegExp, String], - type: {} + type: String as PropType } }; @@ -2307,10 +2484,10 @@ const DxPopupConfig = { "update:wrapperAttr": null, }, props: { - accessKey: {}, - animation: Object, - bindingOptions: Object, - closeOnOutsideClick: [Boolean, Function], + accessKey: String, + animation: Object as PropType>, + bindingOptions: Object as PropType>, + closeOnOutsideClick: [Boolean, Function] as PropType boolean))>, container: {}, contentTemplate: {}, deferRendering: Boolean, @@ -2321,28 +2498,28 @@ const DxPopupConfig = { enableBodyScroll: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, - height: [Function, Number, String], - hideOnOutsideClick: [Boolean, Function], + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, hideOnParentScroll: Boolean, - hint: {}, + hint: String, hoverStateEnabled: Boolean, - maxHeight: [Function, Number, String], - maxWidth: [Function, Number, String], - minHeight: [Function, Number, String], - minWidth: [Function, Number, String], - onContentReady: Function, - onDisposing: Function, - onHidden: Function, - onHiding: Function, - onInitialized: Function, - onOptionChanged: Function, - onResize: Function, - onResizeEnd: Function, - onResizeStart: Function, - onShowing: Function, - onShown: Function, - onTitleRendered: Function, - position: {}, + maxHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + maxWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minHeight: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + minWidth: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onContentReady: Function as PropType<((e: EventInfo) => void)>, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onHidden: Function as PropType<((e: EventInfo) => void)>, + onHiding: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onResize: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeEnd: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onResizeStart: Function as PropType<((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)>, + onShowing: Function as PropType<((e: { cancel: boolean | any, component: dxOverlay, element: any, model: any }) => void)>, + onShown: Function as PropType<((e: EventInfo) => void)>, + onTitleRendered: Function as PropType<((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)>, + position: [Function, String, Object] as PropType<((() => void)) | PositionAlignment | PositionConfig | Record>, resizeEnabled: Boolean, restorePosition: Boolean, rtlEnabled: Boolean, @@ -2353,9 +2530,9 @@ const DxPopupConfig = { tabIndex: Number, title: String, titleTemplate: {}, - toolbarItems: Array, + toolbarItems: Array as PropType>, visible: Boolean, - width: [Function, Number, String], + width: [Function, Number, String] as PropType<((() => number | string)) | number | string>, wrapperAttr: {} } }; @@ -2384,13 +2561,13 @@ const DxPositionConfig = { "update:offset": null, }, props: { - at: {}, + at: [Object, String] as PropType | PositionAlignment>, boundary: {}, - boundaryOffset: [Object, String], - collision: {}, - my: {}, + boundaryOffset: [Object, String] as PropType | string>, + collision: [String, Object] as PropType>, + my: [Object, String] as PropType | PositionAlignment>, of: {}, - offset: [Object, String] + offset: [Object, String] as PropType | string> } }; @@ -2417,7 +2594,7 @@ const DxRangeRuleConfig = { message: String, min: [Date, Number, String], reevaluate: Boolean, - type: {} + type: String as PropType } }; @@ -2463,7 +2640,7 @@ const DxRequiredRuleConfig = { props: { message: String, trim: Boolean, - type: {} + type: String as PropType } }; @@ -2511,21 +2688,21 @@ const DxRowDraggingConfig = { autoScroll: Boolean, boundary: {}, container: {}, - cursorOffset: [Object, String], + cursorOffset: [Object, String] as PropType | string>, data: {}, - dragDirection: {}, + dragDirection: String as PropType, dragTemplate: {}, - dropFeedbackMode: {}, + dropFeedbackMode: String as PropType, filter: String, - group: {}, + group: String, handle: String, - onAdd: Function, - onDragChange: Function, - onDragEnd: Function, - onDragMove: Function, - onDragStart: Function, - onRemove: Function, - onReorder: Function, + onAdd: Function as PropType<((e: { component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragChange: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragEnd: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragMove: Function as PropType<((e: { cancel: boolean, component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onDragStart: Function as PropType<((e: { cancel: boolean, component: GridBase, event: event, fromData: any, fromIndex: number, itemData: any, itemElement: any }) => void)>, + onRemove: Function as PropType<((e: { component: GridBase, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, + onReorder: Function as PropType<((e: { component: GridBase, dropInsideItem: boolean, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, fromIndex: number, itemData: any, itemElement: any, promise: any, toComponent: dxSortable | dxDraggable, toData: any, toIndex: number }) => void)>, scrollSensitivity: Number, scrollSpeed: Number, showDragIcons: Boolean @@ -2556,15 +2733,15 @@ const DxScrollingConfig = { "update:useNative": null, }, props: { - columnRenderingMode: {}, - mode: {}, + columnRenderingMode: String as PropType, + mode: String as PropType, preloadEnabled: Boolean, - renderAsync: {}, - rowRenderingMode: {}, + renderAsync: Boolean, + rowRenderingMode: String as PropType, scrollByContent: Boolean, scrollByThumb: Boolean, - showScrollbar: {}, - useNative: {} + showScrollbar: String as PropType, + useNative: [Boolean, String] as PropType } }; @@ -2587,8 +2764,8 @@ const DxSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, - searchExpr: {}, + mode: String as PropType, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, timeout: Number } }; @@ -2639,7 +2816,7 @@ const DxSelectionConfig = { }, props: { allowSelectAll: Boolean, - mode: {}, + mode: String as PropType, recursive: Boolean, selectByClick: Boolean } @@ -2667,16 +2844,16 @@ const DxShowConfig = { "update:type": null, }, props: { - complete: Function, + complete: Function as PropType<(($element: any, config: AnimationConfig) => void)>, delay: Number, - direction: {}, + direction: String as PropType, duration: Number, easing: String, - from: Object, - staggerDelay: {}, - start: Function, - to: Object, - type: {} + from: Object as PropType>, + staggerDelay: Number, + start: Function as PropType<(($element: any, config: AnimationConfig) => void)>, + to: Object as PropType>, + type: String as PropType } }; @@ -2700,7 +2877,7 @@ const DxSortingConfig = { ascendingText: String, clearText: String, descendingText: String, - mode: {}, + mode: String as PropType, showSortIndexes: Boolean } }; @@ -2723,12 +2900,12 @@ const DxStateStoringConfig = { "update:type": null, }, props: { - customLoad: Function, - customSave: Function, + customLoad: Function as PropType<(() => any)>, + customSave: Function as PropType<((gridState: any) => void)>, enabled: Boolean, savingTimeout: Number, storageKey: String, - type: {} + type: String as PropType } }; @@ -2755,7 +2932,7 @@ const DxStringLengthRuleConfig = { message: String, min: Number, trim: Boolean, - type: {} + type: String as PropType } }; @@ -2843,7 +3020,7 @@ const DxToConfig = { props: { left: Number, opacity: Number, - position: Object, + position: Object as PropType>, scale: Number, top: Number } @@ -2865,8 +3042,8 @@ const DxToolbarConfig = { }, props: { disabled: Boolean, - items: Array, - visible: {} + items: Array as PropType>, + visible: Boolean } }; @@ -2898,19 +3075,19 @@ const DxToolbarItemConfig = { "update:widget": null, }, props: { - cssClass: {}, + cssClass: String, disabled: Boolean, html: String, - locateInMenu: {}, - location: {}, + locateInMenu: String as PropType, + location: String as PropType, menuItemTemplate: {}, options: {}, - showText: {}, + showText: String as PropType, template: {}, text: String, - toolbar: {}, + toolbar: String as PropType, visible: Boolean, - widget: {} + widget: String as PropType } }; @@ -2938,9 +3115,9 @@ const DxTreeListHeaderFilterConfig = { allowSearch: Boolean, allowSelectAll: Boolean, height: [Number, String], - search: Object, + search: Object as PropType>, searchTimeout: Number, - texts: Object, + texts: Object as PropType>, visible: Boolean, width: [Number, String] } @@ -2970,7 +3147,7 @@ const DxTreeListHeaderFilterSearchConfig = { props: { editorOptions: {}, enabled: Boolean, - mode: {}, + mode: String as PropType, timeout: Number } }; @@ -3012,7 +3189,7 @@ const DxTreeListSelectionConfig = { }, props: { allowSelectAll: Boolean, - mode: {}, + mode: String as PropType, recursive: Boolean } }; @@ -3040,8 +3217,8 @@ const DxValidationRuleConfig = { "update:validationCallback": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, max: [Date, Number, String], message: String, @@ -3049,8 +3226,8 @@ const DxValidationRuleConfig = { pattern: [RegExp, String], reevaluate: Boolean, trim: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; diff --git a/packages/devextreme-vue/src/tree-map.ts b/packages/devextreme-vue/src/tree-map.ts index aed8e40d263d..a6f8a22c5d27 100644 --- a/packages/devextreme-vue/src/tree-map.ts +++ b/packages/devextreme-vue/src/tree-map.ts @@ -1,6 +1,53 @@ -import TreeMap, { Properties } from "devextreme/viz/tree_map"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TreeMap, { Properties } from "devextreme/viz/tree_map"; +import DataSource from "devextreme/data/data_source"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + TreeMapLayoutAlgorithm, + TreeMapLayoutDirection, + ClickEvent, + DisposingEvent, + DrawnEvent, + DrillEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + HoverChangedEvent, + IncidentOccurredEvent, + InitializedEvent, + NodesInitializedEvent, + NodesRenderingEvent, + OptionChangedEvent, + SelectionChangedEvent, + TreeMapColorizerType, + dxTreeMapNode, +} from "devextreme/viz/tree_map"; +import { + SingleMultipleOrNone, + ExportFormat, + Format, + HorizontalAlignment, + VerticalEdge, +} from "devextreme/common"; +import { + Theme, + DashStyle, + Palette, + PaletteExtensionMode, + Font, + TextOverflow, + WordWrap, +} from "devextreme/common/charts"; +import { + Format as LocalizationFormat, +} from "devextreme/localization"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, disabled: Boolean, - elementAttr: Object, - export: Object, - group: Object, - hoverEnabled: {}, - idField: {}, + elementAttr: Object as PropType>, + export: Object as PropType>, + group: Object as PropType>, + hoverEnabled: Boolean, + idField: String, interactWithGroup: Boolean, labelField: String, - layoutAlgorithm: {}, - layoutDirection: {}, - loadingIndicator: Object, - maxDepth: {}, - onClick: Function, - onDisposing: Function, - onDrawn: Function, - onDrill: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onHoverChanged: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onNodesInitialized: Function, - onNodesRendering: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - parentField: {}, + layoutAlgorithm: [Function, String] as PropType<(((e: { items: Array, rect: Array, sum: number }) => void)) | TreeMapLayoutAlgorithm>, + layoutDirection: String as PropType, + loadingIndicator: Object as PropType>, + maxDepth: Number, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onDrill: Function as PropType<((e: DrillEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onHoverChanged: Function as PropType<((e: HoverChangedEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onNodesInitialized: Function as PropType<((e: NodesInitializedEvent) => void)>, + onNodesRendering: Function as PropType<((e: NodesRenderingEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + parentField: String, pathModified: Boolean, redrawOnResize: Boolean, rtlEnabled: Boolean, - selectionMode: {}, - size: Object, - theme: {}, - tile: Object, - title: [Object, String], - tooltip: Object, + selectionMode: String as PropType, + size: Object as PropType>, + theme: String as PropType, + tile: Object as PropType>, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, valueField: String }, emits: { @@ -177,11 +224,11 @@ const DxBorderConfig = { "update:width": null, }, props: { - color: {}, - dashStyle: {}, - opacity: {}, + color: String, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, - width: {} + width: Number } }; @@ -203,12 +250,12 @@ const DxColorizerConfig = { "update:type": null, }, props: { - colorCodeField: {}, + colorCodeField: String, colorizeGroups: Boolean, - palette: {}, - paletteExtensionMode: {}, - range: Array, - type: {} + palette: [Array, String] as PropType | Palette>, + paletteExtensionMode: String as PropType, + range: Array as PropType>, + type: String as PropType } }; @@ -234,10 +281,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -285,10 +332,10 @@ const DxFormatConfig = { }, props: { currency: String, - formatter: Function, - parser: Function, + formatter: Function as PropType<((value: number | Date) => string)>, + parser: Function as PropType<((value: string) => number | Date)>, precision: Number, - type: {}, + type: String as PropType, useCurrencyAccountingStyle: Boolean } }; @@ -313,14 +360,14 @@ const DxGroupConfig = { "update:selectionStyle": null, }, props: { - border: Object, + border: Object as PropType>, color: String, - headerHeight: {}, - hoverEnabled: {}, - hoverStyle: Object, - label: Object, + headerHeight: Number, + hoverEnabled: Boolean, + hoverStyle: Object as PropType>, + label: Object as PropType>, padding: Number, - selectionStyle: Object + selectionStyle: Object as PropType> } }; @@ -347,8 +394,8 @@ const DxGroupLabelConfig = { "update:visible": null, }, props: { - font: Object, - textOverflow: {}, + font: Object as PropType>, + textOverflow: String as PropType, visible: Boolean } }; @@ -370,8 +417,8 @@ const DxHoverStyleConfig = { "update:color": null, }, props: { - border: Object, - color: {} + border: Object as PropType>, + color: String } }; @@ -391,10 +438,10 @@ const DxLabelConfig = { "update:wordWrap": null, }, props: { - font: Object, - textOverflow: {}, + font: Object as PropType>, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -420,7 +467,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -466,8 +513,8 @@ const DxSelectionStyleConfig = { "update:color": null, }, props: { - border: Object, - color: {} + border: Object as PropType>, + color: String } }; @@ -510,8 +557,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -532,11 +579,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -560,11 +607,11 @@ const DxTileConfig = { "update:selectionStyle": null, }, props: { - border: Object, + border: Object as PropType>, color: String, - hoverStyle: Object, - label: Object, - selectionStyle: Object + hoverStyle: Object as PropType>, + label: Object as PropType>, + selectionStyle: Object as PropType> } }; @@ -592,10 +639,10 @@ const DxTileLabelConfig = { "update:wordWrap": null, }, props: { - font: Object, - textOverflow: {}, + font: Object as PropType>, + textOverflow: String as PropType, visible: Boolean, - wordWrap: {} + wordWrap: String as PropType } }; @@ -623,15 +670,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -668,20 +715,20 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((info: { node: dxTreeMapNode, value: number, valueText: string }) => Record)>, enabled: Boolean, - font: Object, - format: {}, - opacity: {}, + font: Object as PropType>, + format: [Object, String, Function] as PropType string)) | Record | string>, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -710,8 +757,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -731,8 +778,8 @@ const DxTreeMapborderConfig = { "update:width": null, }, props: { - color: {}, - width: {} + color: String, + width: Number } }; diff --git a/packages/devextreme-vue/src/tree-view.ts b/packages/devextreme-vue/src/tree-view.ts index 66f0934dd9d4..815e00c8879e 100644 --- a/packages/devextreme-vue/src/tree-view.ts +++ b/packages/devextreme-vue/src/tree-view.ts @@ -1,7 +1,78 @@ export { ExplicitTypes } from "devextreme/ui/tree_view"; -import TreeView, { Properties } from "devextreme/ui/tree_view"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import TreeView, { Properties } from "devextreme/ui/tree_view"; +import DataSource from "devextreme/data/data_source"; +import { + dxTreeViewNode, + dxTreeViewItem, + TreeViewExpandEvent, + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + ItemCollapsedEvent, + ItemContextMenuEvent, + ItemExpandedEvent, + ItemHoldEvent, + ItemRenderedEvent, + ItemSelectionChangedEvent, + OptionChangedEvent, + SelectAllValueChangedEvent, + SelectionChangedEvent, + TreeViewCheckBoxMode, +} from "devextreme/ui/tree_view"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; +import { + DataStructure, + ScrollDirection, + SearchMode, + SingleOrMultiple, + TextEditorButtonLocation, + ButtonStyle, + ButtonType, + TextBoxPredefinedButton, + TextEditorButton, + LabelMode, + MaskMode, + EditorStyle, + ValidationMessageMode, + Position, + ValidationStatus, +} from "devextreme/common"; +import { + dxTextBoxOptions, + TextBoxType, + ChangeEvent, + ContentReadyEvent as TextBoxContentReadyEvent, + CopyEvent, + CutEvent, + DisposingEvent as TextBoxDisposingEvent, + EnterKeyEvent, + FocusInEvent, + FocusOutEvent, + InitializedEvent as TextBoxInitializedEvent, + InputEvent, + KeyDownEvent, + KeyUpEvent, + OptionChangedEvent as TextBoxOptionChangedEvent, + PasteEvent, + ValueChangedEvent, +} from "devextreme/ui/text_box"; +import { + dxButtonOptions, + ClickEvent, + ContentReadyEvent as ButtonContentReadyEvent, + DisposingEvent as ButtonDisposingEvent, + InitializedEvent as ButtonInitializedEvent, + OptionChangedEvent as ButtonOptionChangedEvent, +} from "devextreme/ui/button"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + createChildren: Function as PropType<((parentNode: dxTreeViewNode) => any | Array>)>, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Store | string>, + dataStructure: String as PropType, disabled: Boolean, - disabledExpr: [Function, String], - displayExpr: [Function, String], - elementAttr: Object, + disabledExpr: [Function, String] as PropType<((() => void)) | string>, + displayExpr: [Function, String] as PropType<(((item: any) => string)) | string>, + elementAttr: Object as PropType>, expandAllEnabled: Boolean, - expandedExpr: [Function, String], - expandEvent: {}, - expandIcon: {}, + expandedExpr: [Function, String] as PropType<((() => void)) | string>, + expandEvent: String as PropType, + expandIcon: String as PropType, expandNodesRecursive: Boolean, focusStateEnabled: Boolean, - hasItemsExpr: [Function, String], - height: {}, - hint: {}, + hasItemsExpr: [Function, String] as PropType<((() => void)) | string>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, itemHoldTimeout: Number, - items: Array, - itemsExpr: [Function, String], + items: Array as PropType>, + itemsExpr: [Function, String] as PropType<((() => void)) | string>, itemTemplate: {}, - keyExpr: [Function, String], + keyExpr: [Function, String] as PropType<((() => void)) | string>, noDataText: String, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onItemCollapsed: Function, - onItemContextMenu: Function, - onItemExpanded: Function, - onItemHold: Function, - onItemRendered: Function, - onItemSelectionChanged: Function, - onOptionChanged: Function, - onSelectAllValueChanged: Function, - onSelectionChanged: Function, - parentIdExpr: [Function, String], + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemCollapsed: Function as PropType<((e: ItemCollapsedEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemExpanded: Function as PropType<((e: ItemExpandedEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onItemSelectionChanged: Function as PropType<((e: ItemSelectionChangedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectAllValueChanged: Function as PropType<((e: SelectAllValueChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + parentIdExpr: [Function, String] as PropType<((() => void)) | string>, rootValue: {}, rtlEnabled: Boolean, - scrollDirection: {}, - searchEditorOptions: Object, + scrollDirection: String as PropType, + searchEditorOptions: Object as PropType | Record>, searchEnabled: Boolean, - searchExpr: [Array, Function, String], - searchMode: {}, - searchTimeout: {}, + searchExpr: [Array, Function, String] as PropType<(Array<(() => any) | string>) | ((() => any)) | string>, + searchMode: String as PropType, + searchTimeout: Number, searchValue: String, selectAllText: String, selectByClick: Boolean, - selectedExpr: [Function, String], - selectionMode: {}, + selectedExpr: [Function, String] as PropType<((() => void)) | string>, + selectionMode: String as PropType, selectNodesRecursive: Boolean, - showCheckBoxesMode: {}, + showCheckBoxesMode: String as PropType, tabIndex: Number, useNativeScrolling: Boolean, virtualModeEnabled: Boolean, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -230,9 +301,9 @@ const DxButtonConfig = { "update:options": null, }, props: { - location: {}, - name: {}, - options: {} + location: String as PropType, + name: String, + options: Object as PropType> } }; @@ -266,12 +337,12 @@ const DxItemConfig = { props: { disabled: Boolean, expanded: Boolean, - hasItems: {}, + hasItems: Boolean, html: String, icon: String, - id: {}, - items: Array, - parentId: {}, + id: [Number, String], + items: Array as PropType>, + parentId: [Number, String], selected: Boolean, template: {}, text: String, @@ -317,31 +388,31 @@ const DxOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, + bindingOptions: Object as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, icon: String, - onClick: Function, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, rtlEnabled: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, template: {}, text: String, - type: {}, + type: String as PropType, useSubmitBehavior: Boolean, - validationGroup: {}, + validationGroup: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; @@ -413,62 +484,62 @@ const DxSearchEditorOptionsConfig = { "update:width": null, }, props: { - accessKey: {}, + accessKey: String, activeStateEnabled: Boolean, - bindingOptions: Object, - buttons: Array, + bindingOptions: Object as PropType>, + buttons: Array as PropType>, disabled: Boolean, - elementAttr: Object, + elementAttr: Object as PropType>, focusStateEnabled: Boolean, - height: {}, - hint: {}, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + hint: String, hoverStateEnabled: Boolean, inputAttr: {}, isDirty: Boolean, isValid: Boolean, label: String, - labelMode: {}, + labelMode: String as PropType, mask: String, maskChar: String, maskInvalidMessage: String, maskRules: {}, maxLength: [Number, String], - mode: {}, + mode: String as PropType, name: String, - onChange: Function, - onContentReady: Function, - onCopy: Function, - onCut: Function, - onDisposing: Function, - onEnterKey: Function, - onFocusIn: Function, - onFocusOut: Function, - onInitialized: Function, - onInput: Function, - onKeyDown: Function, - onKeyUp: Function, - onOptionChanged: Function, - onPaste: Function, - onValueChanged: Function, + onChange: Function as PropType<((e: ChangeEvent) => void)>, + onContentReady: Function as PropType<((e: TextBoxContentReadyEvent) => void)>, + onCopy: Function as PropType<((e: CopyEvent) => void)>, + onCut: Function as PropType<((e: CutEvent) => void)>, + onDisposing: Function as PropType<((e: TextBoxDisposingEvent) => void)>, + onEnterKey: Function as PropType<((e: EnterKeyEvent) => void)>, + onFocusIn: Function as PropType<((e: FocusInEvent) => void)>, + onFocusOut: Function as PropType<((e: FocusOutEvent) => void)>, + onInitialized: Function as PropType<((e: TextBoxInitializedEvent) => void)>, + onInput: Function as PropType<((e: InputEvent) => void)>, + onKeyDown: Function as PropType<((e: KeyDownEvent) => void)>, + onKeyUp: Function as PropType<((e: KeyUpEvent) => void)>, + onOptionChanged: Function as PropType<((e: TextBoxOptionChangedEvent) => void)>, + onPaste: Function as PropType<((e: PasteEvent) => void)>, + onValueChanged: Function as PropType<((e: ValueChangedEvent) => void)>, placeholder: String, readOnly: Boolean, rtlEnabled: Boolean, showClearButton: Boolean, - showMaskMode: {}, + showMaskMode: String as PropType, spellcheck: Boolean, - stylingMode: {}, + stylingMode: String as PropType, tabIndex: Number, text: String, useMaskedValue: Boolean, validationError: {}, - validationErrors: Array, - validationMessageMode: {}, - validationMessagePosition: {}, - validationStatus: {}, + validationErrors: Array as PropType>, + validationMessageMode: String as PropType, + validationMessagePosition: String as PropType, + validationStatus: String as PropType, value: String, valueChangeEvent: String, visible: Boolean, - width: {} + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> } }; diff --git a/packages/devextreme-vue/src/validation-group.ts b/packages/devextreme-vue/src/validation-group.ts index 865720f6e439..f4f6b44965ad 100644 --- a/packages/devextreme-vue/src/validation-group.ts +++ b/packages/devextreme-vue/src/validation-group.ts @@ -1,6 +1,12 @@ -import ValidationGroup, { Properties } from "devextreme/ui/validation_group"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ValidationGroup, { Properties } from "devextreme/ui/validation_group"; +import { + DisposingEvent, + InitializedEvent, + OptionChangedEvent, +} from "devextreme/ui/validation_group"; type AccessibleOptions = Pick>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, diff --git a/packages/devextreme-vue/src/validation-summary.ts b/packages/devextreme-vue/src/validation-summary.ts index 45eea4c555e0..126cb3919938 100644 --- a/packages/devextreme-vue/src/validation-summary.ts +++ b/packages/devextreme-vue/src/validation-summary.ts @@ -1,7 +1,18 @@ export { ExplicitTypes } from "devextreme/ui/validation_summary"; -import ValidationSummary, { Properties } from "devextreme/ui/validation_summary"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import ValidationSummary, { Properties } from "devextreme/ui/validation_summary"; +import { + CollectionWidgetItem, +} from "devextreme/ui/collection/ui.collection_widget.base"; +import { + ContentReadyEvent, + DisposingEvent, + InitializedEvent, + ItemClickEvent, + OptionChangedEvent, +} from "devextreme/ui/validation_summary"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, hoverStateEnabled: Boolean, - items: Array, + items: Array as PropType>, itemTemplate: {}, - onContentReady: Function, - onDisposing: Function, - onInitialized: Function, - onItemClick: Function, - onOptionChanged: Function, + onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, validationGroup: String }, emits: { diff --git a/packages/devextreme-vue/src/validator.ts b/packages/devextreme-vue/src/validator.ts index 8c2c212fb98a..c32abb3d1152 100644 --- a/packages/devextreme-vue/src/validator.ts +++ b/packages/devextreme-vue/src/validator.ts @@ -1,6 +1,20 @@ -import Validator, { Properties } from "devextreme/ui/validator"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareExtensionComponentConfig } from "./core/index"; +import Validator, { Properties } from "devextreme/ui/validator"; +import DOMComponent from "devextreme/core/dom_component"; +import { + EventInfo, +} from "devextreme/events/index"; +import { + Component, +} from "devextreme/core/component"; +import { + ValidationStatus, + ValidationRuleType, + ComparisonOperator, +} from "devextreme/common"; +import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + elementAttr: Object as PropType>, + height: [Function, Number, String] as PropType<((() => number | string)) | number | string>, name: String, - onDisposing: Function, - onInitialized: Function, - onOptionChanged: Function, - onValidated: Function, + onDisposing: Function as PropType<((e: EventInfo) => void)>, + onInitialized: Function as PropType<((e: { component: Component, element: any }) => void)>, + onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>, + onValidated: Function as PropType<((validatedInfo: { brokenRule: CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule, brokenRules: Array, isValid: boolean, name: string, status: ValidationStatus, validationRules: Array, value: Record }) => void)>, validationGroup: String, - validationRules: Array, - width: {} + validationRules: Array as PropType>, + width: [Function, Number, String] as PropType<((() => number | string)) | number | string> }, emits: { "update:isActive": null, @@ -91,12 +105,12 @@ const DxAdapterConfig = { "update:validationRequestsCallbacks": null, }, props: { - applyValidationResults: Function, - bypass: Function, - focus: Function, - getValue: Function, - reset: Function, - validationRequestsCallbacks: Array + applyValidationResults: Function as PropType<(() => void)>, + bypass: Function as PropType<(() => void)>, + focus: Function as PropType<(() => void)>, + getValue: Function as PropType<(() => void)>, + reset: Function as PropType<(() => void)>, + validationRequestsCallbacks: Array as PropType void)>> } }; @@ -120,8 +134,8 @@ const DxAsyncRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => any)> } }; @@ -146,11 +160,11 @@ const DxCompareRuleConfig = { "update:type": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -178,8 +192,8 @@ const DxCustomRuleConfig = { ignoreEmptyValue: Boolean, message: String, reevaluate: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; @@ -204,7 +218,7 @@ const DxEmailRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -229,7 +243,7 @@ const DxNumericRuleConfig = { props: { ignoreEmptyValue: Boolean, message: String, - type: {} + type: String as PropType } }; @@ -256,7 +270,7 @@ const DxPatternRuleConfig = { ignoreEmptyValue: Boolean, message: String, pattern: [RegExp, String], - type: {} + type: String as PropType } }; @@ -287,7 +301,7 @@ const DxRangeRuleConfig = { message: String, min: [Date, Number, String], reevaluate: Boolean, - type: {} + type: String as PropType } }; @@ -312,7 +326,7 @@ const DxRequiredRuleConfig = { props: { message: String, trim: Boolean, - type: {} + type: String as PropType } }; @@ -343,7 +357,7 @@ const DxStringLengthRuleConfig = { message: String, min: Number, trim: Boolean, - type: {} + type: String as PropType } }; @@ -374,8 +388,8 @@ const DxValidationRuleConfig = { "update:validationCallback": null, }, props: { - comparisonTarget: Function, - comparisonType: {}, + comparisonTarget: Function as PropType<(() => any)>, + comparisonType: String as PropType, ignoreEmptyValue: Boolean, max: [Date, Number, String], message: String, @@ -383,8 +397,8 @@ const DxValidationRuleConfig = { pattern: [RegExp, String], reevaluate: Boolean, trim: Boolean, - type: {}, - validationCallback: Function + type: String as PropType, + validationCallback: Function as PropType<((options: { column: Record, data: Record, formItem: Record, rule: Record, validator: Record, value: string | number }) => boolean)> } }; diff --git a/packages/devextreme-vue/src/vector-map.ts b/packages/devextreme-vue/src/vector-map.ts index 70605f64c7bb..2a4df6389d2a 100644 --- a/packages/devextreme-vue/src/vector-map.ts +++ b/packages/devextreme-vue/src/vector-map.ts @@ -1,6 +1,58 @@ -import VectorMap, { Properties } from "devextreme/viz/vector_map"; +import { PropType } from "vue"; import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; +import VectorMap, { Properties } from "devextreme/viz/vector_map"; +import DataSource from "devextreme/data/data_source"; +import { + dxVectorMapAnnotationConfig, + dxVectorMapCommonAnnotationConfig, + CenterChangedEvent, + ClickEvent, + DisposingEvent, + DrawnEvent, + ExportedEvent, + ExportingEvent, + FileSavingEvent, + IncidentOccurredEvent, + InitializedEvent, + OptionChangedEvent, + SelectionChangedEvent, + TooltipHiddenEvent, + TooltipShownEvent, + ZoomFactorChangedEvent, + MapLayerElement, + VectorMapMarkerType, + VectorMapLayerType, + VectorMapLegendItem, + VectorMapMarkerShape, +} from "devextreme/viz/vector_map"; +import { + VectorMapProjection, + VectorMapProjectionConfig, +} from "devextreme/viz/vector_map/projection"; +import { + Theme, + Font, + TextOverflow, + AnnotationType, + WordWrap, + DashStyle, + Palette, +} from "devextreme/common/charts"; +import { + HorizontalAlignment, + VerticalEdge, + ExportFormat, + SingleMultipleOrNone, + Position, + Orientation, +} from "devextreme/common"; +import { + DataSourceOptions, +} from "devextreme/data/data_source"; +import { + Store, +} from "devextreme/data/store"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + background: Object as PropType>, + bounds: Array as PropType>, + center: Array as PropType>, + commonAnnotationSettings: Object as PropType>, + controlBar: Object as PropType>, + customizeAnnotation: Function as PropType<((annotation: dxVectorMapAnnotationConfig | any) => dxVectorMapAnnotationConfig)>, disabled: Boolean, - elementAttr: Object, - export: Object, - layers: [Array, Object], - legends: Array, - loadingIndicator: Object, + elementAttr: Object as PropType>, + export: Object as PropType>, + layers: [Array, Object] as PropType> | Record>, + legends: Array as PropType>>, + loadingIndicator: Object as PropType>, maxZoomFactor: Number, - onCenterChanged: Function, - onClick: Function, - onDisposing: Function, - onDrawn: Function, - onExported: Function, - onExporting: Function, - onFileSaving: Function, - onIncidentOccurred: Function, - onInitialized: Function, - onOptionChanged: Function, - onSelectionChanged: Function, - onTooltipHidden: Function, - onTooltipShown: Function, - onZoomFactorChanged: Function, + onCenterChanged: Function as PropType<((e: CenterChangedEvent) => void)>, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onDisposing: Function as PropType<((e: DisposingEvent) => void)>, + onDrawn: Function as PropType<((e: DrawnEvent) => void)>, + onExported: Function as PropType<((e: ExportedEvent) => void)>, + onExporting: Function as PropType<((e: ExportingEvent) => void)>, + onFileSaving: Function as PropType<((e: FileSavingEvent) => void)>, + onIncidentOccurred: Function as PropType<((e: IncidentOccurredEvent) => void)>, + onInitialized: Function as PropType<((e: InitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>, + onTooltipHidden: Function as PropType<((e: TooltipHiddenEvent) => void)>, + onTooltipShown: Function as PropType<((e: TooltipShownEvent) => void)>, + onZoomFactorChanged: Function as PropType<((e: ZoomFactorChangedEvent) => void)>, panningEnabled: Boolean, pathModified: Boolean, - projection: {}, + projection: [Object, String] as PropType | string | VectorMapProjection | VectorMapProjectionConfig>, redrawOnResize: Boolean, rtlEnabled: Boolean, - size: Object, - theme: {}, - title: [Object, String], - tooltip: Object, + size: Object as PropType>, + theme: String as PropType, + title: [Object, String] as PropType | string>, + tooltip: Object as PropType>, touchEnabled: Boolean, wheelEnabled: Boolean, zoomFactor: Number, @@ -209,32 +261,32 @@ const DxAnnotationConfig = { allowDragging: Boolean, arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - coordinates: Array, - customizeTooltip: {}, + coordinates: Array as PropType>, + customizeTooltip: Function as PropType<((annotation: dxVectorMapAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - name: {}, - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + name: String, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -266,8 +318,8 @@ const DxAnnotationBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -312,8 +364,8 @@ const DxBorderConfig = { props: { color: String, cornerRadius: Number, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -362,31 +414,31 @@ const DxCommonAnnotationSettingsConfig = { allowDragging: Boolean, arrowLength: Number, arrowWidth: Number, - border: Object, + border: Object as PropType>, color: String, - coordinates: Array, - customizeTooltip: {}, + coordinates: Array as PropType>, + customizeTooltip: Function as PropType<((annotation: dxVectorMapAnnotationConfig | any) => Record)>, data: {}, - description: {}, - font: Object, - height: {}, - image: [Object, String], - offsetX: {}, - offsetY: {}, + description: String, + font: Object as PropType>, + height: Number, + image: [Object, String] as PropType | string>, + offsetX: Number, + offsetY: Number, opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, + shadow: Object as PropType>, template: {}, - text: {}, - textOverflow: {}, + text: String, + textOverflow: String as PropType, tooltipEnabled: Boolean, tooltipTemplate: {}, - type: {}, - width: {}, - wordWrap: {}, - x: {}, - y: {} + type: String as PropType, + width: Number, + wordWrap: String as PropType, + x: Number, + y: Number } }; @@ -414,11 +466,11 @@ const DxControlBarConfig = { borderColor: String, color: String, enabled: Boolean, - horizontalAlignment: {}, + horizontalAlignment: String as PropType, margin: Number, opacity: Number, panVisible: Boolean, - verticalAlignment: {}, + verticalAlignment: String as PropType, zoomVisible: Boolean } }; @@ -445,10 +497,10 @@ const DxExportConfig = { backgroundColor: String, enabled: Boolean, fileName: String, - formats: Array, + formats: Array as PropType>, margin: Number, printingEnabled: Boolean, - svgToCanvas: {} + svgToCanvas: Function as PropType<((svg: any, canvas: any) => any)> } }; @@ -493,7 +545,7 @@ const DxImageConfig = { }, props: { height: Number, - url: {}, + url: String, width: Number } }; @@ -515,7 +567,7 @@ const DxLabelConfig = { props: { dataField: String, enabled: Boolean, - font: Object + font: Object as PropType> } }; @@ -566,32 +618,32 @@ const DxLayerConfig = { borderColor: String, borderWidth: Number, color: String, - colorGroupingField: {}, - colorGroups: Array, - customize: Function, - dataField: {}, - dataSource: {}, - elementType: {}, + colorGroupingField: String, + colorGroups: Array as PropType>, + customize: Function as PropType<((elements: Array) => void)>, + dataField: String, + dataSource: [Array, Object, String] as PropType | DataSource | DataSourceOptions | null | Record | Store | string>, + elementType: String as PropType, hoveredBorderColor: String, hoveredBorderWidth: Number, hoveredColor: String, hoverEnabled: Boolean, - label: Object, + label: Object as PropType>, maxSize: Number, minSize: Number, name: String, opacity: Number, - palette: {}, + palette: [Array, String] as PropType | Palette>, paletteIndex: Number, paletteSize: Number, selectedBorderColor: String, selectedBorderWidth: Number, selectedColor: String, - selectionMode: {}, + selectionMode: String as PropType, size: Number, - sizeGroupingField: {}, - sizeGroups: Array, - type: {} + sizeGroupingField: String, + sizeGroups: Array as PropType>, + type: String as PropType } }; @@ -636,30 +688,30 @@ const DxLegendConfig = { "update:visible": null, }, props: { - backgroundColor: {}, - border: Object, + backgroundColor: String, + border: Object as PropType>, columnCount: Number, columnItemSpacing: Number, - customizeHint: Function, - customizeItems: Function, - customizeText: Function, - font: Object, - horizontalAlignment: {}, - itemsAlignment: {}, - itemTextPosition: {}, - margin: [Number, Object], - markerColor: {}, - markerShape: {}, + customizeHint: Function as PropType<((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string)>, + customizeItems: Function as PropType<((items: Array) => Array)>, + customizeText: Function as PropType<((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string)>, + font: Object as PropType>, + horizontalAlignment: String as PropType, + itemsAlignment: String as PropType, + itemTextPosition: String as PropType, + margin: [Number, Object] as PropType>, + markerColor: String, + markerShape: String as PropType, markerSize: Number, markerTemplate: {}, - orientation: {}, + orientation: String as PropType, paddingLeftRight: Number, paddingTopBottom: Number, rowCount: Number, rowItemSpacing: Number, - source: Object, - title: [Object, String], - verticalAlignment: {}, + source: Object as PropType>, + title: [Object, String] as PropType | string>, + verticalAlignment: String as PropType, visible: Boolean } }; @@ -693,13 +745,13 @@ const DxLegendTitleConfig = { "update:verticalAlignment": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: Object, - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: Object as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - verticalAlignment: {} + verticalAlignment: String as PropType } }; @@ -724,7 +776,7 @@ const DxLegendTitleSubtitleConfig = { "update:text": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String } @@ -752,7 +804,7 @@ const DxLoadingIndicatorConfig = { props: { backgroundColor: String, enabled: Boolean, - font: Object, + font: Object as PropType>, show: Boolean, text: String } @@ -800,8 +852,8 @@ const DxProjectionConfig = { }, props: { aspectRatio: Number, - from: Function, - to: Function + from: Function as PropType<((coordinates: Array) => Array)>, + to: Function as PropType<((coordinates: Array) => Array)> } }; @@ -844,8 +896,8 @@ const DxSizeConfig = { "update:width": null, }, props: { - height: {}, - width: {} + height: Number, + width: Number } }; @@ -885,11 +937,11 @@ const DxSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; @@ -917,15 +969,15 @@ const DxTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Object, Number], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Object, Number] as PropType | number>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -962,19 +1014,19 @@ const DxTooltipConfig = { }, props: { arrowLength: Number, - border: Object, + border: Object as PropType>, color: String, container: {}, contentTemplate: {}, cornerRadius: Number, - customizeTooltip: {}, + customizeTooltip: Function as PropType<((info: MapLayerElement) => Record)>, enabled: Boolean, - font: Object, - opacity: {}, + font: Object as PropType>, + opacity: Number, paddingLeftRight: Number, paddingTopBottom: Number, - shadow: Object, - zIndex: {} + shadow: Object as PropType>, + zIndex: Number } }; @@ -1002,8 +1054,8 @@ const DxTooltipBorderConfig = { }, props: { color: String, - dashStyle: {}, - opacity: {}, + dashStyle: String as PropType, + opacity: Number, visible: Boolean, width: Number } @@ -1030,15 +1082,15 @@ const DxVectorMapTitleConfig = { "update:wordWrap": null, }, props: { - font: Object, - horizontalAlignment: {}, - margin: [Number, Object], - placeholderSize: {}, - subtitle: [Object, String], + font: Object as PropType>, + horizontalAlignment: String as PropType, + margin: [Number, Object] as PropType>, + placeholderSize: Number, + subtitle: [Object, String] as PropType | string>, text: String, - textOverflow: {}, - verticalAlignment: {}, - wordWrap: {} + textOverflow: String as PropType, + verticalAlignment: String as PropType, + wordWrap: String as PropType } }; @@ -1065,11 +1117,11 @@ const DxVectorMapTitleSubtitleConfig = { "update:wordWrap": null, }, props: { - font: Object, + font: Object as PropType>, offset: Number, text: String, - textOverflow: {}, - wordWrap: {} + textOverflow: String as PropType, + wordWrap: String as PropType } }; diff --git a/packages/devextreme/artifacts/npm/devextreme-dist/package.json b/packages/devextreme/artifacts/npm/devextreme-dist/package.json index acf34f848b64..8e5b5e3a6150 100644 --- a/packages/devextreme/artifacts/npm/devextreme-dist/package.json +++ b/packages/devextreme/artifacts/npm/devextreme-dist/package.json @@ -1,6 +1,6 @@ { "name": "devextreme-dist", - "version": "24.2.2", + "version": "24.2.3", "description": "HTML5 JavaScript Component Suite for Responsive Web Development", "keywords": [ "html5", diff --git a/packages/devextreme/build/gulp/npm.js b/packages/devextreme/build/gulp/npm.js index e22c9d51d8d0..d2c887aeb190 100644 --- a/packages/devextreme/build/gulp/npm.js +++ b/packages/devextreme/build/gulp/npm.js @@ -138,7 +138,7 @@ const sources = (src, dist, distGlob) => (() => merge( .pipe(gulp.dest(`${dist}/dist`)), gulp - .src('README.md') + .src('../../README.md') .pipe(gulp.dest(dist)), stringSrc('.npmignore', 'dist/js\ndist/ts\n!dist/css\n!/scss/bundles/*.scss\nproject.json') diff --git a/packages/devextreme/js/__internal/core/license/key.ts b/packages/devextreme/js/__internal/core/license/key.ts index 8fd64cd49e99..849d6a8b6823 100644 --- a/packages/devextreme/js/__internal/core/license/key.ts +++ b/packages/devextreme/js/__internal/core/license/key.ts @@ -14,4 +14,4 @@ export const PUBLIC_KEY: PublicKey = { ]), }; -export const INTERNAL_USAGE_ID = 'i9qS7usDB0eYJ_dN-hixdQ'; +export const INTERNAL_USAGE_ID = 'hxjQeUX1WEGQKud-NfOYMg'; diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts index 14bcaeb930af..61120ffc06ef 100644 --- a/packages/devextreme/js/__internal/ui/chat/messagelist.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts @@ -393,34 +393,56 @@ class MessageList extends Widget { } _renderMessage(message: Message): void { - const { author, timestamp } = message; - - const lastMessageGroup = this._getLastMessageGroup(); + const { timestamp } = message; const shouldCreateDayHeader = this._shouldAddDayHeader(timestamp); - if (lastMessageGroup) { - const { items } = lastMessageGroup.option(); - const lastMessageGroupItem = items[items.length - 1]; - const lastMessageGroupUserId = lastMessageGroupItem.author?.id; - const isTimeoutExceeded = this._isTimeoutExceeded(lastMessageGroupItem, message); - - if (author?.id === lastMessageGroupUserId && !isTimeoutExceeded && !shouldCreateDayHeader) { - lastMessageGroup.renderMessage(message); + if (shouldCreateDayHeader) { + this._createDayHeader(timestamp); + this._renderMessageIntoGroup(message); + return; + } - this._scrollDownContent(); + const lastMessageGroup = this._getLastMessageGroup(); - return; - } + if (!lastMessageGroup) { + this._renderMessageIntoGroup(message); + return; } - if (shouldCreateDayHeader) { - this._createDayHeader(timestamp); + const lastMessageGroupMessage = this._getLastMessageGroupItem(lastMessageGroup); + const isTimeoutExceeded = this._isTimeoutExceeded(lastMessageGroupMessage, message); + + if (this._isSameAuthor(message, lastMessageGroupMessage) && !isTimeoutExceeded) { + this._renderMessageIntoGroup(message, lastMessageGroup); + return; } - this._createMessageGroupComponent([message], author?.id); - this._setLastMessageGroupClasses(); + this._renderMessageIntoGroup(message); + } - this._scrollDownContent(); + _getLastMessageGroupItem(lastMessageGroup: MessageGroup): Message { + const { items } = lastMessageGroup.option(); + + return items[items.length - 1]; + } + + _isSameAuthor(lastMessageGroupMessage: Message, message: Message): boolean { + return lastMessageGroupMessage.author?.id === message.author?.id; + } + + _renderMessageIntoGroup(message: Message, messageGroup?: MessageGroup): void { + const { author } = message; + + this._setIsReachedBottom(); + + if (messageGroup) { + messageGroup.renderMessage(message); + } else { + this._createMessageGroupComponent([message], author?.id); + this._setLastMessageGroupClasses(); + } + + this._processScrollDownContent(this._isCurrentUser(author?.id)); } _getMessageData(message: Element): Message { @@ -571,19 +593,17 @@ class MessageList extends Widget { } _setIsReachedBottom(): void { - const contentHeight = getHeight(this._scrollView.content()); // @ts-expect-error - const containerHeight = getHeight(this._scrollView.container()); - const heightDifference = Math.floor(contentHeight - containerHeight); - const scrollOffsetTop = this._scrollView.scrollOffset()?.top ?? 0; - - const isBottomReached = heightDifference <= scrollOffsetTop; + this._isBottomReached = !this._isContentOverflowing() || this._scrollView.isBottomReached(); + } - this._isBottomReached = isBottomReached; + _isContentOverflowing(): boolean { + // @ts-expect-error + return getHeight(this._scrollView.content()) > getHeight(this._scrollView.container()); } - _processScrollDownContent(): void { - if (this._isBottomReached) { + _processScrollDownContent(shouldForceProcessing = false): void { + if (this._isBottomReached || shouldForceProcessing) { this._scrollDownContent(); } diff --git a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.pull_down.ts b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.pull_down.ts index f7c515dc6864..4fa5508758b5 100644 --- a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.pull_down.ts +++ b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.pull_down.ts @@ -165,7 +165,11 @@ const PullDownNativeScrollViewStrategy = NativeStrategy.inherit({ }, _isReachBottom() { - return this._reachBottomEnabled && Math.round(this._bottomBoundary + Math.floor(this._location)) <= 1; + return this._reachBottomEnabled && this.isBottomReached(); + }, + + isBottomReached() { + return Math.round(this._bottomBoundary + Math.floor(this._location)) <= 1; }, _reachBottom() { diff --git a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.swipe_down.ts b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.swipe_down.ts index f0295cce3485..9e1e73395a88 100644 --- a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.swipe_down.ts +++ b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.native.swipe_down.ts @@ -181,7 +181,11 @@ const SwipeDownNativeScrollViewStrategy = NativeStrategy.inherit({ }, _isReachBottom() { - return this._reachBottomEnabled && Math.round(this._bottomBoundary + Math.floor(this._location)) <= 1; + return this._reachBottomEnabled && this.isBottomReached(); + }, + + isBottomReached() { + return Math.round(this._bottomBoundary + Math.floor(this._location)) <= 1; }, _reachBottom() { diff --git a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.simulated.ts b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.simulated.ts index 1574898345b7..34b43a8f6c90 100644 --- a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.simulated.ts +++ b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.simulated.ts @@ -107,9 +107,13 @@ const ScrollViewScroller = Scroller.inherit({ }, _isReachBottom() { + return this._reachBottomEnabled && this.isBottomReached(); + }, + + isBottomReached() { const containerEl = this._$container.get(0); - return this._reachBottomEnabled && Math.round(this._bottomBoundary - Math.ceil(containerEl.scrollTop)) <= 1; + return Math.round(this._bottomBoundary - Math.ceil(containerEl.scrollTop)) <= 1; }, _scrollComplete() { @@ -322,6 +326,10 @@ const SimulatedScrollViewStrategy = SimulatedStrategy.inherit({ return location; }, + isBottomReached() { + return this._scrollers.vertical.isBottomReached(); + }, + dispose() { each(this._scrollers, function () { this.dispose(); diff --git a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.ts b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.ts index d11c542cd256..d00dff90bf24 100644 --- a/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.ts +++ b/packages/devextreme/js/__internal/ui/scroll_view/m_scroll_view.ts @@ -40,6 +40,7 @@ const scrollViewServerConfig = { release: noop, refresh: noop, scrollOffset: () => ({ top: 0, left: 0 }), + isBottomReached: () => false, _optionChanged(args) { if (args.name !== 'onUpdated') { return this.callBase.apply(this, arguments); @@ -308,6 +309,10 @@ const ScrollView = Scrollable.inherit(isServerSide ? scrollViewServerConfig : { this._unlock(); }, + isBottomReached() { + return this._strategy.isBottomReached(); + }, + _dispose() { this._strategy.dispose(); this.callBase(); diff --git a/packages/devextreme/js/core/version.js b/packages/devextreme/js/core/version.js index 348210c59049..dd314534de5c 100644 --- a/packages/devextreme/js/core/version.js +++ b/packages/devextreme/js/core/version.js @@ -1,2 +1,2 @@ -export const version = '24.2.2'; -export const fullVersion = '24.2.2'; +export const version = '24.2.3'; +export const fullVersion = '24.2.3'; diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json index 13fa1b23ceda..96fc2b02f5f8 100644 --- a/packages/devextreme/package.json +++ b/packages/devextreme/package.json @@ -1,6 +1,6 @@ { "name": "devextreme", - "version": "24.2.2", + "version": "24.2.3", "description": "HTML5 JavaScript Component Suite for Responsive Web Development", "keywords": [ "html5", diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js index 2c26119f44c0..2594b6320469 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js @@ -1,7 +1,6 @@ import $ from 'jquery'; import MessageGroup from '__internal/ui/chat/messagegroup'; -import MessageBubble from '__internal/ui/chat/messagebubble'; import ChatAvatar from '__internal/ui/chat/avatar'; import dateLocalization from 'localization/date'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js index b02c9b732786..1563d6168aba 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js @@ -1155,6 +1155,7 @@ QUnit.module('MessageList', () => { }); QUnit.test('should be scrolled down if typingUsers changed at runtime if scroll position at the bottom', function(assert) { + const done = assert.async(); this.reinit({ width: 300, height: 500, @@ -1165,12 +1166,16 @@ QUnit.module('MessageList', () => { assert.roughEqual(scrollTopBefore, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom before updating typingUsers'); - this.instance.option({ typingUsers: [{ name: 'User' }] }); + setTimeout(() => { + this.instance.option({ typingUsers: [{ name: 'User' }] }); + + const scrollTop = this.getScrollView().scrollTop(); - const scrollTop = this.getScrollView().scrollTop(); + assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after items are updated at runtime'); + assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after typingUsers are updated at runtime'); - assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after items are updated at runtime'); - assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after typingUsers are updated at runtime'); + done(); + }); }); QUnit.test('should not be scroll down if typingUsers changed at runtime if scroll position not at the bottom', function(assert) { @@ -1204,6 +1209,30 @@ QUnit.module('MessageList', () => { }); }); + QUnit.test('should be scroll down if typingUsers changed at runtime, provided the content does not overflow before the typing indicator is displayed', function(assert) { + const done = assert.async(); + this.reinit({ + width: 300, + height: 500, + items: generateMessages(7), + }); + + const scrollTopBefore = this.getScrollView().scrollTop(); + + assert.strictEqual(scrollTopBefore, 0, 'content is not overflowing'); + + setTimeout(() => { + this.instance.option({ typingUsers: [{ name: 'User' }] }); + + const scrollTop = this.getScrollView().scrollTop(); + + assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after items are updated at runtime'); + assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after typingUsers are updated at runtime'); + + done(); + }); + }); + QUnit.test('should be scrolled down if items changed at runtime with an invalidate call', function(assert) { const done = assert.async(); this.reinit({ @@ -1227,10 +1256,9 @@ QUnit.module('MessageList', () => { [MOCK_CURRENT_USER_ID, MOCK_COMPANION_USER_ID].forEach(id => { const isCurrentUser = id === MOCK_CURRENT_USER_ID; - QUnit.test(`ScrollView should be scrolled down after render ${isCurrentUser ? 'current user' : 'companion'} message`, function(assert) { + QUnit.test(`should be scrolled down after render ${isCurrentUser ? 'current user' : 'companion'} message`, function(assert) { const done = assert.async(); - assert.expect(2); - const items = generateMessages(31); + const items = generateMessages(52); this.reinit({ width: 300, @@ -1245,18 +1273,135 @@ QUnit.module('MessageList', () => { text: 'NEW MESSAGE', }; - this.instance.option('items', [...items, newMessage]); + const scrollTopBefore = this.getScrollView().scrollTop(); + assert.roughEqual(scrollTopBefore, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom before render new message'); setTimeout(() => { + this.instance.option('items', [...items, newMessage]); + + setTimeout(() => { + const scrollTop = this.getScrollView().scrollTop(); + + assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered'); + assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after rendering the new message'); + done(); + }); + }); + }); + + QUnit.test(`should be scrolled down after render ${isCurrentUser ? 'current user' : 'companion'} message, provided the content does not overflow before the message is rendered`, function(assert) { + const done = assert.async(); + const items = generateMessages(7); + + this.reinit({ + width: 300, + height: 500, + items: generateMessages(7), + }); + + const author = { id }; + const newMessage = { + author, + timestamp: NOW, + text: 'NEW MESSAGE', + }; + + const scrollTopBefore = this.getScrollView().scrollTop(); + + assert.strictEqual(scrollTopBefore, 0, 'content is not overflowing'); + + setTimeout(() => { + this.instance.option('items', [...items, newMessage]); + const scrollTop = this.getScrollView().scrollTop(); assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered'); assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after rendering the new message'); + done(); }); }); }); + QUnit.test('should be scroll down after render current user message if scroll position not at the bottom', function(assert) { + const done = assert.async(); + const items = generateMessages(52); + + this.reinit({ + width: 300, + height: 500, + items, + currentUserId: MOCK_CURRENT_USER_ID, + }); + + const author = { id: MOCK_CURRENT_USER_ID }; + const newMessage = { + author, + timestamp: NOW, + text: 'NEW MESSAGE', + }; + + setTimeout(() => { + const initialScrollTop = this.getScrollOffsetMax() - 100; + this.getScrollView().scrollTo({ top: initialScrollTop }); + + setTimeout(() => { + const scrollTopBefore = this.getScrollView().scrollTop(); + assert.roughEqual(scrollTopBefore, this.getScrollOffsetMax() - 100, 1, 'scroll position should not be at the bottom before rendering the message'); + + setTimeout(() => { + this.instance.option('items', [...items, newMessage]); + + setTimeout(() => { + const scrollTop = this.getScrollView().scrollTop(); + + assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered'); + assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after rendering the new message'); + done(); + }); + }); + }); + }); + }); + + QUnit.test('should not be scroll down after render companion message if scroll position not at the bottom', function(assert) { + const done = assert.async(); + const items = generateMessages(52); + + this.reinit({ + width: 300, + height: 500, + items, + currentUserId: MOCK_CURRENT_USER_ID + }); + + const author = { id: MOCK_COMPANION_USER_ID }; + const newMessage = { + author, + timestamp: NOW, + text: 'NEW MESSAGE', + }; + + setTimeout(() => { + this.getScrollView().scrollBy({ top: -100 }); + setTimeout(() => { + + const scrollTopBefore = this.getScrollView().scrollTop(); + assert.roughEqual(scrollTopBefore, this.getScrollOffsetMax() - 100, 1, 'scroll position should not be at the bottom before rendering the message'); + + setTimeout(() => { + this.instance.option('items', [...items, newMessage]); + + const scrollTop = this.getScrollView().scrollTop(); + + assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered'); + assert.roughEqual(scrollTop, scrollTopBefore, 1, 'scroll position should be at the bottom after rendering the new message'); + done(); + }); + }); + }); + }); + QUnit.test('should be scrolled down after showing if was initially rendered inside an invisible element', function(assert) { const done = assert.async(); $('#qunit-fixture').css('display', 'none'); diff --git a/packages/testcafe-models/package.json b/packages/testcafe-models/package.json index 0c440a85183f..0630d924ff80 100644 --- a/packages/testcafe-models/package.json +++ b/packages/testcafe-models/package.json @@ -6,5 +6,5 @@ "devDependencies": { "devextreme": "workspace:~" }, - "version": "24.2.2" + "version": "24.2.3" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 820f770c7481..9a096df18f84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: 6.0.2 version: 6.0.2(@angular/compiler@17.3.12(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.14.10))(tslint@6.1.3(typescript@5.4.5)) devextreme-internal-tools: - specifier: 16.0.0-beta.15 - version: 16.0.0-beta.15 + specifier: 16.0.0-beta.16 + version: 16.0.0-beta.16 http-server: specifier: 14.1.1 version: 14.1.1 @@ -562,16 +562,16 @@ importers: version: 18.0.11 css-loader: specifier: 6.10.0 - version: 6.10.0(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 6.10.0(webpack@5.94.0) source-map-loader: specifier: 4.0.2 - version: 4.0.2(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 4.0.2(webpack@5.94.0) style-loader: specifier: 3.3.4 - version: 3.3.4(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 3.3.4(webpack@5.94.0) ts-loader: specifier: 9.5.1 - version: 9.5.1(typescript@5.4.5)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 9.5.1(typescript@5.4.5)(webpack@5.94.0) tsconfig-paths-webpack-plugin: specifier: 4.1.0 version: 4.1.0 @@ -657,19 +657,19 @@ importers: version: 2.0.0-beta.7(vue@3.2.47) css-loader: specifier: 6.10.0 - version: 6.10.0(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 6.10.0(webpack@5.94.0) minimatch: specifier: 4.2.3 version: 4.2.3 source-map-loader: specifier: 4.0.2 - version: 4.0.2(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 4.0.2(webpack@5.94.0) style-loader: specifier: 3.3.4 - version: 3.3.4(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 3.3.4(webpack@5.94.0) ts-loader: specifier: 9.5.1 - version: 9.5.1(typescript@4.9.5)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 9.5.1(typescript@4.9.5)(webpack@5.94.0) tsconfig-paths-webpack-plugin: specifier: 4.1.0 version: 4.1.0 @@ -678,10 +678,10 @@ importers: version: 4.9.5 url-loader: specifier: 1.1.2 - version: 1.1.2(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 1.1.2(webpack@5.94.0) vue-loader: specifier: 17.4.2 - version: 17.4.2(@vue/compiler-sfc@3.3.4)(vue@3.2.47)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + version: 17.4.2(@vue/compiler-sfc@3.3.4)(vue@3.2.47)(webpack@5.94.0) vue-router: specifier: 4.2.5 version: 4.2.5(vue@3.2.47) @@ -8106,8 +8106,8 @@ packages: devextreme-cldr-data@1.0.3: resolution: {integrity: sha512-xd+uWv1KzEhr+ZH/MOWfDei3GFz+NAYyKUR9HgjM9BBwPel7PpMElYp4whM+PtAjziBaTssQnA//ob5c3BovTA==} - devextreme-internal-tools@16.0.0-beta.15: - resolution: {integrity: sha512-o8gjLfjVBHcas5Q62Fvk12ECTR0EzvwXfxMk6uYPx4dN92YGm2PSY6O7AlneYLH4JCogNiyrldxO5pLimqldYg==} + devextreme-internal-tools@16.0.0-beta.16: + resolution: {integrity: sha512-yTDikY771EVyribuPu5i+4muK8tgdO/J3Efi785UYhScZqAhQObLwkQgq09PWyK70+e77e+CB+2eDO7wgQvlyw==} engines: {node: '>=12.0.0'} hasBin: true @@ -19730,15 +19730,13 @@ snapshots: transitivePeerDependencies: - '@parcel/core' - '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)': + '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.15) '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) '@parcel/logger': 2.12.0 '@parcel/utils': 2.12.0 lmdb: 2.8.5 - transitivePeerDependencies: - - '@swc/helpers' '@parcel/codeframe@2.12.0': dependencies: @@ -19798,7 +19796,7 @@ snapshots: '@parcel/core@2.12.0(@swc/helpers@0.5.15)': dependencies: '@mischnic/json-sourcemap': 0.1.1 - '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) + '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15)) '@parcel/diagnostic': 2.12.0 '@parcel/events': 2.12.0 '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) @@ -20213,7 +20211,7 @@ snapshots: '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)': dependencies: - '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) + '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15)) '@parcel/diagnostic': 2.12.0 '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15) @@ -22721,31 +22719,31 @@ snapshots: '@webcomponents/custom-elements@1.6.0': {} - '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0))': + '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.94.0)': dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0) webpack-cli: 4.10.0(webpack@5.94.0) - '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4))': + '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.94.0)': dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0) - '@webpack-cli/info@1.5.0(webpack-cli@4.10.0(webpack@5.94.0))': + '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)': dependencies: envinfo: 7.14.0 webpack-cli: 4.10.0(webpack@5.94.0) - '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4))': + '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.94.0)': dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0) - '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0(webpack@5.94.0))': + '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)': dependencies: webpack-cli: 4.10.0(webpack@5.94.0) - '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack-dev-server@4.15.1(webpack-cli@5.1.4)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4))': + '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@4.15.1)(webpack@5.94.0)': dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0) @@ -24920,7 +24918,7 @@ snapshots: optionalDependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.18.20) - css-loader@6.10.0(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + css-loader@6.10.0(webpack@5.94.0): dependencies: icss-utils: 5.1.0(postcss@8.4.38) postcss: 8.4.38 @@ -25372,7 +25370,7 @@ snapshots: devextreme-cldr-data@1.0.3: {} - devextreme-internal-tools@16.0.0-beta.15: + devextreme-internal-tools@16.0.0-beta.16: dependencies: dasherize: 2.0.0 deepmerge: 4.3.1 @@ -33475,7 +33473,7 @@ snapshots: source-map-js@1.2.1: {} - source-map-loader@4.0.2(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + source-map-loader@4.0.2(webpack@5.94.0): dependencies: iconv-lite: 0.6.3 source-map-js: 1.2.1 @@ -33859,7 +33857,7 @@ snapshots: dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.18.20) - style-loader@3.3.4(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + style-loader@3.3.4(webpack@5.94.0): dependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) @@ -34346,18 +34344,18 @@ snapshots: '@swc/core': 1.9.2(@swc/helpers@0.5.15) esbuild: 0.20.1 - terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0)): + terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.36.0 - webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0) + webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15)) optionalDependencies: '@swc/core': 1.9.2(@swc/helpers@0.5.15) - terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -34368,17 +34366,6 @@ snapshots: optionalDependencies: '@swc/core': 1.9.2(@swc/helpers@0.5.15) - terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 3.3.0 - serialize-javascript: 6.0.2 - terser: 5.36.0 - webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15)) - optionalDependencies: - '@swc/core': 1.9.2(@swc/helpers@0.5.15) - terser-webpack-plugin@5.3.9(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.18.20)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.18.20)): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -35074,7 +35061,7 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.24.0) - ts-loader@9.5.1(typescript@4.9.5)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + ts-loader@9.5.1(typescript@4.9.5)(webpack@5.94.0): dependencies: chalk: 4.1.2 enhanced-resolve: 5.17.1 @@ -35084,7 +35071,7 @@ snapshots: typescript: 4.9.5 webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) - ts-loader@9.5.1(typescript@5.4.5)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + ts-loader@9.5.1(typescript@5.4.5)(webpack@5.94.0): dependencies: chalk: 4.1.2 enhanced-resolve: 5.17.1 @@ -35539,7 +35526,7 @@ snapshots: url-join@4.0.1: {} - url-loader@1.1.2(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + url-loader@1.1.2(webpack@5.94.0): dependencies: loader-utils: 1.4.2 mime: 2.6.0 @@ -35833,7 +35820,7 @@ snapshots: transitivePeerDependencies: - supports-color - vue-loader@17.4.2(@vue/compiler-sfc@3.3.4)(vue@3.2.47)(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + vue-loader@17.4.2(@vue/compiler-sfc@3.3.4)(vue@3.2.47)(webpack@5.94.0): dependencies: chalk: 4.1.2 hash-sum: 2.0.0 @@ -35909,9 +35896,9 @@ snapshots: webpack-cli@4.10.0(webpack@5.94.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0)) - '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0(webpack@5.94.0)) - '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack@5.94.0)) + '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.94.0) + '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0) + '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0) colorette: 2.0.20 commander: 7.2.0 cross-spawn: 7.0.6 @@ -35925,9 +35912,9 @@ snapshots: webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack-dev-server@4.15.1(webpack-cli@5.1.4)(webpack@5.94.0))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.94.0) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.94.0) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@4.15.1)(webpack@5.94.0) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.6 @@ -35960,7 +35947,7 @@ snapshots: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.18.20) optional: true - webpack-dev-middleware@5.3.4(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)): + webpack-dev-middleware@5.3.4(webpack@5.94.0): dependencies: colorette: 2.0.20 memfs: 3.5.3 @@ -36019,7 +36006,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 5.3.4(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + webpack-dev-middleware: 5.3.4(webpack@5.94.0) ws: 8.18.0 optionalDependencies: webpack: 5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4) @@ -36265,7 +36252,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@4.10.0)) + terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: @@ -36297,7 +36284,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(webpack@5.94.0) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: diff --git a/tools/scripts/common/version.ts b/tools/scripts/common/version.ts index ef39238a9fae..a9ae08417a97 100644 --- a/tools/scripts/common/version.ts +++ b/tools/scripts/common/version.ts @@ -18,7 +18,6 @@ export function updateVersion(version: string | undefined): void { .concat([rootWorkspacePath]); sh.sed('-i', /"version": ".*"/, `"version": "${version}"`, workspacesPaths); - sh.sed('-i', /"devextreme(-angular|-react|-vue|-dist)?": ".*"/, `"devextreme$1": "~${version}"`, workspacesPaths); sh.exec('pnpm install --no-frozen-lockfile'); } diff --git a/tools/scripts/update-version.ts b/tools/scripts/update-version.ts index 003d302b3cb0..773271ec2eaa 100644 --- a/tools/scripts/update-version.ts +++ b/tools/scripts/update-version.ts @@ -4,7 +4,7 @@ import { updateVersion, updateVersionJs } from './common/version'; const version = process.argv[2]; if (version == null) { - console.error(`Usage: 'npm run all:update-version -- $version' (XX.X.X)`); + console.error(`Usage: 'pnpm run all:update-version $version' (XX.X.X)`); process.exit(1); }