New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@kieler/table-webview

Package Overview
Dependencies
Maintainers
4
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kieler/table-webview - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

5

lib/actions.d.ts

@@ -37,3 +37,3 @@ import { Cell } from "./helper";

}
/** Sends the Id of the selected row to the client */
/** Sends the Id of the selected row, Id of the selected column, and content of the cell if it exists to the client */
export interface SelectedCellAction extends Action {

@@ -43,6 +43,7 @@ kind: typeof SelectedCellAction.KIND;

columnId: string;
text?: string;
}
export declare namespace SelectedCellAction {
const KIND = "selectRow";
function create(rowId: string, columnId: string): SelectedCellAction;
function create(rowId: string, columnId: string, text?: string): SelectedCellAction;
function isThisAction(action: Action): action is SelectedCellAction;

@@ -49,0 +50,0 @@ }

15

lib/actions.js

@@ -27,4 +27,4 @@ "use strict";

kind: AddRowAction.KIND,
rowId: rowId,
values: values
rowId,
values
};

@@ -44,5 +44,5 @@ }

kind: UpdateCellAction.KIND,
rowId: rowId,
columnId: columnId,
value: value
rowId,
columnId,
value
};

@@ -73,7 +73,8 @@ }

SelectedCellAction.KIND = "selectRow";
function create(rowId, columnId) {
function create(rowId, columnId, text) {
return {
kind: SelectedCellAction.KIND,
rowId: rowId,
columnId: columnId
columnId: columnId,
text: text
};

@@ -80,0 +81,0 @@ }

@@ -21,10 +21,9 @@ "use strict";

exports.Cell = void 0;
var Cell = /** @class */ (function () {
function Cell(cssClass, value) {
class Cell {
constructor(cssClass, value) {
this.cssClass = cssClass;
this.value = value;
}
return Cell;
}());
}
exports.Cell = Cell;
//# sourceMappingURL=helper.js.map

@@ -21,10 +21,10 @@ "use strict";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
var snabbdom_1 = require("snabbdom");
const snabbdom_1 = require("snabbdom");
/** Needed to update the html document */
exports.patch = (0, snabbdom_1.init)([
// Init patch function with chosen modules
snabbdom_1.propsModule,
snabbdom_1.styleModule,
snabbdom_1.eventListenersModule,
snabbdom_1.attributesModule,
snabbdom_1.propsModule, // for setting properties on DOM elements
snabbdom_1.styleModule, // handles styling on elements with support for animations
snabbdom_1.eventListenersModule, // attaches event listeners
snabbdom_1.attributesModule, // for using attributes on svg elements
// IMPORTANT: classModule must be after attributesModule. Otherwise it does not work when classes are also in the attributes list.

@@ -40,8 +40,7 @@ snabbdom_1.classModule // makes it easy to toggle classes

function createTable(id, headers) {
var children = [];
for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
var head = headers_1[_i];
const children = [];
for (const head of headers) {
children.push((0, snabbdom_1.jsx)("th", { attr: { id: head } }, head));
}
var table = (0, snabbdom_1.jsx)("table", { attrs: { id: id + "_table" } },
const table = (0, snabbdom_1.jsx)("table", { attrs: { id: id + "_table" } },
(0, snabbdom_1.jsx)("tr", { attrs: { id: "headers" } }, children));

@@ -58,7 +57,6 @@ return table;

function createRow(id, values, headers) {
var children = [];
var i = 0;
for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
var val = values_1[_i];
var classes = {};
const children = [];
let i = 0;
for (const val of values) {
const classes = {};
classes[val.cssClass] = true;

@@ -68,3 +66,3 @@ children.push((0, snabbdom_1.jsx)("td", { class: classes, attrs: { id: headers[i] } }, val.value));

}
var row = (0, snabbdom_1.jsx)("tr", { attrs: { id: id } }, children);
const row = (0, snabbdom_1.jsx)("tr", { attrs: { id: id } }, children);
return row;

@@ -79,3 +77,3 @@ }

function createCell(id, value) {
var classes = {};
const classes = {};
classes[value.cssClass] = true;

@@ -82,0 +80,0 @@ return (0, snabbdom_1.jsx)("td", { class: classes, attrs: { id: id } }, value.value);

@@ -20,8 +20,8 @@ "use strict";

exports.TableWebview = exports.Table = exports.Cell = void 0;
var helper_1 = require("./helper");
const helper_1 = require("./helper");
Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return helper_1.Cell; } });
var table_1 = require("./table");
const table_1 = require("./table");
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return table_1.Table; } });
var table_webview_1 = require("./table-webview");
const table_webview_1 = require("./table-webview");
Object.defineProperty(exports, "TableWebview", { enumerable: true, get: function () { return table_webview_1.TableWebview; } });
//# sourceMappingURL=index.js.map

@@ -21,2 +21,3 @@ import * as vscode from 'vscode';

columnId: string;
text?: string;
};

