Merge branch 'main' into 146-tabs-vertical

infor-design · Nov 7, 2022 · 08cab50 · 08cab50
2 parents a27cf2f + 32a0cde
commit 08cab50
Show file tree

Hide file tree

Showing 25 changed files with 1,550 additions and 88 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -39,12 +39,6 @@ jobs:
       with:
         swap-size-gb: 10
 
-    - name: Cache multiple paths
-      uses: actions/cache@v2
-      with:
-        path: node_modules
-        key: ids-enterprise-wc-035
-
     - name: Install Dependencies
       run: npm ci
 

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![Build Check](https://github.com/infor-design/enterprise-wc/actions/workflows/ci.yml/badge.svg)](https://github.com/infor-design/enterprise-wc/actions/workflows/ci.yml)
 [![Coverage Status](https://coveralls.io/repos/github/infor-design/enterprise-wc/badge.svg?branch=main)](https://coveralls.io/github/infor-design/enterprise-wc)
 
-Infor Design System's Enterprise component library is a framework independent UI library consisting of CSS and JS that provides Infor product development teams, partners, and customers the tools to create user experiences that are approachable, focused, relevant and perceptive.
+Infor Design System's Enterprise web component library is a framework independent UI library consisting of CSS and JS that provides Infor product development teams, partners, and customers the tools to create user experiences that are approachable, focused, relevant and perceptive.
 
 For guidelines on when and where to use the components see the [design.infor.com](http://design.infor.com).
 
@@ -26,8 +26,8 @@ For guidelines on when and where to use the components see the [design.infor.com
 - Fully Namespaced with an `ids-` namespace
 - We Follow the [Gold Standard For Making Web Components](https://github.com/webcomponents/gold-standard/wiki)
 - Includes types for typescript users
-- Every component has the CSS and DOM Encapsulated (in supported browsers)
-- 140+ Components to convert
+- Every component has the CSS and DOM Encapsulated
+- 100+ Components convert
 
 ## Browser Support
 
@@ -48,7 +48,7 @@ The components are available via npm/yarn:
 npm install --save ids-enterprise-wc@latest
 ```
 
-To Clone and Run this Repo locally:
+To Clone and Run this Repo locally (requires node 18 (16 or 17))
 
 ```sh
 mkdir enterprise-wc

diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - `[AppMenu]` Updated main example to be consistent with 4.x. ([#852](https://github.com/infor-design/enterprise-wc/issues/852))
 - `[DataGrid]` Fixed some filter issues with datagrid. ([#932](https://github.com/infor-design/enterprise-wc/issues/932)
+- `[DataGrid]` Added support for context menu. ([#963](https://github.com/infor-design/enterprise-wc/issues/963))
 
 ## 1.0.0-beta.2
 

diff --git a/src/components/ids-data-grid/README.md b/src/components/ids-data-grid/README.md
@@ -137,7 +137,11 @@ When used as an attribute in the DOM the settings are kebab case, when used in J
 - `data` {Array<object>} Sets the data to show in the data grid. This can be a JSON Array.
 - `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.
 - `filterable` {boolean} Turns on or off the filter functionality.
-- `filter-row-disabled` {boolean} Disables the filter row.
+- `filterRowDisabled` {boolean} Disables the filter row.
+- `headerMenuData` {Array<object>} Dataset to build contextmenu for header and header group cells.
+- `headerMenuId` {string} ID of the popupmenu to use as contextmenu for header and header group cells.
+- `menuData` {Array<object>} Dataset to build contextmenu for body cells.
+- `menuId` {string} ID of the popupmenu to use as contextmenu for body cells.
 - `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed
 - `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.
 - `suppressRowDeselection`  {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.
@@ -248,8 +252,11 @@ The formatter is then linked via the column on the formatter setting. When the g
 - `filterrowopened` Fires after the filter row is opened by the user.
 - `filterrowclosed` Fires after the filter row is closed by the user.
 - `columnresized` Fires when a column is resized or setColumnWidth is called.
-- `columnmoved` Fires when a column is moved / reordered or moveColumn is called
-- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto
+- `columnmoved` Fires when a column is moved / reordered or moveColumn is called.
+- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto.
+- `beforemenushow` Fires before contextmenu show, you can return false in the response to veto.
+- `menushow` Fires after contextmenu show.
+- `menuselected` Fires after contextmenu item selected.
 
 ## Methods
 
@@ -794,6 +801,113 @@ ids-data-grid::part(ruby-tooltip-popup) {
 }
 ```
 
+## Contextmenu Code Examples
+
+The context menus can be set via the dataset.
+
+```html
+<ids-data-grid id="data-grid-1" label="Books">
+</ids-data-grid>
+```
+```js
+// Dataset for header cells contextmenu
+const headerMenuData = {
+  id: 'grid-header-contextmenu',
+  contents: [{
+    id: 'header-actions-group',
+    items: [
+      { id: 'actions-split', value: 'actions-split', text: 'Split' },
+      { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },
+    ]
+  }],
+};
+
+// Dataset for body cells contextmenu
+const menuData = {
+  id: 'grid-contextmenu',
+  contents: [{
+    id: 'actions-group',
+    items: [
+      { id: 'item-1', value: 'item-1', text: 'Item One' },
+      { id: 'item-2', value: 'item-2', text: 'Item Two' },
+      { id: 'item-3', value: 'item-3', text: 'Item Three' }
+    ]
+  }],
+};
+
+// Set contextmenu data with data-grid
+dataGrid.menuData = menuData;
+dataGrid.headerMenuData = headerMenuData;
+
+// Set to return true/false in the response to veto before contextmenu show.
+dataGrid.addEventListener('beforemenushow', (e: any) => {
+  console.info('before contextmenu show', e.detail);
+  // e.detail.response(false);
+});
+
+// Set to watch after contextmenu show.
+dataGrid.addEventListener('menushow', (e: any) => {
+  console.info('After contextmenu show', e.detail);
+});
+
+// Set to watch after contextmenu item selected.
+dataGrid.addEventListener('menuselected', (e: any) => {
+  console.info('contextmenu item selected', e.detail);
+});
+```
+
+Set contextmenu thru Slot.
+
+```html
+<ids-data-grid id="data-grid-1" label="Books">
+  <!-- Contextmenu header cells -->
+  <ids-popup-menu trigger-type="custom" slot="header-contextmenu">
+    <ids-menu-group>
+      <ids-menu-item value="header-split">Split</ids-menu-item>
+      <ids-menu-item value="header-sort">Sort</ids-menu-item>
+    </ids-menu-group>
+  </ids-popup-menu>
+  <!-- Contextmenu body cells -->
+  <ids-popup-menu trigger-type="custom" slot="contextmenu">
+    <ids-menu-group>
+      <ids-menu-item value="item-1">Item One</ids-menu-item>
+      <ids-menu-item value="item-2">Item Two</ids-menu-item>
+      <ids-menu-item value="item-3">Item Three</ids-menu-item>
+      <ids-menu-item value="item-4">Item Four</ids-menu-item>
+    </ids-menu-group>
+  </ids-popup-menu>
+</ids-data-grid>
+```
+
+Set contextmenu thru ID.
+
+```html
+<ids-data-grid
+  header-menu-id="grid-header-contextmenu"
+  menu-id="grid-contextmenu"
+  id="data-grid-1"
+  label="Books"
+></ids-data-grid>
+
+<!-- Contextmenu header cells -->
+<ids-popup-menu trigger-type="custom" id="grid-header-contextmenu">
+  <ids-menu-group>
+    <ids-menu-item value="header-split">Split</ids-menu-item>
+    <ids-menu-item value="header-sort">Sort</ids-menu-item>
+  </ids-menu-group>
+</ids-popup-menu>
+
+<!-- Contextmenu body cells -->
+<ids-popup-menu trigger-type="custom" id="grid-contextmenu">
+  <ids-menu-group>
+    <ids-menu-item value="item-1">Item One</ids-menu-item>
+    <ids-menu-item value="item-2">Item Two</ids-menu-item>
+    <ids-menu-item value="item-3">Item Three</ids-menu-item>
+    <ids-menu-item value="item-4">Item Four</ids-menu-item>
+  </ids-menu-group>
+</ids-popup-menu>
+```
+
 ## States and Variations
 
 **Rows**

diff --git a/src/components/ids-data-grid/TODO.md b/src/components/ids-data-grid/TODO.md
@@ -27,7 +27,7 @@ Keep in sync with https://github.com/infor-design/enterprise-wc/issues/555
 - [x] Text align headers and cells [example](https://main-enterprise.demo.design.infor.com/components/datagrid/test-alerts-right-align.html)
 - [x] Css class/Colors
 - [x] Custom Formatters and Editors Example
-- [ ] Context Menu
+- [x] Context Menu
 
 ## Minor
 

diff --git a/src/components/ids-data-grid/demos/contextmenu-thru-data.html b/src/components/ids-data-grid/demos/contextmenu-thru-data.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid auto="true">
+      <ids-text font-size="12" type="h1">Data Grid - Contextmenu thru Data</ids-text>
+    </ids-layout-grid>
+    <ids-layout-grid auto="true">
+      <ids-layout-grid-cell>
+
+        <ids-data-grid id="data-grid-contextmenu-thru-data" row-selection="multiple" label="Books">
+        </ids-data-grid>
+
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+  </ids-container>
+</body>
+</html>