feat(components): extract CompositeEditor & EmptyWarning Components

README.md

@@ -49,6 +49,8 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +12,00
 | Package Name | Version | Description |
 | --------| ----------- | ------------- |
 | [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/common.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/common) | commonly used Formatters/Editors/Filters/Services/... |
+| [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component) | Composite Editor Modal Component |
+| [@slickgrid-universal/empty-warning-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/empty-warning-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/empty-warning-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/empty-warning-component) | Composite Editor Modal Component |
 | [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/excel-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/excel-export) | Export to Excel Service (xls/xlsx) |
 | [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/text-export) | Export to Text File Service (csv/txt) |
 | [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/graphql) | GraphQL Query Service (support Filter/Sort/Pagination) |

examples/webpack-demo-vanilla-bundle/package.json

@@ -25,31 +25,31 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "^0.4.0",
-    "@slickgrid-universal/excel-export": "^0.4.1",
-    "@slickgrid-universal/text-export": "^0.4.2",
-    "@slickgrid-universal/vanilla-bundle": "^0.4.2",
+    "@slickgrid-universal/common": "*",
+    "@slickgrid-universal/excel-export": "*",
+    "@slickgrid-universal/text-export": "*",
+    "@slickgrid-universal/vanilla-bundle": "*",
     "bulma": "^0.9.1",
     "moment-mini": "^2.24.0"
   },
   "devDependencies": {
-    "@types/jquery": "^3.5.4",
+    "@types/jquery": "^3.5.5",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.14.9",
+    "@types/node": "^14.14.12",
     "@types/webpack": "^4.41.25",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.3.2",
+    "copy-webpack-plugin": "^6.4.0",
     "css-loader": "^5.0.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.0.4",
+    "fork-ts-checker-webpack-plugin": "^6.0.5",
     "html-loader": "^1.3.2",
     "html-webpack-plugin": "^4.5.0",
-    "mini-css-extract-plugin": "^1.3.1",
+    "mini-css-extract-plugin": "^1.3.2",
     "node-sass": "5.0.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.11",
-    "ts-node": "^9.0.0",
+    "ts-node": "^9.1.1",
     "url-loader": "^4.1.1",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",

package.json

@@ -46,12 +46,12 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.10",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
-    "cypress": "^6.0.1",
-    "eslint": "^7.14.0",
+    "@types/jest": "^26.0.18",
+    "@types/node": "^14.14.12",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
+    "cypress": "^6.1.0",
+    "eslint": "^7.15.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "http-server": "^0.12.3",

packages/common/package.json

@@ -21,13 +21,11 @@
     "build:watch": "cross-env tsc --incremental --watch",
     "dev": "run-s build sass:build sass:copy",
     "dev:watch": "run-p build:watch sass:watch",
-    "bundle": "npm-run-all bundle:amd bundle:commonjs bundle:es2015 bundle:es2020",
+    "bundle": "npm-run-all bundle:commonjs bundle:es2015",
     "prebundle": "npm-run-all delete:dist",
     "postbundle": "npm-run-all sass:build sass:copy",
-    "bundle:amd": "cross-env tsc --project tsconfig.build.json --outDir dist/amd --module amd",
     "bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs",
     "bundle:es2015": "cross-env tsc --project tsconfig.build.json --outDir dist/es2015 --module es2020 --target es2015",
-    "bundle:es2020": "cross-env tsc --project tsconfig.build.json --outDir dist/es2020 --module es2020 --target es2020",
     "delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
     "sass-build-task:scss-compile:bootstrap": "node-sass src/styles/slickgrid-theme-bootstrap.scss -o dist/styles/css --output-style compressed",
     "postsass-build-task:scss-compile:bootstrap": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --output-style compressed",
@@ -63,7 +61,7 @@
     "not dead"
   ],
   "dependencies": {
-    "dompurify": "^2.2.2",
+    "dompurify": "^2.2.3",
     "flatpickr": "^4.6.6",
     "jquery": "^3.5.1",
     "jquery-ui-dist": "^1.12.1",
@@ -74,16 +72,16 @@
   },
   "devDependencies": {
     "@types/dompurify": "^2.0.4",
-    "@types/jquery": "^3.5.4",
+    "@types/jquery": "^3.5.5",
     "@types/moment": "^2.13.0",
-    "autoprefixer": "^10.0.4",
+    "autoprefixer": "^10.1.0",
     "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.2",
-    "mini-css-extract-plugin": "^1.3.1",
+    "cross-env": "^7.0.3",
+    "mini-css-extract-plugin": "^1.3.2",
     "node-sass": "5.0.0",
     "nodemon": "^2.0.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.10",
+    "postcss": "^8.2.1",
     "postcss-cli": "^8.3.0",
     "rimraf": "^3.0.2"
   },

