@rogieking/figui3 11.3.3 → 11.4.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/.cursor/skills/figui3/components.md +11 -0
- package/.cursor/skills/figui3/react.md +1 -0
- package/.cursor/skills/figui3/reference.md +1 -0
- package/CHANGELOG.md +21 -0
- package/README.md +27 -2
- package/components.css +54 -17
- 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 +6 -6
- package/fig-editor.css +1 -5
- package/fig-editor.js +14 -0
- package/fig.js +574 -107
- package/package.json +1 -1
package/fig-editor.css
CHANGED
|
@@ -141,13 +141,9 @@ dialog[is="fig-toast"] {
|
|
|
141
141
|
|
|
142
142
|
/* Palette Editor */
|
|
143
143
|
.fig-palette-editor-popup {
|
|
144
|
-
width:
|
|
144
|
+
width: 12rem;
|
|
145
145
|
padding: 0;
|
|
146
146
|
pointer-events: auto;
|
|
147
|
-
|
|
148
|
-
& > fig-content {
|
|
149
|
-
padding-top: 0;
|
|
150
|
-
}
|
|
151
147
|
}
|
|
152
148
|
|
|
153
149
|
fig-palette-editor {
|
package/fig-editor.js
CHANGED
|
@@ -539,6 +539,17 @@ class FigPaletteEditor extends HTMLElement {
|
|
|
539
539
|
this.#emit("change");
|
|
540
540
|
};
|
|
541
541
|
|
|
542
|
+
#focusColorValue(index) {
|
|
543
|
+
requestAnimationFrame(() => {
|
|
544
|
+
if (!this.isConnected) return;
|
|
545
|
+
const input = this.querySelector(
|
|
546
|
+
`.fig-palette-editor-color-row[data-index="${index}"] .fig-palette-editor-color fig-input-text input`,
|
|
547
|
+
);
|
|
548
|
+
input?.focus();
|
|
549
|
+
input?.select();
|
|
550
|
+
});
|
|
551
|
+
}
|
|
552
|
+
|
|
542
553
|
#render() {
|
|
543
554
|
const reorder = figEditorCreateElement(
|
|
544
555
|
"fig-reorder",
|
|
@@ -567,6 +578,7 @@ class FigPaletteEditor extends HTMLElement {
|
|
|
567
578
|
);
|
|
568
579
|
addButton.addEventListener("click", () => {
|
|
569
580
|
if (this.#disabled || this.#colors.length >= this.#max) return;
|
|
581
|
+
const addedIndex = this.#colors.length;
|
|
570
582
|
this.#colors.push(
|
|
571
583
|
figEditorAveragePaletteEntries(
|
|
572
584
|
this.#colors.at(-2),
|
|
@@ -577,6 +589,7 @@ class FigPaletteEditor extends HTMLElement {
|
|
|
577
589
|
this.#render();
|
|
578
590
|
this.#emit("input");
|
|
579
591
|
this.#emit("change");
|
|
592
|
+
this.#focusColorValue(addedIndex);
|
|
580
593
|
});
|
|
581
594
|
children.push(figEditorCreateElement("fig-field", {}, addButton));
|
|
582
595
|
}
|
|
@@ -6443,6 +6456,7 @@ class FigReorder extends HTMLElement {
|
|
|
6443
6456
|
"fig-input-gradient",
|
|
6444
6457
|
"fig-easing-curve",
|
|
6445
6458
|
"fig-angle",
|
|
6459
|
+
"fig-audio",
|
|
6446
6460
|
"fig-audio-waveform",
|
|
6447
6461
|
"fig-input-wheel",
|
|
6448
6462
|
"fig-joystick",
|