@waggylabs/yumekit 0.4.0-beta.39 → 0.4.0-beta.40
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-drawer.js +32 -6
- package/dist/components/y-select.js +28 -11
- package/dist/components/y-slider.js +1 -1
- package/dist/icons/all.js +1 -1
- package/dist/index.js +62 -19
- package/dist/yumekit.min.js +1 -1
- package/package.json +1 -1
|
@@ -51,25 +51,37 @@ class YumeDrawer extends HTMLElement {
|
|
|
51
51
|
// -------------------------------------------------------------------------
|
|
52
52
|
|
|
53
53
|
/** Which anchor element ID triggers this drawer. */
|
|
54
|
-
get anchor() {
|
|
55
|
-
|
|
54
|
+
get anchor() {
|
|
55
|
+
return this.getAttribute("anchor");
|
|
56
|
+
}
|
|
57
|
+
set anchor(id) {
|
|
58
|
+
this.setAttribute("anchor", id);
|
|
59
|
+
}
|
|
56
60
|
|
|
57
61
|
/**
|
|
58
62
|
* Which edge the drawer slides in from.
|
|
59
63
|
* Accepted values: "left" | "right" | "top" | "bottom" (default "left").
|
|
60
64
|
*/
|
|
61
|
-
get position() {
|
|
62
|
-
|
|
65
|
+
get position() {
|
|
66
|
+
return this.getAttribute("position") || "left";
|
|
67
|
+
}
|
|
68
|
+
set position(val) {
|
|
69
|
+
this.setAttribute("position", val);
|
|
70
|
+
}
|
|
63
71
|
|
|
64
72
|
/** Whether the drawer is resizable by dragging. */
|
|
65
|
-
get resizable() {
|
|
73
|
+
get resizable() {
|
|
74
|
+
return this.hasAttribute("resizable");
|
|
75
|
+
}
|
|
66
76
|
set resizable(val) {
|
|
67
77
|
if (val) this.setAttribute("resizable", "");
|
|
68
78
|
else this.removeAttribute("resizable");
|
|
69
79
|
}
|
|
70
80
|
|
|
71
81
|
/** Whether the drawer is currently visible. */
|
|
72
|
-
get visible() {
|
|
82
|
+
get visible() {
|
|
83
|
+
return this.hasAttribute("visible");
|
|
84
|
+
}
|
|
73
85
|
set visible(val) {
|
|
74
86
|
if (val) this.setAttribute("visible", "");
|
|
75
87
|
else this.removeAttribute("visible");
|
|
@@ -278,6 +290,13 @@ class YumeDrawer extends HTMLElement {
|
|
|
278
290
|
padding: var(--component-drawer-handle-padding, 4px);
|
|
279
291
|
cursor: ew-resize;
|
|
280
292
|
}
|
|
293
|
+
|
|
294
|
+
.drawer-panel[data-position="left"] > .resize-handle svg,
|
|
295
|
+
.drawer-panel[data-position="right"] > .resize-handle svg {
|
|
296
|
+
width: 16px;
|
|
297
|
+
height: 24px;
|
|
298
|
+
flex-shrink: 0;
|
|
299
|
+
}
|
|
281
300
|
.drawer-panel[data-position="left"] > .resize-handle {
|
|
282
301
|
order: 99;
|
|
283
302
|
}
|
|
@@ -291,6 +310,13 @@ class YumeDrawer extends HTMLElement {
|
|
|
291
310
|
padding: var(--component-drawer-handle-padding, 4px);
|
|
292
311
|
cursor: ns-resize;
|
|
293
312
|
}
|
|
313
|
+
|
|
314
|
+
.drawer-panel[data-position="top"] > .resize-handle svg,
|
|
315
|
+
.drawer-panel[data-position="bottom"] > .resize-handle svg {
|
|
316
|
+
width: 24px;
|
|
317
|
+
height: 16px;
|
|
318
|
+
flex-shrink: 0;
|
|
319
|
+
}
|
|
294
320
|
.drawer-panel[data-position="top"] > .resize-handle {
|
|
295
321
|
order: 99;
|
|
296
322
|
}
|
|
@@ -486,14 +486,22 @@ class YumeSelect extends HTMLElement {
|
|
|
486
486
|
// Clear button click → clear selection
|
|
487
487
|
this.clearButton?.addEventListener("click", (e) => {
|
|
488
488
|
e.stopPropagation();
|
|
489
|
-
this.
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
this.
|
|
493
|
-
this.
|
|
494
|
-
this.
|
|
495
|
-
|
|
496
|
-
|
|
489
|
+
if (this.hasAttribute("multiple")) {
|
|
490
|
+
this.selectedValues = new Set();
|
|
491
|
+
this.setAttribute("value", "");
|
|
492
|
+
this._renderTags();
|
|
493
|
+
this._updateSelectedStyles();
|
|
494
|
+
if (this.clearButton) this.clearButton.style.display = "none";
|
|
495
|
+
} else {
|
|
496
|
+
this.value = "";
|
|
497
|
+
this._filterOptions("");
|
|
498
|
+
if (this.searchInput) {
|
|
499
|
+
this.searchInput.value = "";
|
|
500
|
+
this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
|
|
501
|
+
this.searchInput.focus();
|
|
502
|
+
if (!this.dropdown.classList.contains("open")) {
|
|
503
|
+
this._openDropdown();
|
|
504
|
+
}
|
|
497
505
|
}
|
|
498
506
|
}
|
|
499
507
|
this.dispatchEvent(new CustomEvent("change", {
|
|
@@ -577,15 +585,14 @@ class YumeSelect extends HTMLElement {
|
|
|
577
585
|
const showClearButton = (isSearchable || isClearable) && !isMulti;
|
|
578
586
|
const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
|
|
579
587
|
const placeholder = this.getAttribute("placeholder") || "Select...";
|
|
588
|
+
const clearButtonHTML = `<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="small"></y-icon></button>`;
|
|
580
589
|
|
|
581
590
|
let containerInner;
|
|
582
591
|
if (isSearchable && !isMulti) {
|
|
583
592
|
// Single searchable: inline input replacing the value display
|
|
584
593
|
containerInner = `
|
|
585
594
|
<input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
|
|
586
|
-
|
|
587
|
-
<y-icon name="close" size="small"></y-icon>
|
|
588
|
-
</button>
|
|
595
|
+
${clearButtonHTML}
|
|
589
596
|
`;
|
|
590
597
|
} else if (isSearchable && isMulti && isTagMode) {
|
|
591
598
|
// Multi-tag searchable: input lives inside the value display after tags
|
|
@@ -593,6 +600,13 @@ class YumeSelect extends HTMLElement {
|
|
|
593
600
|
<div class="value-display">
|
|
594
601
|
<input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
|
|
595
602
|
</div>
|
|
603
|
+
${isClearable ? clearButtonHTML : ""}
|
|
604
|
+
`;
|
|
605
|
+
} else if (isMulti && isTagMode) {
|
|
606
|
+
// Multi-tag (non-searchable): tags + optional clear button
|
|
607
|
+
containerInner = `
|
|
608
|
+
<div class="value-display"></div>
|
|
609
|
+
${isClearable ? clearButtonHTML : ""}
|
|
596
610
|
`;
|
|
597
611
|
} else if (showClearButton) {
|
|
598
612
|
// Clearable but not searchable: value display + clear button
|
|
@@ -763,6 +777,9 @@ class YumeSelect extends HTMLElement {
|
|
|
763
777
|
|
|
764
778
|
if (isTagMode) {
|
|
765
779
|
this._renderTags();
|
|
780
|
+
if (isClearable && this.clearButton) {
|
|
781
|
+
this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
|
|
782
|
+
}
|
|
766
783
|
} else if (isSearchable && !isMulti && this.searchInput) {
|
|
767
784
|
// Update inline search input to reflect current selection
|
|
768
785
|
const isOpen = this.dropdown?.classList.contains("open");
|
|
@@ -300,7 +300,7 @@ class YumeSlider extends HTMLElement {
|
|
|
300
300
|
error: "var(--error-background-hover)",
|
|
301
301
|
help: "var(--help-background-hover)",
|
|
302
302
|
};
|
|
303
|
-
return colorMap[color] || color
|
|
303
|
+
return colorMap[color] || `color-mix(in srgb, ${color} 40%, transparent)`;
|
|
304
304
|
}
|
|
305
305
|
|
|
306
306
|
_snapToStep(val) {
|
package/dist/icons/all.js
CHANGED
|
@@ -102,7 +102,7 @@ var compTooltip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24
|
|
|
102
102
|
|
|
103
103
|
var compTextarea = "<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=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"7\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n <line x1=\"15\" y1=\"19\" x2=\"19\" y2=\"15\"/>\n <line x1=\"18\" y1=\"19\" x2=\"19\" y2=\"18\"/>\n</svg>\n";
|
|
104
104
|
|
|
105
|
-
var compRating = "<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 <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"
|
|
105
|
+
var compRating = "<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 <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
|
|
106
106
|
|
|
107
107
|
var compass = "<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 <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
|
|
108
108
|
|
package/dist/index.js
CHANGED
|
@@ -131,7 +131,7 @@ var compTooltip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24
|
|
|
131
131
|
|
|
132
132
|
var compTextarea = "<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=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"7\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n <line x1=\"15\" y1=\"19\" x2=\"19\" y2=\"15\"/>\n <line x1=\"18\" y1=\"19\" x2=\"19\" y2=\"18\"/>\n</svg>\n";
|
|
133
133
|
|
|
134
|
-
var compRating = "<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 <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"
|
|
134
|
+
var compRating = "<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 <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
|
|
135
135
|
|
|
136
136
|
var compass = "<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 <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
|
|
137
137
|
|
|
@@ -3338,25 +3338,37 @@ class YumeDrawer extends HTMLElement {
|
|
|
3338
3338
|
// -------------------------------------------------------------------------
|
|
3339
3339
|
|
|
3340
3340
|
/** Which anchor element ID triggers this drawer. */
|
|
3341
|
-
get anchor() {
|
|
3342
|
-
|
|
3341
|
+
get anchor() {
|
|
3342
|
+
return this.getAttribute("anchor");
|
|
3343
|
+
}
|
|
3344
|
+
set anchor(id) {
|
|
3345
|
+
this.setAttribute("anchor", id);
|
|
3346
|
+
}
|
|
3343
3347
|
|
|
3344
3348
|
/**
|
|
3345
3349
|
* Which edge the drawer slides in from.
|
|
3346
3350
|
* Accepted values: "left" | "right" | "top" | "bottom" (default "left").
|
|
3347
3351
|
*/
|
|
3348
|
-
get position() {
|
|
3349
|
-
|
|
3352
|
+
get position() {
|
|
3353
|
+
return this.getAttribute("position") || "left";
|
|
3354
|
+
}
|
|
3355
|
+
set position(val) {
|
|
3356
|
+
this.setAttribute("position", val);
|
|
3357
|
+
}
|
|
3350
3358
|
|
|
3351
3359
|
/** Whether the drawer is resizable by dragging. */
|
|
3352
|
-
get resizable() {
|
|
3360
|
+
get resizable() {
|
|
3361
|
+
return this.hasAttribute("resizable");
|
|
3362
|
+
}
|
|
3353
3363
|
set resizable(val) {
|
|
3354
3364
|
if (val) this.setAttribute("resizable", "");
|
|
3355
3365
|
else this.removeAttribute("resizable");
|
|
3356
3366
|
}
|
|
3357
3367
|
|
|
3358
3368
|
/** Whether the drawer is currently visible. */
|
|
3359
|
-
get visible() {
|
|
3369
|
+
get visible() {
|
|
3370
|
+
return this.hasAttribute("visible");
|
|
3371
|
+
}
|
|
3360
3372
|
set visible(val) {
|
|
3361
3373
|
if (val) this.setAttribute("visible", "");
|
|
3362
3374
|
else this.removeAttribute("visible");
|
|
@@ -3565,6 +3577,13 @@ class YumeDrawer extends HTMLElement {
|
|
|
3565
3577
|
padding: var(--component-drawer-handle-padding, 4px);
|
|
3566
3578
|
cursor: ew-resize;
|
|
3567
3579
|
}
|
|
3580
|
+
|
|
3581
|
+
.drawer-panel[data-position="left"] > .resize-handle svg,
|
|
3582
|
+
.drawer-panel[data-position="right"] > .resize-handle svg {
|
|
3583
|
+
width: 16px;
|
|
3584
|
+
height: 24px;
|
|
3585
|
+
flex-shrink: 0;
|
|
3586
|
+
}
|
|
3568
3587
|
.drawer-panel[data-position="left"] > .resize-handle {
|
|
3569
3588
|
order: 99;
|
|
3570
3589
|
}
|
|
@@ -3578,6 +3597,13 @@ class YumeDrawer extends HTMLElement {
|
|
|
3578
3597
|
padding: var(--component-drawer-handle-padding, 4px);
|
|
3579
3598
|
cursor: ns-resize;
|
|
3580
3599
|
}
|
|
3600
|
+
|
|
3601
|
+
.drawer-panel[data-position="top"] > .resize-handle svg,
|
|
3602
|
+
.drawer-panel[data-position="bottom"] > .resize-handle svg {
|
|
3603
|
+
width: 24px;
|
|
3604
|
+
height: 16px;
|
|
3605
|
+
flex-shrink: 0;
|
|
3606
|
+
}
|
|
3581
3607
|
.drawer-panel[data-position="top"] > .resize-handle {
|
|
3582
3608
|
order: 99;
|
|
3583
3609
|
}
|
|
@@ -5889,14 +5915,22 @@ class YumeSelect extends HTMLElement {
|
|
|
5889
5915
|
// Clear button click → clear selection
|
|
5890
5916
|
this.clearButton?.addEventListener("click", (e) => {
|
|
5891
5917
|
e.stopPropagation();
|
|
5892
|
-
this.
|
|
5893
|
-
|
|
5894
|
-
|
|
5895
|
-
this.
|
|
5896
|
-
this.
|
|
5897
|
-
this.
|
|
5898
|
-
|
|
5899
|
-
|
|
5918
|
+
if (this.hasAttribute("multiple")) {
|
|
5919
|
+
this.selectedValues = new Set();
|
|
5920
|
+
this.setAttribute("value", "");
|
|
5921
|
+
this._renderTags();
|
|
5922
|
+
this._updateSelectedStyles();
|
|
5923
|
+
if (this.clearButton) this.clearButton.style.display = "none";
|
|
5924
|
+
} else {
|
|
5925
|
+
this.value = "";
|
|
5926
|
+
this._filterOptions("");
|
|
5927
|
+
if (this.searchInput) {
|
|
5928
|
+
this.searchInput.value = "";
|
|
5929
|
+
this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
|
|
5930
|
+
this.searchInput.focus();
|
|
5931
|
+
if (!this.dropdown.classList.contains("open")) {
|
|
5932
|
+
this._openDropdown();
|
|
5933
|
+
}
|
|
5900
5934
|
}
|
|
5901
5935
|
}
|
|
5902
5936
|
this.dispatchEvent(new CustomEvent("change", {
|
|
@@ -5980,15 +6014,14 @@ class YumeSelect extends HTMLElement {
|
|
|
5980
6014
|
const showClearButton = (isSearchable || isClearable) && !isMulti;
|
|
5981
6015
|
const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
|
|
5982
6016
|
const placeholder = this.getAttribute("placeholder") || "Select...";
|
|
6017
|
+
const clearButtonHTML = `<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="small"></y-icon></button>`;
|
|
5983
6018
|
|
|
5984
6019
|
let containerInner;
|
|
5985
6020
|
if (isSearchable && !isMulti) {
|
|
5986
6021
|
// Single searchable: inline input replacing the value display
|
|
5987
6022
|
containerInner = `
|
|
5988
6023
|
<input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
|
|
5989
|
-
|
|
5990
|
-
<y-icon name="close" size="small"></y-icon>
|
|
5991
|
-
</button>
|
|
6024
|
+
${clearButtonHTML}
|
|
5992
6025
|
`;
|
|
5993
6026
|
} else if (isSearchable && isMulti && isTagMode) {
|
|
5994
6027
|
// Multi-tag searchable: input lives inside the value display after tags
|
|
@@ -5996,6 +6029,13 @@ class YumeSelect extends HTMLElement {
|
|
|
5996
6029
|
<div class="value-display">
|
|
5997
6030
|
<input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
|
|
5998
6031
|
</div>
|
|
6032
|
+
${isClearable ? clearButtonHTML : ""}
|
|
6033
|
+
`;
|
|
6034
|
+
} else if (isMulti && isTagMode) {
|
|
6035
|
+
// Multi-tag (non-searchable): tags + optional clear button
|
|
6036
|
+
containerInner = `
|
|
6037
|
+
<div class="value-display"></div>
|
|
6038
|
+
${isClearable ? clearButtonHTML : ""}
|
|
5999
6039
|
`;
|
|
6000
6040
|
} else if (showClearButton) {
|
|
6001
6041
|
// Clearable but not searchable: value display + clear button
|
|
@@ -6166,6 +6206,9 @@ class YumeSelect extends HTMLElement {
|
|
|
6166
6206
|
|
|
6167
6207
|
if (isTagMode) {
|
|
6168
6208
|
this._renderTags();
|
|
6209
|
+
if (isClearable && this.clearButton) {
|
|
6210
|
+
this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
|
|
6211
|
+
}
|
|
6169
6212
|
} else if (isSearchable && !isMulti && this.searchInput) {
|
|
6170
6213
|
// Update inline search input to reflect current selection
|
|
6171
6214
|
const isOpen = this.dropdown?.classList.contains("open");
|
|
@@ -6513,7 +6556,7 @@ class YumeSlider extends HTMLElement {
|
|
|
6513
6556
|
error: "var(--error-background-hover)",
|
|
6514
6557
|
help: "var(--help-background-hover)",
|
|
6515
6558
|
};
|
|
6516
|
-
return colorMap[color] || color
|
|
6559
|
+
return colorMap[color] || `color-mix(in srgb, ${color} 40%, transparent)`;
|
|
6517
6560
|
}
|
|
6518
6561
|
|
|
6519
6562
|
_snapToStep(val) {
|