@zywave/zui-formfield 4.1.0-pre.0 → 4.1.1-pre.0
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.
- package/CHANGELOG.md +4 -0
- package/dist/zui-formfield.js +3 -5
- package/dist/zui-formfield.js.map +1 -1
- package/docs/demo.html +31 -8
- package/lab.html +6 -6
- package/package.json +2 -2
- package/src/zui-formfield.ts +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.1.0](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.1.0-pre.0...@zywave/zui-formfield@4.1.0) (2023-10-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zywave/zui-formfield
|
|
9
|
+
|
|
6
10
|
## [4.0.31](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.31-pre.0...@zywave/zui-formfield@4.0.31) (2023-07-07)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @zywave/zui-formfield
|
package/dist/zui-formfield.js
CHANGED
|
@@ -51,11 +51,9 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
51
51
|
_ZuiFormField_instances = new WeakSet(), _ZuiFormField_control_get = function _ZuiFormField_control_get() {
|
|
52
52
|
return findAssignedElement(this._slotEl, this.controlSelector);
|
|
53
53
|
}, _ZuiFormField_onLabelClick = function _ZuiFormField_onLabelClick() {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
control.click();
|
|
58
|
-
}
|
|
54
|
+
var _a, _b;
|
|
55
|
+
(_a = __classPrivateFieldGet(this, _ZuiFormField_instances, "a", _ZuiFormField_control_get)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
56
|
+
(_b = __classPrivateFieldGet(this, _ZuiFormField_instances, "a", _ZuiFormField_control_get)) === null || _b === void 0 ? void 0 : _b.click();
|
|
59
57
|
};
|
|
60
58
|
__decorate([
|
|
61
59
|
property({ type: String })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;IA0BxB,CAAC;IAjBC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,uBAAA,IAAI,2DAAc,kBAAkB,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO;;;KAG5G,CAAC;IACJ,CAAC;CAMF;;IApBG,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACjE,CAAC;;IAgBC,MAAA,uBAAA,IAAI,0DAAS,0CAAE,KAAK,EAAE,CAAC;IACvB,MAAA,uBAAA,IAAI,0DAAS,0CAAE,KAAK,EAAE,CAAC;AACzB,CAAC;AA/BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACC;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDACpC;AAGtB;IADC,KAAK,CAAC,MAAM,CAAC;6CACW;AAyB3B,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\n\n/**\n * `<zui-formfield>` provides a standardized way of labeling and styling form controls.\n *\n * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n *\n * @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n */\n @property({ type: String })\n label: string | null = null;\n\n /**\n * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n */\n @property({ type: String, attribute: 'control-selector' })\n controlSelector = '*';\n\n @query('slot')\n _slotEl: HTMLSlotElement;\n\n get #control() {\n return findAssignedElement(this._slotEl, this.controlSelector);\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.label ? html` <label @click=\"${this.#onLabelClick}\" part=\"label\">${this.label}</label> ` : nothing}\n <slot></slot>\n </div>\n `;\n }\n\n #onLabelClick() {\n this.#control?.focus();\n this.#control?.click();\n }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-formfield': ZuiFormField;\n }\n}\n"]}
|
package/docs/demo.html
CHANGED
|
@@ -17,6 +17,29 @@
|
|
|
17
17
|
</zui-formfield>
|
|
18
18
|
</section>
|
|
19
19
|
|
|
20
|
+
<section component="zui-formfield" heading="Specify control selector">
|
|
21
|
+
<zui-formfield class="zui-formfield-demo-control-selector" label="North America phone number" control-selector="zui-input[name=areaCode]">
|
|
22
|
+
<zui-input name="countryCode" value="+1" class="xsmall"></zui-input>
|
|
23
|
+
-
|
|
24
|
+
<zui-input name="areaCode" placeholder="000" class="xsmall"></zui-input>
|
|
25
|
+
-
|
|
26
|
+
<zui-input name="prefix" placeholder="000" class="xsmall"></zui-input>
|
|
27
|
+
-
|
|
28
|
+
<zui-input name="subscriber" placeholder="0000" class="xsmall"></zui-input>
|
|
29
|
+
</zui-formfield>
|
|
30
|
+
<style>
|
|
31
|
+
.zui-formfield-demo-control-selector::part(container) {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: row;
|
|
34
|
+
align-items: center;
|
|
35
|
+
flex-wrap: wrap;
|
|
36
|
+
}
|
|
37
|
+
.zui-formfield-demo-control-selector::part(label) {
|
|
38
|
+
flex-basis: 100%;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
20
43
|
<section component="zui-formfield" heading="Formfield with native select">
|
|
21
44
|
<zui-formfield label="Vanilla select">
|
|
22
45
|
<select name="vanilla-select">
|
|
@@ -26,30 +49,30 @@
|
|
|
26
49
|
</zui-formfield>
|
|
27
50
|
</section>
|
|
28
51
|
|
|
29
|
-
<section component="zui-formfield" heading="Styling the label with CSS
|
|
52
|
+
<section component="zui-formfield" heading="Styling the label with a CSS shadow part">
|
|
30
53
|
<style>
|
|
31
|
-
.
|
|
54
|
+
.zui-formfield-demo-label::part(label) {
|
|
32
55
|
background-color: hotpink;
|
|
33
56
|
}
|
|
34
57
|
</style>
|
|
35
58
|
<div style="display: flex; flex-direction: column">
|
|
36
|
-
<zui-formfield class="
|
|
59
|
+
<zui-formfield class="zui-formfield-demo-label" label="Label part styling">
|
|
37
60
|
<zui-input name="vanilla-input" value="pink!"></zui-input>
|
|
38
61
|
</zui-formfield>
|
|
39
|
-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
62
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" type="_blank"><code>::part() pseudo-element</code></a>
|
|
40
63
|
</div>
|
|
41
64
|
</section>
|
|
42
65
|
|
|
43
|
-
<section component="zui-formfield" heading="Overriding the container margin with CSS
|
|
66
|
+
<section component="zui-formfield" heading="Overriding the container margin with a CSS shadow part">
|
|
44
67
|
<style>
|
|
45
|
-
.
|
|
68
|
+
.zui-formfield-demo-container::part(container) {
|
|
46
69
|
margin-bottom: 0;
|
|
47
70
|
}
|
|
48
71
|
</style>
|
|
49
72
|
<div style="display: flex; flex-direction: column">
|
|
50
|
-
<zui-formfield class="
|
|
73
|
+
<zui-formfield class="zui-formfield-demo-container" label="My default bottom margin has been overridden">
|
|
51
74
|
<zui-input name="vanilla-input" value="No bottom margin"></zui-input>
|
|
52
75
|
</zui-formfield>
|
|
53
|
-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
76
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" type="_blank"><code>::part() pseudo-element</code></a>
|
|
54
77
|
</div>
|
|
55
78
|
</section>
|
package/lab.html
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
<h1>zui-formfield</h1>
|
|
81
81
|
<hr />
|
|
82
82
|
<div class="modifiers">
|
|
83
|
-
<zui-button
|
|
83
|
+
<zui-button type="secondary" id="dialogLaunch">Open dialog form</zui-button>
|
|
84
84
|
</div>
|
|
85
85
|
<div class="grid">
|
|
86
86
|
<zui-card>
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
<zui-button>
|
|
121
121
|
<button type="submit">Submit</button>
|
|
122
122
|
</zui-button>
|
|
123
|
-
<zui-button
|
|
123
|
+
<zui-button type="link">
|
|
124
124
|
<button type="reset">Reset</button>
|
|
125
125
|
</zui-button>
|
|
126
126
|
</div>
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
<zui-button>
|
|
192
192
|
<button type="submit">Submit</button>
|
|
193
193
|
</zui-button>
|
|
194
|
-
<zui-button
|
|
194
|
+
<zui-button type="link">
|
|
195
195
|
<button type="reset">Reset</button>
|
|
196
196
|
</zui-button>
|
|
197
197
|
</div>
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
<zui-button>
|
|
268
268
|
<button type="submit">Submit</button>
|
|
269
269
|
</zui-button>
|
|
270
|
-
<zui-button
|
|
270
|
+
<zui-button type="link">
|
|
271
271
|
<button type="reset">Reset</button>
|
|
272
272
|
</zui-button>
|
|
273
273
|
</div>
|
|
@@ -350,10 +350,10 @@
|
|
|
350
350
|
</div>
|
|
351
351
|
</div>
|
|
352
352
|
<div slot="footer">
|
|
353
|
-
<zui-button
|
|
353
|
+
<zui-button type="link" style="margin-right: auto">
|
|
354
354
|
<button type="reset">Reset</button>
|
|
355
355
|
</zui-button>
|
|
356
|
-
<zui-button
|
|
356
|
+
<zui-button type="link" dialog-close>Cancel</zui-button>
|
|
357
357
|
<zui-button dialog-confirm>
|
|
358
358
|
<button type="submit">Submit</button>
|
|
359
359
|
</zui-button>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-formfield",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.1-pre.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"customElements": "dist/custom-elements.json",
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "649c124f4987b32df414dbcf389fa1116eb3d825"
|
|
28
28
|
}
|
package/src/zui-formfield.ts
CHANGED