@api-client/ui 0.0.10 → 0.0.12

package/src/ui/table/DataTable.ts

@@ -27,14 +27,15 @@ export interface IDataTableOptions {
 
 export type RenderContent = string | TemplateResult | TemplateResult[];
 
-type DataEvents = 'header' | 'item' | 'empty' | 'activate' | 'select' | 'render';
+type DataEvents = 'header' | 'item' | 'empty' | 'activate' | 'select' | 'render' | 'scrollend';
 
 type CellCallback<T> = (item: T) => TemplateResult[];
 type ActivateCallback<T> = (item: T) => void;
 type SelectCallback = (item: string | string[]) => void;
+type Callback = () => void;
 
 type DataEventsMap<T> = {
-  [key in DataEvents]?: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]};
+  [key in DataEvents]?: Callback | SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]};
 };
 
 export interface ICellOptions {
@@ -227,6 +228,7 @@ export class DataTable<T> {
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleListScroll = this.handleListScroll.bind(this);
   }
 
   addEventListener(type: 'header', listener: () => TemplateResult[]): void;
@@ -241,6 +243,8 @@ export class DataTable<T> {
 
   addEventListener(type: 'select', listener: SelectCallback): void;
 
+  addEventListener(type: 'scrollend', listener: Callback): void;
+
   addEventListener(type: DataEvents, listener: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]}): void {
     this.#listeners[type] = listener;
   }
@@ -585,6 +589,15 @@ export class DataTable<T> {
     }
   }
 
