@vaadin/component-base 25.3.0-alpha10 → 25.3.0-alpha12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +2 -1
  2. package/package.json +5 -4
  3. package/src/define.js +1 -1
  4. package/src/dir-mixin.d.ts +14 -0
  5. package/src/dir-mixin.js +10 -0
  6. package/src/dom-utils.d.ts +7 -0
  7. package/src/dom-utils.js +19 -0
  8. package/src/slot-child-observe-controller.js +2 -19
package/custom-elements.json CHANGED
@@ -50,7 +50,8 @@
50
50
  {
51
51
  "name": "superClass"
52
52
  }
53
- ]
53
+ ],
54
+ "deprecated": "This mixin is deprecated and will be removed in Vaadin 26,\nafter which components will no longer set the `dir` attribute on themselves.\nUse the `:dir(rtl)` CSS selector to style components in right-to-left mode,\nand `element.matches(':dir(rtl)')` to detect it in JavaScript."
54
55
  }
55
56
  ],
56
57
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/component-base",
3
- "version": "25.3.0-alpha10",
3
+ "version": "25.3.0-alpha12",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -38,11 +38,12 @@
38
38
  "lit": "^3.0.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@vaadin/chai-plugins": "25.3.0-alpha10",
42
- "@vaadin/test-runner-commands": "25.3.0-alpha10",
41
+ "@polymer/polymer": "^3.0.0",
42
+ "@vaadin/chai-plugins": "25.3.0-alpha12",
43
+ "@vaadin/test-runner-commands": "25.3.0-alpha12",
43
44
  "@vaadin/testing-helpers": "^2.0.0",
44
45
  "sinon": "^22.0.0"
45
46
  },
46
47
  "customElements": "custom-elements.json",
47
- "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
48
+ "gitHead": "0f0337783efe38332f5dc6a8968f207d2982de4b"
48
49
  }
package/src/define.js CHANGED
@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
13
13
 
14
14
  const experimentalMap = {};
15
15
 
16
- export function defineCustomElement(CustomElement, version = '25.3.0-alpha10') {
16
+ export function defineCustomElement(CustomElement, version = '25.3.0-alpha12') {
17
17
  Object.defineProperty(CustomElement, 'version', {
18
18
  get() {
19
19
  return version;
package/src/dir-mixin.d.ts CHANGED
@@ -7,9 +7,23 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
7
7
 
8
8
  /**
9
9
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
10
+ *
11
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
12
+ * after which components will no longer set the `dir` attribute on themselves.
13
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
14
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
10
15
  */
11
16
  export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
12
17
 
18
+ /**
19
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
20
+ * after which components will no longer set the `dir` attribute on themselves.
21
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
22
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
23
+ */
13
24
  export declare class DirMixinClass {
25
+ /**
26
+ * @deprecated Use `this.matches(':dir(rtl)')` instead.
27
+ */
14
28
  protected readonly __isRTL: boolean;
15
29
  }
package/src/dir-mixin.js CHANGED
@@ -33,6 +33,11 @@ directionObserver.observe(document.documentElement, { attributes: true, attribut
33
33
 
34
34
  /**
35
35
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
36
+ *
37
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
38
+ * after which components will no longer set the `dir` attribute on themselves.
39
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
40
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
36
41
  */
37
42
  export const DirMixin = (superClass) =>
38
43
  class VaadinDirMixin extends superClass {
@@ -60,6 +65,7 @@ export const DirMixin = (superClass) =>
60
65
  /**
61
66
  * @return {boolean}
62
67
  * @protected
68
+ * @deprecated Use `this.matches(':dir(rtl)')` instead.
63
69
  */
64
70
  get __isRTL() {
65
71
  return this.getAttribute('dir') === 'rtl';
@@ -106,6 +112,10 @@ export const DirMixin = (superClass) =>
106
112
  this.__unsubscribe();
107
113
  }
108
114
 
115
+ // The two overrides below are only invoked by Polymer's property reflection.
116
+ // Vaadin components no longer extend `PolymerElement`, but some add-ons still
117
+ // apply this mixin to `PolymerElement`, so the overrides are kept for them.
118
+
109
119
  /** @protected */
110
120
  _valueToNodeAttribute(node, value, attribute) {
111
121
  // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
package/src/dom-utils.d.ts CHANGED
@@ -62,3 +62,10 @@ export function removeValuesFromAttribute(element: HTMLElement, attr: string, va
62
62
  * Returns true if the given node is an empty text node, false otherwise.
63
63
  */
64
64
  export function isEmptyTextNode(node: Node): boolean;
65
+
66
+ /**
67
+ * Returns true if the given node has content of its own: an element with
68
+ * children, a defined custom element — which may render content in its
69
+ * shadow root — or a node with non-empty text.
70
+ */
71
+ export function hasNodeContent(node: Node | null | undefined): boolean;
package/src/dom-utils.js CHANGED
@@ -168,3 +168,22 @@ export function removeValuesFromAttribute(element, attr, valuesToRemove) {
168
168
  export function isEmptyTextNode(node) {
169
169
  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
170
170
  }
171
+
172
+ /**
173
+ * Returns true if the given node has content of its own: an element with
174
+ * children, a defined custom element — which may render content in its
175
+ * shadow root — or a node with non-empty text.
176
+ *
177
+ * @param {Node | null | undefined} node
178
+ * @return {boolean}
179
+ */
180
+ export function hasNodeContent(node) {
181
+ if (!node) {
182
+ return false;
183
+ }
184
+
185
+ return Boolean(
186
+ (node.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
187
+ node.textContent?.trim(),
188
+ );
189
+ }
package/src/slot-child-observe-controller.js CHANGED
@@ -3,6 +3,7 @@
3
3
  * Copyright (c) 2022 - 2026 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
+ import { hasNodeContent } from './dom-utils.js';
6
7
  import { SlotController } from './slot-controller.js';
7
8
 
8
9
  /**
@@ -130,24 +131,6 @@ export class SlotChildObserveController extends SlotController {
130
131
  });
131
132
  }
132
133
 
133
- /**
134
- * Returns true if a node is an HTML element with children,
135
- * or is a defined custom element, or has non-empty text.
136
- *
137
- * @param {Node} node
138
- * @return {boolean}
139
- */
140
- #hasContent(node) {
141
- if (!node) {
142
- return false;
143
- }
144
-
145
- return (
146
- (node.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
147
- (node.textContent && node.textContent.trim() !== '')
148
- );
149
- }
150
-
151
134
  /**
152
135
  * Fire an event to notify the controller host about node changes.
153
136
  *
@@ -157,7 +140,7 @@ export class SlotChildObserveController extends SlotController {
157
140
  _notifyChange(node) {
158
141
  this.dispatchEvent(
159
142
  new CustomEvent('slot-content-changed', {
160
- detail: { hasContent: this.#hasContent(node), node },
143
+ detail: { hasContent: hasNodeContent(node), node },
161
144
  }),
162
145
  );
163
146
  }