@vaadin/form-layout 24.4.0-dev.223e39f050 → 24.4.0-dev.4b20a0c55.3

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 (6) hide show
  1. package/README.md +0 -1
  2. package/package.json +8 -8
  3. package/src/vaadin-form-item.d.ts +1 -1
  4. package/src/vaadin-form-item.js +1 -1
  5. package/src/vaadin-form-layout.d.ts +2 -2
  6. package/src/vaadin-form-layout.js +7 -4
package/README.md CHANGED
@@ -5,7 +5,6 @@ A web component for building responsive forms with multiple columns.
5
5
  [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/form-layout)
6
6
 
7
7
  [![npm version](https://badgen.net/npm/v/@vaadin/form-layout)](https://www.npmjs.com/package/@vaadin/form-layout)
8
- [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
9
8
 
10
9
  ```html
11
10
  <vaadin-form-layout>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/form-layout",
3
- "version": "24.4.0-dev.223e39f050",
3
+ "version": "24.4.0-dev.4b20a0c55.3",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,21 +36,21 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "24.4.0-dev.223e39f050",
40
- "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
41
- "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
42
- "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050"
39
+ "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
40
+ "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
41
+ "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
42
+ "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@esm-bundle/chai": "^4.3.4",
46
- "@vaadin/custom-field": "24.4.0-dev.223e39f050",
46
+ "@vaadin/custom-field": "24.4.0-dev.4b20a0c55.3",
47
47
  "@vaadin/testing-helpers": "^0.6.0",
48
- "@vaadin/text-field": "24.4.0-dev.223e39f050",
48
+ "@vaadin/text-field": "24.4.0-dev.4b20a0c55.3",
49
49
  "sinon": "^13.0.2"
50
50
  },
51
51
  "web-types": [
52
52
  "web-types.json",
53
53
  "web-types.lit.json"
54
54
  ],
55
- "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
55
+ "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
56
56
  }
package/src/vaadin-form-item.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
package/src/vaadin-form-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
package/src/vaadin-form-layout.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -50,7 +50,7 @@ export type FormLayoutResponsiveStep = {
50
50
  *
51
51
  * ### Spanning Items on Multiple Columns
52
52
  *
53
- * You can use `colspan` attribute on the items.
53
+ * You can use `colspan` or `data-colspan` attribute on the items.
54
54
  * In the example below, the first text field spans on two columns:
55
55
  *
56
56
  * ```html
package/src/vaadin-form-layout.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -44,7 +44,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
44
44
  *
45
45
  * ### Spanning Items on Multiple Columns
46
46
  *
47
- * You can use `colspan` attribute on the items.
47
+ * You can use `colspan` or `data-colspan` attribute on the items.
48
48
  * In the example below, the first text field spans on two columns:
49
49
  *
50
50
  * ```html
@@ -290,7 +290,9 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
290
290
  mutationRecord.forEach((mutation) => {
291
291
  if (
292
292
  mutation.type === 'attributes' &&
293
- (mutation.attributeName === 'colspan' || mutation.attributeName === 'hidden')
293
+ (mutation.attributeName === 'colspan' ||
294
+ mutation.attributeName === 'data-colspan' ||
295
+ mutation.attributeName === 'hidden')
294
296
  ) {
295
297
  this._updateLayout();
296
298
  }
@@ -482,8 +484,9 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
482
484
  return;
483
485
  }
484
486
 
487
+ const attrColspan = child.getAttribute('colspan') || child.getAttribute('data-colspan');
485
488
  let colspan;
486
- colspan = this._naturalNumberOrOne(parseFloat(child.getAttribute('colspan')));
489
+ colspan = this._naturalNumberOrOne(parseFloat(attrColspan));
487
490
 
488
491
  // Never span further than the number of columns
489
492
  colspan = Math.min(colspan, this._columnCount);