@@ -26,2 +27,3 @@ readonly cellClickedEmitter: vscode.EventEmitter<{

columnId: string;
text?: string | undefined;
} | undefined>;

@@ -31,2 +33,3 @@ readonly cellClicked: vscode.Event<{

columnId: string;
text?: string;
} | undefined>;

@@ -41,2 +44,3 @@ readonly initializedEmitter: vscode.EventEmitter<void | undefined>;

columnId: string;
text?: string | undefined;
};

@@ -43,0 +47,0 @@ /**

@@ -18,50 +18,13 @@ "use strict";

*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableWebview = void 0;
var vscode = require("vscode");
var actions_1 = require("./actions");
const vscode = require("vscode");
const actions_1 = require("./actions");
/**
* Generic table view which provides a cellClicked event to be able to build interaction with the webview.
*/
var TableWebview = exports.TableWebview = /** @class */ (function () {
function TableWebview(identifier, localResourceRoots, scriptUri) {
var _this = this;
class TableWebview {
constructor(identifier, localResourceRoots, scriptUri) {
this.disposables = [];
this.webviewReady = new Promise(function (resolve) { return (_this.resolveWebviewReady = resolve); });
this.webviewReady = new Promise((resolve) => (this.resolveWebviewReady = resolve));
this.cellClickedEmitter = new vscode.EventEmitter();

@@ -75,11 +38,11 @@ this.cellClicked = this.cellClickedEmitter.event;

}
TableWebview.prototype.ready = function () {
ready() {
return this.webviewReady;
};
TableWebview.prototype.getTitle = function () {
}
getTitle() {
return this.identifier;
};
TableWebview.prototype.getSelectedRow = function () {
}
getSelectedRow() {
return this.selectedCell;
};
}
/**

@@ -89,6 +52,5 @@ * Creates a diagram panel and initializes the webview.

*/
TableWebview.prototype.createWebviewPanel = function (headers) {
var _this = this;
var title = this.getTitle();
var diagramPanel = vscode.window.createWebviewPanel('table', title, vscode.ViewColumn.Beside, {
createWebviewPanel(headers) {
const title = this.getTitle();
const diagramPanel = vscode.window.createWebviewPanel('table', title, vscode.ViewColumn.Beside, {
localResourceRoots: this.localResourceRoots,

@@ -99,6 +61,6 @@ enableScripts: true

this.diagramPanel = diagramPanel;
this.diagramPanel.onDidDispose(function () {
_this.disposables.forEach(function (d) { return d.dispose(); });
this.diagramPanel.onDidDispose(() => {
this.disposables.forEach(d => d.dispose());
});
};
}
/**

@@ -110,14 +72,22 @@ * Initializes the webview html and saves the headers.

*/
TableWebview.prototype.initializeWebview = function (webview, title, headers) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.headers = headers;
// TODO: We should not require an internet connection and link to an external web page for this to load properly - fontawesome has some nicer ways to be embedded into Typescript code.
webview.html = "\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, height=device-height\">\n <title>".concat(title, "</title>\n </head>\n <body>\n <div id=\"").concat(this.identifier, "_container\" style=\"height: 100%;\"></div>\n <script> const vscode = acquireVsCodeApi();</script>\n <script src=\"").concat(webview.asWebviewUri(this.scriptUri).toString(), "\"></script>\n </body>\n </html>");
this.webview = webview;
this.connect();
return [2 /*return*/];
});
});
};
async initializeWebview(webview, title, headers) {
this.headers = headers;
// TODO: We should not require an internet connection and link to an external web page for this to load properly - fontawesome has some nicer ways to be embedded into Typescript code.
webview.html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height">
<title>${title}</title>
</head>
<body>
<div id="${this.identifier}_container" style="height: 100%;"></div>
<script> const vscode = acquireVsCodeApi();</script>
<script src="${webview.asWebviewUri(this.scriptUri).toString()}"></script>
</body>
</html>`;
this.webview = webview;
this.connect();
}
/**

@@ -128,19 +98,6 @@ * Adds a row to the table.

*/
TableWebview.prototype.addRow = function (rowId) {
var values = [];
for (var _i = 1; _i < arguments.length; _i++) {
values[_i - 1] = arguments[_i];
}
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.ready()];
case 1:
_a.sent();
this.sendToWebview({ action: actions_1.AddRowAction.create(rowId, values) });
return [2 /*return*/];
}
});
});
};
async addRow(rowId, ...values) {
await this.ready();
this.sendToWebview({ action: actions_1.AddRowAction.create(rowId, values) });
}
/**

@@ -152,65 +109,27 @@ * Updates a cells.

*/
TableWebview.prototype.updateCell = function (rowId, columnId, value) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.ready()];
case 1:
_a.sent();
this.sendToWebview({ action: actions_1.UpdateCellAction.create(rowId, columnId, value) });
return [2 /*return*/];
}
});
});
};
async updateCell(rowId, columnId, value) {
await this.ready();
this.sendToWebview({ action: actions_1.UpdateCellAction.create(rowId, columnId, value) });
}
/**
* Resets the table to the headers.
*/
TableWebview.prototype.reset = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.ready()];
case 1:
_a.sent();
this.sendToWebview({ action: actions_1.ResetTableAction.create() });
return [2 /*return*/];
}
});
});
};
async reset() {
await this.ready();
this.sendToWebview({ action: actions_1.ResetTableAction.create() });
}
/**
* Registers listener for webview notifications.
*/
TableWebview.prototype.connect = function () {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.disposables.push(this.webview.onDidReceiveMessage(function (message) { return _this.receiveFromWebview(message); }));
return [4 /*yield*/, this.ready()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
async connect() {
this.disposables.push(this.webview.onDidReceiveMessage((message) => this.receiveFromWebview(message)));
await this.ready();
}
/**
* Sends identifier to the webview.
*/
TableWebview.prototype.sendTableIdentifier = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.ready()];
case 1:
_a.sent();
this.sendToWebview({ identifier: this.identifier, headers: this.headers });
return [2 /*return*/];
}
});
});
};
async sendTableIdentifier() {
await this.ready();
this.sendToWebview({ identifier: this.identifier, headers: this.headers });
}
/**

@@ -220,27 +139,15 @@ * Handles messages from the webview.

*/
TableWebview.prototype.receiveFromWebview = function (message) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!message.readyMessage) return [3 /*break*/, 2];
this.resolveWebviewReady();
return [4 /*yield*/, this.sendTableIdentifier()];
case 1:
_a.sent();
this.initializedEmitter.fire();
return [3 /*break*/, 3];
case 2:
if (message.action) {
if (actions_1.SelectedCellAction.isThisAction(message.action)) {
this.selectedCell = { rowId: message.action.rowId, columnId: message.action.columnId };
this.cellClickedEmitter.fire(this.selectedCell);
}
}
_a.label = 3;
case 3: return [2 /*return*/];
}
});
});
};
async receiveFromWebview(message) {
if (message.readyMessage) {
this.resolveWebviewReady();
await this.sendTableIdentifier();
this.initializedEmitter.fire();
}
else if (message.action) {
if (actions_1.SelectedCellAction.isThisAction(message.action)) {
this.selectedCell = { rowId: message.action.rowId, columnId: message.action.columnId, text: message.action.text };
this.cellClickedEmitter.fire(this.selectedCell);
}
}
}
/**

@@ -250,12 +157,12 @@ * Sends messages to the webview.

*/
TableWebview.prototype.sendToWebview = function (message) {
sendToWebview(message) {
this.webview.postMessage(message);
};
TableWebview.prototype.dispose = function () {
}
dispose() {
this.diagramPanel.dispose();
this.disposables.forEach(function (d) { return d.dispose(); });
};
TableWebview.viewCount = 0;
return TableWebview;
}());
this.disposables.forEach(d => d.dispose());
}
}
exports.TableWebview = TableWebview;
TableWebview.viewCount = 0;
//# sourceMappingURL=table-webview.js.map

@@ -20,18 +20,17 @@ "use strict";

exports.Table = void 0;
var actions_1 = require("./actions");
var html_1 = require("./html");
var Table = /** @class */ (function () {
function Table() {
var _this = this;
const actions_1 = require("./actions");
const html_1 = require("./html");
class Table {
constructor() {
vscode.postMessage({ readyMessage: 'Template Webview ready' });
// add listener for messages
var eventListener = function (message) {
_this.handleMessages(message);
const eventListener = (message) => {
this.handleMessages(message);
};
window.addEventListener('message', eventListener);
document.addEventListener('click', function (event) {
var node = event.target;
var owner = node.parentElement;
document.addEventListener('click', event => {
const node = event.target;
const owner = node.parentElement;
if (owner) {
var action = actions_1.SelectedCellAction.create(owner.id, node.id);
const action = actions_1.SelectedCellAction.create(owner.id, node.id, node.innerText);
vscode.postMessage({ action: action });

@@ -45,3 +44,3 @@ }

*/
Table.prototype.handleMessages = function (message) {
handleMessages(message) {
if (message.data.identifier) {

@@ -51,3 +50,3 @@ this.initHtml(message.data.identifier, message.data.headers);

else if (message.data.action) {
var action = message.data.action;
const action = message.data.action;
if (actions_1.AddRowAction.isThisAction(action)) {

@@ -66,3 +65,3 @@ this.handleAddRow(action);

}
};
}
/**

@@ -72,13 +71,13 @@ * Initializes the webview with a header and a placeholder for the table.

*/
Table.prototype.initHtml = function (identifier, headers) {
initHtml(identifier, headers) {
this.identifier = identifier;
this.headers = headers;
var containerDiv = document.getElementById(identifier + '_container');
const containerDiv = document.getElementById(identifier + '_container');
if (containerDiv) {
var tablePlaceholder = document.createElement("table");
const tablePlaceholder = document.createElement("table");
containerDiv.appendChild(tablePlaceholder);
var table = (0, html_1.createTable)(identifier, headers);
const table = (0, html_1.createTable)(identifier, headers);
(0, html_1.patch)(tablePlaceholder, table);
}
};
}
/**

@@ -88,11 +87,11 @@ * Adds a row to the table at the bottom.

*/
Table.prototype.handleAddRow = function (action) {
var table = document.getElementById(this.identifier + '_table');
handleAddRow(action) {
const table = document.getElementById(this.identifier + '_table');
if (table) {
var rowPlaceholder = document.createElement("tr");
const rowPlaceholder = document.createElement("tr");
table.appendChild(rowPlaceholder);
var row = (0, html_1.createRow)(action.rowId, action.values, this.headers);
const row = (0, html_1.createRow)(action.rowId, action.values, this.headers);
(0, html_1.patch)(rowPlaceholder, row);
}
};
}
/**

@@ -102,6 +101,6 @@ * Updates a cell in the table.

*/
Table.prototype.handleUpdateCell = function (action) {
var row = document.getElementById(action.rowId);
var column = this.headers.indexOf(action.columnId);
var newCell = (0, html_1.createCell)(action.columnId, action.value);
handleUpdateCell(action) {
const row = document.getElementById(action.rowId);
const column = this.headers.indexOf(action.columnId);
const newCell = (0, html_1.createCell)(action.columnId, action.value);
if (row) {

@@ -114,8 +113,8 @@ if (column < row.children.length) {

// row might be so short that we need to add empty cells in order to add the new value to the desired cell
for (var i = row.children.length; i < column; i++) {
var cell = document.createElement("td");
for (let i = row.children.length; i < column; i++) {
const cell = document.createElement("td");
row.appendChild(cell);
}
// add new cell
var cellPlaceholder = document.createElement("td");
const cellPlaceholder = document.createElement("td");
row.appendChild(cellPlaceholder);

@@ -125,16 +124,15 @@ (0, html_1.patch)(cellPlaceholder, newCell);

}
};
}
/**
* Resets the table to the headers.
*/
Table.prototype.handleResetTable = function () {
var table = document.getElementById(this.identifier + '_table');
handleResetTable() {
const table = document.getElementById(this.identifier + '_table');
if (table) {
var newTable = (0, html_1.createTable)(this.identifier, this.headers);
const newTable = (0, html_1.createTable)(this.identifier, this.headers);
(0, html_1.patch)(table, newTable);
}
};
return Table;
}());
}
}
exports.Table = Table;
//# sourceMappingURL=table.js.map
{
"name": "@kieler/table-webview",
"version": "0.0.4",
"version": "0.0.5",
"description": "Table as Webview",

@@ -31,3 +31,3 @@ "main": "./lib/index.js",

"engines": {
"node": "^14.17.1",
"node": "^16.11.7",
"yarn": "^1.22.10"

@@ -41,15 +41,15 @@ },

"dependencies": {
"@types/vscode": "^1.56.0",
"reflect-metadata": "^0.1.13",
"@types/vscode": "^1.85.0",
"reflect-metadata": "^0.2.1",
"snabbdom": "^3.5.1"
},
"devDependencies": {
"css-loader": "^6.5.1",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"rimraf": "^4.4.0",
"source-map-loader": "^3.0.0",
"style-loader": "^1.2.1",
"ts-loader": "^9.2.6",
"typescript": "^5.1.6"
"style-loader": "^3.3.3",
"ts-loader": "^9.5.1",
"typescript": "^5.3.3"
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc