@rogieking/figui3 9.0.2 → 9.0.3
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/.cursor/skills/fig-editor/components.md +2 -2
- package/.cursor/skills/fig-editor/reference.md +2 -1
- package/.cursor/skills/figui3/components.md +2 -2
- package/.cursor/skills/figui3/reference.md +1 -1
- package/README.md +4 -2
- package/components.css +5 -1
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +2 -2
- package/dist/fig.css +1 -1
- package/dist/fig.js +1 -1
- package/fig-editor.css +4 -0
- package/fig-editor.js +14 -0
- package/fig.js +2 -1
- package/package.json +1 -1
package/fig-editor.css
CHANGED
package/fig-editor.js
CHANGED
|
@@ -494,6 +494,7 @@ figEditorDefineElement("fig-select-options", FigSelectOptions);
|
|
|
494
494
|
/**
|
|
495
495
|
* A dropdown-styled select.
|
|
496
496
|
* @attr {string} variant - Visual style. Use `ghost` for a borderless control.
|
|
497
|
+
* @attr {string} size - Control size. Use `large` for a 32px-tall control.
|
|
497
498
|
*/
|
|
498
499
|
class FigSelect extends HTMLElement {
|
|
499
500
|
#button = null;
|
|
@@ -537,6 +538,7 @@ class FigSelect extends HTMLElement {
|
|
|
537
538
|
"closedby",
|
|
538
539
|
"open",
|
|
539
540
|
"variant",
|
|
541
|
+
"size",
|
|
540
542
|
"aria-label",
|
|
541
543
|
];
|
|
542
544
|
}
|
|
@@ -564,6 +566,7 @@ class FigSelect extends HTMLElement {
|
|
|
564
566
|
this.#ensurePanelSlotAttrs();
|
|
565
567
|
this.#syncOptionsFromAttribute();
|
|
566
568
|
this.#syncDisabled();
|
|
569
|
+
this.#syncSize();
|
|
567
570
|
this.#syncPopupAttrs();
|
|
568
571
|
this.#syncValue();
|
|
569
572
|
this.#setupListeners();
|
|
@@ -593,6 +596,10 @@ class FigSelect extends HTMLElement {
|
|
|
593
596
|
this.#syncDisabled();
|
|
594
597
|
return;
|
|
595
598
|
}
|
|
599
|
+
if (name === "size") {
|
|
600
|
+
this.#syncSize();
|
|
601
|
+
return;
|
|
602
|
+
}
|
|
596
603
|
if (name === "open") {
|
|
597
604
|
if (newValue === null || newValue === "false") this.#closeList();
|
|
598
605
|
else this.#openList();
|
|
@@ -611,6 +618,13 @@ class FigSelect extends HTMLElement {
|
|
|
611
618
|
this.#button?.blur();
|
|
612
619
|
}
|
|
613
620
|
|
|
621
|
+
#syncSize() {
|
|
622
|
+
if (!this.#button) return;
|
|
623
|
+
const size = this.getAttribute("size");
|
|
624
|
+
if (size) this.#button.setAttribute("size", size);
|
|
625
|
+
else this.#button.removeAttribute("size");
|
|
626
|
+
}
|
|
627
|
+
|
|
614
628
|
#isMenuChild(node) {
|
|
615
629
|
return (
|
|
616
630
|
node?.nodeType === 1 &&
|
package/fig.js
CHANGED
|
@@ -906,6 +906,7 @@ figDefineElement("fig-button", FigButton);
|
|
|
906
906
|
* @attr {string} type - The dropdown type: "select" (default) or "dropdown"
|
|
907
907
|
* @attr {string} value - The currently selected value
|
|
908
908
|
* @attr {string} variant - Visual style. Use `ghost` for a borderless control.
|
|
909
|
+
* @attr {string} size - Control size. Use `large` for a 32px-tall control.
|
|
909
910
|
*/
|
|
910
911
|
class FigDropdown extends HTMLElement {
|
|
911
912
|
#label = "Menu";
|
|
@@ -1104,7 +1105,7 @@ class FigDropdown extends HTMLElement {
|
|
|
1104
1105
|
this.setAttribute("value", value);
|
|
1105
1106
|
}
|
|
1106
1107
|
static get observedAttributes() {
|
|
1107
|
-
return ["value", "type", "label", "disabled", "variant"];
|
|
1108
|
+
return ["value", "type", "label", "disabled", "variant", "size"];
|
|
1108
1109
|
}
|
|
1109
1110
|
#syncDisabled() {
|
|
1110
1111
|
const disabled =
|
package/package.json
CHANGED