@api-client/ui 0.0.9 → 0.0.11

package/src/elements/schema-design/DataModelVisualizationElement.ts

@@ -106,6 +106,12 @@ export default class DataModelVisualizationElement extends ApiElement {
       .data-type {
         margin-left: auto;
       }
+
+      .property-key-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
       `,
     ];
   }
@@ -361,8 +367,19 @@ export default class DataModelVisualizationElement extends ApiElement {
       primary,
       index,
     };
+
+    const icons: TemplateResult[] = [];
+    if (primary) {
+      icons.push(html`<ui-icon icon="key" class="property-key-icon"></ui-icon>`);
+    } else if (index) {
+      icons.push(html`<ui-icon icon="search" class="property-key-icon"></ui-icon>`);
+    } else {
+      icons.push(html`<span class="property-key-icon"></span>`);
+    }
+
     return html`
     <li data-key="${key}" class="${classMap(classes)}">
+      ${icons}
       <span class="label">${info.renderLabel}</span>
       <span class="data-type">${type}</span>
     </li>
@@ -377,7 +394,7 @@ export default class DataModelVisualizationElement extends ApiElement {
     if (targets.length === 1) {
       return html`<viz-association 
         data-key="${key}" 
-        data-target="${targets[0]}"
+        data-target="${targets[0].key}"
         title="${info.renderLabel}"
         data-selectable
         data-marker-start="association"

package/src/pages/http-project/HttpClientCommands.ts

@@ -85,12 +85,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
     label: 'Close',
     icon: close,
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeItem(key);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeItem(key);
     }
   },
   {
@@ -105,12 +109,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.both);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.both);
     },
   },
   {
@@ -124,12 +132,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.right);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.right);
     },
   },
   {
@@ -143,12 +155,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.left);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.left);
     },
   },
 

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', () => {

package/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/**/*.ts",
+    "demo/**/*.ts",
+    "test/**/*.ts"
+  ],
+}

package/web-test-runner.config.mjs

@@ -11,7 +11,10 @@ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
-  files: ["test/**/**/*.test.ts"],
+  files: [
+    "test/**/**/*.test.ts"
+    // "test/elements/layout/*.test.ts",
+  ],
 
   /** Resolve bare module imports */
   nodeResolve: {

package/dist/define/layout/layout-panel.d.ts

@@ -1,7 +0,0 @@
-import Element from "../../elements/layout/LayoutPanelElement.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        'layout-panel': Element;
-    }
-}
-//# sourceMappingURL=layout-panel.d.ts.map

package/dist/define/layout/layout-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-panel.d.ts","sourceRoot":"","sources":["../../../src/define/layout/layout-panel.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,6CAA6C,CAAC;AAIlE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,OAAO,CAAC;KACzB;CACF"}

package/dist/define/layout/layout-panel.js

@@ -1,3 +0,0 @@
-import Element from "../../elements/layout/LayoutPanelElement.js";
-window.customElements.define('layout-panel', Element);
-//# sourceMappingURL=layout-panel.js.map

package/dist/define/layout/layout-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-panel.js","sourceRoot":"","sources":["../../../src/define/layout/layout-panel.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,6CAA6C,CAAC;AAElE,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC","sourcesContent":["import Element from \"../../elements/layout/LayoutPanelElement.js\";\n\nwindow.customElements.define('layout-panel', Element);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'layout-panel': Element;\n  }\n}\n"]}