From f9b582fcec08d1166422a0109d464b4b887e3e08 Mon Sep 17 00:00:00 2001 From: Alan Candido Date: Wed, 16 Oct 2024 15:48:08 -0300 Subject: [PATCH] =?UTF-8?q?Migra=C3=A7=C3=A3o=20de=20@vscode/webview-ui-to?= =?UTF-8?q?olkit=20para=20@vscode-elements/elements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit O pacote @vscode/webview-ui-toolkit foi descontinuado, por isso foi migrado para @vscode-elements/elements. https://github.com/microsoft/vscode-webview-ui-toolkit/issues/561 --- index.html | 4 +- package-lock.json | 479 ++++++++---------- package.json | 21 +- src/components/dataGrid.7z | Bin 0 -> 10250 bytes src/components/dataGrid/dataGrid.tsx | 270 +++++----- src/components/dataGrid/dataGrid.type.tsx | 3 +- src/components/dataGrid/dataSourceContext.tsx | 10 +- src/components/dataGrid/fieldFilter.tsx | 284 +++++++++++ src/components/dataGrid/groupingPanel.tsx | 14 +- src/components/dataGrid/paginator.tsx | 41 +- src/components/decorator/link.tsx | 35 ++ src/components/decorator/progress-ring.tsx | 6 +- src/components/fields/checkBoxField.tsx | 45 +- src/components/fields/labelField.tsx | 34 +- src/components/fields/numericField.tsx | 50 +- src/components/fields/selectionField.tsx | 64 ++- .../fields/selectionResourceField.tsx | 49 +- src/components/fields/simpleCheckBoxField.tsx | 2 +- src/components/fields/simpleTextField.tsx | 36 +- src/components/fields/textField.tsx | 64 ++- src/components/form/form.css | 4 +- src/components/form/form.tsx | 240 +++++---- src/components/mdToHtml.tsx | 9 +- src/components/page/content.css | 2 - src/components/page/content.tsx | 2 + src/components/page/footer.tsx | 8 +- src/components/page/page.css | 14 +- src/components/page/page.tsx | 11 +- src/components/paginator/paginator.tsx | 28 +- .../popup-message/popup-message.tsx | 30 +- src/components/table/table.tsx | 34 +- src/components/tree/index.ts | 2 +- src/components/tree/tree.tsx | 20 +- src/components/vscode-elements.ts | 40 ++ src/demo/demo.css | 16 +- src/demo/demo.tsx | 32 +- src/demo/demoDatagrid.css | 4 +- src/demo/demoDatagrid.tsx | 76 +-- src/demo/demoDualSelection.css | 17 + src/demo/demoDualSelection.tsx | 220 ++++++++ src/demo/demoForm.css | 6 - src/demo/demoForm.tsx | 68 ++- src/demo/demoTable.tsx | 50 +- src/demo/demoTableCustomBody.tsx | 80 +-- src/index.ts | 2 +- src/model/modelData.ts | 4 +- 46 files changed, 1621 insertions(+), 909 deletions(-) create mode 100644 src/components/dataGrid.7z create mode 100644 src/components/dataGrid/fieldFilter.tsx create mode 100644 src/components/decorator/link.tsx create mode 100644 src/components/vscode-elements.ts create mode 100644 src/demo/demoDualSelection.css create mode 100644 src/demo/demoDualSelection.tsx diff --git a/index.html b/index.html index daac663..5efebc9 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - Hello World + TDS-Webtoolkit - +
diff --git a/package-lock.json b/package-lock.json index 5138314..e9b6a25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,28 +9,27 @@ "version": "0.0.20", "license": "Apache-2.0", "dependencies": { - "@microsoft/fast-components": "^2.30.6", - "@vscode/codicons": "^0.0.35", - "@vscode/webview-ui-toolkit": "^1.4.0", + "@vscode-elements/elements": "^1.7.0", + "@vscode-elements/react-elements": "^0.4.0", + "@vscode/codicons": "^0.0.36", "react-dom": "^18.3.1", - "react-hook-form": "=7.51.4", "typescript-plugin-css-modules": "^5.1.0" }, "devDependencies": { - "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.0", + "@types/react": "^18.3.11", + "@types/react-dom": "^18.3.1", "@types/vscode": "^1.89.0", "@types/vscode-webview": "^1.57.5", - "@vitejs/plugin-react": "^4.3.1", - "css-loader": "^7.1.1", + "@vitejs/plugin-react": "^4.3.2", + "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", "style-loader": "^4.0.0", "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.5.1", - "typescript": "^5.4.5", + "typescript": "^5.6.2", "typescript-plugin-css-modules": "^5.1.0", - "vite": "^5.3.5", - "webpack": "^5.91.0", + "vite": "^5.4.8", + "webpack": "^5.95.0", "webpack-cli": "^5.1.4", "webpack-stream": "^7.0.0" } @@ -889,74 +888,31 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@microsoft/fast-colors": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz", - "integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA==" - }, - "node_modules/@microsoft/fast-components": { - "version": "2.30.6", - "resolved": "https://registry.npmjs.org/@microsoft/fast-components/-/fast-components-2.30.6.tgz", - "integrity": "sha512-q6nPiRyA/8HHqCbN4ClziJfOfFaTIVIyBUTSJTcO7ODzkr8oEin7VzKJNoIP/qMpKMkg90wxwLOucr6nsokApw==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "dependencies": { - "@microsoft/fast-colors": "^5.3.0", - "@microsoft/fast-element": "^1.10.1", - "@microsoft/fast-foundation": "^2.46.2", - "@microsoft/fast-web-utilities": "^5.4.1", - "tslib": "^1.13.0" - } - }, - "node_modules/@microsoft/fast-components/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@microsoft/fast-element": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.13.0.tgz", - "integrity": "sha512-iFhzKbbD0cFRo9cEzLS3Tdo9BYuatdxmCEKCpZs1Cro/93zNMpZ/Y9/Z7SknmW6fhDZbpBvtO8lLh9TFEcNVAQ==" - }, - "node_modules/@microsoft/fast-foundation": { - "version": "2.49.6", - "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.6.tgz", - "integrity": "sha512-DZVr+J/NIoskFC1Y6xnAowrMkdbf2d5o7UyWK6gW5AiQ6S386Ql8dw4KcC4kHaeE1yL2CKvweE79cj6ZhJhTvA==", - "dependencies": { - "@microsoft/fast-element": "^1.13.0", - "@microsoft/fast-web-utilities": "^5.4.1", - "tabbable": "^5.2.0", - "tslib": "^1.13.0" - } - }, - "node_modules/@microsoft/fast-foundation/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.1", + "resolved": "https://npm.totvs.io/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", + "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" }, - "node_modules/@microsoft/fast-react-wrapper": { - "version": "0.3.24", - "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.3.24.tgz", - "integrity": "sha512-sRnSBIKaO42p4mYoYR60spWVkg89wFxFAgQETIMazAm2TxtlsnsGszJnTwVhXq2Uz+XNiD8eKBkfzK5c/i6/Kw==", - "dependencies": { - "@microsoft/fast-element": "^1.13.0", - "@microsoft/fast-foundation": "^2.49.6" - }, + "node_modules/@lit/react": { + "version": "1.0.6", + "resolved": "https://npm.totvs.io/@lit/react/-/react-1.0.6.tgz", + "integrity": "sha512-QIss8MPh6qUoFJmuaF4dSHts3qCsA36S3HcOLiNPShxhgYPr4XJRnCBKPipk85sR9xr6TQrOcDMfexwbNdJHYA==", "peerDependencies": { - "react": ">=16.9.0" + "@types/react": "17 || 18" } }, - "node_modules/@microsoft/fast-web-utilities": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz", - "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==", + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://npm.totvs.io/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", "dependencies": { - "exenv-es6": "^1.1.1" + "@lit-labs/ssr-dom-shim": "^1.2.0" } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz", - "integrity": "sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz", + "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==", "cpu": [ "arm" ], @@ -967,9 +923,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.20.0.tgz", - "integrity": "sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz", + "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==", "cpu": [ "arm64" ], @@ -980,9 +936,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.20.0.tgz", - "integrity": "sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz", + "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==", "cpu": [ "arm64" ], @@ -993,9 +949,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.20.0.tgz", - "integrity": "sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz", + "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==", "cpu": [ "x64" ], @@ -1006,9 +962,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.20.0.tgz", - "integrity": "sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz", + "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==", "cpu": [ "arm" ], @@ -1019,9 +975,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.20.0.tgz", - "integrity": "sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz", + "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==", "cpu": [ "arm" ], @@ -1032,9 +988,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.20.0.tgz", - "integrity": "sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz", + "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==", "cpu": [ "arm64" ], @@ -1045,9 +1001,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.20.0.tgz", - "integrity": "sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz", + "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==", "cpu": [ "arm64" ], @@ -1058,9 +1014,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.20.0.tgz", - "integrity": "sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz", + "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==", "cpu": [ "ppc64" ], @@ -1071,9 +1027,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.20.0.tgz", - "integrity": "sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz", + "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==", "cpu": [ "riscv64" ], @@ -1084,9 +1040,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.20.0.tgz", - "integrity": "sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz", + "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==", "cpu": [ "s390x" ], @@ -1097,9 +1053,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz", - "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz", + "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==", "cpu": [ "x64" ], @@ -1110,9 +1066,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.20.0.tgz", - "integrity": "sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz", + "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==", "cpu": [ "x64" ], @@ -1123,9 +1079,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.20.0.tgz", - "integrity": "sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz", + "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==", "cpu": [ "arm64" ], @@ -1136,9 +1092,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.20.0.tgz", - "integrity": "sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz", + "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==", "cpu": [ "ia32" ], @@ -1149,9 +1105,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.20.0.tgz", - "integrity": "sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz", + "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==", "cpu": [ "x64" ], @@ -1217,30 +1173,10 @@ "@babel/types": "^7.20.7" } }, - "node_modules/@types/eslint": { - "version": "8.56.10", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz", - "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==", - "dev": true, - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, - "node_modules/@types/eslint-scope": { - "version": "3.7.7", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", - "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dev": true, - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "version": "1.0.6", + "resolved": "https://npm.totvs.io/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true }, "node_modules/@types/istanbul-lib-coverage": { @@ -1303,28 +1239,31 @@ "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", - "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", - "dev": true, + "version": "18.3.11", + "resolved": "https://npm.totvs.io/@types/react/-/react-18.3.11.tgz", + "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", - "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", + "version": "18.3.1", + "resolved": "https://npm.totvs.io/@types/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", "dev": true, "dependencies": { "@types/react": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://npm.totvs.io/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/vscode": { "version": "1.89.0", "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.89.0.tgz", @@ -1333,7 +1272,7 @@ }, "node_modules/@types/vscode-webview": { "version": "1.57.5", - "resolved": "https://registry.npmjs.org/@types/vscode-webview/-/vscode-webview-1.57.5.tgz", + "resolved": "https://npm.totvs.io/@types/vscode-webview/-/vscode-webview-1.57.5.tgz", "integrity": "sha512-iBAUYNYkz+uk1kdsq05fEcoh8gJmwT3lqqFPN7MGyjQ3HVloViMdo7ZJ8DFIP8WOK74PjOEilosqAyxV2iUFUw==", "dev": true }, @@ -1353,14 +1292,14 @@ "dev": true }, "node_modules/@vitejs/plugin-react": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz", - "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==", + "version": "4.3.2", + "resolved": "https://npm.totvs.io/@vitejs/plugin-react/-/plugin-react-4.3.2.tgz", + "integrity": "sha512-hieu+o05v4glEBucTcKMK3dlES0OeJlD9YVOAPraVMOInBCwzumaIFiUjr4bHK7NPgnAHgiskUoceKercrN8vg==", "dev": true, "dependencies": { - "@babel/core": "^7.24.5", - "@babel/plugin-transform-react-jsx-self": "^7.24.5", - "@babel/plugin-transform-react-jsx-source": "^7.24.1", + "@babel/core": "^7.25.2", + "@babel/plugin-transform-react-jsx-self": "^7.24.7", + "@babel/plugin-transform-react-jsx-source": "^7.24.7", "@types/babel__core": "^7.20.5", "react-refresh": "^0.14.2" }, @@ -1371,25 +1310,31 @@ "vite": "^4.2.0 || ^5.0.0" } }, - "node_modules/@vscode/codicons": { - "version": "0.0.35", - "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.35.tgz", - "integrity": "sha512-7iiKdA5wHVYSbO7/Mm0hiHD3i4h+9hKUe1O4hISAe/nHhagMwb2ZbFC8jU6d7Cw+JNT2dWXN2j+WHbkhT5/l2w==" + "node_modules/@vscode-elements/elements": { + "version": "1.7.0", + "resolved": "https://npm.totvs.io/@vscode-elements/elements/-/elements-1.7.0.tgz", + "integrity": "sha512-EFuI+kyMVLNuLtv8eohFN8+KTQyvXGOe9NxxkDasaDMNrI7BFJ+xSonfI/2NcSDtbcZ4Pt0xtapINBADChXnEw==", + "dependencies": { + "lit": "^3.2.0" + } }, - "node_modules/@vscode/webview-ui-toolkit": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.4.0.tgz", - "integrity": "sha512-modXVHQkZLsxgmd5yoP3ptRC/G8NBDD+ob+ngPiWNQdlrH6H1xR/qgOBD85bfU3BhOB5sZzFWBwwhp9/SfoHww==", + "node_modules/@vscode-elements/react-elements": { + "version": "0.4.0", + "resolved": "https://npm.totvs.io/@vscode-elements/react-elements/-/react-elements-0.4.0.tgz", + "integrity": "sha512-N1RjFod/Cwln+NV9+PzRkXJGQpzBcYLE2FJVp4Cd1Lt0cRt7DP1de3d09jFmFog39ubMns5N6m4YnfwI/9FvVg==", "dependencies": { - "@microsoft/fast-element": "^1.12.0", - "@microsoft/fast-foundation": "^2.49.4", - "@microsoft/fast-react-wrapper": "^0.3.22", - "tslib": "^2.6.2" + "@lit/react": "^1.0.6" }, "peerDependencies": { - "react": ">=16.9.0" + "@vscode-elements/elements": "^1.7.0", + "react": "^18.0.0" } }, + "node_modules/@vscode/codicons": { + "version": "0.0.36", + "resolved": "https://npm.totvs.io/@vscode/codicons/-/codicons-0.0.36.tgz", + "integrity": "sha512-wsNOvNMMJ2BY8rC2N2MNBG7yOowV3ov8KlvUE/AiVUlHKTfWsw3OgAOQduX7h0Un6GssKD3aoTVH+TF3DSQwKQ==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -1604,10 +1549,10 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://npm.totvs.io/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "dev": true, "peerDependencies": { "acorn": "^8" @@ -1790,12 +1735,12 @@ "dev": true }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://npm.totvs.io/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -2098,9 +2043,9 @@ } }, "node_modules/css-loader": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.1.tgz", - "integrity": "sha512-OxIR5P2mjO1PSXk44bWuQ8XtMK4dpEqpIyERCx3ewOo3I8EmbcxMPUc5ScLtQfgXtOojoMv57So4V/C02HQLsw==", + "version": "7.1.2", + "resolved": "https://npm.totvs.io/css-loader/-/css-loader-7.1.2.tgz", + "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==", "dev": true, "dependencies": { "icss-utils": "^5.1.0", @@ -2436,8 +2381,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debug": { "version": "4.3.4", @@ -2530,9 +2474,9 @@ "dev": true }, "node_modules/enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.1", + "resolved": "https://npm.totvs.io/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -2670,11 +2614,6 @@ "node": ">=0.8.x" } }, - "node_modules/exenv-es6": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz", - "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==" - }, "node_modules/extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -2731,9 +2670,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://npm.totvs.io/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" @@ -3020,7 +2959,7 @@ }, "node_modules/is-number": { "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "resolved": "https://npm.totvs.io/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, "engines": { @@ -3201,6 +3140,34 @@ "node": ">=10" } }, + "node_modules/lit": { + "version": "3.2.1", + "resolved": "https://npm.totvs.io/lit/-/lit-3.2.1.tgz", + "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-element": { + "version": "4.1.1", + "resolved": "https://npm.totvs.io/lit-element/-/lit-element-4.1.1.tgz", + "integrity": "sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-html": { + "version": "3.2.1", + "resolved": "https://npm.totvs.io/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -3301,12 +3268,12 @@ "dev": true }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://npm.totvs.io/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -3491,9 +3458,9 @@ "dev": true }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "version": "1.1.0", + "resolved": "https://npm.totvs.io/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "dev": true }, "node_modules/picomatch": { @@ -3598,9 +3565,9 @@ } }, "node_modules/postcss": { - "version": "8.4.40", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", - "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", + "version": "8.4.47", + "resolved": "https://npm.totvs.io/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "dev": true, "funding": [ { @@ -3618,8 +3585,8 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -4193,21 +4160,6 @@ "react": "^18.3.1" } }, - "node_modules/react-hook-form": { - "version": "7.51.4", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz", - "integrity": "sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==", - "engines": { - "node": ">=12.22.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-hook-form" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -4331,12 +4283,12 @@ } }, "node_modules/rollup": { - "version": "4.20.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.20.0.tgz", - "integrity": "sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==", + "version": "4.24.0", + "resolved": "https://npm.totvs.io/rollup/-/rollup-4.24.0.tgz", + "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==", "dev": true, "dependencies": { - "@types/estree": "1.0.5" + "@types/estree": "1.0.6" }, "bin": { "rollup": "dist/bin/rollup" @@ -4346,22 +4298,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.20.0", - "@rollup/rollup-android-arm64": "4.20.0", - "@rollup/rollup-darwin-arm64": "4.20.0", - "@rollup/rollup-darwin-x64": "4.20.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.20.0", - "@rollup/rollup-linux-arm-musleabihf": "4.20.0", - "@rollup/rollup-linux-arm64-gnu": "4.20.0", - "@rollup/rollup-linux-arm64-musl": "4.20.0", - "@rollup/rollup-linux-powerpc64le-gnu": "4.20.0", - "@rollup/rollup-linux-riscv64-gnu": "4.20.0", - "@rollup/rollup-linux-s390x-gnu": "4.20.0", - "@rollup/rollup-linux-x64-gnu": "4.20.0", - "@rollup/rollup-linux-x64-musl": "4.20.0", - "@rollup/rollup-win32-arm64-msvc": "4.20.0", - "@rollup/rollup-win32-ia32-msvc": "4.20.0", - "@rollup/rollup-win32-x64-msvc": "4.20.0", + "@rollup/rollup-android-arm-eabi": "4.24.0", + "@rollup/rollup-android-arm64": "4.24.0", + "@rollup/rollup-darwin-arm64": "4.24.0", + "@rollup/rollup-darwin-x64": "4.24.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.24.0", + "@rollup/rollup-linux-arm-musleabihf": "4.24.0", + "@rollup/rollup-linux-arm64-gnu": "4.24.0", + "@rollup/rollup-linux-arm64-musl": "4.24.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0", + "@rollup/rollup-linux-riscv64-gnu": "4.24.0", + "@rollup/rollup-linux-s390x-gnu": "4.24.0", + "@rollup/rollup-linux-x64-gnu": "4.24.0", + "@rollup/rollup-linux-x64-musl": "4.24.0", + "@rollup/rollup-win32-arm64-msvc": "4.24.0", + "@rollup/rollup-win32-ia32-msvc": "4.24.0", + "@rollup/rollup-win32-x64-msvc": "4.24.0", "fsevents": "~2.3.2" } }, @@ -4491,9 +4443,9 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://npm.totvs.io/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -4648,11 +4600,6 @@ "node": ">= 10" } }, - "node_modules/tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" - }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -4740,7 +4687,7 @@ }, "node_modules/to-regex-range": { "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "resolved": "https://npm.totvs.io/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, "dependencies": { @@ -4773,12 +4720,13 @@ "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", - "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", + "dev": true }, "node_modules/typescript": { - "version": "5.4.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", - "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", + "version": "5.6.2", + "resolved": "https://npm.totvs.io/typescript/-/typescript-5.6.2.tgz", + "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -4898,14 +4846,14 @@ } }, "node_modules/vite": { - "version": "5.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz", - "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==", + "version": "5.4.8", + "resolved": "https://npm.totvs.io/vite/-/vite-5.4.8.tgz", + "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", "dev": true, "dependencies": { "esbuild": "^0.21.3", - "postcss": "^8.4.39", - "rollup": "^4.13.0" + "postcss": "^8.4.43", + "rollup": "^4.20.0" }, "bin": { "vite": "bin/vite.js" @@ -4924,6 +4872,7 @@ "less": "*", "lightningcss": "^1.21.0", "sass": "*", + "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" @@ -4941,6 +4890,9 @@ "sass": { "optional": true }, + "sass-embedded": { + "optional": true + }, "stylus": { "optional": true }, @@ -4966,21 +4918,20 @@ } }, "node_modules/webpack": { - "version": "5.91.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", - "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "version": "5.95.0", + "resolved": "https://npm.totvs.io/webpack/-/webpack-5.95.0.tgz", + "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==", "dev": true, "dependencies": { - "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.16.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", diff --git a/package.json b/package.json index 636ef72..5dcfe87 100644 --- a/package.json +++ b/package.json @@ -31,28 +31,27 @@ "---MISC---": "" }, "dependencies": { - "@microsoft/fast-components": "^2.30.6", - "@vscode/codicons": "^0.0.35", - "@vscode/webview-ui-toolkit": "^1.4.0", + "@vscode-elements/elements": "^1.7.0", + "@vscode-elements/react-elements": "^0.4.0", + "@vscode/codicons": "^0.0.36", "react-dom": "^18.3.1", - "react-hook-form": "=7.51.4", "typescript-plugin-css-modules": "^5.1.0" }, "devDependencies": { - "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.0", + "@types/react": "^18.3.11", + "@types/react-dom": "^18.3.1", "@types/vscode": "^1.89.0", "@types/vscode-webview": "^1.57.5", - "@vitejs/plugin-react": "^4.3.1", - "css-loader": "^7.1.1", + "@vitejs/plugin-react": "^4.3.2", + "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", "style-loader": "^4.0.0", "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.5.1", - "typescript": "^5.4.5", + "typescript": "^5.6.2", "typescript-plugin-css-modules": "^5.1.0", - "vite": "^5.3.5", - "webpack": "^5.91.0", + "vite": "^5.4.8", + "webpack": "^5.95.0", "webpack-cli": "^5.1.4", "webpack-stream": "^7.0.0" } diff --git a/src/components/dataGrid.7z b/src/components/dataGrid.7z new file mode 100644 index 0000000000000000000000000000000000000000..210a738c76630bae0caa34f8572c24eeea2d5667 GIT binary patch literal 10250 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 literal 0 HcmV?d00001 diff --git a/src/components/dataGrid/dataGrid.tsx b/src/components/dataGrid/dataGrid.tsx index 561587d..81deeba 100644 --- a/src/components/dataGrid/dataGrid.tsx +++ b/src/components/dataGrid/dataGrid.tsx @@ -16,20 +16,15 @@ limitations under the License. import "./dataGrid.css"; import React from "react"; -import { - VSCodeButton, VSCodeDataGrid, VSCodeDataGridCell, VSCodeDataGridRow, - VSCodeTextField, - VSCodeLink, - VSCodeCheckbox, - VSCodeDivider -} from "@vscode/webview-ui-toolkit/react"; -import { useFormContext } from "react-hook-form"; import { TGroupingInfo, TTdsDataGridAction, TTdsDataGridColumnDef, TTdsDataGridProps } from "./dataGrid.type"; import { tdsVscode } from "../../utilities/vscodeWrapper"; import TdsPaginator from "./paginator"; import { BuildRowFilter, FilterBlock } from "./fieldFilter"; import { DataSourceProvider, useDataSourceContext } from "./dataSourceContext"; import { GroupingPanel } from "./groupingPanel"; +import { VscodeButton, VscodeCheckbox, VscodeDivider, VscodeTable, VscodeTableCell, VscodeTableHeader, VscodeTableRow, VscodeTextfield } from "@vscode-elements/react-elements"; +import { VscodeTableBody } from "@vscode-elements/react-elements"; +import { TdsLink } from './../decorator/link'; /** * Renders the data grid component. @@ -37,6 +32,7 @@ import { GroupingPanel } from "./groupingPanel"; * @param props - The data grid component props. */ type TFieldDataProps = { + dataSource: any[]; fieldDef: TTdsDataGridColumnDef; row: any; fieldName?: string; @@ -51,7 +47,7 @@ type TBuildRowsProps = { } function BuildRows(props: TBuildRowsProps) { - const { dataSource, itemOffset } = useDataSourceContext(); + const { dataSource, itemOffset, modelField } = useDataSourceContext(); const buildRow = (row: any, index: number, itemOffset: number): React.ReactElement[] => { let reactElements: React.ReactElement[] = []; @@ -68,28 +64,31 @@ function BuildRows(props: TBuildRowsProps) { }); reactElements.push( - + { + //gridTemplateColumns = { gridTemplate } + } {props.columnsDef.filter(column => column.visible) .filter(column => (column.rowGroup || 0) == rowNumber) .map((column, indexCol: number) => ( - {fieldData( { + dataSource: dataSource, fieldDef: column, row: row, - fieldName: `${props.id}.${index + itemOffset}.${column.name}` + fieldName: `${modelField || "dataSource"}.${index + itemOffset}.${column.name}` }) } - + ))} - + ); rowNumber = rowNumber + 1; @@ -101,19 +100,19 @@ function BuildRows(props: TBuildRowsProps) { if (props.rowSeparator) { reactElements.push( - + {props.columnsDef.filter(column => column.visible) .filter(column => (column.rowGroup || 0) == 0) .map((_column, indexCol: number) => ( - - - + + ))} - + ); } @@ -122,11 +121,17 @@ function BuildRows(props: TBuildRowsProps) { return dataSource .slice(itemOffset, itemOffset + 10) - .map((row: any, index: number) => buildRow(row, index, props.itemOffset)) + .map((row: any, index: number) => { + if (row.index_) { + return buildRow(row, row.index_, props.itemOffset) + } else { + return buildRow(row, index, props.itemOffset) + } + }); } function fieldData(props: TFieldDataProps) { //, forceRefresh: number = -1 - const methods = useFormContext(); + //const methods = useFormContext(); const column = props.fieldDef; const row = props.row; let alignClass: string | undefined = column.align ? `tds-text-${column.align}` : undefined; @@ -139,43 +144,43 @@ function fieldData(props: TFieldDataProps) { //, forceRefresh: number = -1 if ((column.type == "date") || (column.type == "time") || (column.type == "datetime")) { const text: string = tdsVscode.l10n.format(row[column.name], (column.displayType || column.type) as "date" | "time" | "datetime"); alignClass = alignClass || "tds-text-right"; + //readOnly={column.readOnly == undefined ? true : column.readOnly} return ( - + > ) } //Campo BOOLEAN if (column.type == "boolean") { alignClass = alignClass || "tds-text-center"; - + // onChange = {(e) => { + // e.preventDefault(); + // e.stopPropagation(); + // const target = e.target as HTMLInputElement; + // const parts = props.fieldName.split("."); + // //props.dataSource[parseInt(parts[1])] = target.checked ? true : false; + // //methods.setValue(props.fieldName, target.checked ? true : false); + // if (column.onChange) { + // column.onChange(e, props.fieldName, row); + // } + // } + // } + + //readOnly={column.readOnly == undefined ? true : column.readOnly} return ( - { - e.preventDefault(); - e.stopPropagation(); - const target = e.target as HTMLInputElement; - - methods.setValue(props.fieldName, target.checked ? true : false); - if (column.onChange) { - column.onChange(e, props.fieldName, row); - } - return target.checked; - } - } - > + checked={row.mark || false} + name={props.fieldName} + > ) - } const text: string = (column.lookup && column.lookup[row[column.name]]) @@ -186,15 +191,16 @@ function fieldData(props: TFieldDataProps) { //, forceRefresh: number = -1 alignClass = alignClass || "tds-text-right"; } + // value={(text || "").startsWith("Invalid") ? row[column.name] || "" : text} + // readOnly={column.readOnly == undefined ? true : column.readOnly} return ( - ").startsWith("Invalid") ? row[column.name] || "" : text} - > + name={props.fieldName} + > ) } @@ -265,7 +271,7 @@ function prepareDataSource(columnsDef: TTdsDataGridColumnDef[], dataSource: any[ return rows; } - let rows: any[] = [...dataSource]; + let rows: any[] = dataSource.map((row: any, index: number) => { return { ...row, index_: index } }); if (allFieldsFilter) { try { @@ -320,36 +326,7 @@ function prepareDataSource(columnsDef: TTdsDataGridColumnDef[], dataSource: any[ * @returns A React element representing the data grid. */ export function TdsDataGrid(props: TTdsDataGridProps): React.ReactElement { - if (props.options.topActions == undefined) { - props.options.topActions = []; - } - if (props.options.bottomActions == undefined) { - props.options.bottomActions = []; - } - if (props.options.grouping == undefined) { - props.options.grouping = true; - } - if (props.options.filter == undefined) { - props.options.filter = true; - } - if (props.options.sortable == undefined) { - props.options.sortable = true; - } - if (props.options.pageSize == undefined) { - props.options.pageSize = 50; - } - if (props.options.pageSizeOptions == undefined) { - props.options.pageSizeOptions = [50, 100, 250, 500, 1000]; - } - - props.columnsDef.forEach((columnDef: TTdsDataGridColumnDef) => { - columnDef.sortable = columnDef.sortable == undefined ? true : columnDef.sortable; - columnDef.sortDirection = columnDef.sortDirection == undefined ? "" : columnDef.sortDirection; - columnDef.visible = columnDef.visible == undefined ? true : columnDef.visible; - columnDef.grouping = columnDef.grouping == undefined ? false : columnDef.grouping; - }); - - return ( + return ( ) @@ -369,7 +346,7 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { groupingInfo, setGroupingInfo, groupingFilter, setGroupingFilter } = useDataSourceContext(); - const methods = useFormContext(); + //const methods = useFormContext(); const handlePageClick = (newPage: number) => { const newOffset = (newPage * (props.options.pageSize)) % dataSource.length; @@ -416,6 +393,34 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { setGroupingInfo(undefined); } } + if (props.options.topActions == undefined) { + props.options.topActions = []; + } + if (props.options.bottomActions == undefined) { + props.options.bottomActions = []; + } + if (props.options.grouping == undefined) { + props.options.grouping = true; + } + if (props.options.filter == undefined) { + props.options.filter = true; + } + if (props.options.sortable == undefined) { + props.options.sortable = true; + } + if (props.options.pageSize == undefined) { + props.options.pageSize = 50; + } + if (props.options.pageSizeOptions == undefined) { + props.options.pageSizeOptions = [50, 100, 250, 500, 1000]; + } + + props.columnsDef.forEach((columnDef: TTdsDataGridColumnDef) => { + columnDef.sortable = columnDef.sortable == undefined ? true : columnDef.sortable; + columnDef.sortDirection = columnDef.sortDirection == undefined ? "" : columnDef.sortDirection; + columnDef.visible = columnDef.visible == undefined ? true : columnDef.visible; + columnDef.grouping = columnDef.grouping == undefined ? false : columnDef.grouping; + }); const buildRowHeader = (columnDefs: TTdsDataGridColumnDef[]): React.ReactElement[] => { let reactElements: React.ReactElement[] = []; @@ -431,9 +436,9 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { gridTemplate += ` ${column.width || "1fr"} `; }); + //gridTemplateColumns={gridTemplate} reactElements.push( - column.visible) .filter((column) => (column.rowGroup || 0) == rowNumber) .map((column, _index: number) => ( - {column.label || column.name} {props.options.sortable && column.sortable && - { handleSortClick(column); }} @@ -459,23 +463,22 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { {column.sortDirection == "asc" && } {column.sortDirection == "desc" && } {column.sortDirection == "" && } - + } {((props.options.grouping && column.grouping) || false) && - { handleGroupingClick(column); }} > - + } - + )) } - + ); rowNumber = rowNumber + 1; @@ -488,19 +491,20 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { return reactElements; } - props.columnsDef.forEach((columnDef: TTdsDataGridColumnDef) => { - if (!sortedColumn && (columnDef.sortDirection != "")) { - setSortedColumn(columnDef); - setSortedDirection(columnDef.sortDirection); - } - }); - - if (props.options.pageSize !== pageSize) { - setPageSize(props.options.pageSize); - } - React.useEffect(() => { console.log(">>>> useEffect") + + props.columnsDef.forEach((columnDef: TTdsDataGridColumnDef) => { + if (!sortedColumn && (columnDef.sortDirection != "")) { + setSortedColumn(columnDef); + setSortedDirection(columnDef.sortDirection); + } + }); + + if (props.options.pageSize !== pageSize) { + setPageSize(props.options.pageSize); + } + const data = prepareDataSource(props.columnsDef, props.dataSource, filter, filterByField, groupingInfo, groupingFilter, sortedColumn); @@ -523,32 +527,35 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement {
- - {buildRowHeader(props.columnsDef)} - - {showFieldsFilter && } - - {((dataSource == undefined) || (dataSource.length == 0)) ? - <>No data to show. - : - } - + + {buildRowHeader(props.columnsDef)} + + + + {showFieldsFilter && } + + {((dataSource == undefined) || (dataSource.length == 0)) ? + <>No data to show. + : + } + +
@@ -602,24 +609,25 @@ function TdsDataGrid2(props: TTdsDataGridProps): React.ReactElement { } if (action.type == "link") { - return ({action.caption} - ) + return ( + {action.caption} + ) } else if (action.type == "checkbox") { - return ( {action.caption} - ) + ) } else { - return ( {action.caption} - ) + ) } })}
diff --git a/src/components/dataGrid/dataGrid.type.tsx b/src/components/dataGrid/dataGrid.type.tsx index 78a6f78..d2532a0 100644 --- a/src/components/dataGrid/dataGrid.type.tsx +++ b/src/components/dataGrid/dataGrid.type.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ButtonAppearance } from "@vscode/webview-ui-toolkit"; +import { ButtonAppearance } from "../vscode-elements"; /** * Defines the configuration for a column in the data grid component. @@ -87,6 +87,7 @@ export type TTdsDataGridProps = { id: string; columnsDef: TTdsDataGridColumnDef[] dataSource: any[] //Record[] + modelField: string; options: { bottomActions?: TTdsDataGridAction[]; topActions?: TTdsDataGridAction[]; diff --git a/src/components/dataGrid/dataSourceContext.tsx b/src/components/dataGrid/dataSourceContext.tsx index a4d1f3e..2f1bb75 100644 --- a/src/components/dataGrid/dataSourceContext.tsx +++ b/src/components/dataGrid/dataSourceContext.tsx @@ -2,6 +2,8 @@ import * as React from "react"; import { TGroupingInfo, TTdsDataGridColumnDef } from "./dataGrid.type"; interface DataSourceContextInterface { + modelField: string; + setModelField: (fieldName: string) => void; dataSource: any[]; setDataSource: (dataSource: any[]) => void; setFilter: (filter: string) => void; @@ -39,11 +41,11 @@ export function useDataSourceContext() { }; interface DataSourceProviderProps { + modelField: string; children: React.ReactElement; } export function DataSourceProvider(props: DataSourceProviderProps) { - const [dataSource, setDataSource] = React.useState(undefined); const [filter, setFilter] = React.useState(undefined); const [filterByField, setFilterByField] = React.useState>(undefined); const [showFieldsFilter, setShowFieldsFilter] = React.useState(false); @@ -54,6 +56,8 @@ export function DataSourceProvider(props: DataSourceProviderProps) { const [itemOffset, setItemOffset] = React.useState(0); const [groupingInfo, setGroupingInfo] = React.useState(undefined); const [groupingFilter, setGroupingFilter] = React.useState([]); + const [modelField, setModelField] = React.useState(props.modelField); + const [dataSource, setDataSource] = React.useState(undefined); return ( {props.children} diff --git a/src/components/dataGrid/fieldFilter.tsx b/src/components/dataGrid/fieldFilter.tsx new file mode 100644 index 0000000..49933ab --- /dev/null +++ b/src/components/dataGrid/fieldFilter.tsx @@ -0,0 +1,284 @@ +/* +Copyright 2024 TOTVS S.A + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http: //www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import "./dataGrid.css"; +import { TTdsDataGridAction, TTdsDataGridColumnDef } from "./dataGrid.type"; +import React from "react"; +import { tdsVscode } from "../../utilities/vscodeWrapper"; +import { TdsTextField } from "../fields/textField"; +import { useDataSourceContext } from "./dataSourceContext"; +import { VscodeButton, VscodeDivider, VscodeSingleSelect, VscodeTableCell, VscodeTableRow, VscodeTextfield } from "@vscode-elements/react-elements"; +import { TdsLink } from './../decorator/link'; + +/** + * Renders the data grid component. + * + * @param props - The data grid component props. + */ +type TFieldFilterProps = { + fieldDef: TTdsDataGridColumnDef; + values: Record; + dataSource: any; + onFilterChanged(fieldName: string, filter: string): void; +} + +function FieldFilter(props: TFieldFilterProps) { + let currentValue: string = props.values[props.fieldDef.name] || ""; + + if (props.fieldDef.lookup) { + const currentValue: string = "currentValue"; + const options: Record = !props.dataSource + ? {} + : props.dataSource.reduce((acc: Record, item: any) => { + + if (!acc[item[props.fieldDef.name]]) { + acc[item[props.fieldDef.name]] = props.fieldDef.lookup![item[props.fieldDef.name]]; + } + + return acc; + }, []); + + if (Object.keys(options).length > 0) { + return ( + { + e.preventDefault(); + const value: string = e?.target?.value; + return props.onFilterChanged(props.fieldDef.name, value); + }}> + VscodeOption + key={0} + value={""} + selected={currentValue === ""} + {"(All)"} + VscodeOption + {Object.keys(options).map((key: string, index: number) => { + return ( + <>VscodeOption key={index} + value={key} + checked={currentValue === key}{options[key]} + /VscodeOption + ) + })} + + ) + } + } + + return ( + { + e.preventDefault(); + return props.onFilterChanged(props.fieldDef.name, e.target.value); + }} + value={currentValue} + > + + + ) +} + +type TFilterBlockProps = { + actions: TTdsDataGridAction[]; +} + +export function FilterBlock(props: TFilterBlockProps) { + const { setFilter, filter, showFieldsFilter, setShowFieldsFilter } = useDataSourceContext(); + + return ( +
+ { + e.preventDefault(); + + setFilter(e.target.value.trim()); + }} + /> + + { + setShowFieldsFilter(!showFieldsFilter); + //props.onShowFieldsFilter(!showFieldsFilter); //ainda não deu tempo de atualizar useState + }} + > + + + {props.actions && +
+ {props.actions.map((action: TTdsDataGridAction) => { + let propsField: any = {}; + let visible: string = ""; + + if (typeof action.id === "string") { + propsField["id"] = action.id; + } + + propsField["type"] = action.type || "button"; + + if (action.enabled !== undefined) { + if (typeof action.enabled === "function") { + propsField["disabled"] = !(action.enabled as Function)(false, true); + } else { + propsField["disabled"] = !action.enabled; + } + } + + if (action.appearance) { + propsField["appearance"] = action.appearance; + } + + if (action.onClick) { + propsField["onClick"] = action.onClick; + } + + if (action.visible !== undefined) { + let isVisible: boolean = false; + + if (action.visible = typeof action.visible === "function") { + isVisible = (Function)(action.visible)(false, true) + } else { + isVisible = action.visible; + } + + visible = isVisible ? "" : "tds-hidden"; + } + + return (action.type == "link" ? + + {action.caption} + + : + {action.caption} + ) + })} +
+ } +
+ ) +} + +type BuildRowFilterProps = { + id: string; + columnDefs: TTdsDataGridColumnDef[]; + dataSource: any[]; +} + +export function BuildRowFilter(props: BuildRowFilterProps): React.ReactElement[] { + const { + filterByField, + setFilterByField + } = useDataSourceContext(); + let reactElements: React.ReactElement[] = []; + let rowNumber: number = 0; + + while (rowNumber != -1) { + let gridTemplate: string = ""; + + props.columnDefs + .filter(column => column.visible) + .filter((column) => (column.rowGroup || 0) == rowNumber) + .map((column, _index: number) => { + gridTemplate += ` ${column.width || "1fr"} `; + }); + + //gridTemplateColumns={gridTemplate} + reactElements.push( + + {props.columnDefs + .filter(column => column.visible) + .filter(column => (column.rowGroup || 0) == rowNumber) + .map((column, indexCol: number) => ( + + { + let filters: Record = filterByField || {}; + + if (filter.trim() !== "") { + filters[fieldName] = filter; + } else if (filters[fieldName]) { + delete filters[fieldName]; + } + + if (Object.keys(filters).length == 0) { + filters = undefined;; + } + + setFilterByField(filters); + } + } + dataSource={props.dataSource} + /> + + ))} + + ) + + rowNumber = rowNumber + 1; + + if (props.columnDefs.findIndex(column => (column.rowGroup || 0) == rowNumber) == -1) { + rowNumber = -1; + } + } + + let gridTemplate: string = ""; + + props.columnDefs + .filter(column => column.visible) + .filter((column) => (column.rowGroup || 0) == rowNumber) + .map((column, _index: number) => { + gridTemplate += ` ${column.width || "1fr"} `; + }); + + //gridTemplateColumns={gridTemplate} + reactElements.push( + + {props.columnDefs.filter(column => column.visible) + .filter(column => (column.rowGroup || 0) == 0) + .map((_column, indexCol: number) => ( + + + + ))} + + ); + + return reactElements; +} diff --git a/src/components/dataGrid/groupingPanel.tsx b/src/components/dataGrid/groupingPanel.tsx index 9cd43cf..5fbe519 100644 --- a/src/components/dataGrid/groupingPanel.tsx +++ b/src/components/dataGrid/groupingPanel.tsx @@ -1,4 +1,4 @@ -import { VSCodeBadge, VSCodeButton } from "@vscode/webview-ui-toolkit/react"; +import { VscodeBadge, VscodeButton } from "@vscode-elements/react-elements"; import { TTdsDataGridColumnDef } from "./dataGrid.type"; import { useDataSourceContext } from "./dataSourceContext"; @@ -10,6 +10,7 @@ export function GroupingPanel() { const groupingCol: TTdsDataGridColumnDef = groupingInfo.groupingCol; const values = Object.keys(groupingInfo.groupingValues || []).sort((v1: string, v2: string) => v1.localeCompare(v2)); + //appearance={groupingFilter.indexOf(data) > -1 ? "primary" : "secondary"} return (
@@ -18,9 +19,8 @@ export function GroupingPanel() { } {groupingCol.label || groupingCol.name}: {values.map((data: string, index: number) => ( - -1 ? "primary" : "secondary"} onClick={() => { let filter: string[] = groupingFilter; let pos: number = groupingFilter.indexOf(data); @@ -36,18 +36,18 @@ export function GroupingPanel() { > {groupingCol.lookup && groupingCol.lookup[data] ? groupingCol.lookup[data] : data} - groupingValues[data] - + {groupingInfo.groupingValues[data]} + )) } - { setGroupingFilter(undefined); }} > - +
) diff --git a/src/components/dataGrid/paginator.tsx b/src/components/dataGrid/paginator.tsx index 89d85d6..0870d28 100644 --- a/src/components/dataGrid/paginator.tsx +++ b/src/components/dataGrid/paginator.tsx @@ -15,9 +15,8 @@ limitations under the License. */ import React, { useState } from "react"; -import { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import { tdsVscode } from './../../utilities/vscodeWrapper'; - +import { VscodeButton, VscodeSingleSelect, VscodeTextfield } from "@vscode-elements/react-elements"; const FirstPage = () => { return ( @@ -122,7 +121,7 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem {(props.pageSizeOptions.length > 0) && <> {tdsVscode.l10n.t("_Elements/page")} - { @@ -132,19 +131,20 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem }} > {props.pageSizeOptions.map((size: number, index: number) => ( - VscodeOption key={`dropdown_elements_page_${index}`} value={`${size}`} checked={props.pageSize === size} - > + {size} - + VscodeOption + ))} - + } - { @@ -152,9 +152,9 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem }} > - + - { @@ -164,9 +164,9 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem > - + - { @@ -174,13 +174,12 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem }} > - +
{tdsVscode.l10n.formatNumber(currentItem + 1)}-{tdsVscode.l10n.formatNumber(lastItem)} of {tdsVscode.l10n.formatNumber(totalItems)} (Page: - { let page = parseInt(e.target.value); @@ -198,7 +197,7 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem of {tdsVscode.l10n.formatNumber(totalPages)})
- { @@ -206,9 +205,9 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem }} > - + - { @@ -218,15 +217,15 @@ export default function TdsPaginator(props: ITdsPaginatorProps): React.ReactElem > - + - { changePage(totalPages + 1); }} > - + ); } diff --git a/src/components/decorator/link.tsx b/src/components/decorator/link.tsx new file mode 100644 index 0000000..615769c --- /dev/null +++ b/src/components/decorator/link.tsx @@ -0,0 +1,35 @@ +/* +Copyright 2024 TOTVS S.A + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http: //www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +type TTdsLink = { + href: string; + target?: string; + title?: string; + onClick?: (event: React.MouseEventHandler) => void; + children: React.ReactElement | string; +} + +export function TdsLink(props: TTdsLink): React.ReactElement { + return ( props.onClick && props.onClick(e)}> + {props.children} + ) +} diff --git a/src/components/decorator/progress-ring.tsx b/src/components/decorator/progress-ring.tsx index 8b96085..b6277a8 100644 --- a/src/components/decorator/progress-ring.tsx +++ b/src/components/decorator/progress-ring.tsx @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { VscodeProgressRing } from "@vscode-elements/react-elements"; import "./progress-ring.css"; -import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"; import React from "react"; /** @@ -37,11 +37,11 @@ export function TdsProgressRing(props: TTdsProcessRing): React.ReactElement { return props.size == "full" ? (
- + {props.message &&
{props.message}
}
) : ( - + ) } diff --git a/src/components/fields/checkBoxField.tsx b/src/components/fields/checkBoxField.tsx index 6ddf0b6..57c0683 100644 --- a/src/components/fields/checkBoxField.tsx +++ b/src/components/fields/checkBoxField.tsx @@ -1,11 +1,11 @@ -import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, useController, useFormContext } from "react-hook-form"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; import { mdToHtml } from "../mdToHtml"; -import { Checkbox } from "@vscode/webview-ui-toolkit"; +import { VscodeCheckbox, VscodeFormGroup, VscodeFormHelper, VscodeTextfield } from "@vscode-elements/react-elements"; -type TdsCheckBoxFieldProps = TdsFieldProps; +type TdsCheckBoxFieldProps = TdsFieldProps & { + checked: boolean; +}; //TODO: colocar labelOn, labelOff e label @@ -21,33 +21,40 @@ type TdsCheckBoxFieldProps = TdsFieldProps; * @returns */ export function TdsCheckBoxField(props: TdsCheckBoxFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); - - const { - field: { onChange, value }, - } = useController({ - name: props.name, - control, - rules: props.rules, - }); + return ( + + + {mdToHtml(props.label)} + + {props.info && + + {mdToHtml(props.info)} + + } + + ) return (
- { - onChange((e.target as Checkbox).checked); + //onChange((e.target as Checkbox).checked); if (props.onChange) { props.onChange(e); } }}> {mdToHtml(props.label)} - {props.info && } - + {props.info && } +
) } \ No newline at end of file diff --git a/src/components/fields/labelField.tsx b/src/components/fields/labelField.tsx index 054e1b2..360f12d 100644 --- a/src/components/fields/labelField.tsx +++ b/src/components/fields/labelField.tsx @@ -14,14 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ControllerFieldState, useController, useFormContext } from "react-hook-form"; +import { VscodeFormGroup, VscodeLabel } from "@vscode-elements/react-elements"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; import { mdToHtml } from './../mdToHtml'; -export type TdsLabelFieldProps = TdsFieldProps & { - // -} +export type TdsLabelFieldProps = Omit /** * @@ -34,21 +32,29 @@ export type TdsLabelFieldProps = TdsFieldProps & { * * @returns */ -export function TdsLabelField(props: TdsLabelFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); +export function TdsLabelField(props: TdsLabelFieldProps): any /*React.ReactElement*/ { + + return ( + + + {mdToHtml(props.label)} + + + ) return (
- + +
) -} \ No newline at end of file +} + diff --git a/src/components/fields/numericField.tsx b/src/components/fields/numericField.tsx index b3de2b9..f62357f 100644 --- a/src/components/fields/numericField.tsx +++ b/src/components/fields/numericField.tsx @@ -1,7 +1,7 @@ -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, useController, useFormContext } from "react-hook-form"; +import { VscodeFormGroup, VscodeFormHelper, VscodeLabel, VscodeTextfield } from "@vscode-elements/react-elements"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; +import { mdToHtml } from "../mdToHtml"; type TdsNumericFieldProps = TdsFieldProps & { @@ -19,8 +19,31 @@ type TdsNumericFieldProps = TdsFieldProps & { * @returns */ export function TdsNumericField(props: TdsNumericFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); + return ( + + + {mdToHtml(props.label || props.name)} + + + {props.info && + + {mdToHtml(props.info)} + + } + + ) + + // const { register, control, getValues, getFieldState } = useFormContext(); + // const fieldState: ControllerFieldState = getFieldState(props.name); const rules = { ...props.rules, @@ -35,20 +58,21 @@ export function TdsNumericField(props: TdsNumericFieldProps): React.ReactElement
- - + - - + +
) } \ No newline at end of file diff --git a/src/components/fields/selectionField.tsx b/src/components/fields/selectionField.tsx index 97f0d92..eb3efcd 100644 --- a/src/components/fields/selectionField.tsx +++ b/src/components/fields/selectionField.tsx @@ -1,7 +1,7 @@ -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, useController, useFormContext } from "react-hook-form"; import { TdsFieldProps } from "../form/form"; +import { mdToHtml } from "../mdToHtml"; import PopupMessage from "../popup-message/popup-message"; +import { VscodeFormGroup, VscodeFormHelper, VscodeLabel, VscodeOption, VscodeSingleSelect } from "@vscode-elements/react-elements"; type TdsSelectionFieldProps = TdsFieldProps & { options?: { @@ -22,10 +22,10 @@ type TdsSelectionFieldProps = TdsFieldProps & { * @returns */ export function TdsSelectionField(props: TdsSelectionFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); + // const { register, control, getValues, getFieldState } = useFormContext(); + // const fieldState: ControllerFieldState = getFieldState(props.name); const options = props.options || []; - const currentValue: string = getValues(props.name) as string; + const currentValue: string = "currentValue"; //getValues(props.name) as string; // registerField.onChange = (e) => { // return new Promise(() => { @@ -37,33 +37,63 @@ export function TdsSelectionField(props: TdsSelectionFieldProps): React.ReactEle // }); // } + return ( + + + {mdToHtml(props.label || props.name)} + + + {options.map(({ value, text }, index) => { + return ( + + {text} + + ) + })} + + {props.info && + + {mdToHtml(props.info)} + + } + + ) + + return (
- - + {options.map(({ value, text }, index) => { return ( - + value={value}> {text} - + ) })} - - + +
) } \ No newline at end of file diff --git a/src/components/fields/selectionResourceField.tsx b/src/components/fields/selectionResourceField.tsx index 05f8429..ce1523a 100644 --- a/src/components/fields/selectionResourceField.tsx +++ b/src/components/fields/selectionResourceField.tsx @@ -1,9 +1,9 @@ -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, useFormContext } from "react-hook-form"; import { TSendSelectResourceOptions, sendSelectResource } from "../../utilities/common-command-webview"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; import { tdsVscode } from "../../utilities/vscodeWrapper"; +import { VscodeButton, VscodeFormGroup, VscodeFormHelper, VscodeIcon, VscodeLabel, VscodeTextfield } from "@vscode-elements/react-elements"; +import { mdToHtml } from "../mdToHtml"; type TdsSelectionResourceFieldProps = Omit & TSendSelectResourceOptions; type TdsSelectionFolderFieldProps = Omit; @@ -34,8 +34,6 @@ type TdsSelectionFileFieldProps = Omit + + {mdToHtml(props.openLabel)} + + + + + {props.info && + + {mdToHtml(props.info)} + + } + + ) + return (
- { - sendSelectResource(props.name, getValues(), options); + //sendSelectResource(props.name, getValues(), options); }} - {...register(props.name, props.rules)} - disabled={props.readOnly} + disabled={(props.rules && props.rules.readOnly)} > {props.openLabel} - - + +
) } @@ -105,7 +130,7 @@ export function TdsSelectionFolderField(props: Partial) } @@ -148,6 +173,6 @@ export function TdsSelectionFileField(props: Partial canSelectMany={props.canSelectMany || false} currentFolder={props.currentFolder || ""} filters={filters || {}} - readOnly={props.readOnly || false} + //readOnly={props.readOnly || false} />) } \ No newline at end of file diff --git a/src/components/fields/simpleCheckBoxField.tsx b/src/components/fields/simpleCheckBoxField.tsx index c5fdbeb..9a91957 100644 --- a/src/components/fields/simpleCheckBoxField.tsx +++ b/src/components/fields/simpleCheckBoxField.tsx @@ -15,5 +15,5 @@ type TdsSimpleCheckBoxFieldProps = TdsFieldProps; * @returns */ export function TdsSimpleCheckBoxField(props: TdsSimpleCheckBoxFieldProps): React.ReactElement { - return + return } diff --git a/src/components/fields/simpleTextField.tsx b/src/components/fields/simpleTextField.tsx index 078e86f..56f017d 100644 --- a/src/components/fields/simpleTextField.tsx +++ b/src/components/fields/simpleTextField.tsx @@ -1,9 +1,12 @@ -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, useController, useFormContext } from "react-hook-form"; +import { VscodeFormGroup, VscodeFormHelper, VscodeLabel, VscodeTextfield } from "@vscode-elements/react-elements"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; +import { mdToHtml } from "../mdToHtml"; -type TdsSimpleTextFieldProps = Omit; +type TdsSimpleTextFieldProps = Omit & +{ + placeholder?: string; +}; /** * @@ -17,20 +20,33 @@ type TdsSimpleTextFieldProps = Omit; * @returns */ export function TdsSimpleTextField(props: TdsSimpleTextFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); + return ( + + + {props.info && + + {mdToHtml(props.info)} + + } + + ) return (
- - - + +
) } \ No newline at end of file diff --git a/src/components/fields/textField.tsx b/src/components/fields/textField.tsx index f5a30b5..3a51a9f 100644 --- a/src/components/fields/textField.tsx +++ b/src/components/fields/textField.tsx @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { VSCodeTextArea, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; -import { ControllerFieldState, UseFormReturn, useController, useFormContext } from "react-hook-form"; import { TdsFieldProps } from "../form/form"; import PopupMessage from "../popup-message/popup-message"; import { mdToHtml } from "../mdToHtml"; +import { VscodeFormGroup, VscodeTextarea, VscodeTextfield } from "@vscode-elements/react-elements"; +import { VscodeLabel, VscodeFormHelper } from "@vscode-elements/react-elements"; type TdsTextFieldProps = TdsFieldProps & { textArea?: boolean @@ -41,13 +41,30 @@ type TdsTextFieldProps = TdsFieldProps & { * * @returns */ -export function TdsTextField(props: TdsTextFieldProps): React.ReactElement { - const { register, control, getValues, getFieldState } = useFormContext(); - const fieldState: ControllerFieldState = getFieldState(props.name); - - const textValue: string = props.value !== undefined ? props.value : - props.format ? props.format(getValues(props.name) as string) : getValues(props.name) +export function TdsTextField(props: TdsTextFieldProps): any { + const textValue: string = props.value !== undefined ? props.value : "currentValue" + return ( + + + {mdToHtml(props.label || props.name)} + + + {props.info && + + {mdToHtml(props.info)} + + } + + ) return (
} {props.textArea ?? false ? ( - - - + + ) : ( - - - + <> + + + + )}
) diff --git a/src/components/form/form.css b/src/components/form/form.css index 9030c6a..ed5deff 100644 --- a/src/components/form/form.css +++ b/src/components/form/form.css @@ -18,7 +18,7 @@ limitations under the License. display: flex; flex-direction: column; width: 100%; - height: 100%; + /* height: 100%; */ overflow: hidden; } @@ -172,7 +172,7 @@ vscode-text-field.tds-text-center::part(control) { .tds-scroll { overflow: scroll; - height: 400px; + /* height: 400px; */ } span.tds-required::after { diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 5ce6171..e3f35df 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -16,13 +16,14 @@ limitations under the License. import "./form.css"; import React from "react"; -import { ButtonAppearance } from "@vscode/webview-ui-toolkit"; -import { DefaultValues, FieldValues, FormProvider, RegisterOptions, UseFormReturn, UseFormSetError, UseFormSetValue, useForm } from "react-hook-form"; -import { VSCodeButton, VSCodeCheckbox, VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react"; +import { ButtonAppearance } from "../vscode-elements"; import { sendClose } from "../../utilities/common-command-webview"; import { tdsVscode } from "../../utilities/vscodeWrapper"; import { TdsProgressRing } from "../decorator/progress-ring"; import { mdToHtml } from "../mdToHtml"; +import { TdsAbstractModel } from "../../model/modelData"; +import { VscodeButton, VscodeCheckbox, VscodeDivider } from "@vscode-elements/react-elements"; +import { TdsLink } from './../decorator/link'; /** * Enum representing the default actions available in a form. @@ -119,10 +120,9 @@ export function getCloseActionForm(): IFormAction { * @property {boolean} [isProcessRing] - An optional flag to show a processing indicator when necessary. * @property {string} [description] - An optional description for the form. You can use Markdown format. */ -type TDSFormProps = { +type TDSFormProps = { id?: string; - methods: UseFormReturn; - onSubmit: (data: any) => void; + onSubmit: (data: M) => void; onManualReset?: () => void; actions?: IFormAction[]; children: any @@ -147,6 +147,13 @@ export interface IFormAction { href?: string; } +export type TdsFieldRules = { + readOnly?: boolean + required?: boolean; + min?: { value: number, message: string }; + max?: { value: number, message: string }; + pattern?: RegExp; +} /** * Interface for form field components. * Defines the props shape for form fields. @@ -155,12 +162,11 @@ export type TdsFieldProps = { name: string; label: string; info?: string; - readOnly?: boolean className?: string; - rules?: RegisterOptions; + rules?: TdsFieldRules; //https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/react/README.md#use-oninput-instead-of-onchange-to-handle-keystrokes - onInput?: any; - onChange?: any; + onInput?: React.FormEventHandler; //VscodeTextfield + onChange?: React.FormEventHandler; //VscodeTextfield } /** @@ -171,8 +177,8 @@ export type TdsFieldProps = { * Passing ``setValue`` is necessary, as this function * is executed outside the form context. */ -export function setDataModel - (setValue: UseFormSetValue, dataModel: Partial) { +export function setDataModel + (setValue: any, dataModel: Partial) { if (dataModel) { Object.keys(dataModel).forEach((fieldName: string) => { if (dataModel[fieldName] !== undefined) { @@ -202,7 +208,7 @@ type TFieldErrors = Partial>; * is executed outside the form context. * */ -export function setErrorModel(setError: UseFormSetError, errorModel: TFieldErrors) { +export function setErrorModel(setError: any, errorModel: TFieldErrors) { if (errorModel) { Object.keys(errorModel).forEach((fieldName: string) => { if (errorModel[fieldName] !== undefined) { @@ -234,23 +240,24 @@ let isProcessRing: boolean = false; * Renders form content, messages, and action buttons. * Handles submit and reset events. */ -export function TdsForm(props: TDSFormProps): React.ReactElement { - const methods = props.methods; - const isSubmitting: boolean = methods.formState.isSubmitting; - const isDirty: boolean = methods.formState.isDirty; - const isValid: boolean = /*methods.formState.isValid &&*/ // vem false, mesmo sem erros - (methods.formState.errors === undefined || Object.keys(methods.formState.errors).length === 0); +export function TdsForm(props: TDSFormProps): React.ReactElement { + //const methods = props.methods; + //const isSubmitting: boolean = methods ? methods.formState.isSubmitting : false; + const isDirty: boolean = false; //methods ? methods.formState.isDirty : false; + const isValid: boolean = true; //methods ? + // (methods.formState.errors === undefined || Object.keys(methods.formState.errors).length === 0) + // : true; let actions: IFormAction[] = props.actions ? props.actions : getDefaultActionsForm(); if (actions.length == 1) { actions[0].appearance = "primary" } - if (isSubmitting && (actions.length > 0)) { - isProcessRing = props.isProcessRing !== undefined ? props.isProcessRing : true; - } else if (!isValid) { - isProcessRing = props.isProcessRing !== undefined ? props.isProcessRing : false; - } + // if (isSubmitting && (actions.length > 0)) { + // isProcessRing = props.isProcessRing !== undefined ? props.isProcessRing : true; + // } else if (!isValid) { + // isProcessRing = props.isProcessRing !== undefined ? props.isProcessRing : false; + // } actions.forEach((action: IFormAction) => { action.isProcessRing = (action.isProcessRing !== undefined ? action.isProcessRing && isProcessRing : undefined) @@ -260,99 +267,110 @@ export function TdsForm(props: TDSFormProps): React.Re const children = React.Children.toArray(props.children); return ( - -
{ - e.preventDefault(); - - methods.reset(methods.formState.defaultValues as DefaultValues); - if (props.onManualReset) { - props.onManualReset(); - } - }} - autoComplete="off" - > - {props.description &&

{mdToHtml(props.description)}

} -
- {...children} -
- - - -
-
- {!isValid && {tdsVscode.l10n.t("_There is invalid information. See the error by hovering the mouse over the field marking.")}} - {isProcessRing && isSubmitting && <>{tdsVscode.l10n.t("_Wait please. Processing...")}} -
-
- {actions.map((action: IFormAction) => { - let propsField: any = {}; - let visible: string = ""; - - if (typeof action.id === "string") { - propsField["id"] = action.id; - } - - propsField["type"] = action.type || "button"; - - if (isProcessRing) { - propsField["disabled"] = true; - } else if (action.enabled !== undefined) { - if (typeof action.enabled === "function") { - propsField["disabled"] = !(action.enabled as Function)(isDirty, isValid); - } else { - propsField["disabled"] = !action.enabled; - } + { + e.preventDefault(); + console.log(e); + const form = document.querySelector(`#${id}`) as HTMLFormElement; + const fd = new FormData(form); + let out: TdsAbstractModel = {}; + + for (let [name, value] of fd) { + out[name] = value; + } + + props.onSubmit(out as M); + }} + onReset={(e) => { + // if (methods) { + // e.preventDefault(); + // methods.reset(methods.formState.defaultValues as DefaultValues); + // if (props.onManualReset) { + // props.onManualReset(); + // } + // } + }} + autoComplete="off" + > + {props.description &&

{mdToHtml(props.description)}

} +
+ {...children} +
+ + + +
+
+ !isValid && {tdsVscode.l10n.t("_There is invalid information. See the error by hovering the mouse over the field marking.")} + isProcessRing && isSubmitting && <>{tdsVscode.l10n.t("_Wait please. Processing...")} +
+
+ {actions.map((action: IFormAction) => { + let propsField: any = {}; + let visible: string = ""; + + if (typeof action.id === "string") { + propsField["id"] = action.id; + } + + propsField["type"] = action.type || "button"; + + if (isProcessRing) { + propsField["disabled"] = true; + } else if (action.enabled !== undefined) { + if (typeof action.enabled === "function") { + propsField["disabled"] = !(action.enabled as Function)(isDirty, isValid); } else { - propsField["disabled"] = false; - } - - if (action.onClick) { - propsField["onClick"] = action.onClick; + propsField["disabled"] = !action.enabled; } + } else { + propsField["disabled"] = false; + } - if (action.visible !== undefined) { - let isVisible: boolean = false; + if (action.onClick) { + propsField["onClick"] = action.onClick; + } - if (action.visible = typeof action.visible === "function") { - isVisible = (Function)(action.visible)(isDirty, isValid) - } else { - isVisible = action.visible; - } + if (action.visible !== undefined) { + let isVisible: boolean = false; - visible = isVisible ? "" : "tds-hidden"; - } - - if (action.type == "link") { - return ({action.caption} - ) - } else if (action.type == "checkbox") { - return ( - {action.caption} - ) + if (action.visible = typeof action.visible === "function") { + isVisible = (Function)(action.visible)(isDirty, isValid) } else { - return ( - {action.caption} - ) + isVisible = action.visible; } - })} -
-
- - + + visible = isVisible ? "" : "tds-hidden"; + } + + if (action.type == "link") { + ({action.caption} + ) + } else if (action.type == "checkbox") { + return ( + {action.caption} + ) + } else { + return ( + {action.caption} + ) + } + })} +
+
+ ); } diff --git a/src/components/mdToHtml.tsx b/src/components/mdToHtml.tsx index 6001a90..0a5b9ff 100644 --- a/src/components/mdToHtml.tsx +++ b/src/components/mdToHtml.tsx @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"; import React from "react"; +import { TdsLink } from "./decorator/link"; const PARAGRAPH_RE = /\n\n/i const PHRASE_RE = /\n/i @@ -79,12 +79,13 @@ export function mdToHtml(text: string): any[] { let matchesLink: any; //RegExpMatchArray | null; if (matchesLink = link.match(LINK_COMMAND_RE)) { children.push( - { (document.getElementsByName("newMessage")[0] as any).control.value = caption; } - }> {matchesLink[1]} - + }>{matchesLink[1]} + ); } else { children.push( {part} ); diff --git a/src/components/page/content.css b/src/components/page/content.css index 803d4cc..bcd1c7d 100644 --- a/src/components/page/content.css +++ b/src/components/page/content.css @@ -19,7 +19,5 @@ limitations under the License. flex-grow: 1; flex-shrink: 1; flex-basis: auto; - overflow-x: auto; - overflow-y: hidden; order: 0; } \ No newline at end of file diff --git a/src/components/page/content.tsx b/src/components/page/content.tsx index 15a0403..8834407 100644 --- a/src/components/page/content.tsx +++ b/src/components/page/content.tsx @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { VscodeScrollable } from "@vscode-elements/react-elements"; import "./content.css"; import React from "react"; @@ -29,6 +30,7 @@ export default function TdsContent(props: IContent) { let children = React.Children.toArray(props.children); return ( +
{...children}
diff --git a/src/components/page/footer.tsx b/src/components/page/footer.tsx index aeaa383..d8b8cbe 100644 --- a/src/components/page/footer.tsx +++ b/src/components/page/footer.tsx @@ -14,10 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react"; +import { VscodeDivider } from "@vscode-elements/react-elements"; import "./footer.css"; import React from "react"; -import { VSCodeLink } from '@vscode/webview-ui-toolkit/react'; +import { TdsLink } from "../decorator/link"; export interface IFooter { } @@ -32,12 +32,12 @@ export default function TdsFooter(props: IFooter): React.ReactElement { return (
- +
{/* TOTVS S.A. */}
- TOTVS S.A. + TOTVS S.A.
); diff --git a/src/components/page/page.css b/src/components/page/page.css index 4fb409a..9ea306c 100644 --- a/src/components/page/page.css +++ b/src/components/page/page.css @@ -23,12 +23,11 @@ limitations under the License. .tds-page { display: flex; flex-direction: column; - height: 90vh; - margin: 5vh; + height: -webkit-fill-available; + /* margin: 5vh; */ margin-left: auto; margin-right: auto; margin-bottom: 0px; - overflow: hidden; } .tds-error { @@ -51,4 +50,13 @@ limitations under the License. .codicon[class*='codicon-'] { background-color: transparent; +} + +vscode-scrollable { + width: 100%; + height: -webkit-fill-available; +} + +vscode-scrollable::part(div.scrollable-container) { + scrollbar-width: thin } \ No newline at end of file diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx index 9348a69..c9b00e7 100644 --- a/src/components/page/page.tsx +++ b/src/components/page/page.tsx @@ -20,6 +20,7 @@ import TdsHeader from "./header"; import TdsFooter from "./footer"; import TdsContent from "./content"; import { ErrorBoundary } from "../error-boundary"; +import { VscodeScrollable } from "@vscode-elements/react-elements"; export interface IPageView { title?: string; @@ -37,15 +38,17 @@ export interface IPageView { */ export function TdsPage(props: IPageView): React.ReactElement { - + return ( Something unexpected occurred. See navigator console log for details.

}>
{props.title && } - - {props.children} - + + + {props.children} + + {props.showFooter && }
diff --git a/src/components/paginator/paginator.tsx b/src/components/paginator/paginator.tsx index ac05b6b..baff2c3 100644 --- a/src/components/paginator/paginator.tsx +++ b/src/components/paginator/paginator.tsx @@ -16,9 +16,9 @@ limitations under the License. import "./paginator.css"; import React, { useState } from "react"; -import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import { tdsVscode } from './../../utilities/vscodeWrapper'; import { TTdsPaginatorProps } from "./paginator.type"; +import { VscodeButton, VscodeTextfield } from "@vscode-elements/react-elements"; const FirstPage = () => { @@ -92,7 +92,7 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { return (
- { @@ -100,9 +100,9 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { }} > - + - { @@ -112,9 +112,9 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { > - + - { @@ -122,11 +122,11 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { }} > - +
{tdsVscode.l10n.formatNumber(props.firstPageItem + 1)}-{tdsVscode.l10n.formatNumber(props.firstPageItem + props.pageSize)} of {tdsVscode.l10n.formatNumber(props.totalItems)} (Page: - { @@ -145,7 +145,7 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { of {tdsVscode.l10n.formatNumber(totalPages)})
- { @@ -153,9 +153,9 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { }} > - + - { @@ -165,15 +165,15 @@ export function TdsPaginator(props: TTdsPaginatorProps): React.ReactElement { > - + - { changePageCallback(totalPages + 1); }} > - +
); } diff --git a/src/components/popup-message/popup-message.tsx b/src/components/popup-message/popup-message.tsx index cea1fd4..d5d97a4 100644 --- a/src/components/popup-message/popup-message.tsx +++ b/src/components/popup-message/popup-message.tsx @@ -19,29 +19,29 @@ limitations under the License. import { tdsVscode } from "../../utilities/vscodeWrapper"; import { TdsFieldProps } from "../form/form"; import "./popup-message.css"; -import { ControllerFieldState } from "react-hook-form"; +//import { ControllerFieldState } from "react-hook-form"; export interface IPopupMessage { field: TdsFieldProps, - fieldState: ControllerFieldState + //fieldState: ControllerFieldState } function buildMessage(props: IPopupMessage): string { const { label, info } = props.field; - const { error } = props.fieldState; + //const { error } = //props.fieldState; let message: string = info || ""; - if (error) { - if (error.type == "required") { - message = error.message || tdsVscode.l10n.t(`_[{0}] is required.`, label); - } else if (error.type == "min") { - message = error.message || tdsVscode.l10n.t(`_[{0}] is not valid range (min value).`, label); - } else if (error.type == "max") { - message = error.message || tdsVscode.l10n.t(`_[{0}] is not valid range (max value).`, label); - } else { - message = error.message || error.message || `${error.type}` - } - } + // if (error) { + // if (error.type == "required") { + // message = error.message || tdsVscode.l10n.t(`_[{0}] is required.`, label); + // } else if (error.type == "min") { + // message = error.message || tdsVscode.l10n.t(`_[{0}] is not valid range (min value).`, label); + // } else if (error.type == "max") { + // message = error.message || tdsVscode.l10n.t(`_[{0}] is not valid range (max value).`, label); + // } else { + // message = error.message || error.message || `${error.type}` + // } + // } return message; } @@ -56,7 +56,7 @@ function buildMessage(props: IPopupMessage): string { export default function PopupMessage(props: IPopupMessage): React.ReactElement { const OFFSET_LEFT: number = 20; const OFFSET_TOP: number = 2; - const type: string = props.fieldState.invalid ? "error" : "info"; + const type: string = /*props.fieldState.invalid ? "error" :*/ "info"; const message: string = buildMessage(props); diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index c266db8..cb5d6b7 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -17,8 +17,8 @@ limitations under the License. import "./table.css"; import React from "react"; import { TTdsTableColumn, TTdsOnClickTableCell, TTdsTableProps } from "./table.type"; -import { VSCodeCheckbox, VSCodeDataGrid, VSCodeDataGridCell, VSCodeDataGridRow, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import { tdsVscode } from "../../utilities/vscodeWrapper"; +import { VscodeCheckbox, VscodeTable, VscodeTableCell, VscodeTableRow, VscodeTextfield } from "@vscode-elements/react-elements"; type TBuildRowsProps = { id: string; //ID tabela @@ -38,14 +38,14 @@ function fieldData(rowKey: string, colIndex: number, headerColumn: TTdsTableColu //Campo BOOLEAN if (column.type == "boolean") { alignClass = alignClass || "tds-text-center"; + //readOnly={true} return ( - + > ) } @@ -61,15 +61,15 @@ function fieldData(rowKey: string, colIndex: number, headerColumn: TTdsTableColu const text: string = tdsVscode.l10n.format(value, (column.displayType || column.type)); + //readOnly={false} return ( - + > ) } @@ -95,7 +95,7 @@ function BuildRow(props: TBuildRowsProps) { dataList.forEach((value: any, index: number) => { reactElements.push( - {fieldData( @@ -104,18 +104,18 @@ function BuildRow(props: TBuildRowsProps) { props.headerColumn[index], value )} - + ); }); return ( - {...reactElements} - + ); } @@ -154,25 +154,25 @@ export function TdsTable(props: TTdsTableProps): React.ReactElement { onKeyUpCapture={(event) => console.log("TdsTable onKeyUpCapture", event)} > {props.dataSource && props.dataSource.length != 0 && - {widthColumns.length > 0 && - {headerColumns.map((header: string, index: number) => - {header} - )} - + )} + } {props.onCustomBody && props.onCustomBody(props.dataSource)} {!props.onCustomBody && props.dataSource.map((row: any, index: number) => @@ -201,7 +201,7 @@ export function TdsTable(props: TTdsTableProps): React.ReactElement { })} /> )} - + } diff --git a/src/components/tree/index.ts b/src/components/tree/index.ts index bac35cb..55012a3 100644 --- a/src/components/tree/index.ts +++ b/src/components/tree/index.ts @@ -14,4 +14,4 @@ See the License for the specific language governing permissions and limitations under the License. */ -export { TdsTreeView, TdsTreeItem } from "./tree"; +export { TdsTreeView } from "./tree"; //TdsTreeItem diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx index da423ba..cfb2038 100644 --- a/src/components/tree/tree.tsx +++ b/src/components/tree/tree.tsx @@ -1,18 +1,14 @@ -import { - provideFASTDesignSystem, - fastTreeItem, - fastTreeView -} from "@microsoft/fast-components"; -import { provideReactWrapper } from '@microsoft/fast-react-wrapper'; import React from 'react'; import "./tree.css"; -const { wrap } = provideReactWrapper( - React, - provideFASTDesignSystem() -); +import { + VscodeTree, +} from "@vscode-elements/react-elements"; + +export { + VscodeTree as TdsTreeView, + +} -export const TdsTreeView = wrap(fastTreeView()); -export const TdsTreeItem = wrap(fastTreeItem()); diff --git a/src/components/vscode-elements.ts b/src/components/vscode-elements.ts new file mode 100644 index 0000000..ff0b40a --- /dev/null +++ b/src/components/vscode-elements.ts @@ -0,0 +1,40 @@ + +// import { VscodeLabel, VscodeOption } from "@vscode-elements/elements"; +// import { +// VscodeSingleSelect, +// VscodeBadge, +// VscodeButton, +// VscodeCheckbox, +// VscodeDivider, +// VscodeProgressRing, +// VscodeTable, +// VscodeTableCell, +// VscodeTableRow, +// VscodeTextfield, +// VscodeTextarea +// } from "@vscode-elements/react-elements"; + +export type ButtonAppearance = string; + +// declare const VscodeLabel: import("@lit/react").ReactWebComponent; +// declare const VscodeOption: import("@lit/react").ReactWebComponent; + +// export { +// //VscodeLabel as VscodeLabel, +// VscodeLabel, +// //VscodeOption as VscodeOption, +// VscodeOption, +// VscodeBadge as VSCodeBadge, +// VscodeButton as VscodeButton, +// VscodeTable as VscodeTable, +// VscodeTableCell as VscodeTableCell, +// VscodeTableRow as VscodeTableRow, +// VscodeTextfield as VscodeTextfield, +// VscodeButton as VSCodeLink, //VscodeLink as VSCodeLink, +// VscodeCheckbox as VscodeCheckbox, +// VscodeDivider as VscodeDivider, +// VscodeProgressRing as VSCodeProgressRing, +// VscodeSingleSelect as VscodeSingleSelect, +// VscodeTextarea as VscodeTextarea +// } + diff --git a/src/demo/demo.css b/src/demo/demo.css index 3358678..3d2f794 100644 --- a/src/demo/demo.css +++ b/src/demo/demo.css @@ -10,17 +10,15 @@ body * { } #main .tds-page { - width: 95%; - height: 80vh; + /* height: 90vh; */ } .demo-left-side { background-color: slategrey; - flex-shrink: 1; + flex-shrink: 0; align-items: flex-start; order: 0; - height: 90vh; - max-height: 90vh; + height: 650px; flex-direction: row; width: max-content; padding: 10px; @@ -31,13 +29,13 @@ body * { } .demo-right-side { - background-color: rgb(14, 2, 2); + background-color: rgb(188, 171, 171); flex-grow: 1; - flex-shrink: 1; + flex-shrink: 0; order: 0; - height: 90vh; - max-height: 90vh; + height: 650px; color: var(--foreground); + width: 100vh; } .demo-right-side #warning { diff --git a/src/demo/demo.tsx b/src/demo/demo.tsx index ed7fe1e..11b03cd 100644 --- a/src/demo/demo.tsx +++ b/src/demo/demo.tsx @@ -17,12 +17,12 @@ limitations under the License. import "./demo.css" import React from "react"; import { TdsPage } from "../components/page/page"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; import { DemoPage } from "./demoPage"; import DemoForm from "./demoForm"; import DemoDataGrid from "./demoDatagrid"; import DemoTable from "./demoTable"; -import DemoTableCustomBody from "./demoTableCustomBody"; +import DemoDualSelection from "./demoDualSelection"; +import { VscodeButton } from "@vscode-elements/react-elements"; enum DemoEnum { None, @@ -32,7 +32,7 @@ enum DemoEnum { DataGrid, DataGridMultiRow, DataGridLocale, - DataGridSelectRow, + DualSelection, Table, TableHighlightRows, TableHighlightGroup, @@ -43,19 +43,19 @@ export function Demo() { return ( - +
- setDemo(DemoEnum.Page)}>TdsPage - setDemo(DemoEnum.Form)}>TdsForm - setDemo(DemoEnum.FormCustomActions)}>TdsForm (custom actions) - setDemo(DemoEnum.DataGrid)}>TdsDataGrid - setDemo(DemoEnum.DataGridMultiRow)}>TdsDataGrid (MultiRow) - setDemo(DemoEnum.DataGridLocale)}>TdsDataGrid (pt-BR) - setDemo(DemoEnum.DataGridSelectRow)}>TdsDataGrid (select row) - setDemo(DemoEnum.Table)}>TdsTable - setDemo(DemoEnum.TableHighlightRows)}>TdsTable (highlight rows) - setDemo(DemoEnum.TableHighlightGroup)}>TdsTable (highlight groups) - setDemo(DemoEnum.TableZebra)}>TdsTable (zebra) + setDemo(DemoEnum.Page)}>TdsPage + setDemo(DemoEnum.Form)}>TdsForm + setDemo(DemoEnum.FormCustomActions)}>TdsForm (custom actions) + setDemo(DemoEnum.DataGrid)}>TdsDataGrid + setDemo(DemoEnum.DataGridMultiRow)}>TdsDataGrid (MultiRow) + setDemo(DemoEnum.DataGridLocale)}>TdsDataGrid (pt-BR) + setDemo(DemoEnum.Table)}>TdsTable + setDemo(DemoEnum.TableHighlightRows)}>TdsTable (highlight rows) + setDemo(DemoEnum.TableHighlightGroup)}>TdsTable (highlight groups) + setDemo(DemoEnum.TableZebra)}>TdsTable (zebra) + setDemo(DemoEnum.DualSelection)}>Dual Selection List
{demo == 0 && <> @@ -71,7 +71,7 @@ export function Demo() { {demo == DemoEnum.DataGrid && } {demo == DemoEnum.DataGridMultiRow && } {demo == DemoEnum.DataGridLocale && } - {demo == DemoEnum.DataGridSelectRow && } + {demo == DemoEnum.DualSelection && } {demo == DemoEnum.Table && } {demo == DemoEnum.TableHighlightRows && } {demo == DemoEnum.TableHighlightGroup && ({ - defaultValues: { - dataSource: countries.map((country) => { - return { - ...country, - independenceDate: new Date(`${country.independenceDate}T00:00:00`), - mark: true - } - }) - }, - mode: "all" - }) - if (props.locale) { tdsVscode.l10n.translations = { formatLocale: props.locale }; } - const onSubmit: SubmitHandler = (data) => { + const onSubmit = (data: TDemoModel) => { sendSaveAndClose(data); } @@ -87,8 +73,8 @@ function dataGrid(props: TDemoDataGridProps) { const model: TDemoModel = command.data.model; const errors: any = command.data.errors; - setDataModel(methods.setValue, model); - setErrorModel(methods.setError, errors); + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); break; default: @@ -153,20 +139,28 @@ function dataGrid(props: TDemoDataGridProps) { ]; } - const model: TDemoModel = methods.getValues(); + const model: TDemoModel = { + dataSource: countries.map((country) => { + return { + ...country, + independenceDate: new Date(`${country.independenceDate}T00:00:00`), + mark: true + } + }) + } //const indexFirstPathFree: number = model.includePaths.findIndex((row: TIncludePath) => row.path == ""); // actions={formActions} return ( - methods={methods} actions={[]} onSubmit={onSubmit}> ({ - defaultValues: { - dataSource: countries.map((country) => { - return { - ...country, - independenceDate: new Date(`${country.independenceDate}T00:00:00`), - mark: true - } - }) - }, - mode: "all" - }) - - const onSubmit: SubmitHandler = (data) => { + // const methods = useForm({ + // defaultValues: { + // dataSource: countries.map((country) => { + // return { + // ...country, + // independenceDate: new Date(`${country.independenceDate}T00:00:00`), + // mark: true + // } + // }) + // }, + // mode: "all" + // }) + + const onSubmit = (data: TDemoModel) => { sendSaveAndClose(data); } @@ -206,8 +200,8 @@ function dataGridSelectRow(props: TDemoDataGridProps) { const model: TDemoModel = command.data.model; const errors: any = command.data.errors; - setDataModel(methods.setValue, model); - setErrorModel(methods.setError, errors); + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); break; default: @@ -280,20 +274,28 @@ function dataGridSelectRow(props: TDemoDataGridProps) { ]; } - const model: TDemoModel = methods.getValues(); + const model: TDemoModel = { + dataSource: countries.map((country) => { + return { + ...country, + independenceDate: new Date(`${country.independenceDate}T00:00:00`), + mark: true + } + }) + } //const indexFirstPathFree: number = model.includePaths.findIndex((row: TIncludePath) => row.path == ""); // actions={formActions} return ( - methods={methods} actions={[]} onSubmit={onSubmit}> + +type TCountry = { + mark: boolean, + name: string; + capital: string; + population: number; + area: number; + continent: string; + independenceDate: Date; +} + +type TDemoModelDualSelectionModel = { + left: TCountry[]; + right: TCountry[]; +} + +export default function DemoDualSelection() { + const loadData = () => { + return countries.map((country) => { + return { + ...country, + independenceDate: new Date(`${country.independenceDate}T00:00:00`), + mark: false + } + }) + }; + // const methods = useForm({ + // defaultValues: { + // left: countries.map((country) => { + // return { + // ...country, + // independenceDate: new Date(`${country.independenceDate}T00:00:00`), + // mark: false + // } + // }), + // right: [] + // }, + // mode: "all" + // }) + // const [leftSide, setLeftSide] = React.useState(loadData()); + // const [rightSide, setRightSide] = React.useState([]); + + // const { fields: fieldsLeft, append: appendLeft, remove: removeLeft } = useFieldArray( + // { + // control: methods.control, + // name: "left" + // }); + + // const { fields: fieldsRight, append: appendRight, remove: removeRight } = useFieldArray( + // { + // control: methods.control, + // name: "right" + // }); + + const onSubmit = (data: TDemoModelDualSelectionModel) => { + sendSaveAndClose(data); + } + + React.useEffect(() => { + const listener = (event: any) => { + const command: ReceiveCommand = event.data as ReceiveCommand; + + switch (command.command) { + case CommonCommandEnum.UpdateModel: + const model: TDemoModelDualSelectionModel = command.data.model as any as TDemoModelDualSelectionModel; + const errors: any = command.data.errors; + + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); + + break; + default: + break; + } + }; + + window.addEventListener('message', listener); + + return () => { + window.removeEventListener('message', listener); + } + }, []); + + function columnsDef(): TTdsDataGridColumnDef[] { + return [ + { + type: "boolean", + name: "mark", + label: " ", + width: "30px", + sortable: false, + readOnly: false, + onChange: (e: any, fieldName: string, row: any[]) => { + const target = e.target as HTMLInputElement; + const parts = fieldName.split("."); + + if (fieldName === "left") { + //fieldsLeft[parseInt(parts[1])].mark = target.checked; + } else { + //fieldsRight[parseInt(parts[1])].mark = target.checked; + } + } + }, + { + type: "string", + name: "name", + label: tdsVscode.l10n.t("_Country"), + width: "8fr", + sortDirection: "asc", + }, + { + type: "string", + name: "capital", + label: tdsVscode.l10n.t("_Capital"), + width: "10fr", + } + ]; + } + + return ( + + + key="x" + actions={[]} + onSubmit={onSubmit}> + +
+ + + +
+ { + const indexes: number[] = []; + // const x = methods.getValues(); + // const objects = fieldsLeft + // .filter((value: TCountry, index: number) => { + // if (value.mark) { + // indexes.push(index); + // } + + // return value.mark; + // }) + + // appendRight(objects); + // removeLeft(indexes); + }} > + + + { + const indexes: number[] = []; + // const objects = fieldsRight + // .filter((value: TCountry, index: number) => { + // if (value.mark) { + // indexes.push(index); + // } + + // return value.mark; + // }) + + // appendLeft(objects); + // removeRight(indexes); + }} > + + +
+ + +
+ + + ); +} diff --git a/src/demo/demoForm.css b/src/demo/demoForm.css index 221d7e0..e69de29 100644 --- a/src/demo/demoForm.css +++ b/src/demo/demoForm.css @@ -1,6 +0,0 @@ -#root .tds-page { - width: 75%; - height: 100%; - max-height: 500px; - margin: auto; -} \ No newline at end of file diff --git a/src/demo/demoForm.tsx b/src/demo/demoForm.tsx index 1cb8b77..9fe9a1e 100644 --- a/src/demo/demoForm.tsx +++ b/src/demo/demoForm.tsx @@ -16,7 +16,6 @@ limitations under the License. import "./demoForm.css"; import React from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; import { sendSaveAndClose, ReceiveMessage, CommonCommandEnum } from "../utilities/common-command-webview"; import { IFormAction, setDataModel, setErrorModel, TdsForm } from "../components/form/form"; import { TdsPage } from "../components/page/page"; @@ -25,7 +24,7 @@ import { tdsVscode } from "../utilities/vscodeWrapper"; import { TdsNumericField } from "../components/fields/numericField"; import { TdsCheckBoxField } from "../components/fields/checkBoxField"; import { TdsSelectionField } from "../components/fields/selectionField"; -import { TdsSelectionFileField } from "../components/fields/selectionResourceField"; +import { TdsSelectionFileField, TdsSelectionFolderField } from "../components/fields/selectionResourceField"; enum ReceiveCommandEnum { } @@ -43,15 +42,8 @@ type TDemoFormProps = { } export default function DemoForm(props: TDemoFormProps) { - const methods = useForm({ - defaultValues: { - name: "", - age: 0 - }, - mode: "all" - }) - - const onSubmit: SubmitHandler = (data) => { + + const onSubmit = (data: TDemoModel) => { sendSaveAndClose(data); } @@ -64,8 +56,8 @@ export default function DemoForm(props: TDemoFormProps) { const model: TDemoModel = command.data.model; const errors: any = command.data.errors; - setDataModel(methods.setValue, model); - setErrorModel(methods.setError, errors); + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); break; default: @@ -82,18 +74,18 @@ export default function DemoForm(props: TDemoFormProps) { const customActions: IFormAction[] = [{ id: 0, - caption: tdsVscode.l10n.t("Link"), + caption: tdsVscode.l10n.t("_Link"), type: "link", href: "command:tds-gaia.clear", }, { id: 1, - caption: tdsVscode.l10n.t("Button"), + caption: tdsVscode.l10n.t("_Button"), type: "button", href: "command:tds-gaia.help", }, , { id: 1, - caption: tdsVscode.l10n.t("Checkbox"), + caption: tdsVscode.l10n.t("_Checkbox"), type: "checkbox", href: "command:tds-gaia.help", }]; @@ -101,34 +93,33 @@ export default function DemoForm(props: TDemoFormProps) { return ( - methods={methods} onSubmit={onSubmit} - description={props.customActions ? tdsVscode.l10n.t("Customized Food Operations") : tdsVscode.l10n.t("Main components of a form")} + description={props.customActions ? tdsVscode.l10n.t("_Customized Food Operations") : tdsVscode.l10n.t("_Main components of a form")} actions={props.customActions ? customActions : undefined} >
@@ -138,13 +129,13 @@ export default function DemoForm(props: TDemoFormProps) {
@@ -153,28 +144,30 @@ export default function DemoForm(props: TDemoFormProps) {
-
+ + +
+ +
-
+ +
+ } diff --git a/src/demo/demoTable.tsx b/src/demo/demoTable.tsx index 84151ba..0f70042 100644 --- a/src/demo/demoTable.tsx +++ b/src/demo/demoTable.tsx @@ -16,7 +16,6 @@ limitations under the License. import "./demoTable.css"; import React from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; import { sendSaveAndClose, ReceiveMessage, CommonCommandEnum } from "../utilities/common-command-webview"; import { setDataModel, setErrorModel, TdsForm } from "../components/form/form"; import { TdsPage } from "../components/page/page"; @@ -46,20 +45,20 @@ type TDemoTableProps = { } export default function DemoTable(props: TDemoTableProps) { - const methods = useForm({ - defaultValues: { - dataSource: countries.map((country: any) => { - return { - country: country.name, - capital: country.capital, - area: Number.parseInt(country.area) - } - }) - }, - mode: "all" - }) - - const onSubmit: SubmitHandler = (data) => { + // const methods = useForm({ + // defaultValues: { + // dataSource: countries.map((country: any) => { + // return { + // country: country.name, + // capital: country.capital, + // area: Number.parseInt(country.area) + // } + // }) + // }, + // mode: "all" + // }) + + const onSubmit = (data: TDemoModel) => { sendSaveAndClose(data); } @@ -72,8 +71,8 @@ export default function DemoTable(props: TDemoTableProps) { const model: TDemoModel = command.data.model; const errors: any = command.data.errors; - setDataModel(methods.setValue, model); - setErrorModel(methods.setError, errors); + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); break; default: @@ -93,29 +92,36 @@ export default function DemoTable(props: TDemoTableProps) { { name: "country", type: "string", - label: tdsVscode.l10n.t("Country"), + label: tdsVscode.l10n.t("_Country"), }, { name: "capital", type: "string", - label: tdsVscode.l10n.t("Capital"), + label: tdsVscode.l10n.t("_Capital"), }, { name: "area", type: "number", - label: tdsVscode.l10n.t("Area"), + label: tdsVscode.l10n.t("_Area"), }, ]; } - const model: TDemoModel = methods.getValues(); + const model: TDemoModel = { + dataSource: countries.map((country: any) => { + return { + country: country.name, + capital: country.capital, + area: Number.parseInt(country.area) + } + }) + } //const indexFirstPathFree: number = model.includePaths.findIndex((row: TIncludePath) => row.path == ""); // actions={formActions} return ( - methods={methods} actions={[]} onSubmit={onSubmit}> diff --git a/src/demo/demoTableCustomBody.tsx b/src/demo/demoTableCustomBody.tsx index 7a5af5b..6bb6a4d 100644 --- a/src/demo/demoTableCustomBody.tsx +++ b/src/demo/demoTableCustomBody.tsx @@ -16,7 +16,7 @@ limitations under the License. import "./demoTableCustomBody.css"; import React from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; +//import { SubmitHandler, useForm } from "react-hook-form"; import { sendSaveAndClose, ReceiveMessage, CommonCommandEnum } from "../utilities/common-command-webview"; import { setDataModel, setErrorModel, TdsForm } from "../components/form/form"; import { TdsPage } from "../components/page/page"; @@ -24,7 +24,7 @@ import { tdsVscode } from "../utilities/vscodeWrapper"; import countries from './countries.json'; // This import style requires "esModuleInterop", see "side notes" import { TdsTable } from "../components/table"; import { TTdsTableColumn } from "../components/table/table.type"; -import { VSCodeDataGridCell, VSCodeDataGridRow } from "@vscode/webview-ui-toolkit/react"; +import { VscodeTableCell, VscodeTableRow } from "@vscode-elements/react-elements"; enum ReceiveCommandEnum { } @@ -41,28 +41,28 @@ type TCountry = { } type TDemoModel = { - datasource: TCountry[]; + dataSource: TCountry[]; } type TDemoTableCustomBodyProps = { - //datasource: TCountry[]; + dataSource: TCountry[]; } export default function DemoTableCustomBody(props: TDemoTableCustomBodyProps) { - const methods = useForm({ - defaultValues: { - datasource: countries .map((country: any) => { - return { - ...country, - independenceDate: new Date(country.independenceDate), - area: Number.parseInt(country.area) - } as TCountry - }) - }, - mode: "all" - }) - - const onSubmit: SubmitHandler = (data) => { + // const methods = useForm({ + // defaultValues: { + // datasource: countries.map((country: any) => { + // return { + // ...country, + // independenceDate: new Date(country.independenceDate), + // area: Number.parseInt(country.area) + // } as TCountry + // }) + // }, + // mode: "all" + // }) + + const onSubmit = (data: TDemoModel) => { sendSaveAndClose(data); } @@ -75,8 +75,8 @@ export default function DemoTableCustomBody(props: TDemoTableCustomBodyProps) { const model: TDemoModel = command.data.model; const errors: any = command.data.errors; - setDataModel(methods.setValue, model); - setErrorModel(methods.setError, errors); + // setDataModel(methods.setValue, model); + // setErrorModel(methods.setError, errors); break; default: @@ -96,49 +96,55 @@ export default function DemoTableCustomBody(props: TDemoTableCustomBodyProps) { { name: "country", type: "string", - label: tdsVscode.l10n.t("Country/Population"), + label: tdsVscode.l10n.t("_Country/Population"), }, { name: "capital", type: "string", - label: tdsVscode.l10n.t("Capital/Area"), + label: tdsVscode.l10n.t("_Capital/Area"), }, { name: "continent", type: "number", - label: tdsVscode.l10n.t("Continent/Independence"), + label: tdsVscode.l10n.t("_Continent/Independence"), }, ]; } - const model: TDemoModel = methods.getValues(); + const model: TDemoModel = { + dataSource: countries.map((country: any) => { + return { + ...country, + independenceDate: new Date(country.independenceDate), + area: Number.parseInt(country.area) + } as TCountry + }) + } return ( - methods={methods} actions={[]} onSubmit={onSubmit}> <> { dataSource.map((row: any, index: number) => { - console.log("ROW", row) return ( <> - - {row.name} - {row.capital} - {row.continent} - - - {row.population} - {row.area} - {row.independenceDate} - + + {row.name} + {row.capital} + {row.continent} + + + {row.population} + {row.area} + {row.independenceDate} + ); }) diff --git a/src/index.ts b/src/index.ts index a38fc10..1bb926a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -54,7 +54,7 @@ export { TdsDialog } from './components/dialog'; export { TdsLabelField } from './components/fields/labelField' export type { TdsLabelFieldProps } from './components/fields/labelField' -export { TdsTreeView, TdsTreeItem } from "./components/tree"; +export { TdsTreeView/*, TdsTreeItem*/ } from "./components/tree"; declare global { interface Window { diff --git a/src/model/modelData.ts b/src/model/modelData.ts index 8575edc..7b8fb6e 100644 --- a/src/model/modelData.ts +++ b/src/model/modelData.ts @@ -14,13 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { FieldValues } from "react-hook-form"; - /** * Represents the shape of an abstract model object. * This type can be used to define the structure of a model object that contains arbitrary properties. */ -export interface TdsAbstractModel extends FieldValues { +export interface TdsAbstractModel { [key: string]: any //errors?: any }