packages/common/src/styles/_variables-theme-salesforce.scss

@@ -163,6 +163,7 @@ $editor-modal-close-btn-outside-color:          #ffffff !default;
 $editor-modal-close-btn-outside-font-size:      36px !default;
 $editor-modal-close-btn-outside-right:          -7px !default;
 $editor-modal-close-btn-outside-top:            -32px !default;
+$editor-modal-footer-btn-height:                28px;
 $editor-modal-header-border-bottom:             var(--lwc-borderWidthThick, 2px) solid var(--lwc-colorBorder, rgb(221, 219, 218)) !default;
 $editor-modal-title-font-size:                  var(--lwc-fontSize7, 1.25rem) !default;
 $editor-modal-title-font-weight:                var(--lwc-fontWeightLight, 300) !default;

packages/common/src/styles/_variables.scss

@@ -552,7 +552,7 @@ $editor-modal-container-min-width:                    420px !default;
 $editor-modal-container-top:                          30px !default;
 $editor-modal-container-left:                         50% !default;
 $editor-modal-container-transform:                    translate(-50%) !default;
-$editor-modal-container-z-index:                      1010 !default;
+$editor-modal-container-z-index:                      1050 !default;
 $editor-modal-header-bg-color:                        #ffffff !default;
 $editor-modal-header-padding-left-right:              8px !default;
 $editor-modal-header-padding-top-bottom:              12px !default;
@@ -568,6 +568,7 @@ $editor-modal-close-btn-font-size:                    26px !default;
 $editor-modal-close-btn-font-weight:                  500 !default;
 $editor-modal-close-btn-height:                       20px !default;
 $editor-modal-close-btn-margin:                       1px !default;
+$editor-modal-close-btn-opacity:                      1 !default;
 $editor-modal-close-btn-padding:                      0px !default;
 $editor-modal-close-btn-width:                        20px !default;
 $editor-modal-close-btn-right:                        10px !default;
@@ -585,7 +586,7 @@ $editor-modal-footer-status-text-width:               40% !default;
 $editor-modal-footer-buttons-width:                   60% !default;
 $editor-modal-footer-btn-border:                      1px solid #dbdbdb !default;
 $editor-modal-footer-btn-border-hover:                #b5b5b5 !default;
-$editor-modal-footer-btn-height:                      28px !default;
+$editor-modal-footer-btn-height:                      inherit !default;
 $editor-modal-footer-btn-margin:                      0 5px 0 0 !default;
 $editor-modal-footer-btn-radius:                      4px !default;
 $editor-modal-footer-btn-max-width:                   162px !default;
@@ -635,7 +636,8 @@ $editor-modal-large-editor-count-margin:              0 !default;
 $editor-modal-title-font-color:                       #333333 !default;
 $editor-modal-title-font-size:                        20px !default;
 $editor-modal-title-font-weight:                      500 !default;
-$editor-modal-title-line-height:                      30px !default;
+$editor-modal-title-height:                           30px !default;
+$editor-modal-title-line-height:                      28px !default;
 $editor-modal-title-text-align:                       left !default;
 $editor-modal-validation-color:                       $editor-modal-detail-label-color-invalid !default;
 $editor-modal-validation-font-size:                   12px !default;

packages/common/src/styles/slick-editors.scss

@@ -194,6 +194,7 @@
       float: right;
       line-height: 0;
       background-color: $editor-modal-close-btn-bg-color;
+      opacity: $editor-modal-close-btn-opacity;
       border: $editor-modal-close-btn-border;
       color: $editor-modal-close-btn-color;
       font-family: $editor-modal-close-btn-font-family;
@@ -226,7 +227,7 @@
       font-weight: $editor-modal-title-font-weight;
       line-height: $editor-modal-title-line-height;
       color: $editor-modal-title-font-color;
