@waggylabs/yumekit 0.2.6 → 0.3.1
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/components/y-dialog.d.ts +3 -0
- package/dist/components/y-dialog.js +33 -4
- package/dist/components/y-select.d.ts +10 -1
- package/dist/components/y-select.js +21 -5
- package/dist/components/y-theme.d.ts +1 -1
- package/dist/components/y-theme.js +7 -9
- package/dist/icons/all.js +1 -1
- package/dist/index.js +62 -19
- package/dist/react.d.ts +20 -16
- package/dist/yumekit.min.js +1 -1
- package/llm.txt +611 -0
- package/package.json +3 -2
|
@@ -19,6 +19,9 @@ declare class YumeDialog extends HTMLElement {
|
|
|
19
19
|
set animate(val: boolean);
|
|
20
20
|
/** Whether the dialog uses an entrance animation. */
|
|
21
21
|
get animate(): boolean;
|
|
22
|
+
set position(val: string);
|
|
23
|
+
/** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
|
|
24
|
+
get position(): string;
|
|
22
25
|
/** Opens the dialog and focuses it. */
|
|
23
26
|
show(): void;
|
|
24
27
|
/** Closes the dialog. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
class YumeDialog extends HTMLElement {
|
|
2
2
|
static get observedAttributes() {
|
|
3
|
-
return ["visible", "anchor", "closable", "show-backdrop", "animate"];
|
|
3
|
+
return ["visible", "anchor", "closable", "show-backdrop", "animate", "position"];
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
constructor() {
|
|
@@ -75,6 +75,14 @@ class YumeDialog extends HTMLElement {
|
|
|
75
75
|
else this.removeAttribute("animate");
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
/** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
|
|
79
|
+
get position() {
|
|
80
|
+
return this.getAttribute("position") || "center";
|
|
81
|
+
}
|
|
82
|
+
set position(val) {
|
|
83
|
+
this.setAttribute("position", val);
|
|
84
|
+
}
|
|
85
|
+
|
|
78
86
|
/** Opens the dialog and focuses it. */
|
|
79
87
|
show() {
|
|
80
88
|
if (!this.shadowRoot.querySelector(".dialog")) {
|
|
@@ -127,14 +135,32 @@ class YumeDialog extends HTMLElement {
|
|
|
127
135
|
align-items: center;
|
|
128
136
|
justify-content: center;
|
|
129
137
|
z-index: var(--component-dialog-z-index, 1000);
|
|
138
|
+
padding: var(--component-dialog-offset, 16px);
|
|
139
|
+
box-sizing: border-box;
|
|
140
|
+
}
|
|
141
|
+
:host([visible]) {
|
|
142
|
+
display: flex;
|
|
143
|
+
pointer-events: none;
|
|
144
|
+
}
|
|
145
|
+
:host([visible]) .dialog {
|
|
146
|
+
pointer-events: auto;
|
|
130
147
|
}
|
|
131
|
-
:host([visible]) {
|
|
132
|
-
|
|
148
|
+
:host([visible][show-backdrop]) {
|
|
149
|
+
pointer-events: auto;
|
|
133
150
|
background: rgba(0,0,0,0.5);
|
|
134
151
|
backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
|
|
135
152
|
-webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
|
|
136
153
|
}
|
|
137
154
|
|
|
155
|
+
:host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }
|
|
156
|
+
:host([position="top-center"]) { align-items: flex-start; justify-content: center; }
|
|
157
|
+
:host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }
|
|
158
|
+
:host([position="left"]) { align-items: center; justify-content: flex-start; }
|
|
159
|
+
:host([position="right"]) { align-items: center; justify-content: flex-end; }
|
|
160
|
+
:host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }
|
|
161
|
+
:host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }
|
|
162
|
+
:host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }
|
|
163
|
+
|
|
138
164
|
@keyframes dialog-fade-in {
|
|
139
165
|
from { opacity: 0; transform: translateY(16px) scale(0.97); }
|
|
140
166
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
@@ -173,7 +199,10 @@ class YumeDialog extends HTMLElement {
|
|
|
173
199
|
.footer {
|
|
174
200
|
padding: var(--component-dialog-padding, var(--spacing-medium));
|
|
175
201
|
border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
|
|
176
|
-
|
|
202
|
+
display: flex;
|
|
203
|
+
flex-wrap: wrap;
|
|
204
|
+
justify-content: flex-end;
|
|
205
|
+
gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));
|
|
177
206
|
}
|
|
178
207
|
|
|
179
208
|
::slotted(*) {
|
|
@@ -7,10 +7,19 @@ export class YumeSelect extends HTMLElement {
|
|
|
7
7
|
connectedCallback(): void;
|
|
8
8
|
disconnectedCallback(): void;
|
|
9
9
|
attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
|
|
10
|
+
_value: any;
|
|
10
11
|
set value(val: string);
|
|
11
12
|
/** @type {string} The current selected value, or comma-separated values when multiple. */
|
|
12
13
|
get value(): string;
|
|
13
|
-
|
|
14
|
+
set options(val: Array<{
|
|
15
|
+
value: string;
|
|
16
|
+
label: string;
|
|
17
|
+
}>);
|
|
18
|
+
/** @type {Array<{value: string, label: string}>} The options array for the select. */
|
|
19
|
+
get options(): Array<{
|
|
20
|
+
value: string;
|
|
21
|
+
label: string;
|
|
22
|
+
}>;
|
|
14
23
|
/**
|
|
15
24
|
* Returns the parsed options array from the "options" attribute.
|
|
16
25
|
* @returns {Array<{value: string, label: string}>}
|
|
@@ -65,6 +65,13 @@ class YumeSelect extends HTMLElement {
|
|
|
65
65
|
if (oldValue === newValue) return;
|
|
66
66
|
|
|
67
67
|
if (name === "value") {
|
|
68
|
+
if (this.hasAttribute("multiple")) {
|
|
69
|
+
this.selectedValues = new Set(
|
|
70
|
+
(newValue || "").split(",").map((v) => v.trim()).filter(Boolean),
|
|
71
|
+
);
|
|
72
|
+
} else {
|
|
73
|
+
this._value = newValue || "";
|
|
74
|
+
}
|
|
68
75
|
this.updateDisplay();
|
|
69
76
|
this._internals.setFormValue(newValue, this.getAttribute("name"));
|
|
70
77
|
this.updateSelectedStyles();
|
|
@@ -116,11 +123,8 @@ class YumeSelect extends HTMLElement {
|
|
|
116
123
|
this.updateSelectedStyles();
|
|
117
124
|
}
|
|
118
125
|
|
|
119
|
-
/**
|
|
120
|
-
|
|
121
|
-
* @returns {Array<{value: string, label: string}>}
|
|
122
|
-
*/
|
|
123
|
-
getOptions() {
|
|
126
|
+
/** @type {Array<{value: string, label: string}>} The options array for the select. */
|
|
127
|
+
get options() {
|
|
124
128
|
try {
|
|
125
129
|
return JSON.parse(this.getAttribute("options") || "[]");
|
|
126
130
|
} catch (e) {
|
|
@@ -128,6 +132,18 @@ class YumeSelect extends HTMLElement {
|
|
|
128
132
|
}
|
|
129
133
|
}
|
|
130
134
|
|
|
135
|
+
set options(val) {
|
|
136
|
+
this.setAttribute("options", JSON.stringify(val));
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Returns the parsed options array from the "options" attribute.
|
|
141
|
+
* @returns {Array<{value: string, label: string}>}
|
|
142
|
+
*/
|
|
143
|
+
getOptions() {
|
|
144
|
+
return this.options;
|
|
145
|
+
}
|
|
146
|
+
|
|
131
147
|
/**
|
|
132
148
|
* Returns the display text for the current selection.
|
|
133
149
|
* @returns {string}
|
|
@@ -6,7 +6,7 @@ export class YumeTheme extends HTMLElement {
|
|
|
6
6
|
/** Whether cross-origin theme-path URLs are allowed. */
|
|
7
7
|
get crossOrigin(): boolean;
|
|
8
8
|
_applyTheme(): Promise<void>;
|
|
9
|
-
/** Resolves theme CSS from either a
|
|
9
|
+
/** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
|
|
10
10
|
_resolveThemeCSS(): Promise<any>;
|
|
11
11
|
/** Rebuilds the shadow DOM with base variables, optional theme styles, and a slot. */
|
|
12
12
|
_buildShadowDOM(themeCSS: any): void;
|
|
@@ -17,7 +17,7 @@ const THEMES = {
|
|
|
17
17
|
|
|
18
18
|
class YumeTheme extends HTMLElement {
|
|
19
19
|
static get observedAttributes() {
|
|
20
|
-
return ["theme", "
|
|
20
|
+
return ["theme", "cross-origin"];
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
constructor() {
|
|
@@ -52,18 +52,16 @@ class YumeTheme extends HTMLElement {
|
|
|
52
52
|
this.applyVariablesToHost(variablesCSS + themeCSS);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
/** Resolves theme CSS from either a
|
|
55
|
+
/** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
|
|
56
56
|
async _resolveThemeCSS() {
|
|
57
|
-
const
|
|
57
|
+
const theme = this.getAttribute("theme") || "blue-light";
|
|
58
58
|
|
|
59
|
-
if (
|
|
60
|
-
|
|
61
|
-
const mode = this.getAttribute("mode") || "light";
|
|
62
|
-
return THEMES[`${theme}-${mode}`] || "";
|
|
59
|
+
if (THEMES[theme]) {
|
|
60
|
+
return THEMES[theme];
|
|
63
61
|
}
|
|
64
62
|
|
|
65
63
|
try {
|
|
66
|
-
const url = new URL(
|
|
64
|
+
const url = new URL(theme, document.baseURI);
|
|
67
65
|
if (!this.crossOrigin && url.origin !== window.location.origin) {
|
|
68
66
|
console.error(
|
|
69
67
|
`Blocked cross-origin theme load from ${url.origin}. ` +
|
|
@@ -74,7 +72,7 @@ class YumeTheme extends HTMLElement {
|
|
|
74
72
|
const response = await fetch(url.href);
|
|
75
73
|
return await response.text();
|
|
76
74
|
} catch (e) {
|
|
77
|
-
console.error(`Failed to load theme from ${
|
|
75
|
+
console.error(`Failed to load theme from ${theme}:`, e);
|
|
78
76
|
return "";
|
|
79
77
|
}
|
|
80
78
|
}
|
package/dist/icons/all.js
CHANGED
|
@@ -18,7 +18,7 @@ var bolt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
|
|
|
18
18
|
|
|
19
19
|
var calendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n <rect x=\"7\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n <rect x=\"14\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n</svg>\n";
|
|
20
20
|
|
|
21
|
-
var campfire = "<svg
|
|
21
|
+
var campfire = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
|
|
22
22
|
|
|
23
23
|
var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
|
|
24
24
|
|
package/dist/index.js
CHANGED
|
@@ -47,7 +47,7 @@ var bolt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
|
|
|
47
47
|
|
|
48
48
|
var calendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n <rect x=\"7\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n <rect x=\"14\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n</svg>\n";
|
|
49
49
|
|
|
50
|
-
var campfire = "<svg
|
|
50
|
+
var campfire = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
|
|
51
51
|
|
|
52
52
|
var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
|
|
53
53
|
|
|
@@ -3042,7 +3042,7 @@ if (!customElements.get("y-checkbox")) {
|
|
|
3042
3042
|
|
|
3043
3043
|
class YumeDialog extends HTMLElement {
|
|
3044
3044
|
static get observedAttributes() {
|
|
3045
|
-
return ["visible", "anchor", "closable", "show-backdrop", "animate"];
|
|
3045
|
+
return ["visible", "anchor", "closable", "show-backdrop", "animate", "position"];
|
|
3046
3046
|
}
|
|
3047
3047
|
|
|
3048
3048
|
constructor() {
|
|
@@ -3117,6 +3117,14 @@ class YumeDialog extends HTMLElement {
|
|
|
3117
3117
|
else this.removeAttribute("animate");
|
|
3118
3118
|
}
|
|
3119
3119
|
|
|
3120
|
+
/** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
|
|
3121
|
+
get position() {
|
|
3122
|
+
return this.getAttribute("position") || "center";
|
|
3123
|
+
}
|
|
3124
|
+
set position(val) {
|
|
3125
|
+
this.setAttribute("position", val);
|
|
3126
|
+
}
|
|
3127
|
+
|
|
3120
3128
|
/** Opens the dialog and focuses it. */
|
|
3121
3129
|
show() {
|
|
3122
3130
|
if (!this.shadowRoot.querySelector(".dialog")) {
|
|
@@ -3169,14 +3177,32 @@ class YumeDialog extends HTMLElement {
|
|
|
3169
3177
|
align-items: center;
|
|
3170
3178
|
justify-content: center;
|
|
3171
3179
|
z-index: var(--component-dialog-z-index, 1000);
|
|
3180
|
+
padding: var(--component-dialog-offset, 16px);
|
|
3181
|
+
box-sizing: border-box;
|
|
3182
|
+
}
|
|
3183
|
+
:host([visible]) {
|
|
3184
|
+
display: flex;
|
|
3185
|
+
pointer-events: none;
|
|
3186
|
+
}
|
|
3187
|
+
:host([visible]) .dialog {
|
|
3188
|
+
pointer-events: auto;
|
|
3172
3189
|
}
|
|
3173
|
-
:host([visible]) {
|
|
3174
|
-
|
|
3190
|
+
:host([visible][show-backdrop]) {
|
|
3191
|
+
pointer-events: auto;
|
|
3175
3192
|
background: rgba(0,0,0,0.5);
|
|
3176
3193
|
backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
|
|
3177
3194
|
-webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
|
|
3178
3195
|
}
|
|
3179
3196
|
|
|
3197
|
+
:host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }
|
|
3198
|
+
:host([position="top-center"]) { align-items: flex-start; justify-content: center; }
|
|
3199
|
+
:host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }
|
|
3200
|
+
:host([position="left"]) { align-items: center; justify-content: flex-start; }
|
|
3201
|
+
:host([position="right"]) { align-items: center; justify-content: flex-end; }
|
|
3202
|
+
:host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }
|
|
3203
|
+
:host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }
|
|
3204
|
+
:host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }
|
|
3205
|
+
|
|
3180
3206
|
@keyframes dialog-fade-in {
|
|
3181
3207
|
from { opacity: 0; transform: translateY(16px) scale(0.97); }
|
|
3182
3208
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
@@ -3215,7 +3241,10 @@ class YumeDialog extends HTMLElement {
|
|
|
3215
3241
|
.footer {
|
|
3216
3242
|
padding: var(--component-dialog-padding, var(--spacing-medium));
|
|
3217
3243
|
border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
|
|
3218
|
-
|
|
3244
|
+
display: flex;
|
|
3245
|
+
flex-wrap: wrap;
|
|
3246
|
+
justify-content: flex-end;
|
|
3247
|
+
gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));
|
|
3219
3248
|
}
|
|
3220
3249
|
|
|
3221
3250
|
::slotted(*) {
|
|
@@ -4978,6 +5007,13 @@ class YumeSelect extends HTMLElement {
|
|
|
4978
5007
|
if (oldValue === newValue) return;
|
|
4979
5008
|
|
|
4980
5009
|
if (name === "value") {
|
|
5010
|
+
if (this.hasAttribute("multiple")) {
|
|
5011
|
+
this.selectedValues = new Set(
|
|
5012
|
+
(newValue || "").split(",").map((v) => v.trim()).filter(Boolean),
|
|
5013
|
+
);
|
|
5014
|
+
} else {
|
|
5015
|
+
this._value = newValue || "";
|
|
5016
|
+
}
|
|
4981
5017
|
this.updateDisplay();
|
|
4982
5018
|
this._internals.setFormValue(newValue, this.getAttribute("name"));
|
|
4983
5019
|
this.updateSelectedStyles();
|
|
@@ -5029,11 +5065,8 @@ class YumeSelect extends HTMLElement {
|
|
|
5029
5065
|
this.updateSelectedStyles();
|
|
5030
5066
|
}
|
|
5031
5067
|
|
|
5032
|
-
/**
|
|
5033
|
-
|
|
5034
|
-
* @returns {Array<{value: string, label: string}>}
|
|
5035
|
-
*/
|
|
5036
|
-
getOptions() {
|
|
5068
|
+
/** @type {Array<{value: string, label: string}>} The options array for the select. */
|
|
5069
|
+
get options() {
|
|
5037
5070
|
try {
|
|
5038
5071
|
return JSON.parse(this.getAttribute("options") || "[]");
|
|
5039
5072
|
} catch (e) {
|
|
@@ -5041,6 +5074,18 @@ class YumeSelect extends HTMLElement {
|
|
|
5041
5074
|
}
|
|
5042
5075
|
}
|
|
5043
5076
|
|
|
5077
|
+
set options(val) {
|
|
5078
|
+
this.setAttribute("options", JSON.stringify(val));
|
|
5079
|
+
}
|
|
5080
|
+
|
|
5081
|
+
/**
|
|
5082
|
+
* Returns the parsed options array from the "options" attribute.
|
|
5083
|
+
* @returns {Array<{value: string, label: string}>}
|
|
5084
|
+
*/
|
|
5085
|
+
getOptions() {
|
|
5086
|
+
return this.options;
|
|
5087
|
+
}
|
|
5088
|
+
|
|
5044
5089
|
/**
|
|
5045
5090
|
* Returns the display text for the current selection.
|
|
5046
5091
|
* @returns {string}
|
|
@@ -7536,7 +7581,7 @@ const THEMES = {
|
|
|
7536
7581
|
|
|
7537
7582
|
class YumeTheme extends HTMLElement {
|
|
7538
7583
|
static get observedAttributes() {
|
|
7539
|
-
return ["theme", "
|
|
7584
|
+
return ["theme", "cross-origin"];
|
|
7540
7585
|
}
|
|
7541
7586
|
|
|
7542
7587
|
constructor() {
|
|
@@ -7571,18 +7616,16 @@ class YumeTheme extends HTMLElement {
|
|
|
7571
7616
|
this.applyVariablesToHost(variablesCSS + themeCSS);
|
|
7572
7617
|
}
|
|
7573
7618
|
|
|
7574
|
-
/** Resolves theme CSS from either a
|
|
7619
|
+
/** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
|
|
7575
7620
|
async _resolveThemeCSS() {
|
|
7576
|
-
const
|
|
7621
|
+
const theme = this.getAttribute("theme") || "blue-light";
|
|
7577
7622
|
|
|
7578
|
-
if (
|
|
7579
|
-
|
|
7580
|
-
const mode = this.getAttribute("mode") || "light";
|
|
7581
|
-
return THEMES[`${theme}-${mode}`] || "";
|
|
7623
|
+
if (THEMES[theme]) {
|
|
7624
|
+
return THEMES[theme];
|
|
7582
7625
|
}
|
|
7583
7626
|
|
|
7584
7627
|
try {
|
|
7585
|
-
const url = new URL(
|
|
7628
|
+
const url = new URL(theme, document.baseURI);
|
|
7586
7629
|
if (!this.crossOrigin && url.origin !== window.location.origin) {
|
|
7587
7630
|
console.error(
|
|
7588
7631
|
`Blocked cross-origin theme load from ${url.origin}. ` +
|
|
@@ -7593,7 +7636,7 @@ class YumeTheme extends HTMLElement {
|
|
|
7593
7636
|
const response = await fetch(url.href);
|
|
7594
7637
|
return await response.text();
|
|
7595
7638
|
} catch (e) {
|
|
7596
|
-
console.error(`Failed to load theme from ${
|
|
7639
|
+
console.error(`Failed to load theme from ${theme}:`, e);
|
|
7597
7640
|
return "";
|
|
7598
7641
|
}
|
|
7599
7642
|
}
|
package/dist/react.d.ts
CHANGED
|
@@ -16,12 +16,14 @@ declare module "react" {
|
|
|
16
16
|
size?: "small" | "medium" | "large";
|
|
17
17
|
"menu-direction"?: "right" | "down" | "";
|
|
18
18
|
sticky?: "start" | "end";
|
|
19
|
+
"mobile-breakpoint"?: string | number;
|
|
19
20
|
}>;
|
|
20
21
|
"y-avatar": El<{
|
|
21
22
|
src?: string;
|
|
22
23
|
alt?: string;
|
|
23
24
|
size?: "small" | "medium" | "large";
|
|
24
25
|
shape?: string;
|
|
26
|
+
color?: string;
|
|
25
27
|
}>;
|
|
26
28
|
"y-badge": El<{
|
|
27
29
|
value?: string;
|
|
@@ -62,13 +64,23 @@ declare module "react" {
|
|
|
62
64
|
disabled?: boolean | string;
|
|
63
65
|
indeterminate?: boolean | string;
|
|
64
66
|
"label-position"?: "top" | "bottom" | "left" | "right";
|
|
65
|
-
color?: string;
|
|
66
|
-
size?: string;
|
|
67
67
|
}>;
|
|
68
68
|
"y-dialog": El<{
|
|
69
69
|
visible?: boolean | string;
|
|
70
70
|
anchor?: string;
|
|
71
71
|
closable?: boolean | string;
|
|
72
|
+
"show-backdrop"?: boolean | string;
|
|
73
|
+
animate?: boolean | string;
|
|
74
|
+
position?:
|
|
75
|
+
| "center"
|
|
76
|
+
| "top-left"
|
|
77
|
+
| "top-center"
|
|
78
|
+
| "top-right"
|
|
79
|
+
| "left"
|
|
80
|
+
| "right"
|
|
81
|
+
| "bottom-left"
|
|
82
|
+
| "bottom-center"
|
|
83
|
+
| "bottom-right";
|
|
72
84
|
}>;
|
|
73
85
|
"y-drawer": El<{
|
|
74
86
|
visible?: boolean | string;
|
|
@@ -87,14 +99,10 @@ declare module "react" {
|
|
|
87
99
|
type?: string;
|
|
88
100
|
name?: string;
|
|
89
101
|
value?: string;
|
|
90
|
-
placeholder?: string;
|
|
91
102
|
disabled?: boolean | string;
|
|
92
103
|
invalid?: boolean | string;
|
|
93
|
-
required?: boolean | string;
|
|
94
|
-
color?: string;
|
|
95
104
|
size?: "small" | "medium" | "large";
|
|
96
|
-
label?:
|
|
97
|
-
"label-position"?: string;
|
|
105
|
+
"label-position"?: "top" | "bottom";
|
|
98
106
|
}>;
|
|
99
107
|
"y-menu": El<{
|
|
100
108
|
items?: string;
|
|
@@ -129,22 +137,19 @@ declare module "react" {
|
|
|
129
137
|
value?: string;
|
|
130
138
|
options?: string;
|
|
131
139
|
disabled?: boolean | string;
|
|
132
|
-
color?: string;
|
|
133
|
-
size?: string;
|
|
134
140
|
}>;
|
|
135
141
|
"y-select": El<{
|
|
136
142
|
name?: string;
|
|
137
143
|
value?: string;
|
|
138
144
|
disabled?: boolean | string;
|
|
139
145
|
multiple?: boolean | string;
|
|
140
|
-
|
|
141
|
-
size?: string;
|
|
146
|
+
size?: "small" | "medium" | "large";
|
|
142
147
|
placeholder?: string;
|
|
143
148
|
options?: string;
|
|
144
149
|
invalid?: boolean | string;
|
|
145
150
|
required?: boolean | string;
|
|
146
|
-
"label-position"?:
|
|
147
|
-
"display-mode"?:
|
|
151
|
+
"label-position"?: "top" | "bottom";
|
|
152
|
+
"display-mode"?: "tag";
|
|
148
153
|
"close-on-click-outside"?: string;
|
|
149
154
|
}>;
|
|
150
155
|
"y-slider": El<{
|
|
@@ -163,7 +168,7 @@ declare module "react" {
|
|
|
163
168
|
value?: string;
|
|
164
169
|
checked?: boolean | string;
|
|
165
170
|
disabled?: boolean | string;
|
|
166
|
-
animate?: string;
|
|
171
|
+
animate?: boolean | string;
|
|
167
172
|
"toggle-label"?: boolean | string;
|
|
168
173
|
"label-position"?: "top" | "bottom" | "left" | "right";
|
|
169
174
|
color?: string;
|
|
@@ -189,8 +194,7 @@ declare module "react" {
|
|
|
189
194
|
}>;
|
|
190
195
|
"y-theme": El<{
|
|
191
196
|
theme?: string;
|
|
192
|
-
|
|
193
|
-
"theme-path"?: string;
|
|
197
|
+
"cross-origin"?: boolean | string;
|
|
194
198
|
}>;
|
|
195
199
|
"y-toast": El<{
|
|
196
200
|
position?:
|