@vaadin/component-base 24.0.0-alpha2 → 24.0.0-alpha4

package/index.d.ts

@@ -8,5 +8,4 @@ export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -7,5 +7,4 @@ export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
+  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
 }

package/src/dir-mixin.d.ts

@@ -11,6 +11,8 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 
 export declare class DirMixinClass {
+  protected readonly __isRTL: boolean;
+
   protected __getNormalizedScrollLeft(element: Element | null): number;
 
   protected __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;

package/src/dir-mixin.js

@@ -112,6 +112,14 @@ export const DirMixin = (superClass) =>
       this.__unsubscribe();
     }
 
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
     /** @protected */
     _valueToNodeAttribute(node, value, attribute) {
       // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property

package/src/element-mixin.js

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha2';
+      return '24.0.0-alpha4';
     }
 
     /** @protected */

package/src/slot-controller.d.ts

@@ -16,8 +16,16 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   node: HTMLElement;
 
+  /**
+   * The list of slotted nodes managed by the controller.
+   * Only used when `multiple` property is set to `true`.
+   */
+  nodes: HTMLElement[];
+
   protected initialized: boolean;
 
+  protected multiple: boolean;
+
   protected defaultNode: Node;
 
   protected defaultId: string;
@@ -25,13 +33,22 @@ export class SlotController extends EventTarget implements ReactiveController {
   constructor(
     host: HTMLElement,
     slotName: string,
-    slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
-    useUniqueId?: boolean,
+    tagName?: string,
+    config?: {
+      multiple?: boolean;
+      observe?: boolean;
+      useUniqueId?: boolean;
+      initializer?(host: HTMLElement, node: HTMLElement): void;
+    },
   );
 
   hostConnected(): void;
 
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   */
+  getSlotChildren(): Node[];
+
   /**
    * Return a reference to the node managed by the controller.
    */
@@ -39,6 +56,8 @@ export class SlotController extends EventTarget implements ReactiveController {
 
   protected attachDefaultNode(): Node | undefined;
 
+  protected initAddedNode(node: Node): void;
+
   protected initNode(node: Node): void;
 
   /**
@@ -54,5 +73,5 @@ export class SlotController extends EventTarget implements ReactiveController {
   /**
    * Setup the observer to manage slot content changes.
    */
-  protected observe(): void;
+  protected observeSlot(): void;
 }

package/src/slot-controller.js

@@ -23,13 +23,21 @@ export class SlotController extends EventTarget {
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
+  constructor(host, slotName, tagName, config = {}) {
     super();
 
+    const { initializer, multiple, observe, useUniqueId } = config;
+
     this.host = host;
     this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
@@ -39,38 +47,63 @@ export class SlotController extends EventTarget {
 
   hostConnected() {
     if (!this.initialized) {
-      let node = this.getSlotChild();
-
-      if (!node) {
-        node = this.attachDefaultNode();
+      if (this.multiple) {
+        this.initMultiple();
       } else {
-        this.node = node;
-        this.initCustomNode(node);
+        this.initSingle();
       }
 
-      this.initNode(node);
-
-      // TODO: Consider making this behavior opt-in to improve performance.
-      this.observe();
+      if (this.observe) {
+        this.observeSlot();
+      }
 
       this.initialized = true;
     }
   }
 
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
+
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
+
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
+
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      this.nodes = [defaultNode];
+      this.initNode(defaultNode);
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
+    }
+  }
+
   /**
    * Create and attach default node using the slot factory.
    * @return {Node | undefined}
    * @protected
    */
   attachDefaultNode() {
-    const { host, slotName, slotFactory } = this;
+    const { host, slotName, tagName } = this;
 
     // Check if the node was created previously and if so, reuse it.
     let node = this.defaultNode;
 
     // Slot factory is optional, some slots don't have default content.
-    if (!node && slotFactory) {
-      node = slotFactory(host);
+    if (!node && tagName) {
+      node = document.createElement(tagName);
       if (node instanceof Element) {
         if (slotName !== '') {
           node.setAttribute('slot', slotName);
@@ -88,12 +121,12 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Return a reference to the node managed by the controller.
+   * Return the list of nodes matching the slot managed by the controller.
    * @return {Node}
    */
-  getSlotChild() {
+  getSlotChildren() {
     const { slotName } = this;
-    return Array.from(this.host.childNodes).find((node) => {
+    return Array.from(this.host.childNodes).filter((node) => {
       // Either an element (any slot) or a text node (only un-named slot).
       return (
         (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -102,6 +135,14 @@ export class SlotController extends EventTarget {
     });
   }
 
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
+
   /**
    * @param {Node} node
    * @protected
@@ -111,7 +152,7 @@ export class SlotController extends EventTarget {
     // Don't try to bind `this` to initializer (normally it's arrow function).
     // Instead, pass the host as a first argument to access component's state.
     if (slotInitializer) {
-      slotInitializer(this.host, node);
+      slotInitializer(node, this.host);
     }
   }
 
@@ -131,19 +172,26 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
+  /** @protected */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
+    }
+  }
+
   /**
    * Setup the observer to manage slot content changes.
    * @protected
    */
-  observe() {
+  observeSlot() {
     const { slotName } = this;
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);
 
     this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
-      // TODO: support default slot with multiple nodes (e.g. confirm-dialog)
-      const current = this.node;
-      const newNode = info.addedNodes.find((node) => node !== current);
+      const current = this.multiple ? this.nodes : [this.node];
+      const newNodes = info.addedNodes.filter((node) => !current.includes(node));
 
       if (info.removedNodes.length) {
         info.removedNodes.forEach((node) => {
@@ -151,18 +199,22 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNode) {
+      if (newNodes && newNodes.length > 0) {
         // Custom node is added, remove the current one.
-        if (current && current.isConnected) {
-          this.host.removeChild(current);
-        }
-
-        this.node = newNode;
-
-        if (newNode !== this.defaultNode) {
-          this.initCustomNode(newNode);
+        current.forEach((node) => {
+          if (node && node.isConnected) {
+            node.parentNode.removeChild(node);
+          }
+        });
 
-          this.initNode(newNode);
+        if (this.multiple) {
+          this.nodes = newNodes;
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
         }
       }
     });

package/src/slot-mixin.d.ts

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
-
-export declare class SlotMixinClass {
-  /**
-   * List of named slots to initialize.
-   */
-  protected readonly slots: Record<string, () => HTMLElement>;
-}

package/src/slot-mixin.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-/**
- * A mixin to provide content for named slots defined by component.
- *
- * @polymerMixin
- */
-export const SlotMixin = dedupingMixin(
-  (superclass) =>
-    class SlotMixinClass extends superclass {
-      /**
-       * List of named slots to initialize.
-       * @protected
-       */
-      get slots() {
-        return {};
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-        this._connectSlotMixin();
-      }
-
-      /** @private */
-      _connectSlotMixin() {
-        Object.keys(this.slots).forEach((slotName) => {
-          // Ignore labels of nested components, if any
-          const hasContent = this._getDirectSlotChild(slotName) !== undefined;
-
-          if (!hasContent) {
-            const slotFactory = this.slots[slotName];
-            const slotContent = slotFactory();
-            if (slotContent instanceof Element) {
-              if (slotName !== '') {
-                slotContent.setAttribute('slot', slotName);
-              }
-              this.appendChild(slotContent);
-            }
-          }
-        });
-      }
-
-      /** @protected */
-      _getDirectSlotChild(slotName) {
-        return Array.from(this.childNodes).find((node) => {
-          // Either an element (any slot) or a text node (only un-named slot).
-          return (
-            (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
-            (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
-          );
-        });
-      }
-    },
-);