-      height: calc(#{$editor-modal-header-height} - (#{$editor-modal-header-padding-top-bottom} * 2));
+      height: $editor-modal-title-height;
       overflow: hidden auto;
       text-align: $editor-modal-title-text-align;
       text-overflow: ellipsis;

packages/common/tsconfig.build.json

@@ -4,7 +4,7 @@
     "moduleResolution": "node",
     "target": "es2015",
     "lib": [
-      "es2020",
+      "es2015",
       "dom"
     ],
     "types": [
@@ -18,7 +18,7 @@
       "../typings",
       "../../node_modules/@types"
     ],
-    "outDir": "dist/amd",
+    "outDir": "dist/commonjs",
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": false,

packages/composite-editor-component/README.md

@@ -0,0 +1,22 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/composite-editor-component?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)
+
+[![CircleCI](https://circleci.com/gh/ghiscoding/slickgrid-universal/tree/master.svg?style=shield)](https://circleci.com/gh/ghiscoding/workflows/slickgrid-universal/tree/master)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
+
+## Vanilla Bundle
+#### @slickgrid-universal/composite-editor-component
+
+Vanilla Bundle implementation of a Composite Editor Modal Window which can do the following
+- Create
+- Update
+- Mass Update Changes
+- Mass Selection Changes (similar to Mass Update but only for the selected items)
+
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page and click on "Export to CSV" from the Grid Menu (aka hamburger menu).

packages/composite-editor-component/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@slickgrid-universal/composite-editor-component",
+  "version": "0.4.0",
+  "description": "Slick Composite Editor Component - Vanilla Implementation of a Composite Editor Modal Window Component",
+  "browser": "src/index.ts",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es2015/index.js",
+  "typings": "dist/commonjs/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "scripts": {
+    "build": "cross-env tsc --build",
+    "build:watch": "cross-env tsc --incremental --watch",
+    "dev": "run-s build sass:build sass:copy",
+    "dev:watch": "run-p build:watch",
+    "bundle": "run-p bundle:commonjs bundle:es2015",
+    "bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs",
+    "bundle:es2015": "cross-env tsc --project tsconfig.build.json --outDir dist/es2015 --module es2020 --target es2015",
+    "prebundle": "npm-run-all delete:dist",
+    "delete:dist": "cross-env rimraf --maxBusyTries=10 dist"
+  },
+  "author": "Ghislain B.",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=6.14.0"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ],
+  "dependencies": {
+    "@slickgrid-universal/common": "*",
+    "dompurify": "^2.2.3"
+  },
+  "devDependencies": {
+    "@types/webpack": "^4.41.25",
+    "cross-env": "^7.0.3",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2"
+  }
+}

packages/composite-editor-component/src/.npmignore

@@ -0,0 +1,2 @@
+index.ts
+**/*.*

packages/composite-editor-component/src/index.spec.ts

@@ -0,0 +1,11 @@
+import * as entry from './index';
+
+describe('Testing library entry point', () => {
+  it('should have an index entry point defined', () => {
+    expect(entry).toBeTruthy();
+  });
+
+  it('should have all exported object defined', () => {
+    expect(typeof entry.SlickCompositeEditorComponent).toBe('function');
+  });
+});

packages/composite-editor-component/src/index.ts

@@ -0,0 +1 @@
+export * from './slick-composite-editor.component';

packages/vanilla-bundle/src/components/__tests__/slick-composite-editor.spec.ts → packages/composite-editor-component/src/slick-composite-editor.component.spec.ts

@@ -1,6 +1,19 @@
-import { Column, CompositeEditorOpenDetailOption, Editor, Editors, GridOption, GridService, GridStateService, SlickDataView, SlickGrid, SlickNamespace, SlickRowSelectionModel } from '@slickgrid-universal/common';
-import { SlickCompositeEditorComponent } from '../slick-composite-editor.component';
-import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
+import {
+  Column,
+  CompositeEditorOpenDetailOption,
+  Editor,
+  Editors,
+  GridOption,
+  GridService,
+  GridStateService,
+  SlickDataView,
+  SlickGrid,
+  SlickNamespace,
+  SlickRowSelectionModel
+} from '@slickgrid-universal/common';
+
+import { SlickCompositeEditorComponent } from './slick-composite-editor.component';
+import { TranslateServiceStub } from '../../../test/translateServiceStub';
 
 declare const Slick: SlickNamespace;
 

packages/composite-editor-component/tsconfig.build.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "module": "es2020",
+    "moduleResolution": "node",
+    "target": "es2015",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "typeRoots": [
+      "../typings",
+      "../../node_modules/@types"
+    ],
+    "outDir": "dist/2015",
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "declaration": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "noEmitHelpers": false,
+    "stripInternal": true,
+    "sourceMap": true
+  },
+  "exclude": [
+    ".vscode",
+    "src/examples",
+    "src/resources",
+    "test",
+    "**/*.spec.ts"
+  ],
+  "include": [
+    "../typings",
+    "**/*"
+  ]
+}

packages/composite-editor-component/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../tsconfig-build.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist/es2015",
+    "outDir": "dist/es2015",
+    "target": "es2017",
+    "module": "es2015",
+    "sourceMap": true,
+    "noImplicitReturns": true,
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "types": [
+      "moment",
+      "jquery",
+      "node"
+    ],
+    "typeRoots": [
+      "node_modules/@types",
+      "src/typings"
+    ]
+  },
+  "exclude": [
+    "cypress",
+    "dist",
+    "node_modules",
+    "**/*.spec.ts"
+  ],
+  "filesGlob": [
+    "./src/**/*.ts",
+    "./test/**/*.ts",
+    "./custom_typings/**/*.d.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/typings/**/*.ts"
+  ]
+}