@rogieking/figui3 1.1.8 → 1.2.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.css +5 -4
- package/fig.js +14 -4
- package/package.json +1 -1
package/fig.css
CHANGED
|
@@ -1462,6 +1462,9 @@ fig-slider {
|
|
|
1462
1462
|
display: block;
|
|
1463
1463
|
width: 100%;
|
|
1464
1464
|
transition: var(--slider-transition);
|
|
1465
|
+
background: var(--figma-color-bg-secondary);
|
|
1466
|
+
border-radius: 0.5rem;
|
|
1467
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1465
1468
|
|
|
1466
1469
|
/* Track */
|
|
1467
1470
|
&::before {
|
|
@@ -1559,6 +1562,7 @@ fig-slider {
|
|
|
1559
1562
|
width: 100%;
|
|
1560
1563
|
background-color: transparent;
|
|
1561
1564
|
transition: var(--slider-transition);
|
|
1565
|
+
position: relative;
|
|
1562
1566
|
|
|
1563
1567
|
&:active::-webkit-slider-thumb {
|
|
1564
1568
|
cursor: grabbing;
|
|
@@ -1609,8 +1613,6 @@ fig-slider {
|
|
|
1609
1613
|
background-color: transparent;
|
|
1610
1614
|
transition: var(--slider-transition);
|
|
1611
1615
|
border-radius: calc(var(--slider-height) / 2);
|
|
1612
|
-
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1613
|
-
background: var(--figma-color-bg-secondary);
|
|
1614
1616
|
}
|
|
1615
1617
|
|
|
1616
1618
|
&.hue::-webkit-slider-runnable-track {
|
|
@@ -1633,6 +1635,7 @@ fig-slider {
|
|
|
1633
1635
|
width: 100%;
|
|
1634
1636
|
background-color: transparent;
|
|
1635
1637
|
transition: var(--slider-transition);
|
|
1638
|
+
position: relative;
|
|
1636
1639
|
|
|
1637
1640
|
&:focus {
|
|
1638
1641
|
outline: none;
|
|
@@ -1681,8 +1684,6 @@ fig-slider {
|
|
|
1681
1684
|
height: var(--slider-height);
|
|
1682
1685
|
background-color: transparent;
|
|
1683
1686
|
border-radius: calc(var(--slider-height) / 2);
|
|
1684
|
-
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1685
|
-
background: var(--figma-color-bg-secondary);
|
|
1686
1687
|
transition: var(--slider-transition);
|
|
1687
1688
|
}
|
|
1688
1689
|
|
package/fig.js
CHANGED
|
@@ -936,7 +936,11 @@ class FigInputText extends HTMLElement {
|
|
|
936
936
|
#handleMouseMove(e) {
|
|
937
937
|
if (e.altKey) {
|
|
938
938
|
const step = (this.step || 1) * e.movementX;
|
|
939
|
-
const value = this.#sanitizeInput(
|
|
939
|
+
const value = this.#sanitizeInput(
|
|
940
|
+
Number(this.value) + step,
|
|
941
|
+
false
|
|
942
|
+
).toFixed(2);
|
|
943
|
+
console.log("MM:", value, this.max);
|
|
940
944
|
this.setAttribute("value", value);
|
|
941
945
|
}
|
|
942
946
|
}
|
|
@@ -962,15 +966,21 @@ class FigInputText extends HTMLElement {
|
|
|
962
966
|
window.removeEventListener("pointermove", this.#boundMouseMove);
|
|
963
967
|
window.removeEventListener("pointerup", this.#boundMouseUp);
|
|
964
968
|
}
|
|
965
|
-
#sanitizeInput(value) {
|
|
969
|
+
#sanitizeInput(value, transform = true) {
|
|
966
970
|
let sanitized = value;
|
|
967
971
|
if (this.type === "number") {
|
|
968
972
|
sanitized = Number(sanitized);
|
|
969
973
|
if (typeof this.min === "number") {
|
|
970
|
-
sanitized = Math.max(
|
|
974
|
+
sanitized = Math.max(
|
|
975
|
+
transform ? this.#transformNumber(this.min) : this.min,
|
|
976
|
+
sanitized
|
|
977
|
+
);
|
|
971
978
|
}
|
|
972
979
|
if (typeof this.max === "number") {
|
|
973
|
-
sanitized = Math.min(
|
|
980
|
+
sanitized = Math.min(
|
|
981
|
+
transform ? this.#transformNumber(this.max) : this.max,
|
|
982
|
+
sanitized
|
|
983
|
+
);
|
|
974
984
|
}
|
|
975
985
|
}
|
|
976
986
|
return sanitized;
|