@zywave/zui-formfield 4.0.31 → 4.1.0-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/dist/custom-elements.json +12 -2
- package/dist/zui-formfield.d.ts +5 -2
- package/dist/zui-formfield.js +6 -3
- package/dist/zui-formfield.js.map +1 -1
- package/docs/demo.html +14 -0
- package/lab.html +0 -1
- package/package.json +2 -2
- package/src/zui-formfield.ts +6 -3
|
@@ -8,11 +8,21 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "`<zui-formfield>`
|
|
11
|
+
"description": "`<zui-formfield>` provides a standardized way of labeling and styling form controls.",
|
|
12
12
|
"name": "ZuiFormField",
|
|
13
|
+
"cssParts": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.",
|
|
16
|
+
"name": "container"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.",
|
|
20
|
+
"name": "label"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
13
23
|
"slots": [
|
|
14
24
|
{
|
|
15
|
-
"description": "
|
|
25
|
+
"description": "Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`",
|
|
16
26
|
"name": ""
|
|
17
27
|
}
|
|
18
28
|
],
|
package/dist/zui-formfield.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
2
2
|
/**
|
|
3
|
-
* `<zui-formfield>`
|
|
3
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
4
4
|
*
|
|
5
|
-
* @slot -
|
|
5
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
6
|
+
*
|
|
7
|
+
* @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)`.
|
|
8
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
6
9
|
*/
|
|
7
10
|
export declare class ZuiFormField extends ZuiBaseElement {
|
|
8
11
|
#private;
|
package/dist/zui-formfield.js
CHANGED
|
@@ -16,9 +16,12 @@ import { html, nothing } from 'lit';
|
|
|
16
16
|
import { property, query } from 'lit/decorators.js';
|
|
17
17
|
import { style } from './zui-formfield-css.js';
|
|
18
18
|
/**
|
|
19
|
-
* `<zui-formfield>`
|
|
19
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
20
20
|
*
|
|
21
|
-
* @slot -
|
|
21
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
22
|
+
*
|
|
23
|
+
* @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)`.
|
|
24
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
22
25
|
*/
|
|
23
26
|
export class ZuiFormField extends ZuiBaseElement {
|
|
24
27
|
constructor() {
|
|
@@ -38,7 +41,7 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
38
41
|
}
|
|
39
42
|
render() {
|
|
40
43
|
return html `
|
|
41
|
-
<div class="container">
|
|
44
|
+
<div class="container" part="container">
|
|
42
45
|
${this.label ? html ` <label @click="${__classPrivateFieldGet(this, _ZuiFormField_instances, "m", _ZuiFormField_onLabelClick)}" part="label">${this.label}</label> ` : nothing}
|
|
43
46
|
<slot></slot>
|
|
44
47
|
</div>
|
|
@@ -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
|
|
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;IA6BxB,CAAC;IApBC,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;CASF;;IAvBG,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACjE,CAAC;IAgBC,MAAM,OAAO,GAAG,uBAAA,IAAI,0DAAS,CAAC;IAC9B,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,KAAK,EAAE,CAAC;KACjB;AACH,CAAC;AAlCD;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;AA4B3B,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 const control = this.#control;\n if (control) {\n control.focus();\n control.click();\n }\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
|
@@ -38,4 +38,18 @@
|
|
|
38
38
|
</zui-formfield>
|
|
39
39
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
40
40
|
</div>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<section component="zui-formfield" heading="Overriding the container margin with CSS Shadow Parts">
|
|
44
|
+
<style>
|
|
45
|
+
.container-demo::part(container) {
|
|
46
|
+
margin-bottom: 0;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
<div style="display: flex; flex-direction: column">
|
|
50
|
+
<zui-formfield class="container-demo" label="My default bottom margin has been overridden">
|
|
51
|
+
<zui-input name="vanilla-input" value="No bottom margin"></zui-input>
|
|
52
|
+
</zui-formfield>
|
|
53
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
54
|
+
</div>
|
|
41
55
|
</section>
|
package/lab.html
CHANGED
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-input/dist/css/zui-input.fouc.css" />
|
|
18
18
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-radio/dist/css/zui-radio.fouc.css" />
|
|
19
19
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select.fouc.css" />
|
|
20
|
-
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select-dropdown.fouc.css" />
|
|
21
20
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-toggle/dist/css/zui-toggle.fouc.css" />
|
|
22
21
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-well/dist/css/zui-well.fouc.css" />
|
|
23
22
|
<link rel="stylesheet" href="./dist/css/zui-formfield.fouc.css" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-formfield",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.1.0-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": "9d50c40cc4eab86fc94b863161f2ee862f72eb12"
|
|
28
28
|
}
|
package/src/zui-formfield.ts
CHANGED
|
@@ -5,9 +5,12 @@ import { property, query } from 'lit/decorators.js';
|
|
|
5
5
|
import { style } from './zui-formfield-css.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
* `<zui-formfield>`
|
|
8
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
9
9
|
*
|
|
10
|
-
* @slot -
|
|
10
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
11
|
+
*
|
|
12
|
+
* @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)`.
|
|
13
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
11
14
|
*/
|
|
12
15
|
export class ZuiFormField extends ZuiBaseElement {
|
|
13
16
|
/**
|
|
@@ -35,7 +38,7 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
35
38
|
|
|
36
39
|
render() {
|
|
37
40
|
return html`
|
|
38
|
-
<div class="container">
|
|
41
|
+
<div class="container" part="container">
|
|
39
42
|
${this.label ? html` <label @click="${this.#onLabelClick}" part="label">${this.label}</label> ` : nothing}
|
|
40
43
|
<slot></slot>
|
|
41
44
|
</div>
|