+  protected handleListScroll(e: Event): void {
+    const list = e.target as HTMLElement;
+    const { scrollTop, offsetHeight, scrollHeight } = list;
+    const bottom = scrollTop + offsetHeight >= scrollHeight - 20; // 20 is the offset which qualifies as the end. An arbitrary number.
+    if (bottom) {
+      this.dispatchScrollEnd();
+    }
+  }
+
   protected renderHeader(): TemplateResult {
     const cells = this.dispatchHeader();
     return html`
@@ -602,7 +615,7 @@ export class DataTable<T> {
     const contents = !!items && !!items.length ? items.map(item => this.renderItem(item)) : this.renderEmpty();
     const dbListener = active ? this.dblclickHandler : undefined;
     return html`
-    <div class="data-table-body" role="rowgroup" @dblclick="${dbListener}">
+    <div class="data-table-body" role="rowgroup" @dblclick="${dbListener}" @scroll="${{ handleEvent: this.handleListScroll, passive: true }}">
       ${contents}
     </div>`;
   }
@@ -715,4 +728,17 @@ export class DataTable<T> {
       console.warn(e);
     }
   }
+
+  protected dispatchScrollEnd(): void {
+    const callback = this.#listeners.scrollend as Callback;
+    if (!callback) {
+      return;
+    }
+    try {
+      callback();
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn(e);
+    }
+  }
 }

package/test/elements/layout/SplitItem.test.ts

@@ -295,7 +295,7 @@ describe('layout', () => {
       });
     });
 
-    describe('getParent()', () => {
+    describe('getParents()', () => {
       let manager: SplitLayout;
 
       beforeEach(() => {
@@ -308,8 +308,8 @@ describe('layout', () => {
           kind: 'test-kind',
           label: 'test-label',
         });
-        const result = instance.getParent();
-        assert.isUndefined(result);
+        const result = instance.getParents();
+        assert.deepEqual(result, []);
       });
 
       it('returns the parent panel', () => {
@@ -319,81 +319,82 @@ describe('layout', () => {
           kind: 'test-kind',
           label: 'test-label',
         });
-        const result = instance.getParent();
-        assert.deepEqual(result, panel);
+        const result = instance.getParents();
+        assert.deepEqual(result, [panel]);
       });
     });
 
-    describe('remove()', () => {
-      let manager: SplitLayout;
-      let panel: SplitPanel;
-      let item: SplitItem;
-
-      beforeEach(() => {
-        manager = new SplitLayout();
-        panel = manager.addPanel();
-        item = panel.addItem({
-          key: 'test-key',
-          kind: 'test-kind',
-          label: 'test-label',
-        });
-      });
-
-      it('removes the item from definitions', () => {
-        item.remove();
-        const result = manager.definitions.get(item.key);
-        assert.notOk(result);
-      });
-
-      it('removes the item from the parent items', () => {
-        item.remove();
-        assert.deepEqual(panel.items, []);
-      });
-
-      it('informs the panel listeners about item removed', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('closetab', spy);
-        item.remove();
-        assert.isTrue(spy.calledOnce, 'the event is dispatched');
-        const e = spy.args[0][0] as CustomEvent<string>;
-        assert.equal(e.detail, item.key, 'has the item key on the detail')
-      });
-
-      it('informs the panel listeners about layout change', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('change', spy);
-        item.remove();
-        assert.isTrue(spy.calledOnce, 'the event is dispatched');
-      });
-    });
-
-    describe('setSelected()', () => {
-      let manager: SplitLayout;
-      let panel: SplitPanel;
-      let item: SplitItem;
-
-      beforeEach(() => {
-        manager = new SplitLayout();
-        panel = manager.addPanel();
-        item = panel.addItem({
-          key: 'test-key',
-          kind: 'test-kind',
-          label: 'test-label',
-        });
-      });
-
-      it('sets item selected with the panel', () => {
-        item.setSelected();
-        assert.equal(panel.selected, item.key);
-      });
-
-      it('informs the panel listeners about layout change', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('change', spy);
-        item.setSelected();
-        assert.isTrue(spy.calledOnce, 'the event is dispatched');
-      });
-    });
+    // describe('remove()', () => {
+    //   let manager: SplitLayout;
+    //   let panel: SplitPanel;
+    //   let item: SplitItem;
+
+    //   beforeEach(() => {
+    //     manager = new SplitLayout();
+    //     panel = manager.addPanel();
+    //     item = panel.addItem({
+    //       key: 'test-key',
+    //       kind: 'test-kind',
+    //       label: 'test-label',
+    //     });
+    //   });
+
+    //   it('removes the item from definitions', () => {
+    //     item.remove();
+    //     const result = manager.definitions.get(item.key);
+    //     assert.notOk(result);
+    //   });
+
+    //   it('removes the item from the parent items', () => {
+    //     item.remove();
+    //     assert.deepEqual(panel.items, []);
+    //   });
+
+    //   it('informs the panel listeners about item removed', () => {
+    //     const spy = sinon.spy();
+    //     manager.addEventListener('closetab', spy);
+    //     item.remove();
+    //     assert.isTrue(spy.calledOnce, 'the event is dispatched');
+    //     const e = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
+    //     assert.equal(e.detail.tab, item.key, 'has the item key on the detail')
+    //     assert.equal(e.detail.panel, panel.key, 'has the panel key on the detail')
+    //   });
+
+    //   it('informs the panel listeners about layout change', () => {
+    //     const spy = sinon.spy();
+    //     manager.addEventListener('change', spy);
+    //     item.remove();
+    //     assert.isTrue(spy.calledOnce, 'the event is dispatched');
+    //   });
+    // });
+
+    // describe('setSelected()', () => {
+    //   let manager: SplitLayout;
+    //   let panel: SplitPanel;
+    //   let item: SplitItem;
+
+    //   beforeEach(() => {
+    //     manager = new SplitLayout();
+    //     panel = manager.addPanel();
+    //     item = panel.addItem({
+    //       key: 'test-key',
+    //       kind: 'test-kind',
+    //       label: 'test-label',
+    //     });
+    //   });
+
+    //   it('sets item selected with the panel', () => {
+    //     item.setSelected();
+    //     assert.equal(panel.selected, item.key);
+    //   });
+
+    //   it('informs the panel listeners about layout change', () => {
+    //     const spy = sinon.spy();
+    //     manager.addEventListener('change', spy);
+    //     item.setSelected();
+    //     assert.isTrue(spy.calledOnce, 'the event is dispatched');
+    //   });
+    // });
 
     describe('setLabel()', () => {
       let manager: SplitLayout;

package/test/elements/layout/SplitLayoutManager.test.ts

@@ -2,10 +2,10 @@ import { assert, aTimeout, fixture, html } from '@open-wc/testing';
 import { TemplateResult } from 'lit';
 import sinon from 'sinon';
 import { ISplitItem, SplitItem } from '../../../src/elements/layout/SplitItem.js';
-import { SplitLayout } from '../../../src/elements/layout/SplitLayout.js';
+import { ITabCloseDetail, SplitLayout } from '../../../src/elements/layout/SplitLayout.js';
 import { ISplitPanel, SplitPanel } from '../../../src/elements/layout/SplitPanel.js';
 import SplitView from '../../../src/elements/layout/SplitView.js';
-import { LayoutType, SplitCloseDirection, SplitDirection, SplitRegion } from '../../../src/elements/layout/type.js';
+import { LayoutType, SplitDirection, SplitRegion } from '../../../src/elements/layout/type.js';
 import '../../../src/define/layout/split-view.js';
 
 describe('layout', () => {
@@ -194,29 +194,29 @@ describe('layout', () => {
       });
     });
 
-    describe('getParent()', () => {
+    describe('getParents()', () => {
       let manager: SplitLayout;
 
       beforeEach(() => {
         manager = new SplitLayout();
       });
 
-      it('returns undefined when no item or panel', () => {
-        const result = manager.getParent('unknown');
-        assert.isUndefined(result);
+      it('returns empty array when no item or panel', () => {
+        const result = manager.getParents('unknown');
+        assert.deepEqual(result, []);
       });
 
       it('returns a parent for a panel that is a panel', () => {
         const p1 = manager.addPanel();
         const p2 = p1.addPanel();
-        const result = manager.getParent(p2.key);
-        assert.deepEqual(result, p1);
+        const result = manager.getParents(p2.key);
+        assert.deepEqual(result, [p1]);
       });
 
-      it('returns undefined when the parent is the manager', () => {
+      it('returns empty array when the parent is the manager', () => {
         const p1 = manager.addPanel();
-        const result = manager.getParent(p1.key);
-        assert.isUndefined(result);
+        const result = manager.getParents(p1.key);
+        assert.deepEqual(result, []);
       });
 
       it('returns a parent for an item', () => {
@@ -226,20 +226,20 @@ describe('layout', () => {
           key: 'b',
           label: 'c',
         });
-        const result = manager.getParent(i1.key);
-        assert.deepEqual(result, p1);
+        const result = manager.getParents(i1.key);
+        assert.deepEqual(result, [p1]);
       });
 
-      it('returns undefined for an item that has been remove', () => {
+      it('returns empty array for an item that has been removes', () => {
         const p1 = manager.addPanel();
         const i1 = p1.addItem({
           kind: 'a',
           key: 'b',
           label: 'c',
         });
-        i1.remove();
-        const result = manager.getParent(i1.key);
-        assert.isUndefined(result);
+        p1.removeChildItem(i1);
+        const result = manager.getParents(i1.key);
+        assert.deepEqual(result, []);
       });
     });
 
@@ -361,10 +361,11 @@ describe('layout', () => {
       it('dispatches the "nameitem" event', () => {
         const spy = sinon.spy();
         manager.addEventListener('closetab', spy);
-        manager.notifyTabClose('test');
+        manager.notifyTabClose('test', 'key');
         assert.isTrue(spy.calledOnce);
-        const event = spy.args[0][0] as CustomEvent<string>;
-        assert.equal(event.detail, 'test');
+        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
+        assert.equal(event.detail.tab, 'test');
+        assert.equal(event.detail.panel, 'key');
       });
     });
 
@@ -484,7 +485,7 @@ describe('layout', () => {
           kind: '',
           label: '',
         });
-        const parent = i1.getParent()!;
+        const parent = i1.getParents()[0];
         assert.ok(parent, 'has the parent');
         const foundParent = manager.findPanel(parent.key);
         assert.ok(foundParent, 'the parent is in the layout');
@@ -500,7 +501,7 @@ describe('layout', () => {
           kind: '',
           label: '',
         });
-        const itemParent = i1.getParent();
+        const itemParent = i1.getParents()[0];
         // p1 has panels in it so it must be p2.
         assert.deepEqual(itemParent, p2);
       });
@@ -514,7 +515,7 @@ describe('layout', () => {
           kind: '',
           label: '',
         });
-        const itemParent = i1.getParent();
+        const itemParent = i1.getParents()[0];
         assert.deepEqual(itemParent, p2);
       });
 
@@ -721,48 +722,48 @@ describe('layout', () => {
       });
     });
 
-    describe('removeRelative()', () => {
-      let manager: SplitLayout;
-
-      beforeEach(() => {
-        manager = new SplitLayout();
-      });
-
-      it('calls removeRelative() on the parent with defaults', () => {
-        const p1 = manager.addPanel();
-        const spy = sinon.spy(p1, 'removeRelative');
-        const i1 = p1.addItem({
-          key: 'i1',
-          kind: '',
-          label: '',
-        });
-        manager.removeRelative(i1.key);
-        assert.isTrue(spy.calledOnce);
-        assert.equal(spy.args[0][0], i1.key, 'passes the key');
-        assert.isUndefined(spy.args[0][1], 'has no direction specified');
-      });
-
-      it('calls removeRelative() on the parent with the direction', () => {
-        const p1 = manager.addPanel();
-        const spy = sinon.spy(p1, 'removeRelative');
-        const i1 = p1.addItem({
-          key: 'i1',
-          kind: '',
-          label: '',
-        });
-        manager.removeRelative(i1.key, SplitCloseDirection.left);
-        assert.isTrue(spy.calledOnce);
-        assert.equal(spy.args[0][0], i1.key, 'passes the key');
-        assert.equal(spy.args[0][1], SplitCloseDirection.left, 'has the direction');
-      });
-
-      it('does nothing when item is not found', () => {
-        const p1 = manager.addPanel();
-        const spy = sinon.spy(p1, 'removeRelative');
-        manager.removeRelative('unknown', SplitCloseDirection.left);
-        assert.isFalse(spy.called);
-      });
-    });
+    // describe('removeRelative()', () => {
+    //   let manager: SplitLayout;
+
+    //   beforeEach(() => {
+    //     manager = new SplitLayout();
+    //   });
+
+    //   it('calls removeRelative() on the parent with defaults', () => {
+    //     const p1 = manager.addPanel();
+    //     const spy = sinon.spy(p1, 'removeRelative');
+    //     const i1 = p1.addItem({
+    //       key: 'i1',
+    //       kind: '',
+    //       label: '',
+    //     });
+    //     manager.removeRelative(i1.key);
+    //     assert.isTrue(spy.calledOnce);
+    //     assert.equal(spy.args[0][0], i1.key, 'passes the key');
+    //     assert.isUndefined(spy.args[0][1], 'has no direction specified');
+    //   });
+
+    //   it('calls removeRelative() on the parent with the direction', () => {
+    //     const p1 = manager.addPanel();
+    //     const spy = sinon.spy(p1, 'removeRelative');
+    //     const i1 = p1.addItem({
+    //       key: 'i1',
+    //       kind: '',
+    //       label: '',
+    //     });
+    //     manager.removeRelative(i1.key, SplitCloseDirection.left);
+    //     assert.isTrue(spy.calledOnce);
+    //     assert.equal(spy.args[0][0], i1.key, 'passes the key');
+    //     assert.equal(spy.args[0][1], SplitCloseDirection.left, 'has the direction');
+    //   });
+
+    //   it('does nothing when item is not found', () => {
+    //     const p1 = manager.addPanel();
+    //     const spy = sinon.spy(p1, 'removeRelative');
+    //     manager.removeRelative('unknown', SplitCloseDirection.left);
+    //     assert.isFalse(spy.called);
+    //   });
+    // });
 
     describe('moveItem()', () => {
       let manager: SplitLayout;
@@ -788,7 +789,7 @@ describe('layout', () => {
           kind: '',
           label: '',
         });
-        manager.moveItem(p1.key, p1.key, i1.key, 1);
+        manager.moveItem(p1.key, p1.key, i1.key, { index: 1 });
         assert.equal(i1.index, 1, 'the #1 has changed index');
         assert.equal(i2.index, 0, 'the #2 has changed index');
         assert.equal(i3.index, 2, 'the #3 has unchanged index');
@@ -812,7 +813,7 @@ describe('layout', () => {
           kind: '',
           label: '',
         });
-        manager.moveItem(p1.key, p2.key, i1.key, 0);
+        manager.moveItem(p1.key, p2.key, i1.key, { index: 0 });
         const readI1 = manager.findItem(i1.key)!;
         assert.ok(readI1, 'the manager has the moved item');
         assert.isFalse(p1.hasItem(i1.key), 'item was removed from the from parent');
@@ -830,7 +831,7 @@ describe('layout', () => {
           label: '',
         });
         assert.throws(() => {
-          manager.moveItem('unknown', p1.key, i1.key, 0);
+          manager.moveItem('unknown', p1.key, i1.key, { index: 0 });
         }, 'Source layout panel not found.');
       });
 
@@ -842,7 +843,7 @@ describe('layout', () => {
           label: '',
         });
         assert.throws(() => {
-          manager.moveItem(p1.key, 'unknown', i1.key, 0);
+          manager.moveItem(p1.key, 'unknown', i1.key, { index: 0 });
         }, 'Target layout panel not found.');
       });
 

package/test/elements/layout/SplitPanel.test.ts

@@ -1,7 +1,7 @@
 import { assert } from '@open-wc/testing';
 import sinon from 'sinon';
 import { SplitItem } from '../../../src/elements/layout/SplitItem';
-import { SplitLayout } from "../../../src/elements/layout/SplitLayout.js";
+import { ITabCloseDetail, SplitLayout } from "../../../src/elements/layout/SplitLayout.js";
 import { SplitPanel } from '../../../src/elements/layout/SplitPanel.js';
 import { IPanelObject, LayoutType, PanelState, SplitCloseDirection, SplitDirection, SplitRegion } from '../../../src/elements/layout/type.js';
 
@@ -822,8 +822,9 @@ describe('layout', () => {
         manager.addEventListener('closetab', spy);
         panel.removeItem(i1.key);
         assert.isTrue(spy.calledOnce, 'removes the item');
-        const event = spy.args[0][0] as CustomEvent<string>;
-        assert.equal(event.detail, i1.key, 'has the tab key');
+        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
+        assert.equal(event.detail.tab, i1.key, 'has the tab key');
+        assert.equal(event.detail.panel, panel.key, 'has the panel key');
       });
 
       it('notifies tab removed when the panel has more items', () => {
@@ -842,8 +843,9 @@ describe('layout', () => {
         manager.addEventListener('closetab', spy);
         p1.removeItem(i1.key);
         assert.isTrue(spy.calledOnce, 'removes the item');
-        const event = spy.args[0][0] as CustomEvent<string>;
-        assert.equal(event.detail, i1.key, 'has the tab key');
+        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
+        assert.equal(event.detail.tab, i1.key, 'has the tab key');
+        assert.equal(event.detail.panel, p1.key, 'has the panel key');
       });
 
       it('notifies tab removed when removing the panel', () => {
@@ -857,8 +859,9 @@ describe('layout', () => {
         manager.addEventListener('closetab', spy);
         p1.removeItem(i1.key);
         assert.isTrue(spy.calledOnce, 'removes the item');
-        const event = spy.args[0][0] as CustomEvent<string>;
-        assert.equal(event.detail, i1.key, 'has the tab key');
+        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
+        assert.equal(event.detail.tab, i1.key, 'has the tab key');
+        assert.equal(event.detail.panel, p1.key, 'has the panel key');
       });
 
       it('moves the selection to the next item', () => {