@rogieking/figui3 2.12.2 → 2.13.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/fig.js +8 -1
- package/index.html +29 -1
- package/package.json +1 -1
package/fig.js
CHANGED
|
@@ -847,6 +847,8 @@ class FigDialog extends HTMLDialogElement {
|
|
|
847
847
|
"textarea",
|
|
848
848
|
"a",
|
|
849
849
|
"label",
|
|
850
|
+
"details",
|
|
851
|
+
"summary",
|
|
850
852
|
'[contenteditable="true"]',
|
|
851
853
|
"[tabindex]",
|
|
852
854
|
];
|
|
@@ -893,6 +895,11 @@ class FigDialog extends HTMLDialogElement {
|
|
|
893
895
|
return;
|
|
894
896
|
}
|
|
895
897
|
|
|
898
|
+
// Don't interfere with interactive elements (inputs, sliders, buttons, etc.)
|
|
899
|
+
if (this.#isInteractiveElement(e.target)) {
|
|
900
|
+
return;
|
|
901
|
+
}
|
|
902
|
+
|
|
896
903
|
// If handle attribute is specified, only allow drag from within that element
|
|
897
904
|
// Otherwise, allow dragging from anywhere on the dialog (except interactive elements)
|
|
898
905
|
const handleSelector = this.getAttribute("handle");
|
|
@@ -905,7 +912,7 @@ class FigDialog extends HTMLDialogElement {
|
|
|
905
912
|
// No handle specified = drag from anywhere (original behavior)
|
|
906
913
|
|
|
907
914
|
// Don't prevent default yet - just set up pending drag
|
|
908
|
-
// This allows clicks on interactive elements like <details> to work
|
|
915
|
+
// This allows clicks on non-interactive elements like <details> to work
|
|
909
916
|
this.#dragPending = true;
|
|
910
917
|
this.#dragStartPos.x = e.clientX;
|
|
911
918
|
this.#dragStartPos.y = e.clientY;
|
package/index.html
CHANGED
|
@@ -683,9 +683,21 @@
|
|
|
683
683
|
<fig-content>
|
|
684
684
|
<p>This is a draggable dialog. You can drag it by the header.</p>
|
|
685
685
|
<fig-field direction="horizontal">
|
|
686
|
-
<label>
|
|
686
|
+
<label>Text</label>
|
|
687
687
|
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
688
688
|
</fig-field>
|
|
689
|
+
<fig-field direction="horizontal">
|
|
690
|
+
<label>Number</label>
|
|
691
|
+
<fig-input-number value="50" min="0" max="100" units="px"></fig-input-number>
|
|
692
|
+
</fig-field>
|
|
693
|
+
<fig-field direction="horizontal">
|
|
694
|
+
<label>Slider</label>
|
|
695
|
+
<fig-slider value="50" min="0" max="100"></fig-slider>
|
|
696
|
+
</fig-field>
|
|
697
|
+
<fig-field direction="horizontal">
|
|
698
|
+
<label>Checkbox</label>
|
|
699
|
+
<fig-checkbox checked="true">Enable feature</fig-checkbox>
|
|
700
|
+
</fig-field>
|
|
689
701
|
<details>
|
|
690
702
|
<summary>More options</summary>
|
|
691
703
|
<fig-field direction="horizontal">
|
|
@@ -735,6 +747,14 @@
|
|
|
735
747
|
</fig-header>
|
|
736
748
|
<fig-content>
|
|
737
749
|
<p>This dialog is positioned at a specific corner.</p>
|
|
750
|
+
<fig-field direction="horizontal">
|
|
751
|
+
<label>Number</label>
|
|
752
|
+
<fig-input-number value="100" units="%"></fig-input-number>
|
|
753
|
+
</fig-field>
|
|
754
|
+
<fig-field direction="horizontal">
|
|
755
|
+
<label>Slider</label>
|
|
756
|
+
<fig-slider value="50" min="0" max="100"></fig-slider>
|
|
757
|
+
</fig-field>
|
|
738
758
|
</fig-content>
|
|
739
759
|
<footer>
|
|
740
760
|
<fig-button close-dialog>Close</fig-button>
|
|
@@ -778,6 +798,14 @@
|
|
|
778
798
|
<li>✗ This content area (won't drag)</li>
|
|
779
799
|
<li>✗ The footer below (won't drag)</li>
|
|
780
800
|
</ul>
|
|
801
|
+
<fig-field direction="horizontal">
|
|
802
|
+
<label>Number</label>
|
|
803
|
+
<fig-input-number value="45" units="°" min="0" max="360"></fig-input-number>
|
|
804
|
+
</fig-field>
|
|
805
|
+
<fig-field direction="horizontal">
|
|
806
|
+
<label>Slider</label>
|
|
807
|
+
<fig-slider value="50" min="0" max="100"></fig-slider>
|
|
808
|
+
</fig-field>
|
|
781
809
|
<details>
|
|
782
810
|
<summary>More options</summary>
|
|
783
811
|
<fig-field direction="horizontal">
|
package/package.json
CHANGED