@lion/ui 0.0.3 → 0.0.5

package/components/core/test/SlotMixin.test.js

@@ -4,6 +4,10 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 
+/**
+ * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
+ */
+
 const mockedRenderTarget = document.createElement('div');
 function mockScopedRegistry() {
   const outputObj = { createElementCallCount: 0 };
@@ -26,7 +30,7 @@ function unMockScopedRegistry() {
 }
 
 describe('SlotMixin', () => {
-  it('inserts provided element into lightdom and sets slot', async () => {
+  it('inserts provided element into light dom and sets slot', async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -41,7 +45,7 @@ describe('SlotMixin', () => {
     expect(el.children[0].slot).to.equal('feedback');
   });
 
-  it("supports unnamed slot with ''", async () => {
+  it("supports default slot with ''", async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -57,7 +61,7 @@ describe('SlotMixin', () => {
     expect(el.children[0]).dom.to.equal('<div></div>');
   });
 
-  it('supports unnamed slot in conjunction with named slots', async () => {
+  it('supports default slot in conjunction with named slots', async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -111,63 +115,6 @@ describe('SlotMixin', () => {
     expect(slot.innerText).to.equal('');
   });
 
-  it('supports complex dom trees as element', async () => {
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        constructor() {
-          super();
-          this.foo = 'bar';
-        }
-
-        get slots() {
-          return {
-            ...super.slots,
-            feedback: () => {
-              const el = document.createElement('div');
-              el.setAttribute('foo', this.foo);
-              const subEl = document.createElement('p');
-              subEl.innerText = 'cat';
-              el.appendChild(subEl);
-              return el;
-            },
-          };
-        }
-      },
-    );
-    const el = await fixture(`<${tag}></${tag}>`);
-    expect(el.children[0].slot).to.equal('feedback');
-    expect(el.children[0].getAttribute('foo')).to.equal('bar');
-    expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
-      'cat',
-    );
-  });
-
-  it('supports conditional slots', async () => {
-    let renderSlot = true;
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        get slots() {
-          return {
-            ...super.slots,
-            conditional: () => {
-              if (renderSlot) {
-                const el = document.createElement('div');
-                el.id = 'someSlot';
-                return el;
-              }
-              return undefined;
-            },
-          };
-        }
-      },
-    );
-    const elSlot = await fixture(`<${tag}><${tag}>`);
-    expect(elSlot.querySelector('#someSlot')).to.exist;
-    renderSlot = false;
-    const elNoSlot = await fixture(`<${tag}><${tag}>`);
-    expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
-  });
-
   it("allows to check which slots have been created via this._isPrivateSlot('slotname')", async () => {
     let renderSlot = true;
     class SlotPrivateText extends SlotMixin(LitElement) {
@@ -195,102 +142,358 @@ describe('SlotMixin', () => {
     expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
   });
 
-  it('supports templates', async () => {
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<span>text</span>`,
-          };
-        }
+  describe('Rerender', () => {
+    it('supports rerender when SlotRerenderObject provided', async () => {
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
-    const el = await fixture(`<${tag}></${tag}>`);
-    const slot = /** @type HTMLSpanElement */ (
-      Array.from(el.children).find(elm => elm.slot === 'template')
-    );
-    expect(slot.slot).to.equal('template');
-    expect(slot.tagName).to.equal('SPAN');
-  });
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
 
-  it('supports scoped elements when polyfill loaded', async () => {
-    const outputObj = mockScopedRegistry();
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => ({ template: html`<span>${this.currentValue}</span> ` }),
+            };
+          }
 
-    class ScopedEl extends LitElement {}
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
 
-    const tagName = defineCE(
-      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-        static get scopedElements() {
-          return {
+          get _templateNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'template')
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+      await el.updateComplete;
+
+      expect(el._templateNode.slot).to.equal('template');
+      expect(el._templateNode.textContent?.trim()).to.equal('0');
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(el._templateNode.textContent?.trim()).to.equal('1');
+    });
+
+    it('keeps focus after rerender', async () => {
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
+
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'focusable-node': () => ({
+                template: html`<input /> `,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="focusable-node"></slot>`;
+          }
+
+          get _focusableNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'focusable-node')
+                ?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+
+      el._focusableNode.focus();
+      expect(document.activeElement).to.equal(el._focusableNode);
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(document.activeElement).to.equal(el._focusableNode);
+    });
+
+    it('keeps focus after rerendering complex shadow root into slot', async () => {
+      const complexSlotTagName = defineCE(
+        class extends LitElement {
+          render() {
+            return html`
+              <input />
+              <button>I will be focused</button>
+            `;
+          }
+
+          get _buttonNode() {
             // @ts-expect-error
-            ...super.scopedElements,
-            'scoped-el': ScopedEl,
-          };
-        }
+            return this.shadowRoot.querySelector('button');
+          }
+        },
+      );
 
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<scoped-el></scoped-el>`,
-          };
-        }
+      const complexSlotTag = unsafeStatic(complexSlotTagName);
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
+      const tagName = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
 
-    const tag = unsafeStatic(tagName);
-    await fixture(html`<${tag}></${tag}>`);
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
 
-    expect(outputObj.createElementCallCount).to.equal(1);
+          get slots() {
+            return {
+              ...super.slots,
+              'focusable-node': () => ({
+                template: html`<${complexSlotTag}> </${complexSlotTag}> `,
+              }),
+            };
+          }
 
-    unMockScopedRegistry();
+          render() {
+            return html`<slot name="focusable-node"></slot>`;
+          }
+
+          get _focusableNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'focusable-node')
+                ?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tagName}></${tagName}>`));
+
+      el._focusableNode._buttonNode.focus();
+
+      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+    });
   });
 
-  it('does not scope elements when polyfill not loaded', async () => {
-    class ScopedEl extends LitElement {}
+  describe('SlotFunctionResult types', () => {
+    it('supports complex dom trees as element (type "Element")', async () => {
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          constructor() {
+            super();
+            this.foo = 'bar';
+          }
 
-    const tagName = defineCE(
-      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-        static get scopedElements() {
-          return {
-            // @ts-expect-error
-            ...super.scopedElements,
-            'scoped-el': ScopedEl,
-          };
-        }
+          get slots() {
+            return {
+              ...super.slots,
+              feedback: () => {
+                const el = document.createElement('div');
+                el.setAttribute('foo', this.foo);
+                const subEl = document.createElement('p');
+                subEl.innerText = 'cat';
+                el.appendChild(subEl);
+                return el;
+              },
+            };
+          }
+        },
+      );
+      const el = await fixture(`<${tag}></${tag}>`);
+      expect(el.children[0].slot).to.equal('feedback');
+      expect(el.children[0].getAttribute('foo')).to.equal('bar');
+      expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
+        'cat',
+      );
+    });
 
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<scoped-el></scoped-el>`,
-          };
-        }
+    it('supports conditional slots (type "undefined")', async () => {
+      let renderSlot = true;
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          get slots() {
+            return {
+              ...super.slots,
+              conditional: () => {
+                if (renderSlot) {
+                  const el = document.createElement('div');
+                  el.id = 'someSlot';
+                  return el;
+                }
+                return undefined;
+              },
+            };
+          }
+        },
+      );
+      const elSlot = await fixture(`<${tag}><${tag}>`);
+      expect(elSlot.querySelector('#someSlot')).to.exist;
+      renderSlot = false;
+      const elNoSlot = await fixture(`<${tag}><${tag}>`);
+      expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
+    });
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
+    it('supports templates (type "TemplateResult")', async () => {
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<span>text</span>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
+      const el = await fixture(`<${tag}></${tag}>`);
+      const slot = /** @type HTMLSpanElement */ (
+        Array.from(el.children).find(elm => elm.slot === 'template')
+      );
+      expect(slot.slot).to.equal('template');
+      expect(slot.tagName).to.equal('SPAN');
+    });
+
+    it('supports afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
+      let varThatProvesAfterRenderIsCalled = 'not called';
+
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
+
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => ({
+                template: html`<span>${this.currentValue}</span>, `,
+                afterRender: () => {
+                  varThatProvesAfterRenderIsCalled = 'called';
+                },
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+
+          get _templateNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'template')?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+      expect(el._templateNode.textContent).to.equal('0');
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(varThatProvesAfterRenderIsCalled).to.equal('called');
+      expect(el._templateNode.textContent).to.equal('1');
+    });
+  });
+
+  describe('Scoped Registries', () => {
+    it('supports scoped elements when polyfill loaded', async () => {
+      const outputObj = mockScopedRegistry();
+
+      class ScopedEl extends LitElement {}
+
+      const tagName = defineCE(
+        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+          static get scopedElements() {
+            return {
+              // @ts-expect-error
+              ...super.scopedElements,
+              'scoped-elm': ScopedEl,
+            };
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<scoped-elm></scoped-elm>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
+
+      const tag = unsafeStatic(tagName);
+      await fixture(html`<${tag}></${tag}>`);
+
+      expect(outputObj.createElementCallCount).to.equal(1);
+
+      unMockScopedRegistry();
+    });
+
+    it('does not scope elements when polyfill not loaded', async () => {
+      class ScopedEl extends LitElement {}
+
+      const tagName = defineCE(
+        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+          static get scopedElements() {
+            return {
+              // @ts-expect-error
+              ...super.scopedElements,
+              'scoped-el': ScopedEl,
+            };
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<scoped-el></scoped-el>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
 
-    const renderTarget = document.createElement('div');
-    const el = document.createElement(tagName);
+      const renderTarget = document.createElement('div');
+      const el = document.createElement(tagName);
 
-    // We don't use fixture, so we limit the amount of calls to document.createElement
-    const docSpy = sinon.spy(document, 'createElement');
-    document.body.appendChild(renderTarget);
-    renderTarget.appendChild(el);
+      // We don't use fixture, so we limit the amount of calls to document.createElement
+      const docSpy = sinon.spy(document, 'createElement');
+      document.body.appendChild(renderTarget);
+      renderTarget.appendChild(el);
 
-    expect(docSpy.callCount).to.equal(2);
+      expect(docSpy.callCount).to.equal(2);
 
-    document.body.removeChild(renderTarget);
-    docSpy.restore();
+      document.body.removeChild(renderTarget);
+      docSpy.restore();
+    });
   });
 });

package/components/core/types/SlotMixinTypes.ts

@@ -1,7 +1,18 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { TemplateResult, LitElement } from 'lit';
 
-declare function slotFunction(): HTMLElement | Node[] | TemplateResult | undefined;
+/**
+ * Implicitly creates a wrapper node that allows for rerenders
+ */
+export type SlotRerenderObject = {
+  template: TemplateResult;
+  /* Add logic that will be performed after the render */
+  afterRender?: Function;
+};
+
+export type SlotFunctionResult = TemplateResult | Element | SlotRerenderObject | undefined;
+
+declare function slotFunction(): SlotFunctionResult;
 
 export type SlotsMap = {
   [key: string]: typeof slotFunction;
@@ -49,7 +60,7 @@ export declare class SlotHost {
  *   };
  * }
  */
-export declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
+declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &
   Constructor<SlotHost> &

package/components/form-core/src/FormatMixin.js

@@ -70,19 +70,21 @@ const FormatMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {any} oldVal
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldVal) {
-      super.requestUpdate(name, oldVal);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
 
-      if (name === 'modelValue' && this.modelValue !== oldVal) {
-        this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldVal });
+      if (name === 'modelValue' && this.modelValue !== oldValue) {
+        this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldValue });
       }
-      if (name === 'serializedValue' && this.serializedValue !== oldVal) {
+      if (name === 'serializedValue' && this.serializedValue !== oldValue) {
         this._calculateValues({ source: 'serialized' });
       }
-      if (name === 'formattedValue' && this.formattedValue !== oldVal) {
+      if (name === 'formattedValue' && this.formattedValue !== oldValue) {
         this._calculateValues({ source: 'formatted' });
       }
     }

package/components/form-core/src/InteractionStateMixin.js

@@ -33,12 +33,14 @@ const InteractionStateMixinImplementation = superclass =>
     }
 
     /**
-     * @param {PropertyKey} name
-     * @param {*} oldVal
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldVal) {
-      super.requestUpdate(name, oldVal);
-      if (name === 'touched' && this.touched !== oldVal) {
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      if (name === 'touched' && this.touched !== oldValue) {
         this._onTouchedChanged();
       }
 
@@ -48,7 +50,7 @@ const InteractionStateMixinImplementation = superclass =>
         this.filled = !this._isEmpty();
       }
 
-      if (name === 'dirty' && this.dirty !== oldVal) {
+      if (name === 'dirty' && this.dirty !== oldValue) {
         this._onDirtyChanged();
       }
     }

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -52,11 +52,13 @@ const ChoiceInputMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {any} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
 
       if (name === 'modelValue') {
         if (this.modelValue.checked !== this.checked) {

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -93,11 +93,16 @@ const SyncUpdatableMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {*} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      if (name === undefined) {
+        return;
+      }
 
       this.__SyncUpdatableNamespace = this.__SyncUpdatableNamespace || {};
       const ns = this.__SyncUpdatableNamespace;

package/components/form-core/test/utils/SyncUpdatableMixin.test.js

@@ -147,11 +147,13 @@ describe('SyncUpdatableMixin', () => {
         }
 
         /**
-         * @param {string} name
-         * @param {*} oldValue
+         * @param {string} [name]
+         * @param {unknown} [oldValue]
+         * @param {import('lit').PropertyDeclaration} [options]
+         * @returns {void}
          */
-        requestUpdate(name, oldValue) {
-          super.requestUpdate(name, oldValue);
+        requestUpdate(name, oldValue, options) {
+          super.requestUpdate(name, oldValue, options);
           if (name === 'prop') {
             propChangedCount += 1;
           }