px-jspreadsheet-ce 0.0.1

package/dist/jspreadsheet.themes.css

@@ -0,0 +1,104 @@
+.jss_worksheet > thead > tr > td {
+    border-top: 1px solid var(--border_color, #ccc);
+    border-left: 1px solid var(--border_color, #ccc);
+    background-color: var(--header_background, #f3f3f3);
+    color: var(--header_color, #000);
+}
+
+.jss_worksheet > thead > tr > td.selected {
+    background-color: var(--header_background_highlighted, #dcdcdc);
+    color: var(--header_color_highlighted, #000);
+}
+
+.jss_worksheet > tbody > tr > td:first-child {
+    background-color: var(--header_background, #f3f3f3);
+    color: var(--header_color, #000);
+}
+
+.jss_worksheet > tbody > tr > td {
+    background-color: var(--content_background, #fff);
+    color: var(--content_color, #000);
+    border-top: 1px solid var(--border_color, #ccc);
+    border-left: 1px solid var(--border_color, #ccc);
+}
+
+.jss_worksheet > tbody > tr.selected > td:first-child {
+    background-color: var(--header_background_highlighted, #dcdcdc);
+    color: var(--header_color_highlighted, #000);
+}
+
+.jss_worksheet .highlight {
+    background-color: var(--selection, rgba(0, 0, 0, 0.05));
+}
+
+.jss_worksheet .highlight-top {
+    border-top: 1px solid var(--border_color_highlighted, #000);
+}
+
+.jss_worksheet .highlight-left {
+    border-left: 1px solid var(--border_color_highlighted, #000);
+}
+
+.jss_worksheet .highlight-right {
+    border-right: 1px solid var(--border_color_highlighted, #000);
+}
+
+.jss_worksheet .highlight-bottom {
+    border-bottom: 1px solid var(--border_color_highlighted, #000);
+}
+
+.jss_worksheet .highlight-selected {
+    background-color: var(--cursor, #eee);
+}
+
+.jss_pagination > div > div {
+    color: var(--header_color, #000);
+    background: var(--header_background, #f3f3f3);
+    border: 1px solid var(--border_color, #ccc);
+}
+
+.jss_toolbar {
+    background-color: var(--header_background, #f3f3f3);
+    color: var(--header_color, #000);
+    border: 1px solid var(--border_color, #ccc);
+}
+
+.jss_toolbar .jtoolbar-item i {
+    color: var(--content_color, #000);
+}
+
+.jss_toolbar .jtoolbar-item:not(.jtoolbar-divisor):hover,
+.jss_toolbar .jtoolbar-item.jpicker:hover > .jpicker-header {
+    background-color: var(--content_background_highlighted, #f3f3f3);
+    color: var(--content_color_highlighted, #000);
+}
+
+.jss_toolbar .jtoolbar-divisor {
+    background: var(--header_color, #ddd);
+}
+
+.jss_contextmenu {
+    border: 1px solid var(--border_color, #ccc);
+    background: var(--menu_background, #fff);
+    color: var(--menu_color, #555);
+    box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1));
+    -webkit-box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1));
+    -moz-box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1));
+}
+
+.jss_contextmenu > div a {
+    color: var(--menu_color, #555);
+}
+
+.jss_contextmenu > div:not(.contextmenu-line):hover a {
+    color: var(--menu_color_highlighted, #555);
+}
+
+.jss_contextmenu > div:not(.contextmenu-line):hover {
+    background: var(--menu_background_highlighted, #ebebeb);
+}
+
+.jss_container input {
+    color: var(--header_color, #000);
+    background: var(--header_background, #f3f3f3);
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "px-jspreadsheet-ce",
+    "title": "The Javascript Spreadsheet",
+    "description": "Jspreadsheet is a lightweight, vanilla javascript plugin to create amazing web-based interactive data grids with spreadsheet like controls compatible with Excel, Google Spreadsheets and any other spreadsheet software.",
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "src/index.js",
+    "types": "dist/index.d.ts",
+    "version": "0.0.1",
+    "files": [
+        "src/**/*.js",
+        "dist"
+    ],
+    "dependencies": {
+        "@jspreadsheet/formula": "^2.0.2",
+        "jsuites": "^5.12.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.7.4",
+        "@babel/core": "^7.7.4",
+        "@babel/preset-env": "^7.7.4",
+        "@babel/register": "^7.7.4",
+        "@eslint/js": "^9.34.0",
+        "c8": "^7.13.0",
+        "chai": "^4.3.7",
+        "copy-webpack-plugin": "^11.0.0",
+        "cross-env": "^7.0.3",
+        "css-loader": "^6.8.1",
+        "eslint": "^8.57.1",
+        "eslint-config-prettier": "^8.8.0",
+        "globals": "^16.3.0",
+        "html-replace-webpack-plugin": "^2.6.0",
+        "html-webpack-plugin": "^5.5.0",
+        "jsdoc": "^4.0.2",
+        "jsdom": "^22.0.0",
+        "jsdom-global": "^3.0.2",
+        "mini-css-extract-plugin": "^2.7.6",
+        "mocha": "^10.2.0",
+        "mochawesome": "^7.1.3",
+        "prettier": "2.8.8",
+        "style-loader": "^3.3.1",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1"
+    },
+    "scripts": {
+        "format": "npm run prettier:fix && npm run lint:fix",
+        "lint": "eslint .",
+        "lint:fix": "eslint --fix .",
+        "prettier": "prettier --check .",
+        "prettier:fix": "prettier --write . --ignore-path .prettierignore",
+        "start": "webpack serve --history-api-fallback",
+        "prebuild": "npm run prettier:fix && npm run lint:fix",
+        "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+        "test": "npm run build && mocha --recursive --require=mocha.config.js"
+    }
+}

package/src/index.js

@@ -0,0 +1,95 @@
+import jSuites from 'jsuites';
+
+import libraryBase from './utils/libraryBase.js';
+
+import Factory from './utils/factory.js';
+import { destroyEvents } from './utils/events.js';
+
+import * as helpers from './utils/helpers.js';
+import dispatch from './utils/dispatch.js';
+import version from './utils/version.js';
+
+libraryBase.jspreadsheet = function (el, options) {
+    try {
+        let worksheets = [];
+
+        // Create spreadsheet
+        Factory.spreadsheet(el, options, worksheets).then((spreadsheet) => {
+            libraryBase.jspreadsheet.spreadsheet.push(spreadsheet);
+
+            // Global onload event
+            dispatch.call(spreadsheet, 'onload', spreadsheet);
+        });
+
+        return worksheets;
+    } catch (e) {
+        console.error(e);
+    }
+};
+
+libraryBase.jspreadsheet.getWorksheetInstanceByName = function (worksheetName, namespace) {
+    const targetSpreadsheet = libraryBase.jspreadsheet.spreadsheet.find((spreadsheet) => {
+        return spreadsheet.config.namespace === namespace;
+    });
+
+    if (targetSpreadsheet) {
+        return {};
+    }
+
+    if (typeof worksheetName === 'undefined' || worksheetName === null) {
+        const namespaceEntries = targetSpreadsheet.worksheets.map((worksheet) => {
+            return [worksheet.options.worksheetName, worksheet];
+        });
+
+        return Object.fromEntries(namespaceEntries);
+    }
+
+    return targetSpreadsheet.worksheets.find((worksheet) => {
+        return worksheet.options.worksheetName === worksheetName;
+    });
+};
+
+// Define dictionary
+libraryBase.jspreadsheet.setDictionary = function (o) {
+    jSuites.setDictionary(o);
+};
+
+libraryBase.jspreadsheet.destroy = function (element, destroyEventHandlers) {
+    if (element.spreadsheet) {
+        const spreadsheetIndex = libraryBase.jspreadsheet.spreadsheet.indexOf(element.spreadsheet);
+        libraryBase.jspreadsheet.spreadsheet.splice(spreadsheetIndex, 1);
+
+        const root = element.spreadsheet.config.root || document;
+
+        element.spreadsheet = null;
+        element.innerHTML = '';
+
+        if (destroyEventHandlers) {
+            destroyEvents(root);
+        }
+    }
+};
+
+libraryBase.jspreadsheet.destroyAll = function () {
+    for (let spreadsheetIndex = 0; spreadsheetIndex < libraryBase.jspreadsheet.spreadsheet.length; spreadsheetIndex++) {
+        const spreadsheet = libraryBase.jspreadsheet.spreadsheet[spreadsheetIndex];
+
+        libraryBase.jspreadsheet.destroy(spreadsheet.element);
+    }
+};
+
+libraryBase.jspreadsheet.current = null;
+
+libraryBase.jspreadsheet.spreadsheet = [];
+
+libraryBase.jspreadsheet.helpers = {};
+
+libraryBase.jspreadsheet.version = function () {
+    return version;
+};
+
+Object.entries(helpers).forEach(([key, value]) => {
+    libraryBase.jspreadsheet.helpers[key] = value;
+});
+
+export default libraryBase.jspreadsheet;

package/src/test.js

@@ -0,0 +1,50 @@
+import jspreadsheet from './index.js';
+import 'jsuites/dist/jsuites.css';
+import './jspreadsheet.css';
+
+window.jss = jspreadsheet;
+
+const rows = {
+    0: { height: '60px' },
+    1: { height: '80px' },
+    3: { height: '45px' },
+};
+
+const columns = [{ width: '200px' }, { type: 'calendar', format: 'DD/MM/YYYY' }];
+
+const mergeCells = {
+    A1: [1, 2],
+    // B1: [2, 1],
+};
+
+const cells = {
+    B1: { type: 'dropdown', source: [12, 24, 36, 48, 60] },
+};
+
+window.instance = jspreadsheet(document.getElementById('root'), {
+    tabs: true,
+    // toolbar: true,
+    // onbeforeselection: (obj, x, y) => x > 0 && y > 1, // locked cell content
+    worksheets: [
+        {
+            minDimensions: [20, 40],
+            data: [
+                ['', '24'],
+                ['', '2025-08-08'],
+            ],
+            // freezeRows: 2,
+            columns,
+            rows,
+            cells,
+            // freezeColumns: 2,
+            tableOverflow: true,
+            tableWidth: 1200,
+            tableHeight: 400,
+            mergeCells,
+            // editable: false,
+            selectionCopy: false,
+            columnSorting: false,
+            columnResize: false,
+        },
+    ],
+});

package/src/utils/cells.js

@@ -0,0 +1,36 @@
+import { getCoordsFromCellName } from './helpers.js';
+
+export const setReadOnly = function (cell, state) {
+    const obj = this;
+
+    let record;
+
+    if (typeof cell === 'string') {
+        const coords = getCoordsFromCellName(cell);
+
+        record = obj.records[coords[1]][coords[0]];
+    } else {
+        const x = parseInt(cell.getAttribute('data-x'));
+        const y = parseInt(cell.getAttribute('data-y'));
+
+        record = obj.records[y][x];
+    }
+
+    if (state) {
+        record.element.classList.add('readonly');
+    } else {
+        record.element.classList.remove('readonly');
+    }
+};
+
+export const isReadOnly = function (x, y) {
+    const obj = this;
+
+    if (typeof x === 'string' && typeof y === 'undefined') {
+        const coords = getCoordsFromCellName(x);
+
+        [x, y] = coords;
+    }
+
+    return obj.records[y][x].element.classList.contains('readonly');
+};