diff --git a/package-lock.json b/package-lock.json index 8abb936b7..094a2dbc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "2.14.4-dev.0", "license": "MIT", "dependencies": { - "@bendera/vscode-webview-elements": "^0.12.0", "@ibm/ibmi-eventf-parser": "^1.0.2", + "@vscode-elements/elements": "^1.9.0", "adm-zip": "^0.5.14", "crc-32": "https://cdn.sheetjs.com/crc-32-latest/crc-32-latest.tgz", "csv": "^6.2.1", @@ -137,13 +137,6 @@ "node": ">=4" } }, - "node_modules/@bendera/vscode-webview-elements": { - "version": "0.12.0", - "license": "MIT", - "dependencies": { - "lit": "^2.4.0" - } - }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "dev": true, @@ -269,15 +262,9 @@ } }, "node_modules/@lit-labs/ssr-dom-shim": { - "version": "1.0.0", - "license": "BSD-3-Clause" - }, - "node_modules/@lit/reactive-element": { - "version": "1.6.1", - "license": "BSD-3-Clause", - "dependencies": { - "@lit-labs/ssr-dom-shim": "^1.0.0" - } + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", + "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" }, "node_modules/@types/adm-zip": { "version": "0.5.5", @@ -358,6 +345,50 @@ "dev": true, "license": "MIT" }, + "node_modules/@vscode-elements/elements": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-1.9.0.tgz", + "integrity": "sha512-OjoACdO2elyZ8qVxaClN/JUODejusYC1YVOU6ekHULdWuVoU1nAXRh31Smm89M+Z7UezaAH2mXIP9aZ3q4nnjA==", + "dependencies": { + "lit": "^3.2.1" + } + }, + "node_modules/@vscode-elements/elements/node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "node_modules/@vscode-elements/elements/node_modules/lit": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/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/@vscode-elements/elements/node_modules/lit-element": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/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/@vscode-elements/elements/node_modules/lit-html": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/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/@webassemblyjs/ast": { "version": "1.12.1", "dev": true, @@ -1737,30 +1768,6 @@ "node": ">= 0.8.0" } }, - "node_modules/lit": { - "version": "2.6.1", - "license": "BSD-3-Clause", - "dependencies": { - "@lit/reactive-element": "^1.6.0", - "lit-element": "^3.2.0", - "lit-html": "^2.6.0" - } - }, - "node_modules/lit-element": { - "version": "3.2.2", - "license": "BSD-3-Clause", - "dependencies": { - "@lit/reactive-element": "^1.3.0", - "lit-html": "^2.2.0" - } - }, - "node_modules/lit-html": { - "version": "2.6.1", - "license": "BSD-3-Clause", - "dependencies": { - "@types/trusted-types": "^2.0.2" - } - }, "node_modules/loader-runner": { "version": "4.3.0", "dev": true, diff --git a/package.json b/package.json index d392cbce6..5e5791f87 100644 --- a/package.json +++ b/package.json @@ -2982,8 +2982,8 @@ "webpack-cli": "^4.5.0" }, "dependencies": { - "@bendera/vscode-webview-elements": "^0.12.0", "@ibm/ibmi-eventf-parser": "^1.0.2", + "@vscode-elements/elements": "^1.9.0", "adm-zip": "^0.5.14", "crc-32": "https://cdn.sheetjs.com/crc-32-latest/crc-32-latest.tgz", "csv": "^6.2.1", diff --git a/src/api/CustomUI.ts b/src/api/CustomUI.ts index 206dc71b2..7fe892f7a 100644 --- a/src/api/CustomUI.ts +++ b/src/api/CustomUI.ts @@ -2,7 +2,7 @@ import vscode from 'vscode'; //Webpack is returning this as a string -const vscodeweb = require(`@bendera/vscode-webview-elements/dist/bundled`); +const vscodeweb = require(`@vscode-elements/elements/dist/bundled`); type PanelOptions = { fullWidth?: boolean @@ -36,6 +36,11 @@ export interface ComplexTab { fields: Field[]; } +interface WebviewMessageRequest { + type: "submit"|"file"; + data?: any; +} + export class Section { readonly fields: Field[] = []; @@ -139,13 +144,13 @@ export class CustomUI extends Section { * @param callback * @returns a Promise> if no callback is provided */ - loadPage(title: string, callback?: (page: Page) => void): Promise> | undefined { + loadPage(title: string): Promise> | undefined { const webview = openedWebviews.get(title); if (webview) { webview.reveal(); } else { - return this.createPage(title, callback); + return this.createPage(title); } } @@ -154,7 +159,7 @@ export class CustomUI extends Section { return this; } - private createPage(title: string, callback?: (page: Page) => void): Promise> | undefined { + private createPage(title: string): Promise> | undefined { const panel = vscode.window.createWebviewPanel( `custom`, title, @@ -172,39 +177,44 @@ export class CustomUI extends Section { openedWebviews.set(title, panel); - if (callback) { + const page = new Promise>((resolve) => { panel.webview.onDidReceiveMessage( - message => { - didSubmit = true; - callback({ panel, data: message }); + (message: WebviewMessageRequest) => { + if (message.type && message.data) { + switch (message.type) { + case `submit`: + didSubmit = true; + resolve({ panel, data: message.data }); + break; + + case `file`: + const resultField = message.data.field; + if (resultField) { + vscode.window.showOpenDialog({ + canSelectFiles: true, + canSelectMany: false, + canSelectFolders: false, + }).then(result => { + if (result) { + panel.webview.postMessage({ type: `update`, field: resultField, value: result[0].fsPath }); + } + }); + } + break; + } + } } ); panel.onDidDispose(() => { openedWebviews.delete(title); if (!didSubmit) { - callback({ panel }); - } - }); - } else { - const page = new Promise>((resolve) => { - panel.webview.onDidReceiveMessage( - message => { - didSubmit = true; - resolve({ panel, data: message }); - } - ); - - panel.onDidDispose(() => { - openedWebviews.delete(title); - if (!didSubmit) { - resolve({ panel }); - } - }); + resolve({ panel }); + } }); + }); - return page; - } + return page; } private getHTML(panel: vscode.WebviewPanel, title: string) { @@ -278,6 +288,26 @@ export class CustomUI extends Section { // Fields that have value which can be returned const submitfields = [${allFields.filter(field => !notInputFields.includes(field.type)).map(field => `'${field.id}'`).join(`,`)}]; + window.addEventListener('message', event => { + const response = event.data; + + if (response.type === 'update') { + const newValue = response.value; + const field = document.getElementById(response.field); + if (response.field && response.value) { + const field = document.getElementById(response.field); + if (field) { + field.value = newValue; + let innerInput = field.shadowRoot.querySelector("input"); + if (innerInput) { + innerInput.value = newValue; + } + } + validateInputs(response.field); + } + } + }); + const validateInputs = (optionalId) => { const testFields = optionalId ? inputFields.filter(theField => theField.id === optionalId) : inputFields @@ -342,9 +372,20 @@ export class CustomUI extends Section { data[checkbox] = (data[checkbox] && data[checkbox].length >= 1); } - vscode.postMessage(data); + vscode.postMessage({ type: 'submit', data }); }; + const treeItemSubmit = (treeId, value) => { + vscode.postMessage({ type: 'submit', data: {treeId, value} }); + } + + const doFileRequest = (event, fieldId) => { + if (event) + event.preventDefault(); + + vscode.postMessage({ type: 'file', data: {field: fieldId} }); + } + // Setup the input fields for validation for (const field of inputFields) { const fieldElement = document.getElementById(field.id); @@ -395,18 +436,10 @@ export class CustomUI extends Section { // This is used to read the file in order to get the real path. for (const field of filefields) { - document.getElementById(field) - .addEventListener('vsc-change', (e) => { - const VirtualField = document.getElementById(e.target.id) - let input = VirtualField.shadowRoot.querySelector("input"); - for (let file of Array.from(input.files)) { - let reader = new FileReader(); - reader.addEventListener("load", () => { - document.getElementById(e.target.id).setAttribute("value", file.path) - }); - reader.readAsText(file); - } - }) + let fileButton = document.getElementById(field + '-file'); + if (fileButton) { + fileButton.onclick = (event) => doFileRequest(event, field); + } } document.addEventListener('DOMContentLoaded', () => { @@ -416,10 +449,10 @@ export class CustomUI extends Section { return /*js*/` currentTree = document.getElementById('${tree.id}'); currentTree.data = ${JSON.stringify(tree.treeList)}; - currentTree.addEventListener('vsc-select', (event) => { + currentTree.addEventListener('vsc-tree-select', (event) => { console.log(JSON.stringify(event.detail)); if (event.detail.itemType === 'leaf') { - vscode.postMessage({'${tree.id}': event.detail.value}); + treeItemSubmit('${tree.id}', event.detail.value); } }); ` @@ -496,7 +529,7 @@ export class Field { case `checkbox`: return /* html */` - ${this.label} + ${this.renderDescription()} `; @@ -551,7 +584,9 @@ export class Field { ${this.renderLabel()} ${this.renderDescription()} - + +

+ Select File `; case `password`: diff --git a/src/webviews/actions/index.ts b/src/webviews/actions/index.ts index 0cc8cf33b..f99138f0a 100644 --- a/src/webviews/actions/index.ts +++ b/src/webviews/actions/index.ts @@ -9,8 +9,8 @@ import { Action, ActionEnvironment, ActionRefresh, ActionType } from "../../typi import { getVariablesInfo } from "./varinfo"; type MainMenuPage = { - buttons: 'newAction' | 'duplicateAction' - actions: number + buttons?: 'newAction' | 'duplicateAction' + value: string } type ActionPage = { @@ -76,7 +76,7 @@ export namespace ActionsUI { duplicateAction(); break; default: - workAction(page.data.actions); + workAction(Number(page.data.value)); break; } } diff --git a/webpack.config.js b/webpack.config.js index 5e23f83aa..a34e8f819 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -83,7 +83,7 @@ const config = { }, { test: /\.js$/, - include: path.resolve(__dirname, `node_modules/@bendera/vscode-webview-elements/dist`), + include: path.resolve(__dirname, `node_modules/@vscode-elements/elements/dist`), type: `asset/source` }, {