@phcdevworks/spectre-components 0.0.1 → 1.0.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/base-DQtCQ-dP.d.cts +22 -0
- package/dist/base-DQtCQ-dP.d.ts +22 -0
- package/dist/button.cjs +149 -124
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +15 -40
- package/dist/button.d.ts +15 -40
- package/dist/button.js +150 -125
- package/dist/button.js.map +1 -1
- package/dist/checkbox.cjs +140 -25
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.d.cts +32 -32
- package/dist/checkbox.d.ts +32 -32
- package/dist/checkbox.js +141 -26
- package/dist/checkbox.js.map +1 -1
- package/dist/fieldset.cjs +96 -50
- package/dist/fieldset.cjs.map +1 -1
- package/dist/fieldset.d.cts +24 -36
- package/dist/fieldset.d.ts +24 -36
- package/dist/fieldset.js +96 -50
- package/dist/fieldset.js.map +1 -1
- package/dist/form-iI7vV-3W.d.cts +6 -0
- package/dist/form-iI7vV-3W.d.ts +6 -0
- package/dist/index.cjs +298 -826
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +300 -827
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +70 -59
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +25 -36
- package/dist/input.d.ts +25 -36
- package/dist/input.js +70 -59
- package/dist/input.js.map +1 -1
- package/dist/label.cjs +101 -38
- package/dist/label.cjs.map +1 -1
- package/dist/label.d.cts +16 -20
- package/dist/label.d.ts +16 -20
- package/dist/label.js +101 -38
- package/dist/label.js.map +1 -1
- package/dist/projectable-DcnBRiko.d.cts +17 -0
- package/dist/projectable-SzbPvXfM.d.ts +17 -0
- package/dist/radio.cjs +140 -25
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.d.cts +32 -32
- package/dist/radio.d.ts +32 -32
- package/dist/radio.js +141 -26
- package/dist/radio.js.map +1 -1
- package/dist/select.cjs +142 -113
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +23 -41
- package/dist/select.d.ts +23 -41
- package/dist/select.js +143 -113
- package/dist/select.js.map +1 -1
- package/dist/textarea.cjs +24 -223
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.d.cts +20 -32
- package/dist/textarea.d.ts +20 -32
- package/dist/textarea.js +24 -223
- package/dist/textarea.js.map +1 -1
- package/package.json +11 -11
package/dist/fieldset.d.ts
CHANGED
|
@@ -1,59 +1,47 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
|
-
import {
|
|
2
|
+
import { S as SpectreProjectableElement } from './projectable-SzbPvXfM.js';
|
|
3
|
+
import './base-DQtCQ-dP.js';
|
|
4
|
+
import 'lit';
|
|
3
5
|
|
|
4
6
|
interface SpectreFieldsetProps {
|
|
7
|
+
ariaLabel?: string | null;
|
|
8
|
+
ariaLabelledBy?: string | null;
|
|
9
|
+
ariaDescribedBy?: string | null;
|
|
5
10
|
disabled?: boolean;
|
|
11
|
+
form?: string;
|
|
6
12
|
legend?: string;
|
|
13
|
+
name?: string;
|
|
14
|
+
title?: string;
|
|
7
15
|
}
|
|
8
|
-
declare class SpectreFieldsetElement extends
|
|
16
|
+
declare class SpectreFieldsetElement extends SpectreProjectableElement implements SpectreFieldsetProps {
|
|
9
17
|
static properties: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
18
|
+
disabled: {
|
|
19
|
+
type: BooleanConstructor;
|
|
20
|
+
reflect: boolean;
|
|
13
21
|
};
|
|
14
|
-
|
|
15
|
-
attribute: string;
|
|
22
|
+
form: {
|
|
16
23
|
type: StringConstructor;
|
|
17
24
|
};
|
|
18
|
-
|
|
19
|
-
attribute: string;
|
|
25
|
+
legend: {
|
|
20
26
|
type: StringConstructor;
|
|
27
|
+
reflect: boolean;
|
|
21
28
|
};
|
|
22
|
-
|
|
23
|
-
type:
|
|
29
|
+
name: {
|
|
30
|
+
type: StringConstructor;
|
|
24
31
|
reflect: boolean;
|
|
25
32
|
};
|
|
26
|
-
|
|
33
|
+
title: {
|
|
27
34
|
type: StringConstructor;
|
|
28
35
|
reflect: boolean;
|
|
29
36
|
};
|
|
30
37
|
};
|
|
31
|
-
ariaLabel: string | null;
|
|
32
|
-
ariaLabelledBy: string | null;
|
|
33
|
-
ariaDescribedBy: string | null;
|
|
34
38
|
disabled: boolean;
|
|
39
|
+
form?: string;
|
|
35
40
|
legend: string;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
set id(value: string);
|
|
41
|
-
createRenderRoot(): this;
|
|
42
|
-
connectedCallback(): void;
|
|
43
|
-
disconnectedCallback(): void;
|
|
44
|
-
getAttribute(qualifiedName: string): string | null;
|
|
45
|
-
hasAttribute(qualifiedName: string): boolean;
|
|
46
|
-
setAttribute(qualifiedName: string, value: string): void;
|
|
47
|
-
removeAttribute(qualifiedName: string): void;
|
|
48
|
-
protected update(changedProperties: Map<PropertyKey, unknown>): void;
|
|
49
|
-
private get nativeFieldset();
|
|
50
|
-
private get forwardedAriaLabel();
|
|
51
|
-
private get forwardedAriaLabelledBy();
|
|
52
|
-
private get forwardedAriaDescribedBy();
|
|
53
|
-
private startContentObserver;
|
|
54
|
-
private stopContentObserver;
|
|
55
|
-
private syncProjectedContent;
|
|
56
|
-
private isInternalFieldsetNode;
|
|
41
|
+
name?: string;
|
|
42
|
+
title: string;
|
|
43
|
+
protected getContentContainer(): Element | null;
|
|
44
|
+
protected isInternalNode(node: Node): boolean;
|
|
57
45
|
focus(options?: FocusOptions): void;
|
|
58
46
|
blur(): void;
|
|
59
47
|
render(): lit_html.TemplateResult<1>;
|
package/dist/fieldset.js
CHANGED
|
@@ -2,15 +2,12 @@ import { LitElement, nothing, html } from 'lit';
|
|
|
2
2
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
3
|
|
|
4
4
|
// src/components/fieldset/sp-fieldset.ts
|
|
5
|
-
var
|
|
5
|
+
var SpectreBaseElement = class extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
8
|
this.ariaLabel = null;
|
|
9
9
|
this.ariaLabelledBy = null;
|
|
10
10
|
this.ariaDescribedBy = null;
|
|
11
|
-
this.disabled = false;
|
|
12
|
-
this.legend = "";
|
|
13
|
-
this.projectedContent = [];
|
|
14
11
|
}
|
|
15
12
|
get id() {
|
|
16
13
|
return this._id ?? "";
|
|
@@ -26,6 +23,8 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
26
23
|
}
|
|
27
24
|
this.requestUpdate();
|
|
28
25
|
}
|
|
26
|
+
// Spectre components intentionally render in light DOM so the global
|
|
27
|
+
// `@phcdevworks/spectre-ui` styling contract can apply directly.
|
|
29
28
|
createRenderRoot() {
|
|
30
29
|
return this;
|
|
31
30
|
}
|
|
@@ -35,12 +34,6 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
35
34
|
if (hostId !== null) {
|
|
36
35
|
this.id = hostId;
|
|
37
36
|
}
|
|
38
|
-
this.syncProjectedContent();
|
|
39
|
-
this.startContentObserver();
|
|
40
|
-
}
|
|
41
|
-
disconnectedCallback() {
|
|
42
|
-
this.stopContentObserver();
|
|
43
|
-
super.disconnectedCallback();
|
|
44
37
|
}
|
|
45
38
|
getAttribute(qualifiedName) {
|
|
46
39
|
if (qualifiedName === "id") {
|
|
@@ -68,14 +61,6 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
68
61
|
}
|
|
69
62
|
super.removeAttribute(qualifiedName);
|
|
70
63
|
}
|
|
71
|
-
update(changedProperties) {
|
|
72
|
-
this.stopContentObserver();
|
|
73
|
-
super.update(changedProperties);
|
|
74
|
-
this.startContentObserver();
|
|
75
|
-
}
|
|
76
|
-
get nativeFieldset() {
|
|
77
|
-
return this.querySelector("[data-sp-fieldset-native]");
|
|
78
|
-
}
|
|
79
64
|
get forwardedAriaLabel() {
|
|
80
65
|
const value = this.ariaLabel?.trim();
|
|
81
66
|
return value ? value : void 0;
|
|
@@ -88,16 +73,76 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
88
73
|
const value = this.ariaDescribedBy?.trim();
|
|
89
74
|
return value ? value : void 0;
|
|
90
75
|
}
|
|
76
|
+
};
|
|
77
|
+
SpectreBaseElement.properties = {
|
|
78
|
+
ariaLabel: { attribute: "aria-label", type: String },
|
|
79
|
+
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
80
|
+
ariaDescribedBy: { attribute: "aria-describedby", type: String }
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// src/utils/dom.ts
|
|
84
|
+
function hasMeaningfulContent(nodes) {
|
|
85
|
+
return nodes.some((node) => {
|
|
86
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
87
|
+
return true;
|
|
88
|
+
}
|
|
89
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
90
|
+
return (node.textContent?.trim().length ?? 0) > 0;
|
|
91
|
+
}
|
|
92
|
+
return false;
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// src/utils/projectable.ts
|
|
97
|
+
var SpectreProjectableElement = class extends SpectreBaseElement {
|
|
98
|
+
constructor() {
|
|
99
|
+
super(...arguments);
|
|
100
|
+
this.projectedContent = [];
|
|
101
|
+
}
|
|
102
|
+
get hasProjectedContent() {
|
|
103
|
+
return hasMeaningfulContent(this.projectedContent);
|
|
104
|
+
}
|
|
105
|
+
connectedCallback() {
|
|
106
|
+
super.connectedCallback();
|
|
107
|
+
this.syncProjectedContent();
|
|
108
|
+
this.startContentObserver();
|
|
109
|
+
}
|
|
110
|
+
disconnectedCallback() {
|
|
111
|
+
this.stopContentObserver();
|
|
112
|
+
super.disconnectedCallback();
|
|
113
|
+
}
|
|
114
|
+
update(changedProperties) {
|
|
115
|
+
this.stopContentObserver();
|
|
116
|
+
super.update(changedProperties);
|
|
117
|
+
this.startContentObserver();
|
|
118
|
+
}
|
|
119
|
+
syncProjectedContent() {
|
|
120
|
+
const nextProjectedContent = [];
|
|
121
|
+
const sourceNodes = [
|
|
122
|
+
...this.childNodes,
|
|
123
|
+
...this.getContentContainer()?.childNodes ?? []
|
|
124
|
+
];
|
|
125
|
+
sourceNodes.forEach((node) => {
|
|
126
|
+
if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
|
|
127
|
+
nextProjectedContent.push(node);
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
|
|
131
|
+
if (hasChanged) {
|
|
132
|
+
this.projectedContent = nextProjectedContent;
|
|
133
|
+
}
|
|
134
|
+
return hasChanged;
|
|
135
|
+
}
|
|
91
136
|
startContentObserver() {
|
|
92
137
|
if (this.contentObserver) {
|
|
93
138
|
return;
|
|
94
139
|
}
|
|
95
140
|
this.contentObserver = new MutationObserver((mutations) => {
|
|
96
|
-
const isInternalMovement = mutations.every(
|
|
97
|
-
|
|
98
|
-
(node) => this.
|
|
99
|
-
) && Array.from(mutation.addedNodes).every((node) => this.
|
|
100
|
-
|
|
141
|
+
const isInternalMovement = mutations.every(
|
|
142
|
+
(mutation) => Array.from(mutation.removedNodes).every(
|
|
143
|
+
(node) => this.isInternalNode(node) || this.contains(node)
|
|
144
|
+
) && Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node))
|
|
145
|
+
);
|
|
101
146
|
if (isInternalMovement) {
|
|
102
147
|
return;
|
|
103
148
|
}
|
|
@@ -111,33 +156,31 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
111
156
|
this.contentObserver?.disconnect();
|
|
112
157
|
this.contentObserver = void 0;
|
|
113
158
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
// src/components/fieldset/sp-fieldset.ts
|
|
162
|
+
var SpectreFieldsetElement = class extends SpectreProjectableElement {
|
|
163
|
+
constructor() {
|
|
164
|
+
super(...arguments);
|
|
165
|
+
this.disabled = false;
|
|
166
|
+
this.legend = "";
|
|
167
|
+
this.title = "";
|
|
168
|
+
}
|
|
169
|
+
getContentContainer() {
|
|
170
|
+
return this.querySelector("[data-sp-fieldset-native]");
|
|
171
|
+
}
|
|
172
|
+
isInternalNode(node) {
|
|
173
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
128
174
|
return false;
|
|
129
175
|
}
|
|
130
|
-
|
|
131
|
-
return
|
|
132
|
-
}
|
|
133
|
-
isInternalFieldsetNode(node) {
|
|
134
|
-
return node === this.nativeFieldset;
|
|
176
|
+
const el = node;
|
|
177
|
+
return el.hasAttribute("data-sp-fieldset-native") || el.hasAttribute("data-sp-fieldset-legend");
|
|
135
178
|
}
|
|
136
179
|
focus(options) {
|
|
137
|
-
this.
|
|
180
|
+
this.getContentContainer()?.focus(options);
|
|
138
181
|
}
|
|
139
182
|
blur() {
|
|
140
|
-
this.
|
|
183
|
+
this.getContentContainer()?.blur();
|
|
141
184
|
}
|
|
142
185
|
render() {
|
|
143
186
|
return html`
|
|
@@ -147,20 +190,23 @@ var SpectreFieldsetElement = class extends LitElement {
|
|
|
147
190
|
aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
|
|
148
191
|
data-sp-fieldset-native
|
|
149
192
|
?disabled=${this.disabled}
|
|
193
|
+
form=${ifDefined(this.form)}
|
|
150
194
|
id=${ifDefined(this.id || void 0)}
|
|
195
|
+
name=${ifDefined(this.name)}
|
|
196
|
+
title=${ifDefined(this.title || void 0)}
|
|
151
197
|
>
|
|
152
|
-
${this.legend ? html`<legend class='sp-label'>${this.legend}</legend>` : nothing}
|
|
153
|
-
${this.
|
|
198
|
+
${this.legend ? html`<legend class='sp-label' data-sp-fieldset-legend>${this.legend}</legend>` : nothing}
|
|
199
|
+
${this.hasProjectedContent ? this.projectedContent : nothing}
|
|
154
200
|
</fieldset>
|
|
155
201
|
`;
|
|
156
202
|
}
|
|
157
203
|
};
|
|
158
204
|
SpectreFieldsetElement.properties = {
|
|
159
|
-
ariaLabel: { attribute: "aria-label", type: String },
|
|
160
|
-
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
161
|
-
ariaDescribedBy: { attribute: "aria-describedby", type: String },
|
|
162
205
|
disabled: { type: Boolean, reflect: true },
|
|
163
|
-
|
|
206
|
+
form: { type: String },
|
|
207
|
+
legend: { type: String, reflect: true },
|
|
208
|
+
name: { type: String, reflect: true },
|
|
209
|
+
title: { type: String, reflect: true }
|
|
164
210
|
};
|
|
165
211
|
function defineSpectreFieldset(tagName = "sp-fieldset") {
|
|
166
212
|
const existingElement = customElements.get(tagName);
|
package/dist/fieldset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/fieldset/sp-fieldset.ts"],"names":[],"mappings":"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","file":"fieldset.js","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport interface SpectreFieldsetProps {\n disabled?: boolean;\n legend?: string;\n}\n\nexport class SpectreFieldsetElement extends LitElement implements SpectreFieldsetProps {\n static properties = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n disabled: { type: Boolean, reflect: true },\n legend: { type: String, reflect: true },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n disabled = false;\n legend = '';\n private _id?: string;\n private projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n private get nativeFieldset(): HTMLFieldSetElement | null {\n return this.querySelector('[data-sp-fieldset-native]');\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) => {\n return (\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalFieldsetNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalFieldsetNode(node))\n );\n });\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n\n private syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n\n Array.from(this.childNodes).forEach((node) => {\n if (this.isInternalFieldsetNode(node)) {\n this.projectedContent.forEach((projectedNode) => {\n if (projectedNode.parentNode !== this && this.contains(projectedNode)) {\n nextProjectedContent.push(projectedNode);\n }\n });\n return;\n }\n\n nextProjectedContent.push(node);\n });\n\n if (\n nextProjectedContent.length === this.projectedContent.length &&\n nextProjectedContent.every((node, index) => node === this.projectedContent[index])\n ) {\n return false;\n }\n\n this.projectedContent = nextProjectedContent;\n return true;\n }\n\n private isInternalFieldsetNode(node: Node): boolean {\n return node === this.nativeFieldset;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeFieldset?.focus(options);\n }\n\n override blur(): void {\n this.nativeFieldset?.blur();\n }\n\n override render() {\n return html`\n <fieldset\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n data-sp-fieldset-native\n ?disabled=${this.disabled}\n id=${ifDefined(this.id || undefined)}\n >\n ${this.legend ? html`<legend class='sp-label'>${this.legend}</legend>` : nothing}\n ${this.projectedContent.length > 0 ? this.projectedContent : nothing}\n </fieldset>\n `;\n }\n}\n\nexport function defineSpectreFieldset(tagName = 'sp-fieldset'): typeof SpectreFieldsetElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreFieldsetElement;\n }\n\n customElements.define(tagName, SpectreFieldsetElement);\n return SpectreFieldsetElement;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/fieldset/sp-fieldset.ts"],"names":[],"mappings":"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","file":"fieldset.js","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit';\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n}\n","export function hasMeaningfulContent(nodes: readonly Node[]): boolean {\n return nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent?.trim().length ?? 0) > 0;\n }\n\n return false;\n });\n}\n","import { SpectreBaseElement } from './base';\nimport { hasMeaningfulContent } from './dom';\n\nexport abstract class SpectreProjectableElement extends SpectreBaseElement {\n protected projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n // Return the native container whose existing children are also treated as\n // projected content sources (e.g. the rendered <button>, <select>, <label>).\n protected abstract getContentContainer(): Element | null;\n\n // Return true if the node was rendered by this component and should not be\n // treated as external projected content.\n protected abstract isInternalNode(node: Node): boolean;\n\n protected get hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n protected syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n const sourceNodes = [\n ...this.childNodes,\n ...(this.getContentContainer()?.childNodes ?? []),\n ];\n\n sourceNodes.forEach((node) => {\n if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {\n nextProjectedContent.push(node);\n }\n });\n\n const hasChanged =\n nextProjectedContent.length !== this.projectedContent.length ||\n nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);\n\n if (hasChanged) {\n this.projectedContent = nextProjectedContent;\n }\n\n return hasChanged;\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) =>\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node)),\n );\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n}\n","import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreProjectableElement } from '../../utils/projectable';\n\nexport interface SpectreFieldsetProps {\n ariaLabel?: string | null;\n ariaLabelledBy?: string | null;\n ariaDescribedBy?: string | null;\n disabled?: boolean;\n form?: string;\n legend?: string;\n name?: string;\n title?: string;\n}\n\nexport class SpectreFieldsetElement extends SpectreProjectableElement implements SpectreFieldsetProps {\n static properties = {\n disabled: { type: Boolean, reflect: true },\n form: { type: String },\n legend: { type: String, reflect: true },\n name: { type: String, reflect: true },\n title: { type: String, reflect: true },\n };\n\n disabled = false;\n form?: string;\n legend = '';\n name?: string;\n override title = '';\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-fieldset-native]');\n }\n\n protected override isInternalNode(node: Node): boolean {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false;\n }\n\n const el = node as Element;\n return (\n el.hasAttribute('data-sp-fieldset-native') ||\n el.hasAttribute('data-sp-fieldset-legend')\n );\n }\n\n override focus(options?: FocusOptions): void {\n (this.getContentContainer() as HTMLFieldSetElement | null)?.focus(options);\n }\n\n override blur(): void {\n (this.getContentContainer() as HTMLFieldSetElement | null)?.blur();\n }\n\n override render() {\n return html`\n <fieldset\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n data-sp-fieldset-native\n ?disabled=${this.disabled}\n form=${ifDefined(this.form)}\n id=${ifDefined(this.id || undefined)}\n name=${ifDefined(this.name)}\n title=${ifDefined(this.title || undefined)}\n >\n ${this.legend\n ? html`<legend class='sp-label' data-sp-fieldset-legend>${this.legend}</legend>`\n : nothing}\n ${this.hasProjectedContent ? this.projectedContent : nothing}\n </fieldset>\n `;\n }\n}\n\nexport function defineSpectreFieldset(tagName = 'sp-fieldset'): typeof SpectreFieldsetElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreFieldsetElement;\n }\n\n customElements.define(tagName, SpectreFieldsetElement);\n return SpectreFieldsetElement;\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const spectreInputSizes: readonly ["sm", "md", "lg"];
|
|
2
|
+
type SpectreInputSize = (typeof spectreInputSizes)[number];
|
|
3
|
+
declare const spectreInputTypes: readonly ["text", "email", "password", "search", "tel", "url", "number", "date", "datetime-local", "month", "time", "week"];
|
|
4
|
+
type SpectreInputType = (typeof spectreInputTypes)[number];
|
|
5
|
+
|
|
6
|
+
export { type SpectreInputSize as S, type SpectreInputType as a, spectreInputTypes as b, spectreInputSizes as s };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const spectreInputSizes: readonly ["sm", "md", "lg"];
|
|
2
|
+
type SpectreInputSize = (typeof spectreInputSizes)[number];
|
|
3
|
+
declare const spectreInputTypes: readonly ["text", "email", "password", "search", "tel", "url", "number", "date", "datetime-local", "month", "time", "week"];
|
|
4
|
+
type SpectreInputType = (typeof spectreInputTypes)[number];
|
|
5
|
+
|
|
6
|
+
export { type SpectreInputSize as S, type SpectreInputType as a, spectreInputTypes as b, spectreInputSizes as s };
|